Admin Panel

shopsense_seller/package.json

@@ -3,6 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/icons-material": "^5.15.17",
+    "@mui/material": "^5.15.17",
+    "@mui/x-charts": "^7.3.2",
+    "@ramonak/react-progress-bar": "^5.2.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -12,6 +18,7 @@
     "react-router-dom": "^6.23.0",
     "react-scripts": "5.0.1",
     "react-select": "^5.8.0",
+    "recharts": "^2.12.7",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

shopsense_seller/src/AdminSide/AdminPages/AdminDashboard/AdminDashboard.jsx

@@ -1,18 +1,70 @@
 import React from "react";
 import SideNav from "../../adminComponents/sideNavbar/SideNav";
 import "./adminDashboard.css";
-import FormNavBar from "../../../Components/FormNavBar/FormNavBar";
+import AdminNav from "../../adminComponents/adminNavbar/AdminNav";
 import Card from "../../adminComponents/card/Card";
 import TableComponent from "../../adminComponents/tableComponent/TableComponent";
 import BarChartOutlinedIcon from "@mui/icons-material/BarChartOutlined";
 import DescriptionOutlinedIcon from "@mui/icons-material/DescriptionOutlined";
 import SellOutlinedIcon from "@mui/icons-material/SellOutlined";
 import PersonAddOutlinedIcon from "@mui/icons-material/PersonAddOutlined";
 
