refactor: convert repository to monorepo with npm workspaces
Restructured the repository into a monorepo to better organize application code and maintenance scripts. ## Workspace Structure - web-app: Next.js application (all app code moved from root) - housekeeping: Database backup and maintenance scripts ## Key Changes - Moved all application code to web-app/ using git mv - Moved database scripts to housekeeping/ workspace - Updated Dockerfile for monorepo build process - Updated docker-compose files (volume paths: ./web-app/etc/hosts/) - Updated .gitignore for workspace-level node_modules - Updated documentation (README.md, CLAUDE.md, CHANGELOG.md) ## Migration Impact - Root package.json now manages workspaces - Build commands delegate to web-app workspace - All file history preserved via git mv - Docker build process updated for workspace structure 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Knee Cola
127
web-app/app/ui/LocationCard.tsx
Normal file
127
web-app/app/ui/LocationCard.tsx
Normal file
@@ -0,0 +1,127 @@
|
||||
'use client';
|
||||
|
||||
import { CheckCircleIcon, Cog8ToothIcon, PlusCircleIcon, ShareIcon, BanknotesIcon, EyeIcon, TicketIcon, ShoppingCartIcon } 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";
|
||||
import { generateShareLink } from "../lib/actions/locationActions";
|
||||
|
||||
export interface LocationCardProps {
|
||||
location: BillingLocation;
|
||||
currency?: string | null;
|
||||
}
|
||||
|
||||
export const LocationCard: FC<LocationCardProps> = ({ location, currency }) => {
|
||||
const {
|
||||
_id,
|
||||
name,
|
||||
yearMonth,
|
||||
bills,
|
||||
seenByTenantAt,
|
||||
// NOTE: only the fileName is projected from the DB to reduce data transfer
|
||||
utilBillsProofOfPayment,
|
||||
} = location;
|
||||
|
||||
const t = useTranslations("home-page.location-card");
|
||||
const currentLocale = useLocale();
|
||||
|
||||
// sum all the unpaid and paid bill amounts (regardless of who pays)
|
||||
const totalUnpaid = bills.reduce((acc, bill) => !bill.paid ? acc + (bill.payedAmount ?? 0) : acc, 0);
|
||||
const totalPayed = bills.reduce((acc, bill) => bill.paid ? acc + (bill.payedAmount ?? 0) : acc, 0);
|
||||
|
||||
const handleCopyLinkClick = async () => {
|
||||
// copy URL to clipboard
|
||||
const shareLink = await generateShareLink(_id);
|
||||
|
||||
if(shareLink.error) {
|
||||
toast.error(shareLink.error, { theme: "dark" });
|
||||
} else {
|
||||
navigator.clipboard.writeText(shareLink.shareUrl as string);
|
||||
toast.success(t("link-copy-message"), { theme: "dark" });
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
<div data-key={_id} className="card card-compact card-bordered sm:max-w-[35em] bg-base-100 border-1 border-neutral my-1">
|
||||
<div className="card-body">
|
||||
<Link href={`/home/location/${_id}/edit`} className="card-subtitle tooltip" data-tip={t("edit-card-tooltip")}>
|
||||
<Cog8ToothIcon className="h-[1em] w-[1em] absolute cursor-pointer top-[-.2rem] right-0 text-2xl" />
|
||||
</Link>
|
||||
<h2 className="card-title mr-[2em] mt-[-1em] text-[1rem]">{formatYearMonth(yearMonth)} {name}</h2>
|
||||
{
|
||||
bills.length > 0 ? (
|
||||
<div className="card-actions mb-1">
|
||||
{
|
||||
bills.map(bill => <BillBadge key={`${_id}-${bill._id}`} locationId={_id} bill={bill} />)
|
||||
}
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
<div className="flex justify-between items-center mb-0">
|
||||
<Link href={`/home/bill/${_id}/add`} className="tooltip" data-tip={t("add-bill-button-tooltip")}>
|
||||
<PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-2xl inline" /><span className="text-xs ml-[0.2rem]">{t("add-bill-button-tooltip")}</span>
|
||||
</Link>
|
||||
<ShareIcon className="h-[1em] w-[1em] cursor-pointer text-2xl inline hover:text-red-500" title="create sharable link" onClick={handleCopyLinkClick} />
|
||||
</div>
|
||||
{ totalUnpaid > 0 || totalPayed > 0 || seenByTenantAt || utilBillsProofOfPayment?.uploadedAt ?
|
||||
<>
|
||||
<div className="flex ml-1">
|
||||
<div className="divider divider-horizontal p-0 m-0"></div>
|
||||
<div className="card rounded-box grid grow place-items-left place-items-top p-0">
|
||||
{
|
||||
totalUnpaid > 0 ?
|
||||
<div className="flex ml-1">
|
||||
<span className="w-5 min-w-5 mr-2"><ShoppingCartIcon className="mt-[.1rem]" /></span>
|
||||
<span>
|
||||
{t("total-due-label")} <strong>{formatCurrency(totalUnpaid, currency ?? "EUR")}</strong>
|
||||
</span>
|
||||
</div>
|
||||
: null
|
||||
}
|
||||
{
|
||||
totalPayed > 0 ?
|
||||
<div className="flex ml-1">
|
||||
<span className="w-5 min-w-5 mr-2"><BanknotesIcon className="mt-[.1rem]" /></span>
|
||||
<span>
|
||||
{t("total-payed-label")} <strong>{formatCurrency(totalPayed, currency ?? "EUR")}</strong>
|
||||
<CheckCircleIcon className="h-5 w-5 ml-1 mt-[-.2rem] text-success inline-block" />
|
||||
</span>
|
||||
</div>
|
||||
: null
|
||||
}
|
||||
{seenByTenantAt && (
|
||||
<div className="flex mt-1 ml-1">
|
||||
<span className="w-5 mr-2 min-w-5"><EyeIcon className="mt-[.1rem]" /></span>
|
||||
<span>
|
||||
<span>{t("seen-by-tenant-label")} at {seenByTenantAt.toLocaleString()}</span>
|
||||
<CheckCircleIcon className="h-5 w-5 ml-1 mt-[-.2rem] text-success inline-block" />
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{utilBillsProofOfPayment?.uploadedAt && (
|
||||
<Link
|
||||
href={`/share/proof-of-payment/${_id}/`}
|
||||
target="_blank"
|
||||
className="flex mt-1 ml-1">
|
||||
<span className="w-5 min-w-5 mr-2"><TicketIcon className="mt-[.1rem]" /></span>
|
||||
<span>
|
||||
<span className="underline">{t("download-proof-of-payment-label")}</span>
|
||||
<CheckCircleIcon className="h-5 w-5 ml-2 mt-[-.2rem] text-success inline-block" />
|
||||
</span>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</> : null
|
||||
}
|
||||
|
||||
</div>
|
||||
</div>);
|
||||
};
|
||||
Reference in New Issue
Block a user