From d3e9a107c8070cd00a85ab73f1fda1804f38aba3 Mon Sep 17 00:00:00 2001 From: Saviour Ise Date: Mon, 29 Jul 2024 07:27:31 +0100 Subject: [PATCH] overview cards and recent sales team panther --- .../(admin)/admin/dashboard/client.tsx | 2 +- .../dashboard/(admin)/admin/products/page.tsx | 2 +- .../dashboard/(admin)/admin/users/page.tsx | 2 +- .../_components/RecentSales.tsx | 87 +++++++++++++++++++ .../(user-dashboard)/_components/salesData.ts | 43 +++++++++ src/app/dashboard/(user-dashboard)/layout.tsx | 2 +- .../DashboardCard}/CardComponent.tsx | 0 7 files changed, 134 insertions(+), 4 deletions(-) create mode 100644 src/app/dashboard/(user-dashboard)/_components/RecentSales.tsx create mode 100644 src/app/dashboard/(user-dashboard)/_components/salesData.ts rename src/components/{adminDashboard => common/DashboardCard}/CardComponent.tsx (100%) diff --git a/src/app/dashboard/(admin)/admin/dashboard/client.tsx b/src/app/dashboard/(admin)/admin/dashboard/client.tsx index 80d39e896..97f61eabb 100644 --- a/src/app/dashboard/(admin)/admin/dashboard/client.tsx +++ b/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 = () => { diff --git a/src/app/dashboard/(admin)/admin/products/page.tsx b/src/app/dashboard/(admin)/admin/products/page.tsx index 72b561622..dff3f3025 100644 --- a/src/app/dashboard/(admin)/admin/products/page.tsx +++ b/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, diff --git a/src/app/dashboard/(admin)/admin/users/page.tsx b/src/app/dashboard/(admin)/admin/users/page.tsx index 7f58236cc..63711d856 100644 --- a/src/app/dashboard/(admin)/admin/users/page.tsx +++ b/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, diff --git a/src/app/dashboard/(user-dashboard)/_components/RecentSales.tsx b/src/app/dashboard/(user-dashboard)/_components/RecentSales.tsx new file mode 100644 index 000000000..59191a410 --- /dev/null +++ b/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 = ({ + data, + gradients, + noOfSales, +}) => { + return ( + +
+
+

+ Recent Sales +

+

+ You made {noOfSales} sales this month +

+
+
+
    + {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 ( +
  • +
    +
    +
    +

    + {item.name} +

    +

    {item.email}

    +
    +
    +

    + +${amount} +

    +
    • + ); + })} +
+ + ); +}; + +export default RecentSales; diff --git a/src/app/dashboard/(user-dashboard)/_components/salesData.ts b/src/app/dashboard/(user-dashboard)/_components/salesData.ts new file mode 100644 index 000000000..c8143118a --- /dev/null +++ b/src/app/dashboard/(user-dashboard)/_components/salesData.ts @@ -0,0 +1,43 @@ +const data = [ + { + name: "Jackson Lee", + amount: "2999", + email: "jackson.lee@gmail.com", + }, + { + name: "Olivia Martin", + amount: "7999", + email: "olivia.martin@gmail.com", + }, + { + name: "Joseph Chernysuck", + amount: "5999", + email: "olivia.martin@gmail.com", + }, + { + name: "Paul Halland", + amount: "12999", + email: "olivia.martin@gmail.com", + }, + { + name: "Eden Hazard", + amount: "3999", + email: "jackson.lee@gmail.com", + }, + { + name: "Ronaldo Messi", + amount: "4999", + email: "jackson.lee@gmail.com", + }, +]; + +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 }; diff --git a/src/app/dashboard/(user-dashboard)/layout.tsx b/src/app/dashboard/(user-dashboard)/layout.tsx index 3ff9e35b6..500184bc4 100644 --- a/src/app/dashboard/(user-dashboard)/layout.tsx +++ b/src/app/dashboard/(user-dashboard)/layout.tsx @@ -10,7 +10,7 @@ export default function AdminLayout({ return (
-
+
{children}
diff --git a/src/components/adminDashboard/CardComponent.tsx b/src/components/common/DashboardCard/CardComponent.tsx similarity index 100% rename from src/components/adminDashboard/CardComponent.tsx rename to src/components/common/DashboardCard/CardComponent.tsx