Implement remaining modules
This commit is contained in:
gpt-engineer-app[bot]
29
src/App.tsx
29
src/App.tsx
@@ -56,6 +56,10 @@ import PolReports from "./pages/dashboard/politur/Reports";
|
|||||||
import GuideDashboard from "./pages/dashboard/guides/GuideDashboard";
|
import GuideDashboard from "./pages/dashboard/guides/GuideDashboard";
|
||||||
import ItineraryBuilder from "./pages/dashboard/guides/ItineraryBuilder";
|
import ItineraryBuilder from "./pages/dashboard/guides/ItineraryBuilder";
|
||||||
import ContentLibrary from "./pages/dashboard/guides/ContentLibrary";
|
import ContentLibrary from "./pages/dashboard/guides/ContentLibrary";
|
||||||
|
// Commissions pages
|
||||||
|
import CommissionsDashboard from "./pages/dashboard/commissions/CommissionsDashboard";
|
||||||
|
import CommissionRules from "./pages/dashboard/commissions/CommissionRules";
|
||||||
|
import PaymentHistory from "./pages/dashboard/commissions/PaymentHistory";
|
||||||
// Tourist App
|
// Tourist App
|
||||||
import TouristApp from "./pages/TouristApp";
|
import TouristApp from "./pages/TouristApp";
|
||||||
// Commerce pages (for retail stores)
|
// Commerce pages (for retail stores)
|
||||||
@@ -626,6 +630,31 @@ const AppRouter = () => (
|
|||||||
</ProtectedRoute>
|
</ProtectedRoute>
|
||||||
} />
|
} />
|
||||||
|
|
||||||
|
{/* Commissions Routes */}
|
||||||
|
<Route path="/dashboard/commissions/dashboard" element={
|
||||||
|
<ProtectedRoute>
|
||||||
|
<DashboardLayout>
|
||||||
|
<CommissionsDashboard />
|
||||||
|
</DashboardLayout>
|
||||||
|
</ProtectedRoute>
|
||||||
|
} />
|
||||||
|
|
||||||
|
<Route path="/dashboard/commissions/rules" element={
|
||||||
|
<ProtectedRoute>
|
||||||
|
<DashboardLayout>
|
||||||
|
<CommissionRules />
|
||||||
|
</DashboardLayout>
|
||||||
|
</ProtectedRoute>
|
||||||
|
} />
|
||||||
|
|
||||||
|
<Route path="/dashboard/commissions/payments" element={
|
||||||
|
<ProtectedRoute>
|
||||||
|
<DashboardLayout>
|
||||||
|
<PaymentHistory />
|
||||||
|
</DashboardLayout>
|
||||||
|
</ProtectedRoute>
|
||||||
|
} />
|
||||||
|
|
||||||
{/* Catch-all route */}
|
{/* Catch-all route */}
|
||||||
<Route path="*" element={<NotFound />} />
|
<Route path="*" element={<NotFound />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
|
|||||||
@@ -197,6 +197,16 @@ const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
|
|||||||
{ icon: BookOpen, label: 'Biblioteca', path: '/dashboard/guides/library' }
|
{ icon: BookOpen, label: 'Biblioteca', path: '/dashboard/guides/library' }
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
icon: DollarSign,
|
||||||
|
label: 'Comisiones',
|
||||||
|
path: '/dashboard/commissions',
|
||||||
|
subItems: [
|
||||||
|
{ icon: BarChart3, label: 'Dashboard', path: '/dashboard/commissions/dashboard' },
|
||||||
|
{ icon: Settings, label: 'Reglas', path: '/dashboard/commissions/rules' },
|
||||||
|
{ icon: FileText, label: 'Historial', path: '/dashboard/commissions/payments' }
|
||||||
|
]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
icon: Store,
|
icon: Store,
|
||||||
label: t('commerce'),
|
label: t('commerce'),
|
||||||
|
|||||||
267
src/pages/dashboard/commissions/CommissionRules.tsx
Normal file
267
src/pages/dashboard/commissions/CommissionRules.tsx
Normal file
@@ -0,0 +1,267 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { Card, CardContent, CardDescription, 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 {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@/components/ui/select';
|
||||||
|
import { Plus, Edit, Trash2, Save } from 'lucide-react';
|
||||||
|
import { useToast } from '@/hooks/use-toast';
|
||||||
|
|
||||||
|
interface CommissionRule {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
category: string;
|
||||||
|
type: 'percentage' | 'fixed';
|
||||||
|
value: number;
|
||||||
|
minAmount?: number;
|
||||||
|
maxAmount?: number;
|
||||||
|
active: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CommissionRules = () => {
|
||||||
|
const { toast } = useToast();
|
||||||
|
const [rules, setRules] = useState<CommissionRule[]>([
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: 'Hoteles Premium',
|
||||||
|
category: 'Alojamiento',
|
||||||
|
type: 'percentage',
|
||||||
|
value: 15,
|
||||||
|
minAmount: 100,
|
||||||
|
active: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: 'Tours Estándar',
|
||||||
|
category: 'Tours',
|
||||||
|
type: 'percentage',
|
||||||
|
value: 12,
|
||||||
|
active: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: 'Restaurantes',
|
||||||
|
category: 'Gastronomía',
|
||||||
|
type: 'percentage',
|
||||||
|
value: 10,
|
||||||
|
minAmount: 50,
|
||||||
|
active: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: 'Servicios Spa',
|
||||||
|
category: 'Bienestar',
|
||||||
|
type: 'percentage',
|
||||||
|
value: 15,
|
||||||
|
active: true,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const [editingRule, setEditingRule] = useState<CommissionRule | null>(null);
|
||||||
|
const [showNewRule, setShowNewRule] = useState(false);
|
||||||
|
|
||||||
|
const handleSaveRule = () => {
|
||||||
|
toast({
|
||||||
|
title: 'Regla guardada',
|
||||||
|
description: 'La regla de comisión ha sido guardada exitosamente',
|
||||||
|
});
|
||||||
|
setEditingRule(null);
|
||||||
|
setShowNewRule(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteRule = (id: number) => {
|
||||||
|
setRules(rules.filter((rule) => rule.id !== id));
|
||||||
|
toast({
|
||||||
|
title: 'Regla eliminada',
|
||||||
|
description: 'La regla de comisión ha sido eliminada',
|
||||||
|
variant: 'destructive',
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl font-bold text-foreground">Reglas de Comisión</h1>
|
||||||
|
<p className="text-muted-foreground mt-1">
|
||||||
|
Configura y gestiona las reglas de comisión por categoría
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Button onClick={() => setShowNewRule(true)}>
|
||||||
|
<Plus className="w-4 h-4 mr-2" />
|
||||||
|
Nueva Regla
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* New/Edit Rule Form */}
|
||||||
|
{(showNewRule || editingRule) && (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>
|
||||||
|
{editingRule ? 'Editar Regla' : 'Nueva Regla de Comisión'}
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Define los parámetros para calcular comisiones
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="rule-name">Nombre de la Regla</Label>
|
||||||
|
<Input
|
||||||
|
id="rule-name"
|
||||||
|
placeholder="Ej: Hoteles Premium"
|
||||||
|
defaultValue={editingRule?.name}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="category">Categoría</Label>
|
||||||
|
<Select defaultValue={editingRule?.category}>
|
||||||
|
<SelectTrigger id="category">
|
||||||
|
<SelectValue placeholder="Selecciona una categoría" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="Alojamiento">Alojamiento</SelectItem>
|
||||||
|
<SelectItem value="Tours">Tours</SelectItem>
|
||||||
|
<SelectItem value="Gastronomía">Gastronomía</SelectItem>
|
||||||
|
<SelectItem value="Bienestar">Bienestar</SelectItem>
|
||||||
|
<SelectItem value="Transporte">Transporte</SelectItem>
|
||||||
|
<SelectItem value="Actividades">Actividades</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="commission-type">Tipo de Comisión</Label>
|
||||||
|
<Select defaultValue={editingRule?.type || 'percentage'}>
|
||||||
|
<SelectTrigger id="commission-type">
|
||||||
|
<SelectValue placeholder="Selecciona el tipo" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="percentage">Porcentaje</SelectItem>
|
||||||
|
<SelectItem value="fixed">Monto Fijo</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="commission-value">Valor</Label>
|
||||||
|
<Input
|
||||||
|
id="commission-value"
|
||||||
|
type="number"
|
||||||
|
placeholder="15"
|
||||||
|
defaultValue={editingRule?.value}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="min-amount">Monto Mínimo (Opcional)</Label>
|
||||||
|
<Input
|
||||||
|
id="min-amount"
|
||||||
|
type="number"
|
||||||
|
placeholder="100"
|
||||||
|
defaultValue={editingRule?.minAmount}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="max-amount">Monto Máximo (Opcional)</Label>
|
||||||
|
<Input
|
||||||
|
id="max-amount"
|
||||||
|
type="number"
|
||||||
|
placeholder="10000"
|
||||||
|
defaultValue={editingRule?.maxAmount}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-3 mt-6">
|
||||||
|
<Button onClick={handleSaveRule}>
|
||||||
|
<Save className="w-4 h-4 mr-2" />
|
||||||
|
Guardar Regla
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => {
|
||||||
|
setEditingRule(null);
|
||||||
|
setShowNewRule(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Cancelar
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Rules List */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{rules.map((rule) => (
|
||||||
|
<Card key={rule.id}>
|
||||||
|
<CardHeader>
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div>
|
||||||
|
<CardTitle className="text-lg">{rule.name}</CardTitle>
|
||||||
|
<CardDescription>{rule.category}</CardDescription>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
className={`px-2 py-1 text-xs rounded-full ${
|
||||||
|
rule.active
|
||||||
|
? 'bg-success/10 text-success'
|
||||||
|
: 'bg-muted text-muted-foreground'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{rule.active ? 'Activa' : 'Inactiva'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-muted-foreground">Comisión</p>
|
||||||
|
<p className="text-2xl font-bold text-primary">
|
||||||
|
{rule.type === 'percentage' ? `${rule.value}%` : `$${rule.value}`}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{rule.minAmount && (
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-muted-foreground">Monto Mínimo</p>
|
||||||
|
<p className="font-medium">${rule.minAmount}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{rule.maxAmount && (
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-muted-foreground">Monto Máximo</p>
|
||||||
|
<p className="font-medium">${rule.maxAmount}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="flex gap-2 pt-3 border-t">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="flex-1"
|
||||||
|
onClick={() => setEditingRule(rule)}
|
||||||
|
>
|
||||||
|
<Edit className="w-4 h-4 mr-2" />
|
||||||
|
Editar
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="destructive"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => handleDeleteRule(rule.id)}
|
||||||
|
>
|
||||||
|
<Trash2 className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CommissionRules;
|
||||||
223
src/pages/dashboard/commissions/CommissionsDashboard.tsx
Normal file
223
src/pages/dashboard/commissions/CommissionsDashboard.tsx
Normal file
@@ -0,0 +1,223 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { DollarSign, TrendingUp, Users, Calendar, Download, Filter } from 'lucide-react';
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@/components/ui/select';
|
||||||
|
|
||||||
|
const CommissionsDashboard = () => {
|
||||||
|
const [period, setPeriod] = useState('month');
|
||||||
|
|
||||||
|
const stats = [
|
||||||
|
{
|
||||||
|
title: 'Comisiones Totales',
|
||||||
|
value: '$45,231',
|
||||||
|
change: '+12.5%',
|
||||||
|
icon: DollarSign,
|
||||||
|
color: 'text-success',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Comisiones Pendientes',
|
||||||
|
value: '$8,450',
|
||||||
|
change: '+8.2%',
|
||||||
|
icon: TrendingUp,
|
||||||
|
color: 'text-warning',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Partners Activos',
|
||||||
|
value: '127',
|
||||||
|
change: '+5',
|
||||||
|
icon: Users,
|
||||||
|
color: 'text-primary',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Transacciones',
|
||||||
|
value: '1,429',
|
||||||
|
change: '+23.1%',
|
||||||
|
icon: Calendar,
|
||||||
|
color: 'text-secondary',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const recentTransactions = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
partner: 'Hotel Paraíso',
|
||||||
|
type: 'Reserva',
|
||||||
|
amount: 450,
|
||||||
|
commission: 67.5,
|
||||||
|
date: '2024-01-15',
|
||||||
|
status: 'Pagado',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
partner: 'Tours Caribe',
|
||||||
|
type: 'Tour Guiado',
|
||||||
|
amount: 1200,
|
||||||
|
commission: 180,
|
||||||
|
date: '2024-01-14',
|
||||||
|
status: 'Pendiente',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
partner: 'Restaurante El Mar',
|
||||||
|
type: 'Reserva',
|
||||||
|
amount: 300,
|
||||||
|
commission: 30,
|
||||||
|
date: '2024-01-14',
|
||||||
|
status: 'Pagado',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
partner: 'Spa Wellness',
|
||||||
|
type: 'Servicio',
|
||||||
|
amount: 800,
|
||||||
|
commission: 120,
|
||||||
|
date: '2024-01-13',
|
||||||
|
status: 'Procesando',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const topPartners = [
|
||||||
|
{ name: 'Hotel Paraíso', commission: 5420, transactions: 48 },
|
||||||
|
{ name: 'Tours Caribe', commission: 4890, transactions: 35 },
|
||||||
|
{ name: 'Restaurante El Mar', commission: 3210, transactions: 67 },
|
||||||
|
{ name: 'Spa Wellness', commission: 2980, transactions: 28 },
|
||||||
|
{ name: 'Adventure Park', commission: 2450, transactions: 31 },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl font-bold text-foreground">Sistema de Comisiones</h1>
|
||||||
|
<p className="text-muted-foreground mt-1">
|
||||||
|
Gestiona y monitorea las comisiones de tus partners
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<Select value={period} onValueChange={setPeriod}>
|
||||||
|
<SelectTrigger className="w-[180px]">
|
||||||
|
<SelectValue placeholder="Período" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="week">Esta Semana</SelectItem>
|
||||||
|
<SelectItem value="month">Este Mes</SelectItem>
|
||||||
|
<SelectItem value="quarter">Este Trimestre</SelectItem>
|
||||||
|
<SelectItem value="year">Este Año</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<Button variant="outline">
|
||||||
|
<Filter className="w-4 h-4 mr-2" />
|
||||||
|
Filtros
|
||||||
|
</Button>
|
||||||
|
<Button variant="default">
|
||||||
|
<Download className="w-4 h-4 mr-2" />
|
||||||
|
Exportar
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stats Cards */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
{stats.map((stat, index) => (
|
||||||
|
<Card key={index}>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium">{stat.title}</CardTitle>
|
||||||
|
<stat.icon className={`h-5 w-5 ${stat.color}`} />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">{stat.value}</div>
|
||||||
|
<p className="text-xs text-muted-foreground mt-1">
|
||||||
|
<span className={stat.color}>{stat.change}</span> vs período anterior
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||||
|
{/* Recent Transactions */}
|
||||||
|
<Card className="lg:col-span-2">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Transacciones Recientes</CardTitle>
|
||||||
|
<CardDescription>Últimas comisiones generadas</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{recentTransactions.map((transaction) => (
|
||||||
|
<div
|
||||||
|
key={transaction.id}
|
||||||
|
className="flex items-center justify-between p-4 border rounded-lg hover:bg-accent/50 transition-colors"
|
||||||
|
>
|
||||||
|
<div className="flex-1">
|
||||||
|
<p className="font-medium text-foreground">{transaction.partner}</p>
|
||||||
|
<p className="text-sm text-muted-foreground">{transaction.type}</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-right mr-6">
|
||||||
|
<p className="font-medium text-foreground">
|
||||||
|
${transaction.amount.toFixed(2)}
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-success">
|
||||||
|
+${transaction.commission.toFixed(2)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<p className="text-sm text-muted-foreground">{transaction.date}</p>
|
||||||
|
<span
|
||||||
|
className={`inline-block px-2 py-1 text-xs rounded-full ${
|
||||||
|
transaction.status === 'Pagado'
|
||||||
|
? 'bg-success/10 text-success'
|
||||||
|
: transaction.status === 'Pendiente'
|
||||||
|
? 'bg-warning/10 text-warning'
|
||||||
|
: 'bg-primary/10 text-primary'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{transaction.status}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Top Partners */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Top Partners</CardTitle>
|
||||||
|
<CardDescription>Partners con más comisiones</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{topPartners.map((partner, index) => (
|
||||||
|
<div key={index} className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-primary/10 text-primary font-bold">
|
||||||
|
{index + 1}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="font-medium text-sm text-foreground">{partner.name}</p>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
{partner.transactions} transacciones
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="font-bold text-success">${partner.commission}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CommissionsDashboard;
|
||||||
268
src/pages/dashboard/commissions/PaymentHistory.tsx
Normal file
268
src/pages/dashboard/commissions/PaymentHistory.tsx
Normal file
@@ -0,0 +1,268 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@/components/ui/select';
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from '@/components/ui/table';
|
||||||
|
import { Search, Download, FileText, CheckCircle, Clock, XCircle } from 'lucide-react';
|
||||||
|
|
||||||
|
interface Payment {
|
||||||
|
id: string;
|
||||||
|
partner: string;
|
||||||
|
amount: number;
|
||||||
|
commission: number;
|
||||||
|
date: string;
|
||||||
|
paymentDate?: string;
|
||||||
|
status: 'Pagado' | 'Pendiente' | 'Procesando' | 'Cancelado';
|
||||||
|
method: string;
|
||||||
|
invoiceNumber: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const PaymentHistory = () => {
|
||||||
|
const [searchTerm, setSearchTerm] = useState('');
|
||||||
|
const [statusFilter, setStatusFilter] = useState('all');
|
||||||
|
|
||||||
|
const payments: Payment[] = [
|
||||||
|
{
|
||||||
|
id: 'PAY-001',
|
||||||
|
partner: 'Hotel Paraíso',
|
||||||
|
amount: 4500,
|
||||||
|
commission: 675,
|
||||||
|
date: '2024-01-15',
|
||||||
|
paymentDate: '2024-01-20',
|
||||||
|
status: 'Pagado',
|
||||||
|
method: 'Transferencia',
|
||||||
|
invoiceNumber: 'INV-2024-001',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'PAY-002',
|
||||||
|
partner: 'Tours Caribe',
|
||||||
|
amount: 12000,
|
||||||
|
commission: 1800,
|
||||||
|
date: '2024-01-14',
|
||||||
|
status: 'Pendiente',
|
||||||
|
method: 'Transferencia',
|
||||||
|
invoiceNumber: 'INV-2024-002',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'PAY-003',
|
||||||
|
partner: 'Restaurante El Mar',
|
||||||
|
amount: 3000,
|
||||||
|
commission: 300,
|
||||||
|
date: '2024-01-14',
|
||||||
|
paymentDate: '2024-01-18',
|
||||||
|
status: 'Pagado',
|
||||||
|
method: 'Cheque',
|
||||||
|
invoiceNumber: 'INV-2024-003',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'PAY-004',
|
||||||
|
partner: 'Spa Wellness',
|
||||||
|
amount: 8000,
|
||||||
|
commission: 1200,
|
||||||
|
date: '2024-01-13',
|
||||||
|
status: 'Procesando',
|
||||||
|
method: 'Transferencia',
|
||||||
|
invoiceNumber: 'INV-2024-004',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'PAY-005',
|
||||||
|
partner: 'Adventure Park',
|
||||||
|
amount: 6500,
|
||||||
|
commission: 975,
|
||||||
|
date: '2024-01-12',
|
||||||
|
paymentDate: '2024-01-17',
|
||||||
|
status: 'Pagado',
|
||||||
|
method: 'Transferencia',
|
||||||
|
invoiceNumber: 'INV-2024-005',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const getStatusIcon = (status: Payment['status']) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'Pagado':
|
||||||
|
return <CheckCircle className="w-4 h-4 text-success" />;
|
||||||
|
case 'Pendiente':
|
||||||
|
return <Clock className="w-4 h-4 text-warning" />;
|
||||||
|
case 'Procesando':
|
||||||
|
return <Clock className="w-4 h-4 text-primary" />;
|
||||||
|
case 'Cancelado':
|
||||||
|
return <XCircle className="w-4 h-4 text-destructive" />;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusBadge = (status: Payment['status']) => {
|
||||||
|
const styles = {
|
||||||
|
Pagado: 'bg-success/10 text-success',
|
||||||
|
Pendiente: 'bg-warning/10 text-warning',
|
||||||
|
Procesando: 'bg-primary/10 text-primary',
|
||||||
|
Cancelado: 'bg-destructive/10 text-destructive',
|
||||||
|
};
|
||||||
|
return styles[status];
|
||||||
|
};
|
||||||
|
|
||||||
|
const filteredPayments = payments.filter((payment) => {
|
||||||
|
const matchesSearch =
|
||||||
|
payment.partner.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||||
|
payment.invoiceNumber.toLowerCase().includes(searchTerm.toLowerCase());
|
||||||
|
const matchesStatus = statusFilter === 'all' || payment.status === statusFilter;
|
||||||
|
return matchesSearch && matchesStatus;
|
||||||
|
});
|
||||||
|
|
||||||
|
const totalCommissions = filteredPayments.reduce((sum, p) => sum + p.commission, 0);
|
||||||
|
const paidCommissions = filteredPayments
|
||||||
|
.filter((p) => p.status === 'Pagado')
|
||||||
|
.reduce((sum, p) => sum + p.commission, 0);
|
||||||
|
const pendingCommissions = filteredPayments
|
||||||
|
.filter((p) => p.status === 'Pendiente')
|
||||||
|
.reduce((sum, p) => sum + p.commission, 0);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl font-bold text-foreground">Historial de Pagos</h1>
|
||||||
|
<p className="text-muted-foreground mt-1">
|
||||||
|
Consulta y gestiona el historial de comisiones pagadas
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Button variant="default">
|
||||||
|
<Download className="w-4 h-4 mr-2" />
|
||||||
|
Exportar Reporte
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Summary Cards */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||||
|
Total Comisiones
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-2xl font-bold text-foreground">
|
||||||
|
${totalCommissions.toFixed(2)}
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||||
|
Comisiones Pagadas
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-2xl font-bold text-success">${paidCommissions.toFixed(2)}</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||||
|
Comisiones Pendientes
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-2xl font-bold text-warning">
|
||||||
|
${pendingCommissions.toFixed(2)}
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Filters */}
|
||||||
|
<Card>
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<div className="flex flex-col md:flex-row gap-4">
|
||||||
|
<div className="flex-1 relative">
|
||||||
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
|
||||||
|
<Input
|
||||||
|
placeholder="Buscar por partner o número de factura..."
|
||||||
|
value={searchTerm}
|
||||||
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||||||
|
className="pl-10"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||||||
|
<SelectTrigger className="w-full md:w-[200px]">
|
||||||
|
<SelectValue placeholder="Estado" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="all">Todos los estados</SelectItem>
|
||||||
|
<SelectItem value="Pagado">Pagado</SelectItem>
|
||||||
|
<SelectItem value="Pendiente">Pendiente</SelectItem>
|
||||||
|
<SelectItem value="Procesando">Procesando</SelectItem>
|
||||||
|
<SelectItem value="Cancelado">Cancelado</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Payments Table */}
|
||||||
|
<Card>
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>ID</TableHead>
|
||||||
|
<TableHead>Partner</TableHead>
|
||||||
|
<TableHead>Monto</TableHead>
|
||||||
|
<TableHead>Comisión</TableHead>
|
||||||
|
<TableHead>Fecha Transacción</TableHead>
|
||||||
|
<TableHead>Fecha Pago</TableHead>
|
||||||
|
<TableHead>Método</TableHead>
|
||||||
|
<TableHead>Estado</TableHead>
|
||||||
|
<TableHead>Acciones</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{filteredPayments.map((payment) => (
|
||||||
|
<TableRow key={payment.id}>
|
||||||
|
<TableCell className="font-medium">{payment.id}</TableCell>
|
||||||
|
<TableCell>{payment.partner}</TableCell>
|
||||||
|
<TableCell>${payment.amount.toFixed(2)}</TableCell>
|
||||||
|
<TableCell className="font-bold text-success">
|
||||||
|
${payment.commission.toFixed(2)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>{payment.date}</TableCell>
|
||||||
|
<TableCell>{payment.paymentDate || '-'}</TableCell>
|
||||||
|
<TableCell>{payment.method}</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{getStatusIcon(payment.status)}
|
||||||
|
<span className={`px-2 py-1 text-xs rounded-full ${getStatusBadge(payment.status)}`}>
|
||||||
|
{payment.status}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Button variant="ghost" size="sm">
|
||||||
|
<FileText className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PaymentHistory;
|
||||||
Reference in New Issue
Block a user