108:"ExplicitChatIdProvider" 109:I[903690,["$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$81","$7d","$82","$83","$7f","$84","$85","$86","$87","$88","$89","$7e","$8a","$8b"],"$108"] 10a:I[838238,["$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$81","$7d","$82","$83","$7f","$84","$85","$86","$87","$88","$89","$7e","$8a","$8b"],"SWRDataProvider"] 10d:[] 10e:[["b_hKztIHrXCAH",null],["b_U1bcbvkQCzt",null],["b_qtbU08QCLM4",null]] 10f:[["b_hKztIHrXCAH",{"templateVersionId":null,"templateCanonId":null}],["b_U1bcbvkQCzt",{"templateVersionId":null,"templateCanonId":null}],["b_qtbU08QCLM4",{"templateVersionId":null,"templateCanonId":null}]] 110:[["b_OegWbAgtQsx","$D2025-08-06T04:36:21.916Z"],["b_206GSaE2xLC","$D2025-08-06T04:41:10.134Z"],["b_ShlcRfcoUIb","$D2025-08-06T04:52:53.385Z"],["b_LDsHlo9IGkl","$D2025-08-06T04:57:38.143Z"],["b_Y9KpyP6KvBc","$D2025-08-06T05:02:55.165Z"],["b_ctRIcuq83fv","$D2025-08-06T05:14:33.723Z"],["b_ykFhm7E5NqD","$D2025-08-06T05:23:30.758Z"],["b_j9DwmipL4nq","$D2025-08-06T05:42:45.237Z"],["b_MTB6yYjUzx0","$D2025-08-06T05:51:08.598Z"],["b_tRKLJkQXypm","$D2025-08-06T05:58:04.617Z"],["b_vpPuAjrjBHB","$D2025-08-06T06:00:36.682Z"],["b_gl7wjqsov19","$D2025-08-06T06:08:22.694Z"],["b_RiS98j2ZgnP","$D2025-08-12T11:00:47.734Z"],["b_2WQSRuK19u2","$D2025-08-12T11:11:09.789Z"],["b_aSrnk3gMJVY","$D2025-08-12T11:22:49.060Z"],["b_OHUn8woMoy6","$D2025-08-12T11:28:22.236Z"],["b_hKztIHrXCAH","$D2025-08-12T11:34:47.772Z"],["b_U1bcbvkQCzt","$D2025-08-12T11:46:00.525Z"],["b_qtbU08QCLM4","$D2025-08-18T03:36:01.823Z"]] 111:[["b_hKztIHrXCAH",false],["b_U1bcbvkQCzt",false],["b_qtbU08QCLM4",false]] 112:[["b_hKztIHrXCAH","$undefined"],["b_U1bcbvkQCzt","$undefined"],["b_qtbU08QCLM4",{"git":{"ref":"main","sha":"9801071d6ff59e4d39e229b1a5b1426fb3e846cc","type":"github","repoId":0,"repoName":"v0-1-xyTN0AVfMkyunAfMoYOKz97M-nlES162fe0Y","ownerName":"v0-git-s3-storage","commitMessage":"Initial commit from v0"}}]] 113:[["b_hKztIHrXCAH",null],["b_U1bcbvkQCzt",null],["b_qtbU08QCLM4",null]] 114:[["b_hKztIHrXCAH",true],["b_U1bcbvkQCzt",true],["b_qtbU08QCLM4",true]] 115:[["b_hKztIHrXCAH",true],["b_U1bcbvkQCzt",true],["b_qtbU08QCLM4",true]] 116:[] 117:T7aba4,[V0_FILE]plaintext:file=".gitignore" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" # Admin role management *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/nancysteve73-3651s-projects/v0-admin-role-management) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/projects/yv1psQkS1Ve) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/nancysteve73-3651s-projects/v0-admin-role-management](https://vercel.com/nancysteve73-3651s-projects/v0-admin-role-management)** ## Build your app Continue building your app on: **[https://v0.app/chat/projects/yv1psQkS1Ve](https://v0.app/chat/projects/yv1psQkS1Ve)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/layout.tsx" import type { Metadata } from 'next' import { GeistSans } from 'geist/font/sans' import { GeistMono } from 'geist/font/mono' import './globals.css' export const metadata: Metadata = { title: 'v0 App', description: 'Created with v0', generator: 'v0.app', } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/loading.tsx" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/mobile/page.tsx" import MobileScannerPWA from "@/mobile/mobile-scanner-pwa" export default function MobilePage() { return } [V0_FILE]typescriptreact:file="app/mobile/warehouse-scanner-app/page.tsx" import WarehouseScannerApp from "@/mobile/warehouse-scanner-app" export default function WarehouseScannerPage() { return } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useState } from "react" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { CalendarDays, Package, Search, Shield, Truck, Users, Building2, Pill, Eye, Play, Pause, RefreshCw, Database, Clock, Wifi, WifiOff, AlertTriangle, TrendingDown, } from "lucide-react" import { MedicineTracking } from "@/components/medicine-tracking" import { ReportsDashboard } from "@/components/reports-dashboard" import { DataStoragePanel } from "@/components/data-storage-panel" import { RoleDashboardSelector } from "@/components/role-dashboard-selector" import { AnalyticsDashboard } from "@/components/analytics-dashboard" import { useRealTimeData } from "@/hooks/use-real-time-data" export default function AdminDashboard() { const { data, currentRowData, currentRowIndex, isLoading, error, isAutoRefresh, storageStats, refresh, toggleAutoRefresh, clearStoredData, exportStoredData, updateStorageStats, } = useRealTimeData(3000) // Refresh every 3 seconds const [searchTerm, setSearchTerm] = useState("") const [filterRole, setFilterRole] = useState("all") const [filterStatus, setFilterStatus] = useState("all") const [filterCity, setFilterCity] = useState("all") const [trackingMedicineId, setTrackingMedicineId] = useState(null) const [showRoleDashboards, setShowRoleDashboards] = useState(false) // Get unique values for filters const uniqueCities = Array.from(new Set(data.records.map((record) => record.location))).sort() const uniqueRoles = Array.from(new Set(data.records.map((record) => record.role))).sort() const uniqueStatuses = Array.from(new Set(data.records.map((record) => record.status))).sort() const filteredData = data.records.filter((record) => { const matchesSearch = record.medicineName?.toLowerCase().includes(searchTerm.toLowerCase()) || record.batchNumber?.toLowerCase().includes(searchTerm.toLowerCase()) || record.companyName?.toLowerCase().includes(searchTerm.toLowerCase()) || record.medicineId?.toLowerCase().includes(searchTerm.toLowerCase()) const matchesRole = filterRole === "all" || record.role === filterRole const matchesStatus = filterStatus === "all" || record.status === filterStatus const matchesCity = filterCity === "all" || record.location === filterCity return matchesSearch && matchesRole && matchesStatus && matchesCity }) const getStatusColor = (status: string) => { switch (status?.toLowerCase()) { case "active": case "completed": return "bg-green-100 text-green-800" case "pending": case "in-transit": return "bg-yellow-100 text-yellow-800" case "inactive": case "dispensed": return "bg-blue-100 text-blue-800" case "received": return "bg-purple-100 text-purple-800" default: return "bg-gray-100 text-gray-800" } } const getExpiryRiskColor = (risk: string) => { switch (risk?.toUpperCase()) { case "HIGH": return "bg-red-100 text-red-800 border-red-200" case "MEDIUM": return "bg-yellow-100 text-yellow-800 border-yellow-200" case "LOW": return "bg-green-100 text-green-800 border-green-200" default: return "bg-gray-100 text-gray-800 border-gray-200" } } const getStockStatusColor = (status: string) => { switch (status?.toUpperCase()) { case "IN_STOCK": return "bg-green-100 text-green-800 border-green-200" case "LOW_STOCK": return "bg-yellow-100 text-yellow-800 border-yellow-200" case "OUT_OF_STOCK": return "bg-red-100 text-red-800 border-red-200" default: return "bg-gray-100 text-gray-800 border-gray-200" } } const getRoleIcon = (role: string) => { switch (role?.toLowerCase()) { case "manufacturer": return case "distributor": return case "wholesaler": return case "pharmacist": return default: return } } const formatDateTime = (dateString: string) => { if (!dateString) return "N/A" return new Date(dateString).toLocaleString() } const formatDate = (dateString: string) => { if (!dateString) return "N/A" return new Date(dateString).toLocaleDateString() } const handleTrackMedicine = (medicineId: string) => { setTrackingMedicineId(medicineId) } // Show role dashboards if requested if (showRoleDashboards) { return setShowRoleDashboards(false)} /> } return (

{/* Header */}

Admin Dashboard

Supply Chain Management System - Real-time Medicine Tracking

{isAutoRefresh ? ( <> Live ) : ( <> Paused )} {storageStats.totalRecords} Stored

{/* Stats Cards */}

Total Records

{data.summary.totalRecords}

Live tracking

Users

{data.summary.uniqueUsers}

Unique users

Medicines

{data.summary.uniqueMedicines}

Unique medicines

Transactions

{data.summary.uniqueTransactions}

Active transactions

Expiry Risk

{data.summary.expiryRiskCount}

High risk items

Low Stock

{data.summary.lowStockCount}

Items need attention

{/* Error Display */} {error && (

Connection Error: {error}

)} {/* Main Content */} Medicine Tracking Live Row Data Data Storage Analytics Reports Role Dashboards Medicine Database View and track all medicines across the supply chain - includes both live and stored data {/* Filters */}

Search Medicines

setSearchTerm(e.target.value)} className="pl-8" />

