@@ -72,7 +124,7 @@ const AdminDashboard = () => {
diff --git a/shopsense_seller/src/AdminSide/AdminPages/AdminStat/AdminStat.jsx b/shopsense_seller/src/AdminSide/AdminPages/AdminStat/AdminStat.jsx
new file mode 100644
index 0000000..e2c1e18
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+
Sales Stat
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default AdminStat;
diff --git a/shopsense_seller/src/AdminSide/AdminPages/AdminStat/adminStat.css b/shopsense_seller/src/AdminSide/AdminPages/AdminStat/adminStat.css
new file mode 100644
index 0000000..60395bc
--- /dev/null
+++ b/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);
+}
+}
diff --git a/shopsense_seller/src/AdminSide/AdminPages/payouts/Payout.jsx b/shopsense_seller/src/AdminSide/AdminPages/payouts/Payout.jsx
new file mode 100644
index 0000000..c52f535
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+
+
Payout
+
+
+ Total Payement
+ LKR 2000
+
+
+
+ Available Payement
+ LKR 1200
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Payout;
diff --git a/shopsense_seller/src/AdminSide/AdminPages/payouts/payout.css b/shopsense_seller/src/AdminSide/AdminPages/payouts/payout.css
new file mode 100644
index 0000000..ccf83b7
--- /dev/null
+++ b/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);
+
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/shopsense_seller/src/AdminSide/adminComponents/adminNavbar/AdminNav.jsx b/shopsense_seller/src/AdminSide/adminComponents/adminNavbar/AdminNav.jsx
new file mode 100644
index 0000000..332c5f0
--- /dev/null
+++ b/shopsense_seller/src/AdminSide/adminComponents/adminNavbar/AdminNav.jsx
@@ -0,0 +1,20 @@
+import "./adminNav.css";
+import logo from "../../../Components/Assets/logo.png";
+import Bell from "../../../Components/Notification/bell";
+import Profile from "../../../Components/Assets/Profile.jpg";
+
+function AdminNav() {
+ return (
+
+ );
+}
+
+export default AdminNav;
diff --git a/shopsense_seller/src/AdminSide/adminComponents/adminNavbar/adminNav.css b/shopsense_seller/src/AdminSide/adminComponents/adminNavbar/adminNav.css
new file mode 100644
index 0000000..9d0e41a
--- /dev/null
+++ b/shopsense_seller/src/AdminSide/adminComponents/adminNavbar/adminNav.css
@@ -0,0 +1,45 @@
+.FormNavBar {
+ background-color: #ffbfd0;
+ margin: 0%;
+ max-width: 100%;
+ display: flex;
+ justify-content: space-between;
+ padding: 20px;
+ position: fixed;
+ z-index: 2;
+ }
+
+ .Join_button2 {
+ color: white;
+ font-weight: bold;
+ width: 120px;
+ height: 45px;
+ background: #000000;
+ border-radius: 6px;
+ border: none;
+ font-size: 15px;
+ cursor: pointer;
+ transition: background-color 0.8s ease;
+ margin-right: 60px;
+ }
+
+ .Join_button2:hover {
+ background-color: #fe7a9d;
+ color: #000000;
+ }
+
+ .ProfileImg {
+ width: 40px;
+ height: 40px;
+ margin-left: 10px;
+ border-radius: 5px;
+ cursor: pointer;
+ }
+
+ .profilebar {
+ justify-content: center;
+ display: flex;
+ align-items: center;
+ margin-right: 48px;
+ }
+
\ No newline at end of file
diff --git a/shopsense_seller/src/AdminSide/adminComponents/sideNavbar/SideNav.jsx b/shopsense_seller/src/AdminSide/adminComponents/sideNavbar/SideNav.jsx
index 765cf86..78e3b9a 100644
--- a/shopsense_seller/src/AdminSide/adminComponents/sideNavbar/SideNav.jsx
+++ b/shopsense_seller/src/AdminSide/adminComponents/sideNavbar/SideNav.jsx
@@ -5,42 +5,64 @@ import ShoppingCartOutlinedIcon from "@mui/icons-material/ShoppingCartOutlined";
import ShoppingBagOutlinedIcon from "@mui/icons-material/ShoppingBagOutlined";
import InsertChartOutlinedIcon from "@mui/icons-material/InsertChartOutlined";
import TextsmsOutlinedIcon from "@mui/icons-material/TextsmsOutlined";
-import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
+import MonetizationOnOutlinedIcon from "@mui/icons-material/MonetizationOnOutlined";
import LogoutOutlinedIcon from "@mui/icons-material/LogoutOutlined";
+import { Link, NavLink } from "react-router-dom";
+
const SideNav = () => {
+ const menuItem = [
+ {
+ path: "/Dashboard",
+ name: "Dashboard",
+ icon:
,
+ },
+ {
+ path: "/",
+ name: "Order",
+ icon:
,
+ },
+ {
+ path: "/",
+ name: "Products",
+ icon:
,
+ },
+ {
+ path: "/SalesStat",
+ name: "Sales Stat",
+ icon:
,
+ },
+ {
+ path: "/",
+ name: "Message",
+ icon:
,
+ },
+ {
+ path: "/Payout",
+ name: "Payout",
+ icon:
,
+ },
+ {
+ path: "/",
+ name: "Sign Out",
+ icon:
,
+ },
+ ];
return (
-
- -
-
- Dashboard
-
- -
-
- Orders
-
- -
-
- Products
-
- -
-
- Sales Report
-
- -
-
- Messages
-
- -
-
- Settings
-
- -
-
- Sign Out
-
-
+
+ {menuItem.map((item, index) => (
+
+ {item.icon}
+ {item.name}
+
+ ))}
+
);
};
diff --git a/shopsense_seller/src/AdminSide/adminComponents/sideNavbar/sideNav.css b/shopsense_seller/src/AdminSide/adminComponents/sideNavbar/sideNav.css
index 195be46..f2a1fa5 100644
--- a/shopsense_seller/src/AdminSide/adminComponents/sideNavbar/sideNav.css
+++ b/shopsense_seller/src/AdminSide/adminComponents/sideNavbar/sideNav.css
@@ -1,36 +1,40 @@
+.active{
+ background-color: red;
+}
.sideNav{
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
align-items: center;
- ul{
- list-style: none;
- align-items: center;
- padding: 0px
- }
- li{
- color: black;
- display: flex;
- align-items: center;
- margin: 10px;
- padding: 15px 20px;
- cursor: pointer;
- width: 150px;
- border-radius: 10px;
- &:hover{
- background-color: #d0d0d06f;
- transform: scale(1.01)
- }
- &:focus{
- background-color: #d0d0d06f;
- }
- span{
- padding-left: 8px;
- }
- }
+
}
.list-text{
font-size: 1.2rem;
+}
+
+.link{
+ display: flex;
+ color: #4e4d4d;
+ padding: 15px 35px;
+ margin: 12px;
+ gap: 15px;
+ transition: all 0.5s;
+ border-radius: 10px;
+ align-items: center;
+ justify-content: start;
+ line-height: 0;
+ font-size: 1.2rem;
+ text-decoration: none;
+}
+.link:hover{
+ background:rgb(216, 216, 216);
+ color: #4e4d4d;
+ transition: all 0.5s;
+ /* transform: scale(1.02) */
+}
+.active{
+ background: rgb(0, 0, 0);
+ color: #ffffff;
}
\ No newline at end of file
diff --git a/shopsense_seller/src/AdminSide/adminComponents/tableComponent/TableComponent.jsx b/shopsense_seller/src/AdminSide/adminComponents/tableComponent/TableComponent.jsx
index fcb291f..47bfa0d 100644
--- a/shopsense_seller/src/AdminSide/adminComponents/tableComponent/TableComponent.jsx
+++ b/shopsense_seller/src/AdminSide/adminComponents/tableComponent/TableComponent.jsx
@@ -1,63 +1,12 @@
import React from "react";
-import "./tableComponent.css";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
-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",
-
,
- "45%"
- ),
- createData(
- 2,
- "Classic White Button-Up Shirt",
-
,
- "29%"
- ),
- createData(
- 3,
- "Black Leather Biker Jacket",
-
,
- "18%"
- ),
- createData(
- 4,
- "Red Plaid Flannel Shirt",
-
,
- "25%"
- ),
-];
-
-const TableComponent = () => {
+const TableComponent = (props) => {
return (
@@ -77,7 +26,7 @@ const TableComponent = () => {
- {rows.map((row) => (
+ {props.rows.map((row) => (
{
+ return (
+
+
+
+
+
+ No
+
+ Payout Date
+
+
+ Status
+
+
+ Reference_Number
+
+
+
+
+ {props.rows.map((row) => (
+
+
+ {row.No}
+
+ {row.Payout_Date}
+ {row.Status}
+ {row.Reference_Number}
+
+ ))}
+
+
+
+
diff --git a/shopsense_seller/src/Components/Navbar/Navbar.jsx b/shopsense_seller/src/Components/Navbar/Navbar.jsx
index dd65c59..24bbbf0 100644
--- a/shopsense_seller/src/Components/Navbar/Navbar.jsx
+++ b/shopsense_seller/src/Components/Navbar/Navbar.jsx
@@ -26,7 +26,7 @@ function Navbar() {
- Benefit{" "}
+ Benefits{" "}
diff --git a/shopsense_seller/src/Pages/Login/Login.jsx b/shopsense_seller/src/Pages/Login/Login.jsx
index 5d0decf..3b513c0 100644
--- a/shopsense_seller/src/Pages/Login/Login.jsx
+++ b/shopsense_seller/src/Pages/Login/Login.jsx
@@ -35,10 +35,10 @@ function Login() {
className="passwordlogin"
type="password"
>
-
Forget Password ?
-
+
Forgot Password?
+
- Dont have an Account ?{" "}
+ Dont have an Account?{" "}
Sign Up