-
+
+ {/* Enhanced Navbar with Auth Status */}
+ {/*
navigate("/login")}
+ onSignup={() => navigate("/signup")}
+ onProfile={() => navigate("/profile")}
+ onUserDashboard={handleUserDashboard}
+ onAdminDashboard={handleAdminDashboard}
+ /> */}
- {/* Carousel */}
+ {/* Hero Carousel */}
-
+ {/* Featured Categories */}
+
+
+
+
+ Everything You Need
+
+
+ Discover premium products and expert technicians for all your tech needs
+
+
+
+
-
- Featured Products
-
-
{/* Now renders all featured products internally */}
+
+ Featured Products
+
+
+ Best selling items with guaranteed quality
+
+
+
+
+
+
- {/* Technicians Section */}
-
+ {/* Technicians */}
+
-
- Our Top Skilled Technicians
-
-
{/* Now renders all technicians internally */}
+
+ Top Skilled Technicians
+
+
+ Certified experts ready to serve you
+
+
+
);
};
diff --git a/frontend/src/Profile/Profile.jsx b/frontend/src/Profile/Profile.jsx
new file mode 100644
index 0000000..1263133
--- /dev/null
+++ b/frontend/src/Profile/Profile.jsx
@@ -0,0 +1,58 @@
+import { useState } from "react";
+import { getUserFromToken } from "../utils/Jwt";
+import axiosInstance from "../Services/axiosInstance";
+
+export default function Profile() {
+ const user = getUserFromToken();
+
+ const [form, setForm] = useState({
+ username: user?.username || "",
+ email: user?.email || "",
+ });
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+
+ try {
+ await axiosInstance.put("/profile/update/", form);
+ alert("Profile updated successfully");
+ } catch {
+ alert("Update failed");
+ }
+ };
+
+ return (
+
+
+
My Profile
+
+ Update your account information
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/Profile/ProfileSettings.jsx b/frontend/src/Profile/ProfileSettings.jsx
new file mode 100644
index 0000000..697b667
--- /dev/null
+++ b/frontend/src/Profile/ProfileSettings.jsx
@@ -0,0 +1,29 @@
+export default function Settings() {
+ return (
+
+ );
+}
+
+const SettingItem = ({ title, desc }) => (
+
+);
diff --git a/frontend/src/ProtectedRoutes/ProtectedRote.jsx b/frontend/src/ProtectedRoutes/ProtectedRote.jsx
index 3e6883b..b426eaf 100644
--- a/frontend/src/ProtectedRoutes/ProtectedRote.jsx
+++ b/frontend/src/ProtectedRoutes/ProtectedRote.jsx
@@ -1,13 +1,16 @@
-import React from "react";
+// src/ProtectedRoutes/ProtectedRoute.jsx
import { Navigate } from "react-router-dom";
+import { getUserFromToken } from "../utils/Jwt";
-// Protect routes that require authentication
-export default function ProtectedRoute({ children }) {
- const isAuthenticated = localStorage.getItem("isAuthenticated") === "true";
+export default function ProtectedRoute({ children, allowedRoles }) {
+ const user = getUserFromToken();
- if (!isAuthenticated) {
- // Redirect to signup if not logged in
- return
;
+ if (!user) {
+ return
;
+ }
+
+ if (allowedRoles && !allowedRoles.includes(user.role)) {
+ return
;
}
return children;
diff --git a/frontend/src/Services/authService.jsx b/frontend/src/Services/authService.jsx
index 0aeb2d9..0958446 100644
--- a/frontend/src/Services/authService.jsx
+++ b/frontend/src/Services/authService.jsx
@@ -1,13 +1,28 @@
-// authService.jsx
+// src/Services/authService.js
import axiosInstance from "./axiosInstance";
-// Register user based on role
-export const registerUser = (role, payload) => {
- // Role can be 'user', 'admin', 'technician'
- return axiosInstance.post(`/register/${role}/`, payload);
+export const registerUser = (payload) => {
+ return axiosInstance.post("register/user/", payload);
};
-// Login user
-export const loginUser = (payload) => {
- return axiosInstance.post("/login/", payload);
+export const registerAdmin = (payload) => {
+ return axiosInstance.post("register/admin/", payload);
+};
+
+export const loginUser = async (payload) => {
+ const response = await axiosInstance.post("login/", payload);
+
+ // Store tokens (adjust based on your API response)
+ if (response.data.access) {
+ localStorage.setItem("accessToken", response.data.access);
+ localStorage.setItem("refreshToken", response.data.refresh);
+ } else if (response.data.token) {
+ localStorage.setItem("accessToken", response.data.token);
+ }
+
+ return response;
+};
+
+export const logoutUser = () => {
+ localStorage.clear();
};
diff --git a/frontend/src/Services/axiosInstance.jsx b/frontend/src/Services/axiosInstance.jsx
index c619e9a..c9f56d7 100644
--- a/frontend/src/Services/axiosInstance.jsx
+++ b/frontend/src/Services/axiosInstance.jsx
@@ -1,11 +1,20 @@
-// axiosInstance.jsx
+// src/Services/axiosInstance.js
import axios from "axios";
const axiosInstance = axios.create({
- baseURL: import.meta.env.VITE_API_BASE_URL, // e.g., http://127.0.0.1:8000/api
+ baseURL: import.meta.env.VITE_API_BASE_URL, // http://127.0.0.1:8000/api
headers: {
"Content-Type": "application/json",
},
});
+// Add token to every request
+axiosInstance.interceptors.request.use((config) => {
+ const token = localStorage.getItem("accessToken");
+ if (token) {
+ config.headers.Authorization = `Bearer ${token}`;
+ }
+ return config;
+});
+
export default axiosInstance;
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 0326a3d..a4d2375 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -18,3 +18,15 @@
@apply hover:shadow-xl hover:-translate-y-2 transition-all duration-300;
}
}
+
+/* src/index.css - Add at bottom */
+img[src*="ibb.co"] {
+ display: none !important;
+}
+
+img {
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+ background-size: cover;
+ border-radius: 12px;
+}
+
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 97aa19e..26bd9c8 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -1,16 +1,20 @@
+// src/main.jsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
-import App from "./App";
+import App from "./App.jsx";
import "./index.css";
import { CartProvider } from "./context/CartContext";
+import { AuthProvider } from "./utils/auth";
createRoot(document.getElementById("root")).render(
-
-
-
+
+
+
+
+
);
diff --git a/frontend/src/reusableComponents/Input.jsx b/frontend/src/reusableComponents/Input.jsx
index d3e3157..a872159 100644
--- a/frontend/src/reusableComponents/Input.jsx
+++ b/frontend/src/reusableComponents/Input.jsx
@@ -1,18 +1,51 @@
-// Input.jsx
-export default function Input({ label, type = "text", value, onChange, error, placeholder }) {
+// src/reusableComponents/Input.jsx
+import React from "react";
+
+export default function Input({
+ label,
+ type = "text",
+ value,
+ onChange,
+ error,
+ placeholder,
+ disabled = false,
+ className = "",
+ name,
+ ...props
+}) {
return (
-
- {label &&
}
+
+ {label && (
+
+ )}
- {error &&
{error}
}
+ {error && (
+
+ {error}
+
+ )}
);
}
diff --git a/frontend/src/reusableComponents/Navbar.jsx b/frontend/src/reusableComponents/Navbar.jsx
index 049f10e..a5b943f 100644
--- a/frontend/src/reusableComponents/Navbar.jsx
+++ b/frontend/src/reusableComponents/Navbar.jsx
@@ -1,101 +1,194 @@
+// src/reusableComponents/Navbar.jsx - 100% WORKING + RESPONSIVE
+import { useState, useRef, useEffect } from "react";
import { useNavigate, useLocation } from "react-router-dom";
-import { FaShoppingCart, FaUserCircle } from "react-icons/fa";
+import { FaShoppingCart, FaUserCircle, FaSignOutAlt, FaBars, FaTimes } from "react-icons/fa"; // ✅ ALL fa icons ONLY
import { useCart } from "../context/CartContext";
+import { useAuth } from "../utils/auth";
export default function Navbar() {
+ const { user, logout } = useAuth();
const navigate = useNavigate();
const location = useLocation();
const { cart } = useCart();
+ const [openProfile, setOpenProfile] = useState(false);
+ const [openMobile, setOpenMobile] = useState(false);
+ const dropdownRef = useRef(null);
- const cartCount = cart.reduce((total, item) => total + item.qty, 0);
- const isAuthenticated = localStorage.getItem("isAuthenticated") === "true";
+ const cartCount = cart.reduce((total, item) => total + (item.qty || 0), 0);
+ const isAuthenticated = !!user;
+
+ useEffect(() => {
+ const handleClickOutside = (e) => {
+ if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+ setOpenProfile(false);
+ }
+ };
+ document.addEventListener("click", handleClickOutside);
+ return () => document.removeEventListener("click", handleClickOutside);
+ }, []);
const handleLogout = () => {
- localStorage.removeItem("isAuthenticated");
- navigate("/");
+ logout();
+ navigate("/", { replace: true });
+ setOpenMobile(false);
};
- const isActive = (path) =>
- location.pathname === path
- ? "text-blue-600 font-semibold border-b-2 border-blue-600"
- : "hover:text-blue-600";
+ const navigateAndClose = (path) => {
+ navigate(path);
+ setOpenProfile(false);
+ setOpenMobile(false);
+ };
return (
-