\n \n \n \n\n",[],[243,245],"d775d2d0-411c-11f1-9115-42b51c65c3df","StudentView.tsx","d775d384-411c-11f1-9115-42b51c65c3df","a691df88-411c-11f1-86e8-42b51c65c3df",13,["D",1777172755445],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\n\nconst STATUS_COLORS: Record = {\n pending: \"bg-yellow-100 text-yellow-800\",\n accepted: \"bg-blue-100 text-blue-800\",\n rejected: \"bg-red-100 text-red-800\",\n printing: \"bg-purple-100 text-purple-800\",\n ready: \"bg-indigo-100 text-indigo-800\",\n delivering: \"bg-orange-100 text-orange-800\",\n delivered: \"bg-green-100 text-green-800\",\n};\n\nconst STATUS_ICONS: Record = {\n pending: \"fa-clock\",\n accepted: \"fa-thumbs-up\",\n rejected: \"fa-times-circle\",\n printing: \"fa-print\",\n ready: \"fa-box\",\n delivering: \"fa-truck\",\n delivered: \"fa-check-circle\",\n};\n\nconst PRICING = { bw: 0.50, color: 2.00, delivery: 3.00, commission: 0.15 };\n\nexport function StudentView({ userId }: { userId: number }) {\n const [tab, setTab] = useState<\"order\" | \"history\">(\"order\");\n const [orders, setOrders] = useState([]);\n const [loading, setLoading] = useState(false);\n\n // Order form state\n const [inputMode, setInputMode] = useState<\"text\" | \"file\">(\"text\");\n const [textContent, setTextContent] = useState(\"\");\n const [file, setFile] = useState(null);\n const [printType, setPrintType] = useState<\"bw\" | \"color\">(\"bw\");\n const [copies, setCopies] = useState(1);\n const [pages, setPages] = useState(1);\n const [location, setLocation] = useState(\"\");\n const [notes, setNotes] = useState(\"\");\n const [submitting, setSubmitting] = useState(false);\n const [success, setSuccess] = useState(false);\n\n const fetchOrders = async () => {\n setLoading(true);\n try {\n const res = await fetch(\"/api/orders/my\");\n const data = await res.json();\n setOrders(data.orders || []);\n } catch { /* ignore */ }\n setLoading(false);\n };\n\n useEffect(() => { fetchOrders(); }, []);\n\n const pricePerPage = printType === \"bw\" ? PRICING.bw : PRICING.color;\n const printCost = pricePerPage * pages * copies;\n const platformFee = Math.round(printCost * PRICING.commission * 100) / 100;\n const totalCost = printCost + PRICING.delivery + platformFee;\n\n const handleSubmit = async (e: Event) => {\n e.preventDefault();\n setSubmitting(true);\n setSuccess(false);\n\n try {\n let fileName = null;\n let blobKey = null;\n\n if (inputMode === \"file\" && file) {\n const formData = new FormData();\n formData.append(\"file\", file);\n const uploadRes = await fetch(\"/api/upload\", { method: \"POST\", body: formData });\n const uploadData = await uploadRes.json();\n if (!uploadRes.ok) throw new Error(uploadData.error);\n fileName = uploadData.fileName;\n blobKey = uploadData.blobKey;\n }\n\n const res = await fetch(\"/api/orders\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n text_content: inputMode === \"text\" ? textContent : undefined,\n file_name: fileName,\n file_blob_key: blobKey,\n print_type: printType,\n copies,\n pages,\n delivery_location: location,\n notes: notes || undefined,\n }),\n });\n\n const data = await res.json();\n if (!res.ok) throw new Error(data.error);\n\n setSuccess(true);\n setTextContent(\"\");\n setFile(null);\n setCopies(1);\n setPages(1);\n setLocation(\"\");\n setNotes(\"\");\n fetchOrders();\n } catch (err: any) {\n alert(err.message);\n }\n setSubmitting(false);\n };\n\n return (\n

\n {/* Tab nav */}\n

