+
+ );
+}
+
+
+ //how to useee--
+ //given prop details are defaults...if you want to change.here is the way -->
+
+
+
+
+ //
\ No newline at end of file
diff --git a/client/src/components/contents/cards/mediacards/Itemcardsforpc.jsx b/client/src/components/contents/cards/mediacards/Itemcardsforpc.jsx
new file mode 100644
index 0000000..3a1f534
--- /dev/null
+++ b/client/src/components/contents/cards/mediacards/Itemcardsforpc.jsx
@@ -0,0 +1,63 @@
+
+export default function Itemcardforpc({ src="/graph1.png" , stock="In Stock" , itemname = "Player 1:Intel ARC Edition", price = "710,000 LKR" }) {
+ return (
+
+
+
+ {/* full border area up */}
+
+
+ {/* stock availability area */}
+
+
+ {stock}
+
+
+
+
+ {/* image area */}
+
+
+
+
+
+
+
+
+ {/* name area */}
+
+
+
+
{itemname}
+
+
+
+
+
+
+
+ {/* price area */}
+
{price}
+
+
+
+ {/* add to cart button area -- will replace with atomic button */}
+
+
+
+
+
+
+ );
+ }
+
+
+
+
+ //how to useee--
+ //given prop details are defaults...if you want to change.here is the way -->
+
+
+ //
\ No newline at end of file
diff --git a/client/src/components/contents/icons and images/Imageplaceholder.jsx b/client/src/components/contents/icons and images/Imageplaceholder.jsx
new file mode 100644
index 0000000..bdb57ff
--- /dev/null
+++ b/client/src/components/contents/icons and images/Imageplaceholder.jsx
@@ -0,0 +1,12 @@
+import ImageNotSupportedIcon from '@mui/icons-material/ImageNotSupported';
+
+export default function Imageplaceholder({ bgColor = "#e0e0e0", size = "large" }) {
+ return (
+
+
+
+ );
+}
+
+// how to usssseee:
+//
diff --git a/client/src/components/contents/icons and images/Lazyloadingwrapper.jsx b/client/src/components/contents/icons and images/Lazyloadingwrapper.jsx
new file mode 100644
index 0000000..ffbd1fc
--- /dev/null
+++ b/client/src/components/contents/icons and images/Lazyloadingwrapper.jsx
@@ -0,0 +1,26 @@
+import { useState, useEffect } from "react";
+import { Skeleton } from "@mui/material";
+
+export default function Lazyloadingwrapper({ src, alt = "Image", width = "100%", height = "200px", skeletonColor = "#ccc" }) {
+ const [loaded, setLoaded] = useState(false);
+
+ useEffect(() => {
+ const img = new Image();
+ img.src = src;
+ img.onload = () => setLoaded(true);
+ }, [src]);
+
+ return (
+
+ {!loaded && }
+
+
+ );
+}
+
+// how to ussssssseee:
+//
diff --git a/client/src/components/contents/icons and images/icons/Deleteicon.jsx b/client/src/components/contents/icons and images/icons/Deleteicon.jsx
new file mode 100644
index 0000000..701c0d9
--- /dev/null
+++ b/client/src/components/contents/icons and images/icons/Deleteicon.jsx
@@ -0,0 +1,10 @@
+import DeleteIcon from '@mui/icons-material/Delete';
+
+export default function Deleteicon({ deleteColor = "primary", size = "large" })
+{
+ return (
+
+
+
+ );
+}
diff --git a/client/src/components/contents/icons and images/icons/Iconset.jsx b/client/src/components/contents/icons and images/icons/Iconset.jsx
new file mode 100644
index 0000000..e7cbe61
--- /dev/null
+++ b/client/src/components/contents/icons and images/icons/Iconset.jsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import EditIcon from "@mui/icons-material/Edit";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import DeleteIcon from "@mui/icons-material/Delete";
+import AddIcon from "@mui/icons-material/Add";
+import SearchIcon from "@mui/icons-material/Search";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import DashboardIcon from "@mui/icons-material/Dashboard";
+import SettingsIcon from "@mui/icons-material/Settings";
+import ShoppingBagIcon from "@mui/icons-material/ShoppingBag";
+import ReceiptIcon from "@mui/icons-material/Receipt";
+import GroupIcon from "@mui/icons-material/Group";
+import FeedbackIcon from "@mui/icons-material/Feedback";
+import PhoneIcon from "@mui/icons-material/Phone";
+import EmailIcon from "@mui/icons-material/Email";
+import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
+import PlaceIcon from "@mui/icons-material/Place";
+import NotificationsIcon from "@mui/icons-material/Notifications";
+import DarkModeIcon from "@mui/icons-material/DarkMode";
+import VpnKeyIcon from "@mui/icons-material/VpnKey";
+import CreateIcon from "@mui/icons-material/Create";
+import FavoriteIcon from "@mui/icons-material/Favorite";
+import DownloadIcon from "@mui/icons-material/Download";
+import MessageIcon from "@mui/icons-material/Message";
+import ExitToAppIcon from "@mui/icons-material/ExitToApp";
+import MonetizationOnIcon from "@mui/icons-material/MonetizationOn";
+import HourglassEmptyIcon from "@mui/icons-material/HourglassEmpty";
+
+export default function Iconset({ type='notification', fontSize='30px', color = "primary" }) {
+ const renderIcon = () => {
+ switch (type) {
+ case 'edit': return ;
+ case 'more': return ;
+ case 'delete': return ;
+ case 'add': return ;
+ case 'search': return ;
+ case 'view': return ;
+ case 'dashboard': return ;
+ case 'settings': return ;
+ case 'product': return ;
+ case 'order': return ;
+ case 'user-manage': return ;
+ case 'feedback-manage': return ;
+ case 'invoice': return ;
+ case 'call': return ;
+ case 'email': return ;
+ case 'calendar': return ;
+ case 'location': return ;
+ case 'notification': return ;
+ case 'darkmode': return ;
+ case 'key': return ;
+ case 'pen': return ;
+ case 'heart': return ;
+ case 'download': return ;
+ case 'message': return ;
+ case 'signout': return ;
+ case 'money': return ;
+ case 'pending': return ;
+ default: return null;
+ }
+ };
+ return {renderIcon()};
+}
+
+
+
+//font size should be in pixels
diff --git a/client/src/components/contents/icons and images/icons/Personicon.jsx b/client/src/components/contents/icons and images/icons/Personicon.jsx
new file mode 100644
index 0000000..a4227bf
--- /dev/null
+++ b/client/src/components/contents/icons and images/icons/Personicon.jsx
@@ -0,0 +1,11 @@
+import PersonIcon from '@mui/icons-material/Person';
+
+
+export default function Personicon({ userColor = "action", size = "large" ,})
+{
+ return (
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/client/src/components/contents/icons and images/icons/Searchicon.jsx b/client/src/components/contents/icons and images/icons/Searchicon.jsx
new file mode 100644
index 0000000..c4b554d
--- /dev/null
+++ b/client/src/components/contents/icons and images/icons/Searchicon.jsx
@@ -0,0 +1,11 @@
+import SearchIcon from '@mui/icons-material/Search';
+
+
+export default function Searchicon ({ searchColor = "secondary", size = "large" })
+{
+ return (
+
+
+
+ );
+ }
\ No newline at end of file
diff --git a/client/src/components/contents/icons and images/icons/Shoppingcarticon.jsx b/client/src/components/contents/icons and images/icons/Shoppingcarticon.jsx
new file mode 100644
index 0000000..038c5dd
--- /dev/null
+++ b/client/src/components/contents/icons and images/icons/Shoppingcarticon.jsx
@@ -0,0 +1,10 @@
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
+
+export default function ShoppingcartIcon({ cartColor = "primary", size = "large" })
+{
+ return (
+
+
+
+ );
+}
diff --git a/client/src/components/contents/icons and images/logos/Logo.jsx b/client/src/components/contents/icons and images/logos/Logo.jsx
new file mode 100644
index 0000000..2fb82c8
--- /dev/null
+++ b/client/src/components/contents/icons and images/logos/Logo.jsx
@@ -0,0 +1,9 @@
+export default function Logo({ src = "/logo.png", alt = "Logo", width = "150px", height = "50px" }) {
+ return (
+
+ );
+ }
+
+
+// how to useeee:
+//
\ No newline at end of file
diff --git a/client/src/index.css b/client/src/index.css
index 6119ad9..bd6213e 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -1,68 +1,3 @@
-:root {
- font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
- line-height: 1.5;
- font-weight: 400;
-
- color-scheme: light dark;
- color: rgba(255, 255, 255, 0.87);
- background-color: #242424;
-
- font-synthesis: none;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-a {
- font-weight: 500;
- color: #646cff;
- text-decoration: inherit;
-}
-a:hover {
- color: #535bf2;
-}
-
-body {
- margin: 0;
- display: flex;
- place-items: center;
- min-width: 320px;
- min-height: 100vh;
-}
-
-h1 {
- font-size: 3.2em;
- line-height: 1.1;
-}
-
-button {
- border-radius: 8px;
- border: 1px solid transparent;
- padding: 0.6em 1.2em;
- font-size: 1em;
- font-weight: 500;
- font-family: inherit;
- background-color: #1a1a1a;
- cursor: pointer;
- transition: border-color 0.25s;
-}
-button:hover {
- border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
- outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
- :root {
- color: #213547;
- background-color: #ffffff;
- }
- a:hover {
- color: #747bff;
- }
- button {
- background-color: #f9f9f9;
- }
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/client/src/main.jsx b/client/src/main.jsx
index b9a1a6d..95b6695 100644
--- a/client/src/main.jsx
+++ b/client/src/main.jsx
@@ -1,10 +1,137 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.jsx'
-
-createRoot(document.getElementById('root')).render(
-
-
- ,
-)
+import React from "react";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { Provider } from "react-redux";
+import store from "./Store/store.js"; // Import your Redux store
+import "./index.css";
+import App from "./App.jsx";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { ThemeProvider } from "@mui/material/styles";
+import theme from "./AtomicComponents/theme.jsx";
+import { Toaster } from "sonner";
+
+// Admin Components
+import Dashboard from "./Admin/Dashboard.jsx";
+import AdminProfile from "./Admin/AdminProfile.jsx";
+import AdminSetting from "./Admin/AdminSetting.jsx";
+import Layout from "./Admin/Layout.jsx";
+import ManageProducts from "./Admin/ManageProducts.jsx";
+import CreateProducts from "./Admin/CreateProducts.jsx";
+import Usermanage from "./Admin/Usermanage.jsx";
+import Complaints from "./Admin/Complaints.jsx";
+import RMA from "./Admin/RMA.jsx";
+import Review from "./Admin/Review.jsx";
+import InvoiceList from "./Admin/InvoiceList.jsx";
+import InvoiceCreate from "./Admin/InvoiceCreate.jsx";
+
+// Login Components
+import Signup from "./Login/Signup.jsx";
+import Login from "./Login/Login.jsx";
+import Verify from "./Login/Verify.jsx";
+import ResetPassword from "./Login/Resetpassword.jsx";
+import ForgetPassword from "./Login/Forgetpassword.jsx";
+
+// User Components
+import ComplaintSubmit from "./User/ComplaintSubmit.jsx";
+import UserComplaints from "./User/UserComplaints.jsx";
+import UserProfile from "./UserdashboardFeature/pages/UserProfile.jsx";
+import RMAsupport from "./UserdashboardFeature/pages/RMAsupport.jsx";
+import MyOrders from "./UserdashboardFeature/pages/MyOrders.jsx";
+import OrderHistory from "./UserdashboardFeature/pages/OrderHistory.jsx";
+import SavedBuilds from "./UserdashboardFeature/pages/SavedBuilds.jsx";
+import Settings from "./UserdashboardFeature/pages/Settings.jsx";
+
+// Other Pages
+import Home from "./pages/Home/Home.jsx";
+import About from "./pages/About_page/About.jsx";
+import LoginPage from "./pages/Login_page/Login_page.jsx";
+import CartPage from "./pages/Shopping_cart/CartPage.jsx";
+import PaymentGateway from "./pages/Shopping_cart/PaymentGateway.jsx";
+import ProductCategoryPage from "./pages/Producat_category/Productcategorypage.jsx";
+import ItemPage from "./pages/Single_Item/Itempage.jsx";
+import SearchResults from "./pages/Searchbar/SearchResults.jsx";
+import LaptopCategoryPage from "./pages/Laptop_category/Laptopcategorypage.jsx";
+import Testing from "./pages/Testing.jsx";
+import CreateGames from "./Admin/CreateGames.jsx"; // Import CreateGames
+import ManageGames from "./Admin/ManageGames.jsx"; // Placeholder for ManageGames
+import SelectGameAndBudgetpage from "./pages/SelectGameAndBudgetPage/SelectGameAndBudgetPage.jsx"
+export const backendUrl = import.meta.env.VITE_BACKEND_URL;
+
+const root = document.getElementById("root");
+
+createRoot(root).render(
+
+
+
+
+
+
+ {/* Public Routes */}
+
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ }
+ />
+ }
+ />
+ } />
+ } />
+ } />
+
+ {/* Authentication Routes */}
+ } />
+ } />
+ } />
+ } />
+ } />
+
+ {/* User Routes */}
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+
+ {/* Admin Routes */}
+
+ } />
+ } />
+ } />
+ } />
+
+ } />
+ } />
+ } />
+ } />
+ } />
+
+ } />
+ } />
+ } />
+ } />
+ } />
+
+ } />
+ }
+ />
+ } />
+ } />
+
+
+
+
+
+);
diff --git a/client/src/pages/About.jsx b/client/src/pages/About.jsx
new file mode 100644
index 0000000..cc1846a
--- /dev/null
+++ b/client/src/pages/About.jsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import Navbar from '../components/Navbar'
+
+export default function About() {
+ return (
+
+
+
+
+
+
+
this is about
+
+
+
+ )
+}
diff --git a/client/src/pages/About_page/About.jsx b/client/src/pages/About_page/About.jsx
new file mode 100644
index 0000000..836374a
--- /dev/null
+++ b/client/src/pages/About_page/About.jsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import Navbar from '../../MoleculesComponents/User_navbar_and_footer/Navbar'
+
+export default function About() {
+ return (
+
+
+
+
+
+
+
this is About
+
+
+
+ )
+}
diff --git a/client/src/pages/Category_page.jsx b/client/src/pages/Category_page.jsx
new file mode 100644
index 0000000..5031fc2
--- /dev/null
+++ b/client/src/pages/Category_page.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function Category_page() {
+ return (
+
This is Category_page
+ )
+}
diff --git a/client/src/pages/Home.jsx b/client/src/pages/Home.jsx
new file mode 100644
index 0000000..20be721
--- /dev/null
+++ b/client/src/pages/Home.jsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import Navbar from '../components/Navbar'
+
+export default function Home() {
+ return (
+
+
+
+
this is home
+
+
+
+
+ )
+}
diff --git a/client/src/pages/Home/Home.jsx b/client/src/pages/Home/Home.jsx
new file mode 100644
index 0000000..f947c06
--- /dev/null
+++ b/client/src/pages/Home/Home.jsx
@@ -0,0 +1,22 @@
+import React from 'react'
+
+import Navbar from '../../MoleculesComponents/User_navbar_and_footer/Navbar'
+import Footer from '../../MoleculesComponents/User_navbar_and_footer/Footer'
+
+import Home_part1 from './Home_part1/Home_part1'
+import Home_part4 from './Home_part4/Home_part4'
+import Home_part2 from './Home_part2/Home_part2'
+
+export default function Home() {
+ return (
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/client/src/pages/Home/Home_part1.jsx b/client/src/pages/Home/Home_part1.jsx
new file mode 100644
index 0000000..cfbc007
--- /dev/null
+++ b/client/src/pages/Home/Home_part1.jsx
@@ -0,0 +1,51 @@
+import Button from "@mui/material/Button";
+
+export default function Home_part1() {
+ return (
+
+
+
+ {/*image */}
+
+
+
+
+
+ {/*content */}
+
+
+
+ Desk Deals Done Right.
+
+
+
+
+ Save big on gaming gear bundles and deck out your desk.
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+
+
+//i divided home to 5 parts.5components.this is first component
+//for change image pass the prop and add propcall to image src//<--for future work
\ No newline at end of file
diff --git a/client/src/pages/Home/Home_part1/Home_part1.jsx b/client/src/pages/Home/Home_part1/Home_part1.jsx
new file mode 100644
index 0000000..cfbc007
--- /dev/null
+++ b/client/src/pages/Home/Home_part1/Home_part1.jsx
@@ -0,0 +1,51 @@
+import Button from "@mui/material/Button";
+
+export default function Home_part1() {
+ return (
+
+
+
+ {/*image */}
+
+
+
+
+
+ {/*content */}
+
+
+
+ Desk Deals Done Right.
+
+
+
+
+ Save big on gaming gear bundles and deck out your desk.
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+
+
+//i divided home to 5 parts.5components.this is first component
+//for change image pass the prop and add propcall to image src//<--for future work
\ No newline at end of file
diff --git a/client/src/pages/Home/Home_part2/Home_part2.jsx b/client/src/pages/Home/Home_part2/Home_part2.jsx
new file mode 100644
index 0000000..20c392b
--- /dev/null
+++ b/client/src/pages/Home/Home_part2/Home_part2.jsx
@@ -0,0 +1,42 @@
+//http://localhost:5000/api/products
+
+
+import { useEffect, useState } from "react";
+import axios from "axios";
+import PCcardhome from "./Pccardhome";
+
+export default function Home_part2() {
+ const [pcs, setPcs] = useState([]);
+
+ useEffect(() => {
+ const fetchPCs = async () => {
+ try {
+ const response = await axios.get('http://localhost:8000/api/product/filter?'); // Axios fetch
+ setPcs(response.data.slice(0, 8)); // Select only the first 8 items
+ } catch (error) {
+ console.error("Error fetching products:", error);
+ }
+ };
+
+ fetchPCs();
+ }, []);
+
+ return (
+
+ {/* Title */}
+
Prebuilt Gaming PCs
+
+ We use the latest generation performance components and configurations to get you gaming fast.
+
+ );
+};
+
+export default Categoryposter;
+
+
+//how to use
+//default text is graphic card and default image is categorybg.jpg in public folder//default means there are no props called in your component..
+
+
+//if you want to pass props-->
+//
\ No newline at end of file
diff --git a/client/src/pages/Producat_category/components/Filteringsystem.jsx b/client/src/pages/Producat_category/components/Filteringsystem.jsx
new file mode 100644
index 0000000..e76c9cf
--- /dev/null
+++ b/client/src/pages/Producat_category/components/Filteringsystem.jsx
@@ -0,0 +1,95 @@
+import { Checkbox, Slider, TextField, FormControlLabel } from "@mui/material";
+import StarIcon from "@mui/icons-material/Star";
+
+export default function Filteringsystem() {
+ return (
+
+
+
+ 
+ )}
+ 
+ 
+
+
+
+
+ {/*content */}
+ 
+ 
+ 
+ 
+