ellecio2/karibeo_backend_admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor Commerce module

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-11 02:26:41 +00:00
parent 1b9edcd0a5
commit 27b0e23a98
6 changed files with 652 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
src/pages/dashboard/commerce/Cashier.tsx Normal file
View File

@@ -0,0 +1,172 @@
import React, { useState } from 'react';
import { Receipt, DollarSign, TrendingUp, TrendingDown, Clock } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Badge } from '@/components/ui/badge';
import { useToast } from '@/hooks/use-toast';
const Cashier = () => {
const { toast } = useToast();
const [cashierData] = useState({
openingBalance: 1000.00,
currentBalance: 2450.50,
totalSales: 1450.50,
totalExpenses: 0,
transactionsCount: 25,
lastTransaction: new Date().toLocaleTimeString()
});
const [newTransaction, setNewTransaction] = useState({
type: 'sale',
amount: 0,
description: ''
});
const handleOpenCashier = () => {
toast({ title: 'Caja Abierta', description: 'Caja abierta con saldo inicial' });
};
const handleCloseCashier = () => {
toast({ title: 'Caja Cerrada', description: 'Caja cerrada. Generando reporte...' });
};
const handleAddTransaction = () => {
if (newTransaction.amount <= 0) {
toast({ title: 'Error', description: 'Ingresa un monto válido', variant: 'destructive' });
return;
}
toast({ title: 'Éxito', description: 'Transacción registrada' });
setNewTransaction({ type: 'sale', amount: 0, description: '' });
};
return (
<div className="min-h-screen bg-gray-50 p-6">
<div className="max-w-7xl mx-auto">
<div className="flex items-center justify-between mb-6">
<div className="flex items-center gap-3">
<Receipt className="w-8 h-8 text-orange-600" />
<div>
<h1 className="text-3xl font-bold text-gray-900">Control de Caja</h1>
<p className="text-gray-600">Gestiona el flujo de efectivo de tu tienda</p>
</div>
</div>
<div className="flex gap-2">
<Button onClick={handleOpenCashier}>Abrir Caja</Button>
<Button variant="outline" onClick={handleCloseCashier}>Cerrar Caja</Button>
</div>
</div>
<div className="grid gap-6 md:grid-cols-4 mb-6">
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Saldo Inicial</CardTitle>
<DollarSign className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">${cashierData.openingBalance.toFixed(2)}</div>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Saldo Actual</CardTitle>
<DollarSign className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold text-green-600">${cashierData.currentBalance.toFixed(2)}</div>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Ventas del Día</CardTitle>
<TrendingUp className="h-4 w-4 text-green-600" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">${cashierData.totalSales.toFixed(2)}</div>
<p className="text-xs text-muted-foreground">{cashierData.transactionsCount} transacciones</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Gastos</CardTitle>
<TrendingDown className="h-4 w-4 text-red-600" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold text-red-600">${cashierData.totalExpenses.toFixed(2)}</div>
</CardContent>
</Card>
</div>
<div className="grid gap-6 lg:grid-cols-2">
{/* Quick Transaction */}
<Card>
<CardHeader>
<CardTitle>Registrar Transacción</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-4">
<div>
<Label>Tipo de Transacción</Label>
<div className="grid grid-cols-2 gap-2 mt-2">
<Button
variant={newTransaction.type === 'sale' ? 'default' : 'outline'}
onClick={() => setNewTransaction({ ...newTransaction, type: 'sale' })}
>
Venta
</Button>
<Button
variant={newTransaction.type === 'expense' ? 'default' : 'outline'}
onClick={() => setNewTransaction({ ...newTransaction, type: 'expense' })}
>
Gasto
</Button>
</div>
</div>
<div>
<Label>Monto</Label>
<Input
type="number"
value={newTransaction.amount}
onChange={(e) => setNewTransaction({ ...newTransaction, amount: parseFloat(e.target.value) })}
placeholder="0.00"
/>
</div>
<div>
<Label>Descripción</Label>
<Input
value={newTransaction.description}
onChange={(e) => setNewTransaction({ ...newTransaction, description: e.target.value })}
placeholder="Detalle de la transacción"
/>
</div>
<Button className="w-full" onClick={handleAddTransaction}>
Registrar
</Button>
</div>
</CardContent>
</Card>
{/* Recent Transactions */}
<Card>
<CardHeader>
<CardTitle>Transacciones Recientes</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-3">
<div className="text-center py-8 text-muted-foreground">
No hay transacciones registradas hoy
</div>
</div>
</CardContent>
</Card>
</div>
</div>
</div>
);
};
export default Cashier;