[FEAT] Overview cards and Recent sales - Team Panther

src/app/dashboard/(admin)/admin/dashboard/client.tsx

@@ -1,11 +1,11 @@
 "use client";
 
-import CardComponent from "~/components/adminDashboard/CardComponent";
 import { cardData } from "~/components/adminDashboard/cardData";
 import { Chart } from "~/components/adminDashboard/Chart";
 import { chartConfig, chartData } from "~/components/adminDashboard/chartData";
 import { data, gradients } from "~/components/adminDashboard/productData";
 import TopProductsComponent from "~/components/adminDashboard/TopProductsComponent";
+import CardComponent from "~/components/common/DashboardCard/CardComponent";
 import { Card } from "~/components/ui/card";
 
 const Client = () => {

src/app/dashboard/(admin)/admin/products/page.tsx

@@ -2,9 +2,9 @@
 
 import { CirclePlus, Filter } from "lucide-react";
 
-import CardComponent from "~/components/adminDashboard/CardComponent";
 import { cardData } from "~/components/adminDashboard/cardData";
 import { Button } from "~/components/common/common-button";
+import CardComponent from "~/components/common/DashboardCard/CardComponent";
 import {
   DropdownMenu,
   DropdownMenuContent,

src/app/dashboard/(admin)/admin/users/page.tsx

@@ -9,8 +9,8 @@ import {
 } from "lucide-react";
 import { useState } from "react";
 
-import CardComponent from "~/components/adminDashboard/CardComponent";
 import CustomButton from "~/components/common/common-button/common-button";
+import CardComponent from "~/components/common/DashboardCard/CardComponent";
 import { Button } from "~/components/ui/button";
 import {
   DropdownMenu,

src/app/dashboard/(user-dashboard)/_components/RecentSales.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+
+import { Card } from "~/components/ui/card";
+
+type ProductData = {
+  name: string;
+  amount: string;
+  email: string;
+};
+
+type TopProductsProperties = {
+  data: ProductData[];
+  gradients: string[];
+  noOfSales: number;
+};
+
+const RecentSales: React.FC<TopProductsProperties> = ({
+  data,
+  gradients,
+  noOfSales,
+}) => {
+  return (
+    <Card className="h-full basis-1/2 rounded-xl border border-border bg-white p-3 shadow-spread md:p-5">
+      <div className="mb-6 flex items-center justify-between">
+        <div className="flex flex-col items-start">
+          <h2 className="text-base font-semibold text-[#080808]">
+            Recent Sales
+          </h2>
+          <p className="text-sm font-medium text-[#626262] md:text-sm">
+            You made {noOfSales} sales this month
+          </p>
+        </div>
+      </div>
+      <ul className="text-[#0A0A0A]">
+        {data.map((item, index) => {
+          let amount = Number(item.amount).toFixed(2);
+          amount = amount
+            .replaceAll(
+              new RegExp(
+                String.raw`^(\d{` +
+                  (amount.length % 3 ?? 0) +
+                  String.raw`})(\d{3})`,
+                "g",
+              ),
+              "$1 $2",
+            )
+            .replaceAll(/(\d{3})+?/gi, "$1 ")
+            .trim();
+          const separator = ",";
+          amount = amount.replaceAll(/\s/g, separator);
+          amount = amount.replace(",.", ".");
+
+          return (
+            <li
+              key={index}
+              className="mb-2 flex items-center justify-between py-2"
+            >
+              <div className="flex items-center space-x-4">
+                <div
+                  className="h-10 w-10 rounded-full"
+                  style={{ background: gradients[index % gradients.length] }}
+                />
+                <div>
+                  <p
+                    data-testid={`product-name-${index}`}
+                    className="text-base font-medium"
+                  >
+                    {item.name}
+                  </p>
+                  <p className="text-sm text-neutral-dark-1">{item.email}</p>
+                </div>
+              </div>
+              <p
+                data-testid={`product-amount-${index}`}
+                className="text-base font-semibold"
+              >
+                +${amount}
+              </p>
+            </li>
+          );
+        })}
+      </ul>
+    </Card>
+  );
+};
+
+export default RecentSales;

src/app/dashboard/(user-dashboard)/_components/salesData.ts

@@ -0,0 +1,43 @@
+const data = [
+  {
+    name: "Jackson Lee",
+    amount: "2999",
+    email: "[email protected]",
+  },
+  {
+    name: "Olivia Martin",
+    amount: "7999",
+    email: "[email protected]",
+  },
+  {
+    name: "Joseph Chernysuck",
+    amount: "5999",
+    email: "[email protected]",
+  },
+  {
+    name: "Paul Halland",
+    amount: "12999",
+    email: "[email protected]",
+  },
+  {
+    name: "Eden Hazard",
+    amount: "3999",
+    email: "[email protected]",
+  },
+  {
+    name: "Ronaldo Messi",
+    amount: "4999",
+    email: "[email protected]",
+  },
+];
+
+const gradients = [
+  "linear-gradient(180deg, #F6C790 0%, #E77F1E 100%)",
+  "linear-gradient(180deg, #F81404 0%, #0F172A 100%)",
+  "linear-gradient(180deg, rgba(4, 190, 248, 0.20) 0%, #0AB025 100%)",
+  "linear-gradient(180deg, #FFF 0%, #7F838D 20.86%, #0F172A 100%)",
+  "linear-gradient(180deg, #1E1D1C 0%, #3A1EE7 100%)",
+  "linear-gradient(180deg, #EF9B38 0%, #7EA7D9 100%)",
+];
+
+export { data, gradients };

src/app/dashboard/(user-dashboard)/layout.tsx

@@ -10,7 +10,7 @@ export default function AdminLayout({
   return (
     <div className="grid grid-rows-[auto_1fr]">
       <UserNavbar />
-      <div className="relative w-full bg-white px-2 max-lg:overflow-hidden xl:px-4">
+      <div className="relative w-full px-2 max-lg:overflow-hidden xl:px-4">
         <Suspense>{children}</Suspense>
       </div>
     </div>