Loading reports...

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

\n {/* Header */}\n

Reports & Analytics

\n {\n if (activeReport === 'inventory') {\n exportToCSV(products.map(p => ({\n name: p.name,\n sku: p.sku,\n category: p.category_name || 'Uncategorized',\n current_stock: p.current_stock,\n unit_price: p.unit_price,\n total_value: p.total_value,\n supplier: p.supplier_name || 'No supplier',\n low_stock: p.is_low_stock ? 'Yes' : 'No'\n })), 'inventory_report');\n } else if (activeReport === 'movements') {\n exportToCSV(movements.map(m => ({\n date: new Date(m.created_at).toLocaleDateString(),\n product_name: m.product_name,\n sku: m.product_sku,\n movement_type: m.movement_type,\n quantity: m.quantity,\n unit_price: m.unit_price || '',\n reference: m.reference_number || '',\n supplier: m.supplier_name || '',\n notes: m.notes || ''\n })), 'movements_report');\n } else if (activeReport === 'lowstock') {\n exportToCSV(lowStockProducts.map(p => ({\n name: p.name,\n sku: p.sku,\n current_stock: p.current_stock,\n min_stock_level: p.min_stock_level,\n shortage: p.min_stock_level - p.current_stock,\n unit_price: p.unit_price,\n supplier: p.supplier_name || 'No supplier'\n })), 'low_stock_report');\n }\n }}\n className=\"bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors\"\n >\n 📊 Export CSV\n \n

\n\n {/* Summary Cards */}\n

\n 📦\n

Total Products

{products.length}

\n\n

\n 💰\n

Total Value

${totalInventoryValue.toLocaleString()}

\n\n

\n ⚠️\n

Low Stock Items

{lowStockProducts.length}

\n\n

\n 📋\n

Movements (30d)

{recentMovements.length}

\n\n {/* Report Navigation */}\n

\n {[\n { id: 'inventory', label: 'Inventory Report', icon: '📦' },\n { id: 'movements', label: 'Movement History', icon: '📋' },\n { id: 'lowstock', label: 'Low Stock Alert', icon: '⚠️' }\n ].map((tab) => (\n setActiveReport(tab.id as any)}\n className={`py-4 px-1 border-b-2 font-medium text-sm transition-colors ${\n activeReport === tab.id\n ? 'border-blue-500 text-blue-600'\n : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'\n }`}\n >\n {tab.icon} {tab.label}\n \n ))}\n

\n\n

\n {activeReport === 'inventory' && (\n \n )}\n {activeReport === 'movements' && (\n \n )}\n {activeReport === 'lowstock' && (\n \n )}\n

\n );\n}\n\nfunction InventoryReport({ products }: { products: ProductWithDetails[] }) {\n const categoryStats = products.reduce((acc, product) => {\n const category = product.category_name || 'Uncategorized';\n if (!acc[category]) {\n acc[category] = { count: 0, value: 0 };\n }\n acc[category].count++;\n acc[category].value += product.total_value;\n return acc;\n }, {} as Record);\n\n return (\n

Inventory Summary by Category

\n \n

Category Breakdown

\n {Object.entries(categoryStats).map(([category, stats]) => (\n

\n {category}\n

{stats.count} products

${stats.value.toLocaleString()}

\n ))}\n

\n\n

Top 10 Products by Value

\n {products\n .sort((a, b) => b.total_value - a.total_value)\n .slice(0, 10)\n .map((product) => (\n

{product.name}

{product.current_stock} units

${product.total_value.toLocaleString()}

\n ))}\n

\n );\n}\n\nfunction MovementReport({ movements }: { movements: StockMovementWithProduct[] }) {\n const last30Days = movements.filter(m => {\n const date = new Date(m.created_at);\n const thirtyDaysAgo = new Date();\n thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);\n return date >= thirtyDaysAgo;\n });\n\n const movementStats = {\n in: last30Days.filter(m => m.movement_type === 'IN').length,\n out: last30Days.filter(m => m.movement_type === 'OUT').length,\n adjustments: last30Days.filter(m => m.movement_type === 'ADJUSTMENT').length\n };\n\n return (\n

Stock Movement Analysis (Last 30 Days)

\n \n

{movementStats.in}

Stock In Movements

{movementStats.out}

Stock Out Movements

{movementStats.adjustments}

Adjustments

\n\n

\n \n \n \n \n \n \n \n \n \n \n \n {last30Days.slice(0, 20).map((movement) => (\n \n \n \n \n \n \n \n ))}\n \n

Date	Product	Type	Quantity	Value
\n {new Date(movement.created_at).toLocaleDateString()}\n	\n {movement.product_name}\n	\n \n {movement.movement_type}\n \n	\n {movement.movement_type === 'OUT' ? '-' : '+'}{movement.quantity}\n	\n {movement.unit_price ? `$${(movement.quantity * movement.unit_price).toFixed(2)}` : '-'}\n

\n );\n}\n\nfunction LowStockReport({ products }: { products: ProductWithDetails[] }) {\n return (\n

Low Stock Alert Report

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

\n ✅\n

No products are currently low on stock!

\n ) : (\n <>\n

\n ⚠️\n

\n {products.length} product{products.length !== 1 ? 's' : ''} need{products.length === 1 ? 's' : ''} restocking\n

\n These products have fallen below their minimum stock levels and should be reordered.\n

\n\n

\n \n \n \n \n \n \n \n \n \n \n \n \n {products.map((product) => (\n \n \n \n \n \n \n \n \n ))}\n \n

Product	Current Stock	Min Level	Shortage	Supplier	Unit Price
\n {product.name} \n SKU: {product.sku} \n	\n {product.current_stock} {product.unit_of_measure}\n	\n {product.min_stock_level} {product.unit_of_measure}\n	\n {product.min_stock_level - product.current_stock} {product.unit_of_measure}\n	\n {product.supplier_name \|\| 'No supplier'}\n	\n ${product.unit_price.toFixed(2)}\n

\n \n )}\n

\n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/helton_munee/helton/code/frontend/components/Reports.tsx","extension","actionData","errors"]