fix(erp): enable erp pages and menu items
This commit is contained in:
Erik Silva
211
front-end-agency/app/(agency)/erp/ERPSettingsPage.tsx
Normal file
211
front-end-agency/app/(agency)/erp/ERPSettingsPage.tsx
Normal file
@@ -0,0 +1,211 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
PlusIcon,
|
||||
BanknotesIcon,
|
||||
TagIcon,
|
||||
CheckIcon,
|
||||
XMarkIcon,
|
||||
PencilSquareIcon,
|
||||
TrashIcon,
|
||||
BuildingLibraryIcon
|
||||
} from '@heroicons/react/24/outline';
|
||||
import { erpApi, FinancialCategory, BankAccount } from '@/lib/api-erp';
|
||||
import { formatCurrency } from '@/lib/format';
|
||||
import { toast } from 'react-hot-toast';
|
||||
import {
|
||||
PageHeader,
|
||||
DataTable,
|
||||
Input,
|
||||
Card,
|
||||
Tabs
|
||||
} from "@/components/ui";
|
||||
|
||||
export default function ERPSettingsPage() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<PageHeader
|
||||
title="Configurações do ERP"
|
||||
description="Gerencie categorias financeiras, contas bancárias e outras preferências do sistema."
|
||||
/>
|
||||
|
||||
<Tabs
|
||||
variant="pills"
|
||||
items={[
|
||||
{
|
||||
label: 'Categorias Financeiras',
|
||||
icon: <TagIcon className="w-4 h-4" />,
|
||||
content: <CategorySettings />
|
||||
},
|
||||
{
|
||||
label: 'Contas Bancárias',
|
||||
icon: <BuildingLibraryIcon className="w-4 h-4" />,
|
||||
content: <AccountSettings />
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CategorySettings() {
|
||||
const [categories, setCategories] = useState<FinancialCategory[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const data = await erpApi.getFinancialCategories();
|
||||
setCategories(data || []);
|
||||
} catch (error) {
|
||||
toast.error('Erro ao carregar categorias');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<h3 className="text-lg font-bold text-zinc-900 dark:text-white">Categorias</h3>
|
||||
<button
|
||||
className="flex items-center gap-2 px-4 py-2 text-white rounded-xl font-bold shadow-lg hover:opacity-90 transition-all text-sm"
|
||||
style={{ background: 'var(--gradient)' }}
|
||||
>
|
||||
<PlusIcon className="w-4 h-4" />
|
||||
Nova Categoria
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Card noPadding className="overflow-hidden">
|
||||
<DataTable
|
||||
isLoading={loading}
|
||||
data={categories}
|
||||
columns={[
|
||||
{
|
||||
header: 'Nome',
|
||||
accessor: (row) => (
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-3 h-3 rounded-full" style={{ backgroundColor: row.color }} />
|
||||
<span className="font-bold text-zinc-900 dark:text-white">{row.name}</span>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
header: 'Tipo',
|
||||
accessor: (row) => (
|
||||
<span className={`px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider ${row.type === 'income' ? 'bg-emerald-100 text-emerald-700' : 'bg-rose-100 text-rose-700'}`}>
|
||||
{row.type === 'income' ? 'Receita' : 'Despesa'}
|
||||
</span>
|
||||
)
|
||||
},
|
||||
{
|
||||
header: 'Status',
|
||||
accessor: (row) => (
|
||||
<span className={`text-xs font-bold ${row.is_active ? 'text-emerald-500' : 'text-zinc-400'}`}>
|
||||
{row.is_active ? 'Ativo' : 'Inativo'}
|
||||
</span>
|
||||
)
|
||||
},
|
||||
{
|
||||
header: '',
|
||||
className: 'text-right',
|
||||
accessor: () => (
|
||||
<div className="flex justify-end gap-2 opacity-0 group-hover:opacity-100 transition-all">
|
||||
<button className="p-2 text-zinc-400 hover:text-brand-600 dark:hover:text-brand-400">
|
||||
<PencilSquareIcon className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function AccountSettings() {
|
||||
const [accounts, setAccounts] = useState<BankAccount[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const data = await erpApi.getBankAccounts();
|
||||
setAccounts(data || []);
|
||||
} catch (error) {
|
||||
toast.error('Erro ao carregar contas');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<h3 className="text-lg font-bold text-zinc-900 dark:text-white">Contas Bancárias</h3>
|
||||
<button
|
||||
className="flex items-center gap-2 px-4 py-2 text-white rounded-xl font-bold shadow-lg hover:opacity-90 transition-all text-sm"
|
||||
style={{ background: 'var(--gradient)' }}
|
||||
>
|
||||
<PlusIcon className="w-4 h-4" />
|
||||
Nova Conta
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Card noPadding className="overflow-hidden">
|
||||
<DataTable
|
||||
isLoading={loading}
|
||||
data={accounts}
|
||||
columns={[
|
||||
{
|
||||
header: 'Nome da Conta',
|
||||
accessor: (row) => (
|
||||
<div className="flex flex-col">
|
||||
<span className="font-bold text-zinc-900 dark:text-white">{row.name}</span>
|
||||
<span className="text-xs text-zinc-400 font-bold uppercase">{row.bank_name}</span>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
header: 'Saldo Atual',
|
||||
className: 'text-right',
|
||||
accessor: (row) => (
|
||||
<span className="font-black text-zinc-900 dark:text-white">
|
||||
{formatCurrency(row.current_balance)}
|
||||
</span>
|
||||
)
|
||||
},
|
||||
{
|
||||
header: 'Status',
|
||||
accessor: (row) => (
|
||||
<span className={`text-xs font-bold ${row.is_active ? 'text-emerald-500' : 'text-zinc-400'}`}>
|
||||
{row.is_active ? 'Ativo' : 'Inativo'}
|
||||
</span>
|
||||
)
|
||||
},
|
||||
{
|
||||
header: '',
|
||||
className: 'text-right',
|
||||
accessor: () => (
|
||||
<div className="flex justify-end gap-2 opacity-0 group-hover:opacity-100 transition-all">
|
||||
<button className="p-2 text-zinc-400 hover:text-brand-600 dark:hover:text-brand-400">
|
||||
<PencilSquareIcon className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user