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>

web-app/app/[locale]/attachment/[id]/not-found.tsx

@@ -0,0 +1,6 @@
+import { NotFoundPage } from '@/app/ui/NotFoundPage';
+ 
+const AttachmentNotFound = () =>
+<NotFoundPage title="404 File Not Found" description="Could not find the requested attachment." />;
+
+export default AttachmentNotFound;

web-app/app/[locale]/attachment/[id]/route.tsx

@@ -0,0 +1,27 @@
+import { fetchBillById } from '@/app/lib/actions/billActions';
+import { notFound } from 'next/navigation';
+
+export async function GET(request: Request, { params:{ id } }: { params: { id:string } }) {
+    const [locationID, billID] = id.split('-');
+
+    const [location, bill] = await fetchBillById(locationID, billID, true) ?? [];
+
+    if(!bill?.attachment) {
+        notFound();
+    }
+
+    // convert fileContentsBase64 from Base64 string to binary string
+    const fileContentsBuffer = Buffer.from(bill.attachment.fileContentsBase64, 'base64');
+
+    // convert fileContentsBuffer to format that can be sent to the client
+    const fileContents = new Uint8Array(fileContentsBuffer);
+    
+    return new Response(fileContents, {
+        status: 200,
+        headers: {
+            'Content-Type': "application/octet-stream",
+            'Content-Disposition': `attachment; filename="${bill.attachment.fileName}"`,
+            'Last-Modified': `${bill.attachment.fileLastModified}`
+        }
+    });
+}

web-app/app/[locale]/home/account/LogoutButton.tsx

@@ -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>
+    )
+}

web-app/app/[locale]/home/account/page.tsx

@@ -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;

web-app/app/[locale]/home/account/settings/page.tsx

@@ -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;

web-app/app/[locale]/home/bill/[id]/add/not-found.tsx

@@ -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;

web-app/app/[locale]/home/bill/[id]/add/page.tsx

@@ -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>
+    );
+}

web-app/app/[locale]/home/bill/[id]/delete/not-found.tsx

@@ -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;

web-app/app/[locale]/home/bill/[id]/delete/page.tsx

@@ -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>
+    );
+}

web-app/app/[locale]/home/bill/[id]/edit/not-found.tsx

@@ -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;

web-app/app/[locale]/home/bill/[id]/edit/page.tsx

@@ -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>
+    );
+}

web-app/app/[locale]/home/location/[id]/add/LocationAddPage.tsx

@@ -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} />);
+}

web-app/app/[locale]/home/location/[id]/add/page.tsx

@@ -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>
+    );
+}

web-app/app/[locale]/home/location/[id]/delete/LocationDeletePage.tsx

@@ -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} />);
+}

web-app/app/[locale]/home/location/[id]/delete/not-found.tsx

@@ -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;

web-app/app/[locale]/home/location/[id]/delete/page.tsx

@@ -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>
+    );
+}

web-app/app/[locale]/home/location/[id]/edit/LocationEditPage.tsx

@@ -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);
+}

web-app/app/[locale]/home/location/[id]/edit/not-found.tsx

@@ -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;

web-app/app/[locale]/home/location/[id]/edit/page.tsx

@@ -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>
+    );
+}

web-app/app/[locale]/home/multi-bill-edit/[year]/[month]/BillToggleBadge.tsx

@@ -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>
+    );
+}

web-app/app/[locale]/home/multi-bill-edit/[year]/[month]/MultiBillEdit.tsx

@@ -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>
+    );
+};

web-app/app/[locale]/home/multi-bill-edit/[year]/[month]/MultiBillEditButton.tsx

@@ -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>
+  );
+};

web-app/app/[locale]/home/multi-bill-edit/[year]/[month]/MultiBillEditPage.tsx

@@ -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);
+}

web-app/app/[locale]/home/multi-bill-edit/[year]/[month]/not-found.tsx

@@ -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;

web-app/app/[locale]/home/multi-bill-edit/[year]/[month]/page.tsx

@@ -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>
+    );
+}

