[V0_FILE]typescriptreact:file="inventory-app.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState, useEffect, useCallback, useRef } from "react" import { zodResolver } from "@hookform/resolvers/zod" import { useForm, useFieldArray } from "react-hook-form" import { z } from "zod" import { CalendarIcon, Plus, X, Trash2, RotateCcw, Edit, Menu, Check, Bell, DollarSign } from "lucide-react" import { format, eachWeekOfInterval, eachMonthOfInterval, subWeeks, subMonths } from "date-fns" import { utils as XLSXUtils, write as XLSXWrite, read as XLSXRead } from "xlsx" import { useBarcode } from "@createnextapp/react-barcode" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Calendar } from "@/components/ui/calendar" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { toast } from "@/components/ui/use-toast" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@/components/ui/alert-dialog" import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet" import { startOfWeek, endOfWeek, startOfMonth, endOfMonth, startOfYear, endOfYear } from "date-fns" import { ResponsiveContainer, XAxis, YAxis, Tooltip, AreaChart, Area, CartesianGrid } from "recharts" import { startOfDay, endOfDay, isSameDay, add } from "date-fns" const salesFormSchema = z.object({ customerName: z.string().optional(), customerPhone: z.string().optional(), date: z.date({ required_error: "A date of sale is required.", }), paymentMethod: z.string({ required_error: "Please select a payment method.", }), sales: z .array( z.object({ productName: z.string({ required_error: "Please enter or select a product.", }), customProduct: z.boolean().default(false), quantity: z .string() .transform((val) => Number.parseInt(val, 10)) .refine((n) => n > 0, { message: "Quantity must be greater than 0", }), price: z .string() .transform((val) => Number.parseFloat(val)) .refine((n) => n > 0, { message: "Price must be greater than 0", }), size: z.string({ required_error: "Please select a size.", }), tax: z .string() .transform((val) => Number.parseFloat(val || "0")) .optional(), }), ) .min(1, "At least one sale item is required"), }) const productFormSchema = z.object({ itemName: z.string().min(2, { message: "Item name must be at least 2 characters.", }), category: z.string().optional(), color: z.string().optional(), costPrice: z .string() .transform((val) => Number.parseFloat(val)) .refine((n) => n > 0, { message: "Cost price must be greater than 0", }), salePrice: z .string() .transform((val) => Number.parseFloat(val)) .refine((n) => n > 0, { message: "Sale price must be greater than 0", }), tax: z .string() .transform((val) => Number.parseFloat(val || "0")) .optional(), sizes: z .array( z.object({ size: z.string().min(1, "Size is required"), quantity: z.coerce.number().int().min(0, "Quantity must be 0 or greater"), }), ) .min(1, "At least one size is required"), }) type Product = z.infer type SaleItem = z.infer["sales"][number] & { customerName: string customerPhone: string date: Date paymentMethod: string totalPrice: number customProduct: boolean isPaid?: boolean // New field to track payment status } const settingsFormSchema = z.object({ permanentCategories: z.array(z.string()), sizes: z.array(z.string()), }) const expenseFormSchema = z.object({ category: z.string({ required_error: "Please select an expense category.", }), amount: z .string() .transform((val) => Number.parseFloat(val)) .refine((n) => n > 0, { message: "Amount must be greater than 0", }), date: z.date({ required_error: "Date is required.", }), description: z.string().optional(), recurring: z.boolean().default(false), recurringPeriod: z.string().optional(), }) type Expense = z.infer type BarcodeOptions = { background: string lineColor: string width: number height: number fontSize: number margin: number displayValue: boolean } const calculateMetrics = (salesHistory: SaleItem[], products: Product[]) => { const now = new Date() const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, now.getDate()) const currentMonthSales = salesHistory.filter((sale) => new Date(sale.date) > lastMonth) const previousMonthSales = salesHistory.filter((sale) => { const saleDate = new Date(sale.date) return ( saleDate <= lastMonth && saleDate > new Date(lastMonth.getFullYear(), lastMonth.getMonth() - 1, lastMonth.getDate()) ) }) const totalSales = currentMonthSales.reduce((sum, sale) => sum + sale.totalPrice, 0) const previousMonthTotal = previousMonthSales.reduce((sum, sale) => sum + sale.totalPrice, 0) const totalProductCost = products.reduce((sum, product) => { return sum + product.sizes.reduce((sizeSum, size) => sizeSum + size.quantity * product.costPrice, 0) }, 0) const salesChange = previousMonthTotal === 0 ? 100 : ((totalSales - previousMonthTotal) / previousMonthTotal) * 100 return { totalSales, salesChange: salesChange.toFixed(1), totalOrders: currentMonthSales.length, averageOrderValue: currentMonthSales.length > 0 ? (totalSales / currentMonthSales.length).toFixed(2) : 0, totalProductCost: totalProductCost.toFixed(2), } } const generateChartData = (salesHistory, period) => { const endDate = new Date() let startDate, intervalFunc, formatFunc switch (period) { case "weekly": startDate = subWeeks(endDate, 12) // Show last 12 weeks intervalFunc = eachWeekOfInterval formatFunc = (date) => `Week ${format(date, "w")}` break case "monthly": startDate = subMonths(endDate, 12) // Show last 12 months intervalFunc = eachMonthOfInterval formatFunc = (date) => format(date, "MMM yyyy") break case "6": startDate = subMonths(endDate, 6) intervalFunc = eachMonthOfInterval formatFunc = (date) => format(date, "MMM yyyy") break case "12": startDate = subMonths(endDate, 12) intervalFunc = eachMonthOfInterval formatFunc = (date) => format(date, "MMM yyyy") break default: startDate = subMonths(endDate, 6) intervalFunc = eachMonthOfInterval formatFunc = (date) => format(date, "MMM yyyy") } const range = intervalFunc({ start: startDate, end: endDate }) const data = range.map((intervalStart) => { let intervalEnd if (period === "weekly") { intervalEnd = endOfWeek(intervalStart) } else { intervalEnd = endOfMonth(intervalStart) } const intervalSales = salesHistory.filter((sale) => { const saleDate = new Date(sale.date) return saleDate >= intervalStart && saleDate <= intervalEnd }) const totalSales = intervalSales.reduce((sum, sale) => sum + sale.totalPrice, 0) return { period: formatFunc(intervalStart), sales: totalSales, } }) return data } function BarcodeGenerator({ value, price, options }: { value: string; price: number; options: BarcodeOptions }) { const barcodeValue = `${value}|TK${price.toFixed(2)}` const { inputRef } = useBarcode({ value: barcodeValue, options: { background: options.background, width: options.width, height: options.height, fontSize: options.fontSize, margin: options.margin, displayValue: options.displayValue, lineColor: options.lineColor, }, }) return } const calculateDailyTotals = (salesHistory: SaleItem[], selectedDate: Date, invoiceType: string) => { const currentDate = new Date() const filteredSales = selectedDate <= currentDate ? salesHistory.filter((sale) => isSameDay(new Date(sale.date), selectedDate)) : salesHistory.filter((sale) => isSameDay(new Date(sale.date), currentDate)) const salesByInvoiceType = filteredSales.filter((sale) => { if (invoiceType === "sales") return sale.paymentMethod !== "due" if (invoiceType === "due") return sale.paymentMethod === "due" && !sale.isPaid return true // For "all" option }) return { totalSales: salesByInvoiceType.reduce((sum, sale) => sum + sale.totalPrice, 0), totalOrders: salesByInvoiceType.length, averageOrderValue: salesByInvoiceType.length > 0 ? salesByInvoiceType.reduce((sum, sale) => sum + sale.totalPrice, 0) / salesByInvoiceType.length : 0, } } export default function Dashboard() { const [activeNav, setActiveNav] = useState("Dashboard") const [products, setProducts] = useState(() => { if (typeof window !== "undefined") { const saved = localStorage.getItem("products") return saved ? JSON.parse(saved) : [] } return [] }) const [isAddProductOpen, setIsAddProductOpen] = useState(false) const [settings, setSettings] = useState(() => { if (typeof window !== "undefined") { const saved = localStorage.getItem("settings") return saved ? JSON.parse(saved) : { permanentCategories: ["Shoes"], sizes: ["6", "7", "8", "9", "10", "11"], } } return { permanentCategories: ["Shoes"], sizes: ["6", "7", "8", "9", "10", "11"], } }) const [selectedProduct, setSelectedProduct] = useState(null) const [availableSizes, setAvailableSizes] = useState<{ size: string; quantity: number }[]>([]) const [isSalesFormOpen, setIsSalesFormOpen] = useState(false) const [salesHistory, setSalesHistory] = useState(() => { if (typeof window !== "undefined") { const saved = localStorage.getItem("salesHistory") return saved ? JSON.parse(saved) : [] } return [] }) const [editingSale, setEditingSale] = useState(null) const [productSearch, setProductSearch] = useState("") const [expenses, setExpenses] = useState(() => { if (typeof window !== "undefined") { const saved = localStorage.getItem("expenses") return saved ? JSON.parse(saved) : [] } return [] }) const [isAddExpenseOpen, setIsAddExpenseOpen] = useState(false) const [editingExpense, setEditingExpense] = useState<(Expense & { id: string }) | null>(null) const [mobileMenuOpen, setMobileMenuOpen] = useState(false) const [chartPeriod, setChartPeriod] = useState("monthly") const [posSearch, setPosSearch] = useState("") const [invoiceType, setInvoiceType] = useState("sales") const [hasDueSales, setHasDueSales] = useState(false) const [dueSalesDetails, setDueSalesDetails] = useState([]) const [isDueSalesOpen, setIsDueSalesOpen] = useState(false) const [barcodeOptions, setBarcodeOptions] = useState({ background: "#ffffff", lineColor: "#000000", width: 2, height: 100, fontSize: 20, margin: 10, displayValue: true, }) const [isCustomizeOpen, setIsCustomizeOpen] = useState(false) const [lastSelectedCategory, setLastSelectedCategory] = useState("Shoes") const [editingProduct, setEditingProduct] = useState(null) const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false) const [productToDelete, setProductToDelete] = useState(null) const [selectedDate, setSelectedDate] = useState(new Date()) const [reportType, setReportType] = useState<"daily" | "weekly" | "monthly" | "yearly">("daily") // Utility function to calculate total price const calculateTotalPrice = (basePrice: number, quantity: number, taxPercentage = 0) => { const subtotal = basePrice * quantity const taxAmount = subtotal * (taxPercentage / 100) return subtotal + taxAmount } // Function to update product inventory after sale const updateProductInventory = (productName: string, size: string, soldQuantity: number, isReturn = false) => { setProducts((currentProducts) => currentProducts.map((product) => { if (product.itemName === productName) { return { ...product, sizes: product.sizes.map((sizeItem) => { if (sizeItem.size === size) { return { ...sizeItem, quantity: isReturn ? sizeItem.quantity + soldQuantity : sizeItem.quantity - soldQuantity, } } return sizeItem }), } } return product }), ) } const salesForm = useForm>({ resolver: zodResolver(salesFormSchema), defaultValues: { customerName: "", customerPhone: "", date: new Date(), paymentMethod: "", sales: [ { productName: "", quantity: "", price: "", size: "", tax: "", customProduct: false, }, ], }, }) const productForm = useForm>({ resolver: zodResolver(productFormSchema), defaultValues: { itemName: "", category: "", color: "", costPrice: "", salePrice: "", tax: "", sizes: Array(6).fill({ size: "", quantity: 1 }), }, }) const { fields, append, remove } = useFieldArray({ control: salesForm.control, name: "sales", }) const { fields: productFields, append: productAppend, remove: productRemove, } = useFieldArray({ control: productForm.control, name: "sizes", }) async function onSalesSubmit(values: z.infer) { try { const newSales = [] for (const sale of values.sales) { const selectedProduct = products.find((p) => p.itemName === sale.productName) if (!selectedProduct && !sale.customProduct) { toast({ title: "Error", description: `Product ${sale.productName} not found`, variant: "destructive", }) return } if (sale.customProduct) { const totalPrice = calculateTotalPrice( Number.parseFloat(sale.price.toString()), Number.parseInt(sale.quantity.toString()), Number.parseFloat(sale.tax?.toString() || "0"), ) newSales.push({ ...sale, customerName: values.customerName || "Anonymous", customerPhone: values.customerPhone || "N/A", date: values.date, paymentMethod: values.paymentMethod, totalPrice, customProduct: true, isPaid: values.paymentMethod !== "due", // Mark as paid if not a due payment }) } else { const selectedSize = selectedProduct!.sizes.find((s) => s.size === sale.size) if (!selectedSize) { toast({ title: "Error", description: `Invalid size ${sale.size} for product ${sale.productName}`, variant: "destructive", }) return } if (selectedSize.quantity < Number.parseInt(sale.quantity.toString())) { toast({ title: "Error", description: `Not enough items in stock for ${sale.productName} size ${sale.size}`, variant: "destructive", }) return } updateProductInventory(sale.productName, sale.size, Number.parseInt(sale.quantity.toString())) const totalPrice = calculateTotalPrice( Number.parseFloat(sale.price.toString()), Number.parseInt(sale.quantity.toString()), Number.parseFloat(sale.tax?.toString() || "0"), ) newSales.push({ ...sale, customerName: values.customerName || "Anonymous", customerPhone: values.customerPhone || "N/A", date: values.date, paymentMethod: values.paymentMethod, totalPrice, customProduct: false, isPaid: values.paymentMethod !== "due", // Mark as paid if not a due payment }) } } setSalesHistory((prev) => [...newSales, ...prev]) setIsSalesFormOpen(false) toast({ title: "Sales recorded successfully", description: `${newSales.length} sale(s) have been recorded.`, }) salesForm.reset({ customerName: "", customerPhone: "", date: new Date(), paymentMethod: "", sales: [ { productName: "", quantity: "", price: "", size: "", tax: "", customProduct: false, }, ], }) } catch (error) { console.error("Error in onSalesSubmit:", error) toast({ title: "Error", description: "An unexpected error occurred while processing the sales.", variant: "destructive", }) } } const handleEditProduct = (product: Product) => { setEditingProduct(product) setIsAddProductOpen(true) productForm.reset({ itemName: product.itemName, category: product.category || "", color: product.color || "", costPrice: product.costPrice.toString(), salePrice: product.salePrice.toString(), tax: product.tax?.toString() || "", sizes: product.sizes, }) } const handleDeleteProduct = (product: Product) => { setProductToDelete(product) setIsDeleteDialogOpen(true) } const confirmDeleteProduct = () => { if (productToDelete) { setProducts(products.filter((p) => p.itemName !== productToDelete.itemName)) setIsDeleteDialogOpen(false) setProductToDelete(null) toast({ title: "Product deleted", description: `${productToDelete.itemName} has been removed from the inventory.`, }) } } function onProductSubmit(values: z.infer) { const validSizes = values.sizes.filter((size) => size.size.trim() !== "" && size.quantity >= 0) if (validSizes.length === 0) { toast({ title: "Error", description: "At least one size with quantity is required", variant: "destructive", }) return } const newProduct = { ...values, category: values.category || lastSelectedCategory, color: values.color || "N/A", sizes: validSizes, } if (editingProduct) { setProducts(products.map((p) => (p.itemName === editingProduct.itemName ? newProduct : p))) toast({ title: "Product updated", description: `${newProduct.itemName} has been updated in the inventory.`, }) setEditingProduct(null) } else { setProducts([...products, newProduct]) toast({ title: "Product added", description: `${newProduct.itemName} has been added to the inventory.`, }) } productForm.reset() setIsAddProductOpen(false) } const handleDeleteSale = (index: number) => { setSalesHistory((prev) => prev.filter((_, i) => i !== index)) toast({ title: "Sale deleted", description: "The sale has been removed from the history.", }) } const handleReturnSale = (sale: SaleItem, index: number) => { // Update inventory if (!sale.customProduct) { updateProductInventory(sale.productName, sale.size, sale.quantity, true) } // Remove from sales history setSalesHistory((prev) => prev.filter((_, i) => i !== index)) toast({ title: "Item returned", description: `${sale.quantity} ${sale.productName}(s) have been returned to stock.`, }) } const handleEditSale = (sale: SaleItem) => { setEditingSale(sale) salesForm.reset({ customerName: sale.customerName, customerPhone: sale.customerPhone, date: new Date(sale.date), paymentMethod: sale.paymentMethod, sales: [ { productName: sale.productName, quantity: sale.quantity.toString(), price: sale.price.toString(), size: sale.size, tax: sale.tax?.toString() || "0", customProduct: sale.customProduct, }, ], }) setIsSalesFormOpen(true) } const handleMarkAsPaid = (index: number) => { setSalesHistory((prev) => prev.map((sale, i) => { if (i === index && sale.paymentMethod === "due" && !sale.isPaid) { return { ...sale, isPaid: true, paymentMethod: "cash" } } return sale }), ) toast({ title: "Payment received", description: "The sale has been marked as paid.", }) setIsDueSalesOpen(false) } const onEditSalesSubmit = (values: z.infer) => { if (!editingSale) return // Remove the old sale from inventory only if it wasn't a custom product if (!editingSale.customProduct) { updateProductInventory(editingSale.productName, editingSale.size, editingSale.quantity, true) } // Process the edited sale const editedSales = values.sales.map((sale) => { const selectedProduct = products.find((p) => p.itemName === sale.productName) // Update inventory for the new sale only if it's not a custom product if (selectedProduct && !sale.customProduct) { updateProductInventory(sale.productName, sale.size, Number.parseInt(sale.quantity.toString())) } // Calculate final price const totalPrice = calculateTotalPrice( Number.parseFloat(sale.price.toString()), Number.parseInt(sale.quantity.toString()), Number.parseFloat(sale.tax?.toString() || "0"), ) return { ...sale, customerName: values.customerName || "Anonymous", customerPhone: values.customerPhone || "N/A", date: values.date, paymentMethod: values.paymentMethod, totalPrice, customProduct: !selectedProduct, } }) // Update sales history setSalesHistory((prev) => prev.map((s) => s === editingSale ? { ...editedSales[0], customerName: values.customerName || "Anonymous", customerPhone: values.customerPhone || "N/A", isPaid: values.paymentMethod !== "due", } : s, ), ) setIsSalesFormOpen(false) setEditingSale(null) toast({ title: "Sale updated successfully", description: "The sale has been updated in the history.", }) salesForm.reset() } useEffect(() => { if (typeof window !== "undefined") { localStorage.setItem("products", JSON.stringify(products)) } }, [products]) useEffect(() => { if (typeof window !== "undefined") { localStorage.setItem("salesHistory", JSON.stringify(salesHistory)) } }, [salesHistory]) useEffect(() => { if (typeof window !== "undefined") { localStorage.setItem("settings", JSON.stringify(settings)) } }, [settings]) useEffect(() => { if (typeof window !== "undefined") { localStorage.setItem("expenses", JSON.stringify(expenses)) } }, [expenses]) const handleFormatData = () => { // Clear localStorage if (typeof window !== "undefined") { localStorage.removeItem("products") localStorage.removeItem("salesHistory") localStorage.removeItem("settings") localStorage.removeItem("expenses") } // Reset state variables setProducts([]) setSalesHistory([]) setSettings({ permanentCategories: ["Shoes"], sizes: ["6", "7", "8", "9", "10", "11"], }) setExpenses([]) toast({ title: "Data formatted successfully", description: "All app data has been reset to default.", }) } const exportData = () => { try { // Create workbook const wb = XLSXUtils.book_new() // Format products data const productsData = products.map((product) => ({ "Item Name": product.itemName, Category: product.category || "", "Cost Price": product.costPrice, "Sale Price": product.salePrice, Tax: product.tax || 0, "Sizes & Quantities": product.sizes.map((s) => `${s.size}: ${s.quantity}`).join(", "), })) // Format sales data with proper date handling const salesData = salesHistory.map((sale) => ({ Date: format(new Date(sale.date), "PP"), "Customer Name": sale.customerName, "Customer Phone": sale.customerPhone, Product: sale.productName, Size: sale.size, Quantity: sale.quantity, Price: sale.price, Tax: sale.tax || 0, "Total Price": sale.totalPrice, "Payment Method": sale.paymentMethod, "Custom Product": sale.customProduct ? "Yes" : "No", })) // Format settings data const settingsData = [ { "Permanent Categories": settings.permanentCategories.join(", "), Sizes: settings.sizes.join(", "), }, ] // Create worksheets with error handling try { const productsSheet = XLSXUtils.json_to_sheet(productsData) const salesSheet = XLSXUtils.json_to_sheet(salesData) const settingsSheet = XLSXUtils.json_to_sheet(settingsData) // Add worksheets to workbook XLSXUtils.book_append_sheet(wb, productsSheet, "Products") XLSXUtils.book_append_sheet(wb, salesSheet, "Sales") XLSXUtils.book_append_sheet(wb, settingsSheet, "Settings") // Generate and download file const excelBuffer = XLSXWrite(wb, { bookType: "xlsx", type: "array" }) const data = new Blob([excelBuffer], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", }) const url = window.URL.createObjectURL(data) const link = document.createElement("a") link.href = url link.download = "store_data.xlsx" link.click() window.URL.revokeObjectURL(url) toast({ title: "Data exported successfully", description: "Your data has been exported to an Excel file.", }) } catch (err) { console.error("Worksheet creation error:", err) throw new Error("Failed to create Excel worksheets") } } catch (error) { console.error("Export error:", error) toast({ title: "Export failed", description: "There was an error exporting your data. Please try again.", variant: "destructive", }) } } const importData = () => { try { const input = document.createElement("input") input.type = "file" input.accept = ".xlsx" input.onchange = async (e) => { try { const file = (e.target as HTMLInputElement).files?.[0] if (!file) { throw new Error("No file selected") } // Create a new FileReader const reader = new FileReader() reader.onload = (event) => { try { const binaryStr = event.target?.result if (!binaryStr) { throw new Error("Failed to read file content") } // Parse workbook const workbook = XLSXRead(binaryStr, { type: "binary" }) // Validate required sheets exist if (!workbook.Sheets["Products"] || !workbook.Sheets["Sales"] || !workbook.Sheets["Settings"]) { throw new Error("Invalid file format: Missing required sheets (Products, Sales, or Settings)") } // Parse Products sheet const productsSheet = workbook.Sheets["Products"] const productsData = XLSXUtils.sheet_to_json(productsSheet) if (!Array.isArray(productsData)) { throw new Error("Invalid products data format") } const formattedProducts = productsData.map((product: any) => { if (!product["Item Name"]) { throw new Error("Invalid product data: Missing Item Name") } const sizesStr = product["Sizes & Quantities"] if (!sizesStr) { throw new Error(`Invalid product data: Missing sizes for ${product["Item Name"]}`) } return { itemName: product["Item Name"], category: product["Category"] || "", color: product["color"] || "", costPrice: Number(product["Cost Price"]), salePrice: Number(product["Sale Price"]), tax: Number(product["Tax"] || "0"), sizes: String(sizesStr) .split(",") .map((sizeStr) => { const [size, quantityStr] = sizeStr.split(":").map((s) => s.trim()) const quantity = Number.parseInt(quantityStr) if (!size || isNaN(quantity)) { throw new Error(`Invalid size format for product ${product["Item Name"]}`) } return { size, quantity } }), } }) // Parse Sales sheet const salesSheet = workbook.Sheets["Sales"] const salesData = XLSXUtils.sheet_to_json(salesSheet) if (!Array.isArray(salesData)) { throw new Error("Invalid sales data format") } const formattedSales = salesData.map((sale: any) => { if (!sale["Customer Name"] || !sale["Product"]) { throw new Error("Invalid sale data: Missing required fields") } return { customerName: sale["Customer Name"], customerPhone: sale["Customer Phone"], date: new Date(sale["Date"]), productName: sale["Product"], size: sale["Size"], quantity: Number(sale["Quantity"]), price: Number(sale["Price"]), tax: Number(sale["Tax"] || "0"), totalPrice: Number(sale["Total Price"]), paymentMethod: sale["Payment Method"], customProduct: sale["Custom Product"] === "Yes", } }) // Parse Settings sheet const settingsSheet = workbook.Sheets["Settings"] const settingsData = XLSXUtils.sheet_to_json(settingsSheet) if (!Array.isArray(settingsData) || !settingsData[0]) { throw new Error("Invalid settings data format") } const newSettings = { permanentCategories: String(settingsData[0]["Permanent Categories"] || "") .split(",") .map((s) => s.trim()), sizes: String(settingsData[0]["Sizes"] || "") .split(",") .map((s) => s.trim()), } // Update state only after all data is validated setProducts(formattedProducts) setSalesHistory(formattedSales) setSettings(newSettings) toast({ title: "Data imported successfully", description: `Imported ${formattedProducts.length} products and ${formattedSales.length} sales records.`, }) } catch (error) { console.error("Error parsing Excel file:", error) toast({ title: "Import failed", description: error instanceof Error ? error.message : "Failed to parse Excel file", variant: "destructive", }) } } reader.onerror = (error) => { console.error("FileReader error:", error) toast({ title: "Import failed", description: "Failed to read the file", variant: "destructive", }) } // Read file as binary string reader.readAsBinaryString(file) } catch (error) { console.error("File selection error:", error) toast({ title: "Import failed", description: error instanceof Error ? error.message : "Failed to process the selected file", variant: "destructive", }) } } input.click() } catch (error) { console.error("Import initialization error:", error) toast({ title: "Import failed", description: "Failed to initialize import process", variant: "destructive", }) } } const expenseForm = useForm>({ resolver: zodResolver(expenseFormSchema), defaultValues: { category: "", amount: "", date: new Date(), description: "", recurring: false, recurringPeriod: "", }, }) function onExpenseSubmit(values: z.infer) { if (editingExpense) { setExpenses( expenses.map((expense) => (expense.id === editingExpense.id ? { ...values, id: editingExpense.id } : expense)), ) toast({ title: "Expense updated", description: "The expense has been updated successfully.", }) } else { setExpenses([...expenses, { ...values, id: Math.random().toString(36).substr(2, 9) }]) toast({ title: "Expense added", description: "The expense has been added successfully.", }) } setIsAddExpenseOpen(false) setEditingExpense(null) expenseForm.reset() } const handleDeleteExpense = (id: string) => { setExpenses(expenses.filter((expense) => expense.id !== id)) toast({ title: "Expense deleted", description: "The expense has been deleted successfully.", }) } const handleEditExpense = (expense: Expense & { id: string }) => { setEditingExpense(expense) expenseForm.reset({ category: expense.category, amount: expense.amount.toString(), date: new Date(expense.date), description: expense.description, recurring: expense.recurring, recurringPeriod: expense.recurringPeriod, }) setIsAddExpenseOpen(true) } const gradients = [ "bg-gradient-to-r from-[#09203F] to-[#537895]", "bg-gradient-to-r from-[#C33764] to-[#1D2671]", "bg-gradient-to-r from-[#02AABD] to-[#00CDAC]", "bg-gradient-to-r from-[#662D8C] to-[#ED1E79]", ] const checkForDueSales = useCallback(() => { const dueSales = salesHistory.filter((sale) => sale.paymentMethod === "due" && !sale.isPaid) setHasDueSales(dueSales.length > 0) setDueSalesDetails(dueSales) }, [salesHistory]) useEffect(() => { checkForDueSales() }, [checkForDueSales]) const handleBarcodeDownload = (product: Product) => { const svg = document.getElementById(`barcode-${product.itemName}`) as SVGSVGElement if (svg) { const svgData = new XMLSerializer().serializeToString(svg) const canvas = document.createElement("canvas") const ctx = canvas.getContext("2d") const img = new Image() img.crossOrigin = "anonymous" img.onload = () => { canvas.width = img.width canvas.height = img.height ctx?.drawImage(img, 0, 0) const pngFile = canvas.toDataURL("image/png") const downloadLink = document.createElement("a") downloadLink.download = `${product.itemName}_barcode.png` downloadLink.href = pngFile downloadLink.click() } img.src = "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(svgData))) } } const printRef = useRef(null) const handlePrintAllBarcodes = useCallback(() => { const printContent = printRef.current if (printContent) { const originalContents = document.body.innerHTML const printContents = printContent.innerHTML document.body.innerHTML = printContents window.print() document.body.innerHTML = originalContents window.location.reload() // Reload the page to restore the React app } }, []) const handleCustomizeBarcode = () => { setIsCustomizeOpen(true) } const formatCurrency = (amount: number) => { return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(amount) } const getReportDateRange = () => { switch (reportType) { case "daily": return { start: startOfDay(selectedDate), end: endOfDay(selectedDate) } case "weekly": return { start: startOfWeek(selectedDate), end: endOfWeek(selectedDate) } case "monthly": return { start: startOfMonth(selectedDate), end: endOfMonth(selectedDate) } case "yearly": return { start: startOfYear(selectedDate), end: endOfYear(selectedDate) } } } const filterSalesByDateRange = () => { const { start, end } = getReportDateRange() return salesHistory.filter((sale) => { const saleDate = new Date(sale.date) // Only include sales that are not due or are paid return saleDate >= start && saleDate <= end && (sale.paymentMethod !== "due" || sale.isPaid) }) } const calculateTotalSales = () => { return filterSalesByDateRange().reduce((total, sale) => total + sale.totalPrice, 0) } const calculateNumberOfOrders = () => { return filterSalesByDateRange().length } const calculateAverageOrderValue = () => { const filteredSales = filterSalesByDateRange() const totalSales = filteredSales.reduce((total, sale) => total + sale.totalPrice, 0) return filteredSales.length > 0 ? totalSales / filteredSales.length : 0 } const calculateTotalProfit = () => { return filterSalesByDateRange().reduce((total, sale) => { const product = products.find((p) => p.itemName === sale.productName) if (product && !sale.customProduct) { const profit = (sale.price - product.costPrice) * sale.quantity return total + profit } return total }, 0) } const getSalesTrendData = () => { const { start, end } = getReportDateRange() const data = [] let current = start while (current <= end) { const dailySales = salesHistory.filter((sale) => { const saleDate = new Date(sale.date) return isSameDay(saleDate, current) && (sale.paymentMethod !== "due" || sale.isPaid) }) const totalSales = dailySales.reduce((total, sale) => total + sale.totalPrice, 0) const totalProfit = dailySales.reduce((total, sale) => { const product = products.find((p) => p.itemName === sale.productName) if (product && !sale.customProduct) { const profit = (sale.price - product.costPrice) * sale.quantity return total + profit } return total }, 0) data.push({ date: format(current, reportType === "yearly" ? "MMM" : "MMM dd"), sales: totalSales, profit: totalProfit, }) current = add(current, { days: 1 }) } return data } const getTopSellingProducts = () => { const filteredSales = filterSalesByDateRange() const productSales = filteredSales.reduce((acc, sale) => { const product = acc.find((p) => p.name === sale.productName) if (product) { product.quantitySold += sale.quantity product.revenue += sale.totalPrice if (!sale.customProduct) { const originalProduct = products.find((p) => p.itemName === sale.productName) if (originalProduct) { product.profit += (sale.price - originalProduct.costPrice) * sale.quantity } } } else { acc.push({ name: sale.productName, quantitySold: sale.quantity, revenue: sale.totalPrice, profit: sale.customProduct ? 0 : (sale.price - (products.find((p) => p.itemName === sale.productName)?.costPrice || 0)) * sale.quantity, }) } return acc }, []) return productSales.sort((a, b) => b.quantitySold - a.quantitySold).slice(0, 5) } const SummaryCard = ({ title, value, icon: Icon }) => ( {title}

