diff --git a/README.md b/README.md index afdafaa..6aeaaa9 100644 --- a/README.md +++ b/README.md @@ -4,9 +4,6 @@ This is the starter template for the Next.js App Router Course. It contains the For more information, see the [course curriculum](https://nextjs.org/learn) on the Next.js Website. -## ToDo -Zadnje sam stao na koraku 12 (nisam ga dovršio): https://nextjs.org/learn/dashboard-app/mutating-data - # Authentication Authentication consists of the following parts: * `next-auth` boilerplate @@ -18,3 +15,9 @@ Authentication consists of the following parts: * `sidenav.tsx` = implements logout action - calls `signOut` from `auth.ts` * `login-form.tsx` = implements login form * `actions.ts` = handles login-form validation and submition - calls `signIn` from `auth.ts` + +# Database structure +* month + * location + * bill + * attachment diff --git a/app/lib/db-types.ts b/app/lib/db-types.ts new file mode 100644 index 0000000..c6ebaca --- /dev/null +++ b/app/lib/db-types.ts @@ -0,0 +1,12 @@ +export type Location = { + id: number; + name: string; +}; + +export type Bill = { + id: number; + name: string; + paid: boolean; + amount?: number; + description?: string; +}; diff --git a/app/page.tsx b/app/page.tsx index 4d0a546..b6be951 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -11,6 +11,13 @@ import { MapIcon, MapPinIcon } from '@heroicons/react/24/outline'; +import { LocationCard } from './ui/LocationCard'; +import { BillPaymentForm } from './ui/BillPaymentForm'; +import { LocationEditForm } from './ui/LocationEditForm'; +import { BillTemplateForm } from './ui/BillTemplateForm'; +import { MonthTitle } from './ui/MonthTitle'; +import { AddMonthButton } from './ui/AddMonthButton'; +import { AddLocationButton } from './ui/AddLocationButton'; export default function Page() { return ( @@ -18,108 +25,45 @@ export default function Page() {

https://tailwindcss.com/docs/font-weight

https://heroicons.com/

- - - + -
2023-05
+ -
-
- -

2023-05 Budakova

-
-
GSKG
-
HEP Elektra
-
Iskon
-
Plinara
-
- -
-
-
-
+ -
-
- -

2023-05 Kopernikova

-
-
GSKG
-
HEP Elektra
-
Iskon
-
Plinara
-
- -
-
-
-
+ -
-
- - - -
-
+ -
2023-06
+ -
-
- -

2023-05 Šišićeva

-
-
GSKG
-
HEP Elektra
-
Iskon
-
Plinara
- -
-
-
-
-
-
- - -

GSKG

-

Pričuva, Voda, Smeće

- - - 2023-22-12 document GSKG račun za 2023.pdf - - -
- -
- - - -
-
-
-
-
- - - -
-
-
-
-
-
- - - -
-
-
+ + + + + ); } diff --git a/app/ui/AddLocationButton.tsx b/app/ui/AddLocationButton.tsx new file mode 100644 index 0000000..25cfeac --- /dev/null +++ b/app/ui/AddLocationButton.tsx @@ -0,0 +1,14 @@ +import { PlusCircleIcon } from "@heroicons/react/24/outline"; + + +export interface AddLocationButtonProps { +} + +export const AddLocationButton:React.FC = () => +
+
+ + + +
+
; \ No newline at end of file diff --git a/app/ui/AddMonthButton.tsx b/app/ui/AddMonthButton.tsx new file mode 100644 index 0000000..8a14523 --- /dev/null +++ b/app/ui/AddMonthButton.tsx @@ -0,0 +1,9 @@ +import { PlusCircleIcon } from "@heroicons/react/24/outline"; + +export interface AddMonthButtonProps { +} + +export const AddMonthButton:FC = () => + + + diff --git a/app/ui/BillBadge.tsx b/app/ui/BillBadge.tsx new file mode 100644 index 0000000..c45aa72 --- /dev/null +++ b/app/ui/BillBadge.tsx @@ -0,0 +1,10 @@ +import { FC } from "react" +import { Bill } from "../lib/db-types" + +export interface BillBadgeProps { + bill: Bill, + // onClick:()=>void, +}; + +export const BillBadge:FC = ({bill: { name, paid }}) => +
{name}
\ No newline at end of file diff --git a/app/ui/BillPaymentForm.tsx b/app/ui/BillPaymentForm.tsx new file mode 100644 index 0000000..b3d696f --- /dev/null +++ b/app/ui/BillPaymentForm.tsx @@ -0,0 +1,32 @@ +import { Cog8ToothIcon, DocumentIcon, TrashIcon } from "@heroicons/react/24/outline"; +import { Bill } from "../lib/db-types"; +import { FC } from "react"; + +export interface BillPaymentFormProps { + bill: Bill +} + +export const BillPaymentForm:FC = ({ bill: { name, description, paid } }) => +
+
+
+ + +

{name}

+

{description}

+ + + 2023-22-12 document GSKG račun za 2023.pdf + + +
+ +
+ + + +
+
\ No newline at end of file diff --git a/app/ui/BillTemplateForm.tsx b/app/ui/BillTemplateForm.tsx new file mode 100644 index 0000000..8b23829 --- /dev/null +++ b/app/ui/BillTemplateForm.tsx @@ -0,0 +1,16 @@ +import { FC } from "react"; + +export interface BillTemplateFormProps { + +} + +export const BillTemplateForm:FC = () => +
+
+
+ + + +
+
+
; \ No newline at end of file diff --git a/app/ui/LocationCard.tsx b/app/ui/LocationCard.tsx new file mode 100644 index 0000000..a51d7bd --- /dev/null +++ b/app/ui/LocationCard.tsx @@ -0,0 +1,28 @@ +'client only'; + +import { Cog8ToothIcon, PlusCircleIcon } from "@heroicons/react/24/outline"; +import { FC } from "react"; +import { BillBadge } from "./BillBadge"; +import { Bill, Location } from "../lib/db-types"; + +export interface LocationCardProps { + month: Date, + location: Location, + bills: Bill[] +} + +export const LocationCard:FC = ({month, location: { name }, bills}) => +
+
+ +

{month.getFullYear()}-{month.getMonth()+1} {name}

+
+ { + bills.map(bill => ) + } +
+ +
+
+
+
; \ No newline at end of file diff --git a/app/ui/LocationEditForm.tsx b/app/ui/LocationEditForm.tsx new file mode 100644 index 0000000..4d21a12 --- /dev/null +++ b/app/ui/LocationEditForm.tsx @@ -0,0 +1,16 @@ +import { FC } from "react"; + +export interface LocationEditFormProps { + +} + +export const LocationEditForm:FC = () => +
+
+
+ + + +
+
+
\ No newline at end of file diff --git a/app/ui/MonthTitle.tsx b/app/ui/MonthTitle.tsx new file mode 100644 index 0000000..c657302 --- /dev/null +++ b/app/ui/MonthTitle.tsx @@ -0,0 +1,8 @@ +import { FC } from "react"; + +export interface MonthTitleProps { + month: Date; +} + +export const MonthTitle:FC = ({month}) => +
{`${month.getFullYear()}-${month.getMonth()+1}`}
\ No newline at end of file