98 lines
4.9 KiB
TypeScript
98 lines
4.9 KiB
TypeScript
'use client';
|
|
|
|
import { CheckCircleIcon, Cog8ToothIcon, PlusCircleIcon, ShareIcon, BanknotesIcon, DocumentIcon, EnvelopeIcon, LinkIcon, EyeIcon } from "@heroicons/react/24/outline";
|
|
import { FC } from "react";
|
|
import { BillBadge } from "./BillBadge";
|
|
import { BillingLocation } from "../lib/db-types";
|
|
import { formatYearMonth } from "../lib/format";
|
|
import { formatCurrency } from "../lib/formatStrings";
|
|
import Link from "next/link";
|
|
import { useLocale, useTranslations } from "next-intl";
|
|
import { toast } from "react-toastify";
|
|
|
|
export interface LocationCardProps {
|
|
location: BillingLocation;
|
|
currency?: string | null;
|
|
}
|
|
|
|
export const LocationCard: FC<LocationCardProps> = ({ location, currency }) => {
|
|
const {
|
|
_id,
|
|
name,
|
|
yearMonth,
|
|
bills,
|
|
seenByTenant,
|
|
// NOTE: only the fileName is projected from the DB to reduce data transfer
|
|
utilBillsProofOfPaymentAttachment
|
|
} = location;
|
|
|
|
const t = useTranslations("home-page.location-card");
|
|
const currentLocale = useLocale();
|
|
|
|
// sum all the paid bill amounts (regardless of who pays)
|
|
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}/${currentLocale}/share/location/${_id}`;
|
|
navigator.clipboard.writeText(url);
|
|
|
|
// use NextJS toast to notiy user that the link was copied
|
|
toast.success(t("link-copy-message"), { theme: "dark" });
|
|
}
|
|
|
|
return (
|
|
<div data-key={_id} className="card card-compact card-bordered max-w-[30em] bg-base-100 border-1 border-neutral my-1">
|
|
<div className="card-body">
|
|
<Link href={`/location/${_id}/edit`} className="card-subtitle tooltip" data-tip={t("edit-card-tooltip")}>
|
|
<Cog8ToothIcon className="h-[1em] w-[1em] absolute cursor-pointer top-3 right-3 text-2xl" />
|
|
</Link>
|
|
<h2 className="card-title mr-[2em] text-[1rem]">{formatYearMonth(yearMonth)} {name}</h2>
|
|
<div className="card-actions">
|
|
{
|
|
bills.map(bill => <BillBadge key={`${_id}-${bill._id}`} locationId={_id} bill={bill} />)
|
|
}
|
|
<Link href={`/bill/${_id}/add`} className="tooltip" data-tip={t("add-bill-button-tooltip")}>
|
|
<PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-2xl inline-block" /><span className="text-xs ml-[0.2rem] mr-[3rem]">{t("add-bill-button-tooltip")}</span>
|
|
</Link>
|
|
</div>
|
|
|
|
|
|
{monthlyExpense > 0 || seenByTenant || utilBillsProofOfPaymentAttachment ?
|
|
|
|
<fieldset className="card card-compact card-bordered border-1 border-neutral p-3 mt-2 mr-[3.5rem]">
|
|
<legend className="fieldset-legend px-2 text-sm font-semibold uppercase">{t("monthly-statement-legend")}</legend>
|
|
{
|
|
monthlyExpense > 0 ?
|
|
<div className="flex items-center gap-2 ml-4">
|
|
<BanknotesIcon className="h-5 w-5" />
|
|
{t("payed-total-label")} <strong>{formatCurrency(monthlyExpense, currency ?? "EUR")}</strong>
|
|
<CheckCircleIcon className="h-5 w-5 text-success" />
|
|
</div>
|
|
: null
|
|
}
|
|
{seenByTenant && (
|
|
<div className="flex items-center gap-2 mt-2 ml-4">
|
|
<EyeIcon className="h-5 w-5" />
|
|
<span className="text-sm">{t("seen-by-tenant-label")}</span>
|
|
<CheckCircleIcon className="h-5 w-5 text-success" />
|
|
</div>
|
|
)}
|
|
{utilBillsProofOfPaymentAttachment && (
|
|
<Link
|
|
href={`/share/proof-of-payment/${_id}/`}
|
|
target="_blank"
|
|
className="flex items-center gap-2 mt-2 ml-4"
|
|
>
|
|
<LinkIcon className="h-5 w-5" />
|
|
<span className="text-sm">{t("download-proof-of-payment-label")}</span>
|
|
<CheckCircleIcon className="h-5 w-5 text-success" />
|
|
</Link>
|
|
)}
|
|
</fieldset> : null
|
|
}
|
|
|
|
<ShareIcon className="h-[1em] w-[1em] cursor-pointer text-2xl inline-block hover:text-red-500" title="create sharable link" style={{ position: "absolute", bottom: ".6em", right: "1.2em" }} onClick={handleCopyLinkClick} />
|
|
</div>
|
|
</div>);
|
|
}; |