forked from git.gladyson/openmonetis
fix(cartoes): ordena faturas do mais recente para mais antigo
- Inverte ordem de exibição das faturas - Adiciona ícone e title_font no header
This commit is contained in:
@@ -1,8 +1,10 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
||||||
import { Badge } from "@/components/ui/badge";
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
import type { CardDetailData } from "@/lib/relatorios/cartoes-report";
|
import type { CardDetailData } from "@/lib/relatorios/cartoes-report";
|
||||||
|
import { title_font } from "@/public/fonts/font_index";
|
||||||
|
import { RiBankCard2Fill } from "@remixicon/react";
|
||||||
|
|
||||||
type CardInvoiceStatusProps = {
|
type CardInvoiceStatusProps = {
|
||||||
data: CardDetailData["invoiceStatus"];
|
data: CardDetailData["invoiceStatus"];
|
||||||
@@ -37,19 +39,28 @@ export function CardInvoiceStatus({ data }: CardInvoiceStatusProps) {
|
|||||||
switch (status) {
|
switch (status) {
|
||||||
case "pago":
|
case "pago":
|
||||||
return (
|
return (
|
||||||
<Badge variant="outline" className="bg-green-50 text-green-700 border-green-200 dark:bg-green-950 dark:text-green-400 dark:border-green-900">
|
<Badge
|
||||||
|
variant="outline"
|
||||||
|
className="bg-green-50 text-green-700 border-green-200 dark:bg-green-950 dark:text-green-400 dark:border-green-900"
|
||||||
|
>
|
||||||
Pago
|
Pago
|
||||||
</Badge>
|
</Badge>
|
||||||
);
|
);
|
||||||
case "pendente":
|
case "pendente":
|
||||||
return (
|
return (
|
||||||
<Badge variant="outline" className="bg-yellow-50 text-yellow-700 border-yellow-200 dark:bg-yellow-950 dark:text-yellow-400 dark:border-yellow-900">
|
<Badge
|
||||||
|
variant="outline"
|
||||||
|
className="bg-yellow-50 text-yellow-700 border-yellow-200 dark:bg-yellow-950 dark:text-yellow-400 dark:border-yellow-900"
|
||||||
|
>
|
||||||
Pendente
|
Pendente
|
||||||
</Badge>
|
</Badge>
|
||||||
);
|
);
|
||||||
case "atrasado":
|
case "atrasado":
|
||||||
return (
|
return (
|
||||||
<Badge variant="outline" className="bg-red-50 text-red-700 border-red-200 dark:bg-red-950 dark:text-red-400 dark:border-red-900">
|
<Badge
|
||||||
|
variant="outline"
|
||||||
|
className="bg-red-50 text-red-700 border-red-200 dark:bg-red-950 dark:text-red-400 dark:border-red-900"
|
||||||
|
>
|
||||||
Atrasado
|
Atrasado
|
||||||
</Badge>
|
</Badge>
|
||||||
);
|
);
|
||||||
@@ -70,13 +81,16 @@ export function CardInvoiceStatus({ data }: CardInvoiceStatusProps) {
|
|||||||
return (
|
return (
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader className="pb-2">
|
<CardHeader className="pb-2">
|
||||||
<CardTitle className="text-base font-medium">
|
<CardTitle
|
||||||
|
className={`${title_font.className} flex items-center gap-1.5 text-base`}
|
||||||
|
>
|
||||||
|
<RiBankCard2Fill className="size-4 text-primary" />
|
||||||
Status das Faturas
|
Status das Faturas
|
||||||
</CardTitle>
|
</CardTitle>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
{data.map((invoice) => (
|
{[...data].reverse().map((invoice) => (
|
||||||
<div
|
<div
|
||||||
key={invoice.period}
|
key={invoice.period}
|
||||||
className="flex items-center justify-between py-2 border-b last:border-b-0"
|
className="flex items-center justify-between py-2 border-b last:border-b-0"
|
||||||
@@ -87,7 +101,7 @@ export function CardInvoiceStatus({ data }: CardInvoiceStatusProps) {
|
|||||||
</span>
|
</span>
|
||||||
{getStatusBadge(invoice.status)}
|
{getStatusBadge(invoice.status)}
|
||||||
</div>
|
</div>
|
||||||
<span className="text-sm text-muted-foreground">
|
<span className="text-sm font-bold">
|
||||||
{formatCurrency(invoice.amount)}
|
{formatCurrency(invoice.amount)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user