Filter by City

Filter by Role

Filter by Status

{/* Medicine Table */}

Medicine ID Name Category Batch Number Company Location Role Quantity Status Expiry Date {/* Indicator columns with special styling */} Days to Expiry Expiry Risk Stock Status Actions {filteredData.map((record, index) => ( {record.medicineId} {record.medicineName} {record.category} {record.batchNumber} {record.companyName} {record.location}

{getRoleIcon(record.role)} {record.role}

{record.quantity} {record.status} {formatDate(record.expiryDate)} {/* Indicator columns with special highlighting */}

{record.daysToExpiry} {Number.parseInt(record.daysToExpiry) < 30 && ( )}

{record.expiryRiskFlag} {record.stockStatus} ))}

Current Row Data (Row {currentRowIndex + 1} of {data.summary.totalRecords}) Real-time single row display - updates every 3 seconds when auto-refresh is enabled {currentRowData ? (

{/* Row Navigation */}

Last Updated: {formatDateTime(currentRowData.lastUpdated)}

Row {currentRowData.rowIndex}

{/* User Information */} User Information

User ID

{currentRowData.userId}

Role

{getRoleIcon(currentRowData.role)} {currentRowData.role}

Company Name

{currentRowData.companyName}

Location

{currentRowData.location}

{/* Medicine Information */} Medicine Information

Medicine ID

{currentRowData.medicineId}

Medicine Name

{currentRowData.medicineName}

Role Dashboards

Access specialized dashboards for manufacturers, distributors, wholesalers, and pharmacists.

{/* Medicine Tracking Dialog */} {trackingMedicineId && ( setTrackingMedicineId(null)} medicineId={trackingMedicineId} /> )}

) } [V0_FILE]json:file="components.json" { "$schema": "https://ui.shadcn.com/schema.json", "style": "default", "rsc": true, "tsx": true, "tailwind": { "config": "tailwind.config.ts", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/analytics-dashboard.tsx" "use client" import { useState, useEffect } from "react" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, PieChart, Pie, Cell, AreaChart, Area, } from "recharts" import { Download, TrendingUp, MapPin, AlertTriangle, CheckCircle, Clock, BarChart3, Activity, Database, } from "lucide-react" import { useRealTimeData } from "@/hooks/use-real-time-data" const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042", "#8884D8", "#82ca9d", "#ffc658", "#ff7300"] export function AnalyticsDashboard() { const { getAllStoredRecords } = useRealTimeData() const [selectedTimeRange, setSelectedTimeRange] = useState("all") const [selectedCity, setSelectedCity] = useState("all") const [selectedRole, setSelectedRole] = useState("all") const [analyticsData, setAnalyticsData] = useState(null) useEffect(() => { const generateAnalytics = () => { const allRecords = getAllStoredRecords() if (allRecords.length === 0) { setAnalyticsData(null) return } // Filter records based on selections let filteredRecords = allRecords if (selectedCity !== "all") { filteredRecords = filteredRecords.filter((record) => record.location === selectedCity) } if (selectedRole !== "all") { filteredRecords = filteredRecords.filter((record) => record.role === selectedRole) } // Time range filtering if (selectedTimeRange !== "all") { const now = new Date() const timeRangeMap = { "7days": 7 * 24 * 60 * 60 * 1000, "30days": 30 * 24 * 60 * 60 * 1000, "90days": 90 * 24 * 60 * 60 * 1000, } const timeLimit = timeRangeMap[selectedTimeRange as keyof typeof timeRangeMap] if (timeLimit) { const cutoffDate = new Date(now.getTime() - timeLimit) filteredRecords = filteredRecords.filter((record) => { const recordDate = new Date(record.storedAt || record.lastUpdated) return recordDate >= cutoffDate }) } } // Generate comprehensive analytics const analytics = { summary: { totalRecords: filteredRecords.length, uniqueMedicines: new Set(filteredRecords.map((r) => r.medicineId)).size, uniqueUsers: new Set(filteredRecords.map((r) => r.userId)).size, uniqueCompanies: new Set(filteredRecords.map((r) => r.companyName)).size, highRiskItems: filteredRecords.filter((r) => r.expiryRiskFlag === "HIGH").length, lowStockItems: filteredRecords.filter( (r) => r.stockStatus === "LOW_STOCK" || r.stockStatus === "OUT_OF_STOCK", ).length, averageDaysToExpiry: filteredRecords.reduce((sum, r) => sum + Number.parseInt(r.daysToExpiry || "0"), 0) / filteredRecords.length, totalQuantity: filteredRecords.reduce((sum, r) => sum + (r.quantity || 0), 0), }, // City Analysis cityAnalysis: Array.from(new Set(filteredRecords.map((r) => r.location))) .map((city) => { const cityRecords = filteredRecords.filter((r) => r.location === city) return { city, totalRecords: cityRecords.length, uniqueMedicines: new Set(cityRecords.map((r) => r.medicineId)).size, highRisk: cityRecords.filter((r) => r.expiryRiskFlag === "HIGH").length, lowStock: cityRecords.filter((r) => r.stockStatus === "LOW_STOCK" || r.stockStatus === "OUT_OF_STOCK") .length, totalQuantity: cityRecords.reduce((sum, r) => sum + (r.quantity || 0), 0), averageExpiry: cityRecords.reduce((sum, r) => sum + Number.parseInt(r.daysToExpiry || "0"), 0) / cityRecords.length, } }) .sort((a, b) => b.totalRecords - a.totalRecords), // Role Analysis roleAnalysis: Array.from(new Set(filteredRecords.map((r) => r.role))).map((role) => { const roleRecords = filteredRecords.filter((r) => r.role === role) return { role, count: roleRecords.length, percentage: Math.round((roleRecords.length / filteredRecords.length) * 100), uniqueMedicines: new Set(roleRecords.map((r) => r.medicineId)).size, highRisk: roleRecords.filter((r) => r.expiryRiskFlag === "HIGH").length, lowStock: roleRecords.filter((r) => r.stockStatus === "LOW_STOCK" || r.stockStatus === "OUT_OF_STOCK") .length, } }), // Medicine Category Analysis categoryAnalysis: Array.from(new Set(filteredRecords.map((r) => r.category))) .map((category) => { const categoryRecords = filteredRecords.filter((r) => r.category === category) return { category, count: categoryRecords.length, value: categoryRecords.length, totalQuantity: categoryRecords.reduce((sum, r) => sum + (r.quantity || 0), 0), highRisk: categoryRecords.filter((r) => r.expiryRiskFlag === "HIGH").length, averageExpiry: categoryRecords.reduce((sum, r) => sum + Number.parseInt(r.daysToExpiry || "0"), 0) / categoryRecords.length, } }) .sort((a, b) => b.count - a.count), // Risk Analysis riskAnalysis: [ { category: "High Risk", count: filteredRecords.filter((r) => r.expiryRiskFlag === "HIGH").length, color: "#ef4444", percentage: Math.round( (filteredRecords.filter((r) => r.expiryRiskFlag === "HIGH").length / filteredRecords.length) * 100, ), }, { category: "Medium Risk", count: filteredRecords.filter((r) => r.expiryRiskFlag === "MEDIUM").length, color: "#f59e0b", percentage: Math.round( (filteredRecords.filter((r) => r.expiryRiskFlag === "MEDIUM").length / filteredRecords.length) * 100, ), }, { category: "Low Risk", count: filteredRecords.filter((r) => r.expiryRiskFlag === "LOW").length, color: "#10b981", percentage: Math.round( (filteredRecords.filter((r) => r.expiryRiskFlag === "LOW").length / filteredRecords.length) * 100, ), }, ], // Stock Status Analysis stockAnalysis: [ { status: "In Stock", count: filteredRecords.filter((r) => r.stockStatus === "IN_STOCK").length, color: "#10b981", }, { status: "Low Stock", count: filteredRecords.filter((r) => r.stockStatus === "LOW_STOCK").length, color: "#f59e0b", }, { status: "Out of Stock", count: filteredRecords.filter((r) => r.stockStatus === "OUT_OF_STOCK").length, color: "#ef4444", }, ], // Time-based trends (mock data based on stored timestamps) timelineTrends: generateTimelineTrends(filteredRecords), // Top medicines by quantity topMedicines: Array.from(new Set(filteredRecords.map((r) => r.medicineName))) .map((medicine) => { const medicineRecords = filteredRecords.filter((r) => r.medicineName === medicine) return { name: medicine, totalQuantity: medicineRecords.reduce((sum, r) => sum + (r.quantity || 0), 0), recordCount: medicineRecords.length, highRisk: medicineRecords.filter((r) => r.expiryRiskFlag === "HIGH").length, averageExpiry: medicineRecords.reduce((sum, r) => sum + Number.parseInt(r.daysToExpiry || "0"), 0) / medicineRecords.length, } }) .sort((a, b) => b.totalQuantity - a.totalQuantity) .slice(0, 10), // Company performance companyAnalysis: Array.from(new Set(filteredRecords.map((r) => r.companyName))) .map((company) => { const companyRecords = filteredRecords.filter((r) => r.companyName === company) return { company, totalRecords: companyRecords.length, uniqueMedicines: new Set(companyRecords.map((r) => r.medicineId)).size, totalQuantity: companyRecords.reduce((sum, r) => sum + (r.quantity || 0), 0), highRisk: companyRecords.filter((r) => r.expiryRiskFlag === "HIGH").length, averageExpiry: companyRecords.reduce((sum, r) => sum + Number.parseInt(r.daysToExpiry || "0"), 0) / companyRecords.length, } }) .sort((a, b) => b.totalRecords - a.totalRecords) .slice(0, 10), } setAnalyticsData(analytics) } generateAnalytics() }, [selectedTimeRange, selectedCity, selectedRole, getAllStoredRecords]) const generateTimelineTrends = (records: any[]) => { // Group records by date const dateGroups: { [key: string]: any[] } = {} records.forEach((record) => { const date = new Date(record.storedAt || record.lastUpdated).toISOString().split("T")[0] if (!dateGroups[date]) { dateGroups[date] = [] } dateGroups[date].push(record) }) // Convert to timeline format return Object.keys(dateGroups) .sort() .slice(-30) // Last 30 days .map((date) => ({ date: new Date(date).toLocaleDateString(), records: dateGroups[date].length, medicines: new Set(dateGroups[date].map((r) => r.medicineId)).size, highRisk: dateGroups[date].filter((r) => r.expiryRiskFlag === "HIGH").length, lowStock: dateGroups[date].filter((r) => r.stockStatus === "LOW_STOCK" || r.stockStatus === "OUT_OF_STOCK") .length, })) } const exportAnalytics = () => { if (!analyticsData) return const exportData = { generatedAt: new Date().toISOString(), filters: { selectedTimeRange, selectedCity, selectedRole }, analytics: analyticsData, } const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: "application/json" }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = `analytics-report-${new Date().toISOString().split("T")[0]}.json` document.body.appendChild(a) a.click() document.body.removeChild(a) URL.revokeObjectURL(url) } if (!analyticsData) { return (

No Data Available

No stored data found for analytics. Start collecting data by using the real-time dashboard.

) } const uniqueCities = Array.from(new Set(getAllStoredRecords().map((r) => r.location))).sort() const uniqueRoles = Array.from(new Set(getAllStoredRecords().map((r) => r.role))).sort() return (

{/* Header and Filters */} Analytics Dashboard - Stored Data Analysis Comprehensive analytics based on {analyticsData.summary.totalRecords} stored records

Time Range

Filter by City

Filter by Role

{/* Summary Cards */}

Total Records

{analyticsData.summary.totalRecords}

Analyzed records

Unique Medicines

{analyticsData.summary.uniqueMedicines}

Different medicines tracked

High Risk Items

{analyticsData.summary.highRiskItems}

Require immediate attention

Low Stock Items

{analyticsData.summary.lowStockItems}

Need restocking

{/* Analytics Tabs */} Overview Cities Roles Medicines Risk Analysis Trends

{/* Risk Distribution */} Risk Distribution Current risk levels across all medicines `${category}: ${percentage}%`} outerRadius={80} fill="#8884d8" dataKey="count" > {analyticsData.riskAnalysis.map((entry: any, index: number) => ( ))} {/* Stock Status Distribution */} Stock Status Distribution Current stock levels across all medicines

{/* Summary Statistics */} Key Metrics

Average Days to Expiry

{Math.round(analyticsData.summary.averageDaysToExpiry)}

Total Quantity

{analyticsData.summary.totalQuantity.toLocaleString()}

Unique Companies

{analyticsData.summary.uniqueCompanies}

Unique Users

{analyticsData.summary.uniqueUsers}

{/* City Performance Chart */} City Performance Records and medicines by city {/* City Risk Analysis */} City Risk Analysis Risk distribution by city

{/* City Details Table */} City Analysis Details

City Total Records Unique Medicines Total Quantity High Risk Low Stock Avg Expiry (Days) {analyticsData.cityAnalysis.map((city: any) => ( {city.city} {city.totalRecords} {city.uniqueMedicines} {city.totalQuantity.toLocaleString()} 0 ? "destructive" : "secondary"}>{city.highRisk} 0 ? "destructive" : "secondary"}>{city.lowStock} {Math.round(city.averageExpiry)} ))}

{/* Role Distribution */} Role Distribution Records distribution by user role `${role}: ${percentage}%`} outerRadius={80} fill="#8884d8" dataKey="count" > {analyticsData.roleAnalysis.map((entry: any, index: number) => ( ))} {/* Role Performance */} Role Performance Performance metrics by role