\n setTab(\"order\")}\n class={`flex-1 py-3 rounded-xl font-semibold transition-all ${\n tab === \"order\"\n ? \"bg-blue-600 text-white shadow-lg\"\n : \"bg-white text-gray-600 hover:bg-gray-100\"\n }`}\n >\n New Order\n \n { setTab(\"history\"); fetchOrders(); }}\n class={`flex-1 py-3 rounded-xl font-semibold transition-all ${\n tab === \"history\"\n ? \"bg-blue-600 text-white shadow-lg\"\n : \"bg-white text-gray-600 hover:bg-gray-100\"\n }`}\n >\n My Orders\n {orders.length > 0 && (\n {orders.length}\n )}\n \n

\n\n {/* NEW ORDER TAB */}\n {tab === \"order\" && (\n

\n Submit a Print Request\n

\n\n {success && (\n

\n Order submitted successfully! Check \"My Orders\" for updates.\n

\n )}\n\n

\n {/* Input mode toggle */}\n

\n What do you want to print?\n

\n setInputMode(\"text\")}\n class={`flex-1 py-2.5 rounded-lg border-2 font-medium transition-all ${\n inputMode === \"text\" ? \"border-blue-500 bg-blue-50 text-blue-700\" : \"border-gray-200\"\n }`}\n >\n Paste Text\n \n setInputMode(\"file\")}\n class={`flex-1 py-2.5 rounded-lg border-2 font-medium transition-all ${\n inputMode === \"file\" ? \"border-blue-500 bg-blue-50 text-blue-700\" : \"border-gray-200\"\n }`}\n >\n Upload File\n \n

\n\n {inputMode === \"text\" ? (\n setTextContent(e.target.value)}\n placeholder=\"Paste your assignment text here...\"\n class=\"w-full h-40 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none resize-none\"\n required\n />\n ) : (\n

\n setFile(e.target.files?.[0] || null)}\n class=\"hidden\"\n id=\"file-input\"\n />\n \n \n

{file ? file.name : \"Click to upload (PDF, DOC, TXT, Images)\"}

\n \n

\n )}\n\n {/* Print options */}\n

\n Print Type\n

\n setPrintType(\"bw\")}\n class={`flex-1 py-2.5 rounded-lg border-2 text-sm font-medium transition-all ${\n printType === \"bw\" ? \"border-gray-700 bg-gray-100 text-gray-800\" : \"border-gray-200\"\n }`}\n >\n ⚫ B&W\n \n setPrintType(\"color\")}\n class={`flex-1 py-2.5 rounded-lg border-2 text-sm font-medium transition-all ${\n printType === \"color\" ? \"border-blue-500 bg-blue-50 text-blue-700\" : \"border-gray-200\"\n }`}\n >\n 🌈 Color\n \n

\n\n

\n Copies\n

\n \n {copies}\n \n

\n\n

\n Number of Pages\n setPages(Math.max(1, parseInt(e.target.value) || 1))}\n class=\"w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none\"\n />\n

\n\n

\n \n Delivery Location\n \n setLocation(e.target.value)}\n placeholder=\"e.g. Akuafo Hall Room 204, UGBS Lecture Hall 3\"\n class=\"w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none\"\n required\n />\n

\n\n

\n Notes (optional)\n setNotes(e.target.value)}\n placeholder=\"e.g. Staple please, Double-sided...\"\n class=\"w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none\"\n />\n

\n\n {/* Price breakdown */}\n

Cost Breakdown

Printing ({pages}p × {copies}c × GHS {pricePerPage.toFixed(2)})GHS {printCost.toFixed(2)}

Delivery FeeGHS {PRICING.delivery.toFixed(2)}

Platform Fee (15%)GHS {platformFee.toFixed(2)}

TotalGHS {totalCost.toFixed(2)}

\n\n \n {submitting ? <>Submitting... : <>Submit Print Request}\n \n \n

\n )}\n\n {/* HISTORY TAB */}\n {tab === \"history\" && (\n

\n {loading ? (\n

\n ) : orders.length === 0 ? (\n

\n \n

No orders yet. Submit your first print request!

\n ) : (\n orders.map((order: any) => (\n

\n Order #{order.id}\n \n \n {order.status.charAt(0).toUpperCase() + order.status.slice(1)}\n \n

{order.print_type === \"bw\" ? \"B&W\" : \"Color\"} · {order.copies} copies · {order.pages} pages

{order.delivery_location}

\n {order.file_name &&

{order.file_name}

}\n

\n {new Date(order.created_at).toLocaleDateString()}\n GHS {order.total_cost.toFixed(2)}\n

\n ))\n )}\n

\n )}\n

