From d515da3f7a2c9486f242c5a921405af969da7529 Mon Sep 17 00:00:00 2001 From: Your Name Date: Thu, 4 Jul 2024 15:40:33 +0530 Subject: [PATCH] developed --- package.json | 1 + src/components/admin/AdminLayout.jsx | 5 +- src/components/admin/AdminMain.jsx | 69 ++++ src/components/admin/AdminReportCard.jsx | 400 +++++++++++++++++++++++ 4 files changed, 473 insertions(+), 2 deletions(-) create mode 100644 src/components/admin/AdminMain.jsx create mode 100644 src/components/admin/AdminReportCard.jsx diff --git a/package.json b/package.json index 1743a34b..f3597c93 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,7 @@ "react-router-dom": "^6.11.2", "react-share": "^5.1.0", "react-simple-wysiwyg": "^2.2.5", + "recharts": "^2.12.7", "tailwind-merge": "^2.3.0", "tailwind-scrollbar-hide": "^1.1.7", "tailwindcss-animate": "^1.0.7", diff --git a/src/components/admin/AdminLayout.jsx b/src/components/admin/AdminLayout.jsx index 78038e55..9c60396f 100644 --- a/src/components/admin/AdminLayout.jsx +++ b/src/components/admin/AdminLayout.jsx @@ -1,12 +1,13 @@ import { Outlet } from "react-router-dom"; import AdminHeader from "./AdminHeader"; import BottomNavBar from "./BottomNavBar"; - +import AdminMain from "./AdminMain"; function AdminLayout() { return ( -
+
+
); diff --git a/src/components/admin/AdminMain.jsx b/src/components/admin/AdminMain.jsx new file mode 100644 index 00000000..7437322c --- /dev/null +++ b/src/components/admin/AdminMain.jsx @@ -0,0 +1,69 @@ +import React from "react"; +import AdminReportCard, +{ + HighDemandCard, + TotalVisitsCustomCard, + ChartComponent, + BigChartComponent, + InvenOrderCard, + InvenOrderCardTwo, + totalSalesData, + totalOrdersData, + totalVisitsData, + totalVisitInnerCardData, + totalVisitInnerCardDataTwo, +} from "./AdminReportCard"; + +const AdminMain = () => { + + return ( + <> +
+ +
+ + + +
+ +
+ + + +
+ +
+
+ Trends in Sales +
+
+ + + + +
+
+ +
+
+ +
+ + +
+ +
+ +
+ +
+ +
+ +
+ + + ); +}; + +export default AdminMain; diff --git a/src/components/admin/AdminReportCard.jsx b/src/components/admin/AdminReportCard.jsx new file mode 100644 index 00000000..682f543f --- /dev/null +++ b/src/components/admin/AdminReportCard.jsx @@ -0,0 +1,400 @@ +import React from 'react' +import { twMerge } from "tailwind-merge"; +import { Area, AreaChart, ResponsiveContainer, XAxis } from 'recharts'; +import { ArrowUp } from 'lucide-react'; + +// total sales card data +const totalSalesData = [ + { name: "Today", amount: 'KES 2000' }, + { name: "This week", amount: 'KES 4000' }, + { name: "This month", amount: 'KES 10000' }, + { name: "This year", amount: 'KES 40000' }, +]; + +// total orders card data +const totalOrdersData = [ + { name: "Today", amount: 'KES 20' }, + { name: "This week", amount: 'KES 50' }, + { name: "This month", amount: 'KES 100' }, + { name: "This year", amount: 'KES 500' }, +]; + +// total visits card data +const totalVisitsData = [ + { name: "Today", amount: 'KES 200' }, + { name: "This week", amount: 'KES 5000' }, + { name: "This month", amount: 'KES 10000' }, + { name: "This year", amount: 'KES 40000' }, +]; + +// total vistis data One +const totalVisitInnerCardData = [ + { name: "MALE", number: 55000 }, + { name: "FEMALE", number: 35000 }, + { name: "OTHERS", number: 10000 }, +]; + +// total vistis data Two +const totalVisitInnerCardDataTwo = [ + { name: "5-18 yrs", number: 5000 }, + { name: "18-35 yrs", number: 75000 }, + { name: "35 yrs+", number: 20000 } +] + +const AdminReportCard = ({ name = "Sales", amount = 80000, data = totalSalesData }) => { + + return ( + // card layout +
+
+ Total {name} + KES {amount} +
+
+ {data.map((e, index) => ( +
+ {e.name} + {e.amount} +
+ ))} +
+
+ ) +} + +const firstHighDemandData = [ + { city: "Nairobi", items: 3500, cost: 350, sales: 1225000 }, + { city: "Nakuru", items: 2500, cost: 100, sales: 250000 }, + { city: "Dodoma", items: 1500, cost: 200, sales: 240000 }, + { city: "Lagos", items: 1000, cost: 500, sales: 250000 }, + { city: "Mombasa", items: 500, cost: 100, sales: 100000 }, +] + +const HighDemandCard = ({ hignDemandData = firstHighDemandData, bigCard = false, name }) => { + const dataTableData = { Name: "Name", ItemsSold: "Items Sold", UnitCost: "UNIT COST(KES)", TotalCost: "TOTAL SALES(KES)" }; + return ( + <> +
+
+ {name} +
+
+ {dataTableData.Name} + {dataTableData.ItemsSold} + { + bigCard === true && + <> + {dataTableData.UnitCost} + {dataTableData.TotalCost} + + } +
+ {hignDemandData.map((e, index) => ( +
+ {e.city} + {e.items} + { + bigCard === true && + <> + {e.cost} + {e.sales} + + } +
+ ))} +
+ + ) +} + +const TotalVisitsCustomCard = ({ dataOne = totalVisitInnerCardData, dataTwo = totalVisitInnerCardDataTwo }) => { + return ( + <> +
+
+
+ TOTAL VISITS + 100,000 +
+
+ {/* border */} +
+ {/* inner cards */} +
+ {dataOne.map((e, index) => ( +
+ {e.name} + {e.number} +
+ ))} +
+ {/* border */} +
+ {/* inner cards */} +
+ {dataTwo.map((e, index) => ( +
+ {e.name} + {e.number} +
+ ))} +
+
+ + ) +} + +const ChartComponent = ({ title = "All Orders", number = 500, persontage = "10%" }) => { + const data = [ + { name: 'Page A', uv: 0, amt: 0 }, + { name: 'Page b', uv: 15, amt: 15 }, + { name: 'Page b', uv: 9.5, amt: 10 }, + { name: 'Page b', uv: 35, amt: 30 }, + { name: 'Page b', uv: 39, amt: 40 }, + ]; + return ( + <> +
+
+
+
+ {title} + {number} +
+
+ + {persontage} +
+ Vs last quater +
+
+
+ + + +
+
+
+
+ + + ) +} + +const BigChartComponent = () => { + const data = [ + { name: 'J', uv: 10 }, + { name: 'Feb', uv: 13 }, + { name: 'Mar', uv: 10 }, + { name: 'Apr', uv: 13 }, + { name: 'May', uv: 10 }, + { name: 'Jun', uv: 13 }, + { name: 'July', uv: 10 }, + { name: 'Aug', uv: 13 }, + { name: 'Sep', uv: 10 }, + { name: 'Oct', uv: 13 }, + { name: 'Nov', uv: 10 }, + { name: 'Dec', uv: 13 }, + ]; + return ( + <> +
+ + + + + + +
+ + ) +} + +const InventoryData = [ + { id: "ITM-101", name: 'SYT Beanie', totalItems: 400, noOfId: "No. of items: 350", unitCost: "Unit Cost: KES 350", totalSales: 1225000, itemsRemaining: 50 }, + { id: "ITM-102", name: 'SYT Hoodie', totalItems: 50, noOfId: "No. of items: 5", unitCost: "Unit Cost: KES 1000", totalSales: 5000, itemsRemaining: 40 }, + { id: "ITM-103", name: 'SYT Beanie', totalItems: 400, noOfId: "No. of items: 350", unitCost: "Unit Cost: KES 350", totalSales: 1225000, itemsRemaining: 500 }, + { id: "ITM-104", name: 'SYT Beanie', totalItems: 400, noOfId: "No. of items: 350", unitCost: "Unit Cost: KES 350", totalSales: 1225000, itemsRemaining: 30 }, + { id: "ITM-105", name: 'SYT Beanie', totalItems: 400, noOfId: "No. of items: 350", unitCost: "Unit Cost: KES 350", totalSales: 1225000, itemsRemaining: 20 }, + { id: "ITM-106", name: 'SYT Beanie', totalItems: 400, noOfId: "No. of items: 350", unitCost: "Unit Cost: KES 350", totalSales: 1225000, itemsRemaining: 50 }, +]; + +const InvenOrderCard = ({ name = "Inventory" }) => { + const dataTableData = [ + { text: "ID" }, + { text: "NAME" }, + { text: "TOTAL ITEMS" }, + { text: "ITEMS SOLD" }, + { text: "TOTAL SALES(KES)" }, + { text: "ITEMS REMAINING" }, + + ] + return ( + <> +
+
+ {name} + View All +
+ <> +
+
+
+ + + + {dataTableData.map((e => ( + + )))} + + + + {InventoryData.map((e, index) => ( + <> + + + + + + + + + + ))} + + +
+ {e.text} +
+ {e.id} + + {e.name} + + {e.totalItems} + + + {e.noOfId} + + + | {e.unitCost} + + + {e.totalSales} + + {e.itemsRemaining} +
+
+
+
+ +
+ + ) +} + +const InventoryDataTwo = [ + { id: "ORD-101", email: 'ian@gmail.com', item: "SYT Beanie", noOfId: "No. of items: 350", unitCost: "Unit Cost: KES 350", status: "Complete", }, + { id: "ORD-101", email: 'ian@gmail.com', item: "SYT Beanie", noOfId: "No. of items: 5", unitCost: "Unit Cost: KES 1000", status: "Unfulfilled" }, + { id: "ORD-101", email: 'ian@gmail.com', item: "SYT Beanie", noOfId: "No. of items: 350", unitCost: "Unit Cost: KES 350", status: "Pending" }, + { id: "ORD-101", email: 'ian@gmail.com', item: "SYT Beanie", noOfId: "No. of items: 350", unitCost: "Unit Cost: KES 350", status: "Complete" }, + { id: "ORD-101", email: 'ian@gmail.com', item: "SYT Beanie", noOfId: "No. of items: 350", unitCost: "Unit Cost: KES 350", status: "Pending" }, + { id: "ORD-101", email: 'ian@gmail.com', item: "SYT Beanie", noOfId: "No. of items: 350", unitCost: "Unit Cost: KES 350", status: "Complete" }, +]; + +const InvenOrderCardTwo = ({ name = "Inventory" }) => { + const dataTableData = [ + { text: "ORDER ID" }, + { text: "CUSTOMER EMAIL" }, + { text: "ITEMS" }, + { text: "COST OF ORDER(KES)" }, + { text: "STATUS" }, + { text: "" }, + ] + return ( + <> +
+
+ {name} + View All +
+ <> +
+
+
+ + + + {dataTableData.map((e => ( + + )))} + + + + {InventoryDataTwo.map((e, index) => ( + <> + + + + + + + + + + ))} + + +
+ {e.text} +
+ {e.id} + + {e.email} + + {e.item} + + + {e.noOfId} + + + | {e.unitCost} + + + + {e.status} + + + View +
+
+
+
+ +
+ + ) +} +export { + HighDemandCard, + TotalVisitsCustomCard, + ChartComponent, + BigChartComponent, + InvenOrderCard, + InvenOrderCardTwo, + totalSalesData, + totalOrdersData, + totalVisitsData, + totalVisitInnerCardData, + totalVisitInnerCardDataTwo, +}; +export default AdminReportCard; \ No newline at end of file