Implement remaining modules

src/App.tsx

@@ -56,6 +56,10 @@ import PolReports from "./pages/dashboard/politur/Reports";
 import GuideDashboard from "./pages/dashboard/guides/GuideDashboard";
 import ItineraryBuilder from "./pages/dashboard/guides/ItineraryBuilder";
 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
 import TouristApp from "./pages/TouristApp";
 // Commerce pages (for retail stores)
@@ -626,6 +630,31 @@ const AppRouter = () => (
         </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 */}
       <Route path="*" element={<NotFound />} />
     </Routes>

src/components/DashboardLayout.tsx

@@ -197,6 +197,16 @@ const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
         { 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, 
       label: t('commerce'), 

src/pages/dashboard/commissions/CommissionRules.tsx

@@ -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;

src/pages/dashboard/commissions/CommissionsDashboard.tsx

@@ -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;

src/pages/dashboard/commissions/PaymentHistory.tsx

@@ -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;