From acb70c60fea0838e2b72874dfc3931fb6bc87442 Mon Sep 17 00:00:00 2001
From: Siddharth <siddharthtiwarikreplind@gmail.com>
Date: Fri, 7 Feb 2025 15:23:44 +0530
Subject: [PATCH] chore: remove pending balance (#1384)

---
 apps/customer-portal/app/page.tsx             | 83 +++++--------------
 .../customer-portal/app/user-details-card.tsx | 59 +++++++++++++
 .../components/balance-card/index.tsx         | 41 +++++----
 lib/js/shared-web/src/ui/badge.tsx            |  5 +-
 4 files changed, 108 insertions(+), 80 deletions(-)
 create mode 100644 apps/customer-portal/app/user-details-card.tsx

diff --git a/apps/customer-portal/app/page.tsx b/apps/customer-portal/app/page.tsx
index 9a6ff0350..2470559de 100644
--- a/apps/customer-portal/app/page.tsx
+++ b/apps/customer-portal/app/page.tsx
@@ -1,7 +1,5 @@
-import { ArrowDownUp, CreditCard, Clock, CheckCircle2 } from "lucide-react"
+import { ArrowDownUp, CreditCard, Wallet } from "lucide-react"
 
-import { DetailItemProps, DetailsCard } from "@lana/web/components/details"
-import { Badge } from "@lana/web/ui/badge"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@lana/web/ui/tab"
 
 import { Alert, AlertDescription, AlertTitle } from "@lana/web/ui/alert"
@@ -11,9 +9,10 @@ import React from "react"
 import { CustomerTransactionsTable } from "./transaction"
 import { CustomerCreditFacilitiesTable } from "./credit-facility"
 
+import UserDetailsCard from "./user-details-card"
+
 import { meQuery } from "@/lib/graphql/query/me"
-import { AccountStatus, KycLevel } from "@/lib/graphql/generated"
-import { formatDate } from "@/lib/utils"
+import { KycLevel } from "@/lib/graphql/generated"
 import { BalanceCard } from "@/components/balance-card"
 import Balance from "@/components/balance"
 
@@ -23,29 +22,11 @@ export default async function Home() {
     return <div className="text-destructive">{data.message}</div>
   }
 
-  const customer = data.me?.customer
+  const totalBalanceInCents =
+    data.me?.customer.depositAccount.balance.settled +
+    data.me?.customer.depositAccount.balance.pending
 
-  const details: DetailItemProps[] = [
-    {
-      label: "Email",
-      value: customer.email,
-    },
-    { label: "Joined On", value: formatDate(customer.createdAt) },
-    {
-      label: "Telegram",
-      value: customer.telegramId,
-    },
-    {
-      label: "Account Status",
-      value: (
-        <Badge
-          variant={customer.status === AccountStatus.Active ? "success" : "secondary"}
-        >
-          {customer.status}
-        </Badge>
-      ),
-    },
-  ]
+  const customer = data.me?.customer
 
   const transactions = [
     ...(customer?.depositAccount.deposits || []),
@@ -57,51 +38,31 @@ export default async function Home() {
   return (
     <main className="max-w-7xl mx-auto px-2 flex flex-col gap-2">
       <Message level={customer.level} />
-      <DetailsCard
-        title={<div className="text-md font-medium text-primary">Welcome Back!</div>}
-        details={details}
-      />
-      <div className="flex flex-col md:flex-row gap-2">
-        <BalanceCard
-          icon={<Clock className="h-4 w-4 text-orange-500" />}
-          title="Pending Balance"
-          description="Funds in process, not available yet"
-          h1={
-            <Balance
-              amount={data.me?.customer.depositAccount.balance.pending}
-              currency="usd"
-            />
-          }
-          variant="pending"
-        />
+      <div className="block md:hidden">
         <BalanceCard
-          icon={<CheckCircle2 className="h-4 w-4 text-green-500" />}
-          title="Settled Balance"
-          description="Funds ready to use or withdraw"
-          h1={
-            <Balance
-              amount={data.me?.customer.depositAccount.balance.settled}
-              currency="usd"
-            />
-          }
-          variant="settled"
+          icon={<Wallet className="h-4 w-4 text-foreground dark:text-foreground" />}
+          title="Balance"
+          h1={<Balance amount={totalBalanceInCents} currency="usd" />}
+          variant="balance"
         />
       </div>
-      <Tabs defaultValue="transactions" className="w-full">
+      <UserDetailsCard customer={customer} totalBalanceInCents={totalBalanceInCents} />
+
+      <Tabs defaultValue="credit-facilities" className="w-full">
         <TabsList className="flex h-12 w-full items-center rounded-lg bg-muted p-1">
           <TabsTrigger
-            value="transactions"
+            value="credit-facilities"
             className="flex h-full flex-1 items-center justify-center gap-2 rounded-md data-[state=active]:bg-background data-[state=active]:text-primary"
           >
-            <ArrowDownUp className="h-4 w-4" />
-            Transactions
+            <CreditCard className="h-4 w-4" />
+            Credit Facilities
           </TabsTrigger>
           <TabsTrigger
-            value="credit-facilities"
+            value="transactions"
             className="flex h-full flex-1 items-center justify-center gap-2 rounded-md data-[state=active]:bg-background data-[state=active]:text-primary"
           >
-            <CreditCard className="h-4 w-4" />
-            Credit Facilities
+            <ArrowDownUp className="h-4 w-4" />
+            Transactions
           </TabsTrigger>
         </TabsList>
         <TabsContent value="transactions" className="mt-2">
diff --git a/apps/customer-portal/app/user-details-card.tsx b/apps/customer-portal/app/user-details-card.tsx
new file mode 100644
index 000000000..22a1d211d
--- /dev/null
+++ b/apps/customer-portal/app/user-details-card.tsx
@@ -0,0 +1,59 @@
+"use client"
+import { DetailItemProps, DetailsCard } from "@lana/web/components/details"
+import { Badge } from "@lana/web/ui/badge"
+
+import React from "react"
+
+import { useBreakpointDown } from "@lana/web/hooks"
+
+import { AccountStatus, MeQuery } from "@/lib/graphql/generated"
+import Balance from "@/components/balance"
+import { formatDate } from "@/lib/utils"
+
+function UserDetailsCard({
+  customer,
+  totalBalanceInCents,
+}: {
+  customer: NonNullable<MeQuery["me"]["customer"]>
+  totalBalanceInCents: number
+}) {
+  const isMobile = useBreakpointDown("md")
+
+  const details: DetailItemProps[] = [
+    ...(!isMobile
+      ? [
+          {
+            label: "Balance",
+            value: <Balance amount={totalBalanceInCents} currency="usd" />,
+          },
+        ]
+      : []),
+    {
+      label: "Joined on",
+      value: formatDate(customer.createdAt),
+    },
+    {
+      label: "Telegram",
+      value: customer.telegramId,
+    },
+    {
+      label: "Account Status",
+      value: (
+        <Badge
+          variant={customer.status === AccountStatus.Active ? "success" : "secondary"}
+        >
+          {customer.status}
+        </Badge>
+      ),
+    },
+  ]
+
+  return (
+    <DetailsCard
+      title={<div className="text-md font-semibold text-primary">{customer.email}</div>}
+      details={details}
+    />
+  )
+}
+
+export default UserDetailsCard
diff --git a/apps/customer-portal/components/balance-card/index.tsx b/apps/customer-portal/components/balance-card/index.tsx
index 1531e1e74..c8972d88d 100644
--- a/apps/customer-portal/components/balance-card/index.tsx
+++ b/apps/customer-portal/components/balance-card/index.tsx
@@ -4,9 +4,9 @@ import { ReactNode } from "react"
 type BalanceCardProps = {
   h1?: ReactNode
   title: string
-  description: string
+  description?: string
   icon?: ReactNode
-  variant?: "pending" | "settled"
+  variant?: "pending" | "settled" | "balance"
 }
 
 export const BalanceCard: React.FC<BalanceCardProps> = ({
@@ -14,14 +14,29 @@ export const BalanceCard: React.FC<BalanceCardProps> = ({
   title,
   description,
   icon,
-  variant = "pending",
+  variant = "balance",
 }) => {
-  const getVariantClasses = (variant: "pending" | "settled") => {
+  const getVariantClasses = (variant: "pending" | "settled" | "balance") => {
     switch (variant) {
       case "pending":
         return "border-orange-200 bg-orange-50 dark:bg-orange-950 dark:border-orange-800"
       case "settled":
         return "border-green-200 bg-green-50 dark:bg-green-950 dark:border-green-800"
+      case "balance":
+        return "border-muted bg-muted/50 dark:bg-muted/50 dark:border-muted"
+      default:
+        return ""
+    }
+  }
+
+  const getTextColorClass = (variant: "pending" | "settled" | "balance") => {
+    switch (variant) {
+      case "pending":
+        return "text-orange-700 dark:text-orange-300"
+      case "settled":
+        return "text-green-700 dark:text-green-300"
+      case "balance":
+        return "text-foreground dark:text-foreground"
       default:
         return ""
     }
@@ -38,19 +53,13 @@ export const BalanceCard: React.FC<BalanceCardProps> = ({
           <CardDescription className="text-md font-medium">{title}</CardDescription>
         </div>
         <div className="flex flex-col">
-          <CardTitle
-            className={`text-4xl ${
-              variant === "pending"
-                ? "text-orange-700 dark:text-orange-300"
-                : "text-green-700 dark:text-green-300"
-            }`}
-          >
-            {h1}
-          </CardTitle>
+          <CardTitle className={`text-4xl ${getTextColorClass(variant)}`}>{h1}</CardTitle>
         </div>
-        <CardDescription className="text-sm text-muted-foreground">
-          {description}
-        </CardDescription>
+        {description && (
+          <CardDescription className="text-sm text-muted-foreground">
+            {description}
+          </CardDescription>
+        )}
       </CardHeader>
     </Card>
   )
diff --git a/lib/js/shared-web/src/ui/badge.tsx b/lib/js/shared-web/src/ui/badge.tsx
index c9dbcdcf2..57a1deede 100644
--- a/lib/js/shared-web/src/ui/badge.tsx
+++ b/lib/js/shared-web/src/ui/badge.tsx
@@ -17,14 +17,13 @@ const badgeVariants = cva(
         success:
           "border-transparent bg-success text-success-foreground shadow hover:bg-success/80",
         outline: "border-[#343a40] text-[#343a40] bg-[#343a400d]",
-        warning:
-          "border-transparent bg-warning text-primary-foreground shadow hover:bg-warning/80",
+        warning: "border-transparent bg-warning text-white shadow hover:bg-warning/80",
       },
     },
     defaultVariants: {
       variant: "default",
     },
-  },
+  }
 )
 
 export interface BadgeProps