87 lines
4.2 KiB
TypeScript
87 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
import { DocumentIcon, CheckCircleIcon, XCircleIcon } from "@heroicons/react/24/outline";
|
|
import { Bill, BillingLocation } from "../lib/db-types";
|
|
import { FC } from "react";
|
|
import Link from "next/link";
|
|
import { formatYearMonth } from "../lib/format";
|
|
import { useTranslations } from "next-intl";
|
|
import { Pdf417Barcode } from "./Pdf417Barcode";
|
|
|
|
export interface ViewBillCardProps {
|
|
location: BillingLocation,
|
|
bill?: Bill,
|
|
}
|
|
|
|
export const ViewBillCard:FC<ViewBillCardProps> = ({ location, bill }) => {
|
|
|
|
const t = useTranslations("bill-edit-form");
|
|
|
|
const { _id: billID, name, paid, attachment, notes, payedAmount, barcodeImage, hub3aText } = bill ?? { _id:undefined, name:"", paid:false, notes:"" };
|
|
const { _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>
|
|
{
|
|
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={`/share/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
|
|
}
|
|
{
|
|
hub3aText ?
|
|
<div className="form-control p-1">
|
|
<label className="label p-2 grow bg-white border border-gray-300 rounded-box justify-center">
|
|
<Pdf417Barcode hub3aText={hub3aText} />
|
|
</label>
|
|
<p className="text-xs my-1">{t.rich('barcode-disclaimer', { br: () => <br /> })}</p>
|
|
</div> :
|
|
(
|
|
// LEGACY SUPPORT ... untill all bills have been migrated
|
|
barcodeImage ?
|
|
<div className="p-1">
|
|
<label className="label p-2 grow bg-white border border-gray-300 rounded-box justify-center">
|
|
<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>);
|
|
} |