web-app/app/[locale]/home/page.tsx

@@ -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;

web-app/app/[locale]/home/print/[year]/[month]/not-found.tsx

@@ -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;

web-app/app/[locale]/home/print/[year]/[month]/page.tsx

@@ -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} />;
+}

web-app/app/[locale]/home/year-month/[id]/add/page.tsx

@@ -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
+}

web-app/app/[locale]/layout.tsx

@@ -0,0 +1,58 @@
+import '@/app/ui/global.css';
+import { inter } from '@/app/ui/fonts';
+import { Metadata } from 'next';
+import Script from 'next/script';
+
+export const metadata:Metadata = {
+  title: 'rezije.app',
+  alternates: {
+    canonical: 'https://rezije.app',
+    languages: {
+      'en': 'https://rezije.app/en/',
+      'hr': 'https://rezije.app/hr/',
+    }
+  },
+  openGraph: {
+    title: 'Režije',
+    description: 'Preuzmite kontrolu nad svojim režijama',
+    url: 'https://rezije.app',
+    siteName: 'Režije',
+    images: [
+      {
+        url: 'https://rezije.app/opengraph-image.png', // Must be an absolute URL
+        width: 432,
+        height: 466,
+        alt: "Režije - Preuzmite kontrolu nad svojim režijama"
+      },
+      {
+        url: 'https://rezije.app/icon6.png', // Must be an absolute URL
+        width: 256,
+        height: 256,
+        alt: "Režije - Preuzmite kontrolu nad svojim režijama"
+      },
+    ],
+    locale: 'hr',
+    type: 'website',
+  },
+}
+
+export default function RootLayout({
+  children,
+  params: { locale },
+}: {
+  children: React.ReactNode;
+  params: { locale:string };
+}) {
+  return (
+    <html lang={locale}>
+      {process.env.NODE_ENV === 'production' && (
+        <Script
+          src="https://umami.rezije.app/script.js"
+          data-website-id="fcd97697-de4b-4a36-b40a-ddb22761cd06"
+          strategy="afterInteractive"
+        />
+      )}
+      <body className={`${inter.className} antialiased`}>{children}</body>
+    </html>
+  );
+}

web-app/app/[locale]/page.tsx

@@ -0,0 +1,67 @@
+import { FC } from 'react';
+import { Main } from '@/app/ui/Main';
+import { myAuth } from "@/app/lib/auth";
+import Image from 'next/image';
+import { getTranslations, getLocale } from "next-intl/server";
+import isWebview from "is-ua-webview";
+import { headers } from 'next/headers';
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import { paragraphFormatFactory } from '../lib/paragraphFormatFactory';
+import { getAuthProviders } from '../lib/getProviders';
+import { EnterOrSignInButton } from '../ui/EnterOrSignInButton';
+
+const h1ClassName = "text-3xl font-bold max-w-[38rem] mx-auto text-neutral-50";
+const h2ClassName = h1ClassName + " mt-8";
+
+const Page: FC = async () => {
+
+  const locale = await getLocale();
+  const paragraphFormat = paragraphFormatFactory(locale);
+
+  const t = await getTranslations("login-page");
+  const session = await myAuth();
+  const providers = getAuthProviders();
+
+  // get userAgent from NextJS
+  const headersList = headers();
+  const userAgent = headersList.get("user-agent") as string;
+
+  const insideWebeview = isWebview(userAgent);
+
+  return (
+    <Main>
+      <h1 className={h1ClassName}>
+        {t.rich("main-card.title", paragraphFormat)}
+      </h1>
+      {t.rich("main-card.text", paragraphFormat)}
+      <Image src={t("main-card.image-url")} alt={t("main-card.image-alt")} className="m-auto mt-0" width={400} height={300} />
+
+      <EnterOrSignInButton session={session} locale={locale} providers={providers} />
+
+      {
+        // Google will refuse OAuth signin if it's inside a webview (i.e. Facebook)
+        insideWebeview &&
+        <div className="card card-side bg-base-100 shadow-xl max-w-[30em] mx-auto mb-4">
+          <figure className='pl-4 pr-1 pt-[2rem] min-w-[100px] max-w-[100px] self-start'>
+            <ExclamationTriangleIcon className="text-red-600 self-start" />
+          </figure>
+          <div className="card-body pl-2">
+            {t.rich("main-card.in-app-browser-warning", paragraphFormat)}
+          </div>
+        </div>
+      }
+      <h2 className={`${h2ClassName} text-xl`}>{t.rich("card-1.title", paragraphFormat)}</h2>
+      {t.rich("card-1.text", paragraphFormat)}
+      <Image src={t("card-1.image-url")} alt={t("card-1.image-alt")} className="m-auto mt-4" width={400} height={300} />
+
+      <h2 className={`${h2ClassName} text-xl`}>{t.rich("card-2.title", paragraphFormat)}</h2>
+      {t.rich("card-2.text", paragraphFormat)}
+
+      <EnterOrSignInButton session={session} locale={locale} providers={providers} />
+
+
+    </Main>
+  );
+}
+
+export default Page;

