diff --git a/src/features/dashboard/components/bills/bill-list-item.tsx b/src/features/dashboard/components/bills/bill-list-item.tsx index e991712..c57f6dc 100644 --- a/src/features/dashboard/components/bills/bill-list-item.tsx +++ b/src/features/dashboard/components/bills/bill-list-item.tsx @@ -1,4 +1,5 @@ -import { RiCheckboxCircleFill } from "@remixicon/react"; +import { RiCheckboxCircleFill, RiExternalLinkLine } from "@remixicon/react"; +import Link from "next/link"; import { buildBillStatusLabel, buildBillWidgetStatusLabel, @@ -13,14 +14,25 @@ import { TooltipContent, TooltipTrigger, } from "@/shared/components/ui/tooltip"; +import { getCurrentPeriod, formatPeriodForUrl } from "@/shared/utils/period"; import { cn } from "@/shared/utils/ui"; type BillListItemProps = { bill: DashboardBill; + period?: string; onPay: (billId: string) => void; }; -export function BillListItem({ bill, onPay }: BillListItemProps) { +function buildTransactionsHref(name: string, period?: string): string { + const params = new URLSearchParams({ q: name }); + const current = getCurrentPeriod(); + if (period && period !== current) { + params.set("periodo", formatPeriodForUrl(period)); + } + return `/transactions?${params.toString()}`; +} + +export function BillListItem({ bill, period, onPay }: BillListItemProps) { const statusLabel = buildBillWidgetStatusLabel(bill); const absoluteStatusLabel = buildBillStatusLabel(bill); const overdue = isBillOverdue(bill); @@ -28,6 +40,7 @@ export function BillListItem({ bill, onPay }: BillListItemProps) { statusLabel && statusLabel !== absoluteStatusLabel ? absoluteStatusLabel : null; + const href = buildTransactionsHref(bill.name, period); return (
  • @@ -35,9 +48,16 @@ export function BillListItem({ bill, onPay }: BillListItemProps) {
    - - {bill.name} - + + {bill.name} + +
    {statusLabel ? ( statusTooltipLabel ? ( diff --git a/src/features/dashboard/components/bills/bills-list.tsx b/src/features/dashboard/components/bills/bills-list.tsx index ebd4b2d..9f085d7 100644 --- a/src/features/dashboard/components/bills/bills-list.tsx +++ b/src/features/dashboard/components/bills/bills-list.tsx @@ -5,10 +5,11 @@ import { BillListItem } from "./bill-list-item"; type BillsListProps = { bills: DashboardBill[]; + period?: string; onPay: (billId: string) => void; }; -export function BillsList({ bills, onPay }: BillsListProps) { +export function BillsList({ bills, period, onPay }: BillsListProps) { if (bills.length === 0) { return ( {bills.map((bill) => ( - + ))} ); diff --git a/src/features/dashboard/components/bills/bills-widget-view.tsx b/src/features/dashboard/components/bills/bills-widget-view.tsx index 4db437e..4b2ea0b 100644 --- a/src/features/dashboard/components/bills/bills-widget-view.tsx +++ b/src/features/dashboard/components/bills/bills-widget-view.tsx @@ -1,14 +1,23 @@ import type { BillDialogState } from "@/features/dashboard/bills/bills-helpers"; -import type { DashboardBill } from "@/features/dashboard/bills/bills-queries"; +import type { + BillPaymentAccountOption, + DashboardBill, +} from "@/features/dashboard/bills/bills-queries"; import { BillPaymentDialog } from "./bill-payment-dialog"; import { BillsList } from "./bills-list"; type BillsWidgetViewProps = { bills: DashboardBill[]; + period?: string; selectedBill: DashboardBill | null; isModalOpen: boolean; modalState: BillDialogState; isPending: boolean; + paymentAccountId: string; + onPaymentAccountChange: (accountId: string) => void; + paymentDate: Date; + onPaymentDateChange: (date: Date) => void; + paymentAccountOptions: BillPaymentAccountOption[]; onOpenPaymentDialog: (billId: string) => void; onClosePaymentDialog: () => void; onConfirmPayment: () => void; @@ -16,10 +25,16 @@ type BillsWidgetViewProps = { export function BillsWidgetView({ bills, + period, selectedBill, isModalOpen, modalState, isPending, + paymentAccountId, + onPaymentAccountChange, + paymentDate, + onPaymentDateChange, + paymentAccountOptions, onOpenPaymentDialog, onClosePaymentDialog, onConfirmPayment, @@ -27,7 +42,7 @@ export function BillsWidgetView({ return ( <>
    - +
    diff --git a/src/features/dashboard/components/widgets/bill-widget.tsx b/src/features/dashboard/components/widgets/bill-widget.tsx index e935c54..205e21a 100644 --- a/src/features/dashboard/components/widgets/bill-widget.tsx +++ b/src/features/dashboard/components/widgets/bill-widget.tsx @@ -1,20 +1,35 @@ "use client"; -import type { DashboardBill } from "@/features/dashboard/bills/bills-queries"; +import type { + BillPaymentAccountOption, + DashboardBill, +} from "@/features/dashboard/bills/bills-queries"; import { useBillWidgetController } from "@/features/dashboard/bills/use-bill-widget-controller"; import { BillsWidgetView } from "../bills/bills-widget-view"; type BillWidgetProps = { bills?: DashboardBill[]; + paymentAccountOptions?: BillPaymentAccountOption[]; + period?: string; }; -export function BillWidget({ bills }: BillWidgetProps) { +const EMPTY_OPTIONS: BillPaymentAccountOption[] = []; + +export function BillWidget({ + bills, + paymentAccountOptions = EMPTY_OPTIONS, + period, +}: BillWidgetProps) { const { items, selectedBill, isModalOpen, modalState, isPending, + paymentAccountId, + setPaymentAccountId, + paymentDate, + setPaymentDate, openPaymentDialog, closePaymentDialog, confirmPayment, @@ -23,10 +38,16 @@ export function BillWidget({ bills }: BillWidgetProps) { return ( , component: ({ data }) => ( - + ), }, { @@ -101,7 +104,13 @@ export const widgetsConfig: WidgetConfig[] = [ title: "Boletos", subtitle: "Controle de boletos do perĂ­odo", icon: , - component: ({ data }) => , + component: ({ data, period }) => ( + + ), }, { id: "payment-status",