diff --git a/app/bill/[id]/add/page.tsx b/app/bill/[id]/add/page.tsx index bf11355..5549d24 100644 --- a/app/bill/[id]/add/page.tsx +++ b/app/bill/[id]/add/page.tsx @@ -1,10 +1,11 @@ import { BillEditForm } from '@/app/ui/BillEditForm'; +import { Main } from '@/app/ui/Main'; export default async function Page({ params:{ id:locationID } }: { params: { id:string } }) { return ( -
+
-
+
); } \ No newline at end of file diff --git a/app/bill/[id]/edit/page.tsx b/app/bill/[id]/edit/page.tsx index 4f1dd58..c1184b6 100644 --- a/app/bill/[id]/edit/page.tsx +++ b/app/bill/[id]/edit/page.tsx @@ -1,5 +1,6 @@ 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 } }) { @@ -12,8 +13,8 @@ export default async function Page({ params:{ id } }: { params: { id:string } }) return(notFound()); } return ( -
+
-
+
); } \ No newline at end of file diff --git a/app/page.tsx b/app/page.tsx index 2d65753..5568288 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -10,6 +10,8 @@ import { YearMonth } from './lib/db-types'; import { formatYearMonth } from './lib/format'; import { FC } from 'react'; import Pagination from './ui/Pagination'; +import { PageHeader } from './ui/PageHeader'; +import { Main } from './ui/Main'; const getNextYearMonth = (yearMonth:YearMonth) => { const {year, month} = yearMonth; @@ -62,7 +64,7 @@ const Page:FC = async ({ searchParams }) => { let monthlyExpense = 0; return ( -
+
{ // if this is the latest year, show the add month button currentYear === latestYear && @@ -116,8 +118,7 @@ const Page:FC = async ({ searchParams }) => {
- -
+
); } diff --git a/app/policy/page.tsx b/app/policy/page.tsx index 279695a..695aa34 100644 --- a/app/policy/page.tsx +++ b/app/policy/page.tsx @@ -1,7 +1,10 @@ +import { Main } from "../ui/Main"; +import { PageFooter } from "../ui/PageFooter"; +import { PageHeader } from "../ui/PageHeader"; const ConsentPage = () => -
-
+
+

Application Privacy Policy for Home Utility Bills Tracking Web App

1. Introduction

Welcome to our Home Utility Bills Tracking Web Application (“App”). This Privacy Policy is intended to inform you about how we collect, use, and disclose your personal information through the operation of the App.

@@ -32,6 +35,6 @@ const ConsentPage = () =>

11. Consent

By using our App, you consent to our privacy policy.

-
; +
; export default ConsentPage; \ No newline at end of file diff --git a/app/terms/page.tsx b/app/terms/page.tsx index d5ff8c6..2a3d958 100644 --- a/app/terms/page.tsx +++ b/app/terms/page.tsx @@ -1,7 +1,10 @@ +import { Main } from "../ui/Main"; +import { PageFooter } from "../ui/PageFooter"; +import { PageHeader } from "../ui/PageHeader"; const TermsPage = () => -
-
+
+

Terms of Service for Home Utility Bills Tracking Web Application

1. Introduction

Welcome to our Home Utility Bills Tracking Web Application (“App”). These Terms of Service (“Terms”) govern your access to and use of our App. By accessing or using the App, you agree to be bound by these Terms.

@@ -42,6 +45,6 @@ const TermsPage = () =>

11. Contact Us

If you have any questions about these Terms, please contact us at [Contact Information].

-
; +
; export default TermsPage; \ No newline at end of file diff --git a/app/ui/AddLocationButton.tsx b/app/ui/AddLocationButton.tsx index 9dbd30c..4adfd3d 100644 --- a/app/ui/AddLocationButton.tsx +++ b/app/ui/AddLocationButton.tsx @@ -1,6 +1,7 @@ import { PlusCircleIcon } from "@heroicons/react/24/outline"; import { YearMonth } from "../lib/db-types"; import { formatYearMonth } from "../lib/format"; +import Link from "next/link"; export interface AddLocationButtonProps { @@ -10,9 +11,9 @@ export interface AddLocationButtonProps { export const AddLocationButton:React.FC = ({yearMonth}) =>
- + - +
; \ No newline at end of file diff --git a/app/ui/AddMonthButton.tsx b/app/ui/AddMonthButton.tsx index 7f7b08a..31dd046 100644 --- a/app/ui/AddMonthButton.tsx +++ b/app/ui/AddMonthButton.tsx @@ -2,12 +2,17 @@ import { PlusCircleIcon } from "@heroicons/react/24/outline"; import React from "react"; import { formatYearMonth } from "../lib/format"; import { YearMonth } from "../lib/db-types"; +import Link from "next/link"; export interface AddMonthButtonProps { yearMonth: YearMonth; } export const AddMonthButton:React.FC = ({ yearMonth }) => - - - +
+ + + + + +
; diff --git a/app/ui/BillEditForm.tsx b/app/ui/BillEditForm.tsx index cb1055b..b0c2cd8 100644 --- a/app/ui/BillEditForm.tsx +++ b/app/ui/BillEditForm.tsx @@ -5,6 +5,7 @@ import { Bill } from "../lib/db-types"; import React, { FC } from "react"; import { useFormState } from "react-dom"; import { gotoHome, updateOrAddBill } from "../lib/actions/billActions"; +import Link from "next/link"; // Next.js does not encode an utf-8 file name correctly when sending a form with a file attachment // This is a workaround for that @@ -41,15 +42,15 @@ export const BillEditForm:FC = ({ locationID, bill }) => { } return( -
+
{ // don't show the delete button if we are adding a new bill bill ? - + - : null + : null } @@ -65,10 +66,10 @@ export const BillEditForm:FC = ({ locationID, bill }) => { // attachment ? - + {decodeURIComponent(attachment.fileName)} - + : null } diff --git a/app/ui/LocationCard.tsx b/app/ui/LocationCard.tsx index 71cd77d..26024a4 100644 --- a/app/ui/LocationCard.tsx +++ b/app/ui/LocationCard.tsx @@ -6,6 +6,7 @@ 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"; export interface LocationCardProps { location: BillingLocation @@ -17,19 +18,19 @@ export const LocationCard:FC = ({location: { _id, name, yearM const monthlyExpense = bills.reduce((acc, bill) => acc + (bill.payedAmount ?? 0), 0); return( -
+
- + - +

{formatYearMonth(yearMonth)} {name}

{ bills.map(bill => ) } - + - +
{ monthlyExpense > 0 ? diff --git a/app/ui/LocationEditForm.tsx b/app/ui/LocationEditForm.tsx index 5fd3c28..52b598e 100644 --- a/app/ui/LocationEditForm.tsx +++ b/app/ui/LocationEditForm.tsx @@ -6,6 +6,8 @@ import { BillingLocation, YearMonth } from "../lib/db-types"; import { updateOrAddLocation } from "../lib/actions/locationActions"; import { useFormState } from "react-dom"; import { gotoHome } from "../lib/actions/billActions"; +import { Main } from "./Main"; +import Link from "next/link"; export interface LocationEditFormProps { /** location which should be edited */ @@ -27,15 +29,15 @@ export const LocationEditForm:FC = ({ location, yearMonth }; return( -
-
+
+
{ location && - + - + }
@@ -66,11 +68,13 @@ export const LocationEditForm:FC = ({ location, yearMonth }
- - +
+ + +
-
+
) } diff --git a/app/ui/Main.tsx b/app/ui/Main.tsx new file mode 100644 index 0000000..c0ba54a --- /dev/null +++ b/app/ui/Main.tsx @@ -0,0 +1,16 @@ +import { FC } from "react"; +import { PageHeader } from "./PageHeader"; +import { PageFooter } from "./PageFooter"; + +export interface MainProps { + +} + +export const Main:FC = ({ children }) => +
+ +
+ {children} +
+ +
\ No newline at end of file diff --git a/app/ui/PageFooter.tsx b/app/ui/PageFooter.tsx index 5cc62a6..10d5a0c 100644 --- a/app/ui/PageFooter.tsx +++ b/app/ui/PageFooter.tsx @@ -1,8 +1,25 @@ +import Link from "next/link"; import React from "react"; -export const PageFooter:React.FC = () => <> -

Docs

-

tailwindcss.com

-

heroicons.com

-

daisyui.com

- +export const PageFooter: React.FC = () => +
+ +
; diff --git a/app/ui/PageHeader.tsx b/app/ui/PageHeader.tsx new file mode 100644 index 0000000..d33d0bd --- /dev/null +++ b/app/ui/PageHeader.tsx @@ -0,0 +1,6 @@ +import Link from "next/link"; + +export const PageHeader = () => +
+ Utility Bills Tracker +
\ No newline at end of file