web-app/app/[locale]/privacy-policy/page.tsx

@@ -0,0 +1,107 @@
+import { Main } from "@/app/ui/Main";
+import { ClassNames } from "@emotion/react";
+import { getTranslations } from "next-intl/server";
+import Link from "next/link";
+
+const PrivacyPolicyPage = async () => {
+    const t = await getTranslations("privacy-policy-page");
+
+    const richTextFormat = {
+        strong: (chunks: React.ReactNode) => <strong>{chunks}</strong>,
+        emailLink: (chunks: React.ReactNode) => <Link href={`mailto:${chunks}`} className="no-underline hover:underline">{chunks}</Link>
+    };
+
+    return (
+        <Main>
+            <article className="prose container mx-auto px-6">
+                <h1>{t("title")}</h1>
+
+                <h2>{t("section-1.heading")}</h2>
+                <p>{t("section-1.content")}</p>
+
+                <h2>{t("section-2.heading")}</h2>
+                <p>{t.rich("section-2.paragraph-1", richTextFormat)}</p>
+                <p>{t.rich("section-2.paragraph-2", richTextFormat)}</p>
+
+                <h2>{t("section-3.heading")}</h2>
+                <p>{t("section-3.intro")}</p>
+                <ol>
+                    <li>{t.rich("section-3.item-1", richTextFormat)}</li>
+                    <li>{t.rich("section-3.item-2", richTextFormat)}</li>
+                    <li>{t.rich("section-3.item-3", richTextFormat)}</li>
+                    <li>{t.rich("section-3.item-4", richTextFormat)}</li>
+                    <li>{t.rich("section-3.item-5", richTextFormat)}</li>
+                </ol>
+
+                <h2>{t("section-4.heading")}</h2>
+                <p>{t("section-4.intro")}</p>
+                <ol>
+                    <li>{t.rich("section-4.item-1", richTextFormat)}</li>
+                    <li>{t.rich("section-4.item-2", richTextFormat)}</li>
+                    <li>{t.rich("section-4.item-3", richTextFormat)}</li>
+                    <li>{t.rich("section-4.item-4", richTextFormat)}</li>
+                    <li>{t.rich("section-4.item-5", richTextFormat)}</li>
+                </ol>
+
+                <h2>{t("section-5.heading")}</h2>
+                <p>{t.rich("section-5.paragraph-1", richTextFormat)}</p>
+                <p>{t.rich("section-5.paragraph-2", richTextFormat)}</p>
+
+                <h2>{t("section-6.heading")}</h2>
+                <p>{t("section-6.content")}</p>
+
+                <h2>{t("section-7.heading")}</h2>
+                <p>{t("section-7.intro")}</p>
+                <ol>
+                    <li>{t.rich("section-7.item-1", richTextFormat)}</li>
+                    <li>{t.rich("section-7.item-2", richTextFormat)}</li>
+                    <li>{t.rich("section-7.item-3", richTextFormat)}</li>
+                </ol>
+
+                <h2>{t("section-8.heading")}</h2>
+                <p>{t("section-8.content")}</p>
+
+                <h2>{t("section-9.heading")}</h2>
+                <p>{t("section-9.content")}</p>
+
+                <h2>{t("section-10.heading")}</h2>
+                <p>{t("section-10.intro")}</p>
+                <ol>
+                    <li>{t.rich("section-10.item-1", richTextFormat)}</li>
+                    <li>{t.rich("section-10.item-2", richTextFormat)}</li>
+                    <li>{t.rich("section-10.item-3", richTextFormat)}</li>
+                    <li>{t.rich("section-10.item-4", richTextFormat)}</li>
+                </ol>
+
+                <h2>{t("section-11.heading")}</h2>
+                <p>{t("section-11.intro")}</p>
+                <ol>
+                    <li>{t.rich("section-11.item-1", richTextFormat)}</li>
+                    <li>{t.rich("section-11.item-2", richTextFormat)}</li>
+                    <li>{t.rich("section-11.item-3", richTextFormat)}</li>
+                    <li>{t.rich("section-11.item-4", richTextFormat)}</li>
+                    <li>{t.rich("section-11.item-5", richTextFormat)}</li>
+                    <li>{t.rich("section-11.item-6", richTextFormat)}</li>
+                    <li>{t.rich("section-11.item-7", richTextFormat)}</li>
+                </ol>
+
+                <h2>{t("section-12.heading")}</h2>
+                <p>{t.rich("section-12.content", richTextFormat)}</p>
+
+                <h2>{t("section-13.heading")}</h2>
+                <p>{t("section-13.content")}</p>
+
+                <h2>{t("section-14.heading")}</h2>
+                <p>{t("section-14.content")}</p>
+
+                <h2>{t("section-15.heading")}</h2>
+                <p>{t("section-15.content")}</p>
+
+                <h2>{t("section-16.heading")}</h2>
+                <p>{t.rich("section-16.content", richTextFormat)}</p>
+            </article>
+        </Main>
+    );
+};
+
+export default PrivacyPolicyPage;

