.elementor-kit-12{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-kit-12 e-page-transition{background-color:#FFBC7D;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */import React, { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { cn } from '@/lib/utils';

// Sample data - in a real application, this would come from an API or database
const billsToPay = [
  { id: 1, description: 'Aluguel', amount: 1500, dueDate: '2025-05-25', status: 'pending' },
  { id: 2, description: 'Internet', amount: 120, dueDate: '2025-05-20', status: 'pending' },
  { id: 3, description: 'Energia', amount: 250, dueDate: '2025-05-15', status: 'paid' },
  { id: 4, description: 'Água', amount: 100, dueDate: '2025-05-10', status: 'paid' },
];

const billsToReceive = [
  { id: 1, description: 'Cliente X', amount: 3000, dueDate: '2025-05-22', status: 'pending' },
  { id: 2, description: 'Cliente Y', amount: 1500, dueDate: '2025-05-18', status: 'pending' },
  { id: 3, description: 'Cliente Z', amount: 2200, dueDate: '2025-05-08', status: 'received' },
];

const BillsTable: React.FC = () => {
  const [activeTab, setActiveTab] = useState('to-pay');

  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat('pt-BR', {
      style: 'currency',
      currency: 'BRL',
    }).format(value);
  };

  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString('pt-BR');
  };

  const getStatusText = (status: string, type: 'pay' | 'receive') => {
    if (type === 'pay') {
      return status === 'paid' ? 'Pago' : 'Pendente';
    } else {
      return status === 'received' ? 'Recebido' : 'Pendente';
    }
  };

  const getStatusStyle = (status: string) => {
    return status === 'paid' || status === 'received'
      ? 'text-finance-income'
      : 'text-finance-pending';
  };

  return (
    <Card className="dashboard-card">
      <CardHeader className="pb-2">
        <CardTitle className="text-lg font-medium">Contas</CardTitle>
      </CardHeader>
      <CardContent>
        <Tabs defaultValue="to-pay" onValueChange={setActiveTab} value={activeTab}>
          <TabsList className="grid w-full grid-cols-2 mb-4">
            <TabsTrigger value="to-pay">A Pagar</TabsTrigger>
            <TabsTrigger value="to-receive">A Receber</TabsTrigger>
          </TabsList>
          <TabsContent value="to-pay" className="space-y-4">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Descrição</TableHead>
                  <TableHead>Valor</TableHead>
                  <TableHead>Vencimento</TableHead>
                  <TableHead>Status</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {billsToPay.map((bill) => (
                  <TableRow key={bill.id}>
                    <TableCell>{bill.description}</TableCell>
                    <TableCell className="text-finance-expense">
                      {formatCurrency(bill.amount)}
                    </TableCell>
                    <TableCell>{formatDate(bill.dueDate)}</TableCell>
                    <TableCell className={cn(getStatusStyle(bill.status))}>
                      {getStatusText(bill.status, 'pay')}
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </TabsContent>
          <TabsContent value="to-receive" className="space-y-4">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Descrição</TableHead>
                  <TableHead>Valor</TableHead>
                  <TableHead>Vencimento</TableHead>
                  <TableHead>Status</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {billsToReceive.map((bill) => (
                  <TableRow key={bill.id}>
                    <TableCell>{bill.description}</TableCell>
                    <TableCell className="text-finance-income">
                      {formatCurrency(bill.amount)}
                    </TableCell>
                    <TableCell>{formatDate(bill.dueDate)}</TableCell>
                    <TableCell className={cn(getStatusStyle(bill.status))}>
                      {getStatusText(bill.status, 'receive')}
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  );
};/* End custom CSS */