+
+ );
+};
+
+export default Add;
diff --git a/src/components/add/add.scss b/src/components/add/add.scss
new file mode 100644
index 000000000..b40b7d716
--- /dev/null
+++ b/src/components/add/add.scss
@@ -0,0 +1,66 @@
+@import "../../styles/variables.scss";
+
+.add {
+ width: 100vw;
+ height: 100vh;
+ position: absolute;
+ top: 0;
+ left: 0;
+ background-color: rgba(0, 0, 0, 0.724);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ .modal {
+ padding: 50px;
+ border-radius: 10px;
+ background-color: $main-bg;
+ position: relative;
+
+ h1 {
+ margin-bottom: 40px;
+ font-size: 24px;
+ color: $soft-color;
+ }
+
+ .close {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ cursor: pointer;
+ }
+ form {
+ display: flex;
+ flex-wrap: wrap;
+ max-width: 500px;
+ justify-content: space-between;
+
+ .item {
+ display: flex;
+ width: 40%;
+ flex-direction: column;
+ gap: 10px;
+ margin-bottom: 20px;
+
+ label {
+ font-size: 14px;
+ }
+
+ input {
+ padding: 10px;
+ background-color: transparent;
+ color: white;
+ outline: none;
+ border: 1px solid $soft-color;
+ border-radius: 3px;
+ }
+ }
+
+ button {
+ width: 100%;
+ padding: 10px;
+ cursor: pointer;
+ }
+ }
+ }
+}
diff --git a/src/components/barChartBox/BarChartBox.tsx b/src/components/barChartBox/BarChartBox.tsx
new file mode 100644
index 000000000..482339584
--- /dev/null
+++ b/src/components/barChartBox/BarChartBox.tsx
@@ -0,0 +1,31 @@
+import { Bar, BarChart, ResponsiveContainer, Tooltip } from "recharts";
+import "./barChartBox.scss";
+
+type Props = {
+ title: string;
+ color: string;
+ dataKey: string;
+ chartData: object[];
+};
+
+const BarChartBox = (props: Props) => {
+ return (
+
+ props.setOpen(false)}>
+ X
+
+
+ Add new {props.slug}
+ +
+
+ );
+};
+
+export default BarChartBox;
diff --git a/src/components/barChartBox/barChartBox.scss b/src/components/barChartBox/barChartBox.scss
new file mode 100644
index 000000000..a6d04d6db
--- /dev/null
+++ b/src/components/barChartBox/barChartBox.scss
@@ -0,0 +1,13 @@
+.barChartBox {
+ width: 100%;
+ height: 100%;
+
+ h1 {
+ font-size: 20px;
+ margin-bottom: 20px;
+ }
+
+ .chart {
+
+ }
+}
diff --git a/src/components/bigChartBox/BigChartBox.tsx b/src/components/bigChartBox/BigChartBox.tsx
new file mode 100644
index 000000000..7ebc5e1b2
--- /dev/null
+++ b/src/components/bigChartBox/BigChartBox.tsx
@@ -0,0 +1,99 @@
+import {
+ Area,
+ AreaChart,
+ CartesianGrid,
+ ReferenceLine,
+ ResponsiveContainer,
+ Tooltip,
+ XAxis,
+ YAxis,
+} from "recharts";
+import "./bigChartBox.scss";
+
+const data = [
+ {
+ name: "Sun",
+ books: 4000,
+ clothes: 2400,
+ electronic: 2400,
+ },
+ {
+ name: "Mon",
+ books: 3000,
+ clothes: 1398,
+ electronic: 2210,
+ },
+ {
+ name: "Tue",
+ books: 2000,
+ clothes: 9800,
+ electronic: 2290,
+ },
+ {
+ name: "Wed",
+ books: 2780,
+ clothes: 3908,
+ electronic: 2000,
+ },
+ {
+ name: "Thu",
+ books: 1890,
+ clothes: 4800,
+ electronic: 2181,
+ },
+ {
+ name: "Fri",
+ books: 2390,
+ clothes: 3800,
+ electronic: 2500,
+ },
+ {
+ name: "Sat",
+ books: 3490,
+ clothes: 4300,
+ electronic: 2100,
+ },
+];
+
+const BigChartBox = () => {
+ return (
+ {props.title}
+
+
+
+
+
+
+
+
+ );
+};
+
+export default BigChartBox;
diff --git a/src/components/bigChartBox/bigChartBox.scss b/src/components/bigChartBox/bigChartBox.scss
new file mode 100644
index 000000000..fa533f089
--- /dev/null
+++ b/src/components/bigChartBox/bigChartBox.scss
@@ -0,0 +1,20 @@
+@import "../../styles/responsive.scss";
+
+.bigChartBox {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ h1 {
+ @include xxl {
+ font-size: 24px;
+ }
+ }
+
+ .chart {
+ width: 100%;
+ height: 300px;
+ }
+}
diff --git a/src/components/chartBox/ChartBox.tsx b/src/components/chartBox/ChartBox.tsx
new file mode 100644
index 000000000..03ee58229
--- /dev/null
+++ b/src/components/chartBox/ChartBox.tsx
@@ -0,0 +1,72 @@
+import { Link } from "react-router";
+import "./chartBox.scss";
+import {
+ Area,
+ AreaChart,
+ CartesianGrid,
+ Legend,
+ Line,
+ LineChart,
+ ReferenceLine,
+ ResponsiveContainer,
+ Tooltip,
+ XAxis,
+ YAxis,
+} from "recharts";
+
+type Props = {
+ color: string;
+ icon: string;
+ title: string;
+ dataKey: string;
+ number: number | string;
+ percentage: number;
+ charData: object[];
+};
+
+const ChartBox = (props: Props) => {
+ return (
+ Revenu Analytics
+
+
+
+
+
+
+
+
+ );
+};
+
+export default ChartBox;
diff --git a/src/components/chartBox/chartBox.scss b/src/components/chartBox/chartBox.scss
new file mode 100644
index 000000000..bebdd33b6
--- /dev/null
+++ b/src/components/chartBox/chartBox.scss
@@ -0,0 +1,67 @@
+@import "../../styles/responsive.scss";
+
+.chartBox {
+ display: flex;
+ height: 100%;
+
+ @include sm {
+ flex-direction: column;
+ }
+
+ .boxInfo {
+ display: flex;
+ flex: 3;
+ flex-direction: column;
+ justify-content: space-between;
+
+ @include sm {
+ gap: 20px;
+ }
+
+ .title {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+
+ @include xxl {
+ font-size: 14px;
+ }
+ }
+
+ h1 {
+ @include xxl {
+ font-size: 20px;
+ }
+ }
+ }
+
+ .chartInfo {
+ flex: 3;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ .chart {
+ width: 100%;
+ height: 100%;
+ }
+
+ .texts {
+ display: flex;
+ flex-direction: column;
+ text-align: right;
+
+ .percentage {
+ font-weight: bold;
+ font-size: 20px;
+ @include xxl {
+ font-size: 16px;
+ }
+ }
+
+ .duration {
+ font-size: 14px;
+ }
+ }
+ }
+}
diff --git a/src/components/dataTable/DataTable.tsx b/src/components/dataTable/DataTable.tsx
new file mode 100644
index 000000000..3f6f36a84
--- /dev/null
+++ b/src/components/dataTable/DataTable.tsx
@@ -0,0 +1,68 @@
+import { DataGrid, GridColDef } from "@mui/x-data-grid";
+import "./dataTable.scss";
+import {} from "@mui/x-data-grid";
+import { Link } from "react-router";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+type Props = {
+ columns: GridColDef[];
+ rows: object[];
+ slug: string;
+};
+
+const DataTable = (props: Props) => {
+ const queryClient = useQueryClient();
+ const mutation = useMutation({
+ mutationFn: (id: number) => {
+ return fetch(`http://localhost:8800/api/${props.slug}/${id}`, {
+ method: "delete",
+ });
+ },
+ onSuccess: () => {
+ queryClient.invalidateQueries([`all${props.slug}`]);
+ },
+ });
+ const handleDelete = (id: number) => {
+ mutation.mutate(id);
+ };
+
+ const actionColumn: GridColDef = {
+ field: "action",
+ headerName: "Action",
+ width: 200,
+ renderCell: (params) => {
+ return (
+
+
+
+ 
+ {props.title}
+
+ {props.number}
+ + View all + +
+
+
+
+
+
+
+
+
+
+
+ {props.percentage}%
+
+ this month
+
+
+ 
+
+
+ );
+ },
+ };
+
+ return (
+
+
+ handleDelete(params.row.id)}>
+ 
+
+
+
+
+ );
+};
+
+export default DataTable;
diff --git a/src/components/dataTable/dataTable.scss b/src/components/dataTable/dataTable.scss
new file mode 100644
index 000000000..f8f954a85
--- /dev/null
+++ b/src/components/dataTable/dataTable.scss
@@ -0,0 +1,31 @@
+.dataTable {
+ .dataGrid {
+ padding: 20px;
+
+ .MuiDataGrid-cell {
+ display: flex;
+ align-items: center;
+ }
+
+ img {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ object-fit: cover;
+ }
+
+ .action {
+ display: flex;
+ gap: 15px;
+
+ img {
+ width: 20px;
+ height: 20px;
+ cursor: pointer;
+ }
+
+ .delete {
+ }
+ }
+ }
+}
diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx
new file mode 100644
index 000000000..a32aff0e0
--- /dev/null
+++ b/src/components/footer/Footer.tsx
@@ -0,0 +1,12 @@
+import "./footer.scss";
+
+const Footer = () => {
+ return (
+
+ lamadmin
+ © Lama Dev Admin Dashboard
+
+ );
+};
+
+export default Footer;
diff --git a/src/components/footer/footer.scss b/src/components/footer/footer.scss
new file mode 100644
index 000000000..917f29132
--- /dev/null
+++ b/src/components/footer/footer.scss
@@ -0,0 +1,16 @@
+.footer {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 30px;
+
+ span {
+ :first-child {
+ font-weight: bold;
+ }
+
+ :last-child {
+ font-size: 14px;
+ }
+ }
+}
diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
new file mode 100644
index 000000000..60cdef6cc
--- /dev/null
+++ b/src/components/menu/Menu.tsx
@@ -0,0 +1,23 @@
+import { Link } from "react-router";
+import "./menu.scss";
+import { menu } from "../../Data";
+
+const Menu = () => {
+ return (
+
+ {menu.map((item) => (
+
+ );
+};
+
+export default Menu;
diff --git a/src/components/menu/menu.scss b/src/components/menu/menu.scss
new file mode 100644
index 000000000..abee94a0d
--- /dev/null
+++ b/src/components/menu/menu.scss
@@ -0,0 +1,39 @@
+@import "../../styles/variables.scss";
+@import "../../styles/responsive.scss";
+
+.menu {
+ .item {
+ display: flex;
+ flex-direction: column;
+ // gap: 10px;
+ margin-bottom: 20px;
+
+ .title {
+ font-size: 12px;
+ font-weight: 200;
+ color: $soft-color;
+
+ @include lg {
+ display: none;
+ }
+ }
+
+ .listItem {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 10px;
+ border-radius: 5px;
+
+ &:hover {
+ background-color: $soft-bg;
+ }
+
+ .listItemTitle {
+ @include lg {
+ display: none;
+ }
+ }
+ }
+ }
+}
diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx
new file mode 100644
index 000000000..1ba51ab26
--- /dev/null
+++ b/src/components/navbar/Navbar.tsx
@@ -0,0 +1,28 @@
+import "./navbar.scss";
+
+const Navbar = () => {
+ return (
+
+ {item.title.toUpperCase()}
+ {item.listItems.map((listItem) => (
+
+ 
+ {listItem.title}
+
+ ))}
+
+ ))}
+
+
+ );
+};
+
+export default Navbar;
diff --git a/src/components/navbar/navbar.scss b/src/components/navbar/navbar.scss
new file mode 100644
index 000000000..6fd10f004
--- /dev/null
+++ b/src/components/navbar/navbar.scss
@@ -0,0 +1,57 @@
+@import "../../styles/responsive.scss";
+
+.navbar {
+ display: flex;
+ width: 100%;
+ padding: 20px;
+ align-items: center;
+ justify-content: space-between;
+
+ .logo {
+ display: flex;
+ align-items: center;
+ font-weight: bold;
+ gap: 10px;
+ }
+
+ .icons {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+
+ .icon {
+ @include sm {
+ display: none;
+ }
+ }
+
+ .notification {
+ position: relative;
+ span {
+ background-color: red;
+ color: white;
+ width: 16px;
+ height: 16px;
+ border-radius: 50%;
+ position: absolute;
+ top: -10px;
+ right: -10px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 12px;
+ }
+ }
+ .user {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ img {
+ width: 26px;
+ height: 26px;
+ border-radius: 50%;
+ object-fit: cover;
+ }
+ }
+ }
+}
diff --git a/src/components/pieChartBox/PieChartBox.tsx b/src/components/pieChartBox/PieChartBox.tsx
new file mode 100644
index 000000000..f609d3b4d
--- /dev/null
+++ b/src/components/pieChartBox/PieChartBox.tsx
@@ -0,0 +1,50 @@
+import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from "recharts";
+import "./pieChartBox.scss";
+
+const data = [
+ { name: "Mobile", value: 400, color: "#0088FE" },
+ { name: "Desktop", value: 300, color: "#00C49F" },
+ { name: "Laptop", value: 300, color: "#FFBB28" },
+ { name: "Tablet", value: 200, color: "#FF8042" },
+];
+
+const PieChartBox = () => {
+ return (
+
+ 
+ lamadmin
+
+
+ lamadmin
+
+ 
+ 
+ 
+ 
+
+
+
+
+
+ 
+ 1
+
+
+ 1
+
+ 
+ John
+
+
+ John
+
+
+
+ );
+};
+
+export default PieChartBox;
diff --git a/src/components/pieChartBox/pieChartBox.scss b/src/components/pieChartBox/pieChartBox.scss
new file mode 100644
index 000000000..967ae83a0
--- /dev/null
+++ b/src/components/pieChartBox/pieChartBox.scss
@@ -0,0 +1,46 @@
+@import "../../styles/responsive.scss";
+
+.pieChartBox {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ h1 {
+ @include xxl {
+ font-size: 24px;
+ }
+ }
+
+ .chart {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+ }
+
+ .options {
+ display: flex;
+ justify-content: space-between;
+ gap: 10px;
+ font-size: 14px;
+
+ .option {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ align-items: center;
+ .title {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ .dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+ }
+ }
+ }
+}
diff --git a/src/components/single/Single.tsx b/src/components/single/Single.tsx
new file mode 100644
index 000000000..c04390477
--- /dev/null
+++ b/src/components/single/Single.tsx
@@ -0,0 +1,88 @@
+import {
+ CartesianGrid,
+ Legend,
+ Line,
+ LineChart,
+ ResponsiveContainer,
+ Tooltip,
+ XAxis,
+ YAxis,
+} from "recharts";
+import "./single.scss";
+
+type Props = {
+ id: number;
+ img?: string;
+ title: string;
+ info: object;
+ chart?: {
+ dataKeys: { name: string; color: string }[];
+ data: object[];
+ };
+ activities?: { time: string; text: string }[];
+};
+const Single = (props: Props) => {
+ return (
+ Leads by Source
+
+
+
+
+ {data.map((item) => (
+ |
+ ))}
+
+
+
+
+
+ {data.map((item) => (
+
+
+
+ ))}
+
+
+ {item.name}
+
+ {item.value}
+
+
+ );
+};
+
+export default Single;
diff --git a/src/components/single/single.scss b/src/components/single/single.scss
new file mode 100644
index 000000000..01131ebf6
--- /dev/null
+++ b/src/components/single/single.scss
@@ -0,0 +1,110 @@
+@import "../../styles/responsive.scss";
+
+.single {
+ display: flex;
+
+ @include xl {
+ flex-direction: column;
+ }
+
+ .view {
+ flex: 1;
+
+ .info {
+ .topInfo {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+
+ img {
+ width: 100px;
+ height: 100px;
+ border-radius: 20px;
+ object-fit: cover;
+ }
+
+ h1 {
+ font-weight: 500;
+ }
+ }
+ .details {
+ font-size: 18px;
+
+ .item {
+ margin: 30px 0px;
+
+ .itemTitle {
+ font-weight: 600;
+ margin-right: 10px;
+ text-transform: capitalize;
+ }
+ }
+ }
+ }
+ hr {
+ width: 90%;
+ height: 0;
+ border: 0.5px solid gray;
+ margin: 20px 0px;
+
+ @include md {
+ display: none;
+ }
+ }
+ .chart {
+ margin-top: 50px;
+ width: 80%;
+ height: 400px;
+
+ @include md {
+ display: none;
+ }
+ }
+ }
+ .activities {
+ flex: 1;
+
+ h2 {
+ margin-bottom: 20px;
+ }
+
+ ul {
+ li {
+ list-style-type: none;
+ position: relative;
+ width: 1px;
+ padding-top: 50px;
+ background-color: #f45b69;
+
+ &::after {
+ content: "";
+ position: absolute;
+ left: 50%;
+ bottom: 0;
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ background-color: #f45b69;
+ transform: translateX(-50%);
+ }
+
+ div {
+ min-width: 480px;
+ padding: 15px;
+ background-color: #f45b6810;
+
+ @include md {
+ min-width: 250px;
+ }
+
+ p {
+ margin-bottom: 5px;
+ }
+ time {
+ font-size: 12px;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/src/components/topbox/TopBox.tsx b/src/components/topbox/TopBox.tsx
new file mode 100644
index 000000000..17a6a7935
--- /dev/null
+++ b/src/components/topbox/TopBox.tsx
@@ -0,0 +1,26 @@
+import "./topBox.scss";
+import { topDealUsers } from "../../Data";
+
+const TopBox = () => {
+ return (
+
+
+ {props.chart && ( +
+
+
+
+ {props.img && 
}
+
+ {props.title}
+ +
+ {Object.entries(props.info).map((item) => (
+
+
+ Username:
+ John Doe
+
+ ))}
+ + {props.chart && ( +
+
+
+
+
+
+ )}
+
+
+ Latest Activities
+ {props.activities && ( +-
+ {props.activities.map((activity) => (
+
-
+ ++
{activity.text}
+ +
+ ))}
+
+
+ );
+};
+
+export default TopBox;
diff --git a/src/components/topbox/topBox.scss b/src/components/topbox/topBox.scss
new file mode 100644
index 000000000..70f9917eb
--- /dev/null
+++ b/src/components/topbox/topBox.scss
@@ -0,0 +1,65 @@
+@import "../../styles/responsive.scss";
+
+.topBox {
+ h1 {
+ margin-bottom: 20px;
+
+ @include xxl {
+ font-size: 24px;
+ }
+ }
+
+ .list {
+ .listItem {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 30px;
+ .user {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+ img {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ object-fit: cover;
+
+ @include xxl {
+ display: none;
+ }
+
+ @include lg {
+ display: block;
+ }
+ }
+
+ .userTexts {
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ .username {
+ font-size: 14px;
+ font-weight: 500;
+ }
+
+ .email {
+ font-size: 12px;
+
+ @include xxl {
+ display: none;
+ }
+
+ @include lg {
+ display: block;
+ }
+ }
+ }
+ }
+
+ .amount {
+ font-weight: 500;
+ }
+ }
+ }
+}
diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx
new file mode 100644
index 000000000..9dd293c0e
--- /dev/null
+++ b/src/pages/home/Home.tsx
@@ -0,0 +1,50 @@
+import BarChartBox from "../../components/barChartBox/BarChartBox";
+import BigChartBox from "../../components/bigChartBox/BigChartBox";
+import ChartBox from "../../components/chartBox/ChartBox";
+import PieChartBox from "../../components/pieChartBox/PieChartBox";
+import TopBox from "../../components/topbox/TopBox";
+import {
+ barChartBoxRevenue,
+ barChartBoxVisit,
+ chartBoxConversion,
+ chartBoxProduct,
+ chartBoxRevenue,
+ chartBoxUser,
+} from "../../Data";
+import "./home.scss";
+
+const Home = () => {
+ return (
+ Top Deals
+
+ {topDealUsers.map((user) => (
+
+
+
+ ))}
+
+ 
+
+ ${user.amount}
+
+ {user.username}
+ {user.email}
+
+
+
+ );
+};
+
+export default Home;
diff --git a/src/pages/home/home.scss b/src/pages/home/home.scss
new file mode 100644
index 000000000..569a8c280
--- /dev/null
+++ b/src/pages/home/home.scss
@@ -0,0 +1,47 @@
+@import "../../styles/variables.scss";
+@import "../../styles/responsive.scss";
+
+.home {
+ display: grid;
+ gap: 20px;
+ grid-template-columns: repeat(4, 1fr);
+ grid-auto-rows: minmax(180px, auto);
+ grid-auto-flow: dense;
+
+ @include xl {
+ grid-template-columns: repeat(3, 1fr);
+ }
+
+ @include lg {
+ grid-template-columns: repeat(2, 1fr);
+ }
+ @include md {
+ grid-template-columns: repeat(1, 1fr);
+ }
+ @include sm {
+ grid-template-rows: minmax(120px, auto);
+ }
+
+ .box {
+ padding: 20px;
+ border-radius: 10px;
+ border: 1px solid $soft-bg;
+ }
+
+ .box1 {
+ grid-column: span 1;
+ grid-row: span 3;
+ }
+
+ .box4 {
+ grid-column: span 1;
+ grid-row: span 3;
+ }
+ .box7 {
+ grid-column: span 2;
+ grid-row: span 2;
+ @include lg {
+ display: none;
+ }
+ }
+}
diff --git a/src/pages/login/Login.tsx b/src/pages/login/Login.tsx
new file mode 100644
index 000000000..2fcee40eb
--- /dev/null
+++ b/src/pages/login/Login.tsx
@@ -0,0 +1,5 @@
+const Login = () => {
+ return
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Login
;
+};
+
+export default Login;
diff --git a/src/pages/product/Product.tsx b/src/pages/product/Product.tsx
new file mode 100644
index 000000000..8c1a73a98
--- /dev/null
+++ b/src/pages/product/Product.tsx
@@ -0,0 +1,14 @@
+import Single from "../../components/single/Single";
+import { singleProduct } from "../../Data";
+import "./product.scss";
+
+const Product = () => {
+ // Fetch data and send to Single Component
+ return (
+
+
+ );
+};
+
+export default Product;
diff --git a/src/pages/product/product.scss b/src/pages/product/product.scss
new file mode 100644
index 000000000..89fb85545
--- /dev/null
+++ b/src/pages/product/product.scss
@@ -0,0 +1 @@
+.product{}
\ No newline at end of file
diff --git a/src/pages/products/Products.tsx b/src/pages/products/Products.tsx
new file mode 100644
index 000000000..de0eedc46
--- /dev/null
+++ b/src/pages/products/Products.tsx
@@ -0,0 +1,71 @@
+import { useState } from "react";
+import "./products.scss";
+import DataTable from "../../components/dataTable/DataTable";
+import Add from "../../components/add/Add";
+import { GridColDef } from "@mui/x-data-grid";
+import { products } from "../../Data";
+
+const columns: GridColDef[] = [
+ { field: "id", headerName: "ID", width: 90 },
+ {
+ field: "img",
+ headerName: "Image",
+ width: 100,
+ renderCell: (params) => {
+ return
+
+ );
+};
+
+export default Products;
diff --git a/src/pages/products/products.scss b/src/pages/products/products.scss
new file mode 100644
index 000000000..6509806d9
--- /dev/null
+++ b/src/pages/products/products.scss
@@ -0,0 +1,14 @@
+.products {
+ .info {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+ margin-bottom: 20px;
+
+ button {
+ padding: 5px;
+ cursor: pointer;
+ border-radius: 5px;
+ }
+ }
+}
diff --git a/src/pages/user/User.tsx b/src/pages/user/User.tsx
new file mode 100644
index 000000000..841ad71b6
--- /dev/null
+++ b/src/pages/user/User.tsx
@@ -0,0 +1,15 @@
+import Single from "../../components/single/Single";
+import { singleUser } from "../../Data";
+import "./user.scss";
+
+const User = () => {
+ // Fetch data and send to Single Component
+
+ return (
+
+
+ Products
+ +
+
+ );
+};
+
+export default User;
diff --git a/src/pages/user/user.scss b/src/pages/user/user.scss
new file mode 100644
index 000000000..2e570d724
--- /dev/null
+++ b/src/pages/user/user.scss
@@ -0,0 +1,2 @@
+.user {
+}
diff --git a/src/pages/users/Users.tsx b/src/pages/users/Users.tsx
new file mode 100644
index 000000000..04a78c4be
--- /dev/null
+++ b/src/pages/users/Users.tsx
@@ -0,0 +1,101 @@
+import { GridColDef } from "@mui/x-data-grid";
+import DataTable from "../../components/dataTable/DataTable";
+import "./users.scss";
+import { useState } from "react";
+import Add from "../../components/add/Add";
+import { useQuery } from "@tanstack/react-query";
+
+const columns: GridColDef<(typeof rows)[number]>[] = [
+ { field: "id", headerName: "ID", width: 90 },
+ {
+ field: "img",
+ headerName: "Avatar",
+ width: 100,
+ renderCell: (params) => {
+ return
+
+ );
+};
+
+export default Users;
diff --git a/src/pages/users/users.scss b/src/pages/users/users.scss
new file mode 100644
index 000000000..3e9a8ffe1
--- /dev/null
+++ b/src/pages/users/users.scss
@@ -0,0 +1,14 @@
+.users {
+ .info {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+ margin-bottom: 20px;
+
+ button {
+ padding: 5px;
+ cursor: pointer;
+ border-radius: 5px;
+ }
+ }
+}
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 3e0ef6b2b..db8d15867 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -1,3 +1,6 @@
+@import "./variables.scss";
+@import "../styles/responsive.scss";
+
* {
margin: 0;
padding: 0;
@@ -7,4 +10,29 @@
a {
text-decoration: none;
color: inherit;
-}
\ No newline at end of file
+}
+
+.main {
+ font-family: "Inter", sans-serif;
+ background-color: $main-bg;
+ color: $main-color;
+}
+
+.container {
+ display: flex;
+}
+
+.menuContainer {
+ width: 250px;
+ padding: 5px 20px;
+ border-right: 2px solid $soft-bg;
+
+ @include lg {
+ width: max-content;
+ }
+}
+
+.contentContainer {
+ padding: 5px 20px;
+ width: 100%;
+}
diff --git a/src/styles/responsive.scss b/src/styles/responsive.scss
new file mode 100644
index 000000000..0934bb399
--- /dev/null
+++ b/src/styles/responsive.scss
@@ -0,0 +1,35 @@
+$sm: 480px;
+$md: 768px;
+$lg: 1024px;
+$xl: 1200px;
+$xxl: 1400px;
+
+@mixin sm {
+ @media (max-width: ($sm)) {
+ @content;
+ }
+}
+
+@mixin md {
+ @media (max-width: ($md)) {
+ @content;
+ }
+}
+
+@mixin lg {
+ @media (max-width: ($lg)) {
+ @content;
+ }
+}
+
+@mixin xl {
+ @media (max-width: ($xl)) {
+ @content;
+ }
+}
+
+@mixin xxl {
+ @media (max-width: ($xxl)) {
+ @content;
+ }
+}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
new file mode 100644
index 000000000..aff3032f7
--- /dev/null
+++ b/src/styles/variables.scss
@@ -0,0 +1,8 @@
+// BG
+$main-bg: #2a3447;
+$soft-bg: #384256;
+$dark-bg: #222b3c;
+// TEXT
+$main-color: white;
+$soft-color: #ddd;
+$dark-color: #2a3447;
+
+ {isLoading ? (
+ "Loading..."
+ ) : (
+