knee-cola/evidencija-rezija
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

header & footer

Browse Source
This commit is contained in:
Nikola Derežić
2024-01-16 10:24:21 +01:00
parent 92eacc2764
commit 226beb974f
13 changed files with 101 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/ui/AddLocationButton.tsx
View File

@@ -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<AddLocationButtonProps> = ({yearMonth}) =>
<div className="card card-compact card-bordered max-w-[36em] bg-base-100 shadow-s my-1">
<a href={`/location/${ formatYearMonth(yearMonth) }/add`} className="card-body tooltip self-center" data-tip="Add a new billing location">
<Link href={`/location/${ formatYearMonth(yearMonth) }/add`} className="card-body tooltip self-center" data-tip="Add a new billing location">
<span className='grid self-center' data-tip="Add a new billing location">
<PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-4xl" />
</span>
</a>
</Link>
</div>;

11
app/ui/AddMonthButton.tsx
View File

@@ -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<AddMonthButtonProps> = ({ yearMonth }) =>
<a href={`/year-month/${formatYearMonth(yearMonth)}/add`} className='grid self-center tooltip' data-tip="Dodaj novi mjesec">
<PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-4xl" />
</a>
<div className="card card-compact card-bordered max-w-[36em] shadow-s my-1">
<Link href={`/year-month/${formatYearMonth(yearMonth)}/add`} className='grid self-center tooltip' data-tip="Dodaj novi mjesec">
<span className='grid self-center'>
<PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-4xl" />
</span>
</Link>
</div>;

11
app/ui/BillEditForm.tsx
View File