\n );\n}\n",[],[243,261,253],"components","e64bea1a-411c-11f1-9115-42b51c65c3df","ShopDashboard.tsx","e64beaec-411c-11f1-9115-42b51c65c3df",14,["D",1777172780373],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\n\nconst STATUS_COLORS: Record = {\n pending: \"bg-yellow-100 text-yellow-800\",\n accepted: \"bg-blue-100 text-blue-800\",\n printing: \"bg-purple-100 text-purple-800\",\n ready: \"bg-green-100 text-green-800\",\n};\n\nexport function ShopDashboard({ userId }: { userId: number }) {\n const [tab, setTab] = useState<\"pending\" | \"myorders\">(\"pending\");\n const [pendingOrders, setPendingOrders] = useState([]);\n const [myOrders, setMyOrders] = useState([]);\n const [loading, setLoading] = useState(false);\n\n const fetchPending = async () => {\n setLoading(true);\n try {\n const res = await fetch(\"/api/orders/pending\");\n const data = await res.json();\n setPendingOrders(data.orders || []);\n } catch { /* ignore */ }\n setLoading(false);\n };\n\n const fetchMyOrders = async () => {\n setLoading(true);\n try {\n const res = await fetch(\"/api/orders/shop\");\n const data = await res.json();\n setMyOrders(data.orders || []);\n } catch { /* ignore */ }\n setLoading(false);\n };\n\n useEffect(() => { fetchPending(); fetchMyOrders(); }, []);\n\n const updateStatus = async (orderId: number, status: string) => {\n try {\n await fetch(`/api/orders/${orderId}/status`, {\n method: \"PATCH\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ status }),\n });\n fetchPending();\n fetchMyOrders();\n } catch (err: any) {\n alert(err.message);\n }\n };\n\n const OrderCard = ({ order, actions }: { order: any; actions: any }) => (\n

\n Order #{order.id}\n \n {order.status.toUpperCase()}\n \n

\n\n