web-app/app/[locale]/share/attachment/[id]/not-found.tsx

@@ -0,0 +1,6 @@
+import { NotFoundPage } from '@/app/ui/NotFoundPage';
+ 
+const ShareAttachmentNotFound = () =>
+<NotFoundPage title="404 File Not Found" description="Could not find the requested shared attachment." />;
+
+export default ShareAttachmentNotFound;

web-app/app/[locale]/share/attachment/[id]/route.tsx

@@ -0,0 +1,64 @@
+import { fetchBillById } from '@/app/lib/actions/billActions';
+import { notFound } from 'next/navigation';
+import { extractShareId, validateShareChecksum } from '@/app/lib/shareChecksum';
+import { getDbClient } from '@/app/lib/dbClient';
+import { BillingLocation } from '@/app/lib/db-types';
+
+export async function GET(request: Request, { params: { id } }: { params: { id: string } }) {
+    // Parse shareId-billID format
+    // shareId = 40 chars (locationId 24 + checksum 16)
+    const shareId = id.substring(0, 40);
+    const billID = id.substring(41); // Skip the '-' separator
+
+    if (!shareId || !billID) {
+        notFound();
+    }
+
+    // Validate shareId and extract locationId
+    const extracted = extractShareId(shareId);
+    if (!extracted) {
+        notFound();
+    }
+
+    const { locationId: locationID, checksum } = extracted;
+
+    // Validate checksum
+    if (!validateShareChecksum(locationID, checksum)) {
+        notFound();
+    }
+
+    // Check TTL before fetching bill
+    const dbClient = await getDbClient();
+    const location = await dbClient.collection<BillingLocation>("lokacije")
+        .findOne({ _id: locationID }, { projection: { shareTTL: 1 } });
+
+    if (!location) {
+        notFound();
+    }
+
+    // Check if sharing is active and not expired
+    if (!location.shareTTL || new Date() > location.shareTTL) {
+        notFound();
+    }
+
+    const [_, bill] = await fetchBillById(locationID, billID, true) ?? [];
+
+    if (!bill?.attachment) {
+        notFound();
+    }
+
+    // convert fileContentsBase64 from Base64 string to binary string
+    const fileContentsBuffer = Buffer.from(bill.attachment.fileContentsBase64, 'base64');
+
+    // convert fileContentsBuffer to format that can be sent to the client
+    const fileContents = new Uint8Array(fileContentsBuffer);
+    
+    return new Response(fileContents, {
+        status: 200,
+        headers: {
+            'Content-Type': "application/octet-stream",
+            'Content-Disposition': `attachment; filename="${bill.attachment.fileName}"`,
+            'Last-Modified': `${bill.attachment.fileLastModified}`
+        }
+    });
+}

