implemented bill deletion + var rename

app/ui/BillBadge.tsx

@@ -1,10 +1,9 @@
 import { FC } from "react"
-import { Bill, Location } from "@/app/lib/db-types"
+import { Bill } from "@/app/lib/db-types"
 import Link from "next/link"
-import { ObjectId } from "mongodb";
 
 export interface BillBadgeProps {
-    locationId: ObjectId,
+    locationId: string,
     bill: Bill
 };
 

app/ui/BillEditForm.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { DocumentIcon, TrashIcon } from "@heroicons/react/24/outline";
-import { PlainBill } from "../lib/db-types";
+import { Bill } from "../lib/db-types";
 import { FC } from "react";
 import { useFormState } from "react-dom";
 import { gotoHome, updateBill } from "../lib/actions";
@@ -20,14 +20,14 @@ const updateBill2 = (locationId: string, billId:string, prevState:any, formData:
 }
 
 export interface BillEditFormProps {
-    invoiceID: string,
-    bill: PlainBill
+    locationID: string,
+    bill: Bill
 }
 
-export const BillEditForm:FC<BillEditFormProps> = ({ invoiceID, bill: { id, name, paid, attachment, notes } }) => {
+export const BillEditForm:FC<BillEditFormProps> = ({ locationID, bill: { id, name, paid, attachment, notes } }) => {
 
     const initialState = { message: null, errors: {} };
-    const updateBillWithId = updateBill2.bind(null, invoiceID, id);
+    const updateBillWithId = updateBill2.bind(null, locationID, id);
     const [ state, dispatch ] = useFormState(updateBillWithId, initialState);
 
     // redirect to the main page
@@ -40,7 +40,9 @@ export const BillEditForm:FC<BillEditFormProps> = ({ invoiceID, bill: { id, name
     <div className="card card-compact card-bordered max-w-sm bg-base-100 shadow-s my-1">
         <div className="card-body">
             <form action={ dispatch }>
-                <TrashIcon className="h-[1em] w-[1em] absolute cursor-pointer text-error bottom-5 right-4 text-2xl" />
+                <a href={`/bills/${locationID}-${id}/delete/`}>
+                    <TrashIcon className="h-[1em] w-[1em] absolute cursor-pointer text-error bottom-5 right-4 text-2xl" />
+                </a>
 
                 <input id="billName" name="billName" type="text" placeholder="Bill name" className="input input-bordered w-full" defaultValue={name} required />
                 <div id="status-error" aria-live="polite" aria-atomic="true">
@@ -55,7 +57,7 @@ export const BillEditForm:FC<BillEditFormProps> = ({ invoiceID, bill: { id, name
                     // <textarea className="textarea textarea-bordered my-1 w-full max-w-sm block" placeholder="Opis" value="Pričuva, Voda, Smeće"></textarea>
 
                     attachment ? 
-                    <a href={`/attachment/${invoiceID}-${id}/${attachment.fileName}`} target="_blank" className='text-center block max-w-[24em] text-nowrap truncate inline-block mt-4'>
+                    <a href={`/attachment/${locationID}-${id}/${attachment.fileName}`} target="_blank" className='text-center block max-w-[24em] text-nowrap truncate inline-block mt-4'>
                         <DocumentIcon className="h-[1em] w-[1em] text-2xl inline-block mr-1" />
                         {decodeURIComponent(attachment.fileName)}
                     </a>

app/ui/NotFoundPage.tsx

@@ -0,0 +1,18 @@
+import Link from 'next/link';
+import { FaceFrownIcon } from "@heroicons/react/24/outline";
+import { FC } from 'react';
+
+export interface NotFoundPageProps {
+    title?:string,
+    description?:string,
+}
+
+export const NotFoundPage:FC<NotFoundPageProps> = ({ title="404 Not Found", description="Could not find the requested content." }) =>
+    <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">{title}</h2>
+        <p>{description}</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>