\n \n \n \n\n",[],[111,129],"a691deac-411c-11f1-86e8-42b51c65c3df","components","a691df88-411c-11f1-86e8-42b51c65c3df",9,["D",1777172673457],[143,144,145,146,147,148],[111,137],{"_35":189,"_13":190,"_38":191,"_40":138,"_42":43,"_44":192,"_46":47,"_48":193,"_17":50,"_51":52,"_53":194,"_55":56,"_57":-5,"_83":195,"_18":196},{"_35":181,"_13":182,"_38":183,"_40":138,"_42":43,"_44":184,"_46":47,"_48":185,"_17":50,"_51":52,"_53":186,"_55":56,"_57":-5,"_83":187,"_18":188},{"_35":173,"_13":174,"_38":175,"_40":138,"_42":43,"_44":176,"_46":47,"_48":177,"_17":50,"_51":52,"_53":178,"_55":56,"_57":-5,"_83":179,"_18":180},{"_35":165,"_13":166,"_38":167,"_40":138,"_42":43,"_44":168,"_46":47,"_48":169,"_17":50,"_51":52,"_53":170,"_55":56,"_57":-5,"_83":171,"_18":172},{"_35":157,"_13":158,"_38":159,"_40":138,"_42":43,"_44":160,"_46":47,"_48":161,"_17":50,"_51":52,"_53":162,"_55":56,"_57":-5,"_83":163,"_18":164},{"_35":149,"_13":150,"_38":151,"_40":138,"_42":43,"_44":152,"_46":47,"_48":153,"_17":50,"_51":52,"_53":154,"_55":56,"_57":-5,"_83":155,"_18":156},"d775d2d0-411c-11f1-9115-42b51c65c3df","StudentView.tsx","d775d384-411c-11f1-9115-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",[],[111,137,150],"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",[],[111,137,158],"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",[],[111,137,166],"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",[],[111,137,174],"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",[],[111,137,182],"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",[],[111,137,190],["D",1777172595407],[200,201],[19],{"_35":59,"_13":60,"_38":61,"_40":41,"_42":43,"_44":62,"_46":47,"_48":205,"_17":50,"_51":52,"_53":64,"_55":56,"_57":-5,"_83":206,"_18":207},{"_35":36,"_13":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":202,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_83":203,"_18":204},["D",1777172629147],[],[19,37],["D",1777172613023],[],[19,60],"75d93756-411c-11f1-99a0-42b51c65c3df",["D",1777172591721],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Campus printing & delivery platform for university students","imageUrl","userId","c827e2c0-1bf5-11f0-a1c1-fda95a61b6d1","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","9fead931-b2c2-4bde-a5a6-c7316333f0c8","tursoName","75d93756411c11f199a042b51c65c3df","tursoHostname","75d93756411c11f199a042b51c65c3df-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789444861734],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_264":260},"org",{"_11":12,"_258":-5,"_259":260,"_218":219,"_261":262,"_263":56},"branch",{"_17":89,"_13":16,"_35":43,"_250":208,"_251":-5,"_252":-5,"_253":-5,"_254":-5,"_255":-5,"_256":14,"_257":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ2c2liNW5nSGFhNjlRWDJobzBoSEhtRHk5cCJ9","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":208,"_13":14,"_48":349,"_210":-5,"_211":56,"_212":213,"_214":213,"_215":216,"_217":-5,"_218":219,"_220":78,"_221":47,"_222":-5,"_223":-5,"_224":50,"_225":226,"_227":228,"_229":230,"_231":350,"_233":-5,"_234":235,"_236":235,"_237":238,"_239":238,"_240":238,"_241":235,"_242":235,"_243":351,"_245":352,"_247":353,"_249":56},[298,301,311,313,314],"files",[298,299,300,301,302,303,304,305,306,307,308,309,310,311,312,313,314],"counts",{"_289":50,"_290":67,"_291":50,"_32":292,"_293":294},[285,286],{"_35":66,"_13":19,"_38":41,"_40":-5,"_42":43,"_44":67,"_46":47,"_48":68,"_17":50,"_51":69,"_53":-5,"_55":56,"_57":-5,"_18":284},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[19],{"_35":59,"_13":60,"_38":61,"_40":41,"_42":43,"_44":62,"_46":47,"_48":63,"_17":50,"_51":52,"_53":64,"_55":56,"_57":-5,"_18":288},{"_35":36,"_13":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_18":287},[19,37],[19,60],"pulls","branches","forks",{"_295":50,"_297":50},"connections",{"_295":50,"_296":50},"count","unfilledCount","emptyCount",{"_35":66,"_13":19,"_38":41,"_40":-5,"_42":43,"_44":67,"_46":47,"_48":197,"_17":50,"_51":69,"_53":-5,"_55":56,"_57":-5,"_83":347,"_18":348},{"_35":59,"_13":60,"_38":61,"_40":41,"_42":43,"_44":62,"_46":47,"_48":205,"_17":50,"_51":52,"_53":64,"_55":56,"_57":-5,"_83":345,"_18":346},{"_35":36,"_13":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":202,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_83":343,"_18":344},{"_35":110,"_13":111,"_38":112,"_40":-5,"_42":43,"_44":113,"_46":47,"_48":114,"_17":50,"_51":69,"_53":-5,"_55":56,"_57":-5,"_83":341,"_18":342},{"_35":136,"_13":137,"_38":138,"_40":112,"_42":43,"_44":139,"_46":47,"_48":140,"_17":50,"_51":69,"_53":-5,"_55":56,"_57":-5,"_83":339,"_18":340},{"_35":189,"_13":190,"_38":191,"_40":138,"_42":43,"_44":192,"_46":47,"_48":193,"_17":50,"_51":52,"_53":194,"_55":56,"_57":-5,"_83":337,"_18":338},{"_35":181,"_13":182,"_38":183,"_40":138,"_42":43,"_44":184,"_46":47,"_48":185,"_17":50,"_51":52,"_53":186,"_55":56,"_57":-5,"_83":335,"_18":336},{"_35":173,"_13":174,"_38":175,"_40":138,"_42":43,"_44":176,"_46":47,"_48":177,"_17":50,"_51":52,"_53":178,"_55":56,"_57":-5,"_83":333,"_18":334},{"_35":165,"_13":166,"_38":167,"_40":138,"_42":43,"_44":168,"_46":47,"_48":169,"_17":50,"_51":52,"_53":170,"_55":56,"_57":-5,"_83":331,"_18":332},{"_35":157,"_13":158,"_38":159,"_40":138,"_42":43,"_44":160,"_46":47,"_48":161,"_17":50,"_51":52,"_53":162,"_55":56,"_57":-5,"_83":329,"_18":330},{"_35":149,"_13":150,"_38":151,"_40":138,"_42":43,"_44":152,"_46":47,"_48":153,"_17":50,"_51":52,"_53":154,"_55":56,"_57":-5,"_83":327,"_18":328},{"_35":128,"_13":129,"_38":130,"_40":112,"_42":43,"_44":131,"_46":47,"_48":132,"_17":50,"_51":24,"_53":133,"_55":56,"_57":-5,"_83":325,"_18":326},{"_35":120,"_13":121,"_38":122,"_40":112,"_42":43,"_44":123,"_46":47,"_48":124,"_17":50,"_51":52,"_53":125,"_55":56,"_57":-5,"_83":323,"_18":324},{"_35":94,"_13":95,"_38":96,"_40":-5,"_42":43,"_44":97,"_46":47,"_48":98,"_17":50,"_51":69,"_53":-5,"_55":56,"_57":-5,"_83":321,"_18":322},{"_35":102,"_13":103,"_38":104,"_40":96,"_42":43,"_44":105,"_46":47,"_48":106,"_17":50,"_51":52,"_53":107,"_55":56,"_57":-5,"_83":319,"_18":320},{"_35":86,"_13":87,"_38":88,"_40":-5,"_42":43,"_44":89,"_46":47,"_48":90,"_17":50,"_51":24,"_53":91,"_55":56,"_57":-5,"_83":317,"_18":318},{"_35":76,"_13":77,"_38":78,"_40":-5,"_42":43,"_44":79,"_46":47,"_48":80,"_17":50,"_51":81,"_53":82,"_55":56,"_57":-5,"_83":315,"_18":316},[],[77],[],[87],[],[95,103],[312],[95],[],[111,121],[],[111,129],[],[111,137,150],[],[111,137,158],[],[111,137,166],[],[111,137,174],[],[111,137,182],[],[111,137,190],[303,304,305,306,307,308],[111,137],[302,309,310],[111],[],[19,37],[],[19,60],[299,300],[19],["D",1777172591721],["D",1789444861734],{"_11":12,"_264":260},{"_11":12,"_258":-5,"_259":260,"_218":219,"_261":262,"_263":56},{"_17":89,"_13":16,"_35":43,"_250":208,"_251":-5,"_252":-5,"_253":-5,"_254":-5,"_255":-5,"_256":14,"_257":12},"ctx",{"_243":-5,"_281":387,"_388":389,"_390":391,"_392":56,"_393":56,"_394":56,"_395":47,"_396":-5,"_397":-7,"_398":-7,"_399":50,"_400":56,"_401":56,"_402":-5,"_403":56,"_404":56,"_405":56,"_406":-5},"ENV",{"_358":359,"_360":361,"_362":16,"_363":364,"_365":366,"_367":368,"_369":370,"_371":372,"_373":374,"_375":376,"_377":378,"_379":380,"_381":382,"_383":384,"_385":386},"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"]