+
+
+ {siteTitle} Admin
Restricted operator access
+
;
+ }
+
+ return
+
+
+ {children}
+
+
+
+ {items.length === 0 ? (
+
+
+
+ + Your Order +
+
+
+ ) : (
+
+
+ + Your cart is empty +
++ Select items from {restaurantName || 'a restaurant'} to start your meal order. +
+
+
+ )}
+
+ Ordering from {restaurantName}
+
+
+
+ {items.map((item) => (
+
+
+
+
+ ))}
+
+
+
+ {item.name}
++ ${(item.price * item.quantity).toFixed(2)} +
+ {item.special_instructions && ( ++ “{item.special_instructions}” +
+ )} +
+
+
+
+
+ {item.quantity}
+
+
+
+
+
+
+ {error && (
+
+
+
+ setDeliveryAddress(e.target.value)}
+ placeholder="Enter full delivery address..."
+ className="w-full rounded-md border border-[#E2E1DA] bg-[#F8F7F4] px-3 py-2 text-xs font-medium text-[#0F172A] focus:border-[#0F172A] focus:outline-hidden"
+ />
+
+ {error}
+
+ )}
+
+
+
+
+
+
+
+ Items Subtotal
+ ${subtotal.toFixed(2)}
+
+
+ Delivery Fee
+ ${deliveryFee.toFixed(2)}
+
+
+ Total Due
+ ${totalAmount.toFixed(2)}
+
+
+ {label && (
+
+ )}
+
+
+
+ {previewUrl ? (
+
+ );
+}
+
+export default ImageUploader;
\ No newline at end of file
diff --git a/frontend/src/components/MapView.tsx b/frontend/src/components/MapView.tsx
new file mode 100644
index 0000000..864c757
--- /dev/null
+++ b/frontend/src/components/MapView.tsx
@@ -0,0 +1,181 @@
+import { useEffect, useRef } from 'react';
+import L from 'leaflet';
+
+const defaultIcon = L.icon({
+ iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
+ iconRetinaUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png',
+ shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
+ iconSize: [25, 41],
+ iconAnchor: [12, 41],
+ popupAnchor: [1, -34],
+ shadowSize: [41, 41],
+});
+
+export interface MapMarker {
+ id?: string;
+ lat: number;
+ lng: number;
+ label?: string;
+ type?: 'restaurant' | 'customer' | 'driver' | 'default';
+}
+
+interface MapViewProps {
+ center: [number, number];
+ zoom?: number;
+ markers?: MapMarker[];
+ polyline?: Array<[number, number]>;
+ className?: string;
+ onMapClick?: (lat: number, lng: number) => void;
+ autoBounds?: boolean;
+}
+
+const createCustomIcon = (type: MapMarker['type'] = 'default') => {
+ let bgColor = '#0F172A';
+ let badgeText = '📍';
+
+ if (type === 'restaurant') {
+ bgColor = '#B93812';
+ badgeText = '🍳';
+ } else if (type === 'customer') {
+ bgColor = '#1D4ED8';
+ badgeText = '🏠';
+ } else if (type === 'driver') {
+ bgColor = '#15803D';
+ badgeText = '🛵';
+ }
+
+ return L.divIcon({
+ className: 'custom-map-pin',
+ html: `
+ 
+
+ ) : (
+
+
+
+
+ {isUploading && (
+
+
+ )}
+
+ {isUploading ? (
+
+ )}
+
+ {error && (
+
+
+ )}
+
+
+ {isUploading ? 'Uploading image...' : 'Click to upload image'}
+
+
+ + PNG, JPG, WEBP up to 10MB +
+{error}
+ )} +${badgeText}
`,
+ iconSize: [32, 32],
+ iconAnchor: [16, 16],
+ popupAnchor: [0, -16],
+ });
+};
+
+export default function MapView({
+ center,
+ zoom = 13,
+ markers = [],
+ polyline = [],
+ className,
+ onMapClick,
+ autoBounds = false,
+}: MapViewProps) {
+ const containerRef = useRef${m.label}
`);
+ }
+ layer.addLayer(marker);
+ });
+ }, [markers]);
+
+ useEffect(() => {
+ const map = mapRef.current;
+ if (!map) return;
+
+ if (polylineLayerRef.current) {
+ polylineLayerRef.current.remove();
+ polylineLayerRef.current = null;
+ }
+
+ const validPolyline = polyline.filter(
+ (pt) => Array.isArray(pt) && pt.length === 2 && Number.isFinite(pt[0]) && Number.isFinite(pt[1])
+ );
+
+ if (validPolyline.length > 0) {
+ const line = L.polyline(validPolyline, {
+ color: '#B93812',
+ weight: 4,
+ opacity: 0.85,
+ lineCap: 'round',
+ lineJoin: 'round',
+ }).addTo(map);
+ polylineLayerRef.current = line;
+ }
+ }, [polyline]);
+
+ useEffect(() => {
+ const map = mapRef.current;
+ if (!map || !autoBounds) return;
+
+ const boundsPoints: Array<[number, number]> = [];
+
+ markers.forEach((m) => {
+ if (Number.isFinite(m.lat) && Number.isFinite(m.lng)) {
+ boundsPoints.push([m.lat, m.lng]);
+ }
+ });
+
+ polyline.forEach((pt) => {
+ if (Array.isArray(pt) && pt.length === 2 && Number.isFinite(pt[0]) && Number.isFinite(pt[1])) {
+ boundsPoints.push(pt);
+ }
+ });
+
+ if (boundsPoints.length > 0) {
+ const bounds = L.latLngBounds(boundsPoints);
+ map.fitBounds(bounds, { padding: [40, 40], maxZoom: 16 });
+ }
+ }, [markers, polyline, autoBounds]);
+
+ return (
+
+ );
+}
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
new file mode 100644
index 0000000..4a3e95b
--- /dev/null
+++ b/frontend/src/components/Navbar.tsx
@@ -0,0 +1,172 @@
+import React from 'react';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+import { ArrowRight, ChefHat, Compass, LogOut, ShoppingBag, Sparkles, Truck, User, UtensilsCrossed } from 'lucide-react';
+import { cn } from '../lib/utils';
+
+export function Navbar() {
+ const location = useLocation();
+ const navigate = useNavigate();
+ const { user, isAuthenticated, logout } = useAuth();
+
+ const handleSignOut = () => {
+ logout();
+ navigate('/');
+ };
+
+ const getRoleBadge = () => {
+ if (!user?.role) return null;
+ switch (user.role) {
+ case 'customer':
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ EatIt
+
+
+ BiteRoute
+
+
+
+
+
+
+ {isAuthenticated ? (
+
+
+
+ ) : (
+
+ Sign In with M-Auth
+
+
+
+ {!user?.role && (
+
+ Choose Role
+
+
+ );
+
+ return (
+
+ {label}
+ {value} / 5 Stars
+
+
+ {[1, 2, 3, 4, 5].map((star) => (
+
+ ))}
+
+
+
+
+
+ {isSuccess ? (
+
+
+ ) : (
+
+
+ + Thank You for Your Feedback! +
++ Your ratings help improve kitchen quality and courier delivery speed. +
+