web-app/app/[locale]/share/bill/[id]/not-found.tsx

@@ -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;

web-app/app/[locale]/share/bill/[id]/page.tsx

@@ -0,0 +1,41 @@
+import { fetchBillById } from '@/app/lib/actions/billActions';
+import { ViewBillCard } from '@/app/ui/ViewBillCard';
+import { Main } from '@/app/ui/Main';
+import { notFound } from 'next/navigation';
+import { validateShareAccess } from '@/app/lib/actions/locationActions';
+
+export default async function Page({ params: { id } }: { params: { id: string } }) {
+
+    // Split combined ID: shareId (40 chars) + '-' + billID (24 chars)
+    // ShareId = locationId (24) + checksum (16) = 40 chars
+    const shareId = id.substring(0, 40);
+    const billID = id.substring(41); // Skip the '-' separator
+
+    // Validate share access (checks checksum + TTL, extracts locationId)
+    const accessValidation = await validateShareAccess(shareId);
+
+    if (!accessValidation.valid || !accessValidation.locationId) {
+        return (
+            <Main>
+                <div className="alert alert-error">
+                    <p>{accessValidation.error || 'This content is no longer shared'}</p>
+                </div>
+            </Main>
+        );
+    }
+
+    const locationID = accessValidation.locationId;
+
+    // Fetch bill data
+    const [location, bill] = await fetchBillById(locationID, billID) ?? [];
+
+    if (!bill || !location) {
+        return notFound();
+    }
+
+    return (
+        <Main>
+            <ViewBillCard location={location} bill={bill} shareId={shareId} />
+        </Main>
+    );
+}

web-app/app/[locale]/share/location/[id]/LocationViewPage.tsx

@@ -0,0 +1,47 @@
+import { ViewLocationCard } from '@/app/ui/ViewLocationCard';
+import { fetchLocationById, setSeenByTenantAt, validateShareAccess } from '@/app/lib/actions/locationActions';
+import { getUserSettingsByUserId } from '@/app/lib/actions/userSettingsActions';
+import { notFound } from 'next/navigation';
+import { myAuth } from '@/app/lib/auth';
+
+export default async function LocationViewPage({ shareId }: { shareId: string }) {
+    // Validate share access (checks checksum + TTL, extracts locationId)
+    const accessValidation = await validateShareAccess(shareId);
+
+    if (!accessValidation.valid || !accessValidation.locationId) {
+        return (
+            <div className="alert alert-error">
+                <p>{accessValidation.error || 'This content is no longer shared'}</p>
+            </div>
+        );
+    }
+
+    const locationId = accessValidation.locationId;
+
+    // Fetch location
+    const location = await fetchLocationById(locationId);
+
+    if (!location) {
+        return notFound();
+    }
+
+    // Fetch user settings for the location owner
+    const userSettings = await getUserSettingsByUserId(location.userId);
+
+    // Check if the page was accessed by an authenticated user who is the owner
+    const session = await myAuth();
+    const isOwner = session?.user?.id === location.userId;
+
+    // If the page is not visited by the owner, mark it as seen by tenant
+    if (!isOwner) {
+         await setSeenByTenantAt(locationId);
+    }
+
+    return (
+        <ViewLocationCard
+            location={location}
+            userSettings={userSettings}
+            shareId={shareId}
+        />
+    );
+}