{order.print_type === \"bw\" ? \"B&W\" : \"Color\"}

{order.copies} copies, {order.pages} pages

{order.delivery_location}

\n {order.file_name &&

{order.file_name}

}\n {order.text_content && (\n

\n {order.text_content.slice(0, 200)}{order.text_content.length > 200 ? \"...\" : \"\"}\n

\n )}\n {order.notes &&

{order.notes}

}\n

\n\n

\n GHS {order.total_cost?.toFixed(2)}\n

{actions}

\n );\n\n return (\n

\n { setTab(\"pending\"); fetchPending(); }}\n class={`flex-1 py-3 rounded-xl font-semibold transition-all ${\n tab === \"pending\" ? \"bg-blue-600 text-white shadow-lg\" : \"bg-white text-gray-600 hover:bg-gray-100\"\n }`}\n >\n Incoming\n {pendingOrders.length > 0 && (\n {pendingOrders.length}\n )}\n \n { setTab(\"myorders\"); fetchMyOrders(); }}\n class={`flex-1 py-3 rounded-xl font-semibold transition-all ${\n tab === \"myorders\" ? \"bg-blue-600 text-white shadow-lg\" : \"bg-white text-gray-600 hover:bg-gray-100\"\n }`}\n >\n My Orders\n \n

\n\n {loading ? (\n

\n ) : tab === \"pending\" ? (\n pendingOrders.length === 0 ? (\n

\n \n

No pending orders. You're all caught up!

\n ) : (\n pendingOrders.map((order) => (\n \n updateStatus(order.id, \"rejected\")}\n class=\"px-4 py-2 bg-red-100 text-red-700 rounded-lg text-sm font-medium hover:bg-red-200 transition\"\n >\n Reject\n \n updateStatus(order.id, \"accepted\")}\n class=\"px-4 py-2 bg-green-600 text-white rounded-lg text-sm font-medium hover:bg-green-700 transition\"\n >\n Accept\n \n \n }\n />\n ))\n )\n ) : (\n myOrders.length === 0 ? (\n

\n \n

No accepted orders yet.

\n ) : (\n myOrders.map((order) => (\n \n {order.status === \"accepted\" && (\n updateStatus(order.id, \"printing\")}\n class=\"px-4 py-2 bg-purple-600 text-white rounded-lg text-sm font-medium hover:bg-purple-700 transition\"\n >\n Start Printing\n \n )}\n {order.status === \"printing\" && (\n updateStatus(order.id, \"ready\")}\n class=\"px-4 py-2 bg-green-600 text-white rounded-lg text-sm font-medium hover:bg-green-700 transition\"\n >\n Mark Ready\n \n )}\n {(order.status === \"ready\" || order.status === \"delivering\" || order.status === \"delivered\") && (\n \n {order.status === \"ready\" ? \"Waiting for rider...\" : order.status === \"delivering\" ? \"Out for delivery\" : \"Delivered ✓\"}\n \n )}\n \n }\n />\n ))\n )\n )}\n

\n );\n}\n",[],[243,261,263],"bcaac23a-411c-11f1-843f-42b51c65c3df","LoginScreen.tsx","bcaac2f8-411c-11f1-843f-42b51c65c3df",12,["D",1777172710529],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nconst ROLES = [\n { value: \"student\", label: \"Student\", icon: \"fa-graduation-cap\", desc: \"Submit print orders\" },\n { value: \"shop\", label: \"Print Shop\", icon: \"fa-store\", desc: \"Accept & print orders\" },\n { value: \"rider\", label: \"Delivery Rider\", icon: \"fa-motorcycle\", desc: \"Deliver documents\" },\n { value: \"admin\", label: \"Admin\", icon: \"fa-shield-halved\", desc: \"Manage platform\" },\n];\n\nexport function LoginScreen({ onLogin }: { onLogin: (user: any) => void }) {\n const [isRegister, setIsRegister] = useState(false);\n const [name, setName] = useState(\"\");\n const [phone, setPhone] = useState(\"\");\n const [email, setEmail] = useState(\"\");\n const [password, setPassword] = useState(\"\");\n const [role, setRole] = useState(\"student\");\n const [error, setError] = useState(\"\");\n const [loading, setLoading] = useState(false);\n\n const handleSubmit = async (e: Event) => {\n e.preventDefault();\n setError(\"\");\n setLoading(true);\n\n try {\n const url = isRegister ? \"/api/register\" : \"/api/login\";\n const body = isRegister\n ? { name, phone, email: email || undefined, password, role }\n : { phone, password };\n\n const res = await fetch(url, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(body),\n });\n\n const data = await res.json();\n if (!res.ok) throw new Error(data.error || \"Something went wrong\");\n onLogin(data.user);\n } catch (err: any) {\n setError(err.message);\n } finally {\n setLoading(false);\n }\n };\n\n return (\n

\n {/* Logo */}\n

🖨️

PrintPal

Campus Printing & Delivery

\n\n {/* Form Card */}\n

\n {isRegister ? \"Create Account\" : \"Welcome Back\"}\n

\n\n {error && (\n

\n {error}\n

\n )}\n\n

\n {isRegister && (\n <>\n

\n Full Name\n setName(e.target.value)}\n placeholder=\"Kwame Mensah\"\n class=\"w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition\"\n required\n />\n

\n\n

\n Email (optional)\n setEmail(e.target.value)}\n placeholder=\"kwame@university.edu\"\n class=\"w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition\"\n />\n

\n\n {/* Role selector */}\n

\n I am a...\n

\n {ROLES.map((r) => (\n setRole(r.value)}\n class={`p-3 rounded-lg border-2 text-left transition-all ${\n role === r.value\n ? \"border-blue-500 bg-blue-50 text-blue-700\"\n : \"border-gray-200 hover:border-gray-300\"\n }`}\n >\n \n

{r.label}

\n \n ))}\n

\n \n )}\n\n

\n Phone Number\n setPhone(e.target.value)}\n placeholder=\"0241234567\"\n class=\"w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition\"\n required\n />\n

\n\n

\n Password\n setPassword(e.target.value)}\n placeholder=\"••••••••\"\n class=\"w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition\"\n required\n />\n

\n\n \n {loading ? (\n <>Please wait...\n ) : isRegister ? (\n <>Create Account\n ) : (\n <>Log In\n )}\n \n \n\n

\n { setIsRegister(!isRegister); setError(\"\"); }}\n class=\"text-blue-600 hover:text-blue-700 text-sm font-medium\"\n >\n {isRegister ? \"Already have an account? Log In\" : \"New here? Create Account\"}\n \n

\n );\n}\n",[],[243,261,271],"efd35e6a-411c-11f1-9563-42b51c65c3df","DeliveryView.tsx","efd35f14-411c-11f1-9563-42b51c65c3df",15,["D",1777172796312],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\n\nexport function DeliveryView({ userId }: { userId: number }) {\n const [tab, setTab] = useState<\"available\" | \"active\">(\"available\");\n const [readyOrders, setReadyOrders] = useState([]);\n const [activeOrders, setActiveOrders] = useState([]);\n const [loading, setLoading] = useState(false);\n\n const fetchReady = async () => {\n setLoading(true);\n try {\n const res = await fetch(\"/api/orders/ready\");\n const data = await res.json();\n setReadyOrders(data.orders || []);\n } catch { /* ignore */ }\n setLoading(false);\n };\n\n const fetchActive = async () => {\n setLoading(true);\n try {\n const res = await fetch(\"/api/orders/delivering\");\n const data = await res.json();\n setActiveOrders(data.orders || []);\n } catch { /* ignore */ }\n setLoading(false);\n };\n\n useEffect(() => { fetchReady(); fetchActive(); }, []);\n\n const updateStatus = async (orderId: number, status: string) => {\n try {\n await fetch(`/api/orders/${orderId}/status`, {\n method: \"PATCH\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ status }),\n });\n fetchReady();\n fetchActive();\n } catch (err: any) {\n alert(err.message);\n }\n };\n\n return (\n

\n { setTab(\"available\"); fetchReady(); }}\n class={`flex-1 py-3 rounded-xl font-semibold transition-all ${\n tab === \"available\" ? \"bg-blue-600 text-white shadow-lg\" : \"bg-white text-gray-600 hover:bg-gray-100\"\n }`}\n >\n Available Pickups\n {readyOrders.length > 0 && (\n {readyOrders.length}\n )}\n \n { setTab(\"active\"); fetchActive(); }}\n class={`flex-1 py-3 rounded-xl font-semibold transition-all ${\n tab === \"active\" ? \"bg-blue-600 text-white shadow-lg\" : \"bg-white text-gray-600 hover:bg-gray-100\"\n }`}\n >\n My Deliveries\n \n

\n\n {loading ? (\n

\n ) : tab === \"available\" ? (\n readyOrders.length === 0 ? (\n

\n \n

No orders ready for pickup right now.

\n ) : (\n readyOrders.map((order) => (\n

\n Order #{order.id}\n GHS {order.delivery_fee?.toFixed(2)} delivery\n

Deliver to: {order.delivery_location}

{order.print_type === \"bw\" ? \"B&W\" : \"Color\"} · {order.copies} copies · {order.pages} pages

\n {order.notes &&

{order.notes}

}\n

\n updateStatus(order.id, \"delivering\")}\n class=\"w-full py-2.5 bg-orange-500 hover:bg-orange-600 text-white rounded-lg font-semibold transition\"\n >\n Pick Up & Deliver\n \n

\n ))\n )\n ) : (\n activeOrders.length === 0 ? (\n

\n \n

No active deliveries.

\n ) : (\n activeOrders.map((order) => (\n

\n Order #{order.id}\n \n In Transit\n \n

\n \n Deliver to: {order.delivery_location}\n

\n updateStatus(order.id, \"delivered\")}\n class=\"w-full py-2.5 bg-green-600 hover:bg-green-700 text-white rounded-lg font-semibold transition\"\n >\n Mark as Delivered\n \n

\n ))\n )\n )}\n

\n );\n}\n",[],[243,261,279],"afc83692-411c-11f1-a498-42b51c65c3df","App.tsx","afc83840-411c-11f1-a498-42b51c65c3df",11,["D",1777172688579],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { LoginScreen } from \"./LoginScreen.tsx\";\nimport { StudentView } from \"./StudentView.tsx\";\nimport { ShopDashboard } from \"./ShopDashboard.tsx\";\nimport { DeliveryView } from \"./DeliveryView.tsx\";\nimport { AdminPanel } from \"./AdminPanel.tsx\";\n\ninterface UserSession {\n userId: number;\n role: string;\n name: string;\n}\n\nexport function App() {\n const [user, setUser] = useState(null);\n const [loading, setLoading] = useState(true);\n\n const checkSession = useCallback(async () => {\n try {\n const res = await fetch(\"/api/me\");\n const data = await res.json();\n setUser(data.user);\n } catch {\n setUser(null);\n } finally {\n setLoading(false);\n }\n }, []);\n\n useEffect(() => { checkSession(); }, [checkSession]);\n\n const handleLogout = async () => {\n await fetch(\"/api/logout\", { method: \"POST\" });\n setUser(null);\n };\n\n if (loading) {\n return (\n

🖨️

Loading PrintPal...

\n );\n }\n\n if (!user) {\n return ;\n }\n\n return (\n

\n {/* Header */}\n

\n 🖨️\n

PrintPal

\n \n \n {user.name}\n ({user.role})\n \n \n Logout\n \n

\n\n {/* Main content */}\n

\n {user.role === \"student\" && }\n {user.role === \"shop\" && }\n {user.role === \"rider\" && }\n {user.role === \"admin\" && }\n

\n\n {/* Footer */}\n \n

\n );\n}\n",[],[243,261,287],"06787a10-411d-11f1-843f-42b51c65c3df","AdminPanel.tsx","06787ae2-411d-11f1-843f-42b51c65c3df",16,["D",1777172834351],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\n\nconst STATUS_COLORS: Record = {\n pending: \"bg-yellow-100 text-yellow-800\",\n accepted: \"bg-blue-100 text-blue-800\",\n rejected: \"bg-red-100 text-red-800\",\n printing: \"bg-purple-100 text-purple-800\",\n ready: \"bg-indigo-100 text-indigo-800\",\n delivering: \"bg-orange-100 text-orange-800\",\n delivered: \"bg-green-100 text-green-800\",\n};\n\nconst ROLE_COLORS: Record = {\n student: \"bg-blue-100 text-blue-800\",\n shop: \"bg-green-100 text-green-800\",\n rider: \"bg-orange-100 text-orange-800\",\n admin: \"bg-purple-100 text-purple-800\",\n};\n\nexport function AdminPanel() {\n const [tab, setTab] = useState<\"overview\" | \"orders\" | \"users\" | \"shops\">(\"overview\");\n const [analytics, setAnalytics] = useState(null);\n const [orders, setOrders] = useState([]);\n const [users, setUsers] = useState([]);\n const [shops, setShops] = useState([]);\n const [loading, setLoading] = useState(false);\n\n const fetchAnalytics = async () => {\n try {\n const res = await fetch(\"/api/admin/analytics\");\n setAnalytics(await res.json());\n } catch { /* ignore */ }\n };\n\n const fetchOrders = async () => {\n setLoading(true);\n try {\n const res = await fetch(\"/api/admin/orders\");\n setOrders((await res.json()).orders || []);\n } catch { /* ignore */ }\n setLoading(false);\n };\n\n const fetchUsers = async () => {\n setLoading(true);\n try {\n const res = await fetch(\"/api/admin/users\");\n setUsers((await res.json()).users || []);\n } catch { /* ignore */ }\n setLoading(false);\n };\n\n const fetchShops = async () => {\n setLoading(true);\n try {\n const res = await fetch(\"/api/admin/shops\");\n setShops((await res.json()).shops || []);\n } catch { /* ignore */ }\n setLoading(false);\n };\n\n useEffect(() => { fetchAnalytics(); }, []);\n\n const tabs = [\n { key: \"overview\", label: \"Overview\", icon: \"fa-chart-pie\", action: fetchAnalytics },\n { key: \"orders\", label: \"Orders\", icon: \"fa-list\", action: fetchOrders },\n { key: \"users\", label: \"Users\", icon: \"fa-users\", action: fetchUsers },\n { key: \"shops\", label: \"Shops\", icon: \"fa-store\", action: fetchShops },\n ];\n\n const StatCard = ({ icon, label, value, color }: any) => (\n

\n \n

{value}

{label}

\n );\n\n return (\n

\n {/* Tab nav */}\n

\n {tabs.map((t) => (\n { setTab(t.key as any); t.action(); }}\n class={`flex-1 py-2.5 rounded-lg text-sm font-semibold transition-all ${\n tab === t.key ? \"bg-blue-600 text-white\" : \"text-gray-600 hover:bg-gray-100\"\n }`}\n >\n {t.label}\n \n ))}\n

\n\n {/* OVERVIEW */}\n {tab === \"overview\" && analytics && (\n

\n \n \n \n s + (r.count || 0), 0) || 0}\n color=\"border-purple-600\"\n />\n

\n\n {/* Users by role */}\n

Users by Role

\n {(analytics.usersByRole || []).map((r: any) => (\n

\n \n {r.role}\n \n {r.count}\n

\n ))}\n

\n\n {/* Orders by status */}\n

Orders by Status

\n {(analytics.ordersByStatus || []).map((s: any) => (\n

\n \n {s.status}\n \n

\n {s.count}\n

\n ))}\n

\n )}\n\n {/* ORDERS */}\n {tab === \"orders\" && (\n loading ? (\n

\n ) : (\n

\n \n \n \n \n \n \n \n \n \n \n \n \n {orders.map((o) => (\n \n \n \n \n \n \n \n \n ))}\n \n

ID	Type	Location	Status	Total	Date
#{o.id}	{o.print_type === \"bw\" ? \"B&W\" : \"Color\"} · {o.copies}c · {o.pages}p	{o.delivery_location}	\n {o.status}\n	GHS {o.total_cost?.toFixed(2)}	{new Date(o.created_at).toLocaleDateString()}

\n {orders.length === 0 &&

No orders yet

}\n

\n )\n )}\n\n {/* USERS */}\n {tab === \"users\" && (\n loading ? (\n

\n ) : (\n

\n \n \n \n \n \n \n \n \n \n \n \n {users.map((u) => (\n \n \n \n \n \n \n \n ))}\n \n

ID	Name	Phone	Role	Joined
#{u.id}	{u.name}	{u.phone}	\n {u.role}\n	{new Date(u.created_at).toLocaleDateString()}

\n {users.length === 0 &&

No users yet

}\n

\n )\n )}\n\n {/* SHOPS */}\n {tab === \"shops\" && (\n loading ? (\n

\n ) : (\n

\n {shops.length === 0 ? (\n

\n \n

No printing shops registered yet.

\n ) : (\n shops.map((s) => (\n

\n \n

{s.name}

{s.phone} · {s.email || \"No email\"}

#{s.id}

\n ))\n )}\n

\n )\n )}\n \n );\n}\n",[],[243,261,295],"a691deac-411c-11f1-86e8-42b51c65c3df",9,["D",1777172673457],[191,192,193,194,195,196],[243,261],"786eb338-411c-11f1-b9cb-42b51c65c3df",3,["D",1777172596052],[190,197,198],[243],["D",1777172629147],[],[18,81],["D",1777172613023],[],[18,66],["D",1777172595407],[187,188],[18],["D",1777172591721],["D",1789531852468],{"_11":12,"_136":72},{"_11":12,"_132":-5,"_71":72,"_31":70,"_133":134,"_135":30},{"_40":123,"_13":16,"_34":37,"_124":85,"_125":-5,"_126":-5,"_127":-5,"_128":-5,"_129":-5,"_130":14,"_131":12},"ctx",{"_54":-5,"_155":359,"_360":361,"_362":363,"_364":30,"_365":30,"_366":30,"_367":24,"_368":-5,"_369":-7,"_370":-7,"_371":26,"_372":30,"_373":30,"_374":-5,"_375":30,"_376":30,"_377":30,"_378":-5},"ENV",{"_330":331,"_332":333,"_334":16,"_335":336,"_337":338,"_339":340,"_341":342,"_343":344,"_345":346,"_347":348,"_349":350,"_351":352,"_353":354,"_355":356,"_357":358},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · database