562 lines
22 KiB
TypeScript
562 lines
22 KiB
TypeScript
"use client"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
|
import {
|
|
DollarSign,
|
|
Package,
|
|
Users,
|
|
AlertTriangle,
|
|
ShoppingCart,
|
|
CreditCard,
|
|
BarChart3,
|
|
Plus,
|
|
Building2,
|
|
} from "lucide-react"
|
|
import { useBusinessData } from "@/hooks/use-business-data"
|
|
import { useProducts } from "@/hooks/use-products"
|
|
import { useClients } from "@/hooks/use-clients"
|
|
import { useSuppliers } from "@/hooks/use-suppliers"
|
|
import { ProductForm } from "@/components/products/product-form"
|
|
import { ProductsTable } from "@/components/products/products-table"
|
|
import { ClientForm } from "@/components/clients/client-form"
|
|
import { ClientsTable } from "@/components/clients/clients-table"
|
|
import { PaymentForm } from "@/components/clients/payment-form"
|
|
import { SupplierForm } from "@/components/suppliers/supplier-form"
|
|
import { SuppliersTable } from "@/components/suppliers/suppliers-table"
|
|
import { PurchaseForm } from "@/components/suppliers/purchase-form"
|
|
import { SupplierPaymentForm } from "@/components/suppliers/supplier-payment-form"
|
|
import { CreditOverview } from "@/components/credit/credit-overview"
|
|
import { TransactionHistory } from "@/components/credit/transaction-history"
|
|
import { useState } from "react"
|
|
import type { Product, Client, Supplier } from "@/types/business"
|
|
|
|
export default function Dashboard() {
|
|
const { kpis, recentTransactions, topProducts, clientsWithCredit, suppliersWithCredit, loading } = useBusinessData()
|
|
const {
|
|
products,
|
|
loading: productsLoading,
|
|
addProduct,
|
|
updateProduct,
|
|
deleteProduct,
|
|
getLowStockProducts,
|
|
getOutOfStockProducts,
|
|
} = useProducts()
|
|
|
|
const {
|
|
clients,
|
|
loading: clientsLoading,
|
|
addClient,
|
|
updateClient,
|
|
deleteClient,
|
|
addPayment,
|
|
getClientById,
|
|
getClientsWithOutstandingCredit,
|
|
getClientsOverCreditLimit,
|
|
getTotalOutstandingAmount,
|
|
} = useClients()
|
|
|
|
const {
|
|
suppliers,
|
|
loading: suppliersLoading,
|
|
addSupplier,
|
|
updateSupplier,
|
|
deleteSupplier,
|
|
addPurchase,
|
|
recordPayment,
|
|
getSupplierById,
|
|
getSuppliersWithOutstandingBalance,
|
|
getTotalAmountOwed,
|
|
} = useSuppliers()
|
|
|
|
const [showProductForm, setShowProductForm] = useState(false)
|
|
const [editingProduct, setEditingProduct] = useState<Product | undefined>()
|
|
const [showClientForm, setShowClientForm] = useState(false)
|
|
const [editingClient, setEditingClient] = useState<Client | undefined>()
|
|
const [showPaymentForm, setShowPaymentForm] = useState(false)
|
|
const [paymentClientId, setPaymentClientId] = useState<string>("")
|
|
const [showSupplierForm, setShowSupplierForm] = useState(false)
|
|
const [editingSupplier, setEditingSupplier] = useState<Supplier | undefined>()
|
|
const [showPurchaseForm, setShowPurchaseForm] = useState(false)
|
|
const [purchaseSupplierId, setPurchaseSupplierId] = useState<string>("")
|
|
const [showSupplierPaymentForm, setShowSupplierPaymentForm] = useState(false)
|
|
const [supplierPaymentId, setSupplierPaymentId] = useState<string>("")
|
|
|
|
const handleEditProduct = (product: Product) => {
|
|
setEditingProduct(product)
|
|
setShowProductForm(true)
|
|
}
|
|
|
|
const handleProductSubmit = (productData: Omit<Product, "id">) => {
|
|
if (editingProduct) {
|
|
updateProduct(editingProduct.id, productData)
|
|
setEditingProduct(undefined)
|
|
} else {
|
|
addProduct(productData)
|
|
}
|
|
}
|
|
|
|
const handleCloseProductForm = () => {
|
|
setShowProductForm(false)
|
|
setEditingProduct(undefined)
|
|
}
|
|
|
|
const handleEditClient = (client: Client) => {
|
|
setEditingClient(client)
|
|
setShowClientForm(true)
|
|
}
|
|
|
|
const handleClientSubmit = (clientData: Omit<Client, "id">) => {
|
|
if (editingClient) {
|
|
updateClient(editingClient.id, clientData)
|
|
setEditingClient(undefined)
|
|
} else {
|
|
addClient(clientData)
|
|
}
|
|
}
|
|
|
|
const handleCloseClientForm = () => {
|
|
setShowClientForm(false)
|
|
setEditingClient(undefined)
|
|
}
|
|
|
|
const handleAddPayment = (clientId: string) => {
|
|
setPaymentClientId(clientId)
|
|
setShowPaymentForm(true)
|
|
}
|
|
|
|
const handlePaymentSubmit = (payment: { amount: number; notes: string; date: string }) => {
|
|
addPayment(paymentClientId, payment.amount, payment.notes, payment.date)
|
|
setShowPaymentForm(false)
|
|
setPaymentClientId("")
|
|
}
|
|
|
|
const handleEditSupplier = (supplier: Supplier) => {
|
|
setEditingSupplier(supplier)
|
|
setShowSupplierForm(true)
|
|
}
|
|
|
|
const handleSupplierSubmit = (supplierData: Omit<Supplier, "id">) => {
|
|
if (editingSupplier) {
|
|
updateSupplier(editingSupplier.id, supplierData)
|
|
setEditingSupplier(undefined)
|
|
} else {
|
|
addSupplier(supplierData)
|
|
}
|
|
}
|
|
|
|
const handleCloseSupplierForm = () => {
|
|
setShowSupplierForm(false)
|
|
setEditingSupplier(undefined)
|
|
}
|
|
|
|
const handleAddPurchase = (supplierId: string) => {
|
|
setPurchaseSupplierId(supplierId)
|
|
setShowPurchaseForm(true)
|
|
}
|
|
|
|
const handlePurchaseSubmit = (purchase: {
|
|
amount: number
|
|
description: string
|
|
date: string
|
|
invoiceNumber: string
|
|
}) => {
|
|
addPurchase(purchaseSupplierId, purchase.amount, purchase.description, purchase.date, purchase.invoiceNumber)
|
|
setShowPurchaseForm(false)
|
|
setPurchaseSupplierId("")
|
|
}
|
|
|
|
const handleRecordPayment = (supplierId: string) => {
|
|
setSupplierPaymentId(supplierId)
|
|
setShowSupplierPaymentForm(true)
|
|
}
|
|
|
|
const handleSupplierPaymentSubmit = (payment: {
|
|
amount: number
|
|
notes: string
|
|
date: string
|
|
paymentMethod: string
|
|
}) => {
|
|
recordPayment(supplierPaymentId, payment.amount, payment.notes, payment.date, payment.paymentMethod)
|
|
setShowSupplierPaymentForm(false)
|
|
setSupplierPaymentId("")
|
|
}
|
|
|
|
if (loading || productsLoading || clientsLoading || suppliersLoading) {
|
|
return (
|
|
<div className="min-h-screen bg-background flex items-center justify-center">
|
|
<div className="text-center">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
|
|
<p className="text-muted-foreground">Loading dashboard...</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const lowStockProducts = getLowStockProducts()
|
|
const outOfStockProducts = getOutOfStockProducts()
|
|
const clientsWithOutstanding = getClientsWithOutstandingCredit()
|
|
const clientsOverLimit = getClientsOverCreditLimit()
|
|
const totalOutstanding = getTotalOutstandingAmount()
|
|
const suppliersWithBalance = getSuppliersWithOutstandingBalance()
|
|
const totalOwed = getTotalAmountOwed()
|
|
const paymentClient = getClientById(paymentClientId)
|
|
const purchaseSupplier = getSupplierById(purchaseSupplierId)
|
|
const paymentSupplier = getSupplierById(supplierPaymentId)
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background">
|
|
{/* Header */}
|
|
<header className="border-b bg-card">
|
|
<div className="container mx-auto px-4 py-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-foreground">Wholesale Manager</h1>
|
|
<p className="text-muted-foreground">Business Dashboard</p>
|
|
</div>
|
|
<Button variant="outline" size="sm">
|
|
<BarChart3 className="h-4 w-4 mr-2" />
|
|
Export Report
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main className="container mx-auto px-4 py-6 space-y-6">
|
|
{/* KPI Cards */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
|
|
<DollarSign className="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">${kpis.totalRevenue.toLocaleString()}</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
<span className="text-green-600">+{kpis.revenueGrowth}%</span> from last month
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Active Products</CardTitle>
|
|
<Package className="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{products.length}</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
{lowStockProducts.length} low stock, {outOfStockProducts.length} out of stock
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Active Clients</CardTitle>
|
|
<Users className="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{clients.length}</div>
|
|
<p className="text-xs text-muted-foreground">${totalOutstanding.toLocaleString()} outstanding</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Suppliers</CardTitle>
|
|
<Building2 className="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{suppliers.length}</div>
|
|
<p className="text-xs text-muted-foreground">${totalOwed.toLocaleString()} owed</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Main Content Tabs */}
|
|
<Tabs defaultValue="overview" className="space-y-4">
|
|
<TabsList className="grid w-full grid-cols-5">
|
|
<TabsTrigger value="overview">Overview</TabsTrigger>
|
|
<TabsTrigger value="products">Products</TabsTrigger>
|
|
<TabsTrigger value="clients">Clients</TabsTrigger>
|
|
<TabsTrigger value="suppliers">Suppliers</TabsTrigger>
|
|
<TabsTrigger value="credit">Credit Tracking</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="overview" className="space-y-4">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
{/* Recent Transactions */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<ShoppingCart className="h-5 w-5" />
|
|
Recent Transactions
|
|
</CardTitle>
|
|
<CardDescription>Latest business activities</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-3">
|
|
{recentTransactions.slice(0, 5).map((transaction) => (
|
|
<div key={transaction.id} className="flex items-center justify-between p-3 border rounded-lg">
|
|
<div className="flex-1">
|
|
<p className="font-medium text-sm">{transaction.client}</p>
|
|
<p className="text-xs text-muted-foreground">{transaction.product}</p>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="font-medium text-sm">${transaction.amount}</p>
|
|
<Badge variant={transaction.status === "paid" ? "default" : "secondary"} className="text-xs">
|
|
{transaction.status}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Top Products */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Package className="h-5 w-5" />
|
|
Top Selling Products
|
|
</CardTitle>
|
|
<CardDescription>Best performers this month</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-3">
|
|
{topProducts.map((product, index) => (
|
|
<div key={product.id} className="flex items-center justify-between p-3 border rounded-lg">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center">
|
|
<span className="text-sm font-bold text-primary">#{index + 1}</span>
|
|
</div>
|
|
<div>
|
|
<p className="font-medium text-sm">{product.name}</p>
|
|
<p className="text-xs text-muted-foreground">{product.category}</p>
|
|
</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="font-medium text-sm">{product.unitsSold} sold</p>
|
|
<p className="text-xs text-muted-foreground">${product.revenue}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="products" className="space-y-4">
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Package className="h-5 w-5" />
|
|
Products Management
|
|
</CardTitle>
|
|
<CardDescription>Manage your product inventory and pricing</CardDescription>
|
|
</div>
|
|
<Button onClick={() => setShowProductForm(true)}>
|
|
<Plus className="h-4 w-4 mr-2" />
|
|
Add Product
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{/* Stock Alerts */}
|
|
{(lowStockProducts.length > 0 || outOfStockProducts.length > 0) && (
|
|
<div className="mb-6 p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<AlertTriangle className="h-4 w-4 text-yellow-600" />
|
|
<h4 className="font-medium text-yellow-800 dark:text-yellow-200">Stock Alerts</h4>
|
|
</div>
|
|
{outOfStockProducts.length > 0 && (
|
|
<p className="text-sm text-yellow-700 dark:text-yellow-300 mb-1">
|
|
<strong>{outOfStockProducts.length}</strong> products are out of stock
|
|
</p>
|
|
)}
|
|
{lowStockProducts.length > 0 && (
|
|
<p className="text-sm text-yellow-700 dark:text-yellow-300">
|
|
<strong>{lowStockProducts.length}</strong> products are running low
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<ProductsTable products={products} onEdit={handleEditProduct} onDelete={deleteProduct} />
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="clients" className="space-y-4">
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Users className="h-5 w-5" />
|
|
Clients Management
|
|
</CardTitle>
|
|
<CardDescription>Manage your clients and track credit status</CardDescription>
|
|
</div>
|
|
<Button onClick={() => setShowClientForm(true)}>
|
|
<Plus className="h-4 w-4 mr-2" />
|
|
Add Client
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{/* Credit Alerts */}
|
|
{(clientsWithOutstanding.length > 0 || clientsOverLimit.length > 0) && (
|
|
<div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<CreditCard className="h-4 w-4 text-red-600" />
|
|
<h4 className="font-medium text-red-800 dark:text-red-200">Credit Alerts</h4>
|
|
</div>
|
|
{clientsOverLimit.length > 0 && (
|
|
<p className="text-sm text-red-700 dark:text-red-300 mb-1">
|
|
<strong>{clientsOverLimit.length}</strong> clients are over their credit limit
|
|
</p>
|
|
)}
|
|
<p className="text-sm text-red-700 dark:text-red-300">
|
|
Total outstanding: <strong>${totalOutstanding.toLocaleString()}</strong>
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
<ClientsTable
|
|
clients={clients}
|
|
onEdit={handleEditClient}
|
|
onDelete={deleteClient}
|
|
onAddPayment={handleAddPayment}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="suppliers" className="space-y-4">
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Building2 className="h-5 w-5" />
|
|
Suppliers Management
|
|
</CardTitle>
|
|
<CardDescription>Manage your suppliers and track payment obligations</CardDescription>
|
|
</div>
|
|
<Button onClick={() => setShowSupplierForm(true)}>
|
|
<Plus className="h-4 w-4 mr-2" />
|
|
Add Supplier
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{/* Payment Alerts */}
|
|
{suppliersWithBalance.length > 0 && (
|
|
<div className="mb-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<AlertTriangle className="h-4 w-4 text-blue-600" />
|
|
<h4 className="font-medium text-blue-800 dark:text-blue-200">Payment Obligations</h4>
|
|
</div>
|
|
<p className="text-sm text-blue-700 dark:text-blue-300 mb-1">
|
|
<strong>{suppliersWithBalance.length}</strong> suppliers have outstanding balances
|
|
</p>
|
|
<p className="text-sm text-blue-700 dark:text-blue-300">
|
|
Total amount owed: <strong>${totalOwed.toLocaleString()}</strong>
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
<SuppliersTable
|
|
suppliers={suppliers}
|
|
onEdit={handleEditSupplier}
|
|
onDelete={deleteSupplier}
|
|
onAddPurchase={handleAddPurchase}
|
|
onRecordPayment={handleRecordPayment}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
{/* Added new credit tracking tab */}
|
|
<TabsContent value="credit" className="space-y-4">
|
|
<CreditOverview clients={clients} suppliers={suppliers} />
|
|
<TransactionHistory />
|
|
</TabsContent>
|
|
</Tabs>
|
|
</main>
|
|
|
|
{/* Product Form Dialog */}
|
|
<ProductForm
|
|
product={editingProduct}
|
|
open={showProductForm}
|
|
onOpenChange={handleCloseProductForm}
|
|
onSubmit={handleProductSubmit}
|
|
/>
|
|
|
|
{/* Client Form Dialog */}
|
|
<ClientForm
|
|
client={editingClient}
|
|
open={showClientForm}
|
|
onOpenChange={handleCloseClientForm}
|
|
onSubmit={handleClientSubmit}
|
|
/>
|
|
|
|
{/* Payment Form Dialog */}
|
|
{paymentClient && (
|
|
<PaymentForm
|
|
clientName={paymentClient.name}
|
|
outstandingAmount={paymentClient.outstandingAmount}
|
|
open={showPaymentForm}
|
|
onOpenChange={(open) => {
|
|
setShowPaymentForm(open)
|
|
if (!open) setPaymentClientId("")
|
|
}}
|
|
onSubmit={handlePaymentSubmit}
|
|
/>
|
|
)}
|
|
|
|
{/* Supplier Form Dialog */}
|
|
<SupplierForm
|
|
supplier={editingSupplier}
|
|
open={showSupplierForm}
|
|
onOpenChange={handleCloseSupplierForm}
|
|
onSubmit={handleSupplierSubmit}
|
|
/>
|
|
|
|
{/* Purchase Form Dialog */}
|
|
{purchaseSupplier && (
|
|
<PurchaseForm
|
|
supplierName={purchaseSupplier.name}
|
|
open={showPurchaseForm}
|
|
onOpenChange={(open) => {
|
|
setShowPurchaseForm(open)
|
|
if (!open) setPurchaseSupplierId("")
|
|
}}
|
|
onSubmit={handlePurchaseSubmit}
|
|
/>
|
|
)}
|
|
|
|
{/* Supplier Payment Form Dialog */}
|
|
{paymentSupplier && (
|
|
<SupplierPaymentForm
|
|
supplierName={paymentSupplier.name}
|
|
amountOwed={paymentSupplier.amountOwed}
|
|
open={showSupplierPaymentForm}
|
|
onOpenChange={(open) => {
|
|
setShowSupplierPaymentForm(open)
|
|
if (!open) setSupplierPaymentId("")
|
|
}}
|
|
onSubmit={handleSupplierPaymentSubmit}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|