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:
20
web-app/app/[locale]/home/account/LogoutButton.tsx
Normal file
20
web-app/app/[locale]/home/account/LogoutButton.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
"use client";
|
||||
|
||||
import { FC } from 'react';
|
||||
import LogoutIcon from "@mui/icons-material/Logout";
|
||||
import { signOut } from 'next-auth/react';
|
||||
import { useLocale, useTranslations } from 'next-intl';
|
||||
import { Button } from '@/app/ui/button';
|
||||
|
||||
export const LogoutButton: FC = () => {
|
||||
const t = useTranslations('account-page');
|
||||
const locale = useLocale();
|
||||
|
||||
const handleLogout = () => {
|
||||
signOut({ callbackUrl: `/${locale}/` });
|
||||
};
|
||||
|
||||
return (
|
||||
<button className='btn btn-neutral' onClick={handleLogout}><LogoutIcon className='text-red-400' /> {t('logout-button-label')}</button>
|
||||
)
|
||||
}
|
||||
30
web-app/app/[locale]/home/account/page.tsx
Normal file
30
web-app/app/[locale]/home/account/page.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import { FC } from 'react';
|
||||
import { Main } from '@/app/ui/Main';
|
||||
import Link from 'next/link';
|
||||
import SettingsIcon from "@mui/icons-material/Settings";
|
||||
import HomeIcon from "@mui/icons-material/Home";
|
||||
import AccountCircle from "@mui/icons-material/AccountCircle";
|
||||
import { getTranslations, getLocale } from 'next-intl/server';
|
||||
import { LogoutButton } from './LogoutButton';
|
||||
|
||||
const Page: FC = async () => {
|
||||
const t = await getTranslations('account-page');
|
||||
const locale = await getLocale();
|
||||
|
||||
return (
|
||||
<Main>
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
|
||||
<div className="card-body">
|
||||
<h2 className="card-title"><AccountCircle /> {t('title')}</h2>
|
||||
<Link href={`/${locale}/home`} className='btn btn-neutral'><HomeIcon className='text-white'/> {t('goto-home-button-label')}</Link>
|
||||
<Link href={`/${locale}/home/account/settings`} className='btn btn-neutral'><SettingsIcon className='text-blue-400' /> {t('goto-settings-button-label')}</Link>
|
||||
<LogoutButton />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Main>
|
||||
);
|
||||
};
|
||||
|
||||
export default Page;
|
||||
33
web-app/app/[locale]/home/account/settings/page.tsx
Normal file
33
web-app/app/[locale]/home/account/settings/page.tsx
Normal file
@@ -0,0 +1,33 @@
|
||||
import { FC, Suspense } from 'react';
|
||||
import { Main } from '@/app/ui/Main';
|
||||
import { UserSettingsForm as UserSettingsForm, UserSettingsFormSkeleton } from '@/app/ui/UserSettingsForm';
|
||||
import { getUserSettings } from '@/app/lib/actions/userSettingsActions';
|
||||
|
||||
const UserSettingsPage: FC = async () => {
|
||||
const userSettings = await getUserSettings();
|
||||
|
||||
return (
|
||||
<Main>
|
||||
<div className="flex flex-col items-center">
|
||||
<UserSettingsForm userSettings={userSettings} />
|
||||
</div>
|
||||
</Main>
|
||||
);
|
||||
};
|
||||
|
||||
const Page: FC = () => {
|
||||
return (
|
||||
<Suspense fallback={
|
||||
<Main>
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="h-8 w-48 skeleton mb-4"></div>
|
||||
<UserSettingsFormSkeleton />
|
||||
</div>
|
||||
</Main>
|
||||
}>
|
||||
<UserSettingsPage />
|
||||
</Suspense>
|
||||
);
|
||||
};
|
||||
|
||||
export default Page;
|
||||
6
web-app/app/[locale]/home/bill/[id]/add/not-found.tsx
Normal file
6
web-app/app/[locale]/home/bill/[id]/add/not-found.tsx
Normal file
@@ -0,0 +1,6 @@
|
||||
import { NotFoundPage } from '@/app/ui/NotFoundPage';
|
||||
|
||||
const BillNotFound = () =>
|
||||
<NotFoundPage title="404 Bill Not Found" description="Could not find the requested Bill." />;
|
||||
|
||||
export default BillNotFound;
|
||||
19
web-app/app/[locale]/home/bill/[id]/add/page.tsx
Normal file
19
web-app/app/[locale]/home/bill/[id]/add/page.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import { fetchLocationById } from '@/app/lib/actions/locationActions';
|
||||
import { BillEditForm } from '@/app/ui/BillEditForm';
|
||||
import { Main } from '@/app/ui/Main';
|
||||
import { notFound } from 'next/navigation';
|
||||
|
||||
export default async function Page({ params:{ id:locationID } }: { params: { id:string } }) {
|
||||
|
||||
const location = await fetchLocationById(locationID);
|
||||
|
||||
if (!location) {
|
||||
return(notFound());
|
||||
}
|
||||
|
||||
return (
|
||||
<Main>
|
||||
<BillEditForm location={location} />
|
||||
</Main>
|
||||
);
|
||||
}
|
||||
6
web-app/app/[locale]/home/bill/[id]/delete/not-found.tsx
Normal file
6
web-app/app/[locale]/home/bill/[id]/delete/not-found.tsx
Normal file
@@ -0,0 +1,6 @@
|
||||
import { NotFoundPage } from '@/app/ui/NotFoundPage';
|
||||
|
||||
const BillNotFound = () =>
|
||||
<NotFoundPage title="404 Bill Not Found" description="Could not find the requested Bill." />;
|
||||
|
||||
export default BillNotFound;
|
||||
20
web-app/app/[locale]/home/bill/[id]/delete/page.tsx
Normal file
20
web-app/app/[locale]/home/bill/[id]/delete/page.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import { notFound } from 'next/navigation';
|
||||
import { BillDeleteForm } from '@/app/ui/BillDeleteForm';
|
||||
import { fetchBillById } from '@/app/lib/actions/billActions';
|
||||
import { Main } from '@/app/ui/Main';
|
||||
|
||||
export default async function Page({ params:{ id } }: { params: { id:string } }) {
|
||||
const [locationID, billID] = id.split('-');
|
||||
|
||||
const [location, bill] = await fetchBillById(locationID, billID) ?? [];
|
||||
|
||||
if (!location || !bill) {
|
||||
return(notFound());
|
||||
}
|
||||
|
||||
return (
|
||||
<Main>
|
||||
<BillDeleteForm location={location} bill={bill} />
|
||||
</Main>
|
||||
);
|
||||
}
|
||||
6
web-app/app/[locale]/home/bill/[id]/edit/not-found.tsx
Normal file
6
web-app/app/[locale]/home/bill/[id]/edit/not-found.tsx
Normal file
@@ -0,0 +1,6 @@
|
||||
import { NotFoundPage } from '@/app/ui/NotFoundPage';
|
||||
|
||||
const BillNotFound = () =>
|
||||
<NotFoundPage title="404 Bill Not Found" description="Could not find the requested Bill." />;
|
||||
|
||||
export default BillNotFound;
|
||||
20
web-app/app/[locale]/home/bill/[id]/edit/page.tsx
Normal file
20
web-app/app/[locale]/home/bill/[id]/edit/page.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import { fetchBillById } from '@/app/lib/actions/billActions';
|
||||
import { BillEditForm } from '@/app/ui/BillEditForm';
|
||||
import { Main } from '@/app/ui/Main';
|
||||
import { notFound } from 'next/navigation';
|
||||
|
||||
export default async function Page({ params:{ id } }: { params: { id:string } }) {
|
||||
|
||||
const [locationID, billID] = id.split('-');
|
||||
|
||||
const [location, bill] = await fetchBillById(locationID, billID) ?? [];
|
||||
|
||||
if (!bill || !location) {
|
||||
return(notFound());
|
||||
}
|
||||
return (
|
||||
<Main>
|
||||
<BillEditForm location={location} bill={bill} />
|
||||
</Main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import { LocationEditForm } from '@/app/ui/LocationEditForm';
|
||||
import { YearMonth } from '@/app/lib/db-types';
|
||||
import { getUserSettings } from '@/app/lib/actions/userSettingsActions';
|
||||
|
||||
export default async function LocationAddPage({ yearMonth }: { yearMonth:YearMonth }) {
|
||||
const userSettings = await getUserSettings();
|
||||
return (<LocationEditForm yearMonth={yearMonth} userSettings={userSettings} />);
|
||||
}
|
||||
11
web-app/app/[locale]/home/location/[id]/add/page.tsx
Normal file
11
web-app/app/[locale]/home/location/[id]/add/page.tsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import { parseYearMonth } from '@/app/lib/format';
|
||||
import LocationAddPage from './LocationAddPage';
|
||||
import { Main } from '@/app/ui/Main';
|
||||
|
||||
export default async function Page({ params:{ id } }: { params: { id:string } }) {
|
||||
return (
|
||||
<Main>
|
||||
<LocationAddPage yearMonth={ parseYearMonth(id) } />
|
||||
</Main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import { notFound } from 'next/navigation';
|
||||
import { fetchLocationById } from '@/app/lib/actions/locationActions';
|
||||
import { LocationDeleteForm } from '@/app/ui/LocationDeleteForm';
|
||||
|
||||
export const LocationDeletePage = async ({ locationId }: { locationId:string }) => {
|
||||
|
||||
const location = await fetchLocationById(locationId);
|
||||
|
||||
if (!location) {
|
||||
return(notFound());
|
||||
}
|
||||
|
||||
return (<LocationDeleteForm location={location} />);
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import { NotFoundPage } from '@/app/ui/NotFoundPage';
|
||||
|
||||
const BillingLocationNotFound = () =>
|
||||
<NotFoundPage title="404 Billing Location Not Found" description="Could not find the requested Billing Location." />;
|
||||
|
||||
export default BillingLocationNotFound;
|
||||
19
web-app/app/[locale]/home/location/[id]/delete/page.tsx
Normal file
19
web-app/app/[locale]/home/location/[id]/delete/page.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import { notFound } from 'next/navigation';
|
||||
import { fetchLocationById } from '@/app/lib/actions/locationActions';
|
||||
import { LocationDeleteForm } from '@/app/ui/LocationDeleteForm';
|
||||
import { Main } from '@/app/ui/Main';
|
||||
|
||||
export default async function Page({ params:{ id } }: { params: { id:string } }) {
|
||||
|
||||
const location = await fetchLocationById(id);
|
||||
|
||||
if (!location) {
|
||||
return(notFound());
|
||||
}
|
||||
|
||||
return (
|
||||
<Main>
|
||||
<LocationDeleteForm location={location} />
|
||||
</Main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import { notFound } from 'next/navigation';
|
||||
import { LocationEditForm } from '@/app/ui/LocationEditForm';
|
||||
import { fetchLocationById } from '@/app/lib/actions/locationActions';
|
||||
import { getUserSettings } from '@/app/lib/actions/userSettingsActions';
|
||||
|
||||
export default async function LocationEditPage({ locationId }: { locationId:string }) {
|
||||
|
||||
const location = await fetchLocationById(locationId);
|
||||
|
||||
if (!location) {
|
||||
return(notFound());
|
||||
}
|
||||
|
||||
const userSettings = await getUserSettings();
|
||||
|
||||
const result = <LocationEditForm location={location} userSettings={userSettings} />;
|
||||
|
||||
return (result);
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import { NotFoundPage } from '@/app/ui/NotFoundPage';
|
||||
|
||||
const BillingLocationNotFound = () =>
|
||||
<NotFoundPage title="404 Location Not Found" description="Could not find the requested Location." />;
|
||||
|
||||
export default BillingLocationNotFound;
|
||||
15
web-app/app/[locale]/home/location/[id]/edit/page.tsx
Normal file
15
web-app/app/[locale]/home/location/[id]/edit/page.tsx
Normal file
@@ -0,0 +1,15 @@
|
||||
import { Suspense } from 'react';
|
||||
import LocationEditPage from './LocationEditPage';
|
||||
import { Main } from '@/app/ui/Main';
|
||||
import { LocationEditFormSkeleton } from '@/app/ui/LocationEditForm';
|
||||
|
||||
export default async function Page({ params:{ id } }: { params: { id:string } }) {
|
||||
|
||||
return (
|
||||
<Main>
|
||||
<Suspense fallback={<LocationEditFormSkeleton />}>
|
||||
<LocationEditPage locationId={id} />
|
||||
</Suspense>
|
||||
</Main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { FC } from "react"
|
||||
import { Bill } from "@/app/lib/db-types"
|
||||
import { TicketIcon } from "@heroicons/react/24/outline"
|
||||
|
||||
export interface BillBadgeProps {
|
||||
locationId: string,
|
||||
bill: Pick<Bill, 'name' | 'paid' | 'hasAttachment' | 'proofOfPayment'>,
|
||||
onClick?: () => void
|
||||
};
|
||||
|
||||
export const BillToggleBadge:FC<BillBadgeProps> = ({ bill: { name, paid, hasAttachment, proofOfPayment }, onClick}) => {
|
||||
|
||||
const className = `badge badge-lg ${paid?"badge-success":" badge-outline"} ${ !paid && hasAttachment ? "btn-outline btn-success" : "" } cursor-pointer`;
|
||||
|
||||
return (
|
||||
<div className={className} onClick={onClick}>
|
||||
{name}
|
||||
{
|
||||
proofOfPayment?.uploadedAt ?
|
||||
<TicketIcon className="h-[1em] w-[1em] inline-block ml-1" /> : null
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,165 @@
|
||||
'use client';
|
||||
|
||||
import { FC, useState } from "react";
|
||||
import { BillingLocation, YearMonth } from "../../../../../lib/db-types";
|
||||
import { formatYearMonth } from "../../../../../lib/format";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { updateMonth } from "../../../../../lib/actions/monthActions";
|
||||
import { toast, ToastContainer } from 'react-toastify';
|
||||
import 'react-toastify/dist/ReactToastify.css';
|
||||
import { BillToggleBadge } from "./BillToggleBadge";
|
||||
|
||||
export interface MultiBillEditProps {
|
||||
locations: BillingLocation[];
|
||||
year: number;
|
||||
month: number;
|
||||
}
|
||||
|
||||
interface BillState {
|
||||
locationId: string;
|
||||
billId: string;
|
||||
paid: boolean;
|
||||
}
|
||||
|
||||
export const MultiBillEdit: FC<MultiBillEditProps> = ({ locations, year, month }) => {
|
||||
const t = useTranslations("multi-bill-edit");
|
||||
const router = useRouter();
|
||||
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
|
||||
const [billStates, setBillStates] = useState<BillState[]>(() =>
|
||||
locations.flatMap(location =>
|
||||
location.bills.map(bill => ({
|
||||
locationId: location._id,
|
||||
billId: bill._id,
|
||||
paid: bill.paid,
|
||||
}))
|
||||
)
|
||||
);
|
||||
|
||||
const [allPaidMode, setAllPaidMode] = useState(() =>
|
||||
billStates.length > 0 && billStates.every(bill => bill.paid)
|
||||
);
|
||||
|
||||
// Toggle individual bill paid status
|
||||
const handleBillToggle = (locationId: string, billId: string) => {
|
||||
setBillStates(prevStates =>
|
||||
prevStates.map(state =>
|
||||
state.locationId === locationId && state.billId === billId
|
||||
? { ...state, paid: !state.paid }
|
||||
: state
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
// Toggle all bills paid status
|
||||
const handleSetAllAsPayed = () => {
|
||||
const newPaidState = !allPaidMode;
|
||||
setAllPaidMode(newPaidState);
|
||||
setBillStates(prevStates =>
|
||||
prevStates.map(state => ({ ...state, paid: newPaidState }))
|
||||
);
|
||||
};
|
||||
|
||||
// Save changes to database
|
||||
const handleSave = async () => {
|
||||
setIsSaving(true);
|
||||
try {
|
||||
const updates = billStates.map(state => ({
|
||||
locationId: state.locationId,
|
||||
billId: state.billId,
|
||||
paid: state.paid,
|
||||
}));
|
||||
|
||||
await updateMonth({ year, month }, updates);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error saving bill updates:', error);
|
||||
toast.error(t("save-error-message"), { theme: "dark" });
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Cancel and return to home page
|
||||
const handleCancel = () => {
|
||||
router.push(`/home?year=${year}`);
|
||||
};
|
||||
|
||||
// Get bill state for a specific bill
|
||||
const getBillState = (locationId: string, billId: string): boolean => {
|
||||
const state = billStates.find(
|
||||
s => s.locationId === locationId && s.billId === billId
|
||||
);
|
||||
return state?.paid ?? false;
|
||||
};
|
||||
|
||||
const yearMonth: YearMonth = { year, month };
|
||||
|
||||
return (
|
||||
<div className={`collapse bg-base-200 my-1 sm:min-w-[25em] border-2 border-neutral`}>
|
||||
<h1 className="text-xl font-medium text-white collapse-title ml-1">{formatYearMonth(yearMonth)}</h1>
|
||||
<div className="absolute cursor-pointer top-4 right-[20px]">
|
||||
<BillToggleBadge locationId={"dummy"}
|
||||
bill={{ paid:allPaidMode, name: allPaidMode ? t("set-all-as-unpaid-button") : t("set-all-as-paid-button"), hasAttachment: false, proofOfPayment: undefined }}
|
||||
onClick={handleSetAllAsPayed}
|
||||
/>
|
||||
</div>
|
||||
<div className="p-[16px] pt-0">
|
||||
{locations.map(location => (
|
||||
<div key={location._id} className="card card-compact card-bordered max-w-[35em] bg-base-100 border-1 border-neutral mb-2">
|
||||
<div className="card-body">
|
||||
<h2 className="card-title text-[1rem]">
|
||||
{formatYearMonth(yearMonth)} {location.name}
|
||||
</h2>
|
||||
<div className="space-y-4 mt-[-.5rem]">
|
||||
{location.bills.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-2 mt-2">
|
||||
{location.bills.map(bill => {
|
||||
const isPaid = getBillState(location._id, bill._id);
|
||||
return (
|
||||
<BillToggleBadge
|
||||
key={bill._id}
|
||||
locationId={location._id}
|
||||
bill={{ ...bill, paid: isPaid }}
|
||||
onClick={() => handleBillToggle(location._id, bill._id)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-gray-500">{t("no-bills-message")}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{/* Action buttons */}
|
||||
<div className="pt-4">
|
||||
<button
|
||||
onClick={handleSave}
|
||||
className="btn btn-primary ml-3"
|
||||
disabled={isSaving}
|
||||
>
|
||||
{isSaving ? (
|
||||
<>
|
||||
<span className="loading loading-spinner loading-sm"></span>
|
||||
{t("saving-button")}
|
||||
</>
|
||||
) : (
|
||||
t("save-button")
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleCancel}
|
||||
className="btn btn-neutral ml-3"
|
||||
disabled={isSaving}
|
||||
>
|
||||
{t("cancel-button")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<ToastContainer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,27 @@
|
||||
"use client";
|
||||
|
||||
import { InboxStackIcon, Square3Stack3DIcon } from '@heroicons/react/24/outline';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { YearMonth } from '../../../../../lib/db-types';
|
||||
import Link from 'next/link';
|
||||
|
||||
export interface MultiBillEditButtonProps {
|
||||
yearMonth: YearMonth;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const MultiBillEditButton: React.FC<MultiBillEditButtonProps> = ({ yearMonth, className }) => {
|
||||
|
||||
const t = useTranslations("home-page.multi-bill-edit-button");
|
||||
|
||||
return (
|
||||
<div className={`card card-compact card-bordered bg-base-100 shadow-s my-1 ${className}`}>
|
||||
<Link href={`/home/multi-bill-edit/${yearMonth.year}/${yearMonth.month}`} className="card-body tooltip self-center" data-tip={t("tooltip")} data-umami-event="add-new-location">
|
||||
<span className='flex self-center'>
|
||||
<Square3Stack3DIcon className="h-[1em] w-[1em] cursor-pointer text-4xl" />
|
||||
<span className="ml-1 self-center text-sm sm:text-xs text-left w-[5.5em] leading-[1.3em]">{t("tooltip")}</span>
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,16 @@
|
||||
import { notFound } from 'next/navigation';
|
||||
import { MultiBillEdit } from '@/app/[locale]/home/multi-bill-edit/[year]/[month]/MultiBillEdit';
|
||||
import { getLocationsByMonth } from '@/app/lib/actions/monthActions';
|
||||
|
||||
export default async function MultiBillEditPage({ year, month }: { year: number; month: number }) {
|
||||
|
||||
const locations = await getLocationsByMonth({ year, month });
|
||||
|
||||
if (!locations || locations.length === 0) {
|
||||
return(notFound());
|
||||
}
|
||||
|
||||
const result = <MultiBillEdit locations={locations} year={year} month={month} />;
|
||||
|
||||
return (result);
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import { NotFoundPage } from '@/app/ui/NotFoundPage';
|
||||
|
||||
const MultiBillEditNotFound = () =>
|
||||
<NotFoundPage title="404 Month Not Found" description="Could not find the requested month." />;
|
||||
|
||||
export default MultiBillEditNotFound;
|
||||
@@ -0,0 +1,21 @@
|
||||
import { Suspense } from 'react';
|
||||
import MultiBillEditPage from './MultiBillEditPage';
|
||||
import { Main } from '@/app/ui/Main';
|
||||
|
||||
const MultiBillEditSkeleton = () => (
|
||||
<div className="flex min-h-screen flex-col items-center justify-center p-6 bg-base-300">
|
||||
<span className="loading loading-spinner loading-lg"></span>
|
||||
<p className="mt-4">Loading...</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default async function Page({ params }: { params: { year: string; month: string } }) {
|
||||
|
||||
return (
|
||||
<Main>
|
||||
<Suspense fallback={<MultiBillEditSkeleton />}>
|
||||
<MultiBillEditPage year={parseInt(params.year)} month={parseInt(params.month)} />
|
||||
</Suspense>
|
||||
</Main>
|
||||
);
|
||||
}
|
||||
31
web-app/app/[locale]/home/page.tsx
Normal file
31
web-app/app/[locale]/home/page.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import { FC, Suspense } from 'react';
|
||||
import { Main } from '@/app/ui/Main';
|
||||
import HomePage from '@/app/ui/HomePage';
|
||||
import { MonthCardSkeleton } from '@/app/ui/MonthCardSkeleton';
|
||||
|
||||
export interface PageProps {
|
||||
searchParams?: {
|
||||
year?: string;
|
||||
month?: string;
|
||||
};
|
||||
}
|
||||
|
||||
const HomePageSkeleton = () =>
|
||||
<>
|
||||
<MonthCardSkeleton checked={true} />
|
||||
<MonthCardSkeleton />
|
||||
<MonthCardSkeleton />
|
||||
</>
|
||||
|
||||
const Page:FC<PageProps> = async ({ searchParams }) => {
|
||||
|
||||
return (
|
||||
<Main>
|
||||
<Suspense fallback={<HomePageSkeleton />}>
|
||||
<HomePage searchParams={searchParams} />
|
||||
</Suspense>
|
||||
</Main>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
@@ -0,0 +1,6 @@
|
||||
import { NotFoundPage } from '@/app/ui/NotFoundPage';
|
||||
|
||||
const PrintPageNotFound = () =>
|
||||
<NotFoundPage title="404 Print Page Not Found" description="Could not find the requested print preview page." />;
|
||||
|
||||
export default PrintPageNotFound;
|
||||
63
web-app/app/[locale]/home/print/[year]/[month]/page.tsx
Normal file
63
web-app/app/[locale]/home/print/[year]/[month]/page.tsx
Normal file
@@ -0,0 +1,63 @@
|
||||
import { fetchBarcodeDataForPrint } from '@/app/lib/actions/printActions';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { PrintPreview } from '@/app/ui/PrintPreview';
|
||||
import { getTranslations } from 'next-intl/server';
|
||||
|
||||
interface PrintPageProps {
|
||||
params: {
|
||||
year: string;
|
||||
month: string;
|
||||
locale: string;
|
||||
};
|
||||
}
|
||||
|
||||
export default async function PrintPage({ params }: PrintPageProps) {
|
||||
const year = parseInt(params.year);
|
||||
const month = parseInt(params.month);
|
||||
|
||||
// Validate year and month parameters
|
||||
if (isNaN(year) || isNaN(month) || month < 1 || month > 12) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
let printData;
|
||||
|
||||
try {
|
||||
printData = await fetchBarcodeDataForPrint(year, month);
|
||||
} catch (error) {
|
||||
console.error('Error fetching print data:', error);
|
||||
notFound();
|
||||
}
|
||||
|
||||
// Get translations for the current locale
|
||||
const t = await getTranslations("home-page.print-preview");
|
||||
const yearMonth = `${year}-${month.toString().padStart(2, '0')}`;
|
||||
const translations = {
|
||||
title: t("title"),
|
||||
barcodesFound: t("barcodes-found"),
|
||||
barcodeSingular: t("barcode-singular"),
|
||||
printButton: t("print-button"),
|
||||
printFooter: t("print-footer", { date: new Date().toLocaleDateString() }),
|
||||
tableHeaderIndex: t("table-header-index"),
|
||||
tableHeaderBillInfo: t("table-header-bill-info"),
|
||||
tableHeaderBarcode: t("table-header-barcode"),
|
||||
emptyStateTitle: t("empty-state-title"),
|
||||
emptyStateMessage: t("empty-state-message", { yearMonth })
|
||||
};
|
||||
|
||||
// If no barcode data found, show empty state
|
||||
if (!printData || printData.length === 0) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<h1 className="text-2xl font-bold mb-4">{translations.emptyStateTitle}</h1>
|
||||
<p className="text-gray-600">
|
||||
{translations.emptyStateMessage}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return <PrintPreview data={printData} year={year} month={month} translations={translations} />;
|
||||
}
|
||||
13
web-app/app/[locale]/home/year-month/[id]/add/page.tsx
Normal file
13
web-app/app/[locale]/home/year-month/[id]/add/page.tsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import { addMonth } from '@/app/lib/actions/monthActions';
|
||||
import { gotoHome } from '@/app/lib/actions/navigationActions';
|
||||
import { parseYearMonth } from '@/app/lib/format';
|
||||
|
||||
export default async function Page({ params:{ id } }: { params: { id:string } }) {
|
||||
|
||||
const { year, month } = parseYearMonth(id);
|
||||
await addMonth({ year, month });
|
||||
|
||||
await gotoHome({ year, month });
|
||||
|
||||
return null; // if we don't return anything, the client-side will not re-validate cache
|
||||
}
|
||||
Reference in New Issue
Block a user