Bill Edit Form: dovršen fetch

app/bills/[id]/edit/not-found.tsx

@@ -0,0 +1,18 @@
+import Link from 'next/link';
+import { FaceFrownIcon } from '@heroicons/react/24/outline';
+ 
+export default function NotFound() {
+  return (
+    <main className="flex h-full flex-col items-center justify-center gap-2">
+      <FaceFrownIcon className="w-10 text-gray-400" />
+      <h2 className="text-xl font-semibold">404 Bill Not Found</h2>
+      <p>Could not find the requested Bill.</p>
+      <Link
+        href="/"
+        className="mt-4 rounded-md bg-blue-500 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-400"
+      >
+        Go Back
+      </Link>
+    </main>
+  );
+}

app/bills/[id]/edit/page.tsx

@@ -0,0 +1,32 @@
+import { Location } from '@/app/lib/db-types';
+import clientPromise from '@/app/lib/mongodb';
+import { BillEditForm } from '@/app/ui/BillEditForm';
+import { ObjectId } from 'mongodb';
+import { notFound } from 'next/navigation';
+
+const fetchBillById = async (locationID:string, billID:string) => {
+    const client = await clientPromise;
+    const db = client.db("rezije");
+
+    // find a location with the given locationID
+    const billLocation = await db.collection<Location>("lokacije").findOne({ _id: locationID })
+    // find a bill with the given billID
+    return(billLocation?.bills.find(({ _id }) => _id.toString() === billID))
+}
+
+export default async function Page({ params:{ id } }: { params: { id:string } }) {
+
+    const [invoiceID, billID] = id.split('-');
+
+    const bill = await fetchBillById(invoiceID, billID);
+
+    if (!bill) {
+        console.log('Bill not found');
+        notFound();
+    }
+    return (
+        <main>
+            <BillEditForm invoiceID={invoiceID} bill={bill} />
+        </main>
+    );
+}

app/lib/db-types.ts

@@ -1,7 +1,7 @@
 import { ObjectId } from "mongodb";
 
 export interface Location {
-    id: ObjectId;
+    _id: string;
     name: string;
     bills: Bill[];
     /** the value is encoded as yyyymm (i.e. 202301) */
@@ -9,7 +9,7 @@ export interface Location {
 };
 
 export interface Bill {
-    id: ObjectId;
+    _id: ObjectId;
     name: string;
     paid: boolean;
     document?: string|null;

app/page.tsx

@@ -28,11 +28,11 @@ export const Page = async () => {
             return (
               <>
                 {
-                  location.yearMonth !== array[0].yearMonth && location.yearMonth !== array[ix-1].yearMonth ? <AddLocationButton /> : null
+                  location.yearMonth !== array[0].yearMonth && location.yearMonth !== array[ix-1].yearMonth ? <AddLocationButton key={`add-loc-${location.yearMonth}`} /> : null
                 }
                 {
                   // show month title if it's the first location in the month
-                  ix === 0 || location.yearMonth !== array[ix-1].yearMonth ? <MonthTitle yearMonth={location.yearMonth} /> : null
+                  ix === 0 || location.yearMonth !== array[ix-1].yearMonth ? <MonthTitle key={location.yearMonth} yearMonth={location.yearMonth} /> : null
                 }
                 <LocationCard key={`${location._id}`} location={location} />
               </>

app/ui/BillBadge.tsx

@@ -1,9 +1,14 @@
 import { FC } from "react"
-import { Bill } from "../lib/db-types"
+import { Bill, Location } from "@/app/lib/db-types"
+import Link from "next/link"
+import { ObjectId } from "mongodb";
 
 export interface BillBadgeProps {
+    locationId: ObjectId,
     bill: Bill
 };
 
-export const BillBadge:FC<BillBadgeProps> = ({bill: { name, paid }}) =>
-    <div className={`badge badge-lg ${paid} ${paid?"badge-success":" badge-outline"} cursor-pointer`}>{name}</div>
+export const BillBadge:FC<BillBadgeProps> = ({ locationId, bill: { _id: billId, name, paid }}) =>
+<Link href={`/bills/${locationId}-${billId}/edit`} className={`badge badge-lg ${paid} ${paid?"badge-success":" badge-outline"} cursor-pointer`}>
+    {name}
+</Link>;

app/ui/BillEditForm.tsx

@@ -1,22 +1,26 @@
 import { Cog8ToothIcon, DocumentIcon, TrashIcon } from "@heroicons/react/24/outline";
 import { Bill } from "../lib/db-types";
 import { FC } from "react";
+import { ObjectId } from "mongodb";
 
 export interface BillEditFormProps {
+    invoiceID: string,
     bill: Bill
 }
 
-export const BillEditForm:FC<BillEditFormProps> = ({ bill: { name, description, paid } }) =>
+export const BillEditForm:FC<BillEditFormProps> = ({ bill: { name, paid } }) =>
     <div className="card card-compact card-bordered max-w-sm bg-base-100 shadow-s my-1">
     <div className="card-body">
     <form>
         <TrashIcon className="h-[1em] w-[1em] absolute cursor-pointer text-error bottom-5 right-4 text-2xl" />
-        <input type="text" placeholder="Naziv računa" className="input input-bordered w-full" value="GSKG" />
-        <textarea className="textarea textarea-bordered my-1 w-full max-w-sm block" placeholder="Opis" value="Pričuva, Voda, Smeće"></textarea>
-        <a href="#document.pdf" className='text-center block max-w-[24em] text-nowrap truncate inline-block'>
-        <DocumentIcon className="h-[1em] w-[1em] text-2xl inline-block mr-1" />
-        2023-22-12 document GSKG račun za 2023.pdf
-        </a>
+        <input type="text" placeholder="Naziv računa" className="input input-bordered w-full" defaultValue={name} />
+        {
+            // <textarea className="textarea textarea-bordered my-1 w-full max-w-sm block" placeholder="Opis" value="Pričuva, Voda, Smeće"></textarea>
+            // <a href="#document.pdf" className='text-center block max-w-[24em] text-nowrap truncate inline-block'>
+            // <DocumentIcon className="h-[1em] w-[1em] text-2xl inline-block mr-1" />
+            // 2023-22-12 document GSKG račun za 2023.pdf
+            // </a>
+        }
         <input type="file" className="file-input file-input-bordered w-full max-w-sm file-input-xs my-2" />
         <div className="form-control w-32 p-1">
         <label className="cursor-pointer label p-0">

app/ui/LocationCard.tsx

@@ -10,14 +10,14 @@ export interface LocationCardProps {
     location: Location
 }
 
-export const LocationCard:FC<LocationCardProps> = ({location: { name, yearMonth, bills }}) => 
+export const LocationCard:FC<LocationCardProps> = ({location: { _id, name, yearMonth, bills }}) => 
 <div className="card card-compact card-bordered max-w-[36em] bg-base-100 shadow-s my-1">
     <div className="card-body">
     <Cog8ToothIcon className="h-[1em] w-[1em] absolute cursor-pointer top-3 right-3 text-2xl" />
     <h2 className="card-title">{formatYearMonth(yearMonth)} {name}</h2>
     <div className="card-actions">
         {
-            bills.map(bill => <BillBadge key={`${bill.id}`} bill={bill} />)
+            bills.map(bill => <BillBadge key={`${bill._id}`} locationId={_id} bill={bill} />)
         }
         <div className="tooltip" data-tip="Dodaj novi tip računa">
             <PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-2xl" />