Admin shop sales

src/components/FAQ.jsx

@@ -10,7 +10,7 @@ function FAQ({ questions }) {
   };
 
   return (
-    <div className="flex-col justify-center items-center gap-4 w-full max-w-6xl">
+    <div className="flex-col justify-center items-center gap-4 w-full max-w-6xl mx-auto">
       {questions.map((question, index) => (
         <div
           key={question.id}

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

@@ -0,0 +1,40 @@
+// import React, { PureComponent } from 'react';
+import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
+import data from './data';
+
+
+export const SalesGraph = () => {
+  return (
+    <ResponsiveContainer width="100%" height={300}>
+      {/* <XAxis dataKey={"name"} className='mt-4' /> */}
+      <AreaChart
+        data={data}
+        margin={{
+          top: 10,
+          right: 30,
+          left: 0,
+          bottom: 0,
+        }}
+      >
+        <defs>
+          <linearGradient id="colorPv" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="10%" stopColor="#82ca9d" stopOpacity={0.8}/>
+            <stop offset="95%" stopColor="#82ca9d" stopOpacity={0}/>
+          </linearGradient>
+        </defs>
+        <XAxis dataKey={"name"} />
+        <YAxis stroke="white" />
+        <CartesianGrid strokeDasharray="3 3" />
+        <Tooltip />
+            <Area 
+              type="monotone" 
+              dataKey="uv" 
+              fillOpacity={1} 
+              fill="url(#colorPv)" 
+              strokeWidth={2}
+              stroke="#00664E" 
+            />
+      </AreaChart>
+    </ResponsiveContainer>
+  );
+};

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

@@ -0,0 +1,37 @@
+const columns = [
+    {
+      accessorKey: "id",
+      header: "Item ID",
+    },
+    {
+      accessorKey: "name",
+      header: "Name",
+    },
+    {
+      accessorKey: "items-sold",
+      header: "Items Sold",
+    },
+    {
+      accessorKey: "items-remaining",
+      header: "Items Remaining",
+    },
+
+    {
+      id: "actions",
+      enableHiding: false,
+      cell: ({ row }) => {
+        const orderInfo = row.original;
+
+        return (
+          <div>
+            <button type="button" className="text-primary text-sm font-semibold">
+              View
+            </button>
+          </div>
+        );
+      },
+    },
+  ];
+
+  export default columns;
+

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

@@ -0,0 +1,82 @@
+import {
+    flexRender,
+    getCoreRowModel,
+    useReactTable,
+  } from "@tanstack/react-table";
+
+  import PropTypes from "prop-types";
+  import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+  } from "@/components/ui/table";
+
+  function SalesPreviewTable({ columns, data }) {
+    const table = useReactTable({
+      data,
+      columns,
+      getCoreRowModel: getCoreRowModel(),
+    });
+
+    return (
+      <Table className='text-gray-500'>
+        <TableHeader className="bg-grey-light uppercase">
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <TableHead key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow
+                key={row.id}
+                data-state={row.getIsSelected() && "selected"}
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    );
+  }
+
+  export default SalesPreviewTable;
+
+  SalesPreviewTable.propTypes = {
+    columns: PropTypes.arrayOf(
+      PropTypes.shape({
+        accessorKey: PropTypes.string,
+        cell: PropTypes.func,
+        header: PropTypes.func,
+        id: PropTypes.string,
+      })
+    ).isRequired,
+    // eslint-disable-next-line react/forbid-prop-types
+    data: PropTypes.arrayOf(PropTypes.object).isRequired,
+  };
+

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

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

src/index.js

@@ -59,6 +59,7 @@ const AllProducts = lazy(() => import("./pages/shop/sections/AllProducts"));
 const SingleItemPage = lazy(() => import("./pages/shop/SingleItemPage"));
 
 const ShopDashboard = lazy(() => import("./pages/admin/shop/ShopDashboard"));
+const ShopSales = lazy(() => import("./pages/admin/shop/sales/ShopSales"));
 
 export {
   AllProducts,
@@ -99,5 +100,6 @@ export {
   SingleEvent,
   SingleItemPage,
   SingleProductDonation,
+  ShopSales,
   UpdateEventPage,
 };

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

@@ -0,0 +1,49 @@
+import SalesPreviewTable from "@/components/admin/shop/sales/SalesPreviewTable";
+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 mb-8">Sales Report</h1>
+          <div className="border rounded-xl p-4">
+            <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=" 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>
+              <Link
+                to="/admin/shop/sales"
+                className="text-primary text-sm font-semibold"
+              >
+                View All
+              </Link>
+            </div>
+
+            <SalesPreviewTable columns={columns} data={data} className='text-gray-500'/>
+          </div>
+        </section>
+
+      </div>
+    </>
+  );
+}
+
+export default ShopSales;

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

@@ -0,0 +1,11 @@
+import { SalesGraph } from "@/components/admin/shop/sales/SalesGraph";
+
+
+const ShopSalesTrends = () => {
+    return (
+        <>
+            <SalesGraph />
+        </>
+    )
+};
+export default ShopSalesTrends

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

@@ -0,0 +1,11 @@
+const data = [
+  { 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;

src/pages/shop/sections/FaqSection.jsx

@@ -6,7 +6,7 @@ const FaqSection = () => {
   return (
     <LandingWrapper title="Faq">
       <SectionWrapper>
-        <section className="w-full flex flex-col gap-4 px-3 ">
+        <section className="w-full flex flex-col gap-4 px-3">
           <h3 className="text-green-header text-center font-semibold text-xl md:text-3xl mb-4">
             Frequently Asked Questions
           </h3>

src/router/index.jsx

@@ -29,6 +29,7 @@ import {
   EventsPage,
   AdminLayout,
   ShopDashboard,
+  ShopSales,
   AllProducts,
 } from "..";
 import { FallbackLoader } from "../components";
@@ -212,6 +213,14 @@ const router = createBrowserRouter([
           </Suspense>
         ),
       },
+      {
+        path: "/admin/shop/sales",
+        element: (
+          <Suspense fallback={<FallbackLoader />}>
+            <ShopSales />
+          </Suspense>
+        ),
+      },
       // {
       //   path: "/admin",
       //   element: <AllChaptersPage />,