{/* Top Medicines */} Top Medicines by Quantity Medicines with highest total quantities {/* Category Distribution */} Medicine Categories Distribution by medicine category `${category}: ${count}`} outerRadius={80} fill="#8884d8" dataKey="count" > {analyticsData.categoryAnalysis.map((entry: any, index: number) => ( ))}

{/* Top Medicines Table */} Top Medicines Details

Medicine Name Total Quantity Record Count High Risk Items Avg Expiry (Days) {analyticsData.topMedicines.map((medicine: any, index: number) => ( {medicine.name} {medicine.totalQuantity.toLocaleString()} {medicine.recordCount} 0 ? "destructive" : "secondary"}> {medicine.highRisk} {Math.round(medicine.averageExpiry)} ))}

{analyticsData.riskAnalysis.map((risk: any, index: number) => (

{risk.category === "High Risk" && } {risk.category === "Medium Risk" && } {risk.category === "Low Risk" && }

{risk.count}

{risk.category} ({risk.percentage}%)

))}

Risk Analysis Chart Visual representation of risk distribution Timeline Trends Data collection trends over time {/* Company Performance */} Top Companies by Performance Companies with most medicine records

Company Total Records Unique Medicines Total Quantity High Risk Items Avg Expiry (Days) {analyticsData.companyAnalysis.map((company: any, index: number) => ( {company.company} {company.totalRecords} {company.uniqueMedicines} {company.totalQuantity.toLocaleString()} 0 ? "destructive" : "secondary"}>{company.highRisk} {Math.round(company.averageExpiry)} ))}

) } [V0_FILE]typescriptreact:file="components/barcode-generator.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { QrCode, Download, PrinterIcon as Print, Copy } from 'lucide-react' interface BarcodeGeneratorProps { medicineId: string medicineName: string batchNumber: string barcode: string } export function BarcodeGenerator({ medicineId, medicineName, batchNumber, barcode }: BarcodeGeneratorProps) { const [copied, setCopied] = useState(false) const handleCopyBarcode = async () => { try { await navigator.clipboard.writeText(barcode) setCopied(true) setTimeout(() => setCopied(false), 2000) } catch (err) { console.error('Failed to copy barcode:', err) } } const handlePrintBarcode = () => { const printWindow = window.open('', '_blank') if (printWindow) { printWindow.document.write(` Barcode - ${medicineId}

