diff --git a/project.txt b/project.txt
deleted file mode 100644
index 3e95e1a..0000000
--- a/project.txt
+++ /dev/null
@@ -1,10273 +0,0 @@
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\app\(auth)\admin\employees\employee.css
-
-/* Update Inventory Page Styles */
-
-
-/* Buttons Above Table */
-.button-group {
-    display: flex;
-    gap: 20px;
-    margin-bottom: 20px;
-    justify-content: center;
-  }
-  
-  button {
-    padding: 10px 20px;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    font-size: 16px;
-    transition: background-color 0.3s ease;
-  }
-  
-  button:hover {
-    opacity: 0.8;
-  }
-  
-  .btn-add {
-    background-color: #4CAF50;
-    color: white;
-  }
-  
-  .btn-add:hover {
-    background-color: #45a049;
-  }
-  
-  .btn-update {
-    background-color: #ff9800;
-    color: white;
-  }
-  
-  .btn-update:hover {
-    background-color: #f57c00;
-  }
-  
-  .btn-remove {
-    background-color: #f44336;
-    color: white;
-  }
-  
-  .btn-remove:hover {
-    background-color: #d32f2f;
-  }
-  
-  /* Table Styles */
-  .menu-table {
-    width: 100%;
-    border-collapse: collapse;
-    margin-top: 20px;
-    margin-bottom: 40px;
-  }
-  
-  .menu-table th,
-  .menu-table td {
-    padding: 12px 15px;
-    text-align: center;
-    border: 1px solid #ddd;
-  }
-  
-  .menu-table th {
-    background-color: #4CAF50;
-    color: white;
-  }
-  
-  .menu-table tbody tr:nth-child(even) {
-    background-color: #f9f9f9;
-  }
-  
-  .menu-table tbody tr:hover {
-    background-color: #f1f1f1;
-    cursor: pointer;
-  }
-  
-  /* Highlight the selected row */
-  .menu-table tbody tr.selected {
-    background-color: #333;
-    color: white;
-  }
-  /* Add this to your CSS file */
-  .selected {
-    background-color: #4caf50; /* Highlight color for selected row */
-    color: white; /* Text color for selected row */
-  }
-  
-  /* Modal Styles */
-  .modal {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 1050; /* Make sure modal stays on top */
-  }
-  
-  .modal-container {
-    background-color: white;
-    padding: 30px;
-    border-radius: 10px;
-    width: 400px;
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
-  }
-  
-  .modal h2 {
-    margin-bottom: 20px;
-  }
-  
-  .modal .form-group {
-    margin-bottom: 15px;
-  }
-  
-  .modal label {
-    display: block;
-    margin-bottom: 5px;
-    font-weight: bold;
-  }
-  
-  .modal input[type="text"],
-  .modal input[type="number"],
-  .modal input[type="checkbox"] {
-    width: 100%;
-    padding: 10px;
-    font-size: 14px;
-    border: 1px solid #ddd;
-    border-radius: 5px;
-    margin-top: 5px;
-  }
-  
-  .modal input[type="checkbox"] {
-    width: auto;
-  }
-  
-  .modal-actions {
-    display: flex;
-    gap: 20px;
-    justify-content: center;
-  }
-  
-  .modal-actions button {
-    padding: 10px 20px;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    font-size: 16px;
-  }
-  
-  .modal-actions button:hover {
-    opacity: 0.8;
-  }
-  
-  .modal-actions button:first-child {
-    background-color: #4CAF50;
-    color: white;
-  }
-  
-  .modal-actions button:last-child {
-    background-color: #f44336;
-    color: white;
-  }
-  
-  /* Overlay to grey out background */
-  .overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.5); /* Grey overlay */
-    z-index: 1040; /* Ensure overlay is beneath the modal */
-  }
-  /* Modal Overlay */
-  .modal-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 9999;
-  }
-  
-  /* Modal */
-  .modal {
-    background: #fff;
-    padding: 20px;
-    border-radius: 8px;
-    width: 400px;
-    max-width: 100%;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  }
-  
-  /* Close Button */
-  .close-btn {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    background: none;
-    border: none;
-    font-size: 24px;
-    cursor: pointer;
-  }
-  
-  /* Form Fields */
-  input {
-    width: 100%;
-    padding: 8px;
-    margin: 8px 0;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-  }
-  
-  button:hover {
-    background-color: #0056b3;
-  }
-  
-  button:disabled {
-    background-color: #ccc;
-    cursor: not-allowed;
-  }
-  
-  form {
-    display: flex;
-    flex-direction: column;
-  }
-  
-  /* Centering the tab buttons and action buttons */
-  .tab-navigation,
-  .button-group {
-    display: flex;
-    justify-content: center;
-    margin-bottom: 20px;
-  }
-  
-  /* Styling for the tab buttons */
-  .tab-navigation button {
-    background-color: #007bff; /* Primary color */
-    color: white;
-    border: none;
-    padding: 10px 20px;
-    margin: 0 5px;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: background-color 0.3s;
-  }
-  
-  .tab-navigation button.active {
-    background-color: #0056b3; /* Darker shade for active tab */
-  }
-  
-  .tab-navigation button:hover {
-    background-color: #0056b3;
-  }
-  
-  /* Styling for the action buttons (Add, Update, Remove) */
-  .button-group .btn-add {
-    background-color: #28a745; /* Green for add */
-    color: white;
-    border: none;
-    padding: 10px 15px;
-    margin: 0 5px;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: background-color 0.3s;
-  }
-  
-  .button-group .btn-update {
-    background-color: #ffc107; /* Yellow for update */
-    color: black;
-    border: none;
-    padding: 10px 15px;
-    margin: 0 5px;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: background-color 0.3s;
-  }
-  
-  .button-group .btn-remove {
-    background-color: #dc3545; /* Red for remove */
-    color: white;
-    border: none;
-    padding: 10px 15px;
-    margin: 0 5px;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: background-color 0.3s;
-  }
-  
-  .button-group .btn-add:hover {
-    background-color: #218838;
-  }
-  
-  .button-group .btn-update:hover {
-    background-color: #e0a800;
-  }
-  
-  .button-group .btn-remove:hover {
-    background-color: #c82333;
-  }
-  
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\app\(auth)\admin\employees\Modal.tsx
-
-import React, { useState, useEffect } from 'react';
-
-
-interface Employee {
-    employee_id: string;
-    name: string;
-    salary: number;
-    position: string;
-  }
-
-interface ModalProps {
-    onClose: () => void;
-    onSave: (data: Partial<Employee>) => void;
-    onConfirmRemove: () => void;
-    initialData?: Partial<Employee>;
-    action: 'add' | 'update' | 'remove' | null;
-    }
-  
-  const Modal: React.FC<ModalProps> = ({
-    onClose,
-    onSave,
-    onConfirmRemove,
-    initialData,
-    action,
-  }) => {
-    const [formData, setFormData] = useState<Partial<Employee>>({
-      employee_id: '',
-      name: '',
-      salary: 0,
-      position: '',
-      ...initialData, // Populate form data if updating
-    });
-  
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      const { name, value } = e.target;
-      setFormData((prevData) => ({
-        ...prevData,
-        [name]: value,
-      }));
-    };
-  
-    const handleSubmit = (e: React.FormEvent) => {
-      e.preventDefault();
-    
-      const filteredData = { ...formData };
-    
-      onSave(filteredData);
-    };
-    
-  
-    const handleRemove = () => {
-      onConfirmRemove();
-    };
-  
-    useEffect(() => {
-      if (action === 'update' && initialData) {
-        setFormData({ ...initialData });
-      }
-    }, [action, initialData]);
-  
-    const renderForm = () => {
-      if (action === 'add' || action === 'update') {
-        return (
-          <form onSubmit={handleSubmit}>
-            <div>
-              <label>Id:</label>
-              <input
-                type="text"
-                name="employee_id"
-                value={formData.employee_id || ''}
-                onChange={handleChange}
-                required
-              />
-            </div>
-            <div>
-              <label>Name:</label>
-              <input
-                type="text"
-                name="name"
-                value={formData.name || ''}
-                onChange={handleChange}
-                required
-              />
-            </div>
-            
-                <div>
-                <label>Salary:</label>
-                <input
-                    type="number"
-                    name="salary"
-                    value={formData.salary || 0}
-                    onChange={handleChange}
-                    required
-                />
-                </div>
-    
-
-            <div>
-                <label>Position:</label>
-                <input
-                    type="text"
-                    name="position"
-                    value={formData.position || ''}
-                    onChange={handleChange}
-                    required
-                />
-            </div>
-
-            
-                    <div>
-                    <button type="submit">
-                        {action === 'add' ? 'Add Item' : 'Update Item'}
-                    </button>
-                    </div>
-                </form>
-            );
-        
-      } 
-      else if (action === 'remove' && initialData) {
-        return (
-          <div>
-            <p>Are you sure you want to remove {initialData.name}?</p>
-            <div>
-              <button onClick={handleRemove}>Yes, Remove</button>
-              <button onClick={onClose}>Cancel</button>
-            </div>
-          </div>
-        );
-      }
-  
-      return null;
-    };
-  
-    return (
-      <div className="modal-overlay">
-        <div className="modal">
-          <button className="close-btn" onClick={onClose}>
-            &times;
-          </button>
-          {renderForm()}
-        </div>
-      </div>
-    );
-  };
-  
-  export default Modal;
-  
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\app\(auth)\admin\employees\page.tsx
-
-// app/update-inventory/page.tsx
-'use client';
-
-import Modal from './Modal'; // Assuming you have a Modal component
-
-import { useEffect, useState } from 'react';
-import './employee.css'; // Make sure to import the necessary CSS
-
-
-
-interface Employee {
-    employee_id: string;
-    name: string;
-    salary: number;
-    position: string;
-  }
-
-export default function UpdateEmployeesPage() {
-  const [Employees, setEmployees] = useState<Employee[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [modalAction, setModalAction] = useState<'add' | 'update' | 'remove' | null>(null);
-  const [selectedItem, setSelectedItem] = useState<Employee | null>(null);
-  const [modalVisible, setModalVisible] = useState(false);  // Track modal visibility
-  const [activeTab, setActiveTab] = useState<string>('entree_side'); // Tracks the selected category tab
-
- 
-
-  // Function to fetch the menu items
-  const fetchEmployees = async () => {
-    setLoading(true);
-    try {
-      const response = await fetch('http://localhost:4000/api/employees');
-      if (!response.ok) {
-        throw new Error('Failed to fetch employees');
-      }
-      const data: Employee[] = await response.json();
-      setEmployees(data);
-    } catch (error) {
-      setError((error as Error).message);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-// useEffect to load items on component mount
-useEffect(() => {
-  fetchEmployees();
-}, []);
-
-  // Handle add, update, and remove actions
-  const handleAddItem = async () => {
-    setModalAction('add');
-    setModalVisible(true);
-  };
-
-  // Modify handleUpdateItem to show the modal for updating
-  const handleUpdateItem = () => {
-    if (!selectedItem) {
-      alert('Please select an item to update');
-      return;
-    }
-    
-    setModalAction('update'); // Action for updating
-    setModalVisible(true); // Open the modal with selected item data
-  };
-
-  // Modify handleRemoveItem to show the modal for removing
-  const handleRemoveItem = () => {
-    if (!selectedItem) {
-      alert('Please select an item to remove');
-      return;
-    }
-    
-    setModalAction('remove'); // Action for removing
-    setModalVisible(true); // Open the modal for confirmation
-  };
-  
-  const handleSelectItem = (item: Employee) => {
-    if (selectedItem && selectedItem.name === item.name) {
-      // If the clicked item is already selected, deselect it
-      setSelectedItem(null);
-    } else {
-      // Otherwise, select the clicked item
-      setSelectedItem(item);
-    }
-  };
-  
-
-  // Modal component for adding, updating, or removing items
-  const handleSaveItem = async (data: Partial<Employee>) => {
-    let response;
-    //try this delete later if no work
-    // Check and format price if it's a number
-    // if (data.price !== undefined && typeof data.price === 'number') {
-    //   console.log('Formatting price:', data.price); // Log the original price
-    //   data.price = parseFloat(data.price.toFixed(2)); // Format to 2 decimal places
-    // } else {
-    //     console.log('Price is not a number or is undefined:', data.price); // Log if not a number
-    // }
-    if (modalAction === 'add') {
-      response = await fetch('http://localhost:4000/api/employees', {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(data),
-      });
-    } else if (modalAction === 'update' && selectedItem) {
-      response = await fetch('http://localhost:4000/api/employees', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ ...selectedItem, ...data })
-      });
-      console.log(JSON.stringify(data));
-    } else if (modalAction === 'remove' && selectedItem) {
-      response = await fetch(`http://localhost:4000/api/employees`, {
-        method: 'DELETE',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ ...selectedItem, ...data })
-      });
-    }
-
-    if (response?.ok) {
-      // Refetch data from backend after the action
-      await fetchEmployees();
-      setModalVisible(false); // Close modal after saving
-      setSelectedItem(null); // Deselect item
-    } else {
-      console.error(`Failed to ${modalAction} item`);
-    }
-  };
-  
-  
-  
-  
-
-  return (
-    <div>
-      <h1>Manage Employees</h1>
-
-      {loading && <p>Loading employees...</p>}
-      {error && <p style={{ color: 'red' }}>{error}</p>}
-
-    
-      
-
-      {/* Action Buttons */}
-      <div className="button-group">
-        <button className="btn-add" onClick={handleAddItem}>Add Employee</button>
-        <button className="btn-update" onClick={handleUpdateItem}>Update Employee</button>
-        <button className="btn-remove" onClick={handleRemoveItem}>Remove Employee</button>
-      </div>
-
-      {/* Table displaying menu items for the active category */}
-      <table className="menu-table">
-        <thead>
-          <tr>
-            <th>Id</th>
-            <th>Name</th>
-            <th>Salary</th>
-            <th>Position</th>
-          </tr>
-        </thead>
-        <tbody>
-          {Employees
-            .map((item) => (
-              <tr
-                key={item.name}
-                className={selectedItem?.name === item.name ? 'selected' : ''}
-                onClick={() => handleSelectItem(item)}
-              >
-                <td>{item.employee_id}</td>
-                <td>{item.name}</td>
-                <td>{item.salary}</td>
-                <td>{item.position}</td>
-              </tr>
-            ))}
-        </tbody>
-      </table>
-
-      {/* Modal */}
-      {modalVisible && (
-        <>
-          <div className="overlay" onClick={() => setModalVisible(false)} />
-          <Modal
-            onClose={() => setModalVisible(false)}
-            onSave={handleSaveItem}
-            onConfirmRemove={() => handleSaveItem(selectedItem!)} // for removing item
-            initialData={(modalAction === 'update' || modalAction === 'remove') && selectedItem ? selectedItem : undefined}
-            action={modalAction}
-          />
-        </>
-      )}
-    </div>
-  );
-}
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\app\(auth)\admin\reports\page.tsx
-
-// src/app/(auth)/admin/reports/page.tsx
-'use client';
-
-import { useState } from 'react';
-import { Calendar, BarChart3, DollarSign, ClipboardList } from 'lucide-react';
-import { format } from 'date-fns';
-import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
-import { useRouter } from 'next/navigation';
-
-interface SalesData {
-  itemized_sales: Array<{
-    name: string;
-    type: string;
-    quantity_sold: number;
-    sales: number;
-  }>;
-  summary: {
-    total_sales: number;
-    total_orders: number;
-    average_order_value: number;
-  };
-  daily_sales?: Array<{
-    date: string;
-    num_orders: number;
-    total: number;
-  }>;
-}
-
-interface ProductUsageData {
-  entrees: Array<{ name: string; usage: number; }>;
-  sides: Array<{ name: string; usage: number; }>;
-  drinks: Array<{ name: string; usage: number; }>;
-  appetizers: Array<{ name: string; usage: number; }>;
-}
-
-interface XReportData {
-  hourly_sales: Array<{
-    hour: number;
-    total_sales: number;
-    num_orders: number;
-  }>;
-  summary: {
-    total_sales: number;
-    total_orders: number;
-    average_order_value: number;
-  };
-}
-
-interface ZReportData {
-  summary: {
-    total_sales: number;
-    total_orders: number;
-  };
-  items_sold: Array<{
-    name: string;
-    quantity: number;
-  }>;
-}
-
-type ReportData = SalesData | ProductUsageData | XReportData | ZReportData | null;
-
-const SalesReportsPage = () => {
-  const [activeTab, setActiveTab] = useState('product-usage');
-  const [startDate, setStartDate] = useState('');
-  const [endDate, setEndDate] = useState('');
-  const [reportData, setReportData] = useState<ReportData>(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const router = useRouter();
-
-  const renderProductUsageChart = (data: ProductUsageData) => {
-    if (!data) return null;
-    const categories = ['entrees', 'sides', 'drinks', 'appetizers'] as const;
-    
-    return (
-      <div className="space-y-8">
-        {categories.map(category => (
-          <div key={category} className="bg-white p-4 rounded-lg shadow">
-            <h3 className="text-xl font-semibold mb-4 capitalize">{category} Usage</h3>
-             {/* Increased height to accommodate labels */}
-          <div className="h-[500px]">
-            <ResponsiveContainer width="100%" height="100%">
-              <BarChart 
-                data={data[category]}
-                margin={{
-                  top: 20,
-                  right: 30,
-                  left: 20,
-                  bottom: 100  // Increased bottom margin for labels
-                }}
-              >
-                <CartesianGrid strokeDasharray="3 3" />
-                <XAxis 
-                  dataKey="name" 
-                  angle={-45} 
-                  textAnchor="end" 
-                  height={100}  // Increased height for labels
-                  interval={0}
-                  tick={{
-                    fontSize: 12,
-                    dy: 3  // Adjust vertical position of labels
-                  }}
-                />
-                <YAxis />
-                <Tooltip />
-                <Legend />
-                <Bar 
-                  dataKey="usage" 
-                  fill="#ED1C24" 
-                  name="Usage Count"
-                  maxBarSize={100}  // Control maximum bar width
-                />
-              </BarChart>
-            </ResponsiveContainer>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-  const renderXReport = (data: XReportData) => {
-    if (!data?.hourly_sales) return null;
-
-    return (
-      <div className="space-y-4">
-        {/* Summary Cards */}
-        <div className="grid grid-cols-3 gap-4 mb-6">
-          <div className="bg-white p-4 rounded-lg shadow">
-            <h4 className="text-sm font-medium text-gray-500">Total Sales</h4>
-            <p className="text-2xl font-bold text-[var(--panda-red)]">
-              ${data.summary.total_sales.toFixed(2)}
-            </p>
-          </div>
-          <div className="bg-white p-4 rounded-lg shadow">
-            <h4 className="text-sm font-medium text-gray-500">Orders</h4>
-            <p className="text-2xl font-bold text-[var(--panda-red)]">
-              {data.summary.total_orders}
-            </p>
-          </div>
-          <div className="bg-white p-4 rounded-lg shadow">
-            <h4 className="text-sm font-medium text-gray-500">Average Order</h4>
-            <p className="text-2xl font-bold text-[var(--panda-red)]">
-              ${data.summary.average_order_value.toFixed(2)}
-            </p>
-          </div>
-        </div>
-
-        {/* Hourly Chart */}
-        <div className="bg-white p-4 rounded-lg shadow">
-          <h3 className="text-xl font-semibold mb-4">Hourly Sales</h3>
-          <div className="h-[400px]">
-            <ResponsiveContainer width="100%" height="100%">
-              <BarChart data={data.hourly_sales}>
-                <CartesianGrid strokeDasharray="3 3" />
-                <XAxis 
-                  dataKey="hour" 
-                  tickFormatter={(hour) => `${hour}:00`}
-                />
-                <YAxis yAxisId="left" />
-                <YAxis yAxisId="right" orientation="right" />
-                <Tooltip 
-                  formatter={(value, name) => {
-                    if (name === "total_sales") return `$${Number(value).toFixed(2)}`;
-                    return value;
-                  }}
-                />
-                <Legend />
-                <Bar 
-                  yAxisId="left"
-                  dataKey="total_sales" 
-                  fill="#ED1C24" 
-                  name="Sales ($)" 
-                />
-                <Bar 
-                  yAxisId="right"
-                  dataKey="num_orders" 
-                  fill="#4B5563" 
-                  name="Orders" 
-                />
-              </BarChart>
-            </ResponsiveContainer>
-          </div>
-        </div>
-      </div>
-    );
-  };
-
-  const renderZReport = (data: ZReportData) => {
-    if (!data?.summary) return null;
-
-    return (
-      <div className="space-y-4 bg-white p-6 rounded-lg shadow">
-        <div className="grid grid-cols-2 gap-4">
-          <div className="p-4 bg-gray-50 rounded-lg">
-            <h4 className="text-lg font-semibold mb-2">Total Sales</h4>
-            <p className="text-3xl font-bold text-[var(--panda-red)]">
-              ${data.summary.total_sales.toFixed(2)}
-            </p>
-          </div>
-          <div className="p-4 bg-gray-50 rounded-lg">
-            <h4 className="text-lg font-semibold mb-2">Total Orders</h4>
-            <p className="text-3xl font-bold text-[var(--panda-red)]">
-              {data.summary.total_orders}
-            </p>
-          </div>
-        </div>
-
-        <div className="mt-8">
-          <h4 className="text-lg font-semibold mb-4">Items Sold</h4>
-          <div className="overflow-x-auto">
-            <table className="min-w-full divide-y divide-gray-200">
-              <thead className="bg-gray-50">
-                <tr>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    Item Name
-                  </th>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    Quantity Sold
-                  </th>
-                </tr>
-              </thead>
-              <tbody className="bg-white divide-y divide-gray-200">
-                {data.items_sold.map((item, index) => (
-                  <tr key={index}>
-                    <td className="px-6 py-4 whitespace-nowrap">{item.name}</td>
-                    <td className="px-6 py-4 whitespace-nowrap">{item.quantity}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-    );
-  };
-
-  const renderSalesReport = (data: SalesData) => {
-    if (!data?.itemized_sales) return null;
-
-    return (
-      <div className="space-y-6">
-        {/* Summary Cards */}
-        <div className="grid grid-cols-3 gap-4">
-          <div className="bg-white p-4 rounded-lg shadow">
-            <h4 className="text-sm font-medium text-gray-500">Total Sales</h4>
-            <p className="text-2xl font-bold text-[var(--panda-red)]">
-              ${data.summary.total_sales.toFixed(2)}
-            </p>
-          </div>
-          <div className="bg-white p-4 rounded-lg shadow">
-            <h4 className="text-sm font-medium text-gray-500">Total Orders</h4>
-            <p className="text-2xl font-bold text-[var(--panda-red)]">
-              {data.summary.total_orders}
-            </p>
-          </div>
-          <div className="bg-white p-4 rounded-lg shadow">
-            <h4 className="text-sm font-medium text-gray-500">Average Order</h4>
-            <p className="text-2xl font-bold text-[var(--panda-red)]">
-              ${data.summary.average_order_value.toFixed(2)}
-            </p>
-          </div>
-        </div>
-
-        {/* Sales Table */}
-        <div className="bg-white rounded-lg shadow">
-          <div className="overflow-x-auto">
-            <table className="min-w-full divide-y divide-gray-200">
-              <thead className="bg-gray-50">
-                <tr>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    Item
-                  </th>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    Category
-                  </th>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    Quantity Sold
-                  </th>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    Total Sales
-                  </th>
-                </tr>
-              </thead>
-              <tbody className="bg-white divide-y divide-gray-200">
-                {data.itemized_sales.map((item, index) => (
-                  <tr key={index}>
-                    <td className="px-6 py-4 whitespace-nowrap">{item.name}</td>
-                    <td className="px-6 py-4 whitespace-nowrap">{item.type}</td>
-                    <td className="px-6 py-4 whitespace-nowrap">{item.quantity_sold}</td>
-                    <td className="px-6 py-4 whitespace-nowrap">${item.sales.toFixed(2)}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </div>
-
-        {/* Daily Sales Chart */}
-        {data.daily_sales && data.daily_sales.length > 0 && (
-          <div className="bg-white p-4 rounded-lg shadow">
-            <h3 className="text-lg font-semibold mb-4">Daily Sales Trend</h3>
-            <div className="h-[300px]">
-              <ResponsiveContainer width="100%" height="100%">
-                <BarChart data={data.daily_sales}>
-                  <CartesianGrid strokeDasharray="3 3" />
-                  <XAxis 
-                    dataKey="date" 
-                    tickFormatter={(date) => format(new Date(date), 'MMM d')}
-                  />
-                  <YAxis yAxisId="left" />
-                  <YAxis yAxisId="right" orientation="right" />
-                  <Tooltip 
-                    formatter={(value, name) => {
-                      if (name === "total") return `$${Number(value).toFixed(2)}`;
-                      return value;
-                    }}
-                    labelFormatter={(date) => format(new Date(date), 'MMM d, yyyy')}
-                  />
-                  <Legend />
-                  <Bar 
-                    yAxisId="left"
-                    dataKey="total" 
-                    fill="#ED1C24" 
-                    name="Sales ($)" 
-                  />
-                  <Bar 
-                    yAxisId="right"
-                    dataKey="num_orders" 
-                    fill="#4B5563" 
-                    name="Orders" 
-                  />
-                </BarChart>
-              </ResponsiveContainer>
-            </div>
-          </div>
-        )}
-      </div>
-    );
-  };
-
-  const handleGenerateReport = async () => {
-    setIsLoading(true);
-    try {
-      let response;
-      switch (activeTab) {
-        case 'product-usage':
-          response = await fetch('/api/reports/product-usage', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ startDate, endDate }),
-          });
-          break;
-        case 'x-report':
-          response = await fetch('/api/reports/x-report');
-          break;
-        case 'z-report':
-          response = await fetch('/api/reports/z-report');
-          break;
-        case 'sales-report':
-          response = await fetch('/api/reports/sales', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ startDate, endDate }),
-          });
-          break;
-      }
-
-      if (response?.ok) {
-        const data = await response.json();
-        setReportData(data);
-      } else {
-        console.error('Failed to fetch report data');
-      }
-    } catch (error) {
-      console.error('Error generating report:', error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const renderContent = () => {
-    if (isLoading) {
-      return (
-        <div className="flex justify-center items-center h-64">
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[var(--panda-red)]"></div>
-        </div>
-      );
-    }
-
-    const needsDateRange = activeTab === 'product-usage' || activeTab === 'sales-report';
-
-    return (
-      <div className="space-y-4">
-        {needsDateRange && (
-          <div className="grid grid-cols-2 gap-4 mb-4">
-            <div>
-              <label className="block text-sm font-medium text-gray-700">Start Date</label>
-              <input
-                type="date"
-                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[var(--panda-red)] focus:ring-[var(--panda-red)]"
-                value={startDate}
-                onChange={(e) => setStartDate(e.target.value)}
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700">End Date</label>
-              <input
-                type="date"
-                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[var(--panda-red)] focus:ring-[var(--panda-red)]"
-                value={endDate}
-                onChange={(e) => setEndDate(e.target.value)}
-              />
-            </div>
-          </div>
-        )}
-
-        <button
-          onClick={handleGenerateReport}
-          className="btn-primary w-full"
-          disabled={needsDateRange && (!startDate || !endDate)}
-        >
-          Generate {activeTab === 'product-usage' ? 'Product Usage Report' : 
-                    activeTab === 'x-report' ? 'X-Report' :
-                    activeTab === 'z-report' ? 'Z-Report' : 'Sales Report'}
-        </button>
-
-        {reportData && (
-          <div className="mt-6">
-            {activeTab === 'product-usage' && renderProductUsageChart(reportData as ProductUsageData)}
-            {activeTab === 'x-report' && renderXReport(reportData as XReportData)}
-            {activeTab === 'z-report' && renderZReport(reportData as ZReportData)}
-            {activeTab === 'sales-report' && renderSalesReport(reportData as SalesData)}
-          </div>
-        )}
-      </div>
-    );
-  };
-
-  return (
-    
-    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-         {/* Add this button */}
-      <button
-        onClick={() => router.push('/admin')}
-        className="mb-6 flex items-center text-[var(--panda-red)] hover:text-[var(--panda-dark-red)]"
-      >
-        <svg 
-          xmlns="http://www.w3.org/2000/svg" 
-          className="h-5 w-5 mr-2" 
-          viewBox="0 0 20 20" 
-          fill="currentColor"
-        >
-          <path 
-            fillRule="evenodd" 
-            d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" 
-            clipRule="evenodd" 
-          />
-        </svg>
-        Back to Dashboard
-      </button>
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold">Sales Reports</h1>
-        <p className="text-gray-600 mt-2">Generate and view various sales reports</p>
-      </div>
-
-      <div className="grid grid-cols-4 gap-4 mb-8">
-        <button
-          onClick={() => {
-            setActiveTab('product-usage');
-            setReportData(null);
-          }}
-          className={`p-4 rounded-lg flex flex-col items-center ${
-            activeTab === 'product-usage' ? 'bg-[var(--panda-red)] text-white' : 'bg-white hover:bg-gray-50'
-          }`}
-        >
-          <BarChart3 className="h-6 w-6 mb-2" />
-          <span>Product Usage</span>
-        </button>
-
-        <button
-          onClick={() => {
-            setActiveTab('x-report');
-            setReportData(null);
-          }}
-          className={`p-4 rounded-lg flex flex-col items-center ${
-            activeTab === 'x-report' ? 'bg-[var(--panda-red)] text-white' : 'bg-white hover:bg-gray-50'
-          }`}
-        >
-          <Calendar className="h-6 w-6 mb-2" />
-          <span>X-Report</span>
-        </button>
-
-        <button
-          onClick={() => {
-            setActiveTab('z-report');
-            setReportData(null);
-          }}
-          className={`p-4 rounded-lg flex flex-col items-center ${
-            activeTab === 'z-report' ? 'bg-[var(--panda-red)] text-white' : 'bg-white hover:bg-gray-50'
-          }`}
-        >
-          <ClipboardList className="h-6 w-6 mb-2" />
-          <span>Z-Report</span>
-        </button>
-
-        <button
-          onClick={() => {
-            setActiveTab('sales-report');
-            setReportData(null);
-          }}
-          className={`p-4 rounded-lg flex flex-col items-center ${
-            activeTab === 'sales-report' ? 'bg-[var(--panda-red)] text-white' : 'bg-white hover:bg-gray-50'
-          }`}
-        >
-          <DollarSign className="h-6 w-6 mb-2" />
-          <span>Sales Report</span>
-        </button>
-      </div>
-
-      <div className="bg-white rounded-lg shadow p-6">
-        {renderContent()}
-      </div>
-    </div>
-  );
-};
-
-export default SalesReportsPage;
-                
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\app\(auth)\admin\styles\globals.css
-
-/* styles/globals.css or your preferred global CSS file */
-
-/* General layout */
-.container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 2rem;
-  }
-  
-  /* Title */
-  .title {
-    font-size: 2rem;
-    font-weight: 700;
-    margin-bottom: 1.5rem;
-  }
-  
-  /* Table Styles */
-  .table {
-    width: 100%;
-    border-collapse: collapse;
-    margin-top: 2rem;
-  }
-  
-  .table th,
-  .table td {
-    padding: 0.75rem;
-    border: 1px solid #ddd;
-    text-align: left;
-  }
-  
-  /* Header Styles */
-  .table th {
-    background-color: #f4f4f4;
-    font-size: 1.1rem;
-    font-weight: 600;
-  }
-  
-  /* Row Styles */
-  .table td {
-    font-size: 1rem;
-    color: #333;
-  }
-  
-  .table tr:nth-child(even) {
-    background-color: #f9f9f9;
-  }
-  
-  /* Loading and Error Messages */
-  .loading {
-    font-size: 1.2rem;
-    color: #666;
-  }
-  
-  .error {
-    font-size: 1.2rem;
-    color: red;
-  }
-  
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\app\(auth)\admin\update-inventory\Modal.tsx
-
-import React, { useState, useEffect } from 'react';
-
-
-interface MenuItem {
-    id: number;
-    name: string;
-    category: string;
-    price: number;
-    count: number;
-    type: boolean | null;
-  }
-
-interface ModalProps {
-    onClose: () => void;
-    onSave: (data: Partial<MenuItem>) => void;
-    onConfirmRemove: () => void;
-    initialData?: Partial<MenuItem>;
-    action: 'add' | 'update' | 'remove' | null;
-    }
-  
-  const Modal: React.FC<ModalProps> = ({
-    onClose,
-    onSave,
-    onConfirmRemove,
-    initialData,
-    action,
-  }) => {
-    const [formData, setFormData] = useState<Partial<MenuItem>>({
-      name: '',
-      category: '',
-      price: 0,
-      count: 0,
-      type: false,
-      ...initialData, // Populate form data if updating
-    });
-  
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      const { name, value } = e.target;
-      setFormData((prevData) => ({
-        ...prevData,
-        [name]: value,
-      }));
-    };
-  
-    const handleSubmit = (e: React.FormEvent) => {
-      e.preventDefault();
-    
-      const filteredData = { ...formData };
-      if (filteredData.category === 'free_items' || filteredData.category === 'raw_items') {
-        delete filteredData.price;
-        delete filteredData.type;
-      }
-      if (filteredData.category === 'drink_table' || filteredData.category === 'appetizers'){
-        delete filteredData.type;
-      }
-    
-      onSave(filteredData);
-    };
-    
-  
-    const handleRemove = () => {
-      onConfirmRemove();
-    };
-  
-    useEffect(() => {
-      if (action === 'update' && initialData) {
-        setFormData({ ...initialData });
-      }
-    }, [action, initialData]);
-  
-    const renderForm = () => {
-      if (action === 'add' || action === 'update') {
-        return (
-          <form onSubmit={handleSubmit}>
-            <div>
-              <label>Name:</label>
-              <input
-                type="text"
-                name="name"
-                value={formData.name || ''}
-                onChange={handleChange}
-                required
-              />
-            </div>
-            <div>
-              <label>Category:</label>
-              <input
-                type="text"
-                name="category"
-                value={formData.category || ''}
-                onChange={handleChange}
-                required
-              />
-            </div>
-            {/* Show Price input only if category is not "free_items" or "raw_items" */}
-            {(formData.category !== 'free_items' && formData.category !== 'raw_items') && (
-                <div>
-                <label>Price:</label>
-                <input
-                    type="number"
-                    name="price"
-                    value={formData.price || ''}
-                    onChange={handleChange}
-                    required
-                />
-                </div>
-            )}
-
-            <div>
-                <label>Inventory Count:</label>
-                <input
-                    type="number"
-                    name="count"
-                    value={formData.count || ''}
-                    onChange={handleChange}
-                    required
-                />
-            </div>
-
-            {/* Show Type checkbox only if category is "entree_side" */}
-            {formData.category === 'entree_side' && (
-                <div>
-                    <label>Type (Entree Item?):</label>
-                    <input
-                        type="checkbox"
-                        name="type"
-                        checked={formData.type || false}
-                        onChange={(e) =>
-                        setFormData((prevData) => ({
-                            ...prevData,
-                            type: e.target.checked,
-                        }))
-                        }
-                    />
-                </div>
-            )}
-                    <div>
-                    <button type="submit">
-                        {action === 'add' ? 'Add Item' : 'Update Item'}
-                    </button>
-                    </div>
-                </form>
-            );
-        
-      } 
-      else if (action === 'remove' && initialData) {
-        return (
-          <div>
-            <p>Are you sure you want to remove {initialData.name}?</p>
-            <div>
-              <button onClick={handleRemove}>Yes, Remove</button>
-              <button onClick={onClose}>Cancel</button>
-            </div>
-          </div>
-        );
-      }
-  
-      return null;
-    };
-  
-    return (
-      <div className="modal-overlay">
-        <div className="modal">
-          <button className="close-btn" onClick={onClose}>
-            &times;
-          </button>
-          {renderForm()}
-        </div>
-      </div>
-    );
-  };
-  
-  export default Modal;
-  
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\app\(auth)\admin\update-inventory\page.tsx
-
-// app/update-inventory/page.tsx
-'use client';
-
-import Modal from './Modal'; // Assuming you have a Modal component
-
-import { useEffect, useState } from 'react';
-import './update-inventory.css'; // Make sure to import the necessary CSS
-
-// Define the MenuItem type (adjust based on your actual type structure)
-interface MenuItem {
-  name: string;
-  category: string;
-  price: number;
-  count: number;
-  type: boolean | null;
-}
-
-export default function UpdateInventoryPage() {
-  const [menuItems, setMenuItems] = useState<MenuItem[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [modalAction, setModalAction] = useState<'add' | 'update' | 'remove' | null>(null);
-  const [selectedItem, setSelectedItem] = useState<MenuItem | null>(null);
-  const [modalVisible, setModalVisible] = useState(false);  // Track modal visibility
-  const [activeTab, setActiveTab] = useState<string>('entree_side'); // Tracks the selected category tab
-
-  const categories = ['entree_side', 'free_items', 'drink_table', 'appetizers', 'raw_items'];
-
-  // Function to fetch the menu items
-  const fetchMenuItems = async () => {
-    setLoading(true);
-    try {
-      const response = await fetch('http://localhost:4000/api/menu-items');
-      if (!response.ok) {
-        throw new Error('Failed to fetch menu items');
-      }
-      const data: MenuItem[] = await response.json();
-      setMenuItems(data);
-    } catch (error) {
-      setError((error as Error).message);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-// useEffect to load items on component mount
-useEffect(() => {
-  fetchMenuItems();
-}, []);
-
-  // Handle add, update, and remove actions
-  const handleAddItem = async () => {
-    setModalAction('add');
-    setModalVisible(true);
-  };
-
-  // Modify handleUpdateItem to show the modal for updating
-  const handleUpdateItem = () => {
-    if (!selectedItem) {
-      alert('Please select an item to update');
-      return;
-    }
-    
-    setModalAction('update'); // Action for updating
-    setModalVisible(true); // Open the modal with selected item data
-  };
-
-  // Modify handleRemoveItem to show the modal for removing
-  const handleRemoveItem = () => {
-    if (!selectedItem) {
-      alert('Please select an item to remove');
-      return;
-    }
-    
-    setModalAction('remove'); // Action for removing
-    setModalVisible(true); // Open the modal for confirmation
-  };
-  
-  const handleSelectItem = (item: MenuItem) => {
-    if (selectedItem && selectedItem.name === item.name) {
-      // If the clicked item is already selected, deselect it
-      setSelectedItem(null);
-    } else {
-      // Otherwise, select the clicked item
-      setSelectedItem(item);
-    }
-  };
-  
-
-  // Modal component for adding, updating, or removing items
-  const handleSaveItem = async (data: Partial<MenuItem>) => {
-    let response;
-    //try this delete later if no work
-    // Check and format price if it's a number
-    // if (data.price !== undefined && typeof data.price === 'number') {
-    //   console.log('Formatting price:', data.price); // Log the original price
-    //   data.price = parseFloat(data.price.toFixed(2)); // Format to 2 decimal places
-    // } else {
-    //     console.log('Price is not a number or is undefined:', data.price); // Log if not a number
-    // }
-    if (modalAction === 'add') {
-      response = await fetch('http://localhost:4000/api/menu-items', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(data),
-      });
-    } else if (modalAction === 'update' && selectedItem) {
-      response = await fetch('http://localhost:4000/api/menu-items', {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ ...selectedItem, ...data })
-      });
-      console.log(JSON.stringify(data));
-    } else if (modalAction === 'remove' && selectedItem) {
-      response = await fetch(`http://localhost:4000/api/menu-items`, {
-        method: 'DELETE',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ ...selectedItem, ...data })
-      });
-    }
-
-    if (response?.ok) {
-      // Refetch data from backend after the action
-      await fetchMenuItems();
-      setModalVisible(false); // Close modal after saving
-      setSelectedItem(null); // Deselect item
-    } else {
-      console.error(`Failed to ${modalAction} item`);
-    }
-  };
-  
-  const handleConfirmRemove = async () => {
-    if (!selectedItem) return;
-  
-    // Send DELETE request to backend to remove the item by name and category
-    const response = await fetch('http://localhost:4000/api/menu-items', {
-      method: 'DELETE',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ name: selectedItem.name, category: selectedItem.category }), // Send name and category for identification
-    });
-  
-    if (response.ok) {
-      // Remove item locally and refresh list
-      setMenuItems((prevItems) => prevItems.filter((item) => item.name !== selectedItem.name));
-    } else {
-      console.error('Failed to remove item');
-    }
-  
-    setModalVisible(false); // Close modal after removing
-    setSelectedItem(null); // Clear selection
-  };
-  
-  const handleTabClick = (category: string) => {
-    setActiveTab(category);
-    setSelectedItem(null); // Clear selection when switching tabs
-  };
-
-  return (
-    <div>
-      <h1>Update Inventory</h1>
-
-      {loading && <p>Loading menu items...</p>}
-      {error && <p style={{ color: 'red' }}>{error}</p>}
-
-      {/* Tab Navigation */}
-      <div className="tab-navigation">
-        {categories.map((category) => (
-          <button
-            key={category}
-            className={activeTab === category ? 'active' : ''}
-            onClick={() => handleTabClick(category)}
-          >
-            {category.replace('_', ' ').toUpperCase()}
-          </button>
-        ))}
-      </div>
-
-      {/* Action Buttons */}
-      <div className="button-group">
-        <button className="btn-add" onClick={handleAddItem}>Add Item</button>
-        <button className="btn-update" onClick={handleUpdateItem}>Update Item</button>
-        <button className="btn-remove" onClick={handleRemoveItem}>Remove Item</button>
-      </div>
-
-      {/* Table displaying menu items for the active category */}
-      <table className="menu-table">
-        <thead>
-          <tr>
-            <th>Name</th>
-            <th>Category</th>
-            <th>Price</th>
-            <th>Inventory</th>
-            <th>Entree?</th>
-          </tr>
-        </thead>
-        <tbody>
-          {menuItems
-            .filter((item) => item.category === activeTab)
-            .map((item) => (
-              <tr
-                key={item.name}
-                className={selectedItem?.name === item.name ? 'selected' : ''}
-                onClick={() => handleSelectItem(item)}
-              >
-                <td>{item.name}</td>
-                <td>{item.category}</td>
-                <td>{item.price}</td>
-                <td>{item.count}</td>
-                <td>{item.type === true ? 't' : item.type === false ? 'f' : ''}</td>
-              </tr>
-            ))}
-        </tbody>
-      </table>
-
-      {/* Modal */}
-      {modalVisible && (
-        <>
-          <div className="overlay" onClick={() => setModalVisible(false)} />
-          <Modal
-            onClose={() => setModalVisible(false)}
-            onSave={handleSaveItem}
-            onConfirmRemove={() => handleSaveItem(selectedItem!)} // for removing item
-            initialData={(modalAction === 'update' || modalAction === 'remove') && selectedItem ? selectedItem : undefined}
-            action={modalAction}
-          />
-        </>
-      )}
-    </div>
-  );
-}
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\app\(auth)\admin\update-inventory\update-inventory.css
-
-/* Update Inventory Page Styles */
-
-
-/* Buttons Above Table */
-.button-group {
-  display: flex;
-  gap: 20px;
-  margin-bottom: 20px;
-  justify-content: center;
-}
-
-button {
-  padding: 10px 20px;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  font-size: 16px;
-  transition: background-color 0.3s ease;
-}
-
-button:hover {
-  opacity: 0.8;
-}
-
-.btn-add {
-  background-color: #4CAF50;
-  color: white;
-}
-
-.btn-add:hover {
-  background-color: #45a049;
-}
-
-.btn-update {
-  background-color: #ff9800;
-  color: white;
-}
-
-.btn-update:hover {
-  background-color: #f57c00;
-}
-
-.btn-remove {
-  background-color: #f44336;
-  color: white;
-}
-
-.btn-remove:hover {
-  background-color: #d32f2f;
-}
-
-/* Table Styles */
-.menu-table {
-  width: 100%;
-  border-collapse: collapse;
-  margin-top: 20px;
-  margin-bottom: 40px;
-}
-
-.menu-table th,
-.menu-table td {
-  padding: 12px 15px;
-  text-align: center;
-  border: 1px solid #ddd;
-}
-
-.menu-table th {
-  background-color: #4CAF50;
-  color: white;
-}
-
-.menu-table tbody tr:nth-child(even) {
-  background-color: #f9f9f9;
-}
-
-.menu-table tbody tr:hover {
-  background-color: #f1f1f1;
-  cursor: pointer;
-}
-
-/* Highlight the selected row */
-.menu-table tbody tr.selected {
-  background-color: #333;
-  color: white;
-}
-/* Add this to your CSS file */
-.selected {
-  background-color: #4caf50; /* Highlight color for selected row */
-  color: white; /* Text color for selected row */
-}
-
-/* Modal Styles */
-.modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1050; /* Make sure modal stays on top */
-}
-
-.modal-container {
-  background-color: white;
-  padding: 30px;
-  border-radius: 10px;
-  width: 400px;
-  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
-}
-
-.modal h2 {
-  margin-bottom: 20px;
-}
-
-.modal .form-group {
-  margin-bottom: 15px;
-}
-
-.modal label {
-  display: block;
-  margin-bottom: 5px;
-  font-weight: bold;
-}
-
-.modal input[type="text"],
-.modal input[type="number"],
-.modal input[type="checkbox"] {
-  width: 100%;
-  padding: 10px;
-  font-size: 14px;
-  border: 1px solid #ddd;
-  border-radius: 5px;
-  margin-top: 5px;
-}
-
-.modal input[type="checkbox"] {
-  width: auto;
-}
-
-.modal-actions {
-  display: flex;
-  gap: 20px;
-  justify-content: center;
-}
-
-.modal-actions button {
-  padding: 10px 20px;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  font-size: 16px;
-}
-
-.modal-actions button:hover {
-  opacity: 0.8;
-}
-
-.modal-actions button:first-child {
-  background-color: #4CAF50;
-  color: white;
-}
-
-.modal-actions button:last-child {
-  background-color: #f44336;
-  color: white;
-}
-
-/* Overlay to grey out background */
-.overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5); /* Grey overlay */
-  z-index: 1040; /* Ensure overlay is beneath the modal */
-}
-/* Modal Overlay */
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 9999;
-}
-
-/* Modal */
-.modal {
-  background: #fff;
-  padding: 20px;
-  border-radius: 8px;
-  width: 400px;
-  max-width: 100%;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-}
-
-/* Close Button */
-.close-btn {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  background: none;
-  border: none;
-  font-size: 24px;
-  cursor: pointer;
-}
-
-/* Form Fields */
-input {
-  width: 100%;
-  padding: 8px;
-  margin: 8px 0;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-}
-
-button:hover {
-  background-color: #0056b3;
-}
-
-button:disabled {
-  background-color: #ccc;
-  cursor: not-allowed;
-}
-
-form {
-  display: flex;
-  flex-direction: column;
-}
-
-/* Centering the tab buttons and action buttons */
-.tab-navigation,
-.button-group {
-  display: flex;
-  justify-content: center;
-  margin-bottom: 20px;
-}
-
-/* Styling for the tab buttons */
-.tab-navigation button {
-  background-color: #007bff; /* Primary color */
-  color: white;
-  border: none;
-  padding: 10px 20px;
-  margin: 0 5px;
-  border-radius: 5px;
-  cursor: pointer;
-  transition: background-color 0.3s;
-}
-
-.tab-navigation button.active {
-  background-color: #0056b3; /* Darker shade for active tab */
-}
-
-.tab-navigation button:hover {
-  background-color: #0056b3;
-}
-
-/* Styling for the action buttons (Add, Update, Remove) */
-.button-group .btn-add {
-  background-color: #28a745; /* Green for add */
-  color: white;
-  border: none;
-  padding: 10px 15px;
-  margin: 0 5px;
-  border-radius: 5px;
-  cursor: pointer;
-  transition: background-color 0.3s;
-}
-
-.button-group .btn-update {
-  background-color: #ffc107; /* Yellow for update */
-  color: black;
-  border: none;
-  padding: 10px 15px;
-  margin: 0 5px;
-  border-radius: 5px;
-  cursor: pointer;
-  transition: background-color 0.3s;
-}
-
-.button-group .btn-remove {
-  background-color: #dc3545; /* Red for remove */
-  color: white;
-  border: none;
-  padding: 10px 15px;
-  margin: 0 5px;
-  border-radius: 5px;
-  cursor: pointer;
-  transition: background-color 0.3s;
-}
-
-.button-group .btn-add:hover {
-  background-color: #218838;
-}
-
-.button-group .btn-update:hover {
-  background-color: #e0a800;
-}
-
-.button-group .btn-remove:hover {
-  background-color: #c82333;
-}
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\app\(auth)\admin\page.tsx
-
-'use client';
-
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-
-
-export default function ManagerPage() {
-  const router = useRouter();
-  const [message, setMessage] = useState<string | null>(null);
-
-  const handleButtonClick = (action: string) => {
-    if (action === 'Update Menu Items and Inventory') {
-      router.push('/admin/update-inventory'); // navigate to the new page
-    } 
-    else if (action === 'View Sales Reports') {
-      router.push('/admin/reports'); // navigate to the new page
-    }
-    else if (action === 'Manage Staff'){
-      router.push('/admin/employees');
-    }
-    else {
-      setMessage(`You clicked "${action}"!`);
-      setTimeout(() => setMessage(null), 3000);
-    }
-  };
-  
-
-  return (
-    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-      <h1 className="text-3xl font-bold mb-8">Manager Dashboard</h1>
-
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        <button
-          className="dashboard-card p-4 bg-[var(--panda-red)] text-white rounded-lg shadow hover:bg-red-600"
-          onClick={() => handleButtonClick('View Sales Reports')}
-        >
-          View Sales Reports
-        </button>
-
-        <button
-          className="dashboard-card p-4 bg-green-500 text-white rounded-lg shadow hover:bg-green-600"
-          onClick={() => handleButtonClick('Restock Inventory')}
-        >
-          Restock Inventory
-        </button>
-
-        <button
-          className="dashboard-card p-4 bg-blue-500 text-white rounded-lg shadow hover:bg-blue-600"
-          onClick={() => handleButtonClick('Manage Staff')}
-        >
-          Manage Staff
-        </button>
-
-        <button
-          className="dashboard-card p-4 bg-purple-500 text-white rounded-lg shadow hover:bg-purple-600"
-          onClick={() => handleButtonClick('Update Menu Items and Inventory')}
-        >
-          Update Menu Items and Inventory
-        </button>
-
-        <button
-          className="dashboard-card p-4 bg-yellow-500 text-white rounded-lg shadow hover:bg-yellow-600"
-          onClick={() => handleButtonClick('Generate Financial Reports')}
-        >
-          Generate Financial Reports
-        </button>
-
-        {/* <button
-          className="dashboard-card p-4 bg-gray-500 text-white rounded-lg shadow hover:bg-gray-600"
-          onClick={() => handleButtonClick('Update Menu Items')}
-        >
-          Update Menu Items
-        </button> */}
-      </div>
-
-      {message && (
-        <div className="mt-8 p-4 bg-green-100 text-green-800 rounded shadow">
-          {message}
-        </div>
-      )}
-    </div>
-  );
-}
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\app\(auth)\cashier\page.tsx
-
-// client/src/app/(auth)/cashier/page.tsx
-'use client';
-
-import { useState, useEffect } from 'react';
-import OrderList from '@/components/cashier/OrderList';
-import EnhancedCheckout from '@/components/cashier/Checkout';
-import Checkout from '@/components/cashier/Checkout';
-import { MenuItem, Order } from '@/types';
-import { fetchMenuItems } from '@/utils/menuItems'
-import api from "@/lib/api";
-
-export default function CashierPage() {
-  const [orders, setOrders] = useState<Order[]>([]);
-  const [menuItems, setMenuItems] = useState<MenuItem[]>([]);
-  const [activeOrder, setActiveOrder] = useState<Order | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-
-    // Temporary data for testing
-    const dummyData: MenuItem[] = [
-      {
-        id: '41',
-        name: 'Bowl',
-        description: '1 Side & 1 Entree',
-        price: 8.30,
-        category: 'combo',
-        imageUrl: '/images/combos/bowl.png',
-        available: true,
-      },
-      {
-        id: '42',
-        name: 'Plate',
-        description: '1 Side & 2 Entrees',
-        price: 9.80,
-        category: 'combo',
-        imageUrl: '/images/combos/plate.png',
-        available: true,
-      },
-      {
-        id: '43',
-        name: 'Bigger Plate',
-        description: '1 Side & 3 Entrees',
-        price: 11.30,
-        category: 'combo',
-        imageUrl: '/images/combos/biggerPlate.png',
-        available: true,
-      },
-      {
-        id: '1',
-        name: 'Orange Chicken',
-        description: 'Crispy chicken wok-tossed in a sweet and spicy orange sauce',
-        price: 5.00,
-        category: 'entree',
-        imageUrl: '/images/entrees/the_original_orange_chicken.png',
-        available: true,
-      },
-      {
-        id: '2',
-        name: 'Beijing Beef',
-        description: 'Crispy beef wok-tossed with bell peppers and onions',
-        price: 5.00,
-        category: 'entree',
-        imageUrl: '/images/entrees/beijing_beef.png',
-        available: true,
-      },
-      {
-        id: '3',
-        name: 'Black Pepper Chicken',
-        description: 'Marinated chicken, celery, and onions in a bold black pepper sauce',
-        price: 5.00,
-        category: 'entree',
-        imageUrl: '/images/entrees/black_pepper_chicken.png',
-        available: true,
-      },
-      {
-        id: '4',
-        name: 'Black Pepper Sirloin Steak',
-        description: 'Sirloin steak wok-seared with baby broccoli, onions, red bell peppers, and mushrooms in a savory black pepper sauce',
-        price: 6.00,
-        category: 'entree',
-        imageUrl: '/images/entrees/black_pepper_sirloin_steak.png',
-        available: true,
-      },
-      {
-        id: '5',
-        name: 'Broccoli Beef',
-        description: 'Tender beef and fresh broccoli in a ginger soy sauce',
-        price: 5.00,
-        category: 'entree',
-        imageUrl: '/images/entrees/broccoli_beef.png',
-        available: true,
-      },
-      {
-        id: '6',
-        name: 'Beijing Beef',
-        description: 'Crispy beef wok-tossed with bell peppers and onions',
-        price: 5.00,
-        category: 'entree',
-        imageUrl: '/images/entrees/beijing_beef.png',
-        available: true,
-      },
-      {
-        id: '7',
-        name: 'Grilled Teriyaki Chicken',
-        description: 'Grilled Chicken hand-sliced to order and served with teriyaki sauce',
-        price: 5.00,
-        category: 'entree',
-        imageUrl: '/images/entrees/grilled_teriyaki_chicken.png',
-        available: true,
-      },
-      {
-        id: '8',
-        name: 'Honey Sesame Chicken Breast',
-        description: 'Crispy strips of white-meat chicken with veggies ina mildly sweet sauce with organic honey',
-        price: 5.00,
-        category: 'entree',
-        imageUrl: '/images/entrees/honey_sesame_chicken_breast.png',
-        available: true,
-      },
-      {
-        id: '9',
-        name: 'Honey Walnut Shrimp',
-        description: 'Large tempura-battered shrimp, work-tossed in a honey sauce and topped with glazed walnuts',
-        price: 6.00,
-        category: 'entree',
-        imageUrl: '/images/entrees/honey_walnut_shrimp.png',
-        available: true,
-      },
-      {
-        id: '10',
-        name: 'Hot Ones Blazing Bourbon Chicken',
-        description: 'Crispy boneless chicken bites and veggies wok-tossed in an extra spicy and sweet bourbon sauce',
-        price: 5.00,
-        category: 'entree',
-        imageUrl: '/images/entrees/hot_ones_blazing_bourbon_chicken.png',
-        available: true,
-      },
-      {
-        id: '11',
-        name: 'Kung Pao Chicken',
-        description: 'A Sichuan-inspired dish with chicken, peanuts and vegetables, finished with chili pepppers',
-        price: 5.00,
-        category: 'entree',
-        imageUrl: '/images/entrees/kung_pao_chicken.png',
-        available: true,
-      },
-      {
-        id: '12',
-        name: 'Mushroom Chicken',
-        description: 'A delicate combination of chicken, mushrooms and zucchini wok-tossed with a light ginger soy sauce',
-        price: 5.00,
-        category: 'entree',
-        imageUrl: '/images/entrees/mushroom_chicken.png',
-        available: true,
-      },
-      {
-        id: '13',
-        name: 'String Bean Chicken Breast',
-        description: 'Chicken breast, string beans and onions wok-tossed in a mild ginger soy sauce',
-        price: 5.00,
-        category: 'entree',
-        imageUrl: '/images/entrees/string_bean_chicken_breast.png',
-        available: true,
-      },
-      {
-        id: '14',
-        name: 'SweetFire Chicken Breast',
-        description: 'Crispy, white-meat chicken, red bell peppers, onions and pineapples in a bright and sweet chili sauce',
-        price: 5.00,
-        category: 'entree',
-        imageUrl: '/images/entrees/sweetfire_chicken_breast.png',
-        available: true,
-      },
-      {
-        id: '15',
-        name: 'Chow Mein',
-        description: 'Stir-fried wheat noodles with onions and celery',
-        price: 5.00,
-        category: 'side',
-        imageUrl: '/images/sides/chow_mein.png',
-        available: true,
-      },
-      {
-        id: '16',
-        name: 'Fried Rice',
-        description: 'Prepared steamed white rice with soy sauce, eggs, peas, carrots and green onions',
-        price: 5.00,
-        category: 'side',
-        imageUrl: '/images/sides/fried_rice.png',
-        available: true,
-      },
-      {
-        id: '17',
-        name: 'Super Greens',
-        description: 'A healthful medley of broccoli, kale, and cabbage',
-        price: 5.00,
-        category: 'side',
-        imageUrl: '/images/sides/super_greens.png',
-        available: true,
-      },
-      {
-        id: '18',
-        name: 'White Steamed Rice',
-        description: 'White rice',
-        price: 5.00,
-        category: 'side',
-        imageUrl: '/images/sides/white_steamed_rice.png',
-        available: true,
-      },
-      {
-        id: '19',
-        name: 'Apple Pie Roll',
-        description: 'Juicy apples and fall spices in a crispy rolled pastry, finished with cinnamon sugar',
-        price: 2.80,
-        category: 'appetizer',
-        imageUrl: '/images/appetizers/apple_pie_roll.png',
-        available: true,
-      },
-      {
-        id: '20',
-        name: 'Chicken Egg Roll',
-        description: 'Cabbage, carrots, green onions and chicken in a crispy wonton wrapper',
-        price: 2.5,
-        category: 'appetizer',
-        imageUrl: '/images/appetizers/chicken_egg_roll.png',
-        available: true,
-      },
-      {
-        id: '21',
-        name: 'Cream Cheese Rangoon',
-        description: 'Wonton wrappers filled with cream cheese and served with sweet and sour sauce',
-        price: 3.00,
-        category: 'appetizer',
-        imageUrl: '/images/appetizers/cream_cheese_rangoon.png',
-        available: true,
-      },
-      {
-        id: '22',
-        name: 'Veggie Sprint Roll',
-        description: 'Cabbage, celery, carrots, green onions and Chinese noodles in a crispy wonton wrapper',
-        price: 2.00,
-        category: 'appetizer',
-        imageUrl: '/images/appetizers/veggie_spring_roll.png',
-        available: true,
-      },
-      {
-        id: '23',
-        name: 'Barqs Root Beer',
-        description: '',
-        price: 1.50,
-        category: 'drink',
-        imageUrl: '/images/drinks/barqs_root_beer.png',
-        available: true,
-      },
-      {
-        id: '24',
-        name: 'Coca Cola',
-        description: '',
-        price: 1.50,
-        category: 'drink',
-        imageUrl: '/images/drinks/coca_cola.png',
-        available: true,
-      },
-      {
-        id: '25',
-        name: 'Coca Cola Cherry',
-        description: '',
-        price: 1.50,
-        category: 'drink',
-        imageUrl: '/images/drinks/coke_mexico.png',
-        available: true,
-      },
-      {
-        id: '26',
-        name: 'Coke Zero',
-        description: '',
-        price: 1.50,
-        category: 'drink',
-        imageUrl: '/images/drinks/coke_zero.png',
-        available: true,
-      },
-      {
-        id: '27',
-        name: 'Dasani',
-        description: '',
-        price: 1.00,
-        category: 'drink',
-        imageUrl: '/images/drinks/dasani.png',
-        available: true,
-      },
-      {
-        id: '28',
-        name: 'Diet Coke',
-        description: '',
-        price: 1.98,
-        category: 'drink',
-        imageUrl: '/images/drinks/diet_coke.png',
-        available: true,
-      },
-      {
-        id: '29',
-        name: 'Dr Pepper',
-        description: '',
-        price: 1.99,
-        category: 'drink',
-        imageUrl: '/images/drinks/dr_pepper.png',
-        available: true,
-      },
-      {
-        id: '30',
-        name: 'Fanta',
-        description: '',
-        price: 1.50,
-        category: 'drink',
-        imageUrl: '/images/drinks/fanta_orange.png',
-        available: true,
-      },
-      {
-        id: '31',
-        name: 'Fuze Raspberry Iced Tea',
-        description: '',
-        price: 1.50,
-        category: 'drink',
-        imageUrl: '/images/drinks/fize_raspberry_iced_tea.png',
-        available: true,
-      },
-      {
-        id: '32',
-        name: 'Minute Maid Apple Juice',
-        description: '',
-        price: 1.50,
-        category: 'drink',
-        imageUrl: '/images/drinks/minute_maid_apple_juice.png',
-        available: true,
-      },
-      {
-        id: '33',
-        name: 'Minute Maid Lemonade',
-        description: '',
-        price: 1.50,
-        category: 'drink',
-        imageUrl: '/images/drinks/minute_maid_lemonade.png',
-        available: true,
-      },
-      {
-        id: '34',
-        name: 'Mango Tea',
-        description: '',
-        price: 2.00,
-        category: 'drink',
-        imageUrl: '/images/drinks/passion_mango_black_tea.png',
-        available: true,
-      },
-      {
-        id: '35',
-        name: 'Peach Lychee Refresher',
-        description: '',
-        price: 2.00,
-        category: 'drink',
-        imageUrl: '/images/drinks/peach_lychee_flavored_refresher.png',
-        available: true,
-      },
-      {
-        id: '36',
-        name: 'Pomegranate Pineapple Flavored Lemonade',
-        description: '',
-        price: 2.00,
-        category: 'drink',
-        imageUrl: '/images/drinks/pomegranite_pineapple_flavored_lemonade.png',
-        available: true,
-      },
-      {
-        id: '37',
-        name: 'Smartwater',
-        description: '',
-        price: 2.00,
-        category: 'drink',
-        imageUrl: '/images/drinks/smartwater.png',
-        available: true,
-      },
-      {
-        id: '38',
-        name: 'Sprite',
-        description: '',
-        price: 2.00,
-        category: 'drink',
-        imageUrl: '/images/drinks/sprite.png',
-        available: true,
-      },
-      {
-        id: '39',
-        name: 'Watermelon Mange Flavored Refresher',
-        description: '',
-        price: 2.00,
-        category: 'drink',
-        imageUrl: '/images/drinks/watermelon_mango_flavored_refresher.png',
-        available: true,
-      },
-      {
-        id: '40',
-        name: 'Sprite',
-        description: '',
-        price: 2.00,
-        category: 'drink',
-        imageUrl: '/images/drinks/sprite.png',
-        available: true,
-      },
-      
-    ];
-
-  useEffect(() => {
-    const fetchInitialData = async () => {
-      try {
-        /*const [ordersRes, menuRes] = await Promise.all([
-          api.get('/orders/active'),
-          api.get('/menu')
-        ]);
-
-        setOrders(ordersRes.data);
-        setMenuItems(menuRes.data); */
-        //setMenuItems(dummyData);
-        const items = await fetchMenuItems();
-        setMenuItems(items);
-      } catch (error) {
-        console.error('Failed to fetch initial data:', error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    fetchInitialData();
-  }, []);
-
-  const handleCreateOrder = async (order: Partial<Order>) => {
-    try {
-      const response = await api.post('/orders', order);
-      setOrders(prev => [...prev, response.data]);
-      setActiveOrder(response.data);
-    } catch (error) {
-      console.error('Failed to create order:', error);
-    }
-  };
-
-  const handleUpdateOrderStatus = async (orderId: string, status: Order['status']) => {
-    try {
-      await api.put(`/orders/${orderId}/status`, { status });
-      setOrders(prev =>
-        prev.map(order =>
-          order.id === orderId ? { ...order, status } : order
-        )
-      );
-    } catch (error) {
-      console.error('Failed to update order status:', error);
-    }
-  };
-
-  if (isLoading) {
-    return (
-      <div className="flex justify-center items-center h-screen">
-        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[var(--panda-red)]"></div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="p-6">
-      <EnhancedCheckout
-        menuItems={menuItems}
-        onCreateOrder={handleCreateOrder}
-        activeOrder={null}
-      />
-    </div>
-  );
-
-}
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\app\(auth)\login\page.tsx
-
-// client/src/app/(auth)/login/page.tsx
-'use client';
-
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import Image from 'next/image';
-import { api } from '@/lib/api';
-
-interface LoginForm {
-  username: string;
-  password: string;
-}
-
-export default function LoginPage() {
-  const router = useRouter();
-  const [formData, setFormData] = useState<LoginForm>({
-    username: '',
-    password: '',
-  });
-  const [error, setError] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setIsLoading(true);
-    setError('');
-
-    try {
-      const response = await api.post('/auth/login', formData);
-      localStorage.setItem('token', response.data.token);
-      
-      // Redirect based on role
-      if (response.data.role === 'admin') {
-        router.push('/admin');
-      } else {
-        router.push('/cashier');
-      }
-    } catch (err) {
-      setError('Invalid credentials. Please try again.');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  return (
-    <div className="min-h-screen bg-[var(--panda-gray)] flex flex-col justify-center py-12 sm:px-6 lg:px-8">
-      <div className="sm:mx-auto sm:w-full sm:max-w-md">
-        <div className="flex justify-center">
-          <Image
-            src="/images/panda-logo.png"
-            alt="Panda Express Logo"
-            width={100}
-            height={100}
-            className="rounded-full"
-          />
-        </div>
-        <h2 className="mt-6 text-center text-3xl font-extrabold">
-          Sign in to your account
-        </h2>
-      </div>
-
-      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-        <div className="card">
-          <form className="space-y-6" onSubmit={handleSubmit}>
-            {error && (
-              <div className="bg-red-50 border-l-4 border-red-400 p-4 mb-4">
-                <p className="text-red-700">{error}</p>
-              </div>
-            )}
-            
-            <div>
-              <label htmlFor="username" className="block text-sm font-medium">
-                Username
-              </label>
-              <input
-                id="username"
-                type="text"
-                required
-                className="input-field mt-1"
-                value={formData.username}
-                onChange={(e) => setFormData({ ...formData, username: e.target.value })}
-              />
-            </div>
-
-            <div>
-              <label htmlFor="password" className="block text-sm font-medium">
-                Password
-              </label>
-              <input
-                id="password"
-                type="password"
-                required
-                className="input-field mt-1"
-                value={formData.password}
-                onChange={(e) => setFormData({ ...formData, password: e.target.value })}
-              />
-            </div>
-
-            <div>
-              <button 
-                type="submit" 
-                className="btn-primary w-full"
-                disabled={isLoading}
-              >
-                {isLoading ? 'Signing in...' : 'Sign in'}
-              </button>
-            </div>
-          </form>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\app\api\customer-orders\route.ts
-
-// src/app/api/customer-orders/route.ts
-import { NextResponse } from 'next/server';
-import { Pool, PoolConfig } from 'pg';
-import { OrderItem } from '@/types';
-
-const dbConfig: PoolConfig = {
-  user: process.env.POSTGRES_USER || 'team_6b',
-  host: process.env.POSTGRES_HOST || 'csce-315-db.engr.tamu.edu',
-  database: process.env.POSTGRES_DB || 'team_6b_db',
-  password: process.env.POSTGRES_PASSWORD || 'kartana',
-  port: parseInt(process.env.POSTGRES_PORT || '5432'),
-  ssl: {
-    rejectUnauthorized: false
-  }
-};
-
-const pool = new Pool(dbConfig);
-
-interface CustomerOrderRequest {
-  items: OrderItem[];
-  subtotal: number;
-  tax: number;
-  total: number;
-}
-
-export async function POST(req: Request) {
-  const client = await pool.connect();
-  
-  try {
-    const orderData: CustomerOrderRequest = await req.json();
-    
-    await client.query('BEGIN');
-
-    // Group items by type and combine quantities
-    const groupedItems = orderData.items.reduce((acc, item) => {
-      const key = `${item.menuItemId}_${item.category}`;
-      if (!acc[key]) {
-        acc[key] = { ...item, quantity: 0 };
-      }
-      acc[key].quantity += item.quantity;
-      return acc;
-    }, {} as Record<string, OrderItem>);
-
-    // Format order details
-    const orderDetails = {
-      free_items: [
-        { id: 9, name: "Napkins", quantity: 2 },
-        { id: 2, name: "Soy Sauce Packet", quantity: 1 },
-        { id: 5, name: "Fortune Cookies", quantity: 1 },
-        { id: 6, name: "Utensils (Forks)", quantity: 1 },
-        { id: 7, name: "Utensils (Knives)", quantity: 1 },
-        { id: 8, name: "Utensils (Spoons)", quantity: 1 },
-        { id: 12, name: "Takeout Cartons", quantity: 1 }
-      ],
-      entree_side: [] as any[],
-      drink_table: [] as any[]
-    };
-
-    // Insert order
-    const orderResult = await client.query(
-      `INSERT INTO orders (datetime, sale, items) 
-       VALUES (CURRENT_TIMESTAMP, $1, $2::jsonb) 
-       RETURNING id`,
-      [orderData.total, orderDetails]
-    );
-
-    const orderId = orderResult.rows[0].id;
-
-    // Process each grouped item
-    for (const item of Object.values(groupedItems)) {
-      let tableName;
-      switch (item.category) {
-        case 'entree':
-        case 'side':
-          tableName = 'entree_side';
-          orderDetails.entree_side.push({
-            id: parseInt(item.menuItemId),
-            name: item.name.toLowerCase(),
-            quantity: item.quantity
-          });
-          break;
-        case 'drink':
-          tableName = 'drink_table';
-          orderDetails.drink_table.push({
-            id: parseInt(item.menuItemId),
-            name: item.name.toLowerCase(),
-            quantity: item.quantity
-          });
-          break;
-        case 'appetizer':
-          tableName = 'appetizers';
-          break;
-        default:
-          continue;
-      }
-
-      // Update inventory with combined quantity
-      await client.query(
-        `UPDATE ${tableName} 
-         SET inventory = inventory - $1 
-         WHERE id = $2`,
-        [item.quantity, parseInt(item.menuItemId)]
-      );
-
-      // Single insert into order_items for each unique item
-      await client.query(
-        `INSERT INTO order_items (order_id, item_id, item_type) 
-         VALUES ($1, $2, $3)`,
-        [orderId, parseInt(item.menuItemId), tableName]
-      );
-    }
-
-    // Insert free items
-    for (const freeItem of orderDetails.free_items) {
-      await client.query(
-        `INSERT INTO order_items (order_id, item_id, item_type) 
-         VALUES ($1, $2, 'free_items')`,
-        [orderId, freeItem.id]
-      );
-    }
-
-    // Update the order with final details
-    await client.query(
-      `UPDATE orders 
-       SET items = $1::jsonb 
-       WHERE id = $2`,
-      [orderDetails, orderId]
-    );
-
-    await client.query('COMMIT');
-
-    return NextResponse.json({
-      success: true,
-      orderId,
-      message: 'Order processed successfully'
-    });
-
-  } catch (error) {
-    await client.query('ROLLBACK');
-    console.error('Order processing error:', error);
-    return NextResponse.json(
-      { success: false, message: 'Failed to process order' },
-      { status: 500 }
-    );
-  } finally {
-    client.release();
-  }
-}
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\app\api\orders\route.ts
-
-import { NextResponse } from 'next/server';
-import { Pool, PoolConfig } from 'pg';
-import { OrderItem } from '@/types';
-
-const dbConfig: PoolConfig = {
-  user: process.env.POSTGRES_USER || 'team_6b',
-  host: process.env.POSTGRES_HOST || 'csce-315-db.engr.tamu.edu',
-  database: process.env.POSTGRES_DB || 'team_6b_db',
-  password: process.env.POSTGRES_PASSWORD || 'kartana',
-  port: parseInt(process.env.POSTGRES_PORT || '5432'),
-  ssl: {
-    rejectUnauthorized: false
-  }
-};
-
-const pool = new Pool(dbConfig);
-
-async function executeQuery(query: string, params?: any[]) {
-  try {
-    const result = await pool.query(query, params);
-    return result.rows;
-  } catch (error) {
-    console.error('Database query error:', error);
-    throw error;
-  }
-}
-
-interface OrderRequest {
-  items: OrderItem[];
-  subtotal: number;
-  tax: number;
-  tip?: number;
-  total: number;
-}
-
-export async function POST(req: Request) {
-  try {
-    const orderData: OrderRequest = await req.json();
-
-    // Base free items that every order gets
-    const baseOrderItems = {
-      free_items: [
-        { id: 9, name: "Napkins", quantity: 2 },
-        { id: 2, name: "Soy Sauce Packet", quantity: 1 },
-        { id: 5, name: "Fortune Cookies", quantity: 1 },
-        { id: 6, name: "Utensils (Forks)", quantity: 1 },
-        { id: 7, name: "Utensils (Knives)", quantity: 1 },
-        { id: 8, name: "Utensils (Spoons)", quantity: 1 }
-      ],
-      entree_side: orderData.items
-        .filter(item => item.category === 'entree' || item.category === 'side')
-        .map(item => ({
-          id: parseInt(item.menuItemId),
-          name: item.name.toLowerCase(),
-          quantity: item.quantity
-        }))
-    };
-
-    // Add drink_table only if there are drinks in the order
-    const drinkItems = orderData.items.filter(item => item.category === 'drink');
-    if (drinkItems.length > 0) {
-      baseOrderItems['drink_table'] = drinkItems.map(item => ({
-        id: parseInt(item.menuItemId),
-        name: item.name,
-        quantity: item.quantity
-      }));
-    }
-
-    // Add takeout cartons for entrees
-    if (baseOrderItems.entree_side.length > 0) {
-      baseOrderItems.free_items.push({ id: 12, name: "Takeout Cartons", quantity: 1 });
-    }
-
-    // Start transaction
-    await executeQuery('BEGIN');
-
-    try {
-      // Insert main order and return the inserted id
-      const orderResult = await executeQuery(
-        `INSERT INTO orders (datetime, sale, items) 
-         VALUES (CURRENT_TIMESTAMP, $1, $2) 
-         RETURNING id`,
-        [
-          Number(orderData.total.toFixed(2)), // Ensure consistent decimal places
-          JSON.stringify(baseOrderItems)
-        ]
-      );
-
-      const orderId = orderResult[0].id;
-
-      // Insert all items into order_items table
-      for (const item of orderData.items) {
-        let itemType = '';
-        if (item.category === 'entree' || item.category === 'side') {
-          itemType = 'entree_side';
-        } else if (item.category === 'drink') {
-          itemType = 'drink_table';
-        }
-
-        if (itemType) {
-          // Insert item reference
-          await executeQuery(
-            `INSERT INTO order_items (order_id, item_id, item_type) 
-             VALUES ($1, $2, $3)`,
-            [orderId, parseInt(item.menuItemId), itemType]
-          );
-
-          // Update inventory
-          await executeQuery(
-            `UPDATE ${itemType} 
-             SET inventory = inventory - $1 
-             WHERE id = $2`,
-            [item.quantity, parseInt(item.menuItemId)]
-          );
-        }
-      }
-
-      // Insert free items
-      for (const freeItem of baseOrderItems.free_items) {
-        await executeQuery(
-          `INSERT INTO order_items (order_id, item_id, item_type) 
-           VALUES ($1, $2, 'free_items')`,
-          [orderId, freeItem.id]
-        );
-      }
-
-      await executeQuery('COMMIT');
-
-      return NextResponse.json({
-        success: true,
-        orderId,
-        message: 'Order created successfully'
-      });
-
-    } catch (error) {
-      await executeQuery('ROLLBACK');
-      throw error;
-    }
-  } catch (error) {
-    console.error('Order creation error:', error);
-    return NextResponse.json(
-      { success: false, message: 'Failed to create order' },
-      { status: 500 }
-    );
-  }
-}
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\app\api\reports\product-usage\route.ts
-
-// src/app/api/reports/product-usage/route.ts
-import { NextResponse } from 'next/server';
-import { executeQuery } from '@/lib/db';
-
-export async function POST(req: Request) {
-  try {
-    const { startDate, endDate } = await req.json();
-
-    const [entrees, sides, drinks, appetizers] = await Promise.all([
-      executeQuery(`
-        SELECT i.name, COUNT(*) as total_used
-        FROM order_items oi
-        JOIN orders o ON oi.order_id = o.id
-        JOIN entree_side i ON oi.item_id = i.id
-        WHERE o.datetime BETWEEN $1 AND $2
-        AND i.type = true
-        GROUP BY i.name
-        ORDER BY total_used DESC
-      `, [startDate, endDate]),
-
-      executeQuery(`
-        SELECT i.name, COUNT(*) as total_used
-        FROM order_items oi
-        JOIN orders o ON oi.order_id = o.id
-        JOIN entree_side i ON oi.item_id = i.id
-        WHERE o.datetime BETWEEN $1 AND $2
-        AND i.type = false
-        GROUP BY i.name
-        ORDER BY total_used DESC
-      `, [startDate, endDate]),
-
-      executeQuery(`
-        SELECT i.name, COUNT(*) as total_used
-        FROM order_items oi
-        JOIN orders o ON oi.order_id = o.id
-        JOIN drink_table i ON oi.item_id = i.id
-        WHERE o.datetime BETWEEN $1 AND $2
-        GROUP BY i.name
-        ORDER BY total_used DESC
-      `, [startDate, endDate]),
-
-      executeQuery(`
-        SELECT i.name, COUNT(*) as total_used
-        FROM order_items oi
-        JOIN orders o ON oi.order_id = o.id
-        JOIN appetizers i ON oi.item_id = i.id
-        WHERE o.datetime BETWEEN $1 AND $2
-        GROUP BY i.name
-        ORDER BY total_used DESC
-      `, [startDate, endDate])
-    ]);
-
-    return NextResponse.json({
-      entrees: entrees.map(row => ({
-        name: row.name,
-        usage: parseInt(row.total_used)
-      })),
-      sides: sides.map(row => ({
-        name: row.name,
-        usage: parseInt(row.total_used)
-      })),
-      drinks: drinks.map(row => ({
-        name: row.name,
-        usage: parseInt(row.total_used)
-      })),
-      appetizers: appetizers.map(row => ({
-        name: row.name,
-        usage: parseInt(row.total_used)
-      }))
-    });
-
-  } catch (error) {
-    console.error('Error generating product usage report:', error);
-    return NextResponse.json(
-      { error: 'Failed to generate product usage report' },
-      { status: 500 }
-    );
-  }
-}
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\app\api\reports\sales\route.ts
-
-// src/app/api/reports/sales/route.ts
-import { NextResponse } from 'next/server';
-import { executeQuery } from '@/lib/db';
-
-export async function POST(req: Request) {
-    try {
-      const { startDate, endDate } = await req.json();
-  
-      // Validate dates
-      if (!startDate || !endDate) {
-        return NextResponse.json({
-          error: 'Start date and end date are required',
-          data: null
-        }, { status: 400 });
-      }
-  
-      // Get sales data with multiple breakdowns
-      const [salesSummary, itemizedSales, dailySales] = await Promise.all([
-        executeQuery(`
-          SELECT 
-            COALESCE(SUM(sale), 0) as total_sales,
-            COUNT(*) as total_orders,
-            CASE 
-              WHEN COUNT(*) > 0 THEN COALESCE(SUM(sale), 0) / COUNT(*)
-              ELSE 0 
-            END as average_order_value,
-            MIN(sale) as min_order_value,
-            MAX(sale) as max_order_value
-          FROM orders 
-          WHERE datetime BETWEEN $1 AND $2
-        `, [startDate, endDate]),
-  
-        executeQuery(`
-          SELECT 
-            i.name,
-            i.type,
-            COUNT(*) as quantity_sold,
-            COALESCE(SUM(o.sale / NULLIF(
-              (SELECT COUNT(*) FROM order_items oi2 WHERE oi2.order_id = o.id), 0
-            )), 0) as estimated_sales
-          FROM order_items oi
-          JOIN orders o ON oi.order_id = o.id
-          JOIN (
-            SELECT id, name, 'Entree' as type FROM entree_side WHERE type = true
-            UNION ALL
-            SELECT id, name, 'Side' as type FROM entree_side WHERE type = false
-            UNION ALL
-            SELECT id, name, 'Drink' as type FROM drink_table
-            UNION ALL
-            SELECT id, name, 'Appetizer' as type FROM appetizers
-          ) i ON oi.item_id = i.id
-          WHERE datetime BETWEEN $1 AND $2
-          GROUP BY i.name, i.type
-          ORDER BY quantity_sold DESC
-        `, [startDate, endDate]),
-  
-        executeQuery(`
-          SELECT 
-            DATE(datetime) as sale_date,
-            COUNT(*) as num_orders,
-            COALESCE(SUM(sale), 0) as daily_total
-          FROM orders
-          WHERE datetime BETWEEN $1 AND $2
-          GROUP BY DATE(datetime)
-          ORDER BY sale_date
-        `, [startDate, endDate])
-      ]);
-  
-      const responseData = {
-        date_range: {
-          start: startDate,
-          end: endDate
-        },
-        summary: {
-          total_sales: parseFloat(salesSummary[0]?.total_sales ?? '0'),
-          total_orders: parseInt(salesSummary[0]?.total_orders ?? '0'),
-          average_order_value: parseFloat(salesSummary[0]?.average_order_value ?? '0'),
-          min_order_value: parseFloat(salesSummary[0]?.min_order_value ?? '0'),
-          max_order_value: parseFloat(salesSummary[0]?.max_order_value ?? '0')
-        },
-        itemized_sales: itemizedSales.map(row => ({
-          name: row.name,
-          type: row.type,
-          quantity_sold: parseInt(row.quantity_sold),
-          sales: parseFloat(row.estimated_sales)
-        })),
-        daily_sales: dailySales.map(row => ({
-          date: row.sale_date,
-          num_orders: parseInt(row.num_orders),
-          total: parseFloat(row.daily_total)
-        }))
-      };
-  
-      return NextResponse.json(responseData);
-  
-    } catch (error) {
-      console.error('Error generating sales report:', error);
-      return NextResponse.json({
-        error: 'Failed to generate sales report',
-        data: null
-      }, { status: 500 });
-    }
-  }
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\app\api\reports\x-report\route.ts
-
-// src/app/api/reports/x-report/route.ts
-import { NextResponse } from 'next/server';
-import { executeQuery } from '@/lib/db';
-
-export async function GET() {
-  try {
-    const hourly_sales = await executeQuery(`
-      SELECT 
-        EXTRACT(HOUR FROM datetime) as hour,
-        COALESCE(SUM(sale), 0) as total_sales,
-        COUNT(*) as num_orders
-      FROM orders 
-      WHERE DATE(datetime) = CURRENT_DATE 
-      GROUP BY EXTRACT(HOUR FROM datetime) 
-      ORDER BY hour
-    `);
-
-    if (!hourly_sales.length) {
-      // Return structured data even when no sales
-      return NextResponse.json({
-        hourly_sales: [],
-        summary: {
-          total_sales: 0,
-          total_orders: 0,
-          average_order_value: 0
-        }
-      });
-    }
-
-    // Calculate summary statistics
-    const summary = await executeQuery(`
-      SELECT 
-        COALESCE(SUM(sale), 0) as total_sales,
-        COUNT(*) as total_orders,
-        CASE 
-          WHEN COUNT(*) > 0 THEN COALESCE(SUM(sale), 0) / COUNT(*)
-          ELSE 0 
-        END as average_order_value
-      FROM orders 
-      WHERE DATE(datetime) = CURRENT_DATE
-    `);
-
-    const formattedData = {
-      hourly_sales: hourly_sales.map(row => ({
-        hour: parseInt(row.hour),
-        total_sales: parseFloat(row.total_sales),
-        num_orders: parseInt(row.num_orders)
-      })),
-      summary: {
-        total_sales: parseFloat(summary[0].total_sales),
-        total_orders: parseInt(summary[0].total_orders),
-        average_order_value: parseFloat(summary[0].average_order_value)
-      }
-    };
-
-    return NextResponse.json(formattedData);
-
-  } catch (error) {
-    console.error('Error generating X report:', error);
-    return NextResponse.json({
-      error: 'Failed to generate X report',
-      hourly_sales: [],
-      summary: {
-        total_sales: 0,
-        total_orders: 0,
-        average_order_value: 0
-      }
-    }, { status: 500 });
-  }
-}
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\app\api\reports\z-report\route.ts
-
-// src/app/api/reports/z-report/route.ts
-import { NextResponse } from 'next/server';
-import { executeQuery } from '@/lib/db';
-
-export async function GET() {
-  try {
-    const [totals, itemSales, categorySales] = await Promise.all([
-      executeQuery(`
-        SELECT 
-          COALESCE(SUM(sale), 0) as total_sales,
-          COUNT(*) as total_orders,
-          CASE 
-            WHEN COUNT(*) > 0 THEN COALESCE(SUM(sale), 0) / COUNT(*)
-            ELSE 0 
-          END as average_order_value
-        FROM orders 
-        WHERE DATE(datetime) = CURRENT_DATE
-      `),
-
-      // Modified to properly extract and count individual items from combos
-      executeQuery(`
-        WITH RECURSIVE extracted_items AS (
-          -- First, get all regular items and their quantities
-          SELECT 
-            o.id as order_id,
-            o.sale as order_total,
-            LOWER(i->>'name') as item_name,
-            (i->>'quantity')::integer as quantity
-          FROM orders o,
-          jsonb_array_elements(o.items->'entree_side') as i
-          WHERE DATE(o.datetime) = CURRENT_DATE
-          AND NOT (LOWER(i->>'name') LIKE '%plate%' OR LOWER(i->>'name') LIKE '%bowl%')
-
-          UNION ALL
-
-          -- Then extract individual items from combos (plates and bowls)
-          SELECT 
-            o.id as order_id,
-            o.sale / NULLIF(
-              array_length(
-                string_to_array(
-                  regexp_replace(
-                    regexp_replace(LOWER(i->>'name'), '^(bigger plate|plate|bowl)\\s*\\((.*)\\).*$', '\\2'),
-                    '\\s*,\\s*', ','
-                  ),
-                  ','
-                ),
-                1
-              ),
-              0
-            ) as order_total,
-            trim(both ' ' from unnest(
-              string_to_array(
-                regexp_replace(
-                  regexp_replace(LOWER(i->>'name'), '^(bigger plate|plate|bowl)\\s*\\((.*)\\).*$', '\\2'),
-                  '\\s*,\\s*', ','
-                ),
-                ','
-              )
-            )) as item_name,
-            (i->>'quantity')::integer as quantity
-          FROM orders o,
-          jsonb_array_elements(o.items->'entree_side') as i
-          WHERE DATE(o.datetime) = CURRENT_DATE
-          AND (LOWER(i->>'name') LIKE '%plate%' OR LOWER(i->>'name') LIKE '%bowl%')
-
-          UNION ALL
-
-          -- Get drink items
-          SELECT 
-            o.id,
-            o.sale,
-            LOWER(i->>'name') as item_name,
-            (i->>'quantity')::integer as quantity
-          FROM orders o,
-          jsonb_array_elements(o.items->'drink_table') as i
-          WHERE DATE(o.datetime) = CURRENT_DATE
-
-          UNION ALL
-
-          -- Get appetizer items
-          SELECT 
-            o.id,
-            o.sale,
-            LOWER(i->>'name') as item_name,
-            (i->>'quantity')::integer as quantity
-          FROM orders o,
-          jsonb_array_elements(o.items->'appetizers') as i
-          WHERE DATE(o.datetime) = CURRENT_DATE
-        )
-        SELECT 
-          item_name as name,
-          SUM(quantity) as quantity,
-          SUM(order_total * quantity) as estimated_sales
-        FROM extracted_items
-        WHERE item_name IS NOT NULL 
-          AND item_name != ''
-          AND NOT item_name LIKE '%plate%'
-          AND NOT item_name LIKE '%bowl%'
-        GROUP BY item_name
-        ORDER BY SUM(quantity) DESC
-      `),
-
-      // Category summary
-      executeQuery(`
-        WITH RECURSIVE extracted_items AS (
-          -- Same CTE as above for consistency
-          SELECT 
-            o.id as order_id,
-            o.sale as order_total,
-            LOWER(i->>'name') as item_name,
-            (i->>'quantity')::integer as quantity
-          FROM orders o,
-          jsonb_array_elements(o.items->'entree_side') as i
-          WHERE DATE(o.datetime) = CURRENT_DATE
-          AND NOT (LOWER(i->>'name') LIKE '%plate%' OR LOWER(i->>'name') LIKE '%bowl%')
-
-          UNION ALL
-
-          SELECT 
-            o.id as order_id,
-            o.sale / NULLIF(
-              array_length(
-                string_to_array(
-                  regexp_replace(
-                    regexp_replace(LOWER(i->>'name'), '^(bigger plate|plate|bowl)\\s*\\((.*)\\).*$', '\\2'),
-                    '\\s*,\\s*', ','
-                  ),
-                  ','
-                ),
-                1
-              ),
-              0
-            ) as order_total,
-            trim(both ' ' from unnest(
-              string_to_array(
-                regexp_replace(
-                  regexp_replace(LOWER(i->>'name'), '^(bigger plate|plate|bowl)\\s*\\((.*)\\).*$', '\\2'),
-                  '\\s*,\\s*', ','
-                ),
-                ','
-              )
-            )) as item_name,
-            (i->>'quantity')::integer as quantity
-          FROM orders o,
-          jsonb_array_elements(o.items->'entree_side') as i
-          WHERE DATE(o.datetime) = CURRENT_DATE
-          AND (LOWER(i->>'name') LIKE '%plate%' OR LOWER(i->>'name') LIKE '%bowl%')
-
-          UNION ALL
-
-          SELECT 
-            o.id,
-            o.sale,
-            LOWER(i->>'name') as item_name,
-            (i->>'quantity')::integer as quantity
-          FROM orders o,
-          jsonb_array_elements(o.items->'drink_table') as i
-          WHERE DATE(o.datetime) = CURRENT_DATE
-
-          UNION ALL
-
-          SELECT 
-            o.id,
-            o.sale,
-            LOWER(i->>'name') as item_name,
-            (i->>'quantity')::integer as quantity
-          FROM orders o,
-          jsonb_array_elements(o.items->'appetizers') as i
-          WHERE DATE(o.datetime) = CURRENT_DATE
-        )
-        SELECT 
-          CASE
-            WHEN es.type = true THEN 'Entrees'
-            WHEN es.type = false THEN 'Sides'
-            WHEN dt.id IS NOT NULL THEN 'Drinks'
-            WHEN ap.id IS NOT NULL THEN 'Appetizers'
-            ELSE 'Other'
-          END as category,
-          SUM(quantity) as items_sold,
-          SUM(order_total * quantity) as category_sales
-        FROM extracted_items ei
-        LEFT JOIN entree_side es ON LOWER(es.name) = ei.item_name
-        LEFT JOIN drink_table dt ON LOWER(dt.name) = ei.item_name
-        LEFT JOIN appetizers ap ON LOWER(ap.name) = ei.item_name
-        WHERE item_name NOT LIKE '%plate%' AND item_name NOT LIKE '%bowl%'
-        GROUP BY 
-          CASE
-            WHEN es.type = true THEN 'Entrees'
-            WHEN es.type = false THEN 'Sides'
-            WHEN dt.id IS NOT NULL THEN 'Drinks'
-            WHEN ap.id IS NOT NULL THEN 'Appetizers'
-            ELSE 'Other'
-          END
-        ORDER BY items_sold DESC
-      `)
-    ]);
-
-    const responseData = {
-      report_date: new Date().toISOString(),
-      summary: {
-        total_sales: parseFloat(totals[0]?.total_sales ?? '0'),
-        total_orders: parseInt(totals[0]?.total_orders ?? '0'),
-        average_order_value: parseFloat(totals[0]?.average_order_value ?? '0')
-      },
-      items_sold: itemSales.map(row => ({
-        name: row.name,
-        quantity: parseInt(row.quantity),
-        sales: parseFloat(row.estimated_sales)
-      })),
-      category_summary: categorySales.map(row => ({
-        category: row.category,
-        items_sold: parseInt(row.items_sold),
-        sales: parseFloat(row.category_sales)
-      }))
-    };
-
-    return NextResponse.json(responseData);
-
-  } catch (error) {
-    console.error('Error generating Z report:', error);
-    return NextResponse.json({
-      error: 'Failed to generate Z report',
-      report_date: new Date().toISOString(),
-      summary: {
-        total_sales: 0,
-        total_orders: 0,
-        average_order_value: 0
-      },
-      items_sold: [],
-      category_summary: []
-    }, { status: 500 });
-  }
-}
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\app\api\reports\utils.ts
-
-// src/app/api/reports/utils.ts
-import db from '@/server/config/db';
-
-export async function executeQuery(query: string, params?: any[]) {
-  try {
-    const result = await db.query(query, params);
-    return result.rows;
-  } catch (error) {
-    console.error('Database query error:', error);
-    throw error;
-  }
-}
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\app\cart\page.tsx
-
-'use client';
-
-import { MenuItem } from '@/types';
-import React, { useState, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
-import { fetchMenuItems as initialMenuItems } from '@/utils/menuItems';
-
-const MenuPage: React.FC = () => {
-  const router = useRouter();
-  // Keep your existing state variables
-  const [selectedCategory, setSelectedCategory] = useState('combo');
-  const [menuItems, setMenuItems] = useState<MenuItem[]>([]);
-  const [cartItems, setCartItems] = useState<MenuItem[]>([]);
-  const [showModal, setShowModal] = useState(false);
-  const [modalItem, setModalItem] = useState<MenuItem | null>(null);
-  const [selectedSide, setSelectedSide] = useState<MenuItem | null>(null);
-  const [selectedEntrees, setSelectedEntrees] = useState<MenuItem[]>([]);
-  const [showSideModal, setShowSideModal] = useState(false);
-  const [showEntreeModal, setShowEntreeModal] = useState(false);
-  
-
-  // Add new state for order processing
-  const [selectedTipPercent, setSelectedTipPercent] = useState<number | null>(null);
-  const [customTipAmount, setCustomTipAmount] = useState<string>('');
-  const [isProcessingOrder, setIsProcessingOrder] = useState(false);
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    // Call the fetch function and await its result
-    const fetchData = async () => {
-      const items = await initialMenuItems(); // Assuming this fetches the menu items correctly
-      setMenuItems(items); // Set the state with the fetched items
-      setIsLoading(false); // Turn off loading spinner
-    };
-
-    fetchData(); // Call fetchData to execute the async operation
-  }, []);
-
-  const TAX_RATE = 0.0825; // 8.25% tax rate
-
-  // Calculate order totals
-  const subtotal = cartItems.reduce((acc, item) => acc + item.price, 0);
-  const tax = subtotal * TAX_RATE;
-  const tipAmount = selectedTipPercent ? (subtotal * selectedTipPercent) / 100 : 
-                   customTipAmount ? parseFloat(customTipAmount) : 0;
-  const total = subtotal + tax + tipAmount;
-
-  
-
-  // Keep your existing filter functions
-  const sideItems = menuItems.filter(item => item.category === 'side');
-  const entreeItems = menuItems.filter(item => item.category === 'entree' || item.category === 'appetizer');
-  const filteredItems = selectedCategory === 'all'
-    ? menuItems
-    : menuItems.filter(item => item.category === selectedCategory);
-
-    const renderCartItemDetails = (item: MenuItem) => {
-        if (item.category === 'combo') {
-          return (
-            <div className="text-gray-600 text-sm mt-2">
-              <p><strong>Side:</strong> {item.selectedSide ? item.selectedSide.name : 'None'}</p>
-              <p><strong>Entrees:</strong> {item.selectedEntrees && item.selectedEntrees.length > 0
-                ? item.selectedEntrees.map(entree => entree.name).join(', ')
-                : 'None'}
-              </p>
-            </div>
-          );
-        }
-        return null;
-      };
-
-      // Handle bowl, plate, and bigger plate orders
-  const orderBowl = () => {
-    openModal({
-      id: 'bowl',
-      name: 'Bowl',
-      description: '1 Side & 1 Entree',
-      price: 8.30,
-      category: 'combo',
-      imageUrl: '/images/combos/bowl.png',
-      available: true,
-    });
-  };
-
-  const orderPlate = () => {
-    openModal({
-      id: 'plate',
-      name: 'Plate',
-      description: '1 Side & 2 Entrees',
-      price: 9.80,
-      category: 'combo',
-      imageUrl: '/images/combos/plate.png',
-      available: true,
-    });
-  };
-
-  const orderBiggerPlate = () => {
-    openModal({
-      id: 'biggerPlate',
-      name: 'Bigger Plate',
-      description: '1 Side & 3 Entrees',
-      price: 11.30,
-      category: 'combo',
-      imageUrl: '/images/combos/biggerPlate.png',
-      available: true,
-    });
-  };
-
-    // Remove item from cart
-  const removeFromCart = (index: number) => {
-    const updatedItems = [...cartItems];
-    updatedItems.splice(index, 1);
-    setCartItems(updatedItems);
-  };
-
-  const handleSideSelect = (side: MenuItem) => {
-    setSelectedSide(side);
-    setShowSideModal(false);
-  };
-
-  const handleEntreeSelect = (entree: MenuItem) => {
-    if (modalItem?.name === 'Bowl' && selectedEntrees.length < 1) {
-      setSelectedEntrees([entree]);
-    } else if (modalItem?.name === 'Plate' && selectedEntrees.length < 2) {
-      setSelectedEntrees([...selectedEntrees, entree]);
-    } else if (modalItem?.name === 'Bigger Plate' && selectedEntrees.length < 3) {
-      setSelectedEntrees([...selectedEntrees, entree]);
-    }
-    
-    if (
-      (modalItem?.name === 'Bowl' && selectedEntrees.length === 0) ||
-      (modalItem?.name === 'Plate' && selectedEntrees.length === 1) ||
-      (modalItem?.name === 'Bigger Plate' && selectedEntrees.length === 2)
-    ) {
-      setShowEntreeModal(false);
-    }
-  };
-
-
-  // Handle modal opening and closing
-  const openModal = (item: MenuItem) => {
-    setModalItem(item);
-    setSelectedSide(null);
-    setSelectedEntrees([]);
-    setShowModal(true);
-  };
-
-  const closeModal = () => {
-    setModalItem(null);
-    setSelectedSide(null);
-    setSelectedEntrees([]);
-    setShowModal(false);
-  };  
-  
-    // Modify the handleCheckout function
-  const handleCheckout = async () => {
-    if (cartItems.length === 0) {
-      alert('Your cart is empty');
-      return;
-    }
-
-    setIsProcessingOrder(true);
-
-    try {
-      // Format cart items for the API
-      const formattedItems = cartItems.flatMap(item => {
-        if (item.category === 'combo') {
-          // Handle combo items
-          const entrées = item.selectedEntrees?.map(entree => ({
-            menuItemId: entree.id,
-            name: entree.name.toLowerCase(),
-            quantity: 1,
-            price: item.price / (item.selectedEntrees?.length || 1), // Split combo price
-            category: 'entree'
-          }));
-
-          const side = item.selectedSide ? [{
-            menuItemId: item.selectedSide.id,
-            name: item.selectedSide.name.toLowerCase(),
-            quantity: 1,
-            price: 0, // Side is included in combo price
-            category: 'side'
-          }] : [];
-
-          return [...(entrées || []), ...side];
-        }
-
-        // Handle regular items
-        return {
-          menuItemId: item.id,
-          name: item.name.toLowerCase(),
-          quantity: 1,
-          price: item.price,
-          category: item.category
-        };
-      });
-
-      const orderData = {
-        items: formattedItems,
-        subtotal,
-        tax,
-        tip: tipAmount,
-        total
-      };
-
-      const response = await fetch('/api/customer-orders', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(orderData)
-      });
-
-      if (!response.ok) {
-        throw new Error('Failed to process order');
-      }
-
-      const result = await response.json();
-
-      if (result.success) {
-        // Store order details for confirmation page
-        localStorage.setItem('lastOrder', JSON.stringify({
-          orderId: result.orderId,
-          items: cartItems,
-          subtotal,
-          tax,
-          tip: tipAmount,
-          total,
-          timestamp: new Date().toISOString()
-        }));
-
-        // Clear cart and redirect
-        setCartItems([]);
-        router.push(`/order-confirmation/${result.orderId}`);
-      } else {
-        throw new Error(result.message || 'Failed to process order');
-      }
-    } catch (error) {
-      console.error('Checkout error:', error);
-      alert('Failed to process order. Please try again.');
-    } finally {
-      setIsProcessingOrder(false);
-    }
-  };
-
-  // Keep all your existing handlers
-  const addToCart = (item: MenuItem) => {
-    if (item.category === 'combo') {
-      const comboItem = {
-        ...item,
-        selectedSide,
-        selectedEntrees,
-      };
-
-      setCartItems([...cartItems, comboItem]);
-      
-
-    } else {
-      setCartItems([...cartItems, item]);
-    }
-  };
-
-  return (
-    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-
-      <h1 className="text-4xl font-bold text-center mb-8">Our Menu</h1>
-
-      <div className="flex flex-col lg:flex-row gap-8">
-        {/* Menu items grid */}
-        <div className="w-full lg:w-3/4">
-        <div className="flex flex-wrap justify-center gap-4 mb-8">
-            {/* Category buttons */}
-
-            
-                
-            <button 
-              className="btn-primary px-4 py-2 rounded-md bg-[var(--panda-red)] text-white"
-              onClick={() => setSelectedCategory('combo')}
-            >
-              Combos
-            </button>
-            
-            <button 
-              className="btn-primary px-4 py-2 rounded-md bg-[var(--panda-red)] text-white"
-              onClick={() => setSelectedCategory('entree')}
-            >
-              Entrees
-            </button>
-            
-            <button 
-              className="btn-primary px-4 py-2 rounded-md bg-[var(--panda-red)] text-white"
-              onClick={() => setSelectedCategory('side')}
-            >
-              Sides
-            </button>
-            
-            <button 
-              className="btn-primary px-4 py-2 rounded-md bg-[var(--panda-red)] text-white"
-              onClick={() => setSelectedCategory('appetizer')}
-            >
-              Appetizers
-            </button>
-            
-            <button 
-              className="btn-primary px-4 py-2 rounded-md bg-[var(--panda-red)] text-white"
-              onClick={() => setSelectedCategory('drink')}
-            >
-              Drinks
-            </button>
-            
-            <button 
-              className="btn-primary px-4 py-2 rounded-md bg-[var(--panda-red)] text-white"
-              onClick={() => setSelectedCategory('all')}
-            >
-              All Items
-            </button>
-          
-                
-            
-          </div>
-
-          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-  {filteredItems.map(item => (
-    <div key={item.id} className="bg-white rounded-lg shadow-md overflow-hidden flex flex-col h-full">
-      <img src={item.imageUrl} alt={item.name} className="w-full h-48 object-cover" />
-      <div className="p-4 flex flex-col flex-grow justify-between">
-        <div className="min-h-[100px]"> {/* Adjust min height as needed */}
-          <h3 className="text font-bold">{item.name}</h3>
-          <p className="text-red-500 mb-2">{item.description}</p> {/* Full text shown */}
-        </div>
-        <div>
-          <p className="text-[var(--panda-red)] font-bold">${Number(item.price).toFixed(2)}</p>
-          {/* <p className="text-[var(--panda-red)] font-bold">${item.price}</p> */}
-          <button
-            className="bg-[var(--panda-red)] text-white px-4 py-2 rounded-md mt-2 w-full"
-            onClick={() => {
-              if (item.name === 'Bowl') {
-                orderBowl();
-              } else if (item.name === 'Plate') {
-                orderPlate();
-              } else if (item.name === 'Bigger Plate') {
-                orderBiggerPlate();
-              } else {
-                addToCart(item);
-              }
-            }}
-          >
-            {item.category === 'combo' ? 'Create' : 'Add to Cart'}
-          </button>
-        </div>
-      </div>
-    </div>
-  ))}
-</div>
-
-
-        </div>
-
-        {/* Enhanced Checkout column */}
-        <div className="w-full md:w-1/4 mt-8 md:mt-0 md:ml-8">
-          <div className="bg-white rounded-lg shadow-md p-4">
-            <h2 className="text-lg font-bold mb-4">Your Cart</h2>
-            {cartItems.length === 0 ? (
-              <p className="text-gray-500 text-center py-4">Your cart is empty</p>
-            ) : (
-              <>
-                <ul className="mb-4 divide-y divide-gray-200">
-                  {cartItems.map((item, index) => (
-                    <li key={item.id} className="py-4 flex justify-between items-start">
-                      <div className="flex-1">
-                        <h3 className="font-bold">{item.name}</h3>
-                        <p className="text-gray-500"> ${Number(item.price).toFixed(2)}</p>
-                        {/* <p className="text-gray-500">${item.price}</p> */}
-                        {renderCartItemDetails(item)}
-                      </div>
-                      <button
-                        className="text-[var(--panda-red)] hover:text-red-700 ml-2"
-                        onClick={() => removeFromCart(index)}
-                      >
-                        Remove
-                      </button>
-                    </li>
-                  ))}
-                </ul>
-
-                <div className="border-t pt-4">
-                  <div className="flex justify-between mb-2">
-                    <span>Subtotal</span>
-                    <span>${subtotal.toFixed(2)}</span>
-                  </div>
-                  <div className="flex justify-between mb-2">
-                    <span>Tax (8.25%)</span>
-                    <span>${tax.toFixed(2)}</span>
-                  </div>
-
-                  {/* Tip Selection */}
-                  <div className="mb-4">
-                    <p className="text-sm font-medium mb-2">Add Tip</p>
-                    <div className="flex gap-2 mb-2">
-                      {[15, 18, 20].map((percent) => (
-                        <button
-                          key={percent}
-                          onClick={() => {
-                            setSelectedTipPercent(percent);
-                            setCustomTipAmount('');
-                          }}
-                          className={`flex-1 py-1 px-2 rounded text-sm ${
-                            selectedTipPercent === percent
-                              ? 'bg-[var(--panda-red)] text-white'
-                              : 'bg-gray-100 hover:bg-gray-200'
-                          }`}
-                        >
-                          {percent}%
-                        </button>
-                      ))}
-                    </div>
-                    <div className="flex items-center gap-2">
-                      <span className="text-sm">$</span>
-                      <input
-                        type="number"
-                        value={customTipAmount}
-                        onChange={(e) => {
-                          setCustomTipAmount(e.target.value);
-                          setSelectedTipPercent(null);
-                        }}
-                        placeholder="Custom amount"
-                        className="w-full p-2 border rounded text-sm"
-                        min="0"
-                        step="0.01"
-                      />
-                    </div>
-                  </div>
-
-                  <div className="flex justify-between font-bold text-lg border-t pt-4">
-                    <span>Total</span>
-                    <span>${total.toFixed(2)}</span>
-                  </div>
-                </div>
-
-                <button
-                  onClick={handleCheckout}
-                  disabled={isProcessingOrder}
-                  className={`w-full px-4 py-3 rounded-md mt-4 text-white transition-colors
-                    ${isProcessingOrder 
-                      ? 'bg-gray-400 cursor-not-allowed' 
-                      : 'bg-[var(--panda-red)] hover:bg-[var(--panda-dark-red)]'
-                    }`}
-                >
-                  {isProcessingOrder ? 'Processing...' : 'Checkout'}
-                </button>
-              </>
-            )}
-          </div>
-        </div>
-      </div>
-
-      
-      {/* Modal for bowl, plate, and bigger plate orders */}
-      {showModal && modalItem && (
-        <div className="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-75 z-50">
-          <div className="bg-white rounded-lg shadow-md p-8 max-w-md w-full">
-            <h2 className="text-lg font-bold mb-4">{modalItem.name}</h2>
-            <p className="text-gray-500 mb-4">{modalItem.description}</p>
-            <p className="text-[var(--panda-red)] font-bold mb-8">${modalItem.price.toFixed(2)}</p>
-            
-            
-
-            {/* Selected Side Section */}
-            <div className="mb-6">
-                <div className="flex justify-between items-center mb-3">
-                  <h4 className="text-lg font-semibold">Side</h4>
-                  {!selectedSide && (
-                    <button
-                      className="bg-[var(--panda-red)] text-white px-4 py-2 rounded-md text-sm"
-                      onClick={() => setShowSideModal(true)}
-                    >
-                      Choose Side
-                    </button>
-                  )}
-                </div>
-                {selectedSide ? (
-                  <div className="bg-gray-50 rounded-lg p-4 flex items-center">
-                    <img 
-                      src={selectedSide.imageUrl} 
-                      alt={selectedSide.name} 
-                      className="w-24 h-24 object-cover rounded-md"
-                    />
-                    <div className="ml-4 flex-grow">
-                      <h5 className="font-semibold">{selectedSide.name}</h5>
-                      <p className="text-gray-600 text-sm">{selectedSide.description}</p>
-                    </div>
-                    <button
-                      className="text-[var(--panda-white)] hover:text-red-700 text-sm"
-                      onClick={() => {
-                        setSelectedSide(null);
-                        setShowSideModal(true);
-                      }}
-                    >
-                      Change
-                    </button>
-                  </div>
-                ) : (
-                  <div className="bg-gray-50 rounded-lg p-4 text-gray-500 text-center">
-                    No side selected
-                  </div>
-                )}
-              </div>
-
-              <div>
-                <div className="flex justify-between items-center mb-3">
-                  <h4 className="text-lg font-semibold">
-                    Entrees ({selectedEntrees.length}/
-                    {modalItem.name === 'Bowl' ? '1' : 
-                     modalItem.name === 'Plate' ? '2' : '3'})
-                  </h4>
-                  {selectedEntrees.length < (
-                    modalItem.name === 'Bowl' ? 1 : 
-                    modalItem.name === 'Plate' ? 2 : 3
-                  ) && (
-                    <button
-                      className="bg-[var(--panda-red)] text-white px-4 py-2 rounded-md text-sm"
-                      onClick={() => setShowEntreeModal(true)}
-                    >
-                      {selectedEntrees.length === 0 ? 'Choose Entrees' : 'Add Another Entree'}
-                    </button>
-                  )}
-                </div>
-                <div className="space-y-3">
-                  {selectedEntrees.length > 0 ? (
-                    selectedEntrees.map((entree, index) => (
-                      <div key={index} className="bg-gray-50 rounded-lg p-4 flex items-center">
-                        <img 
-                          src={entree.imageUrl} 
-                          alt={entree.name} 
-                          className="w-24 h-24 object-cover rounded-md"
-                        />
-                        <div className="ml-4 flex-grow">
-                          <h5 className="font-semibold">{entree.name}</h5>
-                          <p className="text-gray-600 text-sm">{entree.description}</p>
-                        </div>
-                        <button
-                          className="text-[var(--panda-white)] hover:text-red-700 text-sm"
-                          onClick={() => {
-                            setSelectedEntrees(selectedEntrees.filter((_, i) => i !== index));
-                            setShowEntreeModal(true);
-                          }}
-                        >
-                          Change
-                        </button>
-                      </div>
-                    ))
-                  ) : (
-                    <div className="bg-gray-50 rounded-lg p-4 text-gray-500 text-center">
-                      No entrees selected
-                    </div>
-                  )}
-                </div>
-              </div>
-            
-
-            {/* Confirm/Cancel */}
-            <div className="flex justify-between mt-4">
-              <button
-                className="bg-[var(--panda-red)] text-white px-4 py-2 rounded-md"
-                onClick={() => {
-                  addToCart(modalItem);
-                  closeModal();
-                }}
-              >
-                Add to Cart
-              </button>
-              <button className="text-[var(--panda-white)] hover:text-r-600" onClick={closeModal}>
-                Cancel
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-
-{showSideModal && (
-        <div className="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-75 z-50">
-          <div className="bg-white rounded-lg shadow-md p-8 max-w-4xl w-full">
-            <div className="flex justify-between items-center mb-4">
-              <h2 className="text-2xl font-bold">Choose a Side</h2>
-              <button 
-                className="text-gray-500 hover:text-gray-700"
-                onClick={() => setShowSideModal(false)}
-              >
-                ×
-              </button>
-            </div>
-            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 max-h-[60vh] overflow-y-auto">
-              {sideItems.map(item => (
-                <div 
-                  key={item.id} 
-                  className={`bg-white rounded-lg shadow-md overflow-hidden cursor-pointer border-2 
-                    ${selectedSide?.id === item.id ? 'border-[var(--panda-red)]' : 'border-transparent'}`}
-                  onClick={() => handleSideSelect(item)}
-                >
-                  <img src={item.imageUrl} alt={item.name} className="w-full h-48 object-cover" />
-                  <div className="p-4">
-                    <h3 className="text-lg font-bold">{item.name}</h3>
-                    <p className="text-gray-500 text-sm">{item.description}</p>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-      )}
-      
-      {/* Updated Entree Selection Modal */}
-      {showEntreeModal && (
-        <div className="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-75 z-50">
-          <div className="bg-white rounded-lg shadow-md p-8 max-w-4xl w-full">
-            <div className="flex justify-between items-center mb-4">
-              <div>
-                <h2 className="text-2xl font-bold">Choose your Entrees</h2>
-                <p className="text-gray-500">
-                  Selected: {selectedEntrees.length} / 
-                  {modalItem?.name === 'Bowl' ? '1' : 
-                    modalItem?.name === 'Plate' ? '2' : '3'}
-                </p>
-              </div>
-              <button 
-                className="text-gray-500 hover:text-gray-700"
-                onClick={() => setShowEntreeModal(false)}
-              >
-                ×
-              </button>
-            </div>
-            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 max-h-[60vh] overflow-y-auto">
-              {entreeItems.map(item => (
-                <div 
-                  key={item.id} 
-                  className={`bg-white rounded-lg shadow-md overflow-hidden cursor-pointer border-2 
-                    ${selectedEntrees.some(e => e.id === item.id) ? 'border-[var(--panda-red)]' : 'border-transparent'}`}
-                  onClick={() => handleEntreeSelect(item)}
-                >
-                  <img src={item.imageUrl} alt={item.name} className="w-full h-48 object-cover" />
-                  <div className="p-4">
-                    <h3 className="text-lg font-bold">{item.name}</h3>
-                    <p className="text-gray-500 text-sm">{item.description}</p>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-      )}
-
-    </div>
-  );
-};
-
-export default MenuPage;
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\app\menu\page.tsx
-
-// page.tsx
-'use client';
-
-import { useEffect, useState } from 'react';
-import MenuGrid from '@/components/menu/MenuGrid';
-import { MenuItem } from '@/types';
-import { fetchMenuItems as initialMenuItems } from '@/utils/menuItems';
-
-export default function MenuPage() {
-  const [menuItems, setMenuItems] = useState<MenuItem[]>([]);
-  const [selectedCategory, setSelectedCategory] = useState('all');
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      const items = await initialMenuItems();
-      setMenuItems(items);
-      setIsLoading(false);
-    };
-
-    fetchData();
-  }, []);
-
-  const filteredItems = selectedCategory === 'all'
-    ? menuItems
-    : menuItems.filter(item => item.category === selectedCategory);
-
-  return (
-    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-      <h1 className="text-4xl font-bold text-center mb-8">Our Menu</h1>
-      
-      <div className="flex justify-center space-x-4 mb-8">
-        <button 
-          className="btn-primary px-4 py-2 rounded-md bg-[var(--panda-red)] text-white"
-          onClick={() => setSelectedCategory('combo')}
-        >
-          Combos
-        </button>
-        
-        <button 
-          className="btn-primary px-4 py-2 rounded-md bg-[var(--panda-red)] text-white"
-          onClick={() => setSelectedCategory('entree')}
-        >
-          Entrees
-        </button>
-        
-        <button 
-          className="btn-primary px-4 py-2 rounded-md bg-[var(--panda-red)] text-white"
-          onClick={() => setSelectedCategory('side')}
-        >
-          Sides
-        </button>
-        
-        <button 
-          className="btn-primary px-4 py-2 rounded-md bg-[var(--panda-red)] text-white"
-          onClick={() => setSelectedCategory('appetizer')}
-        >
-          Appetizers
-        </button>
-        
-        <button 
-          className="btn-primary px-4 py-2 rounded-md bg-[var(--panda-red)] text-white"
-          onClick={() => setSelectedCategory('drink')}
-        >
-          Drinks
-        </button>
-        
-        <button 
-          className="btn-primary px-4 py-2 rounded-md bg-[var(--panda-red)] text-white"
-          onClick={() => setSelectedCategory('all')}
-        >
-          All Items
-        </button>
-      </div>
-
-
-      <div className="w-full">
-        {isLoading ? (
-          <div className="flex justify-center items-center h-64">
-            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[var(--panda-red)]"></div>
-          </div>
-        ) : (
-          <MenuGrid items={filteredItems} />
-        )}
-      </div>
-    </div>
-  );
-}
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\app\order-confirmation\[orderId]\page.tsx
-
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\app\globals.css
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* Panda Express Brand Colors */
-:root {
-  --panda-red: #ED1C24;
-  --panda-dark-red: #C41017;
-  --panda-black: #000000;
-  --panda-gold: #C4A484;
-  --panda-light-gold: #D4B494;
-  --panda-cream: #FFF8DC;
-  --panda-white: #FFFFFF;
-  --panda-gray: #F5F5F5;
-  --video-fade-opacity: 0.7;
-}
-
-/* Base Styles */
-@layer base {
-  body {
-    background-color: var(--panda-white);
-    color: var(--panda-black);
-    min-height: 100vh;
-    font-family: sans-serif;
-  }
-
-  h1 {
-    @apply text-3xl font-bold mb-4;
-  }
-
-  h2 {
-    @apply text-2xl font-bold mb-3;
-  }
-
-  h3 {
-    @apply text-xl font-bold mb-2;
-  }
-  
-}
-
-/* High Contrast Mode */
-@layer base {
-  .high-contrast {
-    background-color: #000000 !important;
-    color: #FFFFFF !important;
-  }
-
-  /* Enhanced Text Sizes */
-  .high-contrast h1 {
-    font-size: 8rem !important; /* 56px */
-    line-height: 6rem !important;
-    margin-bottom: 1.5rem !important;
-  }
-
-  .high-contrast h2 {
-    font-size: 5rem !important; /* 44px */
-    line-height: 4.25rem !important;
-    margin-bottom: 1.25rem !important;
-  }
-
-  .high-contrast h3 {
-    font-size: 3rem !important; /* 36px */
-    line-height: 3.5rem !important;
-    margin-bottom: 1rem !important;
-  }
-
-  .high-contrast p {
-    font-size: 2.5rem !important; /* 24px */
-    line-height: 2.75rem !important;
-    margin-bottom: 1.5rem !important;
-  }
-
-  /* Button and Link Text */
-  .high-contrast .btn-primary,
-  .high-contrast .btn-secondary,
-  .high-contrast .nav-link {
-    font-size: 2rem !important; /* 24px */
-    line-height: 2rem !important;
-    padding: 1rem 1.5rem !important;
-  }
-
-  .high-contrast nav {
-    height: 125px !important; /* Increase navbar height */
-    padding: 0 2rem !important; /* Increase padding for more space */
-    padding-top: 1rem !important;
-    
-  }
-
-  .high-contrast button {
-    background-color: #FF0000 !important; /* Bright red for high contrast */
-    color: #FFFFFF !important; /* White text */
-    padding: 1rem 2rem !important; /* Larger padding for better clickability */
-    border-radius: 0.375rem !important; /* Rounded corners */
-    font-weight: bold !important;
-    font-size: 1.5rem !important; /* Increased font size */
-    
-  }
-
-  /* Menu Items and Prices */
-  .high-contrast .text-xl {
-    font-size: 1.75rem !important; /* 28px */
-    line-height: 2.25rem !important;
-  }
-
-  .high-contrast .text-lg {
-    font-size: 1.5rem !important; /* 24px */
-    line-height: 2rem !important;
-  }
-
-  .high-contrast .text-base {
-    font-size: 1.25rem !important; /* 20px */
-    line-height: 1.75rem !important;
-  }
-
-  /* Input Fields */
-  .high-contrast input,
-  .high-contrast select,
-  .high-contrast textarea {
-    font-size: 1.5rem !important; /* 24px */
-    line-height: 2rem !important;
-    padding: 1rem !important;
-  }
-
-  /* Override background colors for sections */
-  .high-contrast .bg-white,
-  .high-contrast .bg-gray-50,
-  .high-contrast .bg-gray-100 {
-    background-color: #000000 !important;
-    color: #FFFFFF !important;
-    
-  }
-
-  
-  /* Text colors */
-  .high-contrast .text-gray-600,
-  .high-contrast .text-gray-700,
-  .high-contrast .text-gray-800,
-  .high-contrast .text-gray-900 {
-    /* color: #FFFFFF !important; */
-    color: #FF1A1A
-  }
-
-  /* Override card backgrounds */
-  .high-contrast .bg-white.rounded-lg,
-  .high-contrast .card {
-    background-color: #000000 !important;
-    color: #FFFFFF !important;
-    border: 10px solid #ff0000 !important; /* Increased border width */
-    padding: 1.5rem !important; /* Increased padding */
-    
-    
-  }
-
-  .high-contrast .grid {
-    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
-  }
-
-  @media (min-width: 640px) {
-    .high-contrast .grid {
-      grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
-    }
-  }
-
-  @media (min-width: 768px) {
-    .high-contrast .grid {
-      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
-    }
-  }
-
-  @media (min-width: 1024px) {
-    .high-contrast .grid {
-      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
-    }
-  }
-
-  /* Increased Grid Gap */
-  .high-contrast .gap-4 {
-    gap: 2rem !important;
-  }
-
-  /* Buttons */
-  .high-contrast .btn-primary {
-    background-color: #000000 !important;
-    color: #ffffff !important;
-    border: 3px solid #FF1A1A !important;
-    font-size: 2rem !important;
-    padding: 1rem 1.5rem !important;
-    line-height: 2rem !important;
-    font-weight: bold;
-    min-height: 3.5rem !important;
-    margin: 0.5rem !important;
-  }
-
-  .high-contrast .btn-primary:hover {
-    background-color: #FF1A1A !important;
-    color: #FFFFFF !important;
-  }
-
-  /* Ensure buttons maintain proper spacing */
-  .high-contrast .flex.gap-4 > * {
-    margin: 0.5rem !important;
-  }
-
-  .high-contrast .btn-secondary {
-    background-color: #000000 !important;
-    color: #FFFFFF !important;
-    border: 3px solid #FFFFFF !important;
-    font-weight: bold;
-    min-height: 3.5rem !important;
-    border-color: #FF1A1A !important;
-  }
-
-  .high-contrast .btn-secondary:hover {
-    background-color: #FFFFFF !important;
-    color: #000000 !important;
-  }
-
-  /* Input fields */
-  .high-contrast .input-field {
-    background-color: #000000 !important;
-    color: #FFFFFF !important;
-    border: 3px solid #FFFFFF !important;
-    min-height: 3.5rem !important;
-  }
-
-  .high-contrast .input-field:focus {
-    border-color: #FF1A1A !important;
-    box-shadow: 0 0 0 3px #FF1A1A !important;
-  }
-
-  .high-contrast .max-w-md {
-    max-width: 600px !important; /* Make modal wider */
-    max-height: 90vh !important; /* Set a max height for the modal (90% of viewport height) */
-    overflow-y: auto !important;
-  }
-
-  /* Navigation */
-  .high-contrast .nav-link {
-    color: #FFFFFF !important;
-    border: 3px solid #FFFFFF !important;
-    border-color: #FF1A1A !important;
-  }
-
-  .high-contrast modal {
-    height: 400px;
-  }
-
-  .high-contrast .nav-link:hover {
-    
-    text-decoration: underline;
-    text-decoration-thickness: 3px !important;
-  }
-
-  /* Tables */
-  .high-contrast .table-header {
-    background-color: #000000 !important;
-    color: #FFFFFF !important;
-    border: 3px solid #FFFFFF !important;
-    font-size: 1.5rem !important;
-  }
-
-  .high-contrast .table-cell {
-    color: #FFFFFF !important;
-    border: 2px solid #FFFFFF !important;
-    font-size: 1.25rem !important;
-    padding: 1rem !important;
-  }
-
-  /* Focus states */
-  .high-contrast *:focus {
-    outline: 10px solid #018737 !important;
-    outline-offset: 4px !important;
-  }
-
-  /* Images */
-  .high-contrast img {
-    opacity: 0.9 !important;
-    filter: contrast(1.2) brightness(1.1);
-  }
-
-  /* Price and accent colors */
-  .high-contrast .text-\[var\(--panda-red\)\] {
-    color: #FF1A1A !important;
-    font-size: 1.5rem !important;
-  }
-
-  /* Spacing Adjustments for Larger Text */
-  .high-contrast .space-y-4 > * + * {
-    margin-top: 1rem !important;
-  }
-
-  .high-contrast .space-x-4 > * + * {
-    margin-left: 1rem !important;
-  }
-}
-
-/* Maintain existing accessibility classes */
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  clip-path: inset(50%);
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-/* Keep existing reduced motion preference */
-@media (prefers-reduced-motion: reduce) {
-  .hero-video-fade {
-    animation: none;
-  }
-}
-
-
-.dropdown-menu {
-  z-index: 9999;
-  position: absolute;
-}
-
-/* Enhanced Text Sizes without color */
-@layer base {
-  
-
-  .text-lg h1 {
-    font-size: 8rem !important; /* 56px */
-    line-height: 6rem !important;
-    margin-bottom: 1.5rem !important;
-  }
-
-  .text-lg h2 {
-    font-size: 5rem !important; /* 44px */
-    line-height: 4.25rem !important;
-    margin-bottom: 1.25rem !important;
-  }
-
-  .text-lg h3 {
-    font-size: 3rem !important; /* 36px */
-    line-height: 3.5rem !important;
-    margin-bottom: 1rem !important;
-  }
-
-  .text-lg p {
-    font-size: 2.5rem !important; /* 24px */
-    line-height: 2.75rem !important;
-    margin-bottom: 1.5rem !important;
-  }
-
-  /* Button and Link Text */
-  .text-lg .btn-primary,
-  .text-lg .btn-secondary,
-  .text-lg .nav-link {
-    font-size: 2rem !important; /* 24px */
-    line-height: 2rem !important;
-    padding: 1rem 1.5rem !important;
-  }
-
-  .text-lg nav {
-    height: 125px !important; /* Increase navbar height */
-    padding: 0 2rem !important; /* Increase padding for more space */
-    padding-top: 1rem !important;
-  }
-
-  /* Input Fields */
-  .text-lg input,
-  .text-lg select,
-  .text-lg textarea {
-    font-size: 1.5rem !important; /* 24px */
-    line-height: 2rem !important;
-    padding: 1rem !important;
-  }
-
-  /* Text Sizes */
-  .text-lg .text-xl {
-    font-size: 1.75rem !important; /* 28px */
-    line-height: 2.25rem !important;
-  }
-
-  .text-lg .text-lg {
-    font-size: 1.5rem !important; /* 24px */
-    line-height: 2rem !important;
-  }
-
-  .text-lg .text-base {
-    font-size: 1.25rem !important; /* 20px */
-    line-height: 1.75rem !important;
-  }
-
-  /* Grid Adjustments */
-  .text-lg .grid {
-    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
-  }
-
-  @media (min-width: 640px) {
-    .text-lg .grid {
-      grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
-    }
-  }
-
-  @media (min-width: 768px) {
-    .text-lg .grid {
-      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
-    }
-  }
-
-  @media (min-width: 1024px) {
-    .text-lg .grid {
-      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
-    }
-  }
-
-
-  /* Increased Grid Gap */
-  .text-lg .gap-4 {
-    gap: 2rem !important;
-  }
-
-  /* Button Sizing */
-  .text-lg .btn-primary {
-    font-size: 2rem !important;
-    padding: 1rem 1.5rem !important;
-    line-height: 2rem !important;
-    font-weight: bold;
-    min-height: 3.5rem !important;
-    margin: 0.5rem !important;
-  }
-
-  /* Input fields */
-  .text-lg .input-field {
-    min-height: 3.5rem !important;
-  }
-
-  .text-lg .max-w-md {
-    max-width: 600px !important; /* Make modal wider */
-    max-height: 90vh !important; /* Set a max height for the modal (90% of viewport height) */
-    overflow-y: auto !important;
-  }
-
-  /* Tables */
-  .text-lg .table-header {
-    font-size: 1.5rem !important;
-  }
-
-  .text-lg .table-cell {
-    font-size: 1.25rem !important;
-    padding: 1rem !important;
-  }
-
-  /* Spacing Adjustments for Larger Text */
-  .text-lg .space-y-4 > * + * {
-    margin-top: 1rem !important;
-  }
-
-  .text-lg .space-x-4 > * + * {
-    margin-left: 1rem !important;
-  }
-}
-
-
-
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\app\layout.tsx
-
-// client/src/app/layout.tsx
-import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
-import { LanguageProvider } from '@/context/LanguageContext';
-import Navbar from '@/components/layout/Navbar';
-import AIChat from '@/components/chat/AIChat';
-import './globals.css';
-
-const inter = Inter({ subsets: ['latin'] });
-
-export const metadata: Metadata = {
-  title: 'Panda Express POS',
-  description: 'Point of Sale System for Panda Express',
-};
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <html lang="en">
-      <body className={inter.className}>
-        <LanguageProvider>
-          <Navbar />
-          <main className="min-h-[calc(100vh-64px)]">
-            {children}
-          </main>
-          <AIChat />
-        </LanguageProvider>
-      </body>
-    </html>
-  );
-}
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\app\page.tsx
-
-// client/src/app/page.tsx
-'use client';
-
-import { useState, useEffect } from 'react';
-import Link from 'next/link';
-import Image from 'next/image';
-import { useLanguage } from '../context/LanguageContext';
-import { ArrowRight, Clock, ShoppingBag, Utensils, Search } from 'lucide-react';
-import ScreenMagnifier from '../components/ScreenMagnifier';
-
-export default function HomePage() {
-  const { translate } = useLanguage();
-  const [isClient, setIsClient] = useState(false);
-  const [magnifierEnabled, setMagnifierEnabled] = useState(false);
-  const [magnification, setMagnification] = useState(2);
-
-  useEffect(() => {
-    setIsClient(true);
-  }, []);
-
-  const features = [
-    {
-      icon: Clock,
-      title: translate('Quick & Easy'),
-      description: translate('Order ahead and skip the line'),
-    },
-    {
-      icon: Utensils,
-      title: translate('Fresh & Delicious'),
-      description: translate('Made fresh daily with quality ingredients'),
-    },
-    {
-      icon: ShoppingBag,
-      title: translate('Convenient Pickup'),
-      description: translate('Ready when you are'),
-    },
-  ];
-
-  const popularItems = [
-    {
-      name: translate('Orange Chicken'),
-      image: '/images/entrees/the_original_orange_chicken.png',
-      price: 5.00,
-    },
-    {
-      name: translate('Beijing Beef'),
-      image: '/images/entrees/beijing_beef.png',
-      price: 5.00,
-    },
-    {
-      name: translate('Chow Mein'),
-      image: '/images/sides/chow_mein.png',
-      price: 5.00,
-    },
-  ];
-
-  return (
-    <div className="min-h-screen">
-      {/* Hero Section */}
-      <div className="relative h-[70vh] bg-black overflow-hidden">
-        {/* Video Background - Only rendered on client side */}
-        {isClient && (
-          <div className="absolute inset-0">
-            <video
-              autoPlay
-              loop
-              muted
-              playsInline
-              className="w-full h-full object-cover opacity-70"
-            >
-              <source src="/images/hero-video.mp4" type="video/mp4" />
-              Your browser does not support the video tag.
-            </video>
-            <div className="absolute inset-0 bg-black bg-opacity-40"></div>
-          </div>
-        )}
-        
-        {/* Static Background for Server - Hidden when video loads */}
-        {!isClient && (
-          <div className="absolute inset-0">
-            <Image
-              src="/images/hero-image.jpg"
-              alt="Background"
-              fill
-              className="object-cover opacity-70"
-              priority
-            />
-            <div className="absolute inset-0 bg-black bg-opacity-40"></div>
-          </div>
-        )}
-
-        {/* Content */}
-        <div className="relative z-10 h-full flex flex-col items-center justify-center text-white text-center px-4">
-        <h1 className="text-4xl md:text-6xl font-bold mb-6 text-white text-shadow-lg">
-            {translate('Welcome to Panda Express')}
-            </h1>
-          <p className="text-xl md:text-2xl mb-8 text-shadow">
-            {translate('Experience the bold flavors of American Chinese cuisine')}
-          </p>
-          <Link
-            href="/cart"
-            className="btn-primary text-lg px-8 py-3 flex items-center space-x-2 hover:scale-105 transition-transform duration-200"
-          >
-            <span>{translate('Start Your Order')}</span>
-            <ArrowRight className="h-5 w-5" />
-          </Link>
-        </div>
-      </div>
-
-
-      {/* New Seasonal Item: Moon Cakes Section */}
-      <div className="py-16 bg-white">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <h2 className="text-3xl font-bold text-center mb-8">
-            {translate('New Seasonal Item: Moon Cakes')}
-          </h2>
-          <div className="flex flex-col md:flex-row items-center justify-center space-y-8 md:space-y-0 md:space-x-8">
-            <div className="relative h-64 w-64">
-              <Image
-                src="/images/moon-cake.jpg"
-                alt={translate('Moon Cakes')}
-                fill
-                className="object-cover rounded-lg shadow-md"
-              />
-            </div>
-            <div className="text-center md:text-left">
-              <h3 className="text-2xl font-semibold mb-4">{translate('Celebrate the Mid-Autumn Festival')}</h3>
-              <p className="text-gray-600 mb-6">
-                {translate('Indulge in the rich and delicate flavors of traditional moon cakes, available for a limited time.')}
-              </p>
-              <Link
-                href="/cart"
-                className="btn-primary px-6 py-3 flex items-center space-x-2 hover:scale-105 transition-transform duration-200"
-              >
-                <span>{translate('Order Now')}</span>
-                <ArrowRight className="h-5 w-5" />
-              </Link>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Features Section */}
-      <div className="py-16 bg-white">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-            {features.map((feature, index) => (
-              <div
-                key={index}
-                className="text-center p-6 rounded-lg hover:shadow-lg transition-shadow"
-              >
-                <feature.icon className="h-12 w-12 text-[var(--panda-red)] mx-auto mb-4" />
-                <h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
-                <p className="text-gray-600">{feature.description}</p>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      {/* Popular Items Section */}
-      <div className="py-16 bg-gray-50">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <h2 className="text-3xl font-bold text-center mb-12">
-            {translate('Popular Items')}
-          </h2>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-            {popularItems.map((item, index) => (
-              <div
-                key={index}
-                className="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow"
-              >
-                <div className="relative h-48">
-                  <Image
-                    src={item.image}
-                    alt={item.name}
-                    fill
-                    className="object-cover"
-                  />
-                </div>
-                <div className="p-4">
-                  <h3 className="text-xl font-semibold mb-2">{item.name}</h3>
-                  <p className="text-[var(--panda-red)] font-bold">
-                    ${item.price.toFixed(2)}
-                  </p>
-                </div>
-              </div>
-            ))}
-          </div>
-          <div className="text-center mt-8">
-            <Link href="/menu" className="btn-primary inline-flex items-center space-x-2">
-              <span>{translate('View Full Menu')}</span>
-              <ArrowRight className="h-5 w-5" />
-            </Link>
-          </div>
-        </div>
-      </div>
-
-      
-      {/* Accessibility Features */}
-  <div className="bg-white py-8">
-    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-      <button
-        onClick={() => document.documentElement.classList.toggle('text-lg')}
-        className="mx-2 px-4 py-2 bg-gray-100 rounded-md hover:bg-gray-200"
-      >
-        {translate('Increase Text Size')}
-      </button>
-      <button
-        onClick={() => document.documentElement.classList.toggle('high-contrast')}
-        className="mx-2 px-4 py-2 bg-gray-100 rounded-md hover:bg-gray-200"
-      >
-        {translate('High Contrast')}
-      </button>
-      <button
-        onClick={() => setMagnifierEnabled(!magnifierEnabled)}
-        className={`mx-2 px-4 py-2 rounded-md hover:bg-gray-200 ${
-          magnifierEnabled ? 'bg-blue-100' : 'bg-gray-100'
-        }`}
-        aria-pressed={magnifierEnabled}
-      >
-        <Search className="inline-block mr-2 h-4 w-4" />
-        {translate('Screen Magnifier')}
-      </button>
-      {magnifierEnabled && (
-        <div className="mt-4">
-          <label htmlFor="magnification" className="mr-2">
-            {translate('Magnification Level')}:
-          </label>
-          <input
-            type="range"
-            id="magnification"
-            min="1.5"
-            max="4"
-            step="0.5"
-            value={magnification}
-            onChange={(e) => setMagnification(Number(e.target.value))}
-            className="w-32 align-middle"
-          />
-          <span className="ml-2">{magnification}x</span>
-        </div>
-      )}
-    </div>
-  </div>
-
-  <ScreenMagnifier enabled={magnifierEnabled} magnification={magnification} />
-    </div>
-  );
-}
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\components\admin\Dashboard.tsx
-
-// client/src/components/admin/Dashboard.tsx
-interface DashboardProps {
-    stats: {
-      totalOrders: number;
-      totalRevenue: number;
-      averageOrderValue: number;
-      popularItems: Array<{
-        name: string;
-        quantity: number;
-        revenue: number;
-      }>;
-    };
-  }
-  
-  export default function Dashboard({ stats }: DashboardProps) {
-    return (
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-        <div className="dashboard-card">
-          <h3 className="text-lg font-semibold text-gray-600">Total Orders</h3>
-          <p className="text-3xl font-bold mt-2">{stats.totalOrders}</p>
-        </div>
-  
-        <div className="dashboard-card">
-          <h3 className="text-lg font-semibold text-gray-600">Total Revenue</h3>
-          <p className="text-3xl font-bold mt-2">
-            ${stats.totalRevenue.toFixed(2)}
-          </p>
-        </div>
-  
-        <div className="dashboard-card">
-          <h3 className="text-lg font-semibold text-gray-600">Average Order Value</h3>
-          <p className="text-3xl font-bold mt-2">
-            ${stats.averageOrderValue.toFixed(2)}
-          </p>
-        </div>
-  
-        <div className="dashboard-card">
-          <h3 className="text-lg font-semibold text-gray-600">Most Popular Item</h3>
-          <p className="text-3xl font-bold mt-2">
-            {stats.popularItems[0]?.name || 'N/A'}
-          </p>
-        </div>
-  
-        <div className="col-span-full">
-          <div className="dashboard-card">
-            <h3 className="text-lg font-semibold mb-4">Popular Items</h3>
-            <div className="overflow-x-auto">
-              <table className="min-w-full">
-                <thead>
-                  <tr>
-                    <th className="text-left p-2">Item Name</th>
-                    <th className="text-right p-2">Quantity Sold</th>
-                    <th className="text-right p-2">Revenue</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {stats.popularItems.map((item, index) => (
-                    <tr key={index} className="border-t">
-                      <td className="p-2">{item.name}</td>
-                      <td className="text-right p-2">{item.quantity}</td>
-                      <td className="text-right p-2">${item.revenue.toFixed(2)}</td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\components\admin\SalesChart.tsx
-
-// client/src/components/admin/SalesChart.tsx
-'use client';
-
-import { useState, useEffect } from 'react';
-import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
-import api  from '@/lib/api';
-
-interface SalesChartProps {
-  dateRange: string;
-}
-
-interface ChartData {
-  date: string;
-  sales: number;
-  orders: number;
-}
-
-export default function SalesChart({ dateRange }: SalesChartProps) {
-  const [data, setData] = useState<ChartData[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    const fetchChartData = async () => {
-      try {
-        const response = await api.get(`/admin/sales-chart?range=${dateRange}`);
-        setData(response.data);
-      } catch (error) {
-        console.error('Failed to fetch chart data:', error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    fetchChartData();
-  }, [dateRange]);
-
-  if (isLoading) {
-    return (
-      <div className="flex justify-center items-center h-64">
-        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[var(--panda-red)]"></div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="dashboard-card h-96">
-      <h3 className="text-lg font-semibold mb-4">Sales Overview</h3>
-      <ResponsiveContainer width="100%" height="100%">
-        <LineChart data={data}>
-          <CartesianGrid strokeDasharray="3 3" />
-          <XAxis dataKey="date" />
-          <YAxis yAxisId="left" />
-          <YAxis yAxisId="right" orientation="right" />
-          <Tooltip />
-          <Legend />
-          <Line
-            yAxisId="left"
-            type="monotone"
-            dataKey="sales"
-            stroke="var(--panda-red)"
-            name="Sales ($)"
-          />
-          <Line
-            yAxisId="right"
-            type="monotone"
-            dataKey="orders"
-            stroke="var(--panda-gold)"
-            name="Orders"
-          />
-        </LineChart>
-      </ResponsiveContainer>
-    </div>
-  );
-}
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\components\cashier\Checkout.tsx
-
-import React, { useState } from 'react';
-import { MenuItem, Order, OrderItem } from '@/types';
-import { PlusCircle, Receipt, CreditCard } from 'lucide-react';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/cashier/dialog';
-
-
-interface CheckoutProps {
-  menuItems: MenuItem[];
-  onCreateOrder: (order: Partial<Order>) => void;
-  activeOrder: Order | null;
-}
-
-interface ComboSelection {
-  entrees: MenuItem[];
-  side?: MenuItem;
-  maxEntrees: number;
-}
-
-export default function EnhancedCheckout({ menuItems, onCreateOrder }: CheckoutProps) {
-  const [draftOrders, setDraftOrders] = useState<Array<{
-    id: string;
-    items: OrderItem[];
-    createdAt: Date;
-  }>>([]);
-  
-  const [activeDraftId, setActiveDraftId] = useState<string | null>(null);
-  const [selectedTipPercent, setSelectedTipPercent] = useState<number | null>(null);
-  const [selectedSplit, setSelectedSplit] = useState<number | null>(null); // State for split bill
-  const [customTipAmount, setCustomTipAmount] = useState<string>('');
-  const [completedSplits, setCompletedSplits] = useState<number>(0); // State to track completed parts of split
-  const [isComboModalOpen, setIsComboModalOpen] = useState(false);
-  const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false);
-  const [currentPaymentAmount, setCurrentPaymentAmount] = useState<number>(0);
-  const [processingPayment, setProcessingPayment] = useState(false);
-
-  const [currentComboSelection, setCurrentComboSelection] = useState<ComboSelection>({
-    entrees: [],
-    maxEntrees: 1
-  });
-  const [selectedComboBase, setSelectedComboBase] = useState<MenuItem | null>(null);
-
-
-  const currentItems = draftOrders.find(d => d.id === activeDraftId)?.items || [];
-  
-  const TAX_RATE = 0.0825;
-  const TIP_PERCENTAGES = [15, 18, 20];
-
-  const entrees = menuItems.filter(item => item.category === 'entree');
-  const sides = menuItems.filter(item => item.category === 'side');
-
-  const getComboRequirements = (comboType: string): { maxEntrees: number, name: string } => {
-    switch (comboType.toLowerCase()) {
-      case 'bowl':
-        return { maxEntrees: 1, name: 'Bowl' };
-      case 'plate':
-        return { maxEntrees: 2, name: 'Plate' };
-      case 'bigger plate':
-        return { maxEntrees: 3, name: 'Bigger Plate' };
-      default:
-        return { maxEntrees: 1, name: 'Combo' };
-    }
-  };
-
-  
-  const createNewDraft = () => {
-    const newDraft = {
-      id: `draft-${Date.now()}`,
-      items: [],
-      createdAt: new Date(),
-    };
-    
-    setDraftOrders(prev => [...prev, newDraft]);
-    setActiveDraftId(newDraft.id);
-    
-    // Reset both tip and split bill selections when a new draft is created
-    setSelectedTipPercent(null);
-    setCustomTipAmount('');
-    setSelectedSplit(null); // Reset split bill on new draft
-    setCompletedSplits(0); // Reset completed split count
-  };
-
-  const handleComboClick = (comboItem: MenuItem) => {
-    const { maxEntrees } = getComboRequirements(comboItem.name);
-    setSelectedComboBase(comboItem);
-    setCurrentComboSelection({
-      entrees: [],
-      maxEntrees
-    });
-    setIsComboModalOpen(true);
-  };
-
-  const handleEntreeSelection = (entree: MenuItem) => {
-    setCurrentComboSelection(prev => {
-      const existingIndex = prev.entrees.findIndex(e => e.id === entree.id);
-      
-      if (existingIndex >= 0) {
-        // Remove the entree if it's already selected
-        return {
-          ...prev,
-          entrees: prev.entrees.filter((_, index) => index !== existingIndex)
-        };
-      }
-      
-      if (prev.entrees.length >= prev.maxEntrees) {
-        // Remove the first entree if we're at max capacity
-        return {
-          ...prev,
-          entrees: [...prev.entrees.slice(1), entree]
-        };
-      }
-      
-      // Add the new entree
-      return {
-        ...prev,
-        entrees: [...prev.entrees, entree]
-      };
-    });
-  };
-
-
-
-  const addComboToOrder = () => {
-    if (!activeDraftId || !selectedComboBase || 
-        currentComboSelection.entrees.length !== currentComboSelection.maxEntrees || 
-        !currentComboSelection.side) return;
-
-    const entreeNames = currentComboSelection.entrees.map(e => e.name).join(', ');
-    const comboName = `${selectedComboBase.name} (${entreeNames}, ${currentComboSelection.side.name})`;
-    
-    setDraftOrders(prev => prev.map(draft => {
-      if (draft.id !== activeDraftId) return draft;
-      
-      return {
-        ...draft,
-        items: [...draft.items, {
-          menuItemId: selectedComboBase.id,
-          name: comboName,
-          quantity: 1,
-          price: selectedComboBase.price
-        }]
-      };
-    }));
-
-    setIsComboModalOpen(false);
-    setCurrentComboSelection({ entrees: [], maxEntrees: 1 });
-    setSelectedComboBase(null);
-  };
-
-
-
-
-  const addItem = (menuItem: MenuItem) => {
-    if (menuItem.category === 'combo') {
-      handleComboClick(menuItem);
-      return;
-    }
-
-    if (!activeDraftId) {
-      const newDraft = {
-        id: `draft-${Date.now()}`,
-        items: [{
-          menuItemId: menuItem.id,
-          name: menuItem.name,
-          quantity: 1,
-          price: menuItem.price
-        }],
-        createdAt: new Date(),
-      };
-      setDraftOrders([newDraft]);
-      setActiveDraftId(newDraft.id);
-      return;
-    }
-
-
-    setDraftOrders(prev => prev.map(draft => {
-      if (draft.id !== activeDraftId) return draft;
-      
-      const existingItem = draft.items.find(item => item.menuItemId === menuItem.id);
-      if (existingItem) {
-        return {
-          ...draft,
-          items: draft.items.map(item =>
-            item.menuItemId === menuItem.id
-              ? { ...item, quantity: item.quantity + 1 }
-              : item
-          )
-        };
-      } else {
-        return {
-          ...draft,
-          items: [...draft.items, {
-            menuItemId: menuItem.id,
-            name: menuItem.name,
-            quantity: 1,
-            price: menuItem.price
-          }]
-        };
-      }
-    }));
-  };
-
-  const updateQuantity = (menuItemId: string, quantity: number) => {
-    setDraftOrders(prev => prev.map(draft => {
-      if (draft.id !== activeDraftId) return draft;
-      
-      if (quantity < 1) {
-        return {
-          ...draft,
-          items: draft.items.filter(item => item.menuItemId !== menuItemId)
-        };
-      }
-
-      return {
-        ...draft,
-        items: draft.items.map(item =>
-          item.menuItemId === menuItemId
-            ? { ...item, quantity }
-            : item
-        )
-      };
-    }));
-  };
-
-  const handleTipPercentSelect = (percent: number) => {
-    setSelectedTipPercent(percent);
-    setCustomTipAmount(''); // Reset custom tip amount when a percentage is selected
-  };
-
-  const handleCustomTipChange = (value: string) => {
-    setCustomTipAmount(value);
-    setSelectedTipPercent(null); // Clear percentage tip when custom tip is entered
-  };
-
-  const handleSplitSelect = (num: number) => {
-    setSelectedSplit(num); // Set selected split bill option
-    setCompletedSplits(0); // Reset completed split count when split selection changes
-  };
-
-  const calculateTotals = (items: OrderItem[]) => {
-    const subtotal = items.reduce(
-      (sum, item) => sum + item.price * item.quantity,
-      0
-    );
-    const tax = subtotal * TAX_RATE;
-    
-    let tipAmount = 0;
-    if (selectedTipPercent) {
-      tipAmount = (subtotal * selectedTipPercent) / 100;
-    } else if (customTipAmount) {
-      tipAmount = parseFloat(customTipAmount) || 0;
-    }
-    
-    const total = subtotal + tax + tipAmount;
-    return { subtotal, tax, tipAmount, total };
-  };
-
-  const handleCheckout = (index: number) => {
-    const { total } = calculateTotals(currentItems);
-    const splitAmount = selectedSplit ? total / selectedSplit : total;
-    setCurrentPaymentAmount(splitAmount);
-    setIsPaymentModalOpen(true);
-  };
-
- const processPayment = async () => {
-  setProcessingPayment(true);
-  
-  try {
-    // Calculate all totals
-    const { subtotal, tax, tipAmount, total } = calculateTotals(currentItems);
-
-    // Format items with required category information
-    const formattedItems = currentItems.map(item => {
-      let category;
-      // Determine category based on item type or ID prefixes
-      if (item.menuItemId.startsWith('drink')) {
-        category = 'drink';
-      } else if (item.menuItemId.startsWith('app')) {
-        category = 'appetizer';
-      } else if (item.menuItemId.startsWith('side')) {
-        category = 'side';
-      } else {
-        category = 'entree';
-      }
-
-      return {
-        ...item,
-        category
-      };
-    });
-
-    // Prepare order data
-    const orderData = {
-      items: formattedItems,
-      subtotal,
-      tax,
-      tip: tipAmount,
-      total,
-      status: 'pending'
-    };
-
-    // Send order to backend
-    const response = await fetch('/api/orders', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(orderData),
-    });
-
-    if (!response.ok) {
-      throw new Error('Failed to create order');
-    }
-
-    // Handle successful order
-    const result = await response.json();
-    
-    if (result.success) {
-      // Clear current order
-      setDraftOrders(prev => prev.filter(d => d.id !== activeDraftId));
-      setActiveDraftId(null);
-      
-      // Reset payment-related states
-      setSelectedTipPercent(null);
-      setCustomTipAmount('');
-      setSelectedSplit(null);
-      setCompletedSplits(0);
-      
-      // Show success message or trigger receipt print
-      // You can add success notification here
-    }
-
-  } catch (error) {
-    console.error('Payment processing error:', error);
-    // Show error message to user
-  } finally {
-    setProcessingPayment(false);
-    setIsPaymentModalOpen(false);
-  }
-};
-
-
-
-  return (
-    <div className="flex flex-col h-[calc(100vh-2rem)]">
-      <div className="mb-6 flex gap-2 overflow-x-auto pb-2">
-        <button
-          onClick={createNewDraft}
-          className="flex items-center gap-2 px-4 py-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors"
-        >
-          <PlusCircle className="w-4 h-4" />
-          New Order
-        </button>
-        {draftOrders.map((draft) => (
-          <button
-            key={draft.id}
-            onClick={() => setActiveDraftId(draft.id)}
-            className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-colors ${
-              activeDraftId === draft.id
-                ? 'bg-[var(--panda-red)] text-white'
-                : 'bg-gray-100 hover:bg-gray-200'
-            }`}
-          >
-            <Receipt className="w-4 h-4" />
-            Order ({draft.items.reduce((sum, item) => sum + item.quantity, 0)} items)
-          </button>
-        ))}
-      </div>
-
-      <div className="flex gap-6 flex-1 min-h-0">
-        <div className="flex-1 overflow-y-auto">
-          <h2 className="text-2xl font-bold mb-4">Menu Items</h2>
-          <div className="grid grid-cols-2 md:grid-cols-3 gap-4 pb-6">
-            {menuItems.map((item) => (
-              <button
-                key={item.id}
-                onClick={() => addItem(item)}
-                disabled={!item.available}
-                className={`p-4 rounded-lg text-left transition-all ${
-                  item.available
-                    ? 'bg-white hover:shadow-md'
-                    : 'bg-gray-100 cursor-not-allowed'
-                }`}
-              >
-                <h3 className="font-semibold">{item.name}</h3>
-                <p className="text-sm text-gray-600">${item.price}</p>
-              </button>
-            ))}
-          </div>
-        </div>
-
-        <div className="w-96 bg-white rounded-lg shadow-md p-6 overflow-y-auto">
-          <h2 className="text-2xl font-bold mb-4">
-            {activeDraftId ? 'Current Order' : 'No Active Order'}
-          </h2>
-          {currentItems.length > 0 ? (
-            <>
-              <div className="space-y-4 mb-6">
-                {currentItems.map((item) => (
-                  <div key={item.menuItemId} className="flex items-center justify-between">
-                    <div>
-                      <h3 className="font-semibold">{item.name}</h3>
-                      <p className="text-sm text-gray-600">
-                        ${item.price} each
-                      </p>
-                    </div>
-                    <div className="flex items-center space-x-3">
-                      <button
-                        onClick={() => updateQuantity(item.menuItemId, item.quantity - 1)}
-                        className="text-gray-500 hover:text-gray-700"
-                      >
-                        -
-                      </button>
-                      <span>{item.quantity}</span>
-                      <button
-                        onClick={() => updateQuantity(item.menuItemId, item.quantity + 1)}
-                        className="text-gray-500 hover:text-gray-700"
-                      >
-                        +
-                      </button>
-                    </div>
-                  </div>
-                ))}
-              </div>
-
-              <div className="border-t pt-4 mb-4">
-                <h3 className="font-semibold mb-2">Add Tip</h3>
-                <div className="flex gap-2 mb-3">
-                  {TIP_PERCENTAGES.map((percent) => (
-                    <button
-                      key={percent}
-                      onClick={() => handleTipPercentSelect(percent)}
-                      className={`flex-1 py-2 px-3 rounded-lg text-sm ${
-                        selectedTipPercent === percent
-                          ? 'bg-[var(--panda-red)] text-white'
-                          : 'bg-gray-100 hover:bg-gray-200'
-                      }`}
-                    >
-                      {percent}%
-                    </button>
-                  ))}
-                </div>
-                <div className="flex items-center gap-2">
-                  <span className="text-sm">$</span>
-                  <input
-                    type="number"
-                    value={customTipAmount}
-                    onChange={(e) => handleCustomTipChange(e.target.value)}
-                    placeholder="Custom amount"
-                    className="w-full p-2 border rounded-lg text-sm"
-                    min="0"
-                    step="0.01"
-                  />
-                </div>
-              </div>
-
-              <div className="border-t pt-4 mb-4">
-                <h3 className="font-semibold mb-2">Split Bill</h3>
-                <div className="flex gap-2 mb-3">
-                  {[1, 2, 3, 4].map((num) => (
-                    <button
-                      key={num}
-                      onClick={() => handleSplitSelect(num)}
-                      className={`flex-1 py-2 px-3 rounded-lg text-sm ${
-                        selectedSplit === num
-                          ? 'bg-[var(--panda-red)] text-white'
-                          : 'bg-gray-100 hover:bg-gray-200'
-                      }`}
-                    >
-                      {num}
-                    </button>
-                  ))}
-                </div>
-              </div>
-
-              <div className="border-t pt-4 space-y-2">
-                <div className="flex justify-between">
-                  <span>Subtotal</span>
-                  <span>${calculateTotals(currentItems).subtotal.toFixed(2)}</span>
-                </div>
-                <div className="flex justify-between">
-                  <span>Tax</span>
-                  <span>${calculateTotals(currentItems).tax.toFixed(2)}</span>
-                </div>
-                <div className="flex justify-between">
-                  <span>Tip</span>
-                  <span>${calculateTotals(currentItems).tipAmount.toFixed(2)}</span>
-                </div>
-                <div className="flex justify-between font-bold">
-                  <span>Total</span>
-                  <span>${calculateTotals(currentItems).total.toFixed(2)}</span>
-                </div>
-
-                <div className="space-y-4 mt-6">
-                  {Array(selectedSplit || 1).fill(null).map((_, index) => (
-                    <button
-                      key={index}
-                      onClick={() => handleCheckout(index)}
-                      className={`w-full px-4 py-2 rounded-lg transition-colors ${
-                        index < completedSplits
-                          ? 'bg-gray-300 cursor-not-allowed'
-                          : 'bg-[var(--panda-red)] text-white hover:bg-[var(--panda-dark-red)]'
-                      }`}
-                      disabled={index < completedSplits}
-                    >
-                      Complete Order {selectedSplit && selectedSplit > 1 ? `(${index + 1}/${selectedSplit})` : ''}
-                    </button>
-                  ))}
-                </div>
-              </div>
-            </>
-          ) : (
-            <p className="text-gray-500">
-              {activeDraftId ? 'No items selected' : 'Select "New Order" to begin'}
-            </p>
-          )}
-        </div>
-      </div>
-
-      <Dialog open={isComboModalOpen} onOpenChange={setIsComboModalOpen}>
-      <DialogContent className="sm:max-w-[500px] bg-white">
-        <DialogHeader>
-          <DialogTitle>Customize Your {selectedComboBase?.name}</DialogTitle>
-        </DialogHeader>
-        
-        <div className="mt-4">
-          <div className="mb-6">
-            <h3 className="font-semibold mb-2">
-              Select {currentComboSelection.maxEntrees > 1 ? `Entrees (${currentComboSelection.entrees.length}/${currentComboSelection.maxEntrees})` : 'Entree'}
-            </h3>
-            <div className="grid grid-cols-2 gap-2">
-              {entrees.map((entree) => (
-                <button
-                  key={entree.id}
-                  onClick={() => handleEntreeSelection(entree)}
-                  className={`p-2 rounded-lg text-left ${
-                    currentComboSelection.entrees.some(e => e.id === entree.id)
-                      ? 'bg-[var(--panda-red)] text-white'
-                      : 'bg-gray-100 hover:bg-gray-200'
-                  }`}
-                >
-                  {entree.name}
-                </button>
-              ))}
-            </div>
-          </div>
-
-          <div className="mb-6">
-            <h3 className="font-semibold mb-2">Select Side</h3>
-            <div className="grid grid-cols-2 gap-2">
-              {sides.map((side) => (
-                <button
-                  key={side.id}
-                  onClick={() => setCurrentComboSelection(prev => ({ ...prev, side }))}
-                  className={`p-2 rounded-lg text-left ${
-                    currentComboSelection.side?.id === side.id
-                      ? 'bg-[var(--panda-red)] text-white'
-                      : 'bg-gray-100 hover:bg-gray-200'
-                  }`}
-                >
-                  {side.name}
-                </button>
-              ))}
-            </div>
-          </div>
-
-          <button
-            onClick={addComboToOrder}
-            disabled={
-              currentComboSelection.entrees.length !== currentComboSelection.maxEntrees || 
-              !currentComboSelection.side
-            }
-            className="w-full px-4 py-2 rounded-lg bg-[var(--panda-red)] text-white hover:bg-[var(--panda-dark-red)] disabled:bg-gray-300 disabled:cursor-not-allowed"
-          >
-            Add to Order
-          </button>
-        </div>
-      </DialogContent>
-    </Dialog>
-
-    <Dialog open={isPaymentModalOpen} onOpenChange={setIsPaymentModalOpen}>
-        <DialogContent className="sm:max-w-[400px] bg-white">
-          <DialogHeader>
-            <DialogTitle>Process Payment</DialogTitle>
-          </DialogHeader>
-          
-          <div className="mt-4">
-            <div className="text-center mb-6">
-              <CreditCard className="w-12 h-12 mx-auto mb-4 text-gray-600" />
-              <h3 className="text-2xl font-bold mb-2">
-                ${currentPaymentAmount.toFixed(2)}
-              </h3>
-              {selectedSplit && selectedSplit > 1 && (
-                <p className="text-sm text-gray-600">
-                  Split {completedSplits + 1} of {selectedSplit}
-                </p>
-              )}
-            </div>
-
-            <div className="space-y-4">
-              <button
-                onClick={processPayment}
-                disabled={processingPayment}
-                className="w-full px-4 py-3 rounded-lg bg-[var(--panda-red)] text-white hover:bg-[var(--panda-dark-red)] disabled:bg-gray-300 disabled:cursor-not-allowed flex items-center justify-center"
-              >
-                {processingPayment ? (
-                  <span>Processing...</span>
-                ) : (
-                  <span>Process Payment</span>
-                )}
-              </button>
-
-              <button
-                onClick={() => setIsPaymentModalOpen(false)}
-                disabled={processingPayment}
-                className="w-full px-4 py-3 rounded-lg bg-gray-100 hover:bg-gray-200 disabled:bg-gray-50 disabled:cursor-not-allowed"
-              >
-                Cancel
-              </button>
-            </div>
-          </div>
-        </DialogContent>
-      </Dialog>
-    
-    </div>
-  );
-}
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\components\cashier\dialog.tsx
-
-"use client"
-
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
-
-import { cn } from "@/components/cashier/utils"
-
-const Dialog = DialogPrimitive.Root
-
-const DialogTrigger = DialogPrimitive.Trigger
-
-const DialogPortal = DialogPrimitive.Portal
-
-const DialogClose = DialogPrimitive.Close
-
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-  />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
-
-const DialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
-DialogHeader.displayName = "DialogHeader"
-
-const DialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-)
-DialogFooter.displayName = "DialogFooter"
-
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
-
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
-
-export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogClose,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-}
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\components\cashier\input.tsx
-
-import * as React from "react"
-
-import { cn } from "@/components/cashier/utils"
-
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Input.displayName = "Input"
-
-export { Input }
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\components\cashier\OrderList.tsx
-
-// client/src/components/cashier/OrderList.tsx
-import { Order } from '@/types';
-import { format } from 'date-fns';
-
-interface OrderListProps {
-  orders: Order[];
-  onUpdateStatus: (orderId: string, status: Order['status']) => void;
-  onSelectOrder: (order: Order) => void;
-}
-
-export default function OrderList({ orders, onUpdateStatus, onSelectOrder }: OrderListProps) {
-  const getStatusColor = (status: Order['status']) => {
-    const colors = {
-      pending: 'bg-yellow-100 text-yellow-800',
-      preparing: 'bg-blue-100 text-blue-800',
-      ready: 'bg-green-100 text-green-800',
-      completed: 'bg-gray-100 text-gray-800',
-      cancelled: 'bg-red-100 text-red-800'
-    };
-    return colors[status];
-  };
-
-  const getNextStatus = (currentStatus: Order['status']) => {
-    const statusFlow = {
-      pending: 'preparing',
-      preparing: 'ready',
-      ready: 'completed'
-    } as const;
-
-    return statusFlow[currentStatus as keyof typeof statusFlow] || null;
-  };
-
-  return (
-    <div className="bg-white rounded-lg shadow-md p-6">
-      <h2 className="text-2xl font-bold mb-4">Active Orders</h2>
-      <div className="space-y-4">
-        {orders
-          .filter(order => order.status !== 'completed' && order.status !== 'cancelled')
-          .map((order) => (
-            <div
-              key={order.id}
-              className="border rounded-lg p-4 hover:shadow-md transition-shadow"
-            >
-              <div className="flex justify-between items-start mb-2">
-                <h3 className="font-semibold">Order #{order.orderNumber}</h3>
-                <span className={`px-2 py-1 rounded-full text-xs ${getStatusColor(order.status)}`}>
-                  {order.status}
-                </span>
-              </div>
-
-              <div className="space-y-2 mb-3">
-                {order.items.map((item, index) => (
-                  <div key={index} className="flex justify-between text-sm">
-                    <span>{item.quantity}x {item.name}</span>
-                    <span className="text-gray-600">${(item.price * item.quantity).toFixed(2)}</span>
-                  </div>
-                ))}
-                <div className="border-t pt-2 mt-2">
-                  <div className="flex justify-between text-sm">
-                    <span>Subtotal</span>
-                    <span>${order.subtotal.toFixed(2)}</span>
-                  </div>
-                  <div className="flex justify-between text-sm">
-                    <span>Tax</span>
-                    <span>${order.tax.toFixed(2)}</span>
-                  </div>
-                  <div className="flex justify-between font-semibold">
-                    <span>Total</span>
-                    <span>${order.total.toFixed(2)}</span>
-                  </div>
-                </div>
-              </div>
-
-              <div className="text-sm text-gray-500 mb-3">
-                Created: {format(new Date(order.createdAt), 'MMM d, h:mm a')}
-              </div>
-
-              <div className="flex justify-between items-center">
-                <button
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onSelectOrder(order);
-                  }}
-                  className="text-sm text-[var(--panda-red)] hover:text-[var(--panda-dark-red)]"
-                >
-                  View Details
-                </button>
-                {getNextStatus(order.status) && (
-                  <button
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      const nextStatus = getNextStatus(order.status);
-                      if (nextStatus) {
-                        onUpdateStatus(order.id, nextStatus);
-                      }
-                    }}
-                    className="btn-primary text-sm py-1"
-                  >
-                    Mark as {getNextStatus(order.status)}
-                  </button>
-                )}
-              </div>
-
-              {order.status === 'pending' && (
-                <button
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onUpdateStatus(order.id, 'cancelled');
-                  }}
-                  className="mt-2 text-sm text-red-600 hover:text-red-800"
-                >
-                  Cancel Order
-                </button>
-              )}
-            </div>
-          ))}
-      </div>
-      
-      {orders.filter(order => order.status !== 'completed' && order.status !== 'cancelled').length === 0 && (
-        <div className="text-center text-gray-500 py-8">
-          No active orders
-        </div>
-      )}
-    </div>
-  );
-}
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\components\cashier\utils.tsx
-
-import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
- 
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\components\chat\AIChat.tsx
-
-'use client';
-
-import { useState, useRef, useEffect } from 'react';
-import { MessageSquare, X, Send, Loader } from 'lucide-react';
-import { useLanguage } from '@/context/LanguageContext';
-
-interface Message {
-  role: 'user' | 'assistant';
-  content: string;
-  timestamp: Date;
-}
-
-export default function AIChat() {
-  const [isOpen, setIsOpen] = useState(false);
-  const [messages, setMessages] = useState<Message[]>([
-    {
-      role: 'assistant',
-      content: 'Hello! I can help you with anything about our menu, ingredients, or recommendations!',
-      timestamp: new Date(),
-    },
-  ]);
-  const [inputMessage, setInputMessage] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-  const messagesEndRef = useRef<null | HTMLDivElement>(null);
-  const { translate } = useLanguage();
-
-  const scrollToBottom = () => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  };
-
-  useEffect(() => {
-    scrollToBottom();
-  }, [messages]);
-
-  const handleSend = async () => {
-    if (!inputMessage.trim()) return;
-
-    const userMessage: Message = {
-      role: 'user',
-      content: inputMessage,
-      timestamp: new Date(),
-    };
-
-    setMessages(prev => [...prev, userMessage]);
-    setInputMessage('');
-    setIsLoading(true);
-
-    try {
-      const response = await fetch('http://127.0.0.1:5000/generate', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ prompt: inputMessage }),
-      });
-
-      const data = await response.json();
-
-      const assistantMessage: Message = {
-        role: 'assistant',
-        content: data.response || 'I don’t know',
-        timestamp: new Date(),
-      };
-
-      setMessages(prev => [...prev, assistantMessage]);
-    } catch (error) {
-      const errorMessage: Message = {
-        role: 'assistant',
-        content: 'Sorry, I encountered an error. Please try again.',
-        timestamp: new Date(),
-      };
-      setMessages(prev => [...prev, errorMessage]);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  return (
-    <div className="fixed bottom-4 right-4 z-50">
-      <button
-        onClick={() => setIsOpen(!isOpen)}
-        className={`p-4 rounded-full ${
-          isOpen ? 'bg-red-500' : 'bg-[var(--panda-red)]'
-        } text-white shadow-lg hover:bg-[var(--panda-dark-red)] transition-colors duration-200`}
-        aria-label={isOpen ? 'Close chat' : 'Open chat'}
-      >
-        {isOpen ? <X size={24} /> : <MessageSquare size={24} />}
-      </button>
-
-      {isOpen && (
-        <div className="absolute bottom-16 right-0 w-96 h-[500px] bg-white rounded-lg shadow-xl flex flex-col overflow-hidden border border-gray-200">
-          <div className="bg-[var(--panda-red)] text-white p-4 flex justify-between items-center">
-            <h3 className="font-semibold">Panda Express Assistant</h3>
-            <button
-              onClick={() => setIsOpen(false)}
-              className="text-white hover:text-gray-200"
-            >
-              <X size={20} />
-            </button>
-          </div>
-
-          <div className="flex-1 overflow-y-auto p-4 space-y-4">
-            {messages.map((message, index) => (
-              <div
-                key={index}
-                className={`flex ${
-                  message.role === 'user' ? 'justify-end' : 'justify-start'
-                }`}
-              >
-                <div
-                  className={`max-w-[80%] rounded-lg p-3 ${
-                    message.role === 'user'
-                      ? 'bg-[var(--panda-red)] text-white'
-                      : 'bg-gray-100'
-                  }`}
-                >
-                  <p className="text-sm">{message.content}</p>
-                  <span className="text-xs text-gray-500 mt-1 block">
-                    {new Date(message.timestamp).toLocaleTimeString()}
-                  </span>
-                </div>
-              </div>
-            ))}
-            {isLoading && (
-              <div className="flex justify-start">
-                <div className="bg-gray-100 rounded-lg p-3">
-                  <Loader className="h-5 w-5 animate-spin" />
-                </div>
-              </div>
-            )}
-            <div ref={messagesEndRef} />
-          </div>
-
-          <div className="border-t p-4">
-            <div className="flex space-x-2">
-              <input
-                type="text"
-                value={inputMessage}
-                onChange={(e) => setInputMessage(e.target.value)}
-                onKeyPress={(e) => e.key === 'Enter' && handleSend()}
-                placeholder={translate('Ask me anything about our menu...')}
-                className="flex-1 border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-[var(--panda-red)]"
-              />
-              <button
-                onClick={handleSend}
-                disabled={isLoading}
-                className="bg-[var(--panda-red)] text-white p-2 rounded-lg hover:bg-[var(--panda-dark-red)] disabled:opacity-50"
-              >
-                <Send size={20} />
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\components\chat\route.js
-
-const express = require('express');
-const { ChatOpenAI } = require('@langchain/openai');
-const { OpenAIEmbeddings } = require('@langchain/embeddings');
-const { FAISS } = require('@langchain/vectorstores');
-const pdfParse = require('pdf-parse');
-const fs = require('fs');
-const path = require('path');
-const dotenv = require('dotenv');
-const cors = require('cors');
-
-dotenv.config();
-
-const apiKey = process.env.OPENAI_API_KEY;
-if (!apiKey) {
-  throw new Error('Missing OpenAI API Key');
-}
-
-const app = express();
-app.use(cors());
-app.use(express.json());
-
-const llm = new ChatOpenAI({
-  openAIApiKey: apiKey,
-  modelName: 'gpt-3.5-turbo',
-  temperature: 0.7,
-});
-
-let vectorStore;
-
-// Function to load and embed documents
-async function loadDocumentsAndCreateStore() {
-  const docs = [];
-  const directory = path.join(__dirname, 'documents');
-
-  if (!fs.existsSync(directory)) {
-    console.error('Documents directory does not exist:', directory);
-    return;
-  }
-
-  const files = fs.readdirSync(directory);
-  for (const file of files) {
-    if (file.endsWith('.pdf')) {
-      const filePath = path.join(directory, file);
-      try {
-        const dataBuffer = fs.readFileSync(filePath);
-        const pdfData = await pdfParse(dataBuffer);
-        docs.push(pdfData.text);
-        console.log(`Loaded document: ${file}`);
-      } catch (error) {
-        console.error(`Error loading document ${file}:`, error);
-      }
-    }
-  }
-
-  if (docs.length === 0) {
-    console.error('No documents found to embed.');
-    return;
-  }
-
-  const embeddings = new OpenAIEmbeddings({ openAIApiKey: apiKey });
-  vectorStore = await FAISS.fromTexts(docs, embeddings);
-  console.log('Vector store created successfully');
-}
-
-// Function to retrieve the most relevant document chunk
-async function retrieveRelevantDocument(query) {
-  if (!vectorStore) {
-    console.error('Vector store is not initialized');
-    return null;
-  }
-
-  const results = await vectorStore.similaritySearch(query, 3); // Get top 3 relevant chunks
-  return results.map(result => result.text).join('\n');
-}
-
-// Function to get a response from OpenAI using the retrieved documents
-async function getResponse(prompt) {
-  const context = await retrieveRelevantDocument(prompt);
-  
-  if (!context) {
-    return 'I don’t know';
-  }
-
-  const augmentedPrompt = `Based on the following information, answer the query:\n\n${context}\n\nQuery: ${prompt}`;
-  try {
-    const response = await llm.call(augmentedPrompt);
-    return response.trim();
-  } catch (error) {
-    console.error('Error getting response from OpenAI:', error);
-    return 'I don’t know';
-  }
-}
-
-// Endpoint to handle user queries
-app.post('/generate', async (req, res) => {
-  const { prompt } = req.body;
-  if (!prompt) {
-    return res.status(400).json({ error: 'Prompt is required' });
-  }
-
-  try {
-    const response = await getResponse(prompt);
-    return res.json({ response });
-  } catch (error) {
-    console.error('Error:', error.message);
-    return res.status(500).json({ error: error.message });
-  }
-});
-
-// Load documents and create vector store on startup
-(async () => {
-  await loadDocumentsAndCreateStore();
-})();
-
-const PORT = process.env.PORT || 5001;
-app.listen(PORT, () => {
-  console.log(`Server is running on http://127.0.0.1:${PORT}`);
-});
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\components\layout\LanguageSelector.tsx
-
-import React from 'react';
-import { Globe } from 'lucide-react';
-import GoogleTranslate from '../GoogleTranslate';
-
-export default function LanguageSelector() {
-  return (
-    <div className="flex items-center gap-2 px-3 py-1.5 bg-white rounded-lg shadow-sm 
-                    hover:shadow-md transition-all duration-200 border border-gray-200">
-      <Globe className="h-4 w-4 text-[var(--panda-red)]" />
-      <GoogleTranslate />
-    </div>
-  );
-}
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\components\layout\LoginButton.tsx
-
-// client/src/components/layout/LoginButton.tsx
-'use client';
-
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { UserCircle, LogOut } from 'lucide-react';
-
-export default function LoginButton() {
-  const router = useRouter();
-  const [isOpen, setIsOpen] = useState(false);
-
-  // In a real app, this would check a global auth state
-  const isAuthenticated = typeof window !== 'undefined' && localStorage.getItem('token');
-
-  const handleLogout = () => {
-    localStorage.removeItem('token');
-    router.push('/');
-    setIsOpen(false);
-  };
-
-  return (
-    <div className="relative">
-      {isAuthenticated ? (
-        <>
-          <button
-            onClick={() => setIsOpen(!isOpen)}
-            className="flex items-center space-x-2 text-gray-700 hover:text-gray-900"
-          >
-            <UserCircle className="h-6 w-6" />
-            <span>Account</span>
-          </button>
-          
-          {isOpen && (
-            <div className="absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5">
-              <div className="py-1">
-                <button
-                  onClick={handleLogout}
-                  className="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
-                >
-                  <LogOut className="h-4 w-4 mr-2" />
-                  Sign out
-                </button>
-              </div>
-            </div>
-          )}
-        </>
-      ) : (
-        <button
-          onClick={() => router.push('/login')}
-          className="btn-primary flex items-center space-x-2"
-        >
-          <UserCircle className="h-6 w-6" />
-          <span>Login</span>
-        </button>
-      )}
-    </div>
-  );
-}
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\components\layout\Navbar.tsx
-
-'use client';
-
-import Link from 'next/link';
-import Image from 'next/image';
-import { usePathname } from 'next/navigation';
-import { useState, useEffect } from 'react';
-import LoginButton from './LoginButton';
-import Weather from './Weather';
-import LanguageSelector from './LanguageSelector';
-import { useLanguage } from '@/context/LanguageContext';
-import { Users, Calculator, ChevronDown } from 'lucide-react'; // Import icons
-import { Search } from 'lucide-react'; // Import the magnifier icon
-import ScreenMagnifier from '../../components/ScreenMagnifier';
-
-
-export default function Navbar() {
-  const pathname = usePathname();
-  const { translate } = useLanguage();
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const [magnifierEnabled, setMagnifierEnabled] = useState(false);
-  const [magnification, setMagnification] = useState(1.5);
-  const [isAccessibilityDropdownOpen, setIsAccessibilityDropdownOpen] = useState(false);
-  const [mousePosition, setMousePosition] = useState<{ x: number; y: number }>({ x: 0, y: 0 });
-  const [selectedOption, setSelectedOption] = useState<null | 'high-contrast' | 'text-lg' | 'magnifier' | 'all'>(null);
-
-
-  const handleMouseMove = (event: React.MouseEvent) => {
-    setMousePosition({
-      x: event.clientX,
-      y: event.clientY,
-    });
-  };
-
-  useEffect(() => {
-    if (magnifierEnabled) {
-      // Apply the scale transformation based on the magnification value
-      document.body.style.transform = `scale(${magnification})`
-      document.body.style.transformOrigin = 'top left'; // Keep zoom anchored at the top left
-      document.body.style.transition = 'transform 0.3s ease'; // Smooth zoom transition
-    } else {
-      // Reset the transform when magnifier is disabled
-      document.body.style.transform = 'none';
-    }
-  }, [magnifierEnabled, magnification]);
-
-
-  // Function to toggle high contrast mode
-  const toggleHighContrastMode = () => {
-    document.documentElement.classList.toggle('high-contrast');
-  };
-
-  // Function to toggle enlarged text
-  const toggleEnlargedText = () => {
-    document.documentElement.classList.toggle('text-lg');
-  };
-
-  // Function to enable all accessibility features
-  const enableAllAccessibilityFeatures = () => {
-    toggleHighContrastMode();
-    toggleEnlargedText();
-    
-  };
-
-  const toggleAccessibilityDropdown = () => {
-    setIsAccessibilityDropdownOpen(!isAccessibilityDropdownOpen);
-  };
-
-  
-  return (
-    <nav className="bg-white shadow-lg border-b-4 border-[var(--panda-red)]" onMouseMove={handleMouseMove}>
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="flex justify-between h-16 items-center">
-          {/* Logo Section */}
-          <div className="flex items-center">
-            <Link href="/" className="flex items-center space-x-3">
-              <div className="relative w-10 h-10">
-                <Image
-                  src="/images/panda-logo.png"
-                  alt="Panda Express"
-                  fill
-                  className="object-contain rounded-full"
-                />
-              </div>
-              <span className="text-xl font-bold">Panda Express</span>
-            </Link>
-          </div>
-
-          {/* Navigation Links */}
-          <div className="hidden md:flex items-center space-x-8">
-            <Link
-              href="/menu"
-              className={`nav-link ${pathname === '/menu' ? 'nav-active' : ''}`}
-            >
-              {translate('Menu')}
-            </Link>
-            <Link
-              href="/cart"
-              className={`nav-link ${pathname === '/cart' ? 'nav-active' : ''}`}
-            >
-              {translate('Cart')}
-            </Link>
-
-            {/* Accessibility Dropdown */}
-            
-    <div className="relative">
-      <button
-        type="button"
-        onClick={toggleAccessibilityDropdown}
-        className="nav-link px-4 py-2 text-[var(--panda-black)]"
-        aria-expanded={isAccessibilityDropdownOpen}
-      >
-        {translate('Accessibility')}
-      </button>
-
-      {/* Dropdown Menu */}
-      {isAccessibilityDropdownOpen && (
-        <div
-          className="absolute right-0 mt-2 w-48 bg-white shadow-lg border rounded-md py-2 z-50"
-          style={{ zIndex: 50 }}
-        >
-          <button
-            onClick={() => {
-              document.documentElement.classList.toggle('high-contrast');
-              setSelectedOption((prev) => (prev === 'high-contrast' ? null : 'high-contrast'));
-            }}
-            className={`px-4 py-2 text-left w-full hover:bg-gray-100 focus:outline-none ${
-              selectedOption === 'high-contrast' ? 'bg-blue-100 text-blue-800' : ''
-            }`}
-          >
-            {translate('High Contrast')}
-          </button>
-          <button
-            onClick={() => {
-              document.documentElement.classList.toggle('text-lg');
-              setSelectedOption((prev) => (prev === 'text-lg' ? null : 'text-lg'));
-            }}
-            className={`px-4 py-2 text-left w-full hover:bg-gray-100 focus:outline-none ${
-              selectedOption === 'text-lg' ? 'bg-blue-100 text-blue-800' : ''
-            }`}
-          >
-            {translate('Increase Text Size')}
-          </button>
-          <button
-            onClick={() => {
-              setMagnifierEnabled((prev) => !prev);
-              setSelectedOption((prev) => (prev === 'magnifier' ? null : 'magnifier'));
-            }}
-            className={`px-4 py-2 text-left w-full hover:bg-gray-100 focus:outline-none ${
-              selectedOption === 'magnifier' && magnifierEnabled ? 'bg-blue-100 text-blue-800' : ''
-            }`}
-          >
-            {translate('Magnifier')}
-          </button>
-          
-        </div>
-      )}
-    </div>
-
-
-
-          </div>
-
-          {/* Right Side Quick Access Buttons */}
-          <div className="flex items-center space-x-4">
-            {/* Manager Button */}
-            <Link
-              href="/admin"
-              className="flex items-center space-x-1 px-3 py-2 bg-[var(--panda-gold)] text-black rounded-md hover:bg-[var(--panda-light-gold)] transition-colors"
-            >
-              <Users size={18} />
-              <span>Manager</span>
-            </Link>
-
-            {/* Cashier Button */}
-            <Link
-              href="/cashier"
-              className="flex items-center space-x-1 px-3 py-2 bg-[var(--panda-red)] text-white rounded-md hover:bg-[var(--panda-dark-red)] transition-colors"
-            >
-              <Calculator size={18} />
-              <span>Cashier</span>
-            </Link>
-
-            {/* Weather, Language Selector, and Login Button */}
-            <Weather />
-            <LanguageSelector />
-            <LoginButton />
-          </div>
-        </div>
-      </div>
-
-      {/* Magnifier Options */}
-      {magnifierEnabled && (
-        <div className="flex justify-left mt-4 pl-4">
-          <label htmlFor="magnification" className="mr-2">
-            {translate('Magnification Level')}:
-          </label>
-          <input
-            type="range"
-            id="magnification"
-            min="1.5"
-            max="4"
-            step="0.5"
-            value={magnification}
-            onChange={(e) => setMagnification(Number(e.target.value))}
-            className="w-32"
-          />
-          <span className="ml-2">{magnification}x</span>
-        </div>
-      )}
-
-      
-      {/* <ScreenMagnifier enabled={magnifierEnabled} magnification={magnification} /> */}
-      
-    </nav>
-  );
-}
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\components\layout\Weather.tsx
-
-// client/src/components/layout/Weather.tsx
-'use client';
-
-import { useEffect, useState } from 'react';
-import { Cloud, Sun, CloudRain, Loader, MapPin, Clock } from 'lucide-react';
-
-interface WeatherData {
-  main: {
-    temp: number;
-  };
-  weather: Array<{
-    main: string;
-    description: string;
-  }>;
-}
-
-export default function Weather() {
-  const [weather, setWeather] = useState<WeatherData | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [currentTime, setCurrentTime] = useState(new Date());
-
-  // College Station coordinates
-  const COLLEGE_STATION = {
-    lat: 30.6280,
-    lon: -96.3344,
-    name: 'College Station'
-  };
-
-  useEffect(() => {
-    // Update time every second
-    const timeInterval = setInterval(() => {
-      setCurrentTime(new Date());
-    }, 1000);
-
-    const fetchWeather = async () => {
-      console.log('API Key:', process.env.NEXT_PUBLIC_OPENWEATHER_API_KEY);
-
-      if (!process.env.NEXT_PUBLIC_OPENWEATHER_API_KEY) {
-        console.error('OpenWeather API key is missing');
-        setError('API key not configured');
-        setIsLoading(false);
-        return;
-      }
-
-      try {
-        const url = `https://api.openweathermap.org/data/2.5/weather?lat=${COLLEGE_STATION.lat}&lon=${COLLEGE_STATION.lon}&appid=${process.env.NEXT_PUBLIC_OPENWEATHER_API_KEY}&units=imperial`;
-        console.log('Fetching weather from:', url);
-
-        const response = await fetch(url);
-        console.log('Response status:', response.status);
-
-        if (!response.ok) {
-          throw new Error(`Failed to fetch weather: ${response.status}`);
-        }
-
-        const data = await response.json();
-        console.log('Weather data:', data);
-        setWeather(data);
-      } catch (err) {
-        console.error('Weather fetch error:', err);
-        setError(err instanceof Error ? err.message : 'Unable to load weather');
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    fetchWeather();
-    // Refresh weather every 5 minutes
-    const weatherInterval = setInterval(fetchWeather, 5 * 60 * 1000);
-
-    return () => {
-      clearInterval(weatherInterval);
-      clearInterval(timeInterval);
-    };
-  }, []);
-
-  const getWeatherIcon = (weatherMain: string) => {
-    const mainWeather = weatherMain.toLowerCase();
-    console.log('Weather condition:', mainWeather);
-
-    switch (mainWeather) {
-      case 'clear':
-        return <Sun className="h-6 w-6 text-yellow-500" />;
-      case 'clouds':
-        return <Cloud className="h-6 w-6 text-gray-500" />;
-      case 'rain':
-      case 'drizzle':
-        return <CloudRain className="h-6 w-6 text-blue-500" />;
-      default:
-        return <Cloud className="h-6 w-6 text-gray-500" />;
-    }
-  };
-
-  const formatTime = (date: Date) => {
-    return date.toLocaleTimeString('en-US', {
-      hour: 'numeric',
-      minute: '2-digit',
-      hour12: true
-    });
-  };
-
-  if (isLoading) {
-    return (
-      <div className="flex items-center space-x-2">
-        <Loader className="h-5 w-5 animate-spin text-[var(--panda-red)]" />
-        <span className="text-sm">Loading weather...</span>
-      </div>
-    );
-  }
-
-  if (error || !weather) {
-    return (
-      <div className="text-sm text-gray-500">
-        Weather unavailable: {error}
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex flex-col bg-white rounded-lg px-4 py-2 shadow-sm">
-      {/* Location Row */}
-      <div className="flex items-center space-x-1 text-xs text-gray-500 mb-1">
-        <MapPin className="h-3 w-3" />
-        <span>{COLLEGE_STATION.name}</span>
-      </div>
-      
-      {/* Weather and Time Row */}
-      <div className="flex items-center justify-between">
-        {/* Weather Information */}
-        <div className="flex items-center space-x-3">
-          {getWeatherIcon(weather.weather[0].main)}
-          <div>
-            <div className="font-medium">
-              {Math.round(weather.main.temp)}°F
-            </div>
-            <div className="text-xs text-gray-500 capitalize">
-              {weather.weather[0].description}
-            </div>
-          </div>
-        </div>
-
-        {/* Time Information */}
-        <div className="flex items-center space-x-1 ml-4">
-          <Clock className="h-4 w-4 text-gray-400" />
-          <span className="text-sm text-gray-600">
-            {formatTime(currentTime)}
-          </span>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\components\menu\MenuGrid.tsx
-
-// MenuGrid.tsx
-import React from 'react';
-import { Info } from 'lucide-react';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/cashier/dialog"
-
-interface MenuItem {
-  id: string;
-  name: string;
-  imageUrl: string;
-  price: number;
-  description: string;
-  available: boolean;
-  category?: string; // Added to match the data structure
-}
-
-interface NutritionInfo {
-  servingSize: string;
-  calories: number;
-  caloriesFromFat: number;
-  totalFat: number;
-  saturatedFat: number;
-  transFat: number;
-  cholesterol: number;
-  sodium: number;
-  totalCarbs: number;
-  dietaryFiber: number;
-  sugars: number;
-  protein: number;
-  allergens?: string[]; // Optional property for allergens
-}
-
-// Mapping between numerical IDs and nutrition data keys
-const nutritionIdMap: { [key: string]: string } = {
-  '1': 'the-original-orange-chicken',
-  '2': 'beijing-beef',
-  '3': 'black-pepper-chicken',
-  '4': 'black-pepper-sirloin-steak',
-  '5': 'broccoli-beef',
-  '7': 'grilled-teriyaki-chicken',
-  '8': 'honey-sesame-chicken',
-  '9': 'honey-walnut-shrimp',
-  '10': 'hot-ones-blazing-bourbon-chicken', // Fixed the key to match the nutritionData
-  '11': 'kung-pao-chicken',
-  '12': 'mushroom-chicken',
-  '13': 'string-bean-chicken',
-  '14': 'sweetfire-chicken',
-  '15': 'chow-mein',
-  '16': 'fried-rice',
-  '17': 'super-greens',
-  '18': 'white-steamed-rice',
-  '19': 'apple-pie-roll',
-  '20': 'chicken-egg-roll',
-  '21': 'cream-cheese-rangoon',
-  '22': 'veggie-egg-roll',
-  '23': 'barqs-root-beer',
-  '24': 'coca-cola',
-  '25': 'coke-mexico-12oz-bottle',
-  '26': 'coke-zero-20oz-bottle',
-  '27': 'dasani-16oz-bottle',
-  '28': 'diet-coke',
-  '29': 'dr-pepper',
-  '30': 'fanta-orange',
-  '31': 'fuze-raspberry-iced-tea',
-  '32': 'minute-maid-apple-juice-12oz-bottle',
-  '33': 'minute-maid-lemonade',
-  '34': 'mango-guava-flavored-tea',
-  '35': 'peach-lychee-flavored-refresher',
-  '36': 'pomegranate-pineapple-flavored-lemonade',
-  '37': 'smartwater-700ml-bottle',
-  '38': 'sprite',
-  '39': 'watermelon-mango-flavored-refresher',
-  '41': 'powerade-mountain-berry-blast',
-  '42': 'coca-cola-cherry'
-};
-
-
-const nutritionData: { [key: string]: NutritionInfo } = {
-  'the-original-orange-chicken': {
-    servingSize: '5.7 oz',
-    calories: 420,
-    caloriesFromFat: 180,
-    totalFat: 21,
-    saturatedFat: 4,
-    transFat: 0,
-    cholesterol: 95,
-    sodium: 620,
-    totalCarbs: 43,
-    dietaryFiber: 0,
-    sugars: 18,
-    protein: 15,
-    allergens: ['Wheat', 'Soy', 'Eggs', 'Milkyhg'] 
-  },
-  'beijing-beef': {
-    servingSize: '5.6 oz',
-    calories: 690,
-    caloriesFromFat: 360,
-    totalFat: 40,
-    saturatedFat: 8,
-    transFat: 0.5,
-    cholesterol: 65,
-    sodium: 890,
-    totalCarbs: 57,
-    dietaryFiber: 4,
-    sugars: 25,
-    protein: 26,
-    allergens: ['Wheat', 'Soy', 'Milk'] 
-  },
-  'broccoli-beef': {
-    servingSize: '5.4 oz',
-    calories: 130,
-    caloriesFromFat: 40,
-    totalFat: 4,
-    saturatedFat: 1,
-    transFat: 0,
-    cholesterol: 15,
-    sodium: 710,
-    totalCarbs: 13,
-    dietaryFiber: 3,
-    sugars: 3,
-    protein: 10,
-    allergens: ['Wheat', 'Soy'] 
-  },
-  'black-pepper-chicken': {
-    servingSize: '6.1 oz',
-    calories: 250,
-    caloriesFromFat: 130,
-    totalFat: 14,
-    saturatedFat: 3,
-    transFat: 0,
-    cholesterol: 120,
-    sodium: 930,
-    totalCarbs: 12,
-    dietaryFiber: 2,
-    sugars: 5,
-    protein: 19,
-    allergens: ['Wheat', 'Soy'] 
-  },
-  'black-pepper-sirloin-steak': {
-  servingSize: '6.1 oz', 
-  calories: 210,
-  caloriesFromFat: 90, 
-  totalFat: 10,
-  saturatedFat: 2, 
-  transFat: 0,
-  cholesterol: 65, 
-  sodium: 650, 
-  totalCarbs: 13,
-  dietaryFiber: 1,
-  sugars: 2, 
-  protein: 19,
-  allergens: ['Wheat', 'Soy'] 
-},
-  'grilled-teriyaki-chicken': {
-    servingSize: '6.3 oz',
-    calories: 275,
-    caloriesFromFat: 90,
-    totalFat: 10,
-    saturatedFat: 2,
-    transFat: 0,
-    cholesterol: 85,
-    sodium: 680,
-    totalCarbs: 14,
-    dietaryFiber: 0,
-    sugars: 8,
-    protein: 33,
-    allergens: ['Wheat', 'Soy'] 
-  },
-  'honey-sesame-chicken': {
-    servingSize: '5.7 oz', // Adjust as needed
-    calories: 340,
-    caloriesFromFat: 135,
-    totalFat: 15,
-    saturatedFat: 3,
-    transFat: 0,
-    cholesterol: 75,
-    sodium: 620,
-    totalCarbs: 35,
-    dietaryFiber: 2,
-    sugars: 16,
-    protein: 16,
-    allergens: ['Wheat', 'Soy'] 
-  },
-  'honey-walnut-shrimp': {
-    servingSize: '5.4 oz',
-    calories: 360,
-    caloriesFromFat: 216,
-    totalFat: 24,
-    saturatedFat: 3,
-    transFat: 0,
-    cholesterol: 90,
-    sodium: 500,
-    totalCarbs: 27,
-    dietaryFiber: 1,
-    sugars: 15,
-    protein: 11,
-    allergens: ['Wheat', 'Soy', 'Treenuts'] 
-  },
-  'hot-ones-blazing-bourbon-chicken': {
-    servingSize: '5.9 oz', // Adjust as needed
-    calories: 300,
-    caloriesFromFat: 90,
-    totalFat: 10, // Approximate value based on saturated fat
-    saturatedFat: 2,
-    transFat: 0,
-    cholesterol: 75,
-    sodium: 720,
-    totalCarbs: 37,
-    dietaryFiber: 2,
-    sugars: 12,
-    protein: 15,
-    allergens: ['Wheat', 'Soy'] 
-  },
-  'kung-pao-chicken': {
-    servingSize: '5.6 oz', // Adjust as needed
-    calories: 290,
-    caloriesFromFat: 171,
-    totalFat: 19,
-    saturatedFat: 3.5,
-    transFat: 0,
-    cholesterol: 70,
-    sodium: 970,
-    totalCarbs: 14,
-    dietaryFiber: 2,
-    sugars: 6,
-    protein: 16,
-    allergens: ['Wheat', 'Soy', 'Peanuts'] 
-  },
-  'mushroom-chicken': {
-    servingSize: '5.9 oz',
-    calories: 220,
-    caloriesFromFat: 120,
-    totalFat: 13,
-    saturatedFat: 3,
-    transFat: 0,
-    cholesterol: 100,
-    sodium: 760,
-    totalCarbs: 9,
-    dietaryFiber: 1,
-    sugars: 4,
-    protein: 17,
-    allergens: ['Wheat', 'Soy'] 
-  },
-  'string-bean-chicken': {
-    servingSize: '5.6 oz',
-    calories: 170,
-    caloriesFromFat: 60,
-    totalFat: 7,
-    saturatedFat: 1.5,
-    transFat: 0,
-    cholesterol: 35,
-    sodium: 740,
-    totalCarbs: 13,
-    dietaryFiber: 2,
-    sugars: 5,
-    protein: 15,
-    allergens: ['Wheat', 'Soy'] 
-  },
-  'sweetfire-chicken': {
-    servingSize: '5.8 oz',
-    calories: 440,
-    caloriesFromFat: 160,
-    totalFat: 18,
-    saturatedFat: 3.5,
-    transFat: 0,
-    cholesterol: 45,
-    sodium: 370,
-    totalCarbs: 53,
-    dietaryFiber: 1,
-    sugars: 27,
-    protein: 17,
-    allergens: ['Wheat', 'Soy'] 
-  },
-  'chow-mein': {
-    servingSize: '9.4 oz',
-    calories: 500,
-    caloriesFromFat: 210,
-    totalFat: 23,
-    saturatedFat: 4,
-    transFat: 0,
-    cholesterol: 0,
-    sodium: 980,
-    totalCarbs: 61,
-    dietaryFiber: 4,
-    sugars: 5,
-    protein: 18,
-    allergens: ['Wheat', 'Soy'] 
-  },
-  'fried-rice': {
-    servingSize: '9.3 oz',
-    calories: 530,
-    caloriesFromFat: 140,
-    totalFat: 16,
-    saturatedFat: 3,
-    transFat: 0,
-    cholesterol: 150,
-    sodium: 820,
-    totalCarbs: 82,
-    dietaryFiber: 1,
-    sugars: 3,
-    protein: 12,
-    allergens: ['Wheat', 'Soy', 'Eggs'] 
-  },
-  'super-greens': {
-    servingSize: '7 oz',
-    calories: 90,
-    caloriesFromFat: 27,
-    totalFat: 3,
-    saturatedFat: 0.5, 
-    transFat: 0,
-    cholesterol: 0,
-    sodium: 300, 
-    totalCarbs: 10,
-    dietaryFiber: 4, 
-    sugars: 3, 
-    protein: 6,
-    allergens: ['Wheat', 'Soy'] 
-  },
-  'white-steamed-rice': {
-    servingSize: '8.1 oz',
-    calories: 380,
-    caloriesFromFat: 0,
-    totalFat: 0,
-    saturatedFat: 0,
-    transFat: 0,
-    cholesterol: 0,
-    sodium: 0,
-    totalCarbs: 86,
-    dietaryFiber: 0,
-    sugars: 0,
-    protein: 7
-  },
-  'apple-pie-roll': {
-    servingSize: '1.94 oz',
-    calories: 150,
-    caloriesFromFat: 27,
-    totalFat: 3,
-    saturatedFat: 1,
-    transFat: 0,
-    cholesterol: 0,
-    sodium: 90,
-    totalCarbs: 30,
-    dietaryFiber: 1,
-    sugars: 13,
-    protein: 2,
-    allergens: ['Wheat', 'Soy', 'Milk'] 
-  },
-  'chicken-egg-roll': {
-    servingSize: '3.0 oz / 1 roll',
-    calories: 200,
-    caloriesFromFat: 100,
-    totalFat: 12,
-    saturatedFat: 4,
-    transFat: 0,
-    cholesterol: 20,
-    sodium: 390,
-    totalCarbs: 16,
-    dietaryFiber: 2,
-    sugars: 2,
-    protein: 8,
-    allergens: ['Wheat', 'Soy'] 
-  },
-  'cream-cheese-rangoon': {
-    servingSize: '2.4 oz / 3 pcs',
-    calories: 190,
-    caloriesFromFat: 70,
-    totalFat: 8,
-    saturatedFat: 5,
-    transFat: 0,
-    cholesterol: 35,
-    sodium: 180,
-    totalCarbs: 24,
-    dietaryFiber: 2,
-    sugars: 1,
-    protein: 5,
-    allergens: ['Wheat', 'Eggs', 'Milk'] 
-  },
-  'veggie-egg-roll': {
-    servingSize: '3.4 oz / 2 rolls',
-    calories: 160,
-    caloriesFromFat: 60,
-    totalFat: 7,
-    saturatedFat: 1,
-    transFat: 0,
-    cholesterol: 0,
-    sodium: 540,
-    totalCarbs: 22,
-    dietaryFiber: 4,
-    sugars: 2,
-    protein: 2,
-    allergens: ['Wheat', 'Soy', 'Milk'] 
-  },
-  'barqs-root-beer': {
-    servingSize: '12 fl oz',
-    calories: 160,
-    caloriesFromFat: 0,
-    totalFat: 0,
-    saturatedFat: 0,
-    transFat: 0,
-    cholesterol: 0,
-    sodium: 65,
-    totalCarbs: 44,
-    dietaryFiber: 0,
-    sugars: 44,
-    protein: 0
-  },
-  'coca-cola': {
-    servingSize: '12 fl oz',
-    calories: 140,
-    caloriesFromFat: 0,
-    totalFat: 0,
-    saturatedFat: 0,
-    transFat: 0,
-    cholesterol: 0,
-    sodium: 45,
-    totalCarbs: 39,
-    dietaryFiber: 0,
-    sugars: 39,
-    protein: 0
-  },
-  'coca-cola-cherry': {
-    servingSize: '12 fl oz',
-    calories: 150,
-    caloriesFromFat: 0,
-    totalFat: 0,
-    saturatedFat: 0,
-    transFat: 0,
-    cholesterol: 0,
-    sodium: 40,
-    totalCarbs: 42,
-    dietaryFiber: 0,
-    sugars: 42,
-    protein: 0
-  },
-  'coke-zero-20oz-bottle': {
-    servingSize: '12 fl oz',
-    calories: 0,
-    caloriesFromFat: 0,
-    totalFat: 0,
-    saturatedFat: 0,
-    transFat: 0,
-    cholesterol: 0,
-    sodium: 40,
-    totalCarbs: 0,
-    dietaryFiber: 0,
-    sugars: 0,
-    protein: 0
-  },
-  'dasani-16oz-bottle': {
-    servingSize: '16.9 fl oz',
-    calories: 0,
-    caloriesFromFat: 0,
-    totalFat: 0,
-    saturatedFat: 0,
-    transFat: 0,
-    cholesterol: 0,
-    sodium: 0,
-    totalCarbs: 0,
-    dietaryFiber: 0,
-    sugars: 0,
-    protein: 0
-  },
-  'diet-coke': {
-    servingSize: '12 fl oz',
-    calories: 0,
-    caloriesFromFat: 0,
-    totalFat: 0,
-    saturatedFat: 0,
-    transFat: 0,
-    cholesterol: 0,
-    sodium: 40,
-    totalCarbs: 0,
-    dietaryFiber: 0,
-    sugars: 0,
-    protein: 0
-  },
-  'dr-pepper': {
-    servingSize: '12 fl oz',
-    calories: 150,
-    caloriesFromFat: 0,
-    totalFat: 0,
-    saturatedFat: 0,
-    transFat: 0,
-    cholesterol: 0,
-    sodium: 55,
-    totalCarbs: 40,
-    dietaryFiber: 0,
-    sugars: 40,
-    protein: 0
-  },
-  'fanta-orange': {
-    servingSize: '12 fl oz',
-    calories: 160,
-    caloriesFromFat: 0,
-    totalFat: 0,
-    saturatedFat: 0,
-    transFat: 0,
-    cholesterol: 0,
-    sodium: 55,
-    totalCarbs: 44,
-    dietaryFiber: 0,
-    sugars: 44,
-    protein: 0
-  },
-  'fuze-raspberry-iced-tea': {
-    servingSize: '16.9 fl oz',
-    calories: 100,
-    caloriesFromFat: 0,
-    totalFat: 0,
-    saturatedFat: 0,
-    transFat: 0,
-    cholesterol: 0,
-    sodium: 10,
-    totalCarbs: 27,
-    dietaryFiber: 0,
-    sugars: 27,
-    protein: 0
-  },
-  'minute-maid-apple-juice-12oz-bottle': {
-    servingSize: '10 fl oz',
-    calories: 140,
-    caloriesFromFat: 0,
-    totalFat: 0,
-    saturatedFat: 0,
-    transFat: 0,
-    cholesterol: 0,
-    sodium: 15,
-    totalCarbs: 35,
-    dietaryFiber: 0,
-    sugars: 34,
-    protein: 0
-  },
-  'minute-maid-lemonade': {
-    servingSize: '12 fl oz',
-    calories: 150,
-    caloriesFromFat: 0,
-    totalFat: 0,
-    saturatedFat: 0,
-    transFat: 0,
-    cholesterol: 0,
-    sodium: 15,
-    totalCarbs: 39,
-    dietaryFiber: 0,
-    sugars: 38,
-    protein: 0
-  },
-  'mango-guava-flavored-tea': {
-    servingSize: '16 fl oz',
-    calories: 120,
-    caloriesFromFat: 0,
-    totalFat: 0,
-    saturatedFat: 0,
-    transFat: 0,
-    cholesterol: 0,
-    sodium: 10,
-    totalCarbs: 30,
-    dietaryFiber: 0,
-    sugars: 28,
-    protein: 0
-  },
-  'peach-lychee-flavored-refresher': {
-    servingSize: '16 fl oz',
-    calories: 140,
-    caloriesFromFat: 0,
-    totalFat: 0,
-    saturatedFat: 0,
-    transFat: 0,
-    cholesterol: 0,
-    sodium: 20,
-    totalCarbs: 35,
-    dietaryFiber: 0,
-    sugars: 33,
-    protein: 0
-  },
-  'pomegranate-pineapple-flavored-lemonade': {
-    servingSize: '16 fl oz',
-    calories: 150,
-    caloriesFromFat: 0,
-    totalFat: 0,
-    saturatedFat: 0,
-    transFat: 0,
-    cholesterol: 0,
-    sodium: 15,
-    totalCarbs: 39,
-    dietaryFiber: 0,
-    sugars: 38,
-    protein: 0
-  },
-  'smartwater-700ml-bottle': {
-    servingSize: '16.9 fl oz',
-    calories: 0,
-    caloriesFromFat: 0,
-    totalFat: 0,
-    saturatedFat: 0,
-    transFat: 0,
-    cholesterol: 0,
-    sodium: 0,
-    totalCarbs: 0,
-    dietaryFiber: 0,
-    sugars: 0,
-    protein: 0
-  },
-  'sprite': {
-    servingSize: '12 fl oz',
-    calories: 140,
-    caloriesFromFat: 0,
-    totalFat: 0,
-    saturatedFat: 0,
-    transFat: 0,
-    cholesterol: 0,
-    sodium: 65,
-    totalCarbs: 38,
-    dietaryFiber: 0,
-    sugars: 38,
-    protein: 0
-  },
-  'watermelon-mango-flavored-refresher': {
-    servingSize: '16 fl oz',
-    calories: 140,
-    caloriesFromFat: 0,
-    totalFat: 0,
-    saturatedFat: 0,
-    transFat: 0,
-    cholesterol: 0,
-    sodium: 20,
-    totalCarbs: 36,
-    dietaryFiber: 0,
-    sugars: 35,
-    protein: 0
-  },
-  'powerade-mountain-berry-blast': {
-  servingSize: '12 fl oz',
-  calories: 80,
-  caloriesFromFat: 0,
-  totalFat: 0,
-  saturatedFat: 0,
-  transFat: 0,
-  cholesterol: 0,
-  sodium: 150, // Typical for electrolyte drinks
-  totalCarbs: 21,
-  dietaryFiber: 0,
-  sugars: 21,
-  protein: 0
-},
-'coke-mexico-12oz-bottle': {
-  servingSize: '12 fl oz',
-  calories: 150,
-  caloriesFromFat: 0,
-  totalFat: 0,
-  saturatedFat: 0,
-  transFat: 0,
-  cholesterol: 0,
-  sodium: 85,
-  totalCarbs: 39,
-  dietaryFiber: 0,
-  sugars: 39,
-  protein: 0
-}
-};
-
-const normalizeName = (name: string): string => {
-  return name.toLowerCase().replace(/ /g, '-').replace(/[^a-z0-9-]/g, '');
-};
-
-const NutritionPanel = ({ itemName }: { itemName: string }) => {
-  console.log("NutritionPanel itemName:", itemName);
-
-  const nutritionKey = normalizeName(itemName);
-  console.log("Mapped nutritionKey:", nutritionKey);
-
-  const nutrition = nutritionData[nutritionKey];
-  console.log("Nutrition data accessed:", nutrition);
-
-  if (!nutrition) {
-    console.error("Nutrition information not found for key:", nutritionKey);
-    return (
-      <div className="p-4 text-center text-gray-500">
-        <p>Nutrition information not available</p>
-        <p className="text-xs mt-2">Please contact support if this is an error.</p>
-      </div>
-    );
-  }
-
-
-  const nutritionItems = [
-    { label: 'Serving Size', value: nutrition.servingSize, unit: '' },
-    { label: 'Calories', value: nutrition.calories, unit: 'kcal' },
-    { label: 'Total Fat', value: nutrition.totalFat, unit: 'g' },
-    { label: 'Saturated Fat', value: nutrition.saturatedFat, unit: 'g' },
-    { label: 'Trans Fat', value: nutrition.transFat, unit: 'g' },
-    { label: 'Cholesterol', value: nutrition.cholesterol, unit: 'mg' },
-    { label: 'Sodium', value: nutrition.sodium, unit: 'mg' },
-    { label: 'Total Carbs', value: nutrition.totalCarbs, unit: 'g' },
-    { label: 'Dietary Fiber', value: nutrition.dietaryFiber, unit: 'g' },
-    { label: 'Sugars', value: nutrition.sugars, unit: 'g' },
-    { label: 'Protein', value: nutrition.protein, unit: 'g' }
-  ];
-
-  return (
-    <div className="grid grid-cols-2 gap-3 p-4 bg-white rounded-lg shadow-md">
-      {nutritionItems.map((item) => (
-        <div key={item.label} className="p-3 rounded-lg border border-gray-200">
-          <div className="text-sm text-gray-500">{item.label}</div>
-          <div className="text-lg font-semibold">
-            {item.value}
-            <span className="text-sm text-gray-500 ml-1">{item.unit}</span>
-          </div>
-        </div>
-      ))}
-
-      {nutrition.allergens && (
-        <div className="col-span-2 text-red-500 font-semibold mt-3">
-          <p>Allergen Warning: {nutrition.allergens.join(', ')}</p>
-        </div>
-      )}
-
-      <div className="col-span-2 text-xs text-gray-500 mt-2">
-        * Percent Daily Values are based on a 2,000 calorie diet.
-      </div>
-    </div>
-  );
-};
-
-
-
-const MenuGrid = ({ items }: { items: MenuItem[] }) => {
-  const itemsWithoutInfoButton = ['41', '42', '43'];
-  return (
-    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
-      {items.map((item) => (
-        <div
-          key={item.id}
-          className="relative bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-all duration-200"
-        >
-          {!itemsWithoutInfoButton.includes(item.id) && (
-            <div className="absolute top-2 right-2 z-20">
-              <Dialog>
-                <DialogTrigger asChild>
-                  <button
-                    className="p-2 rounded-full bg-white/90 hover:bg-white transition-all shadow-md"
-                    aria-label="Nutrition Information"
-                  >
-                    <Info className="h-5 w-5 text-gray-600 hover:text-[var(--panda-red)]" />
-                  </button>
-                </DialogTrigger>
-                <DialogContent className="sm:max-w-[425px] bg-white border border-white shadow-lg rounded-lg">
-                  <DialogHeader>
-                    <DialogTitle>Nutrition Information - {item.name}</DialogTitle>
-                  </DialogHeader>
-                  <NutritionPanel itemName={item.name} />
-                </DialogContent>
-              </Dialog>
-            </div>
-          )}
-
-
-<div className="relative h-48">
-            <img
-              src={item.imageUrl}
-              alt={item.name}
-              className="w-full h-full object-cover"
-            />
-          </div>
-
-          <div className="p-4">
-            <div className="flex justify-between items-start mb-2">
-              <h3 className="text-lg font-semibold">{item.name}</h3>
-              <span className="text-lg font-bold text-[var(--panda-red)]">
-                ${Number(item.price).toFixed(2)}
-              </span>
-            </div>
-
-            <p className="text-gray-600 text-sm mb-2">
-              {item.description}
-            </p>
-
-            {!item.available && (
-              <span className="inline-block bg-red-100 text-red-800 text-xs px-2 py-1 rounded">
-                Currently Unavailable
-              </span>
-            )}
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export default MenuGrid;
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\components\GoogleTranslate.tsx
-
-import React, { useEffect, useRef } from 'react';
-import { useLanguage } from '@/context/LanguageContext';
-
-declare global {
-  interface Window {
-    google: any;
-    googleTranslateElementInit: () => void;
-    g_gTranslateIsAdded: boolean;
-  }
-}
-
-// Initialize the global flag
-if (typeof window !== 'undefined') {
-  window.g_gTranslateIsAdded = window.g_gTranslateIsAdded || false;
-}
-
-export default function GoogleTranslate() {
-  const { currentLanguage } = useLanguage();
-  const googleTranslateRef = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    // Skip if already initialized
-    if (window.g_gTranslateIsAdded) {
-      return;
-    }
-
-    window.googleTranslateElementInit = () => {
-      if (!window.g_gTranslateIsAdded && googleTranslateRef.current) {
-        window.g_gTranslateIsAdded = true;
-        new window.google.translate.TranslateElement(
-          {
-            pageLanguage: 'en',
-            includedLanguages: 'en,es,vi,zh-CN,zh-TW,ja,ko,th,fr,de,it,ru,ar,hi,tl',
-            layout: window.google.translate.TranslateElement.InlineLayout.SIMPLE,
-            autoDisplay: false,
-          },
-          googleTranslateRef.current
-        );
-
-        // Add custom styling
-        const style = document.createElement('style');
-        style.textContent = `
-          .goog-te-gadget {
-            font-family: inherit !important;
-            font-size: 13px !important;
-            margin: -4px 0 !important;
-          }
-          .goog-te-gadget-simple {
-            background-color: transparent !important;
-            border: none !important;
-            padding: 0 !important;
-            line-height: 1.2 !important;
-          }
-          .goog-te-gadget-simple .goog-te-menu-value {
-            padding: 0 !important;
-            margin: 0 !important;
-            vertical-align: middle !important;
-          }
-          .goog-te-gadget-simple .goog-te-menu-value span:not(:first-child) {
-            display: none !important;
-          }
-          .goog-te-gadget-simple .goog-te-menu-value span:first-child {
-            color: transparent !important;
-            visibility: visible !important;
-          }
-          .goog-te-gadget img {
-            display: none !important;
-          }
-          .goog-te-gadget-simple span {
-            margin-right: 0 !important;
-            border: none !important;
-          }
-          .goog-te-combo {
-            padding: 4px !important;
-            border: 1px solid #ccc !important;
-            border-radius: 4px !important;
-            font-size: 13px !important;
-            color: #374151 !important;
-            background-color: white !important;
-            min-width: 120px !important;
-            appearance: auto !important;
-            -webkit-appearance: auto !important;
-          }
-          .goog-logo-link {
-            display: none !important;
-          }
-          .goog-te-banner-frame {
-            display: none !important;
-          }
-          #goog-gt-tt, .goog-te-balloon-frame {
-            display: none !important;
-          }
-          .goog-text-highlight {
-            background: none !important;
-            box-shadow: none !important;
-          }
-        `;
-        document.head.appendChild(style);
-      }
-    };
-
-    // Add the script only if not already added
-    if (!document.querySelector('script[src*="translate_a/element.js"]')) {
-      const script = document.createElement('script');
-      script.src = '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
-      script.async = true;
-      document.body.appendChild(script);
-    }
-  }, []);
-
-  return (
-    <div 
-      id="google_translate_element" 
-      ref={googleTranslateRef}
-      style={{ position: 'relative', zIndex: 1 }}
-    />
-  );
-}
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\components\ScreenMagnifier.tsx
-
-import React, { useState, useEffect, useRef } from 'react';
-
-const ScreenMagnifier = ({ enabled = false, magnification = 2 }) => {
-  const [position, setPosition] = useState({ x: 0, y: 0 });
-  const [isVisible, setIsVisible] = useState(false);
-  const contentRef = useRef<HTMLDivElement>(null);
-  const magnifierRef = useRef<HTMLDivElement>(null);
-  const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-
-  useEffect(() => {
-    if (!enabled) return;
-    
-    const updateMagnifierContent = (iframe: HTMLIFrameElement, x: number, y: number) => {
-      if (iframe.contentDocument) {
-        const content = iframe.contentDocument.documentElement.cloneNode(true) as HTMLElement;
-    
-        // Remove scripts for safety
-        content.querySelectorAll('script').forEach(script => script.remove());
-    
-        // Pull styles from the current document
-        const styles = Array.from(document.styleSheets).map(sheet => {
-          try {
-            if (sheet.href) {
-              return `<link rel="stylesheet" href="${sheet.href}" />`; // External stylesheets
-            }
-            return `<style>${Array.from(sheet.cssRules).map(rule => rule.cssText).join('\n')}</style>`; // Internal styles
-          } catch {
-            if (sheet.href) {
-              return `<link rel="stylesheet" href="${sheet.href}" />`; // External stylesheets
-            }
-            return ''; // Return empty if styles can't be fetched
-          }
-        }).join('');
-    
-        // Write the content to the iframe
-        iframe.contentDocument.open();
-        iframe.contentDocument.write(`
-          <!DOCTYPE html>
-          <html>
-            <head>
-              ${styles} <!-- Inject styles here -->
-            </head>
-            <body>
-              ${content.innerHTML}
-            </body>
-          </html>
-        `);
-        iframe.contentDocument.close();
-    
-        // Now, adjust the content inside the iframe to zoom in
-        const imageArea = iframe.contentDocument.querySelector('body');
-        if (imageArea) {
-          // Zoom in around the mouse position
-          const scaleX = x / window.innerWidth;
-          const scaleY = y / window.innerHeight;
-          iframe.contentDocument.body.style.transform = `scale(${magnification})`;
-          iframe.contentDocument.body.style.transformOrigin = `${scaleX * 100}% ${scaleY * 100}%`;
-        }
-      }
-    };
-    
-
-    
-    const handleMouseMove = (e: MouseEvent) => {
-      const x = e.clientX; // Use clientX to exclude scroll offset
-      const y = e.clientY; // Use clientY to exclude scroll offset
-    
-
-      const xNum = e.pageX; // Use pageX to include scroll offset
-      const yNum = e.pageY;
-      // Update magnifier position
-      setPosition({ x, y });
-      setIsVisible(true);
-    
-      if (debounceTimeoutRef.current) {
-        clearTimeout(debounceTimeoutRef.current);
-      }
-      debounceTimeoutRef.current = setTimeout(() => {
-        const iframe = magnifierRef.current?.querySelector<HTMLIFrameElement>('iframe');
-        if (iframe) {
-          updateMagnifierContent(iframe, x, y);
-        }
-      }, 25); // Update every 50ms, can adjust based on performance needs
-
-      // Adjust the content translation
-      if (contentRef.current) {
-        const lensWidth = 1000; // Width of your magnifier lens
-        const lensHeight = 500; // Height of your magnifier lens
-    
-        // Calculate the offset for the content translation
-        const offsetX = xNum - lensWidth / 2;
-        const offsetY = yNum - lensHeight / 2;
-    
-        contentRef.current.style.transform = `translate(${-offsetX}px, ${-offsetY}px)`;
-      }
-    };
-    
-   
-
-    const handleMouseLeave = () => {
-      setIsVisible(false);
-      
-    };
-
-    document.addEventListener('mousemove', handleMouseMove);
-    document.addEventListener('mouseleave', handleMouseLeave);
-
-    return () => {
-      document.removeEventListener('mousemove', handleMouseMove);
-      document.removeEventListener('mouseleave', handleMouseLeave);
-    };
-  }, [enabled]);
-
-  if (!enabled || !isVisible) return null;
-
-  return (
-    <>
-      {/* Semi-transparent overlay to capture the current view */}
-      <div 
-        className="fixed inset-0 pointer-events-none"
-        style={{ zIndex: 9999 }}
-      >
-        {/* Magnifier lens */}
-        <div
-          className="fixed rounded-full overflow-hidden border-2 border-gray-200 shadow-lg bg-white"
-          style={{
-            width: '1000px',
-            height: '500px',
-            left: position.x - 1000, // Center the lens horizontally
-            top: position.y - 500,  // Center the lens vertically
-            zIndex: 10000,
-         }}
-         
-        >
-          {/* Content container */}
-          <div
-            ref={contentRef}
-            className="absolute origin-center"
-            style={{
-              width: '100vw',
-              height: '100vh',
-              transform: `translate(${-position.x + 100}px, ${-position.y + 100}px)`,
-            }}
-          >
-            {/* Scaled content */}
-            <div
-                style={{
-                    transform: `scale(${magnification})`,
-                    transformOrigin: `${position.x}px ${position.y}px`,
-                }}
-              >
-
-              <div id="magnifier-content" className="w-screen h-screen" ref={magnifierRef}>
-                <iframe
-                
-                  src="about:blank"
-                  className="w-full h-full border-0"
-                  style={{
-                    pointerEvents: 'none',
-                    transform: 'translateZ(0)',
-                  }}
-                  onLoad={(e) => {
-                    const iframe = e.target as HTMLIFrameElement;
-            
-                    if (iframe.contentDocument) {
-                      // Copy the current page's styles
-                      const styles = Array.from(document.styleSheets).map(sheet => {
-                        try {
-                          if (sheet.href) {
-                            return `<link rel="stylesheet" href="${sheet.href}" />`;
-                          }
-                          return `<style>${Array.from(sheet.cssRules).map(rule => rule.cssText).join('\n')}</style>`;
-                        } catch {
-                          if (sheet.href) {
-                            return `<link rel="stylesheet" href="${sheet.href}" />`;
-                          }
-                          return '';
-                        }
-                      }).join('');
-
-                      // Copy the current page's content
-                      const content = document.documentElement.cloneNode(true) as HTMLElement;
-                      
-                      // Remove any scripts for safety
-                      content.querySelectorAll('script').forEach(script => script.remove());
-                      
-                      // Write the content to the iframe
-                      iframe.contentDocument.open();
-                      iframe.contentDocument.write(`
-                        <!DOCTYPE html>
-                        <html>
-                          <head>${styles}</head>
-                          <body>${content.querySelector('body')?.innerHTML || ''}</body>
-                        </html>
-                      `);
-                      iframe.contentDocument.close();
-                    }
-                  }}
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default ScreenMagnifier;
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\context\LanguageContext.tsx
-
-'use client';
-
-import { createContext, useContext, useState, useCallback, useMemo } from 'react';
-
-export const languages = [
-  { code: 'en', name: 'English', flag: '🇺🇸' },
-  { code: 'es', name: 'Español', flag: '🇪🇸' },
-  { code: 'zh', name: 'Chinese', flag: '🇨🇳' },
-  { code: 'vi', name: 'Tiếng Việt', flag: '🇻🇳' },
-] as const;
-
-export type LanguageCode = (typeof languages)[number]['code'];
-
-export interface Translation {
-  [key: string]: {
-    [key in LanguageCode]: string;
-  };
-}
-
-const translations: Translation = {
-  'Welcome to Panda Express': {
-    en: 'Welcome to Panda Express',
-    es: 'Bienvenido a Panda Express',
-    zh: '欢迎光临熊猫快餐',
-    vi: 'Chào mừng đến với Panda Express',
-  },
-  'Menu': {
-    en: 'Menu',
-    es: 'Menú',
-    zh: '菜单',
-    vi: 'Thực đơn',
-  },
-  'Cart': {
-    en: 'Cart',
-    es: 'Carrito',
-    zh: '购物车',
-    vi: 'Giỏ hàng',
-  },
-};
-
-interface LanguageContextType {
-  currentLanguage: LanguageCode;
-  setLanguage: (lang: LanguageCode) => void;
-  translate: (key: string) => string;
-  isRTL: boolean;
-}
-
-const LanguageContext = createContext<LanguageContextType | undefined>(undefined);
-
-export function LanguageProvider({ children }: { children: React.ReactNode }) {
-  const [currentLanguage, setCurrentLanguage] = useState<LanguageCode>('en');
-
-  const isRTL = useMemo(() => currentLanguage === 'en', [currentLanguage]);
-
-  const translate = useCallback((key: string): string => {
-    if (key in translations && currentLanguage in translations[key]) {
-      return translations[key][currentLanguage];
-    }
-    return key;
-  }, [currentLanguage]);
-
-  const handleLanguageChange = useCallback((lang: LanguageCode) => {
-    setCurrentLanguage(lang);
-    document.documentElement.lang = lang;
-    document.documentElement.dir = isRTL ? 'rtl' : 'ltr';
-  }, [isRTL]);
-
-  const value = useMemo(() => ({
-    currentLanguage,
-    setLanguage: handleLanguageChange,
-    translate,
-    isRTL
-  }), [currentLanguage, handleLanguageChange, translate, isRTL]);
-
-  return (
-    <LanguageContext.Provider value={value}>
-      {children}
-    </LanguageContext.Provider>
-  );
-}
-
-export function useLanguage() {
-  const context = useContext(LanguageContext);
-  if (!context) {
-    throw new Error('useLanguage must be used within a LanguageProvider');
-  }
-  return context;
-}
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\lib\i18n\languages.ts
-
-// client/src/lib/i18n/languages.ts
-export const languages = [
-  { code: 'en', name: 'English', flag: '🇺🇸' },
-  { code: 'es', name: 'Español', flag: '🇪🇸' },
-  { code: 'zh', name: 'Chinese', flag: '🇨🇳' },
-  { code: 'vi', name: 'Tiếng Việt', flag: '🇻🇳' },
-] as const;
-
-export type LanguageCode = typeof languages[number]['code'];
-
-// client/src/context/LanguageContext.tsx
-'use client';
-
-import { createContext, useContext, useState } from 'react';
-import { LanguageCode } from '@/lib/i18n/languages';
-
-interface LanguageContextType {
-  currentLanguage: LanguageCode;
-  setLanguage: (lang: LanguageCode) => void;
-  translate: (key: string) => string;
-}
-
-const LanguageContext = createContext<LanguageContextType | undefined>(undefined);
-
-export function LanguageProvider({ children }: { children: React.ReactNode }) {
-  const [currentLanguage, setCurrentLanguage] = useState<LanguageCode>('en');
-
-  const setLanguage = async (lang: LanguageCode) => {
-    // Here you would integrate with Azure Translator API
-    // For now, we'll just set the language
-    setCurrentLanguage(lang);
-  };
-
-  const translate = (key: string) => {
-    // Here you would use Azure Translator API to translate the text
-    // For now, we'll return the key
-    return key;
-  };
-
-  return (
-    <LanguageContext.Provider value={{ currentLanguage, setLanguage, translate }}>
-      {children}
-    </LanguageContext.Provider>
-  );
-}
-
-export function useLanguage() {
-  const context = useContext(LanguageContext);
-  if (context === undefined) {
-    throw new Error('useLanguage must be used within a LanguageProvider');
-  }
-  return context;
-}
-
-// client/src/components/layout/LanguageSelector.tsx
-'use client';
-
-import { useState } from 'react';
-import { Globe } from 'lucide-react';
-import { useLanguage } from '@/context/LanguageContext';
-import { languages } from '@/lib/i18n/languages';
-
-export default function LanguageSelector() {
-  const [isOpen, setIsOpen] = useState(false);
-  const { currentLanguage, setLanguage } = useLanguage();
-
-  return (
-    <div className="relative">
-      <button
-        onClick={() => setIsOpen(!isOpen)}
-        className="flex items-center space-x-2 px-3 py-2 rounded-md hover:bg-gray-100"
-      >
-        <Globe className="h-5 w-5" />
-        <span>{languages.find(l => l.code === currentLanguage)?.flag}</span>
-      </button>
-
-      {isOpen && (
-        <div className="absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5">
-          <div className="py-1" role="menu">
-            {languages.map((lang) => (
-              <button
-                key={lang.code}
-                onClick={() => {
-                  setLanguage(lang.code);
-                  setIsOpen(false);
-                }}
-                className={`w-full text-left px-4 py-2 text-sm hover:bg-gray-100 flex items-center space-x-2 ${
-                  currentLanguage === lang.code ? 'bg-gray-50 text-[var(--panda-red)]' : ''
-                }`}
-              >
-                <span>{lang.flag}</span>
-                <span>{lang.name}</span>
-              </button>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\lib\api.ts
-
-import axios from 'axios';
-
-const api = axios.create({
-  baseURL: process.env.NEXT_PUBLIC_API_URL || '/api',
-  timeout: 10000,
-  headers: {
-    'Content-Type': 'application/json',
-  },
-});
-
-// Add request interceptor
-api.interceptors.request.use((config) => {
-  // Get token from localStorage
-  const token = typeof window !== 'undefined' ? localStorage.getItem('token') : null;
-  
-  if (token) {
-    config.headers.Authorization = `Bearer ${token}`;
-  }
-  
-  return config;
-});
-
-// Add response interceptor
-api.interceptors.response.use(
-  (response) => response,
-  (error) => {
-    if (error.response?.status === 401) {
-      // Handle unauthorized access
-      if (typeof window !== 'undefined') {
-        localStorage.removeItem('token');
-        window.location.href = '/login';
-      }
-    }
-    return Promise.reject(error);
-  }
-);
-
-export default api;
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\lib\db.ts
-
-import { Pool, PoolConfig } from 'pg';
-
-const dbConfig: PoolConfig = {
-  user: process.env.POSTGRES_USER || 'team_6b',
-  host: process.env.POSTGRES_HOST || 'csce-315-db.engr.tamu.edu',
-  database: process.env.POSTGRES_DB || 'team_6b_db',
-  password: process.env.POSTGRES_PASSWORD || 'kartana',
-  port: parseInt(process.env.POSTGRES_PORT || '5432'),
-  ssl: {
-    rejectUnauthorized: false
-  }
-};
-
-const pool = new Pool(dbConfig);
-
-export async function executeQuery(query: string, params?: any[]) {
-  try {
-    const result = await pool.query(query, params);
-    return result.rows;
-  } catch (error) {
-    console.error('Database query error:', error);
-    throw error;
-  }
-}
-
-export default pool;
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\types\index.ts
-
-// src/types/index.ts
-
-export interface ComboComponent {
-    menuItemId: string;
-    name: string;
-    quantity: number;
-    category: 'entree' | 'side';
-  }
-  
-  export interface OrderItem {
-    menuItemId: string;
-    name: string;
-    quantity: number;
-    price: number;
-    category: 'entree' | 'side' | 'drink' | 'appetizer' | 'combo';
-    components?: ComboComponent[]; // For combo items
-  }
-  
-  export interface Order {
-    id?: string;
-    items: OrderItem[];
-    subtotal: number;
-    tax: number;
-    tip?: number;
-    total: number;
-    status?: 'pending' | 'preparing' | 'ready' | 'completed' | 'cancelled';
-    createdAt?: string;
-  }
-
-  export interface MenuItem {
-    id: string;
-    name: string;
-    description: string;
-    price: number;
-    category: 'combo' | 'entree' | 'side' | 'drink' | 'appetizer';
-    imageUrl: string;
-    available: boolean;
-    selectedSide?: MenuItem | null;  // Allow null explicitly
-    selectedEntrees?: MenuItem[];
-  }
-
-  export interface Employee {
-    employee_id: string;
-    name: string;
-    salary: number;
-    position: string;
-  }
-  
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\types\translations.ts
-
-// client/src/types/translations.ts
-import { LanguageCode } from '@/context/LanguageContext';
-
-export interface TranslationKey {
-  [key: string]: {
-    [key in LanguageCode]: string;
-  };
-}
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\utils\employees.ts
-
-import { Employee } from '@/types';
-
-
-export const employees: Employee[] = [
-    {
-      employee_id: 'E001',
-      name: 'John Smith',
-      salary: 55000,
-      position: 'Manager',
-    },
-    {
-      employee_id: 'E002',
-      name: 'Sarah Johnson',
-      salary: 48000,
-      position: 'Assistant Manager',
-    },
-    {
-      employee_id: 'E003',
-      name: 'Michael Lee',
-      salary: 42000,
-      position: 'Chef',
-    },
-    {
-      employee_id: 'E004',
-      name: 'Emily Davis',
-      salary: 38000,
-      position: 'Server',
-    },
-    {
-      employee_id: 'E005',
-      name: 'David Wilson',
-      salary: 36000,
-      position: 'Cashier',
-    },
-    {
-      employee_id: 'E006',
-      name: 'Jessica Brown',
-      salary: 40000,
-      position: 'Sous Chef',
-    },
-    {
-      employee_id: 'E007',
-      name: 'Robert Taylor',
-      salary: 35000,
-      position: 'Dishwasher',
-    },
-    {
-      employee_id: 'E008',
-      name: 'Amanda Martinez',
-      salary: 38000,
-      position: 'Server',
-    },
-    {
-      employee_id: 'E009',
-      name: 'Christopher Anderson',
-      salary: 37000,
-      position: 'Host',
-    },
-    {
-      employee_id: 'E010',
-      name: 'Lisa Thompson',
-      salary: 39000,
-      position: 'Bartender',
-    },
-  ];
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\src\utils\menuItems.ts
-
-import { MenuItem } from '@/types';
-
-
-// Capitalizes the first letter of each word in a string
-const capitalizeWords = (str: string): string => {
-  return str
-    .split(' ') // Split the string into words
-    .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()) // Capitalize each word
-    .join(' '); // Join the words back into a string
-};
-
-export const fetchMenuItems = async (): Promise<MenuItem[]> => {
-    // Initialize populatedItems with the combo items already included
-    const populatedItems: MenuItem[] = [
-      {
-        id: '41',
-        name: 'Bowl',
-        description: '1 Side & 1 Entree',
-        price: 8.30,
-        category: 'combo',
-        imageUrl: '/images/combos/bowl.png',
-        available: true
-      },
-      {
-        id: '42',
-        name: 'Plate',
-        description: '1 Side & 2 Entrees',
-        price: 9.80,
-        category: 'combo',
-        imageUrl: '/images/combos/plate.png',
-        available: true
-      },
-      {
-        id: '43',
-        name: 'Bigger Plate',
-        description: '1 Side & 3 Entrees',
-        price: 11.30,
-        category: 'combo',
-        imageUrl: '/images/combos/biggerPlate.png',
-        available: true
-      }
-    ];
-
-    // Define the remaining static items without prices
-    const staticItems: Omit<MenuItem, 'price'>[] = [
-      {
-        id: '1',
-        name: 'The Original Orange Chicken',
-        description: 'Crispy chicken wok-tossed in a sweet and spicy orange sauce',
-        category: 'entree',
-        imageUrl: '/images/entrees/the_original_orange_chicken.png',
-        available: true
-      },
-      {
-        id: '2',
-        name: 'Beijing Beef',
-        description: 'Crispy beef wok-tossed with bell peppers and onions',
-        category: 'entree',
-        imageUrl: '/images/entrees/beijing_beef.png',
-        available: true
-      },
-      {
-        id: '3',
-        name: 'Black Pepper Chicken',
-        description: 'Marinated chicken, celery, and onions in a bold black pepper sauce',
-        category: 'entree',
-        imageUrl: '/images/entrees/black_pepper_chicken.png',
-        available: true
-      },
-      {
-        id: '4',
-        name: 'Black Pepper Sirloin Steak',
-        description: 'Sirloin steak wok-seared with baby broccoli, onions, red bell peppers, and mushrooms in a savory black pepper sauce',
-        category: 'entree',
-        imageUrl: '/images/entrees/black_pepper_sirloin_steak.png',
-        available: true
-      },
-      {
-        id: '5',
-        name: 'Broccoli Beef',
-        description: 'Tender beef and fresh broccoli in a ginger soy sauce',
-        category: 'entree',
-        imageUrl: '/images/entrees/broccoli_beef.png',
-        available: true
-      },
-      {
-        id: '6',
-        name: 'Beijing Beef',
-        description: 'Crispy beef wok-tossed with bell peppers and onions',
-        category: 'entree',
-        imageUrl: '/images/entrees/beijing_beef.png',
-        available: true
-      },
-      {
-        id: '7',
-        name: 'Grilled Teriyaki Chicken',
-        description: 'Grilled Chicken hand-sliced to order and served with teriyaki sauce',
-        category: 'entree',
-        imageUrl: '/images/entrees/grilled_teriyaki_chicken.png',
-        available: true
-      },
-      {
-        id: '8',
-        name: 'Honey Sesame Chicken',
-        description: 'Crispy strips of white-meat chicken with veggies ina mildly sweet sauce with organic honey',
-        category: 'entree',
-        imageUrl: '/images/entrees/honey_sesame_chicken_breast.png',
-        available: true
-      },
-      {
-        id: '9',
-        name: 'Honey Walnut Shrimp',
-        description: 'Large tempura-battered shrimp, work-tossed in a honey sauce and topped with glazed walnuts',
-        category: 'entree',
-        imageUrl: '/images/entrees/honey_walnut_shrimp.png',
-        available: true
-      },
-      {
-        id: '10',
-        name: 'Hot Ones Blazing Bourbon Chicken',
-        description: 'Crispy boneless chicken bites and veggies wok-tossed in an extra spicy and sweet bourbon sauce',
-        category: 'entree',
-        imageUrl: '/images/entrees/hot_ones_blazing_bourbon_chicken.png',
-        available: true
-      },
-      {
-        id: '11',
-        name: 'Kung Pao Chicken',
-        description: 'A Sichuan-inspired dish with chicken, peanuts and vegetables, finished with chili pepppers',
-        category: 'entree',
-        imageUrl: '/images/entrees/kung_pao_chicken.png',
-        available: true
-      },
-      {
-        id: '12',
-        name: 'Mushroom Chicken',
-        description: 'A delicate combination of chicken, mushrooms and zucchini wok-tossed with a light ginger soy sauce',
-        category: 'entree',
-        imageUrl: '/images/entrees/mushroom_chicken.png',
-        available: true
-      },
-      {
-        id: '13',
-        name: 'String Bean Chicken',
-        description: 'Chicken breast, string beans and onions wok-tossed in a mild ginger soy sauce',
-        category: 'entree',
-        imageUrl: '/images/entrees/string_bean_chicken_breast.png',
-        available: true
-      },
-      {
-        id: '14',
-        name: 'SweetFire Chicken',
-        description: 'Crispy, white-meat chicken, red bell peppers, onions and pineapples in a bright and sweet chili sauce',
-        category: 'entree',
-        imageUrl: '/images/entrees/sweetfire_chicken_breast.png',
-        available: true
-      },
-      {
-        id: '15',
-        name: 'Chow Mein',
-        description: 'Stir-fried wheat noodles with onions and celery',
-        category: 'side',
-        imageUrl: '/images/sides/chow_mein.png',
-        available: true
-      },
-      {
-        id: '16',
-        name: 'Fried Rice',
-        description: 'Prepared steamed white rice with soy sauce, eggs, peas, carrots and green onions',
-        category: 'side',
-        imageUrl: '/images/sides/fried_rice.png',
-        available: true
-      },
-      {
-        id: '17',
-        name: 'Super Greens',
-        description: 'A healthful medley of broccoli, kale, and cabbage',
-        category: 'side',
-        imageUrl: '/images/sides/super_greens.png',
-        available: true
-      },
-      {
-        id: '18',
-        name: 'White Steamed Rice',
-        description: 'White rice',
-        category: 'side',
-        imageUrl: '/images/sides/white_steamed_rice.png',
-        available: true
-      },
-      {
-        id: '19',
-        name: 'Apple Pie Roll',
-        description: 'Juicy apples and fall spices in a crispy rolled pastry, finished with cinnamon sugar',
-        category: 'appetizer',
-        imageUrl: '/images/appetizers/apple_pie_roll.png',
-        available: true
-      },
-      {
-        id: '20',
-        name: 'Chicken Egg Roll',
-        description: 'Cabbage, carrots, green onions and chicken in a crispy wonton wrapper',
-        category: 'appetizer',
-        imageUrl: '/images/appetizers/chicken_egg_roll.png',
-        available: true
-      },
-      {
-        id: '21',
-        name: 'Cream Cheese Rangoon',
-        description: 'Wonton wrappers filled with cream cheese and served with sweet and sour sauce',
-        category: 'appetizer',
-        imageUrl: '/images/appetizers/cream_cheese_rangoon.png',
-        available: true
-      },
-      {
-        id: '22',
-        name: 'Veggie Egg Roll',
-        description: 'Cabbage, celery, carrots, green onions and Chinese noodles in a crispy wonton wrapper',
-        category: 'appetizer',
-        imageUrl: '/images/appetizers/veggie_spring_roll.png',
-        available: true
-      },
-      {
-        id: '23',
-        name: "Barq's Root Beer",
-        description: '',
-        category: 'drink',
-        imageUrl: '/images/drinks/barqs_root_beer.png',
-        available: true
-      },
-      {
-        id: '24',
-        name: 'Coca-Cola',
-        description: '',
-        category: 'drink',
-        imageUrl: '/images/drinks/coca_cola.png',
-        available: true
-      },      
-      {
-        id: '25',
-        name: 'Coke Mexico 12oz Bottle',
-        description: '',
-        category: 'drink',
-        imageUrl: '/images/drinks/coke_mexico.png',
-        available: true
-      },
-      {
-        id: '26',
-        name: 'Coke Zero 20oz Bottle',
-        description: '',
-        category: 'drink',
-        imageUrl: '/images/drinks/coke_zero.png',
-        available: true
-      },
-      {
-        id: '27',
-        name: 'Dasani 16oz Bottle',
-        description: '',
-        category: 'drink',
-        imageUrl: '/images/drinks/dasani.png',
-        available: true
-      },
-      {
-        id: '28',
-        name: 'Diet Coke',
-        description: '',
-        category: 'drink',
-        imageUrl: '/images/drinks/diet_coke.png',
-        available: true
-      },
-      {
-        id: '29',
-        name: 'Dr. Pepper',
-        description: '',
-        category: 'drink',
-        imageUrl: '/images/drinks/dr_pepper.png',
-        available: true
-      },
-      {
-        id: '30',
-        name: 'Fanta Orange',
-        description: '',
-        category: 'drink',
-        imageUrl: '/images/drinks/fanta_orange.png',
-        available: true
-      },
-      {
-        id: '31',
-        name: 'Fuze Raspberry Iced Tea',
-        description: '',
-        category: 'drink',
-        imageUrl: '/images/drinks/fize_raspberry_iced_tea.png',
-        available: true
-      },
-      {
-        id: '32',
-        name: 'Minute Maid Apple Juice 12oz Bottle',
-        description: '',
-        category: 'drink',
-        imageUrl: '/images/drinks/minute_maid_apple_juice.png',
-        available: true
-      },
-      {
-        id: '33',
-        name: 'Minute Maid Lemonade',
-        description: '',
-        category: 'drink',
-        imageUrl: '/images/drinks/minute_maid_lemonade.png',
-        available: true
-      },
-      {
-        id: '34',
-        name: 'Mango Guava Flavored Tea',
-        description: '',
-        category: 'drink',
-        imageUrl: '/images/drinks/passion_mango_black_tea.png',
-        available: true
-      },
-      {
-        id: '35',
-        name: 'Peach Lychee Flavored Refresher',
-        description: '',
-        category: 'drink',
-        imageUrl: '/images/drinks/peach_lychee_flavored_refresher.png',
-        available: true
-      },
-      {
-        id: '36',
-        name: 'Pomegranate Pineapple Flavored Lemonade',
-        description: '',
-        category: 'drink',
-        imageUrl: '/images/drinks/pomegranite_pineapple_flavored_lemonade.png',
-        available: true
-      },
-      {
-        id: '37',
-        name: 'Smartwater 700ml Bottle',
-        description: '',
-        category: 'drink',
-        imageUrl: '/images/drinks/smartwater.png',
-        available: true
-      },
-      {
-        id: '38',
-        name: 'Sprite',
-        description: '',
-        category: 'drink',
-        imageUrl: '/images/drinks/sprite.png',
-        available: true
-      },
-      {
-        id: '39',
-        name: 'Watermelon Mango Flavored Refresher',
-        description: '',
-        category: 'drink',
-        imageUrl: '/images/drinks/watermelon_mango_flavored_refresher.png',
-        available: true
-      },
-      {
-        id: '40',
-        name: 'Sprite',
-        description: '',
-        category: 'drink',
-        imageUrl: '/images/drinks/sprite.png',
-        available: true
-      },
-      {
-        id: '41',
-        name: 'Powerade Mountain Berry Blast',
-        description: '',
-        category: 'drink',
-        imageUrl: '/images/drinks/powerade_berry_blast.png',
-        available: true
-      },
-      {
-        id: '42',
-        name: 'Coca Cola Cherry',
-        description: '',
-        category: 'drink',
-        imageUrl: '/images/drinks/coca_cola_cherry.png',
-        available: true
-      }
-
-    ];
-    try {
-      // Fetch all menu items using the /items endpoint
-      const response = await fetch(`http://localhost:4000/api/menu-items/all`);
-      if (!response.ok) {
-        throw new Error('Failed to fetch menu items');
-      }
-  
-      const allItems = await response.json(); // Assuming it returns an array of { name, category, price }
-      console.log('API Response:', allItems);
-      let idNum = 4;
-      for (const item of allItems) {
-        try {
-          //console.log(`Fetching price for: ${item.name}, Category: ${item.category}`);
-          const priceResponse = await fetch(
-            `http://localhost:4000/api/menu-items/price?name=${item.name}&category=${item.category}`
-          );
-
-          if (!priceResponse.ok) {
-            console.warn(`Price not found for ${item.name} (${item.category}).`);
-            continue; // Skip this item if the price is unavailable
-          }
-
-          const priceData = await priceResponse.json();
-          console.log(`Price data for ${item.name}:`, priceData);
-  
-          // Find a matching static item for description and imageUrl
-          const staticItem = staticItems.find(
-            (staticItem) =>
-              staticItem.name.toLowerCase() === item.name.toLowerCase()
-          );
-          if (!staticItem) {
-            console.warn(`No matching static item for ${item.name}`);
-          }
-          
-          // Capitalize the item name
-          const capitalizedName = capitalizeWords(item.name);
-
-          // Determine the category based on priceData.type
-          let category = item.category;
-          if (priceData.type !== undefined) { //this means category is entree_side
-            category = priceData.type ? "entree" : "side";
-          }
-          else if (item.category === "drink_table"){
-            category = "drink";
-          }
-          else if (item.category === "appetizers"){
-            category = "appetizer";
-          }
-
-          // Push the enriched item into populatedItems
-          populatedItems.push({
-            id: idNum.toString(), // You can set this dynamically if needed
-            name: capitalizedName, // Use the capitalized name
-            category,
-            price: priceData.price || 0,
-            description: staticItem?.description || '',
-            imageUrl: staticItem?.imageUrl || '',
-            available: true
-          });
-        } catch (error) {
-          console.error(`Error fetching price for ${item.name}:`, error);
-        }
-        idNum += 1;
-        if (idNum == 41){ //skip straight to 44 bc combos are 41-43
-          idNum = 44;
-        }
-      }
-    } catch (error) {
-      console.error('Error fetching menu items:', error);
-    }
-  
-    return populatedItems;
-};
-
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\.eslintrc.json
-
-{
-    "extends": ["next/core-web-vitals", "next/typescript"]
-  }
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\next-env.d.ts
-
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\package.json
-
-{
-  "name": "panda-express-pos-client",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  },
-  "dependencies": {
-    "@heroicons/react": "^2.1.5",
-    "@langchain/core": "^0.3.18",
-    "@langchain/openai": "^0.3.13",
-    "@radix-ui/react-dialog": "^1.1.2",
-    "axios": "^1.7.7",
-    "clsx": "^2.0.0",
-    "cors": "^2.8.5",
-    "date-fns": "^4.1.0",
-    "dotenv": "^16.4.5",
-    "express": "^4.21.1",
-    "langchain": "^0.3.5",
-    "lucide-react": "^0.263.1",
-    "next": "^14.2.17",
-    "openai": "^4.72.0",
-    "pdf-parse": "^1.1.1",
-    "pg": "^8.13.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "recharts": "^2.13.0",
-    "tailwind-merge": "^2.5.4"
-  },
-  "devDependencies": {
-    "@types/cors": "^2.8.17",
-    "@types/express": "^5.0.0",
-    "@types/node": "^20.9.0",
-    "@types/pdf-parse": "^1.1.4",
-    "@types/pg": "^8.11.10",
-    "@types/react": "18.2.37",
-    "autoprefixer": "10.4.16",
-    "postcss": "8.4.31",
-    "tailwindcss": "3.3.5",
-    "typescript": "5.2.2"
-  }
-}
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\postcss.config.js
-
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\tailwind.config.js
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
-  ],
-  theme: {
-    extend: {
-      colors: {
-        'panda-red': 'var(--panda-red)',
-        'panda-dark-red': 'var(--panda-dark-red)',
-        'panda-gold': 'var(--panda-gold)',
-        'panda-light-gold': 'var(--panda-light-gold)',
-        'panda-cream': 'var(--panda-cream)',
-      },
-    },
-  },
-  plugins: [],
-}
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\tailwind.config.ts
-
-import type { Config } from "tailwindcss";
-
-const config: Config = {
-  content: [
-    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      colors: {
-        background: "var(--background)",
-        foreground: "var(--foreground)",
-      },
-    },
-  },
-  plugins: [],
-};
-export default config;
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\client\tsconfig.json
-
-{
-    "compilerOptions": {
-      "lib": ["dom", "dom.iterable", "esnext"],
-      "allowJs": true,
-      "skipLibCheck": true,
-      "strict": true,
-      "noEmit": true,
-      "esModuleInterop": true,
-      "module": "esnext",
-      "moduleResolution": "bundler",
-      "resolveJsonModule": true,
-      "isolatedModules": true,
-      "jsx": "preserve",
-      "incremental": true,
-      "plugins": [
-        {
-          "name": "next"
-        }
-      ],
-      "paths": {
-        "@/*": ["./src/*"]
-      }
-    },
-    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/components/chat/route.js"],
-    "exclude": ["node_modules"]
-  }
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\server\myapp\index.js
-
-const express = require('express');
-const app = express();
-const port = 3000;
-
-app.get('/', (req, res) => {
-    res.send('Hello World!');
-});
-app.get('/user', (req, res) => {
-    res.send('Hi User!');
-});
-
-app.listen(port, () => {
-    console.log(`Example app listening at http://localhost:${port}`);
-});
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\server\myapp\package.json
-
-{
-  "name": "myapp",
-  "version": "1.0.0",
-  "description": "test express",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "erin",
-  "license": "ISC",
-  "dependencies": {
-    "ejs": "^3.1.10",
-    "express": "^4.21.1"
-  }
-}
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\server\src\config\db.ts
-
-// server/src/config/db.ts
-
-import { Pool, PoolConfig, QueryResult } from 'pg';
-import dotenv from 'dotenv';
-
-dotenv.config();
-
-const dbConfig: PoolConfig = {
-  user: process.env.POSTGRES_USER || 'team_6b',
-  host: process.env.POSTGRES_HOST || 'csce-315-db.engr.tamu.edu',
-  database: process.env.POSTGRES_DB || 'team_6b_db',
-  password: process.env.POSTGRES_PASSWORD || 'kartana',
-  port: parseInt(process.env.POSTGRES_PORT || '5432'),
-  ssl: {
-    rejectUnauthorized: false
-  }
-};
-
-class Database {
-  private static instance: Database;
-  private pool: Pool;
-
-  private constructor() {
-    this.pool = new Pool(dbConfig);
-
-    // Error handling
-    this.pool.on('error', (err) => {
-      console.error('Unexpected error on idle client', err);
-      process.exit(-1);
-    });
-  }
-
-  public static getInstance(): Database {
-    if (!Database.instance) {
-      Database.instance = new Database();
-    }
-    return Database.instance;
-  }
-
-  // Test database connection
-  public async testConnection(): Promise<boolean> {
-    try {
-      const client = await this.pool.connect();
-      await client.query('SELECT NOW()');
-      client.release();
-      console.log('Database connection test successful');
-      return true;
-    } catch (error) {
-      console.error('Database connection test failed:', error);
-      return false;
-    }
-  }
-
-  // Execute a query with error handling and logging
-  public async query(text: string, params?: any[]): Promise<QueryResult> {
-    const start = Date.now();
-    try {
-      const result = await this.pool.query(text, params);
-      const duration = Date.now() - start;
-      console.log('Executed query', {
-        text,
-        duration,
-        rows: result.rowCount
-      });
-      return result;
-    } catch (error) {
-      console.error('Error executing query:', error);
-      throw error;
-    }
-  }
-
-  // Get a client from the pool
-  public async getClient() {
-    return await this.pool.connect();
-  }
-
-  // Close the pool
-  public async close() {
-    await this.pool.end();
-  }
-}
-
-// Export singleton instance
-export const db = Database.getInstance();
-export default db;
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\server\src\config\types.ts
-
-export interface DatabaseConfig {
-    user: string;
-    host: string;
-    database: string;
-    password: string;
-    port: number;
-    ssl: {
-      rejectUnauthorized: boolean;
-    };
-  }
-  
-  export interface OrderDetails {
-    entree_side: any[];
-    drink_table: any[];
-    appetizers: any[];
-    free_items: any[];
-  }
-  
-  export interface DbOrder {
-    order_id: number;
-    order_date: Date;
-    total_price: number;
-    order_details: OrderDetails;
-  }
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\server\src\controllers\authController.ts
-
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\server\src\controllers\employeeController.ts
-
-import { Request, Response } from 'express';
-import db from '../config/db'; 
-
-interface Employee {
-  employee_id: string;
-  name: string;
-  salary: number;
-  position: string;
-}
-
-// Initialize employeeMap
-let employeeMap: Record<string, Employee> = {};
-
-// Function to load employees from the database
-async function loadEmployees() {
-
-  console.log("getting employees")
-  try {
-    const result = await db.query(`
-      SELECT employee_id, LOWER(TRIM(name)) as name, salary, position 
-      FROM employees
-    `);
-
-    employeeMap = result.rows.reduce((acc: Record<string, Employee>, row: any) => {
-      acc[row.name] = {
-        employee_id: row.employee_id,
-        name: row.name,
-        salary: Number(row.salary),
-        position: row.position
-      };
-      return acc;
-    }, {});
-
-    // Add alternative names if necessary (e.g., for nicknames or common variations)
-    employeeMap['bob'] = employeeMap['robert'];
-    employeeMap['bill'] = employeeMap['william'];
-
-    console.log('Employees loaded successfully.');
-  } catch (error) {
-    console.error('Failed to load employees:', error);
-  }
-}
-
-// Call loadMenuItems at startup
-loadEmployees();
-
-// Controller function to get all employees
-export const getAllEmployees = async (req: Request, res: Response) => {
-  const query = `SELECT employee_id, name, salary, position FROM employees`;
-  console.log("getting all employees")
-  try {
-    
-    const result = await db.query(query);
-    const employees = result.rows.map((row: any) => ({
-      employee_id: row.employee_id,
-      name: row.name,
-      salary: row.salary,
-      position: row.position,
-    }));
-
-    res.json(employees);
-  } catch (error) {
-    console.error('Error fetching employees:', error);
-    res.status(500).json({ error: 'Failed to fetch employees!' });
-  }
-};
-
-// Controller function to add a new employee
-export const addEmployee = async (req: Request, res: Response) => {
-  const { employee_id, name, salary, position } = req.body;
-  
-  console.log("hi")
-  if (!employee_id || !name || !salary || !position) {
-    return res.status(400).json({ error: 'All fields are required!!' });
-  }
-  console.log(employee_id, name, salary, position);
-  const query = `INSERT INTO employees (employee_id, name, salary, position) VALUES ($1, $2, $3, $4) RETURNING *`;
-
-  try {
-    const result = await db.query(query, [employee_id, name, parseFloat(salary), position]);
-    res.status(201).json(result.rows[0]);
-  } catch (error) {
-    console.error('Error adding employee:', error);
-    res.status(500).json({ error: 'Failed to add employee' });
-  }
-};
-
-// Controller function to update an employee
-export const updateEmployee = async (req: Request, res: Response) => {
-  const { employee_id, name, salary, position } = req.body;
-
-  if (!employee_id || !salary || !position) {
-    return res.status(400).json({ error: 'All fields are required!!!' });
-  }
-
-  const query = `UPDATE employees SET salary = $1, position = $2 WHERE employee_id = $3 RETURNING *`;
-  //const query = `UPDATE employees SET salary = $1, position = $2 id = $3 WHERE name = $4 RETURNING *`;
-
-  try {
-    const result = await db.query(query, [parseFloat(salary), position, employee_id]);
-    if (result.rowCount === 0) {
-      return res.status(404).json({ error: 'Employee not found' });
-    }
-    res.json(result.rows[0]);
-  } catch (error) {
-    console.error('Error updating employee:', error);
-    res.status(500).json({ error: 'Failed to update employee' });
-  }
-};
-
-// Controller function to delete an employee
-export const deleteEmployee = async (req: Request, res: Response) => {
-  const { employee_id } = req.body;
-
-  if (!employee_id) {
-    return res.status(400).json({ error: 'Employee ID is required' });
-  }
-
-  const query = `DELETE FROM employees WHERE employee_id = $1 RETURNING *`;
-
-  try {
-    const result = await db.query(query, [employee_id]);
-    if (result.rowCount === 0) {
-      return res.status(404).json({ error: 'Employee not found' });
-    }
-    res.json(result.rows[0]);
-  } catch (error) {
-    console.error('Error deleting employee:', error);
-    res.status(500).json({ error: 'Failed to delete employee' });
-  }
-};
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\server\src\controllers\managerController.ts
-
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\server\src\controllers\menuController.ts
-
-import { Request, Response } from 'express';
-import db from '../config/db'; 
-
-interface MenuItem {
-  id: number;
-  type: string;
-}
-
-// Initialize menuItemMap
-let menuItemMap: Record<string, MenuItem> = {};
-
-// Function to load menu items from the database
-async function loadMenuItems() {
-  try {
-    const result = await db.query(`
-      SELECT id, LOWER(TRIM(name)) as name, 'entree_side' as type FROM entree_side
-      UNION ALL
-      SELECT id, LOWER(TRIM(name)) as name, 'drink_table' as type FROM drink_table
-      UNION ALL
-      SELECT id, LOWER(TRIM(name)) as name, 'appetizers' as type FROM appetizers
-    `);
-
-    menuItemMap = result.rows.reduce((acc: Record<string, MenuItem>, row: any) => {
-      acc[row.name] = { id: Number(row.id), type: row.type };
-      return acc;
-    }, {});
-
-    // Add alternative names if necessary
-    menuItemMap['honey sesame chicken breast'] = menuItemMap['honey sesame chicken'];
-    menuItemMap['dasani'] = menuItemMap['dasani 16oz bottle'];
-    // Add any other necessary alternative names
-
-    console.log('Menu items loaded successfully.');
-  } catch (error) {
-    console.error('Failed to load menu items:', error);
-  }
-}
-
-// Call loadMenuItems at startup
-loadMenuItems();
-
-// fetch all the menu items from the database
-export const getAllMenuItems = async (req: Request, res: Response) => {
-  try {
-    // Query to fetch menu items from all tables
-    const result = await db.query(`
-      SELECT name, retail_price, 'entree_side' as category FROM entree_side
-      UNION ALL
-      SELECT name, retail_price, 'drink_table' as category FROM drink_table
-      UNION ALL
-      SELECT name, retail_price, 'appetizers' as category FROM appetizers
-    `);
-
-    // Format the result into an array
-    const menuItems = result.rows.map((row: any) => ({
-      name: row.name,
-      price: parseFloat(row.retail_price), // Ensure price is a number
-      category: row.category,
-    }));
-
-    // Send the array back to the frontend
-    res.json(menuItems);
-  } catch (error) {
-    console.error('Failed to fetch menu items:', error);
-    res.status(500).json({ error: 'Internal Server Error' });
-  }
-};
-
-
-// export const getItemPrice = async (req: Request, res: Response) => {
-//   const { name, category } = req.query;
-//   if (!name || !category) {
-//     return res.status(400).json({ error: 'Missing name or category parameter' });
-//   }
-
-//   try {
-//     const query = `SELECT retail_price FROM ${category} WHERE LOWER(name) = LOWER($1)`;
-//     console.log('Querying:', query, 'with', [name]);
-//     const { rows } = await db.query(query, [name]);
-
-//     if (rows.length === 0) {
-//       return res.status(404).json({ error: 'Item not found' });
-//     }
-
-//     const price = rows[0].retail_price;
-//     res.json({ price });
-//   } catch (error) {
-//     console.error('Error fetching price:', error);
-//     res.status(500).json({ error: 'Internal Server Error' });
-//   }
-// };
-
-export const getItemPrice = async (req: Request, res: Response) => {
-  const { name, category } = req.query;
-
-  if (!name || !category) {
-    return res.status(400).json({ error: 'Missing name or category parameter' });
-  }
-
-  try {
-    if (category === 'entree_side') {
-      // Query both retail_price and type for entree_side
-      const query = `SELECT retail_price, type FROM entree_side WHERE LOWER(name) = LOWER($1)`;
-      console.log('Querying:', query, 'with', [name]);
-      const { rows } = await db.query(query, [name]);
-
-      if (rows.length === 0) {
-        return res.status(404).json({ error: 'Item not found' });
-      }
-
-      const { retail_price: price, type } = rows[0];
-      return res.json({ price, type });
-    } else {
-      // Query only retail_price for other categories
-      const query = `SELECT retail_price FROM ${category} WHERE LOWER(name) = LOWER($1)`;
-      const { rows } = await db.query(query, [name]);
-
-      if (rows.length === 0) {
-        return res.status(404).json({ error: 'Item not found' });
-      }
-
-      const price = rows[0].retail_price;
-      return res.json({ price });
-    }
-  } catch (error) {
-    console.error('Error fetching price:', error);
-    res.status(500).json({ error: 'Internal Server Error' });
-  }
-};
-
-
-// Controller function to get menu items
-export const getMenuItems = async (req: Request, res: Response) => {
-    try {
-        const result = await db.query(`
-          SELECT id, name, 'entree_side' AS category, retail_price AS price, inventory AS count, type as type FROM entree_side
-          UNION ALL
-          SELECT id, name, 'free_items' AS category, NULL AS price, inventory AS count, NULL AS type FROM free_items
-          UNION ALL
-          SELECT id, name, 'drink_table' AS category, retail_price AS price, inventory AS count, NULL AS type FROM drink_table
-          UNION ALL
-          SELECT id, name, 'appetizers' AS category, retail_price AS price, inventory AS count, NULL AS type FROM appetizers
-          UNION ALL
-          SELECT id, name, 'raw_items' AS category, NULL AS price, inventory AS count, NULL AS type FROM raw_items
-        `);
-        // Return the combined data from all tables
-        res.json(result.rows);
-        
-      } catch (error) {
-        console.error('Error fetching menu items:', error);
-        res.status(500).json({ error: 'Failed to fetch menu items' });
-      }
-};
-
-export const addMenuItem = async (req: Request, res: Response) => {
-  const { name, category, price, count, type } = req.body;
-
-  try {
-    let query = '';
-    let values: (string | number | boolean)[] = [name, count];
-
-    // Choose the query and values based on the specified category
-    switch (category) {
-      case 'entree_side':
-        // Get the current row count in `entree_side` table
-        const rowCountResult = await db.query('SELECT COUNT(*) FROM entree_side');
-        const rowCount = parseInt(rowCountResult.rows[0].count, 10);
-
-        // Set the new ID based on the row count
-        let newId = rowCount + 1;
-        query = `INSERT INTO entree_side (name, retail_price, wholesale_price, inventory, type, id) VALUES ($1, $2, $3, $4, $5, $6) RETURNING *`;
-        values = [name, price, 2, count, type, newId];
-        break;
-
-      case 'free_items':
-        query = `INSERT INTO free_items (name, wholesale_price, inventory) VALUES ($1, $2, $3) RETURNING *`;
-        values = [name, 0.1, count];
-        break;
-
-      case 'drink_table':
-        query = `INSERT INTO drink_table (name, retail_price, wholesale_price, inventory) VALUES ($1, $2, $3, $4) RETURNING *`;
-        values = [name, price, 1.50, count];
-        break;
-
-      case 'appetizers':
-        query = `INSERT INTO appetizers (name, retail_price, wholesale_price, inventory) VALUES ($1, $2, $3, $4) RETURNING *`;
-        values = [name, price, 1.50, count];
-        break;
-
-      case 'raw_items':
-        query = `INSERT INTO raw_items (name, wholesale_price, inventory) VALUES ($1, $2, $3) RETURNING *`;
-        values = [name, 0.5, count];
-        break;
-
-      default:
-        return res.status(400).json({ error: 'Invalid category specified' });
-    }
-
-    // Execute the query
-    const result = await db.query(query, values);
-    res.status(201).json(result.rows[0]);
-
-  } catch (error) {
-    console.error('Error adding menu item:', error);
-    res.status(500).json({ error: 'Failed to add menu item' });
-  }
-};
-
-// Controller function to update menu items
-export const updateMenuItem = async (req: Request, res: Response) => {
-  const { name, category, price, count } = req.body;
-  let query = '';
-  let values: (string | number | boolean)[] = [];
-
-  // Choose the query and values based on the specified category
-  switch (category) {
-    case 'entree_side':
-      query = `UPDATE entree_side SET retail_price = $1, inventory = $2 WHERE name = $3 RETURNING *`;
-      values = [price, count, name];
-      break;
-
-    case 'free_items':
-      query = `UPDATE free_items SET inventory = $1 WHERE name = $2 RETURNING *`;
-      values = [count, name];
-      break;
-
-    case 'drink_table':
-      query = `UPDATE drink_table SET retail_price = $1, inventory = $2 WHERE name = $3 RETURNING *`;
-      values = [price, count, name];
-      break;
-
-    case 'appetizers':
-      query = `UPDATE appetizers SET retail_price = $1, inventory = $2 WHERE name = $3 RETURNING *`;
-      values = [price, count, name];
-      break;
-
-    case 'raw_items':
-      query = `UPDATE raw_items SET inventory = $1 WHERE name = $2 RETURNING *`;
-      values = [count, name];
-      break;
-
-    default:
-      return res.status(400).json({ error: 'Invalid category specified' });
-  }
-
-  try {
-    console.log('Executing query:', query);
-    console.log('With values:', values);
-    const result = await db.query(query, values);
-    if (result.rowCount === 0) {
-      return res.status(404).json({ error: 'Item not found' });
-    }
-    // Return the updated item
-    console.log('here');
-    res.json(result.rows[0]);
-  } catch (error) {
-    console.error('Error updating menu item:', error);
-    res.status(500).json({ error: 'Failed to update menu' });
-  }
-};
-
-export const removeMenuItem = async (req: Request, res: Response) => {
-  const { category, name } = req.body;
-
-  // Validate category to ensure it's an allowed table name
-  const allowedCategories = ['entree_side', 'free_items', 'raw_items', 'appetizers', 'drink_table'];
-  if (!allowedCategories.includes(category)) {
-    return res.status(400).json({ error: 'Invalid category' });
-  }
-
-  // Check if both `category` and `name` are provided
-  if (!category || !name) {
-    return res.status(400).json({ error: 'Category and name are required' });
-  }
-
-  // Define parameterized DELETE query
-  const query = `DELETE FROM ${category} WHERE name = $1 RETURNING *`;
-  const values = [name];
-
-  try {
-    const result = await db.query(query, values);
-    if (result.rowCount === 0) {
-      return res.status(404).json({ error: 'Item not found' });
-    }
-
-    // Return the deleted item
-    res.json(result.rows[0]);
-  } catch (error) {
-    console.error('Error removing menu item:', error);
-    res.status(500).json({ error: 'Failed to remove menu item' });
-  }
-};
-
-
-
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\server\src\controllers\orderController.ts
-
-import { Request, Response } from 'express';
-import db from '../config/db'; 
-
-interface MenuItem {
-  id: number;
-  type: string;
-}
-
-// Initialize menuItemMap
-let menuItemMap: Record<string, MenuItem> = {};
-
-// Function to load menu items from the database
-async function loadMenuItems() {
-  try {
-    const result = await db.query(`
-      SELECT id, LOWER(TRIM(name)) as name, 'entree_side' as type FROM entree_side
-      UNION ALL
-      SELECT id, LOWER(TRIM(name)) as name, 'drink_table' as type FROM drink_table
-      UNION ALL
-      SELECT id, LOWER(TRIM(name)) as name, 'appetizers' as type FROM appetizers
-    `);
-
-    menuItemMap = result.rows.reduce((acc: Record<string, MenuItem>, row: any) => {
-      acc[row.name] = { id: Number(row.id), type: row.type };
-      return acc;
-    }, {});
-
-    // Add alternative names if necessary
-    menuItemMap['honey sesame chicken breast'] = menuItemMap['honey sesame chicken'];
-    menuItemMap['dasani'] = menuItemMap['dasani 16oz bottle'];
-    // Add any other necessary alternative names
-
-    console.log('Menu items loaded successfully.');
-  } catch (error) {
-    console.error('Failed to load menu items:', error);
-  }
-}
-
-// Call loadMenuItems at startup
-loadMenuItems();
-
-// Function to normalize and map item name to ID and type
-function normalizeAndMapItem(name: string): MenuItem | null {
-  const lowercaseName = name.toLowerCase().trim();
-  return menuItemMap[lowercaseName] || null;
-}
-
-// Function to check if item is a drink
-function isDrinkItem(item: { menuItemId: string; name: string }): boolean {
-  // First check menuItemMap
-  const mapped = normalizeAndMapItem(item.name);
-  if (mapped?.type === 'drink_table') return true;
-
-  // Then check by keywords
-  const lowercaseName = item.name.toLowerCase();
-  const drinkKeywords = ['drink', 'tea', 'lemonade', 'water', 'coke', 'sprite', 'fanta', 'juice', 'pepsi', 'dr pepper', 'root beer', 'powerade'];
-  return drinkKeywords.some(keyword => lowercaseName.includes(keyword));
-}
-
-// Function to parse combo items
-function parseComboItems(comboName: string): { entrees: number[]; side: number } | null {
-  const match = comboName.match(/^(Bowl|Plate|Bigger Plate)\s*\((.*)\)$/i);
-  if (!match) return null;
-
-  const items = match[2].split(',').map(item => item.trim());
-  const side = items[items.length - 1];
-  const entrees = items.slice(0, -1);
-
-  // Map side to correct ID
-  const mappedSide = normalizeAndMapItem(side);
-  if (!mappedSide) {
-    console.error(`Could not map side item: ${side}`);
-    return null;
-  }
-
-  // Map entrees to their IDs
-  const mappedEntrees = entrees.map(entree => {
-    const mapped = normalizeAndMapItem(entree);
-    if (!mapped) {
-      console.error(`Could not map entree: ${entree}`);
-      return null;
-    }
-    return mapped.id;
-  }).filter(id => id !== null) as number[];
-
-  if (mappedEntrees.length !== entrees.length) {
-    console.error('Some entrees could not be mapped');
-    return null;
-  }
-
-  return {
-    entrees: mappedEntrees,
-    side: mappedSide.id
-  };
-}
-
-interface OrderItem {
-  menuItemId: string;
-  name: string;
-  quantity: number;
-  price: number;
-}
-
-export const createOrder = async (req: Request, res: Response) => {
-  const client = await db.connect(); // Acquire a client from the pool
-  try {
-    const { items, total } = req.body;
-    console.log('Received order items:', items);
-
-    await client.query('BEGIN'); // Start transaction on this client
-
-    try {
-      // Use client.query(...) for all queries within the transaction
-
-      // Separate drinks, appetizers, and food items
-      const drinkItems = items.filter(item => isDrinkItem(item));
-      const appetizerItems = items.filter(item => {
-        const mapped = normalizeAndMapItem(item.name);
-        return mapped?.type === 'appetizers';
-      });
-      const foodItems = items.filter(item => !isDrinkItem(item) && !appetizerItems.includes(item));
-      console.log('Identified drink items:', drinkItems);
-      console.log('Identified appetizer items:', appetizerItems);
-
-      // Process food items including combo contents
-      const processedItems = foodItems.flatMap(item => {
-        if (['41', '42', '43'].includes(item.menuItemId)) {
-          const combo = parseComboItems(item.name);
-          if (!combo) {
-            console.error(`Failed to parse combo: ${item.name}`);
-            return [];
-          }
-          return [
-            ...combo.entrees.map(id => ({
-              menuItemId: id,
-              quantity: item.quantity,
-              isCombo: true,
-              type: 'entree_side'
-            })),
-            {
-              menuItemId: combo.side,
-              quantity: item.quantity,
-              isCombo: true,
-              type: 'entree_side'
-            }
-          ];
-        }
-
-        // For regular items
-        const mapped = normalizeAndMapItem(item.name);
-        if (!mapped) {
-          console.error(`Could not map regular item: ${item.name}`);
-          return [];
-        }
-
-        return [{
-          menuItemId: mapped.id,
-          quantity: item.quantity,
-          isCombo: false,
-          type: mapped.type
-        }];
-      });
-
-      console.log('Processed food items:', processedItems);
-
-      // Group processedItems by menuItemId and type
-      const groupedProcessedItems = Object.values(
-        processedItems.reduce((acc, item) => {
-          const key = `${item.menuItemId}_${item.type}`;
-          if (!acc[key]) {
-            acc[key] = { ...item };
-          } else {
-            acc[key].quantity += item.quantity;
-          }
-          return acc;
-        }, {} as Record<string, typeof processedItems[0]>)
-      );
-
-      // Group drinkItems by menuItemId and type
-      const groupedDrinkItems = Object.values(
-        drinkItems.reduce((acc, item) => {
-          const key = `${item.menuItemId}_drink_table`;
-          if (!acc[key]) {
-            acc[key] = {
-              menuItemId: Number(item.menuItemId),
-              name: item.name,
-              quantity: item.quantity,
-              price: item.price
-            };
-          } else {
-            acc[key].quantity += item.quantity;
-          }
-          return acc;
-        }, {} as Record<string, any>)
-      );
-
-      // Group appetizerItems by menuItemId and type
-      const groupedAppetizerItems = Object.values(
-        appetizerItems.reduce((acc, item) => {
-          const key = `${item.menuItemId}_appetizers`;
-          if (!acc[key]) {
-            acc[key] = {
-              menuItemId: Number(item.menuItemId),
-              name: item.name,
-              quantity: item.quantity,
-              price: item.price
-            };
-          } else {
-            acc[key].quantity += item.quantity;
-          }
-          return acc;
-        }, {} as Record<string, any>)
-      );
-
-      // Get item details for entree_side
-      const itemDetails = await client.query(
-        `SELECT es.id, es.name, es.type, 
-                array_agg(DISTINCT jsonb_build_object('raw_id', ei.raw_item_id, 'quantity', ei.quantity)) as ingredients
-         FROM entree_side es
-         LEFT JOIN entree_ingredients ei ON es.id = ei.entree_id
-         WHERE es.id = ANY($1::int[])
-         GROUP BY es.id, es.name, es.type`,
-        [groupedProcessedItems.map(item => item.menuItemId)]
-      );
-
-      // Get drink details
-      let drinkDetails = [];
-      if (groupedDrinkItems.length > 0) {
-        const drinkResult = await client.query(
-          'SELECT id, name FROM drink_table WHERE id = ANY($1::int[])',
-          [groupedDrinkItems.map(item => item.menuItemId)]
-        );
-        drinkDetails = drinkResult.rows;
-        console.log('Drink details:', drinkDetails);
-      }
-
-      // Get appetizer details
-      let appetizerDetails = [];
-      if (groupedAppetizerItems.length > 0) {
-        const appetizerResult = await client.query(
-          'SELECT id, name FROM appetizers WHERE id = ANY($1::int[])',
-          [groupedAppetizerItems.map(item => item.menuItemId)]
-        );
-        appetizerDetails = appetizerResult.rows;
-        console.log('Appetizer details:', appetizerDetails);
-      }
-
-      const itemDetailsMap = itemDetails.rows.reduce((acc, row) => {
-        acc[row.id] = {
-          name: row.name,
-          type: row.type,
-          ingredients: row.ingredients[0]?.raw_id ? row.ingredients : []
-        };
-        return acc;
-      }, {} as Record<number, any>);
-
-      // Format order details
-      const orderDetails = {
-        entree_side: groupedProcessedItems.map(item => ({
-          id: item.menuItemId,
-          name: itemDetailsMap[item.menuItemId]?.name,
-          type: itemDetailsMap[item.menuItemId]?.type,
-          quantity: item.quantity,
-          from_combo: item.isCombo
-        })),
-        drink_table: groupedDrinkItems.map(item => ({
-          id: item.menuItemId,
-          name: item.name,
-          quantity: item.quantity
-        })),
-        appetizers: groupedAppetizerItems.map(item => ({
-          id: item.menuItemId,
-          name: item.name,
-          quantity: item.quantity
-        })),
-        free_items: [
-          { id: 9, name: "Napkins", quantity: 2 },
-          { id: 2, name: "Soy Sauce Packet", quantity: 1 },
-          { id: 5, name: "Fortune Cookies", quantity: 1 },
-          { id: 6, name: "Utensils (Forks)", quantity: 1 },
-          { id: 7, name: "Utensils (Knives)", quantity: 1 },
-          { id: 8, name: "Utensils (Spoons)", quantity: 1 },
-          { id: 12, name: "Takeout Cartons", quantity: 1 }
-        ]
-      };
-
-      // Insert order
-      const orderResult = await client.query(
-        `INSERT INTO orders (datetime, sale, items) 
-         VALUES ($1, $2, $3::jsonb) 
-         RETURNING id`,
-        [new Date(), total, orderDetails]
-      );
-
-      const orderId = orderResult.rows[0].id;
-
-      // Insert all order items in batch
-      const allOrderItems = [
-        ...groupedProcessedItems.map(item => ({
-          order_id: orderId,
-          item_id: item.menuItemId,
-          item_type: 'entree_side'
-        })),
-        ...groupedDrinkItems.map(item => ({
-          order_id: orderId,
-          item_id: item.menuItemId,
-          item_type: 'drink_table'
-        })),
-        ...groupedAppetizerItems.map(item => ({
-          order_id: orderId,
-          item_id: item.menuItemId,
-          item_type: 'appetizers'
-        }))
-      ];
-
-      // Batch insert order items
-      if (allOrderItems.length > 0) {
-        const values = allOrderItems
-          .map((_, i) => `($1, $${i * 2 + 2}, $${i * 2 + 3})`)
-          .join(', ');
-
-        const params = [
-          orderId,
-          ...allOrderItems.flatMap(item => [item.item_id, item.item_type])
-        ];
-
-        await client.query(
-          `INSERT INTO order_items (order_id, item_id, item_type) VALUES ${values}`,
-          params
-        );
-      }
-
-      // Update inventories
-      const updatePromises = [];
-
-      // Update entree_side inventory
-      if (groupedProcessedItems.length > 0) {
-        updatePromises.push(
-          client.query(
-            `UPDATE entree_side 
-             SET inventory = inventory - v.quantity
-             FROM (VALUES ${groupedProcessedItems.map((_, i) => `($${i * 2 + 1}::int, $${i * 2 + 2}::int)`).join(', ')}) 
-             AS v(id, quantity)
-             WHERE entree_side.id = v.id`,
-            groupedProcessedItems.flatMap(item => [item.menuItemId, item.quantity])
-          )
-        );
-      }
-
-      // Update drink inventory
-      if (groupedDrinkItems.length > 0) {
-        updatePromises.push(
-          client.query(
-            `UPDATE drink_table 
-             SET inventory = inventory - v.quantity
-             FROM (VALUES ${groupedDrinkItems.map((_, i) => `($${i * 2 + 1}::int, $${i * 2 + 2}::int)`).join(', ')}) 
-             AS v(id, quantity)
-             WHERE drink_table.id = v.id`,
-            groupedDrinkItems.flatMap(item => [item.menuItemId, item.quantity])
-          )
-        );
-      }
-
-      // Update appetizer inventory
-      if (groupedAppetizerItems.length > 0) {
-        updatePromises.push(
-          client.query(
-            `UPDATE appetizers 
-             SET inventory = inventory - v.quantity
-             FROM (VALUES ${groupedAppetizerItems.map((_, i) => `($${i * 2 + 1}::int, $${i * 2 + 2}::int)`).join(', ')}) 
-             AS v(id, quantity)
-             WHERE appetizers.id = v.id`,
-            groupedAppetizerItems.flatMap(item => [item.menuItemId, item.quantity])
-          )
-        );
-      }
-
-      // Update raw ingredients
-      const ingredientUpdates = groupedProcessedItems.flatMap(item => {
-        const itemIngredients = itemDetailsMap[item.menuItemId]?.ingredients || [];
-        return itemIngredients.map((ing: any) => ({
-          raw_id: ing.raw_id,
-          quantity: ing.quantity * item.quantity
-        }));
-      });
-
-      if (ingredientUpdates.length > 0) {
-        const rawIds = ingredientUpdates.map(i => i.raw_id);
-        const quantities = ingredientUpdates.map(i => i.quantity);
-
-        updatePromises.push(
-          client.query(
-            `UPDATE raw_items 
-             SET inventory = raw_items.inventory - v.total_quantity
-             FROM (
-               SELECT raw_id, SUM(quantity) as total_quantity
-               FROM unnest($1::int[], $2::decimal[])
-               AS v(raw_id, quantity)
-               GROUP BY raw_id
-             ) v
-             WHERE raw_items.id = v.raw_id`,
-            [rawIds, quantities]
-          )
-        );
-      }
-
-      // Update free items
-      updatePromises.push(
-        client.query(
-          `UPDATE free_items 
-           SET inventory = CASE 
-             WHEN id = 9 THEN inventory - 2
-             WHEN id IN (2,5,6,7,8,12) THEN inventory - 1
-             ELSE inventory 
-           END
-           WHERE id IN (2,5,6,7,8,9,12)`
-        )
-      );
-
-      // Execute all updates in parallel
-      await Promise.all(updatePromises);
-
-      await client.query('COMMIT'); // Commit transaction
-
-      res.json({
-        success: true,
-        orderId,
-        message: 'Order created successfully'
-      });
-    } catch (error) {
-      console.error('Transaction error:', error);
-      await client.query('ROLLBACK'); // Rollback transaction
-      throw error;
-    }
-  } catch (error) {
-    console.error('Order creation error:', error);
-    res.status(500).json({
-      success: false,
-      message: 'Failed to create order'
-    });
-  } finally {
-    client.release(); // Release the client back to the pool
-  }
-};
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\server\src\middleware\auth.ts
-
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\server\src\models\MenuItem.ts
-
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\server\src\models\Order.ts
-
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\server\src\models\User.ts
-
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\server\src\routes\auth.ts
-
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\server\src\routes\employees.ts
-
-//TODO
-// server/src/routes/menu.ts
-import { Router } from 'express';
-import { getAllEmployees, updateEmployee, addEmployee, deleteEmployee } from '../controllers/employeeController';
-
-const router = Router();
-console.log('Employee loaded');
-// Route to get all menu items
-router.get('/', getAllEmployees);
-router.post('/', updateEmployee);        // New route to add an item
-router.put('/', addEmployee);
-router.delete('/', deleteEmployee);
-
-
-export default router;
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\server\src\routes\menu.ts
-
-// server/src/routes/menu.ts
-import { Router } from 'express';
-import { addMenuItem, updateMenuItem, removeMenuItem, getMenuItems, getItemPrice, getAllMenuItems } from '../controllers/menuController';
-
-const router = Router();
-console.log('Menu route loaded');
-// Route to get all menu items
-router.get('/', getMenuItems);
-router.post('/', addMenuItem);        // New route to add an item
-router.put('/', updateMenuItem);
-router.delete('/', removeMenuItem);
-
-// New route to fetch price of a specific menu item
-router.get('/price', getItemPrice);
-router.get('/all', getAllMenuItems);
-
-export default router;
-
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\server\src\routes\orders.ts
-
-// server/src/routes/orders.ts
-import { Router } from 'express';
-import { createOrder } from '../controllers/orderController';
-
-const router = Router();
-
-// Make sure createOrder is properly imported and defined
-router.post('/', createOrder);
-
-export default router;
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\server\src\tests\db.test.ts
-
-// server/src/tests/db.test.ts
-
-import { db } from '../config/db';
-
-async function testDatabaseConnection() {
-  try {
-    // Test basic connection
-    const connected = await db.testConnection();
-    if (!connected) {
-      throw new Error('Database connection test failed');
-    }
-
-    // Test a simple query
-    const result = await db.query('SELECT * FROM entree_side LIMIT 1');
-    console.log('Sample query result:', result.rows[0]);
-
-    // Test a more complex query
-    const inventoryResult = await db.query(`
-      SELECT 
-        name,
-        inventory,
-        retail_price
-      FROM entree_side
-      WHERE inventory < 100
-      ORDER BY inventory ASC
-      LIMIT 5
-    `);
-    console.log('Low inventory items:', inventoryResult.rows);
-
-  } catch (error) {
-    console.error('Database tests failed:', error);
-  } finally {
-    // Close the connection pool
-    await db.close();
-  }
-}
-
-// Run the tests
-testDatabaseConnection();
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\server\src\index.ts
-
-// server/src/index.ts
-import express, { Request, Response, NextFunction } from 'express';
-import cors from 'cors';
-import { db } from './config/db';
-import orderRoutes from './routes/orders';
-import menuRoutes from './routes/menu';
-import employeeRoutes from './routes/employees'
-import dotenv from 'dotenv';
-
-dotenv.config();
-
-const app = express();
-
-// Middleware
-app.use(cors());
-app.use(express.json());
-
-// Database connection test on startup
-async function initializeDatabase() {
-  try {
-    const connected = await db.testConnection();
-    if (!connected) {
-      throw new Error('Failed to connect to database');
-    }
-    console.log('Database connection established');
-  } catch (error) {
-    console.error('Database connection failed:', error);
-    process.exit(1);
-  }
-}
-
-// Initialize database
-initializeDatabase();
-
-// Routes
-app.use('/api/orders', orderRoutes);
-app.use('/api/menu-items', menuRoutes);
-app.use('/api/employees', employeeRoutes)
-
-//TODO
-
-
-
-// Health check endpoint that includes database status
-app.get('/health', async (req: Request, res: Response) => {
-  try {
-    await db.query('SELECT 1');
-    res.json({
-      status: 'healthy',
-      database: 'connected',
-      timestamp: new Date().toISOString()
-    });
-  } catch (error) {
-    const err = error as Error;
-    res.status(500).json({
-      status: 'unhealthy',
-      database: 'disconnected',
-      error: err.message || 'Unknown error occurred'
-    });
-  }
-});
-
-// Error handling middleware
-app.use((err: Error, req: Request, res: Response, next: NextFunction) => {
-  console.error('Unhandled error:', err);
-  res.status(500).json({
-    error: 'Internal server error',
-    message: process.env.NODE_ENV === 'development' ? err.message : undefined
-  });
-});
-
-const PORT = process.env.PORT || 4000;
-
-const server = app.listen(PORT, () => {
-  console.log(`Server running on port ${PORT}`);
-});
-
-// Handle uncaught exceptions
-process.on('uncaughtException', async (error) => {
-  console.error('Uncaught Exception:', error);
-  try {
-    await db.close();
-  } catch (closeError) {
-    console.error('Error closing database connection:', closeError);
-  }
-  process.exit(1);
-});
-
-// Handle unhandled promise rejections
-process.on('unhandledRejection', async (reason, promise) => {
-  console.error('Unhandled Rejection at:', promise, 'reason:', reason);
-});
-
-// Graceful shutdown
-process.on('SIGTERM', async () => {
-  console.log('SIGTERM received. Closing HTTP server and database connections...');
-  try {
-    await db.close();
-    server.close(() => {
-      console.log('HTTP server closed');
-      process.exit(0);
-    });
-  } catch (error) {
-    console.error('Error during graceful shutdown:', error);
-    process.exit(1);
-  }
-});
-
-// Handle SIGINT (Ctrl+C)
-process.on('SIGINT', async () => {
-  console.log('SIGINT received. Shutting down gracefully...');
-  try {
-    await db.close();
-    server.close(() => {
-      console.log('HTTP server closed');
-      process.exit(0);
-    });
-  } catch (error) {
-    console.error('Error during graceful shutdown:', error);
-    process.exit(1);
-  }
-});
-
-export default app;
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\server\nodemon.json
-
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\server\package.json
-
-{
-  "name": "panda-express-pos-server",
-  "version": "1.0.0",
-  "private": true,
-  "scripts": {
-    "dev": "ts-node-dev --respawn --transpile-only src/index.ts",
-    "build": "tsc",
-    "start": "node dist/index.js"
-  },
-  "dependencies": {
-    "cors": "^2.8.5",
-    "dotenv": "^16.4.5",
-    "express": "^4.21.1",
-    "pg": "^8.13.1"
-  },
-  "devDependencies": {
-    "@types/cors": "^2.8.17",
-    "@types/express": "^4.17.21",
-    "@types/node": "^20.17.6",
-    "@types/pg": "^8.11.10",
-    "ts-node-dev": "^2.0.0",
-    "typescript": "^5.6.3"
-  }
-}
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\server\tsconfig.json
-
-{
-    "compilerOptions": {
-      "target": "es6",
-      "module": "commonjs",
-      "outDir": "./dist",
-      "rootDir": "./src",
-      "strict": true,
-      "esModuleInterop": true,
-      "skipLibCheck": true,
-      "forceConsistentCasingInFileNames": true,
-      "moduleResolution": "node",
-      "resolveJsonModule": true,
-      "types": ["node"]
-    },
-    "include": ["src/**/*"],
-    "exclude": ["node_modules"]
-  }
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\next-env.d.ts
-
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
-
-# C:\Users\rahif\Desktop\project-3-team-6b\project-3\vercel.json
-
-{
-    "version": 2,
-    "buildCommand": "cd client && npm install && npm run build",
-    "outputDirectory": "client/.next",
-    "installCommand": "cd client && npm install",
-    "rewrites": [
-      {
-        "source": "/api/(.*)",
-        "destination": "/api/$1"
-      }
-    ],
-    "env": {
-      "NODE_ENV": "production"
-    }
-  }
-
-# C:\Users\rahif\Desktop\project-3-team-6b\package.json
-
-{
-  "dependencies": {
-    "autoprefixer": "^10.4.20",
-    "axios": "^1.7.7",
-    "date-fns": "^4.1.0",
-    "lucide-react": "^0.453.0",
-    "pg": "^8.13.1",
-    "recharts": "^2.13.0"
-  },
-  "devDependencies": {
-    "@types/pg": "^8.11.10"
-  }
-}