implementiran share by link

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>);
+};