${medicineName}

Medicine ID: ${medicineId}

Batch: ${batchNumber}

${barcode}

`) printWindow.document.close() printWindow.print() } } const handleDownloadBarcode = () => { // Create a canvas element to generate the barcode image const canvas = document.createElement('canvas') const ctx = canvas.getContext('2d') if (ctx) { canvas.width = 300 canvas.height = 150 // White background ctx.fillStyle = 'white' ctx.fillRect(0, 0, canvas.width, canvas.height) // Medicine name ctx.fillStyle = 'black' ctx.font = '14px Arial' ctx.textAlign = 'center' ctx.fillText(medicineName, canvas.width / 2, 20) // Medicine ID and Batch ctx.font = '10px Arial' ctx.fillText(`ID: ${medicineId} | Batch: ${batchNumber}`, canvas.width / 2, 35) // Barcode text ctx.font = '12px Courier New' ctx.fillText(barcode, canvas.width / 2, 130) // Simple barcode representation ctx.fillStyle = 'black' const barcodeY = 50 const barcodeHeight = 60 let x = 50 // Generate simple barcode pattern for (let i = 0; i < barcode.length; i++) { const char = barcode.charCodeAt(i) const width = (char % 3) + 1 if (i % 2 === 0) { ctx.fillRect(x, barcodeY, width, barcodeHeight) } x += width + 1 } // Download the image const link = document.createElement('a') link.download = `barcode-${medicineId}.png` link.href = canvas.toDataURL() link.click() } } return (

Medicine Barcode Generated barcode for medicine tracking {/* Medicine Information */}

Medicine ID:

{medicineId}

Medicine Name:

{medicineName}

Batch Number:

{batchNumber}

Barcode:

{barcode}

{/* Visual Barcode */}

{medicineName}

ID: {medicineId} | Batch: {batchNumber}

{/* Simple barcode visualization */}

{barcode}

{/* Action Buttons */}

) } [V0_FILE]typescriptreact:file="components/barcode-scanner.tsx" "use client" import { useState, useRef, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Badge } from "@/components/ui/badge" import { Camera, Scan, X, CheckCircle, AlertCircle } from 'lucide-react' interface BarcodeScannerProps { isOpen: boolean onClose: () => void onScan: (barcode: string) => void title?: string description?: string } export function BarcodeScanner({ isOpen, onClose, onScan, title = "Scan Barcode", description = "Scan medicine barcode to update inventory" }: BarcodeScannerProps) { const [manualBarcode, setManualBarcode] = useState("") const [scanResult, setScanResult] = useState(null) const [isScanning, setIsScanning] = useState(false) const [error, setError] = useState(null) const videoRef = useRef(null) const streamRef = useRef(null) const startCamera = async () => { try { setError(null) setIsScanning(true) const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment', width: { ideal: 1280 }, height: { ideal: 720 } } }) streamRef.current = stream if (videoRef.current) { videoRef.current.srcObject = stream videoRef.current.play() } } catch (err) { setError("Camera access denied or not available") setIsScanning(false) console.error("Camera error:", err) } } const stopCamera = () => { if (streamRef.current) { streamRef.current.getTracks().forEach(track => track.stop()) streamRef.current = null } setIsScanning(false) } const simulateScan = () => { // Simulate barcode detection after a short delay setTimeout(() => { const mockBarcodes = [ "MED001-BATCH001-240115", "MED002-BATCH002-240210", "MED003-BATCH003-240305", "MED004-BATCH004-240120", "MED005-BATCH005-240201" ] const randomBarcode = mockBarcodes[Math.floor(Math.random() * mockBarcodes.length)] setScanResult(randomBarcode) stopCamera() }, 2000) } const handleManualSubmit = () => { if (manualBarcode.trim()) { setScanResult(manualBarcode.trim()) } } const handleUseScanResult = () => { if (scanResult) { onScan(scanResult) handleClose() } } const handleClose = () => { stopCamera() setScanResult(null) setManualBarcode("") setError(null) onClose() } useEffect(() => { if (isScanning && videoRef.current) { // Start simulated scanning after camera starts simulateScan() } }, [isScanning]) useEffect(() => { return () => { stopCamera() } }, []) return ( ) } [V0_FILE]typescriptreact:file="components/data-storage-panel.tsx" "use client" import { useState } from "react" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { ScrollArea } from "@/components/ui/scroll-area" import { Database, Download, Trash2, Eye, AlertTriangle, CheckCircle, Clock, HardDrive, RefreshCw } from "lucide-react" import { dataStorage } from "@/lib/data-storage" interface DataStoragePanelProps { storageStats: { totalRecords: number oldestRecord: string | null newestRecord: string | null storageSize: string } onClearData: () => void onExportData: () => void onUpdateStats: () => void } export function DataStoragePanel({ storageStats, onClearData, onExportData, onUpdateStats }: DataStoragePanelProps) { const [showClearDialog, setShowClearDialog] = useState(false) const [showViewDialog, setShowViewDialog] = useState(false) const [storedData, setStoredData] = useState([]) const getStorageStatus = () => { if (storageStats.totalRecords === 0) return { status: "empty", color: "bg-gray-100 text-gray-800", icon: Database } if (storageStats.totalRecords < 100) return { status: "low", color: "bg-blue-100 text-blue-800", icon: CheckCircle } if (storageStats.totalRecords < 500) return { status: "medium", color: "bg-yellow-100 text-yellow-800", icon: Clock } return { status: "high", color: "bg-red-100 text-red-800", icon: AlertTriangle } } const storageStatus = getStorageStatus() const StatusIcon = storageStatus.icon const handleViewStoredData = () => { const data = dataStorage.getAllStoredData() setStoredData(data) setShowViewDialog(true) } const handleClearData = () => { onClearData() setShowClearDialog(false) } const formatDateTime = (dateString: string | null) => { if (!dateString) return "N/A" return new Date(dateString).toLocaleString() } return (

{/* Storage Statistics */}

Total Records

{storageStats.totalRecords}

Stored API responses

Storage Size

{storageStats.storageSize}

Local storage used

Oldest Record

{formatDateTime(storageStats.oldestRecord)}

First stored data

Storage Status {storageStatus.status.toUpperCase()}

Current status

{/* Storage Management */} Data Storage Management Manage stored API responses and export data for analysis. All API calls are automatically stored locally.

{/* Storage Information */}

Storage Information

• All API responses are automatically stored in your browser's local storage
• Data persists between browser sessions until manually cleared
• Maximum of 1,000 records are stored to prevent performance issues
• Oldest records are automatically removed when limit is reached
• Export functionality allows you to backup your data

{/* Clear Data Confirmation Dialog */} {/* View Stored Data Dialog */}

) } [V0_FILE]typescriptreact:file="components/distributor-dashboard.tsx" "use client" import { useState } from "react" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { Textarea } from "@/components/ui/textarea" import { Truck, Plus, Edit, Trash2, Eye, Package } from 'lucide-react' import { BarcodeScanner } from "./barcode-scanner" import { findMedicineByBarcode, parseBarcode, generateBarcode } from "../utils/barcode-utils" import { MedicineRequest } from "./medicine-request" interface DistributorMedicine { id: string name: string batchNumber: string receivedFrom: string receivedDate: string quantity: number status: string distributionPrice: number storageLocation: string distributedTo: string notes: string barcode: string } const mockDistributorData: DistributorMedicine[] = [ { id: "MED001", name: "Paracetamol 500mg", batchNumber: "BATCH001", receivedFrom: "PharmaCorp Ltd", receivedDate: "2024-01-15", quantity: 1000, status: "in-transit", distributionPrice: 4.50, storageLocation: "Warehouse A - Section 1", distributedTo: "WholeMed Solutions", notes: "High demand medicine for distribution", barcode: "MED001-BATCH001-240115" }, { id: "MED004", name: "Paracetamol 500mg", batchNumber: "BATCH004", receivedFrom: "MediCore Pharma", receivedDate: "2024-01-20", quantity: 800, status: "received", distributionPrice: 4.25, storageLocation: "Warehouse B - Section 2", distributedTo: "", notes: "Ready for distribution to wholesalers", barcode: "MED004-BATCH004-240120" } ] interface DistributorDashboardProps { distributorId: string distributorName: string onBack: () => void } export function DistributorDashboard({ distributorId, distributorName, onBack }: DistributorDashboardProps) { const [medicines, setMedicines] = useState(mockDistributorData) const [isAddDialogOpen, setIsAddDialogOpen] = useState(false) const [isEditDialogOpen, setIsEditDialogOpen] = useState(false) const [isViewDialogOpen, setIsViewDialogOpen] = useState(false) const [selectedMedicine, setSelectedMedicine] = useState(null) const [formData, setFormData] = useState({ name: "", batchNumber: "", receivedFrom: "", receivedDate: "", quantity: "", distributionPrice: "", storageLocation: "", distributedTo: "", notes: "", barcode: "" }) const [isScannerOpen, setIsScannerOpen] = useState(false) const [scannedBarcode, setScannedBarcode] = useState(null) const manufacturers = ["PharmaCorp Ltd", "MediCore Pharma", "VitaHealth Pharma"] const wholesalers = ["WholeMed Solutions", "BulkPharma Corp", "MegaMed Wholesale"] const handleAdd = () => { const barcode = formData.barcode || generateBarcode( `MED${String(medicines.length + 1).padStart(3, '0')}`, formData.batchNumber, formData.receivedDate ) const newMedicine: DistributorMedicine = { id: `MED${String(medicines.length + 1).padStart(3, '0')}`, name: formData.name, batchNumber: formData.batchNumber, receivedFrom: formData.receivedFrom, receivedDate: formData.receivedDate, quantity: parseInt(formData.quantity), status: "received", distributionPrice: parseFloat(formData.distributionPrice), storageLocation: formData.storageLocation, distributedTo: formData.distributedTo, notes: formData.notes, barcode: barcode } setMedicines([...medicines, newMedicine]) setIsAddDialogOpen(false) resetForm() } const handleEdit = () => { if (!selectedMedicine) return const updatedMedicines = medicines.map(med => med.id === selectedMedicine.id ? { ...med, name: formData.name, batchNumber: formData.batchNumber, receivedFrom: formData.receivedFrom, receivedDate: formData.receivedDate, quantity: parseInt(formData.quantity), distributionPrice: parseFloat(formData.distributionPrice), storageLocation: formData.storageLocation, distributedTo: formData.distributedTo, notes: formData.notes, status: formData.distributedTo ? "in-transit" : "received", barcode: formData.barcode } : med ) setMedicines(updatedMedicines) setIsEditDialogOpen(false) resetForm() } const handleDelete = (medicineId: string) => { setMedicines(medicines.filter(med => med.id !== medicineId)) } const resetForm = () => { setFormData({ name: "", batchNumber: "", receivedFrom: "", receivedDate: "", quantity: "", distributionPrice: "", storageLocation: "", distributedTo: "", notes: "", barcode: "" }) setSelectedMedicine(null) setScannedBarcode(null) } const openEditDialog = (medicine: DistributorMedicine) => { setSelectedMedicine(medicine) setFormData({ name: medicine.name, batchNumber: medicine.batchNumber, receivedFrom: medicine.receivedFrom, receivedDate: medicine.receivedDate, quantity: medicine.quantity.toString(), distributionPrice: medicine.distributionPrice.toString(), storageLocation: medicine.storageLocation, distributedTo: medicine.distributedTo, notes: medicine.notes, barcode: medicine.barcode }) setIsEditDialogOpen(true) } const openViewDialog = (medicine: DistributorMedicine) => { setSelectedMedicine(medicine) setIsViewDialogOpen(true) } const handleScan = (barcode: string) => { setScannedBarcode(barcode) setFormData({...formData, barcode: barcode}) // Try to find existing medicine by barcode const existingMedicine = medicines.find(med => med.barcode === barcode) if (existingMedicine) { setFormData({ name: existingMedicine.name, batchNumber: existingMedicine.batchNumber, receivedFrom: existingMedicine.receivedFrom, receivedDate: existingMedicine.receivedDate, quantity: existingMedicine.quantity.toString(), distributionPrice: existingMedicine.distributionPrice.toString(), storageLocation: existingMedicine.storageLocation, distributedTo: existingMedicine.distributedTo, notes: existingMedicine.notes, barcode: existingMedicine.barcode }) } else { const parsedData = parseBarcode(barcode) if (parsedData) { setFormData({ ...formData, name: `Medicine ${parsedData.medicineId}`, batchNumber: parsedData.batchNumber, receivedDate: new Date().toISOString().split('T')[0], barcode: barcode, notes: `Scanned medicine: ${parsedData.medicineId}` }) } } setIsScannerOpen(false) setIsAddDialogOpen(true) } return (

{/* Header */}

{distributorName} Dashboard

Manage medicine distribution operations