mirror of
https://github.com/felipegcoutinho/openmonetis.git
synced 2026-03-10 04:51:47 +00:00
Adicionado aba de estabelecimentos e feita ajuste de interface. Detalhes adicionados no CHANGELOG.md
This commit is contained in:
Guilherme Bano
committed by
Felipe Coutinho
Felipe Coutinho
parent
ffde55f589
commit
9b78f839bf
@@ -0,0 +1,97 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useTransition } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { createEstabelecimentoAction } from "@/app/(dashboard)/estabelecimentos/actions";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { RiAddCircleLine } from "@remixicon/react";
|
||||
|
||||
interface EstabelecimentoCreateDialogProps {
|
||||
trigger?: React.ReactNode;
|
||||
}
|
||||
|
||||
export function EstabelecimentoCreateDialog({
|
||||
trigger,
|
||||
}: EstabelecimentoCreateDialogProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [name, setName] = useState("");
|
||||
const [isPending, startTransition] = useTransition();
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
const trimmed = name.trim();
|
||||
if (!trimmed) return;
|
||||
|
||||
startTransition(async () => {
|
||||
const result = await createEstabelecimentoAction({ name: trimmed });
|
||||
if (result.success) {
|
||||
toast.success(result.message);
|
||||
setName("");
|
||||
setOpen(false);
|
||||
} else {
|
||||
toast.error(result.error);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger asChild>
|
||||
{trigger ?? (
|
||||
<Button>
|
||||
<RiAddCircleLine className="size-4" />
|
||||
Novo estabelecimento
|
||||
</Button>
|
||||
)}
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Novo estabelecimento</DialogTitle>
|
||||
<DialogDescription>
|
||||
Adicione um nome para usar nos lançamentos. Ele aparecerá na lista
|
||||
e nas sugestões ao criar ou editar lançamentos.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="estabelecimento-name">Nome</Label>
|
||||
<Input
|
||||
id="estabelecimento-name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Ex: Supermercado, Posto, Farmácia"
|
||||
disabled={isPending}
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => setOpen(false)}
|
||||
disabled={isPending}
|
||||
>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button type="submit" disabled={isPending || !name.trim()}>
|
||||
{isPending ? "Salvando…" : "Criar"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
154
components/estabelecimentos/estabelecimentos-page.tsx
Normal file
154
components/estabelecimentos/estabelecimentos-page.tsx
Normal file
@@ -0,0 +1,154 @@
|
||||
"use client";
|
||||
|
||||
import { RiDeleteBin5Line, RiExternalLinkLine } from "@remixicon/react";
|
||||
import Link from "next/link";
|
||||
import { useCallback, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { deleteEstabelecimentoAction } from "@/app/(dashboard)/estabelecimentos/actions";
|
||||
import { ConfirmActionDialog } from "@/components/confirm-action-dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { EstabelecimentoLogo } from "@/components/lancamentos/shared/estabelecimento-logo";
|
||||
import { EstabelecimentoCreateDialog } from "./estabelecimento-create-dialog";
|
||||
import type { EstabelecimentoRow } from "@/app/(dashboard)/estabelecimentos/data";
|
||||
|
||||
interface EstabelecimentosPageProps {
|
||||
rows: EstabelecimentoRow[];
|
||||
}
|
||||
|
||||
function buildLancamentosUrl(name: string): string {
|
||||
const params = new URLSearchParams();
|
||||
params.set("estabelecimento", name);
|
||||
return `/lancamentos?${params.toString()}`;
|
||||
}
|
||||
|
||||
export function EstabelecimentosPage({ rows }: EstabelecimentosPageProps) {
|
||||
const [deleteOpen, setDeleteOpen] = useState(false);
|
||||
const [rowToDelete, setRowToDelete] = useState<EstabelecimentoRow | null>(
|
||||
null,
|
||||
);
|
||||
|
||||
const handleDeleteRequest = useCallback((row: EstabelecimentoRow) => {
|
||||
setRowToDelete(row);
|
||||
setDeleteOpen(true);
|
||||
}, []);
|
||||
|
||||
const handleDeleteOpenChange = useCallback((open: boolean) => {
|
||||
setDeleteOpen(open);
|
||||
if (!open) setRowToDelete(null);
|
||||
}, []);
|
||||
|
||||
const handleDeleteConfirm = useCallback(async () => {
|
||||
if (!rowToDelete?.estabelecimentoId) return;
|
||||
|
||||
const result = await deleteEstabelecimentoAction({
|
||||
id: rowToDelete.estabelecimentoId,
|
||||
});
|
||||
|
||||
if (result.success) {
|
||||
toast.success(result.message);
|
||||
setDeleteOpen(false);
|
||||
setRowToDelete(null);
|
||||
return;
|
||||
}
|
||||
|
||||
toast.error(result.error);
|
||||
throw new Error(result.error);
|
||||
}, [rowToDelete]);
|
||||
|
||||
const canDelete = (row: EstabelecimentoRow) =>
|
||||
row.lancamentosCount === 0 && row.estabelecimentoId != null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex w-full flex-col gap-6">
|
||||
<div className="flex justify-start">
|
||||
<EstabelecimentoCreateDialog />
|
||||
</div>
|
||||
|
||||
{rows.length === 0 ? (
|
||||
<div className="flex min-h-[280px] items-center justify-center rounded-lg border border-dashed bg-muted/10 p-10 text-center text-sm text-muted-foreground">
|
||||
Nenhum estabelecimento ainda. Crie um ou use a lista que será
|
||||
preenchida conforme você adiciona lançamentos.
|
||||
</div>
|
||||
) : (
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Estabelecimento</TableHead>
|
||||
<TableHead className="text-right">Lançamentos</TableHead>
|
||||
<TableHead className="w-[180px] text-right">Ações</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{rows.map((row) => (
|
||||
<TableRow key={`${row.name}-${row.estabelecimentoId ?? "x"}`}>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-3">
|
||||
<EstabelecimentoLogo name={row.name} size={32} />
|
||||
<span className="font-medium">{row.name}</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{row.lancamentosCount}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button variant="ghost" size="sm" asChild>
|
||||
<Link
|
||||
href={buildLancamentosUrl(row.name)}
|
||||
className="inline-flex items-center gap-1"
|
||||
>
|
||||
<RiExternalLinkLine className="size-4" />
|
||||
Ver vinculados
|
||||
</Link>
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-destructive hover:text-destructive"
|
||||
disabled={!canDelete(row)}
|
||||
onClick={() => handleDeleteRequest(row)}
|
||||
title={
|
||||
row.lancamentosCount > 0
|
||||
? "Não é possível excluir: há lançamentos vinculados."
|
||||
: "Excluir estabelecimento"
|
||||
}
|
||||
>
|
||||
<RiDeleteBin5Line className="size-4" />
|
||||
Excluir
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ConfirmActionDialog
|
||||
open={deleteOpen}
|
||||
onOpenChange={handleDeleteOpenChange}
|
||||
title="Excluir estabelecimento?"
|
||||
description={
|
||||
rowToDelete
|
||||
? `Tem certeza que deseja excluir "${rowToDelete.name}"? Esta ação não pode ser desfeita.`
|
||||
: ""
|
||||
}
|
||||
confirmLabel="Excluir"
|
||||
variant="destructive"
|
||||
onConfirm={handleDeleteConfirm}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user