+
+import LinearProgress, {
+  linearProgressClasses,
+} from "@mui/material/LinearProgress";
+
+import { styled } from "@mui/material/styles";
+
+const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
+  height: 10,
+  borderRadius: 5,
+  marginRight: 50,
+  [`&.${linearProgressClasses.colorPrimary}`]: {
+    backgroundColor:
+      theme.palette.grey[theme.palette.mode === "light" ? 200 : 800],
+  },
+  [`& .${linearProgressClasses.bar}`]: {
+    borderRadius: 5,
+    backgroundColor: theme.palette.mode === "light" ? "#1a90ff" : "#308fe8",
+  },
+}));
+
+function createData(No, Name, Popularity, Sales) {
+  return { No, Name, Popularity, Sales };
+}
+
+const rows = [
+  createData(
+    1,
+    "Midnight Blue Velvet Dress",
+    <BorderLinearProgress variant="determinate" value={10} />,
+    "10%"
+  ),
+  createData(
+    2,
+    "Classic White Button-Up Shirt",
+    <BorderLinearProgress variant="determinate" value={60} />,
+    "60%"
+  ),
+  createData(
+    3,
+    "Black Leather Biker Jacket",
+    <BorderLinearProgress variant="determinate" value={30} />,
+    "30%"
+  ),
+  createData(
+    4,
+    "Red Plaid Flannel Shirt",
+    <BorderLinearProgress variant="determinate" value={80} />,
+    "80%"
+  ),
+];
+
 const AdminDashboard = () => {
   return (
     <div className="dashboard-wrapper">
-      <FormNavBar />
+      <AdminNav />
       <div className="dashboard-container">
         <div className="left-flex">
           <SideNav />
@@ -72,7 +124,7 @@ const AdminDashboard = () => {
           <div className="right-bottom-flex">
             <span className="tp-txt">Top Products</span>
             <div className="top-products">
-              <TableComponent />
+              <TableComponent rows={rows} />
             </div>
           </div>
         </div>

shopsense_seller/src/AdminSide/AdminPages/AdminStat/AdminStat.jsx

@@ -0,0 +1,74 @@
+import React from "react";
+import AdminNav from "../../adminComponents/adminNavbar/AdminNav";
+import SideNav from "../../adminComponents/sideNavbar/SideNav";
+import "./adminStat.css";
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from "recharts";
+
+const data = [
+  { month: "Jan", Sales: "10" },
+  { month: "Feb", Sales: "15" },
+  { month: "Mar", Sales: "08" },
+  { month: "Apr", Sales: "03" },
+  { month: "May", Sales: "11" },
+  { month: "Jun", Sales: "21" },
+  { month: "Jul", Sales: "05" },
+  { month: "Aug", Sales: "14" },
+  { month: "Sep", Sales: "09" },
+  { month: "Oct", Sales: "19" },
+  { month: "Nov", Sales: "21" },
+  { month: "Dec", Sales: "15" },
+];
+
+const AdminStat = () => {
+  return (
+    <div className="dashboard-wrapper">
+      <AdminNav />
+      <div className="dashboard-container">
+        <div className="left-flex">
+          <SideNav />
+        </div>
+        <div className="st-right-flex">
+          <span className="rf-txt">Sales Stat</span>
+          <div className="rf-chart">
+            <ResponsiveContainer width="100%" height={400}>
+              <LineChart
+                width={500}
+                height={400}
+                data={data}
+                margin={{
+                  top: 5,
+                  right: 30,
+                  left: 20,
+                  bottom: 5,
+                }}
+              >
+                <CartesianGrid strokeDasharray="3 3" />
+                <XAxis dataKey="month" />
+                <YAxis />
+                <Tooltip />
+                <Legend />
+                <Line
+                  type="monotone"
+                  dataKey="Sales"
+                  stroke="#3771C8"
+                  activeDot={{ r: 8 }}
+                />
+              </LineChart>
+            </ResponsiveContainer>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AdminStat;

shopsense_seller/src/AdminSide/AdminPages/AdminStat/adminStat.css

@@ -0,0 +1,24 @@
+.st-right-flex{
+    display: flex;
+        flex-direction: column;
+        height: auto;
+        width: calc(100vw - 250px);
+        margin-left: 250px;
+        padding-left: 20px;
+        padding-top: 50px;
+    .rf-txt{
+    font-size: 1.5rem;
+    font-weight: bold;
+}
+
+.rf-chart{
+    background-color: rgb(255, 255, 255);
+    display: flex;
+    padding: 40px 30px 0px 0px;
+    margin: 10px 20px;
+    border-radius: 20px;
+    box-shadow: 0px 0px 16px -5px rgba(0,0,0,0.13);
+    -webkit-box-shadow: 0px 0px 16px -5px rgba(0,0,0,0.13);
+    -moz-box-shadow: 0px 0px 16px -5px rgba(0,0,0,0.13);
+}
+}

shopsense_seller/src/AdminSide/AdminPages/payouts/Payout.jsx

@@ -0,0 +1,59 @@
+import React from "react";
+import "./payout.css";
+import SideNav from "../../adminComponents/sideNavbar/SideNav";
+import AdminNav from "../../adminComponents/adminNavbar/AdminNav";
+import { Link } from "react-router-dom";
+import TableComponent2 from "../../adminComponents/tableComponent/TableComponent2";
+
+function createData(No, Payout_Date, Status, Reference_Number) {
+  return { No, Payout_Date, Status, Reference_Number };
+}
+
+const rows = [
+  createData(1, "january 2, 2024", "Processing", "1243135421"),
+  createData(2, "December 15, 2023", "Paid", "5435435113"),
+  createData(3, "November 29, 2023", "Paid", "6431222321"),
+];
+
+const Payout = () => {
+  return (
+    <div className="payout-wrapper">
+      <AdminNav />
+      <div className="payout-container">
+        <div className="payout-left-flex">
+          <SideNav />
+        </div>
+        <div className="payout-right-flex">
+          <div className="payout-top">
+            <span className="payout-txt">Payout</span>
+            <div className="payout-summary">
+              <div className="payout-sum-left">
+                <span className="payment-txt1">Total Payement</span>
+                <span className="payment-txt2">LKR 2000</span>
+              </div>
+              <div className="payout-sum-right">
+                <div className="payment-txt">
+                  <span className="payment-txt1">Available Payement</span>
+                  <span className="payment-txt2">LKR 1200</span>
+                </div>
+                <div className="payout-btn">
+                  <Link to="">
+                    <button>Payout</button>
+                  </Link>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="payout-bottom">
+            <span className="payout-history">Payout History</span>
+            <div className="payout-table">
+              <TableComponent2 rows={rows} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Payout;

shopsense_seller/src/AdminSide/AdminPages/payouts/payout.css

@@ -0,0 +1,118 @@
+.payout-container{
+    display: flex;
+    position: relative;
+    width: 100%;
+    top: 85px;
+    .payout-left-flex{
+        position: relative;
+        display: flex;
+        width: 250px;
+        justify-content: center;
+        align-items: center;
+        height: calc(100vh - 85px);
+        position: fixed;
+    }
+    .payout-right-flex{
+        display: flex;
+        flex-direction: column;
+        height: auto;
+        width: calc(100vw - 250px);
+        margin-left: 250px;
+        .payout-top{
+            display: flex;
+            height: auto;
+            margin-top: 60px;
+            margin-left: 20px;
+            margin-right: 20px;
+            flex-direction: column;
+            .payout-txt{
+                font-size: 1.5rem;
+                font-weight: bold;
+            }
+            .payout-summary{
+                display: flex;
+                height: 200px;
+                gap:30px;
+                margin-top: 20px;
+                .payout-sum-left{
+                    flex:1;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    border-radius: 20px;
+                    box-shadow: 0px 0px 16px -5px rgba(0,0,0,0.13);
+                    -webkit-box-shadow: 0px 0px 16px -5px rgba(0,0,0,0.13);
+                    -moz-box-shadow: 0px 0px 16px -5px rgba(0,0,0,0.13);
+
+                }
+                .payout-sum-right{
+                    padding-right: 30px;
+                    flex:2;
+                    display: flex;
+                    border-radius: 20px;
+                    justify-content: space-between;
+                    align-items:  center;
+                    box-shadow: 0px 0px 16px -5px rgba(0,0,0,0.13);
+                    -webkit-box-shadow: 0px 0px 16px -5px rgba(0,0,0,0.13);
+                    -moz-box-shadow: 0px 0px 16px -5px rgba(0,0,0,0.13);
+                    .payment-txt{
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: center;
+                    }
+                    Button {
+                        width: 160px;
+                        height: 50px;
+                        background: #000000;
+                        border-radius: 8px;
+                        border: none;
+                        color: #ffffff;
+                        font-size: 20px;
+                        font-weight: 500;
+                        margin-right: 10px;
+                        transition: background-color 0.1s ease;
+                        cursor: pointer;
+                        &:hover{
+                            background-color: rgb(176, 176, 176);
+                            color: black;
+                        }
+                      }
+                }
+                .payment-txt1{
+                    padding-left: 30px;
+                    font-size: 1rem;
+                    color: #575757;
+                    font-weight:500;
+                    line-height: 2;
+                }
+                .payment-txt2{
+                    padding-left: 30px;
+                    font-size: 2rem;
+                    color: black;
+                    font-weight:500;
+                }
+            }
+        }
+        .payout-bottom{
+            display: flex;
+            height: auto;
+            margin-top: 30px;
+            margin-left: 20px;
+            margin-right: 20px;
+            flex-direction: column;
+            .payout-history{
+                font-size: 1.5rem;
+                font-weight: bold;
+
+            }
+            .payout-table{
+                border-radius: 20px;
+                margin-top: 20px;
+                box-shadow: 0px 0px 16px -5px rgba(0,0,0,0.13);
+                -webkit-box-shadow: 0px 0px 16px -5px rgba(0,0,0,0.13);
+                -moz-box-shadow: 0px 0px 16px -5px rgba(0,0,0,0.13);
+
+            }
+        }
+    }
+}