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",