Fix: Remove duplicate menu in other pages
The menu is duplicated in all pages except the "avisos" page. This commit removes the duplicated menu.
This commit is contained in:
gpt-engineer-app[bot]
parent
03547c19b5
commit
99a4758dc8
@ -10,7 +10,7 @@ const AvisosContas = () => {
|
|||||||
const [showForm, setShowForm] = useState(false);
|
const [showForm, setShowForm] = useState(false);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container mx-auto p-6 space-y-6">
|
<div className="space-y-6">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-3xl font-bold text-gray-900">Avisos de Contas a Pagar</h1>
|
<h1 className="text-3xl font-bold text-gray-900">Avisos de Contas a Pagar</h1>
|
||||||
|
|||||||
@ -1,4 +1,3 @@
|
|||||||
|
|
||||||
import { useState, useEffect } from 'react';
|
import { useState, useEffect } from 'react';
|
||||||
import Layout from '@/components/layout/Layout';
|
import Layout from '@/components/layout/Layout';
|
||||||
import { CardSpotlight } from '@/components/ui/card-spotlight';
|
import { CardSpotlight } from '@/components/ui/card-spotlight';
|
||||||
@ -78,128 +77,126 @@ const CategoriasPage = () => {
|
|||||||
const totalGastos = categories.reduce((total, category) => total + category.valor, 0);
|
const totalGastos = categories.reduce((total, category) => total + category.valor, 0);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Layout>
|
<div className="space-y-6">
|
||||||
<div className="space-y-6">
|
<div className="flex justify-between items-center">
|
||||||
<div className="flex justify-between items-center">
|
<h1 className="text-2xl font-bold tracking-tight">Categorias</h1>
|
||||||
<h1 className="text-2xl font-bold tracking-tight">Categorias</h1>
|
<div className="flex items-center gap-2">
|
||||||
<div className="flex items-center gap-2">
|
<span className="text-sm text-muted-foreground">Filtrar por:</span>
|
||||||
<span className="text-sm text-muted-foreground">Filtrar por:</span>
|
<Select value={tipoFiltro} onValueChange={handleTipoChange}>
|
||||||
<Select value={tipoFiltro} onValueChange={handleTipoChange}>
|
<SelectTrigger className="w-[180px]">
|
||||||
<SelectTrigger className="w-[180px]">
|
<SelectValue placeholder="Tipo de transação" />
|
||||||
<SelectValue placeholder="Tipo de transação" />
|
</SelectTrigger>
|
||||||
</SelectTrigger>
|
<SelectContent>
|
||||||
<SelectContent>
|
<SelectItem value="despesa">Despesas</SelectItem>
|
||||||
<SelectItem value="despesa">Despesas</SelectItem>
|
<SelectItem value="receita">Receitas</SelectItem>
|
||||||
<SelectItem value="receita">Receitas</SelectItem>
|
<SelectItem value="all">Todos</SelectItem>
|
||||||
<SelectItem value="all">Todos</SelectItem>
|
</SelectContent>
|
||||||
</SelectContent>
|
</Select>
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||||
|
{[1, 2, 3, 4, 5, 6].map((i) => (
|
||||||
|
<CardSpotlight key={i} className="animate-pulse">
|
||||||
|
<div className="pb-2">
|
||||||
|
<div className="h-5 bg-muted rounded w-1/2"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="h-4 bg-muted rounded w-1/4 mb-3"></div>
|
||||||
|
<div className="h-2 bg-muted rounded"></div>
|
||||||
|
</div>
|
||||||
|
</CardSpotlight>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : categories.length === 0 ? (
|
||||||
|
<CardSpotlight>
|
||||||
|
<div className="py-10 text-center">
|
||||||
|
<p className="text-muted-foreground">Nenhuma categoria encontrada</p>
|
||||||
|
<p className="mt-2 text-sm">
|
||||||
|
{tipoFiltro === 'despesa'
|
||||||
|
? 'Verifique se existem transações do tipo "despesa" cadastradas'
|
||||||
|
: tipoFiltro === 'receita'
|
||||||
|
? 'Verifique se existem transações do tipo "receita" cadastradas'
|
||||||
|
: 'Verifique se existem transações cadastradas'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</CardSpotlight>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||||
{[1, 2, 3, 4, 5, 6].map((i) => (
|
{categories.map((category) => (
|
||||||
<CardSpotlight key={i} className="animate-pulse">
|
<CardSpotlight key={category.categoria} className="relative z-10">
|
||||||
<div className="pb-2">
|
<div className="pb-2">
|
||||||
<div className="h-5 bg-muted rounded w-1/2"></div>
|
<div className="text-base flex items-center font-semibold relative z-20">
|
||||||
|
<span
|
||||||
|
className="w-3 h-3 rounded-full mr-2"
|
||||||
|
style={{ backgroundColor: category.color }}
|
||||||
|
/>
|
||||||
|
{category.categoria}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div className="relative z-20">
|
||||||
<div className="h-4 bg-muted rounded w-1/4 mb-3"></div>
|
<div className="text-2xl font-bold mb-2">
|
||||||
<div className="h-2 bg-muted rounded"></div>
|
{formatCurrency(category.valor)}
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Progress
|
||||||
|
value={category.percentage * 100}
|
||||||
|
className="h-2"
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'rgba(0,0,0,0.1)',
|
||||||
|
'--progress-background': category.color
|
||||||
|
} as React.CSSProperties}
|
||||||
|
/>
|
||||||
|
<div className="text-xs text-muted-foreground">
|
||||||
|
{(category.percentage * 100).toFixed(1)}% do total
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</CardSpotlight>
|
</CardSpotlight>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
) : categories.length === 0 ? (
|
|
||||||
<CardSpotlight>
|
<CardSpotlight className="mt-6">
|
||||||
<div className="py-10 text-center">
|
<div>
|
||||||
<p className="text-muted-foreground">Nenhuma categoria encontrada</p>
|
<h3 className="text-xl font-bold mb-4 relative z-20">Resumo de Categorias {tipoFiltro !== 'all' ? (tipoFiltro === 'despesa' ? '(Despesas)' : '(Receitas)') : ''}</h3>
|
||||||
<p className="mt-2 text-sm">
|
</div>
|
||||||
{tipoFiltro === 'despesa'
|
<div className="relative z-20">
|
||||||
? 'Verifique se existem transações do tipo "despesa" cadastradas'
|
<Table>
|
||||||
: tipoFiltro === 'receita'
|
<TableHeader>
|
||||||
? 'Verifique se existem transações do tipo "receita" cadastradas'
|
<TableRow>
|
||||||
: 'Verifique se existem transações cadastradas'}
|
<TableHead>Categoria</TableHead>
|
||||||
</p>
|
<TableHead>Valor</TableHead>
|
||||||
|
<TableHead>Percentual</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{categories.map((category) => (
|
||||||
|
<TableRow key={category.categoria}>
|
||||||
|
<TableCell className="font-medium flex items-center">
|
||||||
|
<span
|
||||||
|
className="w-3 h-3 rounded-full mr-2"
|
||||||
|
style={{ backgroundColor: category.color }}
|
||||||
|
/>
|
||||||
|
{category.categoria}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>{formatCurrency(category.valor)}</TableCell>
|
||||||
|
<TableCell>{(category.percentage * 100).toFixed(1)}%</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
<TableRow className="bg-muted/50">
|
||||||
|
<TableCell className="font-bold">Total</TableCell>
|
||||||
|
<TableCell className="font-bold">{formatCurrency(totalGastos)}</TableCell>
|
||||||
|
<TableCell>100%</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
</div>
|
</div>
|
||||||
</CardSpotlight>
|
</CardSpotlight>
|
||||||
) : (
|
</>
|
||||||
<>
|
)}
|
||||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
</div>
|
||||||
{categories.map((category) => (
|
|
||||||
<CardSpotlight key={category.categoria} className="relative z-10">
|
|
||||||
<div className="pb-2">
|
|
||||||
<div className="text-base flex items-center font-semibold relative z-20">
|
|
||||||
<span
|
|
||||||
className="w-3 h-3 rounded-full mr-2"
|
|
||||||
style={{ backgroundColor: category.color }}
|
|
||||||
/>
|
|
||||||
{category.categoria}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="relative z-20">
|
|
||||||
<div className="text-2xl font-bold mb-2">
|
|
||||||
{formatCurrency(category.valor)}
|
|
||||||
</div>
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Progress
|
|
||||||
value={category.percentage * 100}
|
|
||||||
className="h-2"
|
|
||||||
style={{
|
|
||||||
backgroundColor: 'rgba(0,0,0,0.1)',
|
|
||||||
'--progress-background': category.color
|
|
||||||
} as React.CSSProperties}
|
|
||||||
/>
|
|
||||||
<div className="text-xs text-muted-foreground">
|
|
||||||
{(category.percentage * 100).toFixed(1)}% do total
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardSpotlight>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<CardSpotlight className="mt-6">
|
|
||||||
<div>
|
|
||||||
<h3 className="text-xl font-bold mb-4 relative z-20">Resumo de Categorias {tipoFiltro !== 'all' ? (tipoFiltro === 'despesa' ? '(Despesas)' : '(Receitas)') : ''}</h3>
|
|
||||||
</div>
|
|
||||||
<div className="relative z-20">
|
|
||||||
<Table>
|
|
||||||
<TableHeader>
|
|
||||||
<TableRow>
|
|
||||||
<TableHead>Categoria</TableHead>
|
|
||||||
<TableHead>Valor</TableHead>
|
|
||||||
<TableHead>Percentual</TableHead>
|
|
||||||
</TableRow>
|
|
||||||
</TableHeader>
|
|
||||||
<TableBody>
|
|
||||||
{categories.map((category) => (
|
|
||||||
<TableRow key={category.categoria}>
|
|
||||||
<TableCell className="font-medium flex items-center">
|
|
||||||
<span
|
|
||||||
className="w-3 h-3 rounded-full mr-2"
|
|
||||||
style={{ backgroundColor: category.color }}
|
|
||||||
/>
|
|
||||||
{category.categoria}
|
|
||||||
</TableCell>
|
|
||||||
<TableCell>{formatCurrency(category.valor)}</TableCell>
|
|
||||||
<TableCell>{(category.percentage * 100).toFixed(1)}%</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
))}
|
|
||||||
<TableRow className="bg-muted/50">
|
|
||||||
<TableCell className="font-bold">Total</TableCell>
|
|
||||||
<TableCell className="font-bold">{formatCurrency(totalGastos)}</TableCell>
|
|
||||||
<TableCell>100%</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
</TableBody>
|
|
||||||
</Table>
|
|
||||||
</div>
|
|
||||||
</CardSpotlight>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</Layout>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user