web-app/app/[locale]/share/location/[id]/page.tsx

@@ -0,0 +1,14 @@
+import { Suspense } from 'react';
+import LocationViewPage from './LocationViewPage';
+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 />}>
+                <LocationViewPage shareId={id} />
+            </Suspense>
+        </Main>
+    );
+}

web-app/app/[locale]/share/proof-of-payment/combined/[id]/not-found.tsx

@@ -0,0 +1,7 @@
+export default function NotFound() {
+    return (
+        <div className="flex min-h-screen flex-col items-center justify-center p-6 bg-base-300">
+            <h2 className="text-2xl font-bold">Proof of payment not found</h2>
+        </div>
+    );
+}

web-app/app/[locale]/share/proof-of-payment/combined/[id]/route.tsx

@@ -0,0 +1,54 @@
+import { getDbClient } from '@/app/lib/dbClient';
+import { BillingLocation } from '@/app/lib/db-types';
+import { notFound } from 'next/navigation';
+import { extractShareId, validateShareChecksum } from '@/app/lib/shareChecksum';
+
+export async function GET(request: Request, { params: { id } }: { params: { id: string } }) {
+    const shareId = id;
+
+    // Validate shareId and extract locationId
+    const extracted = extractShareId(shareId);
+    if (!extracted) {
+        notFound();
+    }
+
+    const { locationId: locationID, checksum } = extracted;
+
+    // Validate checksum
+    if (!validateShareChecksum(locationID, checksum)) {
+        notFound();
+    }
+
+    const dbClient = await getDbClient();
+    const location = await dbClient.collection<BillingLocation>("lokacije")
+        .findOne({ _id: locationID }, {
+            projection: {
+                utilBillsProofOfPayment: 1,
+                shareTTL: 1,
+            }
+        });
+
+    if (!location?.utilBillsProofOfPayment) {
+        notFound();
+    }
+
+    // Check if sharing is active and not expired
+    if (!location.shareTTL || new Date() > location.shareTTL) {
+        notFound();
+    }
+
+    // Convert fileContentsBase64 from Base64 string to binary
+    const fileContentsBuffer = Buffer.from(location.utilBillsProofOfPayment.fileContentsBase64, 'base64');
+
+    // Convert fileContentsBuffer to format that can be sent to the client
+    const fileContents = new Uint8Array(fileContentsBuffer);
+
+    return new Response(fileContents, {
+        status: 200,
+        headers: {
+            'Content-Type': 'application/pdf',
+            'Content-Disposition': `attachment; filename="${location.utilBillsProofOfPayment.fileName}"`,
+            'Last-Modified': `${location.utilBillsProofOfPayment.fileLastModified}`
+        }
+    });
+}

web-app/app/[locale]/share/proof-of-payment/per-bill/[id]/not-found.tsx

@@ -0,0 +1,7 @@
+export default function NotFound() {
+    return (
+        <div className="flex min-h-screen flex-col items-center justify-center p-6 bg-base-300">
+            <h2 className="text-2xl font-bold">Proof of payment not found</h2>
+        </div>
+    );
+}

web-app/app/[locale]/share/proof-of-payment/per-bill/[id]/route.tsx

