navigate('/foods')}
+ onClick={() => navigate('/home')}
>
View More
diff --git a/frontend/src/Components/order/ProductCard.jsx b/frontend/src/Components/order/ProductCard.jsx
new file mode 100644
index 0000000..2b32f5b
--- /dev/null
+++ b/frontend/src/Components/order/ProductCard.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+const ProductCard = ({ product }) => {
+ return (
+
+
+
+
+ New
+
+
+
+
{product.name}
+
{product.description}
+
+ ${product.price.toFixed(2)}
+
+ Add t Cart
+
+
+
+
+ );
+};
+
+export default ProductCard;
\ No newline at end of file
diff --git a/frontend/src/Context/CartContext.jsx b/frontend/src/Context/CartContext.jsx
new file mode 100644
index 0000000..2d823aa
--- /dev/null
+++ b/frontend/src/Context/CartContext.jsx
@@ -0,0 +1,20 @@
+import { createContext, useState, useEffect } from 'react';
+
+export const CartContext = createContext();
+
+export const CartProvider = ({ children }) => {
+ const [cartItems, setCartItems] = useState(() => {
+ const storedCart = localStorage.getItem('cartItems');
+ return storedCart ? JSON.parse(storedCart) : [];
+ });
+
+ useEffect(() => {
+ localStorage.setItem('cartItems', JSON.stringify(cartItems));
+ }, [cartItems]);
+
+ return (
+
+ {children}
+
+ );
+};
diff --git a/frontend/src/Pages/Restaurant/AdminDashboard.jsx b/frontend/src/Pages/Restaurant/AdminDashboard.jsx
new file mode 100644
index 0000000..69d5f3d
--- /dev/null
+++ b/frontend/src/Pages/Restaurant/AdminDashboard.jsx
@@ -0,0 +1,183 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import axios from "../services/axios";
+import styles from './AdminDashboard.module.css';
+
+const AdminDashboard = () => {
+ const navigate = useNavigate();
+ const [restaurants, setRestaurants] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [message, setMessage] = useState('');
+
+ // Check admin authentication
+ useEffect(() => {
+ const adminToken = localStorage.getItem('adminToken');
+ if (!adminToken) {
+ navigate('/login');
+ return;
+ }
+
+ // Load restaurants data
+ fetchRestaurants();
+ }, [navigate]);
+
+ const fetchRestaurants = async () => {
+ try {
+ setLoading(true);
+ const response = await axios.get('/api/admin/restaurants', {
+ headers: {
+ Authorization: `Bearer ${localStorage.getItem('adminToken')}`
+ }
+ });
+
+ setRestaurants(response.data);
+ setError(null);
+ } catch (err) {
+ console.error('Error fetching restaurants:', err);
+ setError('Failed to load restaurants. Please try again.');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const handleVerifyRestaurant = async (restaurantId) => {
+ try {
+ await axios.put(`/api/admin/verify/${restaurantId}`, {}, {
+ headers: {
+ Authorization: `Bearer ${localStorage.getItem('adminToken')}`
+ }
+ });
+
+ setMessage('Restaurant verified successfully');
+
+ // Update the restaurants list to reflect the change
+ setRestaurants(prevRestaurants =>
+ prevRestaurants.map(restaurant =>
+ restaurant._id === restaurantId
+ ? { ...restaurant, isVerified: true }
+ : restaurant
+ )
+ );
+ } catch (err) {
+ console.error('Error verifying restaurant:', err);
+ setMessage('Failed to verify restaurant. Please try again.');
+ }
+ };
+
+ const handleDeleteRestaurant = async (restaurantId) => {
+ if (!window.confirm('Are you sure you want to delete this restaurant? This action cannot be undone.')) {
+ return;
+ }
+
+ try {
+ // Use the admin route for deletion
+ await axios.delete(`/api/admin/restaurants/${restaurantId}`, {
+ headers: {
+ Authorization: `Bearer ${localStorage.getItem('adminToken')}`
+ }
+ });
+
+ setMessage('Restaurant deleted successfully');
+
+ // Remove the deleted restaurant from the list
+ setRestaurants(prevRestaurants =>
+ prevRestaurants.filter(restaurant => restaurant._id !== restaurantId)
+ );
+ } catch (err) {
+ console.error('Error deleting restaurant:', err);
+ setMessage('Failed to delete restaurant. Please try again.');
+ }
+ };
+
+ const handleLogout = () => {
+ localStorage.removeItem('adminToken');
+ localStorage.removeItem('adminUser');
+ navigate('/login');
+ };
+
+ if (loading) {
+ return (
+
+
+
+
Loading restaurants...
+
+
+ );
+ }
+
+ return (
+
+
+ Admin Dashboard
+
+ Logout
+
+
+
+ {message && (
+
+ {message}
+ setMessage('')}>×
+
+ )}
+
+
+
Restaurant Management
+
+ {error &&
{error}
}
+
+ {restaurants.length === 0 ? (
+
No restaurants found.
+ ) : (
+
+
+
+
+ Name
+ Email
+ Phone
+ Status
+ Actions
+
+
+
+ {restaurants.map(restaurant => (
+
+ {restaurant.name}
+ {restaurant.email}
+ {restaurant.telephoneNumber}
+
+
+ {restaurant.isVerified ? 'Verified' : 'Pending'}
+
+
+
+ {!restaurant.isVerified && (
+ handleVerifyRestaurant(restaurant._id)}
+ className={styles.verifyButton}
+ >
+ Verify
+
+ )}
+ handleDeleteRestaurant(restaurant._id)}
+ className={styles.deleteButton}
+ >
+ Delete
+
+
+
+ ))}
+
+
+
+ )}
+
+
+ );
+};
+
+export default AdminDashboard;
\ No newline at end of file
diff --git a/frontend/src/Pages/Restaurant/AdminDashboard.module.css b/frontend/src/Pages/Restaurant/AdminDashboard.module.css
new file mode 100644
index 0000000..1642106
--- /dev/null
+++ b/frontend/src/Pages/Restaurant/AdminDashboard.module.css
@@ -0,0 +1,189 @@
+.container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 2rem;
+}
+
+.header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 2rem;
+ padding-bottom: 1rem;
+ border-bottom: 1px solid var(--border-color);
+}
+
+.header h1 {
+ font-size: 1.8rem;
+ color: var(--text-color);
+ margin: 0;
+}
+
+.logoutButton {
+ background-color: transparent;
+ border: 1px solid var(--border-color);
+ color: var(--text-color);
+ padding: 0.5rem 1rem;
+ border-radius: 6px;
+ cursor: pointer;
+ font-weight: 600;
+ transition: all 0.2s ease;
+}
+
+.logoutButton:hover {
+ background-color: var(--hover-background);
+ color: var(--error-color);
+ border-color: var(--error-color);
+}
+
+.content {
+ background: var(--card-background);
+ border-radius: 12px;
+ padding: 1.5rem;
+ box-shadow: 0 4px 12px var(--shadow-color);
+}
+
+.content h2 {
+ font-size: 1.25rem;
+ margin-top: 0;
+ margin-bottom: 1.5rem;
+ color: var(--text-color);
+}
+
+.message {
+ padding: 1rem;
+ border-radius: 6px;
+ margin-bottom: 1.5rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.success {
+ background-color: rgba(var(--success-color-rgb), 0.1);
+ color: var(--success-color);
+}
+
+.error {
+ background-color: rgba(var(--error-color-rgb), 0.1);
+ color: var(--error-color);
+}
+
+.closeMessage {
+ background: transparent;
+ border: none;
+ font-size: 1.25rem;
+ cursor: pointer;
+ color: inherit;
+}
+
+.noData {
+ text-align: center;
+ color: var(--text-secondary);
+ padding: 2rem;
+}
+
+.restaurantsTable {
+ overflow-x: auto;
+}
+
+.restaurantsTable table {
+ width: 100%;
+ border-collapse: collapse;
+}
+
+.restaurantsTable th {
+ text-align: left;
+ padding: 1rem;
+ background-color: var(--hover-background);
+ color: var(--text-color);
+ font-weight: 600;
+}
+
+.restaurantsTable td {
+ padding: 1rem;
+ border-bottom: 1px solid var(--border-color);
+ color: var(--text-color);
+}
+
+.statusBadge {
+ display: inline-block;
+ padding: 0.35rem 0.75rem;
+ border-radius: 20px;
+ font-size: 0.8rem;
+ font-weight: 600;
+}
+
+.verified {
+ background-color: rgba(var(--success-color-rgb), 0.1);
+ color: var(--success-color);
+}
+
+.pending {
+ background-color: rgba(var(--primary-color-rgb), 0.1);
+ color: var(--primary-color);
+}
+
+.actions {
+ display: flex;
+ gap: 0.5rem;
+}
+
+.verifyButton, .deleteButton {
+ padding: 0.5rem 0.75rem;
+ border-radius: 4px;
+ border: none;
+ font-weight: 500;
+ cursor: pointer;
+}
+
+.verifyButton {
+ background-color: var(--primary-color);
+ color: white;
+}
+
+.verifyButton:hover {
+ background-color: var(--secondary-color);
+}
+
+.deleteButton {
+ background-color: var(--error-color);
+ color: white;
+}
+
+.deleteButton:hover {
+ filter: brightness(90%);
+}
+
+.loadingContainer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: 400px;
+}
+
+.spinner {
+ border: 4px solid rgba(0, 0, 0, 0.1);
+ border-radius: 50%;
+ border-top: 4px solid var(--primary-color);
+ width: 40px;
+ height: 40px;
+ animation: spin 1s linear infinite;
+ margin-bottom: 1rem;
+}
+
+@keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+}
+
+@media (max-width: 768px) {
+ .container {
+ padding: 1rem;
+ }
+
+ .actions {
+ flex-direction: column;
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/Pages/Restaurant/Dashboard.jsx b/frontend/src/Pages/Restaurant/Dashboard.jsx
new file mode 100644
index 0000000..3d228a4
--- /dev/null
+++ b/frontend/src/Pages/Restaurant/Dashboard.jsx
@@ -0,0 +1,372 @@
+import React, { useState, useEffect } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import axios from "../services/axios";
+import styles from './Dashboard.module.css';
+
+const Dashboard = () => {
+ const navigate = useNavigate();
+ const [isLoading, setIsLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [restaurantData, setRestaurantData] = useState(null);
+ const [menuItems, setMenuItems] = useState([]);
+ const [stats, setStats] = useState({
+ menuCount: 0,
+ isVerified: false
+ });
+
+ // Check authentication first
+ useEffect(() => {
+ const token = localStorage.getItem('token');
+ if (!token) {
+ navigate('/login');
+ return;
+ }
+
+ // Load restaurant and menu data
+ loadDashboardData();
+ }, [navigate]);
+
+ const loadDashboardData = async () => {
+ try {
+ setIsLoading(true);
+
+ // Get restaurant data from localStorage
+ const storedRestaurant = JSON.parse(localStorage.getItem('restaurant'));
+
+ if (!storedRestaurant || !storedRestaurant.id) {
+ throw new Error("Restaurant information not found");
+ }
+
+ // Fetch restaurant details
+ const restaurantResponse = await axios.get(`/api/restaurants/${storedRestaurant.id}`, {
+ headers: {
+ Authorization: `Bearer ${localStorage.getItem('token')}`
+ }
+ });
+
+ // Fetch menu items
+ const menuResponse = await axios.get(`/api/restaurants/menu/${storedRestaurant.id}`, {
+ headers: {
+ Authorization: `Bearer ${localStorage.getItem('token')}`
+ }
+ });
+
+ setRestaurantData(restaurantResponse.data);
+ setMenuItems(menuResponse.data.menu || []);
+ setStats({
+ menuCount: menuResponse.data.menu?.length || 0,
+ isVerified: restaurantResponse.data.isVerified
+ });
+
+ // Update localStorage with latest restaurant data
+ localStorage.setItem('restaurant', JSON.stringify({
+ ...storedRestaurant,
+ _id: restaurantResponse.data._id,
+ name: restaurantResponse.data.name,
+ isOpen: restaurantResponse.data.isOpen,
+ isVerified: restaurantResponse.data.isVerified,
+ logo: restaurantResponse.data.logo,
+ coverImage: restaurantResponse.data.coverImage
+ }));
+
+ } catch (err) {
+ console.error("Dashboard initialization error:", err);
+ setError("Failed to load restaurant data");
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ // Handle restaurant status toggle
+ const handleToggleStatus = async () => {
+ try {
+ const newStatus = !restaurantData.isOpen;
+
+ // Call API to update restaurant status
+ await axios.post("/api/restaurants/availability", {
+ restaurantId: restaurantData._id,
+ isOpen: newStatus
+ }, {
+ headers: {
+ Authorization: `Bearer ${localStorage.getItem("token")}`
+ }
+ });
+
+ // Update local state
+ setRestaurantData({
+ ...restaurantData,
+ isOpen: newStatus
+ });
+
+ // Update localStorage
+ const storedRestaurant = JSON.parse(localStorage.getItem('restaurant'));
+ localStorage.setItem('restaurant', JSON.stringify({
+ ...storedRestaurant,
+ isOpen: newStatus
+ }));
+
+ } catch (err) {
+ console.error("Error toggling restaurant status:", err);
+ }
+ };
+
+ // Get user initials for avatar
+ const getUserInitials = () => {
+ if (!restaurantData || !restaurantData.name) return 'R';
+ return restaurantData.name.charAt(0).toUpperCase();
+ };
+
+ if (isLoading) {
+ return (
+
+
+
+
Loading your restaurant dashboard...
+
+
+ );
+ }
+
+ // Show a basic error state
+ if (error) {
+ return (
+
+
+
Something went wrong
+
{error}
+
window.location.reload()}>Retry
+
+
+ );
+ }
+
+ return (
+
+ {/* Cover Photo Banner */}
+
+ {restaurantData?.coverImage ? (
+
{
+ e.target.onerror = null;
+ e.target.src = "https://via.placeholder.com/1200x300?text=No+Cover+Photo";
+ }}
+ />
+ ) : (
+
+ Add a cover photo to enhance your restaurant profile
+
+ )}
+
+
✏️ Edit Cover
+
+
+
+ {/* Header */}
+
+
+
🍽️
+
Restaurant Dashboard
+
+
+ {
+ localStorage.removeItem('token');
+ localStorage.removeItem('restaurant');
+ navigate('/login');
+ }}
+ >
+ Logout
+
+
+
+
+ {/* Profile Section */}
+
+ {restaurantData?.logo ? (
+
{
+ e.target.onerror = null;
+ e.target.style.display = "none";
+ const fallback = document.createElement("div");
+ fallback.className = styles.userAvatar;
+ fallback.textContent = getUserInitials();
+ e.target.parentNode.appendChild(fallback);
+ }}
+ />
+ ) : (
+
+ {getUserInitials()}
+
+ )}
+
+
+
Welcome back, {restaurantData?.name || 'Restaurant'}!
+
+ {restaurantData?.isVerified ?
+ ✓ Verified Account :
+ Pending Verification
+ }
+
+
+
Manage your restaurant, update menu items, and track your business from here.
+
+
+
+ {/* Dashboard Cards */}
+
+ {/* Restaurant Status Card */}
+
+
+
Restaurant Status
+
+
+
+
+ {restaurantData?.isOpen ? 'Currently Open' : 'Currently Closed'}
+
+
+ {restaurantData?.isOpen
+ ? 'Your restaurant is visible to customers and accepting orders.'
+ : 'Your restaurant is hidden from customers and not accepting orders.'}
+
+
+
+ {restaurantData?.isOpen ? 'Set as Closed' : 'Set as Open'}
+
+
+
+
+ {/* Menu Stats Card */}
+
+
+
Menu Items
+
+
+
+
{stats.menuCount}
+
Total Items
+
+
+ Manage Menu →
+
+ {menuItems.length === 0 && (
+
+ You haven't added any menu items yet. Start building your menu!
+
+ )}
+
+
+
+ {/* Location Card */}
+
+
+
Location
+
+
+
+ {restaurantData?.location ? (
+ <>
+
+ {restaurantData?.location?.address || ''}
+
+
+ {restaurantData?.location?.city || ''}{restaurantData?.location?.postalCode ? `, ${restaurantData.location.postalCode}` : ''}
+
+
+ ) : (
+
No location information available
+ )}
+
+
+ Update Location →
+
+
+
+
+ {/* Appearance Card */}
+
+
+
Appearance
+
+
+
+ Restaurant Logo/Cover Image
+
+
+ Update Appearance →
+
+
+
+
+
+ {/* Quick Actions */}
+
+
Quick Actions
+
+
+
📋
+
+
Menu Management
+
Add, edit, or remove menu items
+
+
+
+
⚙️
+
+
Profile Settings
+
Update your restaurant details
+
+
+
+
+
+ {/* Recent Menu Preview (if menu items exist) */}
+ {menuItems.length > 0 && (
+
+
+
Recent Menu Items
+
+
+ {menuItems.slice(0, 3).map((item) => (
+
+ {item.image ? (
+
+
{
+ e.target.onerror = null;
+ e.target.src = "https://via.placeholder.com/80?text=Food";
+ }}
+ />
+
+ ) : (
+
+ No Image
+
+ )}
+
+
{item.name}
+
${parseFloat(item.price).toFixed(2)}
+
+
+ ))}
+
+
+ )}
+
+ );
+};
+
+export default Dashboard;
\ No newline at end of file
diff --git a/frontend/src/Pages/Restaurant/Dashboard.module.css b/frontend/src/Pages/Restaurant/Dashboard.module.css
new file mode 100644
index 0000000..b6c5e6d
--- /dev/null
+++ b/frontend/src/Pages/Restaurant/Dashboard.module.css
@@ -0,0 +1,589 @@
+/* Base animations */
+@keyframes fadeIn {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+@keyframes slideUp {
+ from { transform: translateY(20px); opacity: 0; }
+ to { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes rotate {
+ from { transform: rotate(0deg); }
+ to { transform: rotate(360deg); }
+}
+
+/* Main container */
+.dashboardContainer {
+ background-color: var(--background-color);
+ max-width: 1400px;
+ margin: 0 auto;
+ padding: 2rem;
+ color: var(--text-color);
+ min-height: 100vh;
+}
+
+/* Header styles */
+.header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 2rem;
+ padding-bottom: 1rem;
+ border-bottom: 1px solid var(--border-color);
+}
+
+.headerTitle {
+ display: flex;
+ align-items: center;
+}
+
+.headerTitle h1 {
+ font-size: 1.8rem;
+ font-weight: 700;
+ margin: 0;
+}
+
+.headerTitle span {
+ color: var(--primary-color);
+}
+
+.logo {
+ font-size: 1.8rem;
+ margin-right: 0.75rem;
+}
+
+/* Logout button */
+.logoutButton {
+ background-color: transparent;
+ border: 1px solid var(--border-color);
+ color: var(--text-color);
+ padding: 0.5rem 1rem;
+ border-radius: 6px;
+ cursor: pointer;
+ font-weight: 600;
+ transition: all 0.2s ease;
+}
+
+.logoutButton:hover {
+ background-color: var(--hover-background);
+ color: var(--error-color);
+ border-color: var(--error-color);
+}
+
+/* Profile section */
+.profileSection {
+ display: flex;
+ align-items: center;
+ gap: 1.5rem;
+ background: var(--card-background);
+ padding: 1.5rem;
+ border-radius: 12px;
+ margin-bottom: 2rem;
+ box-shadow: 0 2px 8px var(--shadow-color);
+ animation: fadeIn 0.5s ease;
+}
+
+.userAvatar {
+ width: 80px;
+ height: 80px;
+ border-radius: 50%;
+ background: var(--primary-color);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: white;
+ font-weight: 700;
+ font-size: 2rem;
+ flex-shrink: 0;
+}
+
+.welcomeInfo {
+ flex: 1;
+}
+
+.welcomeHeader {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ flex-wrap: wrap;
+ margin-bottom: 0.5rem;
+}
+
+.welcomeInfo h2 {
+ font-size: 1.5rem;
+ margin: 0;
+ color: var(--text-color);
+}
+
+.welcomeInfo p {
+ color: var(--text-secondary);
+ margin: 0;
+}
+
+.verificationBadge {
+ display: inline-block;
+}
+
+.verified, .pending {
+ padding: 0.25rem 0.75rem;
+ border-radius: 20px;
+ font-size: 0.8rem;
+ font-weight: 600;
+}
+
+.verified {
+ background-color: rgba(var(--success-color-rgb), 0.1);
+ color: var(--success-color);
+}
+
+.pending {
+ background-color: rgba(var(--primary-color-rgb), 0.1);
+ color: var(--primary-color);
+}
+
+/* Dashboard grid */
+.dashboardGrid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+ gap: 1.5rem;
+ margin-bottom: 2.5rem;
+}
+
+/* Cards */
+.dashboardCard {
+ background: var(--card-background);
+ border-radius: 12px;
+ overflow: hidden;
+ box-shadow: 0 2px 8px var(--shadow-color);
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
+ animation: fadeIn 0.5s ease;
+}
+
+.dashboardCard:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 8px 16px var(--shadow-color);
+}
+
+.cardHeader {
+ padding: 1rem 1.5rem;
+ border-bottom: 1px solid var(--border-color);
+}
+
+.cardHeader h3 {
+ margin: 0;
+ font-size: 1.1rem;
+ font-weight: 600;
+}
+
+.cardContent {
+ padding: 1.5rem;
+}
+
+/* Status styles */
+.statusInfo {
+ margin-bottom: 1.5rem;
+}
+
+.statusBadge {
+ display: inline-block;
+ padding: 0.5rem 1rem;
+ border-radius: 6px;
+ font-weight: 600;
+ margin-bottom: 1rem;
+ font-size: 1rem;
+}
+
+.statusOpen {
+ background-color: rgba(var(--success-color-rgb), 0.1);
+ color: var(--success-color);
+}
+
+.statusClosed {
+ background-color: rgba(var(--error-color-rgb), 0.1);
+ color: var(--error-color);
+}
+
+.statusHint {
+ color: var(--text-secondary);
+ margin: 0;
+ font-size: 0.9rem;
+}
+
+.statusToggleButton {
+ width: 100%;
+ padding: 0.8rem;
+ border-radius: 6px;
+ font-weight: 600;
+ cursor: pointer;
+ border: none;
+ transition: all 0.2s ease;
+}
+
+.openButton {
+ background-color: rgba(var(--success-color-rgb), 0.1);
+ color: var(--success-color);
+}
+
+.openButton:hover {
+ background-color: rgba(var(--success-color-rgb), 0.2);
+}
+
+.closeButton {
+ background-color: rgba(var(--error-color-rgb), 0.1);
+ color: var(--error-color);
+}
+
+.closeButton:hover {
+ background-color: rgba(var(--error-color-rgb), 0.2);
+}
+
+/* Menu stats */
+.menuStats {
+ margin-bottom: 1.5rem;
+ text-align: center;
+}
+
+.statCount {
+ font-size: 3rem;
+ font-weight: 700;
+ color: var(--primary-color);
+}
+
+.statLabel {
+ color: var(--text-secondary);
+ margin: 0;
+}
+
+.emptyMenuHint {
+ margin-top: 1rem;
+ padding: 0.75rem;
+ background: rgba(var(--primary-color-rgb), 0.05);
+ border-radius: 6px;
+ color: var(--text-secondary);
+ font-size: 0.9rem;
+ text-align: center;
+}
+
+/* Location */
+.locationInfo {
+ margin-bottom: 1.5rem;
+}
+
+.address, .cityInfo {
+ margin: 0.25rem 0;
+}
+
+.noInfo {
+ color: var(--text-secondary);
+ font-style: italic;
+}
+
+/* Cuisine tags */
+.cuisineTags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+ margin-bottom: 1.5rem;
+}
+
+.cuisineTag {
+ background: var(--tag-background);
+ color: var(--tag-text);
+ padding: 0.35rem 0.75rem;
+ border-radius: 20px;
+ font-size: 0.9rem;
+ font-weight: 500;
+}
+
+.noCuisine {
+ color: var(--text-secondary);
+ font-style: italic;
+}
+
+/* Action links */
+.actionLink {
+ display: inline-block;
+ color: var(--primary-color);
+ text-decoration: none;
+ font-weight: 600;
+ transition: all 0.2s ease;
+}
+
+.actionLink:hover {
+ color: var(--secondary-color);
+ transform: translateX(3px);
+}
+
+/* Quick actions section */
+.quickActionsSection {
+ margin-bottom: 2.5rem;
+}
+
+.sectionTitle {
+ margin-bottom: 1.5rem;
+ font-size: 1.25rem;
+ font-weight: 600;
+ color: var(--text-color);
+}
+
+.quickActionGrid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+ gap: 1.5rem;
+}
+
+.quickActionCard {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ background: var(--card-background);
+ padding: 1.5rem;
+ border-radius: 12px;
+ text-decoration: none;
+ box-shadow: 0 2px 8px var(--shadow-color);
+ transition: all 0.3s ease;
+}
+
+.quickActionCard:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 8px 16px var(--shadow-color);
+}
+
+.quickActionIcon {
+ font-size: 2rem;
+}
+
+.quickActionText {
+ flex: 1;
+}
+
+.quickActionText h4 {
+ margin: 0 0 0.5rem 0;
+ color: var(--text-color);
+}
+
+.quickActionText p {
+ margin: 0;
+ color: var(--text-secondary);
+ font-size: 0.9rem;
+}
+
+/* Recent menu section */
+.recentMenuSection {
+ background: var(--card-background);
+ border-radius: 12px;
+ padding: 1.5rem;
+ box-shadow: 0 2px 8px var(--shadow-color);
+ animation: fadeIn 0.5s ease;
+}
+
+.sectionHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 1.5rem;
+}
+
+.sectionHeader h3 {
+ margin: 0;
+}
+
+.viewAllLink {
+ color: var(--primary-color);
+ text-decoration: none;
+ font-weight: 600;
+ transition: all 0.2s ease;
+}
+
+.viewAllLink:hover {
+ color: var(--secondary-color);
+}
+
+.recentMenuGrid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+ gap: 1.5rem;
+}
+
+.menuItemCard {
+ border-radius: 8px;
+ overflow: hidden;
+ background: var(--hover-background);
+ transition: all 0.3s ease;
+}
+
+.menuItemCard:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 5px 15px var(--shadow-color);
+}
+
+.menuItemImage {
+ height: 120px;
+ overflow: hidden;
+}
+
+.menuItemImage img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.menuItemImagePlaceholder {
+ height: 120px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--input-background);
+ color: var(--text-secondary);
+}
+
+.menuItemInfo {
+ padding: 1rem;
+}
+
+.menuItemInfo h4 {
+ margin: 0 0 0.5rem 0;
+ font-size: 1rem;
+ color: var(--text-color);
+}
+
+.menuItemPrice {
+ margin: 0;
+ color: var(--primary-color);
+ font-weight: 600;
+}
+
+/* Loading and error states */
+.loadingContainer, .errorMessage {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: 400px;
+ text-align: center;
+}
+
+.spinner {
+ width: 50px;
+ height: 50px;
+ border: 4px solid rgba(var(--primary-color-rgb), 0.1);
+ border-left-color: var(--primary-color);
+ border-radius: 50%;
+ animation: rotate 1s linear infinite;
+ margin-bottom: 1.5rem;
+}
+
+.errorMessage h2 {
+ margin-bottom: 1rem;
+ color: var(--error-color);
+}
+
+.errorMessage button {
+ padding: 0.8rem 1.5rem;
+ background-color: var(--primary-color);
+ color: white;
+ border: none;
+ border-radius: 6px;
+ cursor: pointer;
+ font-weight: 600;
+ margin-top: 1.5rem;
+ transition: all 0.2s ease;
+}
+
+.errorMessage button:hover {
+ background-color: var(--secondary-color);
+}
+
+/* Cover Photo Styles */
+.coverPhotoContainer {
+ position: relative;
+ width: 100%;
+ height: 200px;
+ margin-bottom: 2rem;
+ border-radius: 12px;
+ overflow: hidden;
+ box-shadow: 0 4px 12px var(--shadow-color);
+}
+
+.coverPhoto {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transition: transform 0.3s ease;
+}
+
+.coverPhotoPlaceholder {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: linear-gradient(135deg, var(--hover-background) 0%, var(--card-background) 100%);
+ color: var(--text-secondary);
+ font-size: 1.1rem;
+ text-align: center;
+ padding: 1rem;
+}
+
+.editCoverButton {
+ position: absolute;
+ bottom: 15px;
+ right: 15px;
+ background: rgba(0, 0, 0, 0.6);
+ color: white;
+ padding: 0.5rem 1rem;
+ border-radius: 20px;
+ text-decoration: none;
+ font-size: 0.9rem;
+ font-weight: 500;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ opacity: 0.8;
+ transition: all 0.2s ease;
+}
+
+.editIcon {
+ font-size: 1.1rem;
+}
+
+.editCoverButton:hover {
+ opacity: 1;
+ transform: translateY(-2px);
+}
+
+.coverPhotoContainer:hover .coverPhoto {
+ transform: scale(1.05);
+}
+
+@media (max-width: 768px) {
+ .dashboardContainer {
+ padding: 1rem;
+ }
+
+ .profileSection {
+ flex-direction: column;
+ text-align: center;
+ }
+
+ .welcomeHeader {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .dashboardGrid, .quickActionGrid, .recentMenuGrid {
+ grid-template-columns: 1fr;
+ }
+
+ .coverPhotoContainer {
+ height: 150px;
+ margin-bottom: 1.5rem;
+ }
+
+ .editCoverButton {
+ padding: 0.4rem 0.8rem;
+ font-size: 0.8rem;
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/Pages/Restaurant/Login.jsx b/frontend/src/Pages/Restaurant/Login.jsx
new file mode 100644
index 0000000..452eeb8
--- /dev/null
+++ b/frontend/src/Pages/Restaurant/Login.jsx
@@ -0,0 +1,304 @@
+import React, { useState, useEffect, useRef } from "react";
+import { Link, useNavigate, useLocation } from "react-router-dom";
+import axios from "../services/axios";
+import styles from './Login.module.css';
+
+const Login = ({ darkMode }) => {
+ const navigate = useNavigate();
+ const location = useLocation();
+ const emailInputRef = useRef(null);
+
+ const [formData, setFormData] = useState({
+ email: "",
+ password: "",
+ });
+
+ const [errors, setErrors] = useState({});
+ const [touched, setTouched] = useState({});
+ const [message, setMessage] = useState("");
+ const [isLoading, setIsLoading] = useState(false);
+ const [loginAttempts, setLoginAttempts] = useState(0);
+ const [showPassword, setShowPassword] = useState(false);
+ // Add this state to track if admin login is selected
+ const [isAdminLogin, setIsAdminLogin] = useState(false);
+
+ // Focus email input on component mount
+ useEffect(() => {
+ if (emailInputRef.current) {
+ emailInputRef.current.focus();
+ }
+ }, []);
+
+ // Check for message in location state (e.g., from successful registration or account deletion)
+ useEffect(() => {
+ if (location.state?.message) {
+ setMessage(location.state.message);
+ // Clear the location state
+ navigate(location.pathname, { replace: true, state: {} });
+ }
+ }, [location, navigate]);
+
+ const validateField = (name, value) => {
+ let error = "";
+
+ switch(name) {
+ case "email":
+ const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+ if (!value.trim()) {
+ error = "Email address is required";
+ } else if (!emailRegex.test(value)) {
+ error = "Please enter a valid email address";
+ }
+ break;
+
+ case "password":
+ if (!value) {
+ error = "Password is required";
+ }
+ break;
+
+ default:
+ break;
+ }
+
+ return error;
+ };
+
+ const validateForm = () => {
+ const newErrors = {};
+
+ // Validate all fields
+ for (const field in formData) {
+ const error = validateField(field, formData[field]);
+ if (error) newErrors[field] = error;
+ }
+
+ // Additional check for repeated login attempts
+ if (loginAttempts >= 3) {
+ newErrors.general = "Multiple failed login attempts detected. Please verify your credentials or reset your password.";
+ }
+
+ setErrors(newErrors);
+ return Object.keys(newErrors).length === 0;
+ };
+
+ const handleBlur = (e) => {
+ const { name, value } = e.target;
+ setTouched(prev => ({ ...prev, [name]: true }));
+
+ const error = validateField(name, value);
+ setErrors(prev => ({ ...prev, [name]: error }));
+ };
+
+ const handleChange = (e) => {
+ const { name, value } = e.target;
+
+ // Clear errors when typing
+ if (touched[name]) {
+ const error = validateField(name, value);
+ setErrors(prev => ({ ...prev, [name]: error, general: '' }));
+ }
+
+ setFormData({ ...formData, [name]: value });
+ };
+
+ // Add this function to handle the toggle between user and admin login
+ const toggleLoginType = () => {
+ setIsAdminLogin(!isAdminLogin);
+ // Clear any existing errors when switching login types
+ setErrors({});
+ setMessage("");
+ };
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+
+ // Clear any existing messages
+ setMessage("");
+
+ // Mark all fields as touched
+ setTouched({
+ email: true,
+ password: true
+ });
+
+ // Validate form
+ if (!validateForm()) {
+ return;
+ }
+
+ setIsLoading(true);
+
+ try {
+ // Different endpoint for admin login
+ const endpoint = isAdminLogin ? "/api/auth/admin/login" : "/api/auth/login";
+ const response = await axios.post(endpoint, formData);
+
+ // Reset login attempts on successful login
+ setLoginAttempts(0);
+
+ if (isAdminLogin) {
+ // Store admin token and info differently to distinguish from restaurant users
+ localStorage.setItem("adminToken", response.data.token);
+ localStorage.setItem("adminUser", JSON.stringify(response.data.user));
+
+ setMessage("Admin login successful! Redirecting...");
+
+ // Redirect to admin dashboard
+ setTimeout(() => {
+ navigate("/admin/dashboard");
+ }, 1500);
+ } else {
+ // Regular restaurant login (your existing code)
+ localStorage.setItem("token", response.data.token);
+ localStorage.setItem("restaurant", JSON.stringify(response.data.restaurant));
+
+ setMessage("Login successful! Redirecting...");
+
+ // Redirect to restaurant dashboard
+ setTimeout(() => {
+ navigate("/dashboard");
+ }, 1500);
+ }
+ } catch (error) {
+ // Increment login attempts on failure
+ setLoginAttempts(prev => prev + 1);
+
+ // Handle error messages
+ if (error.response?.status === 401) {
+ setMessage("Invalid credentials. Please check your email and password.");
+ } else if (error.response?.status === 429) {
+ setMessage("Too many login attempts. Please try again later.");
+ } else {
+ setMessage(error.response?.data?.message || "Login failed. Please try again.");
+ }
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ return (
+
+ );
+};
+
+export default Login;
\ No newline at end of file
diff --git a/frontend/src/Pages/Restaurant/Login.module.css b/frontend/src/Pages/Restaurant/Login.module.css
new file mode 100644
index 0000000..7d34455
--- /dev/null
+++ b/frontend/src/Pages/Restaurant/Login.module.css
@@ -0,0 +1,259 @@
+@keyframes fadeIn {
+ from { opacity: 0; transform: translateY(20px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+.container {
+ min-height: 100vh;
+ background: var(--background-color);
+ padding: 2rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.form {
+ background: var(--card-background);
+ width: 100%;
+ max-width: 500px;
+ margin: 0 auto;
+ padding: 2.5rem;
+ border-radius: 15px;
+ box-shadow: 0 10px 30px var(--shadow-color);
+ animation: fadeIn 0.6s ease-out;
+}
+
+.title {
+ color: var(--text-color);
+ text-align: center;
+ margin-bottom: 2.5rem;
+ font-size: 2.5rem;
+ font-weight: 700;
+ position: relative;
+}
+
+.title:after {
+ content: '';
+ position: absolute;
+ bottom: -10px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 60px;
+ height: 4px;
+ background: var(--primary-color);
+}
+
+.inputGroup {
+ margin-bottom: 1.8rem;
+}
+
+.label {
+ display: block;
+ margin-bottom: 0.6rem;
+ color: var(--text-color);
+ font-weight: 600;
+ font-size: 0.95rem;
+ transition: color 0.3s ease;
+}
+
+.input {
+ width: 100%;
+ padding: 0.9rem;
+ border: 2px solid var(--border-color);
+ border-radius: 8px;
+ font-size: 1rem;
+ transition: all 0.3s ease;
+ background: var(--input-background);
+ color: var(--text-color);
+}
+
+.input:hover {
+ border-color: var(--text-secondary);
+}
+
+.input:focus {
+ outline: none;
+ border-color: var(--primary-color);
+ box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.3);
+ background: var(--card-background);
+}
+
+.button {
+ width: 100%;
+ padding: 1rem;
+ background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+ color: var(--button-text);
+ border: none;
+ border-radius: 8px;
+ font-size: 1.1rem;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ margin-top: 1rem;
+ position: relative;
+ overflow: hidden;
+}
+
+.button:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 5px 15px var(--shadow-color);
+}
+
+.button:active {
+ transform: translateY(0);
+}
+
+.error {
+ color: var(--error-color);
+ text-align: center;
+ margin-top: 1rem;
+ padding: 0.8rem;
+ border-radius: 8px;
+ background: rgba(231, 76, 60, 0.1);
+ border: 1px solid rgba(231, 76, 60, 0.2);
+ animation: fadeIn 0.3s ease-out;
+}
+
+.success {
+ color: var(--success-color);
+ text-align: center;
+ margin-top: 1rem;
+ padding: 0.8rem;
+ border-radius: 8px;
+ background: rgba(39, 174, 96, 0.1);
+ border: 1px solid rgba(39, 174, 96, 0.2);
+ animation: fadeIn 0.3s ease-out;
+}
+
+.buttonLoading {
+ composes: button;
+ position: relative;
+ color: transparent;
+}
+
+.buttonLoading:after {
+ content: '';
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ border-radius: 50%;
+ border: 2px solid var(--button-text);
+ border-left-color: transparent;
+ border-top-color: var(--primary-color);
+ animation: spin 1s linear infinite;
+}
+
+.registerLink {
+ text-align: center;
+ margin-top: 1.5rem;
+ color: var(--text-secondary);
+ font-size: 0.9rem;
+}
+
+.registerLink a {
+ color: var(--primary-color);
+ text-decoration: none;
+ font-weight: 600;
+}
+
+.registerLink a:hover {
+ text-decoration: underline;
+}
+
+@keyframes spin {
+ 0% { transform: translate(-50%, -50%) rotate(0deg); }
+ 100% { transform: translate(-50%, -50%) rotate(360deg); }
+}
+
+/* Responsive design - retain existing media queries */
+
+/* Add these new styles to your existing CSS file */
+
+/* Required field indicator */
+.requiredStar {
+ color: var(--error-color);
+ margin-left: 0.2rem;
+}
+
+/* Password input container */
+.passwordInputContainer {
+ position: relative;
+ display: flex;
+ align-items: center;
+}
+
+.togglePasswordBtn {
+ position: absolute;
+ right: 10px;
+ background: none;
+ border: none;
+ color: var(--text-secondary);
+ font-size: 0.8rem;
+ cursor: pointer;
+ padding: 5px;
+}
+
+.togglePasswordBtn:hover {
+ color: var(--primary-color);
+}
+
+/* Forgot password link */
+.forgotPassword {
+ text-align: right;
+ margin-bottom: 1.5rem;
+ font-size: 0.9rem;
+}
+
+.forgotPassword a {
+ color: var(--primary-color);
+ text-decoration: none;
+ transition: all 0.2s ease;
+}
+
+.forgotPassword a:hover {
+ text-decoration: underline;
+ color: var(--secondary-color);
+}
+
+/* Animation for error messages */
+@keyframes shake {
+ 0%, 100% { transform: translateX(0); }
+ 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
+ 20%, 40%, 60%, 80% { transform: translateX(5px); }
+}
+
+.errorText {
+ animation: shake 0.6s cubic-bezier(.36,.07,.19,.97) both;
+}
+
+.loginTypeToggle {
+ display: flex;
+ margin-bottom: 1.5rem;
+ width: 100%;
+ border-radius: 6px;
+ overflow: hidden;
+ border: 1px solid var(--border-color);
+}
+
+.loginTypeButton {
+ flex: 1;
+ padding: 0.75rem;
+ border: none;
+ background: var(--input-background);
+ color: var(--text-color);
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.2s ease;
+}
+
+.loginTypeButton.active {
+ background: var(--primary-color);
+ color: white;
+}
+
+.loginTypeButton:hover:not(.active) {
+ background: var(--hover-background);
+}
\ No newline at end of file
diff --git a/frontend/src/Pages/Restaurant/MenuManagement.jsx b/frontend/src/Pages/Restaurant/MenuManagement.jsx
new file mode 100644
index 0000000..c35b8e3
--- /dev/null
+++ b/frontend/src/Pages/Restaurant/MenuManagement.jsx
@@ -0,0 +1,355 @@
+// src/pages/MenuManagement.jsx
+import React, { useState, useEffect } from "react";
+import axios from "../services/axios";
+import styles from "./MenuManagement.module.css";
+
+const MenuManagement = () => {
+ const [menuItems, setMenuItems] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState("");
+ const [editingItem, setEditingItem] = useState(null);
+ const [formData, setFormData] = useState({
+ name: "",
+ description: "",
+ price: "",
+ image: null
+ });
+ const [message, setMessage] = useState("");
+
+ // Get restaurant ID from localStorage
+ const getRestaurantId = () => {
+ const restaurant = JSON.parse(localStorage.getItem("restaurant"));
+ return restaurant?.id;
+ };
+
+ // Fetch menu items
+ const fetchMenuItems = async () => {
+ setLoading(true);
+ try {
+ const restaurantId = getRestaurantId();
+ if (!restaurantId) {
+ throw new Error("Restaurant ID not found");
+ }
+
+ const response = await axios.get(`/api/restaurants/menu/${restaurantId}`, {
+ headers: {
+ Authorization: `Bearer ${localStorage.getItem("token")}`
+ }
+ });
+
+ setMenuItems(response.data.menu || []);
+ setError("");
+ } catch (err) {
+ console.error("Error fetching menu items:", err);
+ setError("Failed to load menu items. Please try again.");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ fetchMenuItems();
+ }, []);
+
+ const handleChange = (e) => {
+ const { name, value } = e.target;
+ setFormData({
+ ...formData,
+ [name]: value
+ });
+ };
+
+ const handleFileChange = (e) => {
+ setFormData({
+ ...formData,
+ image: e.target.files[0]
+ });
+ };
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ setMessage("");
+
+ try {
+ const restaurantId = getRestaurantId();
+ if (!restaurantId) {
+ throw new Error("Restaurant ID not found");
+ }
+
+ // Create FormData object for file upload
+ const form = new FormData();
+ form.append("restaurantId", restaurantId);
+ form.append("name", formData.name);
+ form.append("description", formData.description || "");
+ form.append("price", formData.price);
+
+ // Add image if it exists
+ if (formData.image) {
+ form.append("image", formData.image);
+ console.log("Image attached:", formData.image.name);
+ }
+
+ let response;
+ if (editingItem) {
+ // Update existing item
+ response = await axios.put(
+ `/api/restaurants/menu/${restaurantId}/${editingItem._id}`,
+ form,
+ {
+ headers: {
+ Authorization: `Bearer ${localStorage.getItem("token")}`
+ // Don't set Content-Type manually - axios will set it for FormData
+ }
+ }
+ );
+ console.log("Update response:", response.data);
+ setMessage("Menu item updated successfully");
+ } else {
+ // Add new item
+ response = await axios.post(
+ "/api/restaurants/menu",
+ form,
+ {
+ headers: {
+ Authorization: `Bearer ${localStorage.getItem("token")}`
+ // Don't set Content-Type manually - axios will set it for FormData
+ }
+ }
+ );
+ console.log("Create response:", response.data);
+ setMessage("Menu item added successfully");
+ }
+
+ // Reset form and fetch updated menu items
+ setFormData({ name: "", description: "", price: "", image: null });
+ document.getElementById("image").value = ""; // Reset file input
+ setEditingItem(null);
+ fetchMenuItems();
+ } catch (err) {
+ console.error("Error with menu item:", err);
+ console.error("Error details:", err.response?.data);
+ setMessage(err.response?.data?.message || "Failed to save menu item");
+ }
+ };
+
+ const handleEdit = (item) => {
+ setEditingItem(item);
+ setFormData({
+ name: item.name,
+ description: item.description || "",
+ price: item.price,
+ image: null // Can't pre-populate file input
+ });
+ };
+
+ const handleDelete = async (itemId) => {
+ if (!window.confirm("Are you sure you want to delete this menu item?")) {
+ return;
+ }
+
+ try {
+ const restaurantId = getRestaurantId();
+ await axios.delete(`/api/restaurants/menu/${restaurantId}/${itemId}`, {
+ headers: {
+ Authorization: `Bearer ${localStorage.getItem("token")}`
+ }
+ });
+
+ setMessage("Menu item deleted successfully");
+ fetchMenuItems();
+ } catch (err) {
+ console.error("Error deleting menu item:", err);
+ setMessage("Failed to delete menu item");
+ }
+ };
+
+ const handleDeleteAll = async () => {
+ if (!window.confirm("Are you sure you want to delete ALL menu items? This cannot be undone.")) {
+ return;
+ }
+
+ try {
+ const restaurantId = getRestaurantId();
+ await axios.delete(`/api/restaurants/menu/${restaurantId}/all`, {
+ headers: {
+ Authorization: `Bearer ${localStorage.getItem("token")}`
+ }
+ });
+
+ setMessage("All menu items deleted successfully");
+ fetchMenuItems();
+ } catch (err) {
+ console.error("Error deleting all menu items:", err);
+ setMessage("Failed to delete all menu items");
+ }
+ };
+
+ const handleCancel = () => {
+ setEditingItem(null);
+ setFormData({ name: "", description: "", price: "", image: null });
+ document.getElementById("image").value = ""; // Reset file input
+ };
+
+ // If loading
+ if (loading && menuItems.length === 0) {
+ return (
+
+
+
Loading menu items...
+
+ );
+ }
+
+ return (
+
+
Menu Management
+
+ {message && (
+
+ {message}
+
+ )}
+
+
+
+
{editingItem ? "Edit Menu Item" : "Add New Menu Item"}
+
+
+
+
+
+
Menu Items ({menuItems.length})
+ {menuItems.length > 0 && (
+
+ Delete All
+
+ )}
+
+
+ {error &&
{error}
}
+
+ {menuItems.length === 0 ? (
+
+
No menu items found. Add your first menu item using the form.
+
+ ) : (
+
+ {menuItems.map((item) => (
+
+ {item.image && (
+
+
{
+ console.error("Image failed to load:", item.image);
+ e.target.src = "https://via.placeholder.com/100?text=No+Image";
+ e.target.style.background = 'var(--input-background)';
+ e.target.style.color = 'var(--text-color)';
+ e.target.style.padding = '10px';
+ e.target.style.textAlign = 'center';
+ e.target.style.fontSize = '12px';
+ }}
+ />
+
+ )}
+
+
{item.name}
+
{item.description || "No description"}
+
Rs. {parseFloat(item.price).toFixed(2)}
+
+
+ handleEdit(item)}
+ className={styles.editButton}
+ >
+ Edit
+
+ handleDelete(item._id)}
+ className={styles.deleteButton}
+ >
+ Delete
+
+
+
+ ))}
+
+ )}
+
+
+
+ );
+};
+
+export default MenuManagement;
\ No newline at end of file
diff --git a/frontend/src/Pages/Restaurant/MenuManagement.module.css b/frontend/src/Pages/Restaurant/MenuManagement.module.css
new file mode 100644
index 0000000..c6aa03b
--- /dev/null
+++ b/frontend/src/Pages/Restaurant/MenuManagement.module.css
@@ -0,0 +1,358 @@
+/* src/pages/MenuManagement.module.css */
+@keyframes fadeIn {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+@keyframes slideUp {
+ from { transform: translateY(20px); opacity: 0; }
+ to { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes rotate {
+ from { transform: rotate(0deg); }
+ to { transform: rotate(360deg); }
+}
+
+.container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 2rem;
+ color: var(--text-color);
+ background-color: var(--background-color);
+ transition: all 0.3s ease;
+}
+
+.title {
+ color: var(--text-color);
+ margin-bottom: 2rem;
+ font-size: 2rem;
+ text-align: center;
+ transition: color 0.3s ease;
+}
+
+.content {
+ display: grid;
+ grid-template-columns: 1fr 2fr;
+ gap: 2rem;
+}
+
+@media (max-width: 768px) {
+ .content {
+ grid-template-columns: 1fr;
+ }
+}
+
+.formSection {
+ background: var(--card-background);
+ border-radius: 10px;
+ padding: 1.5rem;
+ box-shadow: 0 4px 12px var(--shadow-color);
+ transition: background-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.formSection h2 {
+ margin-bottom: 1.5rem;
+ color: var(--text-color);
+ font-size: 1.25rem;
+ transition: color 0.3s ease;
+}
+
+.form {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+.formGroup {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.formGroup label {
+ font-weight: 600;
+ color: var(--text-color);
+ transition: color 0.3s ease;
+}
+
+.input {
+ padding: 0.8rem;
+ border: 1px solid var(--border-color);
+ border-radius: 5px;
+ font-size: 1rem;
+ transition: all 0.3s ease;
+ background: var(--input-background);
+ color: var(--text-color);
+}
+
+.textarea {
+ composes: input;
+ min-height: 100px;
+ resize: vertical;
+}
+
+.input:focus, .textarea:focus {
+ border-color: var(--primary-color);
+ box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.2);
+ outline: none;
+}
+
+.fileInput {
+ display: none;
+}
+
+.fileLabel {
+ display: block;
+ padding: 0.8rem;
+ background: var(--input-background);
+ border: 2px dashed var(--border-color);
+ border-radius: 5px;
+ text-align: center;
+ cursor: pointer;
+ color: var(--text-secondary);
+ transition: all 0.3s ease;
+}
+
+.fileLabel:hover {
+ border-color: var(--primary-color);
+ color: var(--primary-color);
+}
+
+.button {
+ background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+ color: var(--button-text);
+ border: none;
+ padding: 0.8rem 1rem;
+ border-radius: 5px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.button:hover {
+ box-shadow: 0 5px 15px var(--shadow-color);
+ transform: translateY(-2px);
+}
+
+.cancelButton {
+ background: var(--hover-background);
+ color: var(--text-color);
+ border: 1px solid var(--border-color);
+ padding: 0.8rem 1rem;
+ border-radius: 5px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.cancelButton:hover {
+ background: var(--input-background);
+}
+
+.buttonGroup {
+ display: flex;
+ gap: 1rem;
+ margin-top: 1rem;
+}
+
+.menuSection {
+ background: var(--card-background);
+ border-radius: 10px;
+ padding: 1.5rem;
+ box-shadow: 0 4px 12px var(--shadow-color);
+ transition: background-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.menuHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 1.5rem;
+}
+
+.menuHeader h2 {
+ color: var(--text-color);
+ font-size: 1.25rem;
+ transition: color 0.3s ease;
+}
+
+.dangerButton {
+ background: var(--error-color);
+ color: white;
+ border: none;
+ padding: 0.5rem 1rem;
+ border-radius: 5px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.dangerButton:hover {
+ filter: brightness(90%);
+ transform: translateY(-2px);
+}
+
+.menuItemsList {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ max-height: 600px;
+ overflow-y: auto;
+ padding-right: 0.5rem;
+}
+
+.menuItemsList::-webkit-scrollbar {
+ width: 8px;
+}
+
+.menuItemsList::-webkit-scrollbar-track {
+ background: var(--input-background);
+ border-radius: 4px;
+}
+
+.menuItemsList::-webkit-scrollbar-thumb {
+ background-color: var(--border-color);
+ border-radius: 4px;
+}
+
+.menuItemCard {
+ display: flex;
+ background: var(--hover-background);
+ border-radius: 8px;
+ overflow: hidden;
+ transition: all 0.3s ease;
+ border: 1px solid var(--border-color);
+}
+
+.menuItemCard:hover {
+ box-shadow: 0 4px 8px var(--shadow-color);
+ transform: translateY(-2px);
+}
+
+.imageContainer {
+ width: 100px;
+ height: 100px;
+ flex-shrink: 0;
+ background: var(--input-background);
+}
+
+.itemImage {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.itemContent {
+ padding: 1rem;
+ flex: 1;
+}
+
+.itemContent h3 {
+ margin: 0 0 0.5rem;
+ color: var(--text-color);
+ transition: color 0.3s ease;
+}
+
+.description {
+ color: var(--text-secondary);
+ font-size: 0.9rem;
+ margin-bottom: 0.5rem;
+ transition: color 0.3s ease;
+}
+
+.price {
+ font-weight: 700;
+ color: var(--primary-color);
+ transition: color 0.3s ease;
+}
+
+.itemActions {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ gap: 0.5rem;
+ padding: 0.5rem;
+ background: var(--input-background);
+ transition: background-color 0.3s ease;
+}
+
+.editButton, .deleteButton {
+ padding: 0.5rem;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-weight: 500;
+ transition: all 0.2s ease;
+}
+
+.editButton {
+ background: var(--primary-color);
+ color: var(--button-text);
+}
+
+.editButton:hover {
+ background: var(--secondary-color);
+ transform: translateY(-2px);
+}
+
+.deleteButton {
+ background: var(--error-color);
+ color: white;
+}
+
+.deleteButton:hover {
+ filter: brightness(90%);
+ transform: translateY(-2px);
+}
+
+.emptyState {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: 200px;
+ color: var(--text-secondary);
+ transition: color 0.3s ease;
+}
+
+.error, .success {
+ padding: 1rem;
+ border-radius: 5px;
+ margin-bottom: 1rem;
+ font-weight: 500;
+ text-align: center;
+ animation: fadeIn 0.3s ease;
+}
+
+.error {
+ background: rgba(231, 76, 60, 0.1);
+ border: 1px solid rgba(231, 76, 60, 0.3);
+ color: var(--error-color);
+}
+
+.success {
+ background: rgba(39, 174, 96, 0.1);
+ border: 1px solid rgba(39, 174, 96, 0.3);
+ color: var(--success-color);
+}
+
+.loadingContainer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: 400px;
+ color: var(--text-color);
+ transition: color 0.3s ease;
+}
+
+.loader {
+ width: 40px;
+ height: 40px;
+ border: 4px solid var(--border-color);
+ border-top: 4px solid var(--primary-color);
+ border-radius: 50%;
+ animation: rotate 1s linear infinite;
+ margin-bottom: 1rem;
+}
\ No newline at end of file
diff --git a/frontend/src/Pages/Restaurant/ProfileSettings.jsx b/frontend/src/Pages/Restaurant/ProfileSettings.jsx
new file mode 100644
index 0000000..90b8e81
--- /dev/null
+++ b/frontend/src/Pages/Restaurant/ProfileSettings.jsx
@@ -0,0 +1,634 @@
+// src/pages/ProfileSettings.jsx
+import React, { useState, useEffect } from "react";
+import { useNavigate, useLocation } from "react-router-dom"; // Import useLocation
+import axios from "../services/axios";
+import styles from "./ProfileSettings.module.css";
+
+const ProfileSettings = () => {
+ const [restaurant, setRestaurant] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState("");
+ const [message, setMessage] = useState("");
+ const [activeTab, setActiveTab] = useState("profile"); // Default tab
+ const [confirmDelete, setConfirmDelete] = useState(false);
+ const [formData, setFormData] = useState({
+ name: "",
+ description: "",
+ telephoneNumber: "",
+ location: {
+ address: "",
+ city: "",
+ postalCode: "",
+ coordinates: {
+ latitude: 0,
+ longitude: 0
+ }
+ },
+ cuisine: "",
+ logo: null,
+ coverImage: null,
+ });
+
+ const navigate = useNavigate();
+ const location = useLocation(); // Get location object
+
+ useEffect(() => {
+ // Check if user is logged in
+ const token = localStorage.getItem("token");
+ if (!token) {
+ navigate("/login");
+ return;
+ }
+
+ // Set initial tab based on navigation state, only on initial mount if desired
+ if (location.state?.initialTab) {
+ setActiveTab(location.state.initialTab);
+ // Optional: Clear the state after using it to prevent re-triggering on refresh/re-render
+ // navigate(location.pathname, { replace: true, state: {} });
+ }
+
+ // Fetch restaurant data
+ const fetchRestaurant = async () => {
+ try {
+ setLoading(true);
+ // Get restaurant ID from localStorage
+ const storedRestaurant = JSON.parse(localStorage.getItem("restaurant"));
+ if (!storedRestaurant || !storedRestaurant.id) {
+ throw new Error("Restaurant information not found");
+ }
+
+ // Use getRestaurantById instead of /me endpoint
+ const response = await axios.get(`/api/restaurants/${storedRestaurant.id}`, {
+ headers: {
+ Authorization: `Bearer ${token}`
+ }
+ });
+
+ setRestaurant(response.data);
+
+ // Populate form with restaurant data
+ setFormData({
+ name: response.data.name || "",
+ description: response.data.description || "",
+ telephoneNumber: response.data.telephoneNumber || "",
+ location: {
+ address: response.data.location?.address || "",
+ city: response.data.location?.city || "",
+ postalCode: response.data.location?.postalCode || "",
+ coordinates: {
+ latitude: response.data.location?.coordinates?.latitude || 0,
+ longitude: response.data.location?.coordinates?.longitude || 0
+ }
+ },
+ cuisine: response.data.cuisine?.join(", ") || "",
+ logo: null,
+ coverImage: null,
+ });
+ } catch (err) {
+ console.error("Error fetching restaurant data:", err);
+ setError("Failed to load restaurant data. Please try logging in again.");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchRestaurant();
+ // Add location.state?.initialTab to dependency array if you want it to react to state changes
+ }, [navigate]); // Keep dependencies minimal if you only want this on mount
+
+ const handleChange = (e) => {
+ const { name, value } = e.target;
+
+ if (name.startsWith("location.")) {
+ const locationField = name.split(".")[1];
+ setFormData({
+ ...formData,
+ location: {
+ ...formData.location,
+ [locationField]: value
+ }
+ });
+ } else {
+ setFormData({ ...formData, [name]: value });
+ }
+ };
+
+ const handleFileChange = (e) => {
+ const { name, files } = e.target;
+ if (files.length > 0) {
+ const file = files[0];
+ const validTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
+
+ if (!validTypes.includes(file.type)) {
+ setMessage(`Error: Only JPEG, JPG, PNG, and GIF images are allowed.`);
+ e.target.value = ''; // Reset the file input
+ return;
+ }
+
+ setFormData({ ...formData, [name]: files[0] });
+ } else {
+ setFormData({ ...formData, [name]: null });
+ }
+ };
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ setMessage("");
+
+ try {
+ const storedRestaurant = JSON.parse(localStorage.getItem("restaurant"));
+ if (!storedRestaurant || !storedRestaurant.id) {
+ throw new Error("Restaurant information not found");
+ }
+
+ const restaurantId = storedRestaurant.id;
+
+ // Create FormData to send all data including files
+ const profileFormData = new FormData();
+
+ // Append text fields
+ profileFormData.append("name", formData.name);
+ profileFormData.append("description", formData.description);
+ profileFormData.append("telephoneNumber", formData.telephoneNumber);
+ // Stringify location object before appending
+ profileFormData.append("location", JSON.stringify(formData.location));
+ profileFormData.append("cuisine", formData.cuisine); // Send as comma-separated string
+
+ // Append files only if they exist in the state
+ if (formData.logo instanceof File) {
+ profileFormData.append("logo", formData.logo);
+ }
+ if (formData.coverImage instanceof File) {
+ profileFormData.append("coverImage", formData.coverImage);
+ }
+
+ // Update restaurant profile using PUT with FormData
+ const response = await axios.put(`/api/restaurants/${restaurantId}`, profileFormData, {
+ headers: {
+ Authorization: `Bearer ${localStorage.getItem("token")}`,
+ // Content-Type is set automatically by browser for FormData
+ }
+ });
+
+ setMessage("Profile updated successfully!");
+
+ // Update local state and storage with potentially new image paths from response
+ setRestaurant(response.data.restaurant); // Update local restaurant state
+ if (storedRestaurant) {
+ storedRestaurant.name = response.data.restaurant.name;
+ storedRestaurant.logo = response.data.restaurant.logo; // Update logo path
+ storedRestaurant.coverImage = response.data.restaurant.coverImage; // Update cover image path
+ localStorage.setItem("restaurant", JSON.stringify(storedRestaurant));
+ }
+
+ // Reset file inputs in state after successful upload
+ setFormData(prev => ({
+ ...prev,
+ logo: null,
+ coverImage: null
+ }));
+ // Optionally clear file input elements visually if needed (though state reset is key)
+ // document.getElementById('logo').value = null;
+ // document.getElementById('coverImage').value = null;
+
+ // No need to manually refresh, response data updates state
+
+ } catch (err) {
+ console.error("Error updating profile:", err);
+ setMessage("Failed to update profile. " + (err.response?.data?.message || "Please try again."));
+ }
+ };
+
+ const handleDeleteAccount = async () => {
+ try {
+ const storedRestaurant = JSON.parse(localStorage.getItem("restaurant"));
+ if (!storedRestaurant || !storedRestaurant.id) {
+ throw new Error("Restaurant information not found");
+ }
+
+ await axios.delete(`/api/restaurants/${storedRestaurant.id}`, {
+ headers: {
+ Authorization: `Bearer ${localStorage.getItem("token")}`
+ }
+ });
+
+ // Clear localStorage and redirect to login
+ localStorage.removeItem("token");
+ localStorage.removeItem("restaurant");
+ navigate("/login", { state: { message: "Your restaurant account has been deleted successfully." } });
+
+ } catch (err) {
+ console.error("Error deleting account:", err);
+ setMessage("Failed to delete account. " + (err.response?.data?.message || "Please try again."));
+ setConfirmDelete(false);
+ }
+ };
+
+ const handleToggleAvailability = async () => {
+ try {
+ const newStatus = !restaurant.isOpen;
+
+ await axios.post("/api/restaurants/availability",
+ {
+ restaurantId: restaurant._id,
+ isOpen: newStatus
+ },
+ {
+ headers: {
+ Authorization: `Bearer ${localStorage.getItem("token")}`
+ }
+ }
+ );
+
+ // Update local state
+ setRestaurant({
+ ...restaurant,
+ isOpen: newStatus
+ });
+
+ setMessage(`Restaurant is now ${newStatus ? "Open" : "Closed"} for orders.`);
+
+ } catch (err) {
+ console.error("Error toggling availability:", err);
+ setMessage("Failed to update restaurant availability. Please try again.");
+ }
+ };
+
+ // Show loading state
+ if (loading) {
+ return (
+
+
+
Loading profile settings...
+
+ );
+ }
+
+ // Show error state
+ if (error) {
+ return (
+
+
Something went wrong
+
{error}
+
navigate("/dashboard")}>
+ Back to Dashboard
+
+
+ );
+ }
+
+ return (
+
+
+
+ {message && (
+
+
+ {message.includes("success") || message.includes("Open") || message.includes("Closed") ? "✓" : "!"}
+
+ {message}
+ setMessage("")}>×
+
+ )}
+
+
+
+
+ {restaurant?.logo ? (
+
+ ) : (
+
+ {restaurant?.name?.charAt(0) || "R"}
+
+ )}
+
{restaurant?.name}
+
+ {restaurant?.isOpen ? "Open" : "Closed"}
+
+
+ setActiveTab('profile')}
+ >
+ 👤 Profile Information
+
+ setActiveTab('appearance')}
+ >
+ 🖼️ Restaurant Appearance
+
+ setActiveTab('location')}
+ >
+ 📍 Location Details
+
+ setActiveTab('account')}
+ >
+ ⚙️ Account Settings
+
+
+
+
+ Restaurant Status:
+
+ {restaurant?.isOpen ? "Set as Closed" : "Set as Open"}
+
+
+
+
+
+ {/* Conditional rendering based on activeTab */}
+ {activeTab === 'profile' && (
+
+ Profile Information
+
+
+ )}
+
+ {/* Appearance Tab */}
+ {activeTab === 'appearance' && (
+
+ Restaurant Appearance
+ {/* Use the main handleSubmit for this section's button too */}
+
+
+ )}
+
+ {activeTab === 'location' && (
+
+ )}
+
+ {activeTab === 'account' && (
+
+ Account Settings
+
+
+
+
Account Status
+
+ {restaurant?.isVerified ? "Verified Account" : "Pending Verification"}
+
+
+
+
+
Restaurant ID
+ {restaurant?._id}
+
+
+
Danger Zone
+
+ Permanently delete your restaurant account and all associated data. This action cannot be undone.
+
+
+ {!confirmDelete ? (
+
setConfirmDelete(true)}
+ className={styles.deleteButton}
+ >
+ Delete Account
+
+ ) : (
+
+
+
⚠️
+
Are you absolutely sure you want to delete your account? All your data will be permanently removed.
+
+
+
+ Yes, Delete My Account
+
+ setConfirmDelete(false)}
+ className={styles.cancelButton}
+ >
+ Cancel
+
+
+
+ )}
+
+ )}
+
+
+
+ );
+};
+
+export default ProfileSettings;
\ No newline at end of file
diff --git a/frontend/src/Pages/Restaurant/ProfileSettings.module.css b/frontend/src/Pages/Restaurant/ProfileSettings.module.css
new file mode 100644
index 0000000..4ad3c6f
--- /dev/null
+++ b/frontend/src/Pages/Restaurant/ProfileSettings.module.css
@@ -0,0 +1,704 @@
+/* src/pages/ProfileSettings.module.css */
+@keyframes fadeIn {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+@keyframes slideUp {
+ from { transform: translateY(20px); opacity: 0; }
+ to { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes rotate {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+}
+
+.container {
+ background-color: var(--background-color);
+ min-height: 100vh;
+ color: var(--text-color);
+}
+
+.header {
+ background: var(--card-background);
+ border-bottom: 1px solid var(--border-color);
+ padding: 1rem 2rem;
+ box-shadow: 0 2px 10px var(--shadow-color);
+ position: sticky;
+ top: 0;
+ z-index: 100;
+}
+
+.headerContent {
+ max-width: 1400px;
+ margin: 0 auto;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.header h1 {
+ color: var(--text-color);
+ font-size: 1.5rem;
+ font-weight: 700;
+}
+
+.backButton {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ color: var(--text-color);
+ background: var(--hover-background);
+ border: 1px solid var(--border-color);
+ border-radius: 6px;
+ padding: 0.5rem 1rem;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ font-size: 0.9rem;
+}
+
+.backIcon {
+ font-size: 1.2rem;
+}
+
+.backButton:hover {
+ background: var(--input-background);
+ transform: translateY(-1px);
+}
+
+.notification {
+ position: fixed;
+ top: 80px;
+ right: 20px;
+ padding: 1rem;
+ border-radius: 8px;
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ animation: slideUp 0.3s ease;
+ z-index: 1000;
+ box-shadow: 0 4px 12px var(--shadow-color);
+ max-width: 400px;
+}
+
+.success {
+ background-color: rgba(46, 204, 113, 0.1);
+ border: 1px solid rgba(46, 204, 113, 0.3);
+ color: var(--success-color);
+}
+
+.error {
+ background-color: rgba(231, 76, 60, 0.1);
+ border: 1px solid rgba(231, 76, 60, 0.3);
+ color: var(--error-color);
+}
+
+.notificationIcon {
+ font-size: 1.2rem;
+ font-weight: bold;
+}
+
+.closeNotification {
+ margin-left: auto;
+ background: none;
+ border: none;
+ font-size: 1.2rem;
+ cursor: pointer;
+ color: inherit;
+ opacity: 0.7;
+}
+
+.closeNotification:hover {
+ opacity: 1;
+}
+
+.content {
+ display: flex;
+ max-width: 1400px;
+ margin: 2rem auto;
+ padding: 0 2rem;
+ gap: 2rem;
+}
+
+.sidebar {
+ width: 280px;
+ background: var(--card-background);
+ border-radius: 12px;
+ padding: 1.5rem;
+ position: sticky;
+ top: 100px;
+ height: fit-content;
+ box-shadow: 0 4px 12px var(--shadow-color);
+}
+
+.profileSummary {
+ text-align: center;
+ padding-bottom: 1.5rem;
+ margin-bottom: 1.5rem;
+ border-bottom: 1px solid var(--border-color);
+}
+
+.profileAvatar {
+ width: 100px;
+ height: 100px;
+ border-radius: 50%;
+ object-fit: cover;
+ margin: 0 auto 1rem;
+ border: 3px solid var(--border-color);
+ box-shadow: 0 4px 8px var(--shadow-color);
+}
+
+.profileAvatarPlaceholder {
+ width: 100px;
+ height: 100px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 2rem;
+ font-weight: bold;
+ color: var(--button-text);
+ border-radius: 50%;
+ margin: 0 auto 1rem;
+ background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+}
+
+.profileName {
+ font-size: 1.2rem;
+ font-weight: 600;
+ margin-bottom: 0.5rem;
+ color: var(--text-color);
+}
+
+.profileStatus {
+ display: inline-block;
+ padding: 0.3rem 0.8rem;
+ border-radius: 20px;
+ font-size: 0.8rem;
+ font-weight: 600;
+}
+
+.statusOpen {
+ background-color: rgba(46, 204, 113, 0.1);
+ color: var(--success-color);
+}
+
+.statusClosed {
+ background-color: rgba(231, 76, 60, 0.1);
+ color: var(--error-color);
+}
+
+.settingsNav {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ margin-bottom: 1.5rem;
+}
+
+.navButton {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ text-align: left;
+ padding: 0.8rem 1rem;
+ border-radius: 8px;
+ background: none;
+ border: none;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ color: var(--text-secondary);
+ font-weight: 500;
+}
+
+.navButton:hover {
+ background: var(--hover-background);
+ color: var(--primary-color);
+}
+
+.navButton.active {
+ background: var(--hover-background);
+ color: var(--primary-color);
+ font-weight: 600;
+}
+
+.navIcon {
+ font-size: 1.2rem;
+}
+
+.statusToggleContainer {
+ padding-top: 1.5rem;
+ border-top: 1px solid var(--border-color);
+}
+
+.statusToggleLabel {
+ display: block;
+ color: var(--text-secondary);
+ font-size: 0.9rem;
+ margin-bottom: 0.75rem;
+}
+
+.statusToggleButton {
+ width: 100%;
+ padding: 0.8rem;
+ border-radius: 8px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ font-weight: 600;
+ border: none;
+}
+
+.openButton {
+ background-color: rgba(231, 76, 60, 0.1);
+ color: var(--error-color);
+}
+
+.openButton:hover {
+ background-color: rgba(231, 76, 60, 0.2);
+}
+
+.closedButton {
+ background-color: rgba(46, 204, 113, 0.1);
+ color: var(--success-color);
+}
+
+.closedButton:hover {
+ background-color: rgba(46, 204, 113, 0.2);
+}
+
+.mainContent {
+ flex: 1;
+}
+
+.settingsSection {
+ background: var(--card-background);
+ border-radius: 12px;
+ padding: 2rem;
+ box-shadow: 0 4px 12px var(--shadow-color);
+ animation: fadeIn 0.5s ease;
+}
+
+.sectionTitle {
+ font-size: 1.5rem;
+ font-weight: 700;
+ margin-bottom: 2rem;
+ color: var(--text-color);
+ padding-bottom: 1rem;
+ border-bottom: 1px solid var(--border-color);
+}
+
+.form {
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+}
+
+.formGroup {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.formRow {
+ display: flex;
+ gap: 1.5rem;
+}
+
+.formRow .formGroup {
+ flex: 1;
+}
+
+.label {
+ font-weight: 600;
+ color: var(--text-color);
+ font-size: 0.95rem;
+}
+
+.input, .textarea, .select {
+ padding: 0.9rem;
+ border: 2px solid var(--border-color);
+ border-radius: 8px;
+ font-size: 1rem;
+ transition: all 0.3s ease;
+ background: var(--input-background);
+ color: var(--text-color);
+}
+
+.input:hover, .textarea:hover, .select:hover {
+ border-color: var(--text-secondary);
+}
+
+.input:focus, .textarea:focus, .select:focus {
+ border-color: var(--primary-color);
+ box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.2);
+ background: var(--card-background);
+}
+
+.textarea {
+ resize: vertical;
+ min-height: 120px;
+}
+
+.inputHint {
+ font-size: 0.85rem;
+ color: var(--text-secondary);
+ margin-top: 0.3rem;
+}
+
+.saveButton {
+ margin-top: 1rem;
+ padding: 1rem;
+ background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+ color: var(--button-text);
+ border: none;
+ border-radius: 8px;
+ font-size: 1rem;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.saveButton:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 5px 15px var(--shadow-color);
+}
+
+.saveButton:active {
+ transform: translateY(0);
+}
+
+.imagesPreview {
+ display: flex;
+ gap: 2rem;
+ margin-bottom: 2rem;
+}
+
+.previewSection {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+.previewTitle {
+ font-size: 1.1rem;
+ font-weight: 600;
+ color: var(--text-color);
+}
+
+.coverImageContainer {
+ width: 100%;
+ height: 200px;
+ border-radius: 8px;
+ overflow: hidden;
+ border: 1px solid var(--border-color);
+}
+
+.coverImage {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.coverPlaceholder {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 1rem;
+ color: var(--text-secondary);
+ background: linear-gradient(135deg, var(--hover-background) 0%, var(--primary-color) 20%);
+ opacity: 0.3;
+}
+
+.logoImageContainer {
+ width: 150px;
+ height: 150px;
+ border-radius: 50%;
+ overflow: hidden;
+ margin: 0 auto;
+ border: 1px solid var(--border-color);
+}
+
+.logoImage {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.logoPlaceholder {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 2rem;
+ font-weight: bold;
+ color: var(--button-text);
+ background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+}
+
+.imageUploadContainer {
+ margin-top: 0.5rem;
+}
+
+.fileInput {
+ display: none;
+}
+
+.fileLabel {
+ display: block;
+ padding: 0.8rem 1rem;
+ text-align: center;
+ border: 2px dashed var(--border-color);
+ border-radius: 8px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ color: var(--text-secondary);
+ font-weight: 500;
+}
+
+.fileLabel:hover {
+ border-color: var(--primary-color);
+ color: var(--primary-color);
+}
+
+.appearanceHint {
+ background: var(--hover-background);
+ border-radius: 8px;
+ padding: 1rem;
+ margin-bottom: 1.5rem;
+ color: var(--text-secondary);
+ font-size: 0.9rem;
+}
+
+.appearanceHint p {
+ margin-bottom: 0.5rem;
+ font-weight: 600;
+}
+
+.appearanceHint ul {
+ margin-left: 1.5rem;
+}
+
+.mapPlaceholder {
+ background: var(--hover-background);
+ border-radius: 8px;
+ height: 200px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ color: var(--text-secondary);
+ margin: 1rem 0;
+ border: 1px dashed var(--border-color);
+}
+
+.accountInfo {
+ margin-bottom: 2rem;
+}
+
+.infoItem {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 0;
+ border-bottom: 1px solid var(--border-color);
+}
+
+.infoTitle {
+ font-size: 1rem;
+ font-weight: 600;
+ color: var(--text-color);
+}
+
+.infoValue {
+ font-size: 0.95rem;
+}
+
+.verified {
+ color: var(--success-color);
+ font-weight: 600;
+}
+
+.pending {
+ color: var(--primary-color);
+ font-weight: 600;
+}
+
+.dangerZone {
+ background: rgba(231, 76, 60, 0.05);
+ border: 1px solid rgba(231, 76, 60, 0.2);
+ border-radius: 8px;
+ padding: 1.5rem;
+ margin-top: 2rem;
+}
+
+.dangerTitle {
+ color: var(--error-color);
+ font-size: 1.1rem;
+ font-weight: 600;
+ margin-bottom: 1rem;
+}
+
+.dangerDescription {
+ color: var(--text-secondary);
+ margin-bottom: 1.5rem;
+ line-height: 1.5;
+}
+
+.deleteButton {
+ padding: 0.8rem 1.5rem;
+ background: var(--error-color);
+ color: var(--button-text);
+ border: none;
+ border-radius: 8px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.deleteButton:hover {
+ box-shadow: 0 4px 12px rgba(231, 76, 60, 0.2);
+ transform: translateY(-1px);
+}
+
+.confirmDelete {
+ animation: fadeIn 0.3s ease;
+}
+
+.confirmMessage {
+ display: flex;
+ align-items: center;
+ gap: 0.8rem;
+ margin-bottom: 1.5rem;
+ padding: 1rem;
+ background: rgba(231, 76, 60, 0.1);
+ border-radius: 8px;
+}
+
+.warningIcon {
+ font-size: 1.5rem;
+}
+
+.confirmButtons {
+ display: flex;
+ gap: 1rem;
+}
+
+.confirmDeleteButton {
+ padding: 0.8rem 1.5rem;
+ background: var(--error-color);
+ color: var(--button-text);
+ border: none;
+ border-radius: 8px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.confirmDeleteButton:hover {
+ box-shadow: 0 4px 12px rgba(231, 76, 60, 0.2);
+}
+
+.cancelButton {
+ padding: 0.8rem 1.5rem;
+ background: var(--hover-background);
+ color: var(--text-color);
+ border: 1px solid var(--border-color);
+ border-radius: 8px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.cancelButton:hover {
+ background: var(--input-background);
+}
+
+.loadingContainer {
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background: var(--background-color);
+ color: var(--text-color);
+}
+
+.loader {
+ width: 50px;
+ height: 50px;
+ border: 5px solid var(--border-color);
+ border-top-color: var(--primary-color);
+ border-radius: 50%;
+ animation: rotate 1s linear infinite;
+ margin-bottom: 1.5rem;
+}
+
+.errorContainer {
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 2rem;
+ background: var(--background-color);
+ color: var(--text-color);
+}
+
+/* Responsive styles */
+@media (max-width: 1200px) {
+ .content {
+ padding: 0 1.5rem;
+ }
+}
+
+@media (max-width: 992px) {
+ .content {
+ flex-direction: column;
+ }
+
+ .sidebar {
+ width: 100%;
+ position: static;
+ margin-bottom: 2rem;
+ }
+
+ .settingsNav {
+ flex-direction: row;
+ flex-wrap: wrap;
+ }
+
+ .navButton {
+ flex: 1;
+ min-width: 150px;
+ }
+}
+
+@media (max-width: 768px) {
+ .imagesPreview {
+ flex-direction: column;
+ }
+
+ .formRow {
+ flex-direction: column;
+ gap: 1rem;
+ }
+
+ .header {
+ padding: 1rem;
+ }
+}
+
+@media (max-width: 480px) {
+ .headerContent {
+ flex-direction: column;
+ gap: 1rem;
+ align-items: flex-start;
+ }
+
+ .confirmButtons {
+ flex-direction: column;
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/Pages/Restaurant/Register.jsx b/frontend/src/Pages/Restaurant/Register.jsx
new file mode 100644
index 0000000..d1d9a78
--- /dev/null
+++ b/frontend/src/Pages/Restaurant/Register.jsx
@@ -0,0 +1,752 @@
+import React, { useState, useEffect, useRef } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import axios from "../services/axios";
+import styles from './Register.module.css';
+
+const Register = ({ darkMode }) => {
+ const navigate = useNavigate();
+ const firstInputRef = useRef(null);
+
+ // Form data state
+ const [formData, setFormData] = useState({
+ name: "",
+ email: "",
+ password: "",
+ confirmPassword: "", // Added confirm password field
+ description: "",
+ telephoneNumber: "",
+ location: {
+ address: "",
+ city: "",
+ postalCode: "",
+ coordinates: {
+ latitude: 0,
+ longitude: 0
+ }
+ },
+ cuisine: "",
+ logo: null,
+ coverImage: null,
+ });
+
+ // Form state management
+ const [errors, setErrors] = useState({});
+ const [touched, setTouched] = useState({});
+ const [message, setMessage] = useState("");
+ const [isLoading, setIsLoading] = useState(false);
+ const [passwordStrength, setPasswordStrength] = useState(0);
+ const [showPassword, setShowPassword] = useState(false);
+
+ // Focus first input on component mount
+ useEffect(() => {
+ if (firstInputRef.current) {
+ firstInputRef.current.focus();
+ }
+ }, []);
+
+ // Password strength evaluation
+ useEffect(() => {
+ if (!formData.password) {
+ setPasswordStrength(0);
+ return;
+ }
+
+ let strength = 0;
+ // Length check
+ if (formData.password.length >= 8) strength += 1;
+ // Contains uppercase
+ if (/[A-Z]/.test(formData.password)) strength += 1;
+ // Contains lowercase
+ if (/[a-z]/.test(formData.password)) strength += 1;
+ // Contains number
+ if (/[0-9]/.test(formData.password)) strength += 1;
+ // Contains special char
+ if (/[!@#$%^&*(),.?":{}|<>]/.test(formData.password)) strength += 1;
+
+ setPasswordStrength(strength);
+ }, [formData.password]);
+
+ const validateField = (name, value) => {
+ let error = "";
+
+ switch(name) {
+ case "name":
+ if (!value.trim()) {
+ error = "Restaurant name is required";
+ } else if (value.length < 2) {
+ error = "Restaurant name must be at least 2 characters";
+ } else if (value.length > 50) {
+ error = "Restaurant name cannot exceed 50 characters";
+ }
+ break;
+
+ case "email":
+ const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+ if (!value.trim()) {
+ error = "Email address is required";
+ } else if (!emailRegex.test(value)) {
+ error = "Please enter a valid email address";
+ }
+ break;
+
+ case "password":
+ if (!value) {
+ error = "Password is required";
+ } else if (value.length < 8) {
+ error = "Password must be at least 8 characters";
+ } else if (!/[A-Z]/.test(value)) {
+ error = "Password must contain at least one uppercase letter";
+ } else if (!/[a-z]/.test(value)) {
+ error = "Password must contain at least one lowercase letter";
+ } else if (!/[0-9]/.test(value)) {
+ error = "Password must contain at least one number";
+ } else if (!/[!@#$%^&*(),.?":{}|<>]/.test(value)) {
+ error = "Password must contain at least one special character";
+ }
+ break;
+
+ case "confirmPassword":
+ if (!value) {
+ error = "Please confirm your password";
+ } else if (value !== formData.password) {
+ error = "Passwords do not match";
+ }
+ break;
+
+ case "description":
+ if (!value.trim()) {
+ error = "Description is required";
+ } else if (value.length < 20) {
+ error = "Description must be at least 20 characters";
+ } else if (value.length > 500) {
+ error = "Description cannot exceed 500 characters";
+ }
+ break;
+
+ case "telephoneNumber":
+ const phoneRegex = /^\+?[0-9]{10,15}$/;
+ if (!value.trim()) {
+ error = "Telephone number is required";
+ } else if (!phoneRegex.test(value.replace(/[\s-]/g, ''))) {
+ error = "Please enter a valid telephone number (10-15 digits)";
+ }
+ break;
+
+ case "location.address":
+ if (!value.trim()) {
+ error = "Address is required";
+ } else if (value.length > 100) {
+ error = "Address cannot exceed 100 characters";
+ }
+ break;
+
+ case "location.city":
+ if (!value.trim()) {
+ error = "City is required";
+ } else if (value.length > 50) {
+ error = "City name cannot exceed 50 characters";
+ }
+ break;
+
+ case "location.postalCode":
+ const postalRegex = /^[0-9a-zA-Z\s-]{3,10}$/;
+ if (!value.trim()) {
+ error = "Postal code is required";
+ } else if (!postalRegex.test(value)) {
+ error = "Please enter a valid postal code (3-10 alphanumeric characters)";
+ }
+ break;
+
+ case "cuisine":
+ if (value) {
+ if (value.length > 100) {
+ error = "Cuisine list cannot exceed 100 characters";
+ } else if (!/^[a-zA-Z\s,]+$/.test(value)) {
+ error = "Cuisine should only contain letters, spaces, and commas";
+ }
+ }
+ break;
+
+ case "logo":
+ if (!value) {
+ error = "Restaurant logo is required";
+ }
+ break;
+
+ default:
+ break;
+ }
+
+ return error;
+ };
+
+ const validateForm = () => {
+ const newErrors = {};
+
+ // Validate all fields
+ for (const field in formData) {
+ if (field === 'location') {
+ for (const locationField in formData.location) {
+ if (locationField !== 'coordinates') {
+ const error = validateField(`location.${locationField}`, formData.location[locationField]);
+ if (error) newErrors[`location.${locationField}`] = error;
+ }
+ }
+ } else if (field !== 'coverImage') { // Cover image is optional
+ const value = formData[field];
+ const error = validateField(field, value);
+ if (error) newErrors[field] = error;
+ }
+ }
+
+ setErrors(newErrors);
+ return Object.keys(newErrors).length === 0;
+ };
+
+ const handleBlur = (e) => {
+ const { name, value } = e.target;
+ setTouched(prev => ({ ...prev, [name]: true }));
+
+ const error = validateField(name, value);
+ setErrors(prev => ({ ...prev, [name]: error }));
+ };
+
+ const handleChange = (e) => {
+ const { name, value } = e.target;
+
+ if (touched[name]) {
+ const error = validateField(name, value);
+ setErrors(prev => ({ ...prev, [name]: error }));
+ }
+
+ if (name.startsWith("location.")) {
+ const locationField = name.split(".")[1];
+ setFormData({
+ ...formData,
+ location: {
+ ...formData.location,
+ [locationField]: value
+ }
+ });
+ } else {
+ setFormData({ ...formData, [name]: value });
+ }
+ };
+
+ const handleFileChange = (e) => {
+ const { name, files } = e.target;
+ setTouched(prev => ({ ...prev, [name]: true }));
+
+ if (files.length > 0) {
+ const file = files[0];
+ const fileSize = file.size / 1024 / 1024; // in MB
+ const validTypes = ['image/jpeg', 'image/png', 'image/jpg', 'image/gif'];
+
+ let error = "";
+
+ if (!validTypes.includes(file.type)) {
+ error = "Only image files (JPEG, PNG, GIF) are allowed";
+ } else if (fileSize > 5) {
+ error = "File size cannot exceed 5MB";
+ } else if (file.name.length > 100) {
+ error = "File name is too long (max 100 characters)";
+ }
+
+ setErrors(prev => ({ ...prev, [name]: error }));
+
+ if (!error) {
+ setFormData({ ...formData, [name]: file });
+ }
+ } else {
+ // If user cancels file selection and field is required
+ if (name === 'logo' && !formData.logo) {
+ setErrors(prev => ({ ...prev, [name]: "Restaurant logo is required" }));
+ }
+ }
+ };
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ setMessage("");
+
+ // Mark all fields as touched
+ const allTouched = Object.keys(formData).reduce((acc, field) => {
+ if (field === 'location') {
+ return {
+ ...acc,
+ 'location.address': true,
+ 'location.city': true,
+ 'location.postalCode': true
+ };
+ }
+ return { ...acc, [field]: true };
+ }, {});
+
+ setTouched(allTouched);
+
+ // Validate form before submission
+ if (!validateForm()) {
+ // Find the first error field and scroll to it
+ const firstErrorField = Object.keys(errors)[0];
+ const errorElement = document.querySelector(`[name="${firstErrorField}"]`);
+
+ if (errorElement) {
+ errorElement.scrollIntoView({
+ behavior: 'smooth',
+ block: 'center'
+ });
+ errorElement.focus();
+ }
+ return;
+ }
+
+ // Remove confirmPassword from data to be sent
+ const { confirmPassword, ...dataToSubmit } = formData;
+
+ setIsLoading(true);
+ const form = new FormData();
+
+ Object.keys(dataToSubmit).forEach((key) => {
+ if (key === 'location') {
+ form.append(key, JSON.stringify(dataToSubmit[key]));
+ } else {
+ form.append(key, dataToSubmit[key]);
+ }
+ });
+
+ try {
+ const response = await axios.post("/api/auth/register", form);
+ setMessage(response.data.message || "Registration successful!");
+
+ // Clear form after successful submission
+ if (response.data.token) {
+ setFormData({
+ name: "",
+ email: "",
+ password: "",
+ confirmPassword: "",
+ description: "",
+ telephoneNumber: "",
+ location: {
+ address: "",
+ city: "",
+ postalCode: "",
+ coordinates: { latitude: 0, longitude: 0 }
+ },
+ cuisine: "",
+ logo: null,
+ coverImage: null,
+ });
+ setTouched({});
+
+ // Store token and restaurant info
+ localStorage.setItem("token", response.data.token);
+ localStorage.setItem("restaurant", JSON.stringify(response.data.restaurant));
+
+ // Redirect to dashboard after successful registration
+ setTimeout(() => {
+ navigate("/dashboard");
+ }, 2000);
+ }
+ } catch (error) {
+ console.error("Registration error:", error);
+
+ // Handle specific error responses from the backend
+ if (error.response?.data?.message) {
+ setMessage(error.response.data.message);
+ } else if (error.response?.status === 400) {
+ setMessage("Registration failed: Invalid information provided");
+ } else if (error.response?.status === 409) {
+ setMessage("An account with this email already exists.");
+ setErrors(prev => ({ ...prev, email: "This email is already registered" }));
+ } else {
+ setMessage("Registration failed. Please try again later.");
+ }
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ const getPasswordStrengthLabel = () => {
+ if (passwordStrength === 0) return "";
+ if (passwordStrength <= 2) return "Weak";
+ if (passwordStrength <= 4) return "Medium";
+ return "Strong";
+ };
+
+ const getPasswordStrengthClass = () => {
+ if (passwordStrength === 0) return "";
+ if (passwordStrength <= 2) return styles.weakPassword;
+ if (passwordStrength <= 4) return styles.mediumPassword;
+ return styles.strongPassword;
+ };
+
+ return (
+
+ );
+};
+
+export default Register;
\ No newline at end of file
diff --git a/frontend/src/Pages/Restaurant/Register.module.css b/frontend/src/Pages/Restaurant/Register.module.css
new file mode 100644
index 0000000..fa1c7ef
--- /dev/null
+++ b/frontend/src/Pages/Restaurant/Register.module.css
@@ -0,0 +1,406 @@
+@keyframes fadeIn {
+ from { opacity: 0; transform: translateY(20px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes slideIn {
+ from { transform: translateX(-100%); }
+ to { transform: translateX(0); }
+}
+
+@keyframes pulse {
+ 0% { transform: scale(1); }
+ 50% { transform: scale(1.02); }
+ 100% { transform: scale(1); }
+}
+
+/* Container variations for light and dark mode */
+.container {
+ min-height: 100vh;
+ padding: 2rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ transition: all 0.3s ease;
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+}
+
+.dark {
+ background: #121212; /* True dark background */
+}
+
+.form {
+ background: white;
+ width: 100%;
+ max-width: 600px;
+ margin: 0 auto;
+ padding: 2.5rem;
+ border-radius: 15px;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+ animation: fadeIn 0.6s ease-out;
+ position: relative;
+ overflow: hidden;
+ transition: all 0.3s ease;
+}
+
+.dark .form {
+ background: #1e1e1e; /* Darker form background */
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+}
+
+.title {
+ color: #2c3e50;
+ text-align: center;
+ margin-bottom: 2.5rem;
+ font-size: 2.5rem;
+ font-weight: 700;
+ animation: slideIn 0.8s ease-out;
+ position: relative;
+ transition: color 0.3s ease;
+}
+
+.dark .title {
+ color: #ffffff; /* Pure white text for title in dark mode */
+}
+
+.title:after {
+ content: '';
+ position: absolute;
+ bottom: -10px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 60px;
+ height: 4px;
+ background: #e67e22;
+}
+
+.inputGroup {
+ margin-bottom: 1.8rem;
+ animation: fadeIn 0.6s ease-out;
+ animation-fill-mode: both;
+}
+
+.inputGroup:nth-child(2) { animation-delay: 0.1s; }
+.inputGroup:nth-child(3) { animation-delay: 0.2s; }
+.inputGroup:nth-child(4) { animation-delay: 0.3s; }
+
+.label {
+ display: block;
+ margin-bottom: 0.6rem;
+ color: #2c3e50;
+ font-weight: 600;
+ font-size: 0.95rem;
+ transition: color 0.3s ease;
+}
+
+.dark .label {
+ color: #e0e0e0; /* Light grey for labels in dark mode */
+}
+
+.input {
+ width: 100%;
+ padding: 0.9rem;
+ border: 2px solid #e0e0e0;
+ border-radius: 8px;
+ font-size: 1rem;
+ transition: all 0.3s ease;
+ background: #f8fafc;
+}
+
+.dark .input {
+ background: #2a2a2a; /* Dark input background */
+ border-color: #444444; /* Darker border */
+ color: #ffffff; /* White text */
+}
+
+.input:hover {
+ border-color: #bdc3c7;
+}
+
+.dark .input:hover {
+ border-color: #666666; /* Slightly lighter border on hover */
+}
+
+.input:focus {
+ border-color: #e67e22;
+ box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.2);
+ background: white;
+}
+
+.dark .input:focus {
+ border-color: #e67e22;
+ box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.3);
+ background: #333333; /* Slightly lighter than base for focus */
+}
+
+.textarea {
+ composes: input;
+ min-height: 120px;
+ resize: vertical;
+}
+
+.fileInput {
+ display: none;
+}
+
+.fileLabel {
+ display: block;
+ padding: 1rem;
+ background: #f8fafc;
+ border: 2px dashed #bdc3c7;
+ border-radius: 8px;
+ text-align: center;
+ cursor: pointer;
+ color: #7f8c8d;
+ transition: all 0.3s ease;
+ font-weight: 500;
+}
+
+.dark .fileLabel {
+ background: #2a2a2a; /* Dark file input background */
+ border-color: #444444; /* Darker border */
+ color: #b0b0b0; /* Light grey text */
+}
+
+.fileLabel:hover {
+ border-color: #e67e22;
+ color: #e67e22;
+ background: rgba(230, 126, 34, 0.05);
+ transform: translateY(-1px);
+}
+
+.dark .fileLabel:hover {
+ border-color: #e67e22;
+ color: #e67e22;
+ background: rgba(230, 126, 34, 0.1);
+}
+
+.button {
+ width: 100%;
+ padding: 1rem;
+ background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
+ color: white;
+ border: none;
+ border-radius: 8px;
+ font-size: 1.1rem;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ margin-top: 1rem;
+ position: relative;
+ overflow: hidden;
+}
+
+.button:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 5px 15px rgba(230, 126, 34, 0.3);
+ animation: pulse 1s infinite;
+}
+
+.button:active {
+ transform: translateY(0);
+}
+
+.error {
+ color: #ff6b6b; /* Brighter red for dark mode visibility */
+ text-align: center;
+ margin-top: 1rem;
+ padding: 0.8rem;
+ border-radius: 8px;
+ background: rgba(231, 76, 60, 0.1);
+ border: 1px solid rgba(231, 76, 60, 0.2);
+ animation: fadeIn 0.3s ease-out;
+}
+
+.dark .error {
+ background: rgba(231, 76, 60, 0.15);
+ border: 1px solid rgba(231, 76, 60, 0.3);
+ color: #ff6b6b;
+}
+
+.success {
+ color: #27ae60;
+ text-align: center;
+ margin-top: 1rem;
+ padding: 0.8rem;
+ border-radius: 8px;
+ background: rgba(39, 174, 96, 0.1);
+ border: 1px solid rgba(39, 174, 96, 0.2);
+ animation: fadeIn 0.3s ease-out;
+}
+
+.dark .success {
+ background: rgba(39, 174, 96, 0.15);
+ border: 1px solid rgba(39, 174, 96, 0.3);
+ color: #2ecc71; /* Brighter green for dark mode visibility */
+}
+
+/* Add these new styles to your existing CSS file */
+
+/* Form row for multi-column layout */
+.formRow {
+ display: flex;
+ gap: 1.5rem;
+ margin-bottom: 1.8rem;
+}
+
+.formRow .inputGroup {
+ flex: 1;
+ margin-bottom: 0;
+}
+
+/* Required field indicator */
+.requiredStar {
+ color: #e74c3c;
+ margin-left: 0.2rem;
+}
+
+.dark .requiredStar {
+ color: #ff6b6b;
+}
+
+/* Character counter for textarea */
+.charCounter {
+ font-size: 0.75rem;
+ color: #7f8c8d;
+ text-align: right;
+ margin-top: 0.3rem;
+}
+
+.dark .charCounter {
+ color: #a0a0a0;
+}
+
+/* File hint text */
+.fileHint {
+ font-size: 0.75rem;
+ color: #7f8c8d;
+ margin-top: 0.3rem;
+}
+
+.dark .fileHint {
+ color: #a0a0a0;
+}
+
+/* Password strength meter */
+.passwordInputContainer {
+ position: relative;
+ display: flex;
+ align-items: center;
+}
+
+.togglePasswordBtn {
+ position: absolute;
+ right: 10px;
+ background: none;
+ border: none;
+ color: #7f8c8d;
+ font-size: 0.8rem;
+ cursor: pointer;
+ padding: 5px;
+}
+
+.dark .togglePasswordBtn {
+ color: #a0a0a0;
+}
+
+.togglePasswordBtn:hover {
+ color: #e67e22;
+}
+
+.passwordStrength {
+ margin-top: 0.5rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.strengthMeter {
+ flex: 1;
+ height: 4px;
+ background-color: #e0e0e0;
+ border-radius: 2px;
+ overflow: hidden;
+}
+
+.dark .strengthMeter {
+ background-color: #444444;
+}
+
+.strengthIndicator {
+ height: 100%;
+ transition: width 0.3s ease;
+}
+
+.weakPassword {
+ background-color: #e74c3c;
+}
+
+.mediumPassword {
+ background-color: #f39c12;
+}
+
+.strongPassword {
+ background-color: #2ecc71;
+}
+
+.strengthLabel {
+ font-size: 0.75rem;
+ min-width: 50px;
+}
+
+.weakPassword ~ .strengthLabel {
+ color: #e74c3c;
+}
+
+.mediumPassword ~ .strengthLabel {
+ color: #f39c12;
+}
+
+.strongPassword ~ .strengthLabel {
+ color: #2ecc71;
+}
+
+.dark .weakPassword ~ .strengthLabel {
+ color: #ff6b6b;
+}
+
+.dark .mediumPassword ~ .strengthLabel {
+ color: #f5b041;
+}
+
+.dark .strongPassword ~ .strengthLabel {
+ color: #2ecc71;
+}
+
+/* Focus states for accessibility */
+.input:focus, .textarea:focus {
+ outline: none;
+ border-color: #e67e22;
+ box-shadow: 0 0 0 2px rgba(230, 126, 34, 0.3);
+}
+
+.dark .input:focus, .dark .textarea:focus {
+ border-color: #f39c12;
+ box-shadow: 0 0 0 2px rgba(243, 156, 18, 0.3);
+}
+
+/* Animation for error messages */
+@keyframes shake {
+ 0%, 100% { transform: translateX(0); }
+ 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
+ 20%, 40%, 60%, 80% { transform: translateX(5px); }
+}
+
+.errorText {
+ animation: shake 0.6s cubic-bezier(.36,.07,.19,.97) both;
+}
+
+/* Responsive layout for form row on mobile */
+@media (max-width: 576px) {
+ .formRow {
+ flex-direction: column;
+ gap: 1.8rem;
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/Pages/order/CartPage.jsx b/frontend/src/Pages/order/CartPage.jsx
new file mode 100644
index 0000000..64364ed
--- /dev/null
+++ b/frontend/src/Pages/order/CartPage.jsx
@@ -0,0 +1,185 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+function CartPage() {
+ const [cartItems, setCartItems] = useState([]);
+ const [selectedItems, setSelectedItems] = useState([]);
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ const cart = JSON.parse(localStorage.getItem('cart')) || [];
+ setCartItems(cart);
+ }, []);
+
+ const handleCheckboxChange = (item) => {
+ const isSelected = selectedItems.some((i) => i._id === item._id);
+ if (isSelected) {
+ setSelectedItems(selectedItems.filter((i) => i._id !== item._id));
+ } else {
+ setSelectedItems([...selectedItems, item]);
+ }
+ };
+
+ // Add function to update quantity
+ const updateQuantity = (itemId, newQuantity) => {
+ // Don't allow quantities less than 1
+ if (newQuantity < 1) return;
+
+ // Update cart items state
+ const updatedCart = cartItems.map(item => {
+ if (item._id === itemId) {
+ return { ...item, quantity: newQuantity };
+ }
+ return item;
+ });
+
+ setCartItems(updatedCart);
+
+ // Update selected items if this item is selected
+ if (selectedItems.some(item => item._id === itemId)) {
+ setSelectedItems(prevSelected =>
+ prevSelected.map(item => {
+ if (item._id === itemId) {
+ return { ...item, quantity: newQuantity };
+ }
+ return item;
+ })
+ );
+ }
+
+ // Update localStorage
+ localStorage.setItem('cart', JSON.stringify(updatedCart));
+ };
+
+ // Add function to remove item from cart
+ const removeFromCart = (itemId) => {
+ const updatedCart = cartItems.filter(item => item._id !== itemId);
+ setCartItems(updatedCart);
+ setSelectedItems(selectedItems.filter(item => item._id !== itemId));
+ localStorage.setItem('cart', JSON.stringify(updatedCart));
+ };
+
+ const totalAmount = selectedItems.reduce((acc, item) => acc + item.price * item.quantity, 0);
+
+ const handleProceedToCheckout = () => {
+ if (selectedItems.length === 0) {
+ alert('Please select at least one item to checkout.');
+ return;
+ }
+ localStorage.setItem('checkoutItems', JSON.stringify(selectedItems));
+ navigate('/checkout');
+ };
+
+ return (
+
+
+
Your Cart
+
+ {cartItems.length === 0 ? (
+
+
Your cart is empty.
+
navigate('/')}
+ className="mt-4 px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+ >
+ Continue Shopping
+
+
+ ) : (
+ <>
+
+ {cartItems.map((item, index) => {
+ const isSelected = selectedItems.some((i) => i._id === item._id);
+ return (
+
+
handleCheckboxChange(item)}
+ className="w-5 h-5 mr-4 accent-blue-500"
+ />
+
+
{item.name}
+
Price: Rs {item.price}
+
+ {/* Quantity controls */}
+
+ Quantity:
+ updateQuantity(item._id, item.quantity - 1)}
+ className="w-8 h-8 flex items-center justify-center bg-gray-200 rounded-l-md hover:bg-gray-300"
+ >
+ -
+
+ updateQuantity(item._id, item.quantity + 1)}
+ className="w-8 h-8 flex items-center justify-center bg-gray-200 rounded-r-md hover:bg-gray-300"
+ >
+ +
+
+
+
+
Subtotal: Rs {item.price * item.quantity}
+
+
+ {/* Remove button */}
+
removeFromCart(item._id)}
+ className="ml-4 p-2 text-red-500 hover:text-red-700 hover:bg-red-50 rounded-full"
+ title="Remove item"
+ >
+
+
+
+
+ );
+ })}
+
+
+
+
+ Total for selected: Rs {totalAmount}
+
+
+
+ navigate('/')}
+ className="w-full md:w-auto px-6 py-3 text-blue-600 border border-blue-600 rounded-lg hover:bg-blue-50 transition-colors"
+ >
+ Continue Shopping
+
+
+
+ Proceed to Checkout
+
+
+
+
+ )}
+
+
+ );
+}
+
+export default CartPage;
diff --git a/frontend/src/Pages/order/Checkoutpage.jsx b/frontend/src/Pages/order/Checkoutpage.jsx
new file mode 100644
index 0000000..938e690
--- /dev/null
+++ b/frontend/src/Pages/order/Checkoutpage.jsx
@@ -0,0 +1,218 @@
+import { useEffect, useState } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import axios from 'axios'
+
+function CheckoutPage() {
+ const [checkoutItems, setCheckoutItems] = useState([])
+ const [paymentMethod, setPaymentMethod] = useState('cash')
+ const [address, setAddress] = useState('')
+ const [phone, setPhone] = useState('')
+ const [loading, setLoading] = useState(false)
+ const navigate = useNavigate()
+
+ useEffect(() => {
+ const items = JSON.parse(localStorage.getItem('checkoutItems')) || []
+ setCheckoutItems(items)
+ }, [])
+
+ const totalAmount = checkoutItems.reduce(
+ (acc, item) => acc + item.price * item.quantity,
+ 0
+ )
+
+ const handlePlaceOrder = async () => {
+ if (!address.trim() || !phone.trim()) {
+ alert('Please fill address and phone number.')
+ return
+ }
+
+ if (checkoutItems.length === 0) {
+ alert('No items selected for checkout.')
+ return
+ }
+
+ setLoading(true)
+
+ try {
+ // Format items the same way as in PaymentPage
+ const orderItems = checkoutItems.map((item) => ({
+ productId: item._id,
+ quantity: item.quantity,
+ }))
+
+ if (paymentMethod === 'cash') {
+ // Cash on delivery order creation
+ const response = await axios.post('/api/orders', {
+ userId: 'user-123',
+ items: orderItems.map((item) => ({
+ ...item,
+ // Retrieve restaurantId from localStorage or use default
+ restaurantId:
+ localStorage.getItem(
+ `restaurant_${item.productId}`
+ ) || 'default-restaurant',
+ })),
+ paymentMethod,
+ currency: 'usd',
+ deliveryAddress: address,
+ phoneNumber: phone,
+ // Note: When using cash payment, backend calculates totalAmount
+ })
+
+ console.log('Order created:', response.data)
+ alert('Order placed successfully!')
+ localStorage.removeItem('cart')
+ localStorage.removeItem('checkoutItems')
+ navigate('/')
+ } else if (paymentMethod === 'card') {
+ // Create payment intent first
+ const paymentResponse = await axios.post(
+ '/api/payments/create-payment-intent',
+ {
+ amount: Math.round(totalAmount * 100), // Convert to cents and ensure it's an integer
+ currency: 'usd',
+ }
+ )
+
+ // Store necessary data for payment page
+ localStorage.setItem('paymentItems', JSON.stringify(orderItems))
+ localStorage.setItem('paymentAddress', address)
+ localStorage.setItem('paymentPhone', phone)
+ localStorage.setItem('paymentMethod', paymentMethod)
+ localStorage.setItem(
+ 'paymentClientSecret',
+ paymentResponse.data.clientSecret
+ )
+
+ navigate('/payment')
+ }
+ } catch (error) {
+ console.error('Error placing order:', error)
+
+ if (error.response) {
+ console.error('Response data:', error.response.data)
+ console.error('Response status:', error.response.status)
+ alert(
+ `Error: ${error.response.data.message || 'Something went wrong. Please try again.'}`
+ )
+ } else {
+ alert('Something went wrong. Please try again.')
+ }
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ return (
+
+
+
+ Checkout
+
+
+ {checkoutItems.length === 0 ? (
+
+
No items to checkout.
+
+ ) : (
+ <>
+
+ {checkoutItems.map((item, index) => (
+
+
+ {item.name}
+
+
+ Price: Rs {item.price}
+
+
+ Quantity: {item.quantity}
+
+
+ Subtotal: Rs{' '}
+ {item.price * item.quantity}
+
+
+ ))}
+
+
+
+
+ Total Amount: Rs {totalAmount}
+
+
+
+
+
+ Delivery Address:
+
+