dovršen rendering homepage-a

app/ui/BillBadge.tsx

@@ -2,9 +2,8 @@ import { FC } from "react"
 import { Bill } from "../lib/db-types"
 
 export interface BillBadgeProps {
-    bill: Bill,
-    // onClick:()=>void,
+    bill: Bill
 };
 
 export const BillBadge:FC<BillBadgeProps> = ({bill: { name, paid }}) =>
-    <div className={`badge badge-lg badge-${paid?"success":"neutral"} cursor-pointer`}>{name}</div>
+    <div className={`badge badge-lg ${paid} ${paid?"badge-success":" badge-outline"} cursor-pointer`}>{name}</div>

app/ui/LocationCard.tsx

@@ -4,21 +4,20 @@ import { Cog8ToothIcon, PlusCircleIcon } from "@heroicons/react/24/outline";
 import { FC } from "react";
 import { BillBadge } from "./BillBadge";
 import { Bill, Location } from "../lib/db-types";
+import { formatYearMonth } from "../lib/format";
 
 export interface LocationCardProps {
-    month: Date,
-    location: Location,
-    bills: Bill[]
+    location: Location
 }
 
-export const LocationCard:FC<LocationCardProps> = ({month, location: { name }, bills}) => 
+export const LocationCard:FC<LocationCardProps> = ({location: { name, yearMonth, bills }}) => 
 <div className="card card-compact card-bordered max-w-[36em] bg-base-100 shadow-s my-1">
     <div className="card-body">
     <Cog8ToothIcon className="h-[1em] w-[1em] absolute cursor-pointer top-3 right-3 text-2xl" />
-    <h2 className="card-title">{month.getFullYear()}-{month.getMonth()+1} {name}</h2>
+    <h2 className="card-title">{formatYearMonth(yearMonth)} {name}</h2>
     <div className="card-actions">
         {
-            bills.map(bill => <BillBadge key={bill.id} bill={bill} />)
+            bills.map(bill => <BillBadge key={`${bill.id}`} bill={bill} />)
         }
         <div className="tooltip" data-tip="Dodaj novi tip računa">
             <PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-2xl" />

app/ui/MonthTitle.tsx

@@ -1,8 +1,9 @@
 import { FC } from "react";
+import { formatYearMonth } from "../lib/format";
 
 export interface MonthTitleProps {
-    month: Date;
+    yearMonth: number;
 }
 
-export const MonthTitle:FC<MonthTitleProps> = ({month}) =>
-<div className="divider text-2xl">{`${month.getFullYear()}-${month.getMonth()+1}`}</div>
+export const MonthTitle:FC<MonthTitleProps> = ({yearMonth}) =>
+<div className="divider text-2xl">{`${formatYearMonth(yearMonth)}`}</div>