restyle trends-in-sales section sales graph

Author: Andrew-Ochieng

src/components/admin/AdminReportCard.jsx

@@ -165,7 +165,7 @@ const ChartComponent = ({ title = "All Orders", number = 500, persontage = "10%"
                   <span className='text-[#027A48]'><ArrowUp /></span>
                   <span className='text-[#027A48] text-[14px] font-[500]'>{persontage}</span>
                 </div>
-                <span className=' text-[#4C4D4D] text-center w-auto text-[14px] font-[500]'>Vs last quater</span>
+                <span className=' text-[#4C4D4D] text-center w-auto text-[14px] font-[500]'>vs last quater</span>
               </div>
             </div>
             <div className='grid  items-end'>

src/components/admin/shop/sales/SalesGraph.jsx

@@ -6,6 +6,7 @@ import data from './data';
 export const SalesGraph = () => {
   return (
     <ResponsiveContainer width="100%" height={300}>
+      {/* <XAxis dataKey={"name"} className='mt-4' /> */}
       <AreaChart
         data={data}
         margin={{
@@ -21,11 +22,18 @@ export const SalesGraph = () => {
             <stop offset="95%" stopColor="#82ca9d" stopOpacity={0}/>
           </linearGradient>
         </defs>
-        <XAxis dataKey="name" stroke="white" />
+        <XAxis dataKey={"name"} />
         <YAxis stroke="white" />
         <CartesianGrid strokeDasharray="3 3" />
         <Tooltip />
-            <Area type="monotone" dataKey="pv" stroke="#28B463 " fillOpacity={1} fill="url(#colorPv)" />
+            <Area 
+              type="monotone" 
+              dataKey="uv" 
+              fillOpacity={1} 
+              fill="url(#colorPv)" 
+              strokeWidth={2}
+              stroke="#00664E" 
+            />
       </AreaChart>
     </ResponsiveContainer>
   );

src/components/admin/shop/sales/SalesPreviewTable.jsx

@@ -22,7 +22,7 @@ import {
     });
 
     return (
-      <Table>
+      <Table className='text-gray-500'>
         <TableHeader className="bg-grey-light uppercase">
           {table.getHeaderGroups().map((headerGroup) => (
             <TableRow key={headerGroup.id}>

src/components/admin/shop/sales/data.js

@@ -1,57 +1,57 @@
 const data = [
     {
       name: 'Jan',
-      pv: 4300,
+      uv: 4300,
       amt: 2400,
     },
     {
       name: 'Feb',
-      pv: 5600,
+      uv: 5600,
       amt: 2210,
     },
     {
       name: 'Apr',
-      pv: 5408,
+      uv: 5408,
       amt: 2290,
     },
     {
       name: 'May',
-      pv: 6420,
+      uv: 6420,
       amt: 2000,
     },
     {
       name: 'Jun',
-      pv: 7500,
+      uv: 7500,
       amt: 2181,
     },
     {
       name: 'Jul',
-      pv: 6300,
+      uv: 6300,
       amt: 2500,
     },
     {
       name: 'Aug',
-      pv: 8600,
+      uv: 8600,
       amt: 2100,
     },
     {
       name: 'Sep',
-      pv: 8300,
+      uv: 8300,
       amt: 2100,
     },
     {
       name: 'Oct',
-      pv: 10200,
+      uv: 10200,
       amt: 2100,
     },
     {
       name: 'Nov',
-      pv: 9500,
+      uv: 9500,
       amt: 2100,
     },
     {
       name: 'Dev',
-      pv: 12200,
+      uv: 12200,
       amt: 2100,
     },
   ];

src/pages/admin/shop/sales/ShopSales.jsx

@@ -3,21 +3,29 @@ import columns from "@/components/admin/shop/sales/SalesPreviewColumn";
 import { Link } from "react-router-dom";
 import data from "./data";
 import ShopSalesTrends from "./ShopSalesTrends";
+import { ChartComponent } from "@/components/admin/AdminReportCard";
 
 function ShopSales() {
 
   return (
     <>
       <div className="container my-10">
         <section>
-          <h1 className="text-2xl font-light">Sales</h1>
+          <h1 className="text-2xl font-light mb-8">Sales Report</h1>
           <div className="border rounded-xl p-4">
-            <p className="text-sm font-light mb-4">Dashboard</p>
-            <ShopSalesTrends />
+            <p className="md:text-xl text-sm font-semibold mb-4">Trends In Sales</p>
+            <div className="grid sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-4 space-x-6">
+            <ChartComponent title = "All Sales" number={4000} />
+            <ChartComponent title = "Sales This Week" number={500} />
+            <ChartComponent title = "Sales This Month" number={750} />
+            <ChartComponent title = "Sales This Year" number={1000} />
+          </div>
+
+          <ShopSalesTrends className='mt-16' />
           </div>
         </section>
 
-        <section className="container my-10">
+        <section className=" my-10">
           <div className="border rounded-xl">
             <div className="flex justify-between items-center w-full py-4 px-3 border-b">
               <h3 className="font-semibold">Shop</h3>
@@ -29,7 +37,7 @@ function ShopSales() {
               </Link>
             </div>
 
-            <SalesPreviewTable columns={columns} data={data} />
+            <SalesPreviewTable columns={columns} data={data} className='text-gray-500'/>
           </div>
         </section>
 

src/pages/admin/shop/sales/data.js

@@ -1,83 +1,11 @@
 const data = [
-    {
-      id: "itm-101",
-      name: "SYT Beanie",
-      totalItems: 400,
-      sold: 350,
-    //   unitCost: 350,
-      remaining: "50",
-    },
-    {
-      id: "itm-102",
-      name: "SYT Hoodie",
-      totalItems: 100,
-      sold: 5,
-    //   unitCost: 1000,
-      remaining: "45",
-    },
-    {
-      id: "itm-103",
-      name: "SYT Mug",
-      totalItems: 20,
-      sold: 100,
-    //   unitCost: 100,
-      remaining: "100",
-    },
-    {
-        id: "itm-104",
-        name: "SYT Tee",
-        ltems: 50,
-        // itemSold: 350,
-        remaining: "50",
-    },
-    {
-        id: "itm-105",
-        name: "SYT Beanie",
-        totalItems: 400,
-        sold: 350,
-        // unitCost: 350,
-        remaining: "50",
-    },
-    {
-        id: "itm-106",
-        name: "SYT Hoodie",
-        totalItems: 100,
-        sold: 5,
-        // unitCost: 1000,
-        remaining: "45",
-    },
-    {
-        id: "itm-107",
-        name: "SYT Mug",
-        totalItems: 20,
-        sold: 100,
-        // unitCost: 100,
-        remaining: "100",
-    },
-    {
-        id: "itm-108",
-        name: "SYT Tee",
-        ltems: 50,
-        // itemSold: 350,
-        remaining: "50",
-    },
-    {
-        id: "itm-101",
-        name: "SYT Beanie",
-        totalItems: 400,
-        sold: 350,
-        // unitCost: 350,
-        remaining: "50",
-    },
-        {
-        id: "itm-102",
-        name: "SYT Hoodie",
-        totalItems: 100,
-        sold: 5,
-        // unitCost: 1000,
-        remaining: "45",
-    },
-  ];
+  { 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 },
+];
 
 
 export default data;