@@ -0,0 +1,70 @@
+import { getDbClient } from '@/app/lib/dbClient';
+import { BillingLocation } from '@/app/lib/db-types';
+import { notFound } from 'next/navigation';
+import { extractShareId, validateShareChecksum } from '@/app/lib/shareChecksum';
+
+export async function GET(_request: Request, { params: { id } }: { params: { id: string } }) {
+    // Parse shareId-billID format
+    // shareId = 40 chars (locationId 24 + checksum 16)
+    const shareId = id.substring(0, 40);
+    const billID = id.substring(41); // Skip the '-' separator
+
+    if (!shareId || !billID) {
+        notFound();
+    }
+
+    // Validate shareId and extract locationId
+    const extracted = extractShareId(shareId);
+    if (!extracted) {
+        notFound();
+    }
+
+    const { locationId: locationID, checksum } = extracted;
+
+    // Validate checksum
+    if (!validateShareChecksum(locationID, checksum)) {
+        notFound();
+    }
+
+    const dbClient = await getDbClient();
+    const location = await dbClient.collection<BillingLocation>("lokacije")
+        .findOne({ _id: locationID }, {
+            projection: {
+                // Don't load bill attachments, only proof of payment and shareTTL
+                "bills._id": 1,
+                "bills.proofOfPayment": 1,
+                "shareTTL": 1,
+            }
+        });
+
+    if (!location) {
+        notFound();
+    }
+
+    // Check if sharing is active and not expired
+    if (!location.shareTTL || new Date() > location.shareTTL) {
+        notFound();
+    }
+
+    // Find the specific bill
+    const bill = location.bills.find(b => b._id === billID);
+
+    if(!bill?.proofOfPayment) {
+        notFound();
+    }
+
+    // Convert fileContentsBase64 from Base64 string to binary
+    const fileContentsBuffer = Buffer.from(bill.proofOfPayment.fileContentsBase64, 'base64');
+
+    // Convert fileContentsBuffer to format that can be sent to the client
+    const fileContents = new Uint8Array(fileContentsBuffer);
+
+    return new Response(fileContents, {
+        status: 200,
+        headers: {
+            'Content-Type': 'application/pdf',
+            'Content-Disposition': `attachment; filename="${bill.proofOfPayment.fileName}"`,
+            'Last-Modified': `${bill.proofOfPayment.fileLastModified}`
+        }
+    });
+}

web-app/app/[locale]/terms-of-service/page.tsx