{value}

) const handleReturnDueSale = (sale: SaleItem, index: number) => { // Update inventory if (!sale.customProduct) { updateProductInventory(sale.productName, sale.size, sale.quantity, true) } // Remove from sales history setSalesHistory((prev) => prev.filter((_, i) => i !== index)) toast({ title: "Item returned", description: `${sale.quantity} ${sale.productName}(s) have been returned to stock.`, }) // Close the due sales sheet setIsDueSalesOpen(false) } return (

{/* Sidebar for desktop */}

panze

{/* Mobile menu */}

panze

{/* Overlay for mobile menu */} {mobileMenuOpen && (

setMobileMenuOpen(false)} >

)} {/* Main Content */}

{/* Mobile header */}

panze

{/* Placeholder for balance */}

{activeNav === "Dashboard" ? ( <>

Dashboard Overview

{/* Metrics */}

{(() => { const metrics = calculateMetrics(salesHistory, products) return [ { title: "Total Sales", value: `$${metrics.totalSales.toFixed(2)}`, change: `${metrics.salesChange}%`, color: "bg-blue-100", }, { title: "Total Product Cost", value: `$${metrics.totalProductCost}`, color: "bg-yellow-100", }, { title: "Average Order Value", value: `$${metrics.averageOrderValue}`, change: `${metrics.salesChange}%`, color: "bg-purple-100", }, { title: "Total Orders", value: metrics.totalOrders, change: `${metrics.salesChange}%`, color: "bg-green-100", }, ].map((metric) => (

{metric.title}

{metric.value}

= 0 ? "text-green-600" : "text-red-600" }`} > {metric.title === "Total Product Cost" ? "" : Number.parseFloat(metric.change) >= 0 ? "+" : ""} {metric.change}

{metric.title === "Total Product Cost" ? "" : "Than Last Month"}

)) })()}

{/* Charts */}

Sales Overview

Product Distribution

{(() => { // Calculate product sales distribution const productSales = salesHistory.reduce( (acc, sale) => { if (!acc[sale.productName]) { acc[sale.productName] = 0 } acc[sale.productName] += sale.totalPrice return acc }, {} as Record, ) const total = Object.values(productSales).reduce((sum, value) => sum + value, 0) return (

{Object.entries(productSales).map(([product, sales], index) => (

{product} ${sales.toFixed(2)}

))} {Object.keys(productSales).length === 0 && (

No sales data available

)}

) })()}

{/* Recent Invoice */}

Recent Sales

Due Sales Alert You have {dueSalesDetails.length} due sale{dueSalesDetails.length !== 1 && "s"} that require attention.

Date Customer Product Amount {dueSalesDetails.map((sale, index) => ( {format(new Date(sale.date), "PP")} {sale.customerName} {sale.productName} ${sale.totalPrice.toFixed(2)} ))}

Close setInvoiceType("due")}> View All Due Sales

{selectedDate ? format(selectedDate, "dd/MM/yy") : "Select date"}

date && setSelectedDate(date)} initialFocus disabled={(date) => date > new Date() || date < new Date("1900-01-01")} />

{(() => { const { totalSales, totalOrders, averageOrderValue } = calculateDailyTotals( salesHistory, selectedDate, invoiceType, ) return [ { title: "Daily Total", value: `$${totalSales.toFixed(2)}` }, { title: "Orders", value: totalOrders }, { title: "Avg. Order Value", value: `$${averageOrderValue.toFixed(2)}` }, ].map((metric, index) => (

{metric.title}

{metric.value}

)) })()}

{salesHistory .filter((sale) => { const dateMatch = isSameDay(new Date(sale.date), selectedDate) if (invoiceType === "sales") return dateMatch && sale.paymentMethod !== "due" if (invoiceType === "due") return dateMatch && sale.paymentMethod === "due" && !sale.isPaid return dateMatch // For "purchase" option, show all }) .slice(0, 5) .map((sale, index) => (

#{Math.random().toString(36).substr(2, 9).toUpperCase()} {sale.paymentMethod === "due" && !sale.isPaid ? "Due" : "Completed"}

Customer: {sale.customerName}

Phone: {sale.customerPhone}

Item: {sale.productName}

Size: {sale.size}

Qty: {sale.quantity}

Price: ${sale.totalPrice.toFixed(2)}

))} {salesHistory.filter((sale) => { const dateMatch = isSameDay(new Date(sale.date), selectedDate) if (invoiceType === "sales") return dateMatch && sale.paymentMethod !== "due" if (invoiceType === "due") return dateMatch && sale.paymentMethod === "due" && !sale.isPaid return dateMatch // For "purchase" option, show all }).length === 0 && (

No sales for the selected criteria

)}

{invoiceType === "due" && (

Total Due Amount

$ {salesHistory .filter( (sale) => sale.paymentMethod === "due" && !sale.isPaid && isSameDay(new Date(sale.date), selectedDate), ) .reduce((total, sale) => total + sale.totalPrice, 0) .toFixed(2)}

)} ) : activeNav === "Sales" ? (

Sales Overview

Due Sales List of sales with pending payments

{salesHistory .filter((sale) => sale.paymentMethod === "due" && !sale.isPaid) .map((sale, index) => (

{format(new Date(sale.date), "PP")} Due

Customer: {sale.customerName}

Phone: {sale.customerPhone}

Product: {sale.productName}

Size: {sale.size}

Quantity: {sale.quantity}

Amount: ${sale.totalPrice.toFixed(2)}

))} {salesHistory.filter((sale) => sale.paymentMethod === "due" && !sale.isPaid).length === 0 && (

No due sales

)}

Recent Sales Overview of your latest sales transactions (excluding due sales)

Date Customer Phone Products Total Payment Method Actions {salesHistory.filter((sale) => sale.paymentMethod !== "due" || sale.isPaid).length === 0 ? ( No sales recorded ) : ( salesHistory .filter((sale) => sale.paymentMethod !== "due" || sale.isPaid) .map((sale, index) => ( {/* Desktop view */} {format(new Date(sale.date), "PP")} {sale.customerName} {sale.customerPhone} {sale.productName} {sale.size && !sale.customProduct ? `(Size ${sale.size})` : ""}{" "} x{sale.quantity} ${sale.totalPrice.toFixed(2)} {sale.paymentMethod} {sale.paymentMethod === "due" && !sale.isPaid && ( (Unpaid) )} {sale.paymentMethod === "due" && sale.isPaid && ( (Paid) )}

{sale.paymentMethod === "due" && !sale.isPaid && ( )}

{/* Mobile view */}

Date: {format(new Date(sale.date), "PP")} Customer: {sale.customerName} Phone: {sale.customerPhone} Item: {sale.productName} Size: {sale.size} Qty: {sale.quantity} Price: ${sale.totalPrice.toFixed(2)} Payment Method: {sale.paymentMethod} {sale.paymentMethod === "due" && !sale.isPaid && ( (Unpaid) )} {sale.paymentMethod === "due" && sale.isPaid && ( (Paid) )}

{sale.paymentMethod === "due" && !sale.isPaid && ( )}

)) )}

) : activeNav === "Product Manager" ? (

Product Manager

Total Product Cost

$ {products .reduce((sum, product) => { return ( sum + product.sizes.reduce((sizeSum, size) => sizeSum + size.quantity * product.costPrice, 0) ) }, 0) .toFixed(2)}

Total Quantity

{products.reduce( (sum, product) => sum + product.sizes.reduce((sizeSum, size) => sizeSum + size.quantity, 0), 0, )}

) : (

Coming soon...

)}

) }

panze

panze

panze

Dashboard Overview

{metric.title}

Sales Overview

Product Distribution

Recent Sales

Total Due Amount

Sales Overview

Sale Items

Order Summary

Product Manager

Total Product Cost

Total Quantity

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This