[#11 Addition - Added Dashboards ]

lakshyarawat1 · Jul 16, 2024 · 4acc420 · 4acc420
1 parent 5bb17df
commit 4acc420
Show file tree

Hide file tree

Showing 9 changed files with 694 additions and 9 deletions.
diff --git a/web_app/package.json b/web_app/package.json
@@ -22,6 +22,7 @@
     "@radix-ui/react-hover-card": "^1.1.1",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-scroll-area": "^1.1.0",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-separator": "^1.0.3",

diff --git a/web_app/pnpm-lock.yaml b/web_app/pnpm-lock.yaml
diff --git a/web_app/src/app/(main)/agency/[agencyId]/page.tsx b/web_app/src/app/(main)/agency/[agencyId]/page.tsx
@@ -1,7 +1,192 @@
+import CircleProgress from "@/components/global/CircleProgress";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import { Separator } from "@/components/ui/separator";
+import { db } from "@/lib/db";
+import { AreaChart } from "@tremor/react";
+import {
+  ClipboardIcon,
+  Contact2,
+  DollarSign,
+  Goal,
+  ShoppingCart,
+} from "lucide-react";
+import Link from "next/link";
 import React from "react";
 
-const Page = ({ params }: { params: { agencyId: string } }) => {
-  return <div>{params.agencyId}</div>;
+const Page = async ({
+  params,
+}: {
+  params: { agencyId: string };
+  searchParams: { code: string };
+}) => {
+  let currency = "USD";
+  let sessions;
+  let totalClosedSessions;
+  let totalPendingSessions;
+  let net = 0;
+  let potentialIncome = 0;
+  let closingRate = 0;
+  const currentYear = new Date().getFullYear();
+  const startDate = new Date(`${currentYear}-01-01T00:00:00Z`).getTime() / 1000;
+  const endDate = new Date(`${currentYear}-12-31T23:59:59Z`).getTime() / 1000;
+
+  const agencyDetails = await db.agency.findUnique({
+    where: {
+      id: params.agencyId,
+    },
+  });
+
+  if (!agencyDetails) return;
+
+  const subaccounts = await db.subAccount.findMany({
+    where: {
+      agencyId: params.agencyId,
+    },
+  });
+
+
+
+  return (
+    <div className="relative h-full">
+
+      <h1 className="text-4xl">Dashboard</h1>
+      <Separator className=" my-6" />
+      <div className="flex flex-col gap-4 pb-6">
+        <div className="flex gap-4 flex-col xl:!flex-row">
+          <Card className="flex-1 relative">
+            <CardHeader>
+              <CardDescription>Income</CardDescription>
+              <CardTitle className="text-4xl">
+                {net ? `${currency} ${net.toFixed(2)}` : `$0.00`}
+              </CardTitle>
+              <small className="text-xs text-muted-foreground">
+                For the year {currentYear}
+              </small>
+            </CardHeader>
+            <CardContent className="text-sm text-muted-foreground">
+              Total revenue generated as reflected in your stripe dashboard.
+            </CardContent>
+            <DollarSign className="absolute right-4 top-4 text-muted-foreground" />
+          </Card>
+          <Card className="flex-1 relative">
+            <CardHeader>
+              <CardDescription>Potential Income</CardDescription>
+              <CardTitle className="text-4xl">
+                {potentialIncome
+                  ? `${currency} ${potentialIncome.toFixed(2)}`
+                  : `$0.00`}
+              </CardTitle>
+              <small className="text-xs text-muted-foreground">
+                For the year {currentYear}
+              </small>
+            </CardHeader>
+            <CardContent className="text-sm text-muted-foreground">
+              This is how much you can close.
+            </CardContent>
+            <DollarSign className="absolute right-4 top-4 text-muted-foreground" />
+          </Card>
+          <Card className="flex-1 relative">
+            <CardHeader>
+              <CardDescription>Active Clients</CardDescription>
+              <CardTitle className="text-4xl">{subaccounts.length}</CardTitle>
+            </CardHeader>
+            <CardContent className="text-sm text-muted-foreground">
+              Reflects the number of sub accounts you own and manage.
+            </CardContent>
+            <Contact2 className="absolute right-4 top-4 text-muted-foreground" />
+          </Card>
+          <Card className="flex-1 relative">
+            <CardHeader>
+              <CardTitle>Agency Goal</CardTitle>
+              <CardDescription>
+                <p className="mt-2">
+                  Reflects the number of sub accounts you want to own and
+                  manage.
+                </p>
+              </CardDescription>
+            </CardHeader>
+            <CardFooter>
+              <div className="flex flex-col w-full">
+                <div className="flex justify-between items-center">
+                  <span className="text-muted-foreground text-sm">
+                    Current: {subaccounts.length}
+                  </span>
+                  <span className="text-muted-foreground text-sm">
+                    Goal: {agencyDetails.goal}
+                  </span>
+                </div>
+                <Progress
+                  value={(subaccounts.length / agencyDetails.goal) * 100}
+                />
+              </div>
+            </CardFooter>
+            <Goal className="absolute right-4 top-4 text-muted-foreground" />
+          </Card>
+        </div>
+        <div className="flex gap-4 xl:!flex-row flex-col">
+          <Card className="p-4 flex-1">
+            <CardHeader>
+              <CardTitle>Transaction History</CardTitle>
+            </CardHeader>
+            <AreaChart
+              className="text-sm stroke-primary"
+              data={[
+                ...(totalClosedSessions || []),
+                ...(totalPendingSessions || []),
+              ]}
+              index="created"
+              categories={["amount_total"]}
+              colors={["primary"]}
+              yAxisWidth={30}
+              showAnimation={true}
+            />
+          </Card>
+          <Card className="xl:w-[400px] w-full">
+            <CardHeader>
+              <CardTitle>Conversions</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <CircleProgress
+                value={closingRate}
+                description={
+                  <>
+                    {sessions && (
+                      <div className="flex flex-col">
+                        Abandoned
+                        <div className="flex gap-2">
+                          <ShoppingCart className="text-rose-700" />
+                          {/* {sessions.length || 0} */}
+                          0
+                        </div>
+                      </div>
+                    )}
+                    {totalClosedSessions && (
+                      <div className="felx flex-col">
+                        Won Carts
+                        <div className="flex gap-2">
+                          <ShoppingCart className="text-emerald-700" />
+                          {/* {totalClosedSessions.length} */}
+                          0
+                        </div>
+                      </div>
+                    )}
+                  </>
+                }
+              />
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default Page;