@@ -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<BillEditFormProps> = ({ locationID, bill }) => {
}
return(
<div className="card card-compact card-bordered max-w-sm bg-base-100 shadow-s my-1">
<div className="card card-compact card-bordered min-w-96 bg-base-100 shadow-s">
<div className="card-body">
<form action={ dispatch }>
{
// don't show the delete button if we are adding a new bill
bill ?
<a href={`/bill/${locationID}-${billID}/delete/`}>
<Link href={`/bill/${locationID}-${billID}/delete/`}>
<TrashIcon className="h-[1em] w-[1em] absolute cursor-pointer text-error bottom-5 right-4 text-2xl" />
</a> : null
</Link> : null
}
<input id="billName" name="billName" type="text" placeholder="Bill name" className="input input-bordered w-full" defaultValue={name} required />
@@ -65,10 +66,10 @@ export const BillEditForm:FC<BillEditFormProps> = ({ locationID, bill }) => {
// <textarea className="textarea textarea-bordered my-1 w-full max-w-sm block" placeholder="Opis" value="Pričuva, Voda, Smeće"></textarea>
attachment ?
<a href={`/attachment/${locationID}-${billID}/`} target="_blank" className='text-center block max-w-[24em] text-nowrap truncate inline-block mt-4'>
<Link href={`/attachment/${locationID}-${billID}/`} target="_blank" className='text-center block max-w-[24em] text-nowrap truncate inline-block mt-4'>
<DocumentIcon className="h-[1em] w-[1em] text-2xl inline-block mr-1" />
{decodeURIComponent(attachment.fileName)}
</a>
</Link>
: null
}
<input id="billAttachment" name="billAttachment" type="file" className="file-input file-input-bordered w-full max-w-sm file-input-xs my-2" />

11
app/ui/LocationCard.tsx
View File

@@ -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<LocationCardProps> = ({location: { _id, name, yearM
const monthlyExpense = bills.reduce((acc, bill) => acc + (bill.payedAmount ?? 0), 0);
return(
<div className="card card-compact card-bordered max-w-[36em] bg-base-100 shadow-s my-1">
<div className="card card-compact card-bordered min-w-96 max-w-[36em] bg-base-100 shadow-s my-1">
<div className="card-body">
<a href={`/location/${_id}/edit`} className="card-subtitle tooltip" data-tip="Edit Location">
<Link href={`/location/${_id}/edit`} className="card-subtitle tooltip" data-tip="Edit Location">
<Cog8ToothIcon className="h-[1em] w-[1em] absolute cursor-pointer top-3 right-3 text-2xl" />
</a>
</Link>
<h2 className="card-title mr-[2em]">{formatYearMonth(yearMonth)} {name}</h2>
<div className="card-actions">
{
bills.map(bill => <BillBadge key={`${bill._id}`} locationId={_id} bill={bill} />)
}
<a href={`/bill/${_id}/add`} className="tooltip" data-tip="Add a new bill">
<Link href={`/bill/${_id}/add`} className="tooltip" data-tip="Add a new bill">
<PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-2xl" />
</a>
</Link>
</div>
{
monthlyExpense > 0 ?

18
app/ui/LocationEditForm.tsx
View File

@@ -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<LocationEditFormProps> = ({ location, yearMonth
};
return(
<main>
<div className="card card-compact card-bordered max-w-sm bg-base-100 shadow-s my-1">
<Main>
<div className="card card-compact card-bordered min-w-96 bg-base-100 shadow-s my-1">
<div className="card-body">
<form action={dispatch}>
{
location &&
<a href={`/location/${location._id}/delete`} className="absolute bottom-5 right-4 tooltip" data-tip="Delete Location">
<Link href={`/location/${location._id}/delete`} className="absolute bottom-5 right-4 tooltip" data-tip="Delete Location">
<TrashIcon className="h-[1em] w-[1em] text-error text-2xl" />
</a>
</Link>
}
<input id="locationName" name="locationName" type="text" placeholder="Naziv lokacije" className="input input-bordered w-full" defaultValue={location?.name ?? ""} />
<div id="status-error" aria-live="polite" aria-atomic="true">
@@ -66,11 +68,13 @@ export const LocationEditForm:FC<LocationEditFormProps> = ({ location, yearMonth
}
</div>
<button className="btn btn-primary">Save</button>
<button type="button" className="btn btn-neutral ml-3" onClick={handleCancel}>Cancel</button>
<div className="pt-4">
<button className="btn btn-primary">Save</button>
<button type="button" className="btn btn-neutral ml-3" onClick={handleCancel}>Cancel</button>
</div>
</form>
</div>
</div>
</main>
</Main>
)
}

16
app/ui/Main.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { FC } from "react";
import { PageHeader } from "./PageHeader";
import { PageFooter } from "./PageFooter";
export interface MainProps {
}
export const Main:FC<MainProps> = ({ children }) =>
<main className="flex min-h-screen flex-col bg-base-300">
<PageHeader />
<div className="mx-auto px-4">
{children}
</div>
<PageFooter />
</main>

29
app/ui/PageFooter.tsx
View File

@@ -1,8 +1,25 @@
import Link from "next/link";
import React from "react";
export const PageFooter:React.FC = () => <>
<h2 className='text-xl text-sky-400/75 font-semibold mt-4'>Docs</h2>
<p><a href="https://tailwindcss.com/docs/" target="_blank">tailwindcss.com</a></p>
<p><a href="https://heroicons.com/" target="_blank">heroicons.com</a></p>
<p><a href="https://daisyui.com/components/" target="_blank">daisyui.com</a></p>
</>
export const PageFooter: React.FC = () =>
<div className="bg-base-100 text-base-content mt-10">
<footer className="footer mx-auto max-w-2xl px-4 py-10">
<div>
<div className="flex items-center gap-2">
<img src="/icon4.png"></img>
<div className="font-title inline-flex text-3xl font-black">Bills Tracker</div>
</div>
<p className="text-base-content/70 mb-5">Web app for tracking home utility bills</p>
<Link href="/" className="link link-hover">Home</Link>
<Link href="/policy/" className="link link-hover">Privacy Policy</Link>
<Link href="/terms/" className="link link-hover">Terms of Service</Link>
</div>
<div>
<span className="footer-title opacity-70">documents</span>
<a href="https://tailwindcss.com/docs/" target="_blank" className="link link-hover">tailwindcss.com</a>
<a href="https://heroicons.com/" target="_blank" className="link link-hover">heroicons.com</a>
<a href="https://daisyui.com/components/" target="_blank" className="link link-hover">daisyui.com</a>
</div>
</footer>
</div>;

6
app/ui/PageHeader.tsx Normal file
View File

@@ -0,0 +1,6 @@
import Link from "next/link";
export const PageHeader = () =>
<div className="navbar bg-base-100 mb-6">
<Link className="btn btn-ghost text-xl" href="/"><img src="/icon3.png"></img> Utility Bills Tracker</Link>
</div>