57dcebd640
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>
59 lines
2.0 KiB
TypeScript
59 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { FC, useEffect, useRef } from "react";
|
|
import { formatYearMonth } from "../lib/format";
|
|
import { YearMonth } from "../lib/db-types";
|
|
import { formatCurrency } from "../lib/formatStrings";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
export interface MonthCardProps {
|
|
yearMonth: YearMonth,
|
|
children?: React.ReactNode,
|
|
unpaidTotal: number,
|
|
payedTotal: number,
|
|
currency?: string | null,
|
|
expanded?:boolean,
|
|
onToggle: (yearMonth:YearMonth) => void
|
|
}
|
|
|
|
export const MonthCard:FC<MonthCardProps> = ({ yearMonth, children, unpaidTotal, payedTotal, currency, expanded, onToggle }) => {
|
|
|
|
const elRef = useRef<HTMLDivElement>(null);
|
|
const t = useTranslations("home-page.month-card");
|
|
|
|
// Setting the `month` will activate the accordion belonging to that month
|
|
// If the accordion is already active, it will collapse it
|
|
const handleChange = (event:any) => onToggle(yearMonth);
|
|
|
|
useEffect(() => {
|
|
if(expanded && elRef.current) {
|
|
// if the element i selected > scroll it into view
|
|
elRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
}
|
|
}, [expanded]);
|
|
|
|
return(
|
|
<div className={`collapse collapse-plus bg-base-200 my-1 sm:min-w-[25em] ${expanded ? "border-2 border-neutral" : ""}`} ref={elRef}>
|
|
<input type="checkbox" name="my-accordion-3" checked={expanded} onChange={handleChange} />
|
|
<div className={`collapse-title text-xl font-medium ${expanded ? "text-white" : ""}`}>
|
|
{`${formatYearMonth(yearMonth)}`}
|
|
{
|
|
unpaidTotal>0 ?
|
|
<p className="text-xs font-medium">
|
|
{t("total-due-label")} <strong>{ formatCurrency(unpaidTotal, currency ?? "EUR") }</strong>
|
|
</p> : null
|
|
}
|
|
{
|
|
payedTotal>0 ?
|
|
<p className="text-xs font-medium">
|
|
{t("total-payed-label")} <strong>{ formatCurrency(payedTotal, currency ?? "EUR") }</strong>
|
|
</p> : null
|
|
}
|
|
</div>
|
|
<div className="collapse-content">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
)
|
|
};
|