implementiran share by link

app/ui/LocationCard.tsx

@@ -7,7 +7,7 @@ import { BillingLocation } from "../lib/db-types";
 import { formatYearMonth } from "../lib/format";
 import { formatCurrency } from "../lib/formatStrings";
 import Link from "next/link";
-import { useTranslations } from "next-intl";
+import { useLocale, useTranslations } from "next-intl";
 import { toast, useToast } from "react-toastify";
 
 export interface LocationCardProps {
@@ -17,13 +17,14 @@ export interface LocationCardProps {
 export const LocationCard:FC<LocationCardProps> = ({location: { _id, name, yearMonth, bills }}) => {
 
     const t = useTranslations("home-page.location-card");
+    const currentLocale = useLocale();
 
     // sum all the billAmounts
     const monthlyExpense = bills.reduce((acc, bill) => bill.paid ? acc + (bill.payedAmount ?? 0) : acc, 0);
 
     const handleCopyLinkClick = () => {
         // copy URL to clipboard
-        const url = `${window.location.origin}/share/location/${_id}`;
+        const url = `${window.location.origin}/${currentLocale}/share/location/${_id}`;
         navigator.clipboard.writeText(url);
 
         // use NextJS toast to notiy user that the link was copied

app/ui/ViewBillBadge.tsx

@@ -0,0 +1,21 @@
+import { FC } from "react"
+import { Bill } from "@/app/lib/db-types"
+import Link from "next/link"
+import { DocumentIcon, TicketIcon } from "@heroicons/react/24/outline";
+import { useLocale } from "next-intl";
+
+export interface ViewBillBadgeProps {
+    locationId: string,
+    bill: Bill
+};
+
+export const ViewBillBadge: FC<ViewBillBadgeProps> = ({ locationId, bill: { _id: billId, name, paid, attachment } }) => {
+
+    const currentLocale = useLocale();
+
+    return (
+        <Link href={`/${currentLocale}//share/bill/${locationId}-${billId}`} className={`badge badge-lg ${paid ? "badge-success" : " badge-outline"} ${!paid && !!attachment ? "btn-outline btn-success" : ""}  cursor-pointer`}>
+            <TicketIcon className="h-[1em] w-[1em]  inline-block mr-1" /> {name}
+        </Link>
+    );
+}

app/ui/ViewBillCard.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { DocumentIcon, CheckCircleIcon, XCircleIcon } from "@heroicons/react/24/outline";
+import { Bill, BillingLocation } from "../lib/db-types";
+import React, { FC } from "react";
+import { updateOrAddBill } from "../lib/actions/billActions";
+import Link from "next/link";
+import { formatYearMonth } from "../lib/format";
+import { useLocale, useTranslations } from "next-intl";
+
+// Next.js does not encode an utf-8 file name correctly when sending a form with a file attachment
+// This is a workaround for that
+const updateOrAddBillMiddleware = (locationId: string, billId:string|undefined, billYear:number|undefined, billMonth:number|undefined, prevState:any, formData: FormData) => {
+    // URL encode the file name of the attachment so it is correctly sent to the server
+    const billAttachment = formData.get('billAttachment') as File;
+    formData.set('billAttachment', billAttachment, encodeURIComponent(billAttachment.name));
+    return updateOrAddBill(locationId, billId, billYear, billMonth, prevState, formData);
+}
+
+export interface ViewBillCardProps {
+    location: BillingLocation,
+    bill?: Bill,
+}
+
+export const ViewBillCard:FC<ViewBillCardProps> = ({ location, bill }) => {
+
+    const t = useTranslations("bill-edit-form");
+    const locale = useLocale();
+
+    const { _id: billID, name, paid, attachment, notes, payedAmount, barcodeImage } = bill ?? { _id:undefined, name:"", paid:false, notes:"" };
+
+    const { yearMonth:{year: billYear, month: billMonth}, _id: locationID } = location;
+
+
+    return(
+    <div className="card card-compact card-bordered bg-base-100 shadow-s">
+        <div className="card-body">
+            <h2 className="card-title">{`${formatYearMonth(location.yearMonth)} ${location.name}`}</h2>
+            <span className="textarea textarea-bordered max-w-[400px] w-full grow">
+                <h3 className="text-xl dark:text-neutral-300">{name}</h3>
+            </span>
+            <p className={`flex textarea textarea-bordered max-w-[400px] w-full block ${paid ? "bg-green-950" : "bg-red-950"}`}>
+                <span className="font-bold uppercase">{t("paid-checkbox")}</span>
+                <span className="text-right inline-block grow">{paid ? <CheckCircleIcon className="h-[1em] w-[1em] ml-[.5em] text-2xl inline-block text-green-500"/> : <XCircleIcon className="h-[1em] w-[1em] text-2xl inline-block text-red-500" />}</span>
+            </p>
+
+            <p className="flex textarea textarea-bordered max-w-[400px] w-full block">
+                <span className="font-bold uppercase">{t("payed-amount")}</span>
+                <span className="text-right inline-block grow">{payedAmount ? payedAmount/100 : ""}</span>
+            </p>
+            <input type="hidden" name="barcodeImage" value={barcodeImage} />
+            {
+                notes ?
+                        <span className="textarea textarea-bordered max-w-[400px] w-full grow">
+                            <p className="font-bold uppercase">{t("notes-placeholder")}</p>
+                            <p className="leading-[1.4em]">
+                                {notes}
+                            </p>
+                        </span>
+                    : null
+            }
+            {
+                attachment ?
+                <span className="textarea textarea-bordered max-w-[400px] w-full grow">
+                    <p className="font-bold uppercase">{t("attachment")}</p>
+                    <Link href={`/attachment/${locationID}-${billID}/`} target="_blank" className='text-center w-full max-w-[20em] text-nowrap truncate inline-block mt-2'>
+                        <DocumentIcon className="h-[1em] w-[1em] text-2xl inline-block mr-1" />
+                            {decodeURIComponent(attachment.fileName)}
+                    </Link>
+                </span>
+                : null
+            }
+            {
+                barcodeImage ?
+                <div className="p-1">
+                    <label className="label p-2 grow bg-white">
+                        <img src={barcodeImage} className="grow sm:max-w-[350px]" alt="2D Barcode" />
+                    </label>
+                    <p className="text-xs my-1">{t.rich('barcode-disclaimer', { br: () => <br /> })}</p>
+                </div> : null
+            }
+
+            <div className="text-right">
+                <Link className="btn btn-neutral ml-3" href={`/share/location/${locationID}`}>{t("back-button")}</Link>
+            </div>
+
+        </div>
+    </div>);
+}

app/ui/ViewLocationCard.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { FC } from "react";
+import { BillingLocation } from "../lib/db-types";
+import { formatYearMonth } from "../lib/format";
+import { formatCurrency } from "../lib/formatStrings";
+import { useTranslations } from "next-intl";
+import { ViewBillBadge } from "./ViewBillBadge";
+
+export interface ViewLocationCardProps {
+    location: BillingLocation
+}
+
+export const ViewLocationCard:FC<ViewLocationCardProps> = ({location: { _id, name, yearMonth, bills }}) => {
+
+    const t = useTranslations("home-page.location-card");
+
+    // sum all the billAmounts
+    const monthlyExpense = bills.reduce((acc, bill) => bill.paid ? acc + (bill.payedAmount ?? 0) : acc, 0);
+
+    return(
+        <div data-key={_id } className="card card-compact card-bordered max-w-[30em] min-w-[350px] bg-base-100 border-1 border-neutral my-1">
+            <div className="card-body">
+                <h2 className="card-title mr-[2em] text-[1rem]">{formatYearMonth(yearMonth)} {name}</h2>
+                <div className="card-actions mt-[1em] mb-[1em]">
+                    {
+                        bills.map(bill => <ViewBillBadge key={`${_id}-${bill._id}`} locationId={_id} bill={bill} />)
+                    }
+                </div>
+                {
+                    monthlyExpense > 0 ?
+                    <p>
+                        { t("payed-total-label") } <strong>${formatCurrency(monthlyExpense)}</strong>
+                    </p>
+                    : null
+                }
+            </div>
+        </div>);
+};