@@ -0,0 +1,138 @@
+import { Main } from "@/app/ui/Main";
+import { getTranslations } from "next-intl/server";
+import Link from "next/link";
+
+const TermsPage = async () => {
+    const t = await getTranslations("terms-of-service-page");
+
+    const richTextFormat = {
+        strong: (chunks: React.ReactNode) => <strong>{chunks}</strong>,
+        emailLink: (chunks: React.ReactNode) => <Link href={`mailto:${chunks}`} className="no-underline hover:underline">{chunks}</Link>
+    };
+
+    return (
+        <Main>
+            <article className="prose container">
+                <h1>{t("title")}</h1>
+
+                <h2>{t("section-1.heading")}</h2>
+                <p>{t("section-1.content")}</p>
+
+                <h2>{t("section-2.heading")}</h2>
+                <ol>
+                    <li>{t.rich("section-2.item-1", richTextFormat)}</li>
+                    <li>{t.rich("section-2.item-2", richTextFormat)}</li>
+                    <li>{t.rich("section-2.item-3", richTextFormat)}</li>
+                    <li>{t.rich("section-2.item-4", richTextFormat)}</li>
+                </ol>
+
+                <h2>{t("section-3.heading")}</h2>
+                <ol>
+                    <li>{t.rich("section-3.item-1", richTextFormat)}</li>
+                    <li>{t.rich("section-3.item-2", richTextFormat)}</li>
+                    <li>{t.rich("section-3.item-3", richTextFormat)}</li>
+                    <li>{t.rich("section-3.item-4", richTextFormat)}</li>
+                </ol>
+
+                <h2>{t("section-4.heading")}</h2>
+                <p>{t("section-4.paragraph-1")}</p>
+                <p>{t("section-4.paragraph-2")}</p>
+
+                <h2>{t("section-5.heading")}</h2>
+                <ol>
+                    <li>{t.rich("section-5.item-1", richTextFormat)}</li>
+                    <li>{t.rich("section-5.item-2", richTextFormat)}</li>
+                    <li>{t.rich("section-5.item-3", richTextFormat)}</li>
+                    <li>{t.rich("section-5.item-4", richTextFormat)}</li>
+                </ol>
+
+                <h2>{t("section-6.heading")}</h2>
+                <p>{t.rich("section-6.paragraph-1", richTextFormat)}</p>
+                <p>{t("section-6.paragraph-2")}</p>
+                <p>{t("section-6.paragraph-3")}</p>
+                <p>{t("section-6.paragraph-4")}</p>
+                <p>{t("section-6.paragraph-5")}</p>
+
+                <h2>{t("section-7.heading")}</h2>
+                <p>{t("section-7.paragraph-1")}</p>
+                <p>{t.rich("section-7.paragraph-2", richTextFormat)}</p>
+                <p>{t("section-7.paragraph-3")}</p>
+
+                <h2>{t("section-8.heading")}</h2>
+                <p>{t("section-8.intro")}</p>
+                <ol>
+                    <li>{t("section-8.item-1")}</li>
+                    <li>{t("section-8.item-2")}</li>
+                    <li>{t("section-8.item-3")}</li>
+                    <li>{t("section-8.item-4")}</li>
+                    <li>{t("section-8.item-5")}</li>
+                    <li>{t("section-8.item-6")}</li>
+                </ol>
+
+                <h2>{t("section-9.heading")}</h2>
+                <p>{t("section-9.paragraph-1")}</p>
+                <p>{t("section-9.paragraph-2")}</p>
+
+                <h2>{t("section-10.heading")}</h2>
+                <ol>
+                    <li>{t.rich("section-10.item-1", richTextFormat)}</li>
+                    <li>{t.rich("section-10.item-2", richTextFormat)}</li>
+                    <li>{t.rich("section-10.item-3", richTextFormat)}</li>
+                    <li>{t.rich("section-10.item-4", richTextFormat)}</li>
+                </ol>
+
+                <h2>{t("section-11.heading")}</h2>
+                <p>{t("section-11.paragraph-1")}</p>
+                <p>{t("section-11.paragraph-2")}</p>
+                <p>{t("section-11.paragraph-3")}</p>
+                <p>{t("section-11.paragraph-4")}</p>
+
+                <h2>{t("section-12.heading")}</h2>
+                <p>{t("section-12.paragraph-1")}</p>
+                <p>{t("section-12.paragraph-2")}</p>
+
+                <h2>{t("section-13.heading")}</h2>
+                <p>{t.rich("section-13.paragraph-1", richTextFormat)}</p>
+                <p>{t("section-13.paragraph-2")}</p>
+                <p>{t("section-13.paragraph-3")}</p>
+
+                <h2>{t("section-14.heading")}</h2>
+                <p>{t("section-14.paragraph-1")}</p>
+                <p>{t("section-14.paragraph-2")}</p>
+
+                <h2>{t("section-15.heading")}</h2>
+                <p>{t("section-15.paragraph-1")}</p>
+                <p>{t("section-15.paragraph-2")}</p>
+                <p>{t("section-15.paragraph-3")}</p>
+
+                <h2>{t("section-16.heading")}</h2>
+                <p>{t("section-16.content")}</p>
+
+                <h2>{t("section-17.heading")}</h2>
+                <p>{t("section-17.content")}</p>
+
+                <h2>{t("section-18.heading")}</h2>
+                <p>{t("section-18.paragraph-1")}</p>
+                <p>{t("section-18.paragraph-2")}</p>
+                <p>{t("section-18.paragraph-3")}</p>
+
+                <h2>{t("section-19.heading")}</h2>
+                <p>{t("section-19.content")}</p>
+
+                <h2>{t("section-20.heading")}</h2>
+                <ol>
+                    <li>{t.rich("section-20.item-1", richTextFormat)}</li>
+                    <li>{t.rich("section-20.item-2", richTextFormat)}</li>
+                </ol>
+
+                <h2>{t("section-21.heading")}</h2>
+                <p>{t("section-21.content")}</p>
+
+                <h2>{t("section-22.heading")}</h2>
+                <p>{t.rich("section-22.content", richTextFormat)}</p>
+            </article>
+        </Main>
+    );
+};
+
+export default TermsPage;