feat: add multi-bill-edit page for batch bill status updates
- Add getLocationsByMonth server action with aggregation pipeline to calculate hasAttachment - Add updateMonth server action for bulk bill status updates with path revalidation - Create multi-bill-edit page at /home/multi-bill-edit/[year]/[month] - Implement MultiBillEdit component with toggle functionality for all bills - Add BillToggleBadge component integration for consistent bill display - Add "set all as paid/unpaid" toggle button for batch operations - Implement server-side redirect with success message after save - Add Suspense boundary with loading skeleton - Update translations for multi-bill-edit feature (Croatian and English) - Ensure data freshness with unstable_noStore and revalidatePath 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,162 @@
|
||||
'use client';
|
||||
|
||||
import { FC, useState } from "react";
|
||||
import { BillingLocation, YearMonth } from "../../../../../lib/db-types";
|
||||
import { formatYearMonth } from "../../../../../lib/format";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { updateMonth } from "../../../../../lib/actions/monthActions";
|
||||
import { toast, ToastContainer } from 'react-toastify';
|
||||
import 'react-toastify/dist/ReactToastify.css';
|
||||
import { BillToggleBadge } from "./BillToggleBadge";
|
||||
|
||||
export interface MultiBillEditProps {
|
||||
locations: BillingLocation[];
|
||||
year: number;
|
||||
month: number;
|
||||
}
|
||||
|
||||
interface BillState {
|
||||
locationId: string;
|
||||
billId: string;
|
||||
paid: boolean;
|
||||
}
|
||||
|
||||
export const MultiBillEdit: FC<MultiBillEditProps> = ({ locations, year, month }) => {
|
||||
const t = useTranslations("multi-bill-edit");
|
||||
const router = useRouter();
|
||||
|
||||
// Initialize bill states from locations
|
||||
const initialBillStates: BillState[] = locations.flatMap(location =>
|
||||
location.bills.map(bill => ({
|
||||
locationId: location._id,
|
||||
billId: bill._id,
|
||||
paid: bill.paid,
|
||||
}))
|
||||
);
|
||||
|
||||
const [billStates, setBillStates] = useState<BillState[]>(initialBillStates);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [allPaidMode, setAllPaidMode] = useState(false);
|
||||
|
||||
// Toggle individual bill paid status
|
||||
const handleBillToggle = (locationId: string, billId: string) => {
|
||||
setBillStates(prevStates =>
|
||||
prevStates.map(state =>
|
||||
state.locationId === locationId && state.billId === billId
|
||||
? { ...state, paid: !state.paid }
|
||||
: state
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
// Toggle all bills paid status
|
||||
const handleSetAllAsPayed = () => {
|
||||
const newPaidState = !allPaidMode;
|
||||
setAllPaidMode(newPaidState);
|
||||
setBillStates(prevStates =>
|
||||
prevStates.map(state => ({ ...state, paid: newPaidState }))
|
||||
);
|
||||
};
|
||||
|
||||
// Save changes to database
|
||||
const handleSave = async () => {
|
||||
setIsSaving(true);
|
||||
try {
|
||||
const updates = billStates.map(state => ({
|
||||
locationId: state.locationId,
|
||||
billId: state.billId,
|
||||
paid: state.paid,
|
||||
}));
|
||||
|
||||
await updateMonth({ year, month }, updates);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error saving bill updates:', error);
|
||||
toast.error(t("save-error-message"), { theme: "dark" });
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Cancel and return to home page
|
||||
const handleCancel = () => {
|
||||
router.push(`/home?year=${year}`);
|
||||
};
|
||||
|
||||
// Get bill state for a specific bill
|
||||
const getBillState = (locationId: string, billId: string): boolean => {
|
||||
const state = billStates.find(
|
||||
s => s.locationId === locationId && s.billId === billId
|
||||
);
|
||||
return state?.paid ?? false;
|
||||
};
|
||||
|
||||
const yearMonth: YearMonth = { year, month };
|
||||
|
||||
return (
|
||||
<div className={`collapse bg-base-200 my-1 sm:min-w-[25em] border-2 border-neutral`}>
|
||||
<h1 className="text-xl font-medium text-white collapse-title ml-1">{formatYearMonth(yearMonth)}</h1>
|
||||
<div className="absolute cursor-pointer top-4 right-[20px]">
|
||||
<BillToggleBadge locationId={"dummy"}
|
||||
bill={{ paid:allPaidMode, name: allPaidMode ? t("set-all-as-unpaid-button") : t("set-all-as-paid-button"), hasAttachment: false, proofOfPayment: undefined }}
|
||||
onClick={handleSetAllAsPayed}
|
||||
/>
|
||||
</div>
|
||||
<div className="p-[16px] pt-0">
|
||||
{locations.map(location => (
|
||||
<div key={location._id} className="card card-compact card-bordered max-w-[30em] bg-base-100 border-1 border-neutral mb-2">
|
||||
<div className="card-body">
|
||||
<h2 className="card-title text-[1rem]">
|
||||
{formatYearMonth(yearMonth)} {location.name}
|
||||
</h2>
|
||||
<div className="space-y-4 mt-[-.5rem]">
|
||||
{location.bills.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-2 mt-2">
|
||||
{location.bills.map(bill => {
|
||||
const isPaid = getBillState(location._id, bill._id);
|
||||
return (
|
||||
<BillToggleBadge
|
||||
key={bill._id}
|
||||
locationId={location._id}
|
||||
bill={{ ...bill, paid: isPaid }}
|
||||
onClick={() => handleBillToggle(location._id, bill._id)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-gray-500">{t("no-bills-message")}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{/* Action buttons */}
|
||||
<div className="pt-4">
|
||||
<button
|
||||
onClick={handleSave}
|
||||
className="btn btn-primary ml-3"
|
||||
disabled={isSaving}
|
||||
>
|
||||
{isSaving ? (
|
||||
<>
|
||||
<span className="loading loading-spinner loading-sm"></span>
|
||||
{t("saving-button")}
|
||||
</>
|
||||
) : (
|
||||
t("save-button")
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleCancel}
|
||||
className="btn btn-neutral ml-3"
|
||||
disabled={isSaving}
|
||||
>
|
||||
{t("cancel-button")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<ToastContainer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user