feat: bulk XML upload, period selector, and session persistence
- Add bulk XML CFDI upload support (up to 300MB) - Add period selector component for month/year navigation - Fix session persistence on page refresh (Zustand hydration) - Fix income/expense classification based on tenant RFC - Fix IVA calculation from XML (correct Impuestos element) - Add error handling to reportes page - Support multiple CORS origins - Update reportes service with proper Decimal/BigInt handling - Add RFC to tenant view store for proper CFDI classification - Update README with changelog and new features Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Consultoria AS
@@ -1,28 +1,42 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { Header } from '@/components/layouts/header';
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { useTenants, useCreateTenant } from '@/lib/hooks/use-tenants';
|
||||
import { useTenants, useCreateTenant, useUpdateTenant, useDeleteTenant } from '@/lib/hooks/use-tenants';
|
||||
import { useTenantViewStore } from '@/stores/tenant-view-store';
|
||||
import { useAuthStore } from '@/stores/auth-store';
|
||||
import { Building, Plus, Users, Eye, Calendar } from 'lucide-react';
|
||||
import { Building, Plus, Users, Eye, Calendar, Pencil, Trash2, X } from 'lucide-react';
|
||||
import type { Tenant } from '@/lib/api/tenants';
|
||||
|
||||
type PlanType = 'starter' | 'business' | 'professional' | 'enterprise';
|
||||
|
||||
export default function ClientesPage() {
|
||||
const { user } = useAuthStore();
|
||||
const { data: tenants, isLoading } = useTenants();
|
||||
const createTenant = useCreateTenant();
|
||||
const updateTenant = useUpdateTenant();
|
||||
const deleteTenant = useDeleteTenant();
|
||||
const { setViewingTenant } = useTenantViewStore();
|
||||
const router = useRouter();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [formData, setFormData] = useState({
|
||||
const [editingTenant, setEditingTenant] = useState<Tenant | null>(null);
|
||||
const [formData, setFormData] = useState<{
|
||||
nombre: string;
|
||||
rfc: string;
|
||||
plan: PlanType;
|
||||
}>({
|
||||
nombre: '',
|
||||
rfc: '',
|
||||
plan: 'starter' as const,
|
||||
plan: 'starter',
|
||||
});
|
||||
|
||||
// Only admins can access this page
|
||||
@@ -47,17 +61,49 @@ export default function ClientesPage() {
|
||||
e.preventDefault();
|
||||
|
||||
try {
|
||||
await createTenant.mutateAsync(formData);
|
||||
if (editingTenant) {
|
||||
await updateTenant.mutateAsync({ id: editingTenant.id, data: formData });
|
||||
setEditingTenant(null);
|
||||
} else {
|
||||
await createTenant.mutateAsync(formData);
|
||||
}
|
||||
setFormData({ nombre: '', rfc: '', plan: 'starter' });
|
||||
setShowForm(false);
|
||||
} catch (error) {
|
||||
console.error('Error creating tenant:', error);
|
||||
console.error('Error:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEdit = (tenant: Tenant) => {
|
||||
setEditingTenant(tenant);
|
||||
setFormData({
|
||||
nombre: tenant.nombre,
|
||||
rfc: tenant.rfc,
|
||||
plan: tenant.plan as PlanType,
|
||||
});
|
||||
setShowForm(true);
|
||||
};
|
||||
|
||||
const handleDelete = async (tenant: Tenant) => {
|
||||
if (confirm(`¿Eliminar el cliente "${tenant.nombre}"? Esta acción desactivará el cliente.`)) {
|
||||
try {
|
||||
await deleteTenant.mutateAsync(tenant.id);
|
||||
} catch (error) {
|
||||
console.error('Error deleting tenant:', error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancelForm = () => {
|
||||
setShowForm(false);
|
||||
setEditingTenant(null);
|
||||
setFormData({ nombre: '', rfc: '', plan: 'starter' });
|
||||
};
|
||||
|
||||
const handleViewClient = (tenantId: string, tenantName: string) => {
|
||||
setViewingTenant(tenantId, tenantName);
|
||||
window.location.href = '/dashboard';
|
||||
queryClient.invalidateQueries();
|
||||
router.push('/dashboard');
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
@@ -126,14 +172,25 @@ export default function ClientesPage() {
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Add Client Form */}
|
||||
{/* Add/Edit Client Form */}
|
||||
{showForm && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">Nuevo Cliente</CardTitle>
|
||||
<CardDescription>
|
||||
Registra un nuevo cliente para gestionar su facturación
|
||||
</CardDescription>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-base">
|
||||
{editingTenant ? 'Editar Cliente' : 'Nuevo Cliente'}
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
{editingTenant
|
||||
? 'Modifica los datos del cliente'
|
||||
: 'Registra un nuevo cliente para gestionar su facturación'}
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Button variant="ghost" size="icon" onClick={handleCancelForm}>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
@@ -157,6 +214,7 @@ export default function ClientesPage() {
|
||||
placeholder="XAXX010101000"
|
||||
maxLength={13}
|
||||
required
|
||||
disabled={!!editingTenant} // Can't change RFC after creation
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -164,8 +222,8 @@ export default function ClientesPage() {
|
||||
<Label htmlFor="plan">Plan</Label>
|
||||
<Select
|
||||
value={formData.plan}
|
||||
onValueChange={(value: 'starter' | 'business' | 'professional' | 'enterprise') =>
|
||||
setFormData({ ...formData, plan: value })
|
||||
onValueChange={(value) =>
|
||||
setFormData({ ...formData, plan: value as PlanType })
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
@@ -180,11 +238,13 @@ export default function ClientesPage() {
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex gap-2 justify-end">
|
||||
<Button type="button" variant="outline" onClick={() => setShowForm(false)}>
|
||||
<Button type="button" variant="outline" onClick={handleCancelForm}>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button type="submit" disabled={createTenant.isPending}>
|
||||
{createTenant.isPending ? 'Creando...' : 'Crear Cliente'}
|
||||
<Button type="submit" disabled={createTenant.isPending || updateTenant.isPending}>
|
||||
{editingTenant
|
||||
? (updateTenant.isPending ? 'Guardando...' : 'Guardar Cambios')
|
||||
: (createTenant.isPending ? 'Creando...' : 'Crear Cliente')}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
@@ -223,7 +283,7 @@ export default function ClientesPage() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-right">
|
||||
<div className="flex items-center gap-1 text-sm">
|
||||
<Users className="h-4 w-4 text-muted-foreground" />
|
||||
@@ -234,14 +294,33 @@ export default function ClientesPage() {
|
||||
<span>{formatDate(tenant.createdAt)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleViewClient(tenant.id, tenant.nombre)}
|
||||
>
|
||||
<Eye className="h-4 w-4 mr-1" />
|
||||
Ver
|
||||
</Button>
|
||||
<div className="flex gap-1">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleViewClient(tenant.id, tenant.nombre)}
|
||||
>
|
||||
<Eye className="h-4 w-4 mr-1" />
|
||||
Ver
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleEdit(tenant)}
|
||||
title="Editar"
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleDelete(tenant)}
|
||||
title="Eliminar"
|
||||
className="text-destructive hover:text-destructive"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user