From 010bd09d47cb214275fa577c9b0edf6855ec3017 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nikola=20Dere=C5=BEi=C4=87?= <nikola.derezic@gmail.com>
Date: Tue, 13 Feb 2024 11:16:07 +0100
Subject: [PATCH 1/2] BillEditForm: payed amount in same line with checkbox

---
 app/ui/BillEditForm.tsx | 56 ++++++++++++++++++++---------------------
 1 file changed, 27 insertions(+), 29 deletions(-)

diff --git a/app/ui/BillEditForm.tsx b/app/ui/BillEditForm.tsx
index 41076e2..9565fd3 100644
--- a/app/ui/BillEditForm.tsx
+++ b/app/ui/BillEditForm.tsx
@@ -35,13 +35,17 @@ export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
 
     const [ state, dispatch ] = useFormState(handleAction, initialState);
     const [ isPaid, setIsPaid ] = React.useState<boolean>(paid);
-    const [ payedAmount, setPayedAmount ] = React.useState<number>(initialPayedAmount ?? 0);
+    const [ payedAmount, setPayedAmount ] = React.useState<string>(initialPayedAmount ? `${initialPayedAmount/100}` : "" );
     const [ barcodeImage, setBarcodeImage ] = React.useState<string | undefined>(initialBarcodeImage);
 
     const billPaid_handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         setIsPaid(event.target.checked);
     }
 
+    const payedAmount_handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setPayedAmount(event.target.value);
+    }
+
     const billAttachment_handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         findDecodePdf417(event)
             .then(result => {
@@ -51,7 +55,7 @@ export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
                         billInfo
                     } = result;
 
-                    setPayedAmount(billInfo.amount);
+                    setPayedAmount(`${billInfo.amount/100}`);
                     setBarcodeImage(barcodeImage);
                 }
             });
@@ -98,34 +102,28 @@ export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
                         </p>
                     ))}
                 </div>
-
-                <div className="form-control w-32 p-1">
-                    <label className="cursor-pointer label p-0">
-                        <span className="label-text flex-none w-[6.4em]">Paid</span> 
-                        <span>
+                <div className="flex">
+                    <div className="form-control flex-row">
+                        <label className="cursor-pointer label align-middle">
+                            <span className="label-text mr-[1em]">Paid</span> 
                             <input id="billPaid" name="billPaid" type="checkbox" className="toggle toggle-success" defaultChecked={paid} onChange={billPaid_handleChange} />
-                        </span>
-                    </label>
+                        </label>
+                    </div>
+                    <div className="form-control">
+                        <label className="cursor-pointer label">
+                            <span className="label-text mx-[1em]">Amount</span> 
+                            <input type="text" id="payedAmount" name="payedAmount" className="input input-bordered text-right w-[9.2em]" placeholder="0.00" value={payedAmount} onFocus={e => e.target.select()} onChange={payedAmount_handleChange} />
+                        </label>
+                    </div>
+                </div>
+                <div id="status-error" aria-live="polite" aria-atomic="true">
+                    {state.errors?.payedAmount &&
+                    state.errors.payedAmount.map((error: string) => (
+                        <p className="mt-2 text-sm text-red-500" key={error}>
+                        {error}
+                        </p>
+                    ))}
                 </div>
-
-                {
-                    isPaid && <>
-                        <div className="form-control p-1">
-                            <label className="cursor-pointer label p-0 flex">
-                                <span className="label-text flex-none w-[6.4em]">Amount</span> 
-                                <input type="text" id="payedAmount" name="payedAmount" className="input input-bordered text-right w-full" placeholder="0.00" defaultValue={payedAmount/100}/>
-                            </label>
-                        </div>
-                        <div id="status-error" aria-live="polite" aria-atomic="true">
-                            {state.errors?.payedAmount &&
-                            state.errors.payedAmount.map((error: string) => (
-                                <p className="mt-2 text-sm text-red-500" key={error}>
-                                {error}
-                                </p>
-                            ))}
-                        </div>
-                    </>
-                }
 
                 <input type="hidden" name="barcodeImage" value={barcodeImage} />
                 {
@@ -133,7 +131,7 @@ export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
                     <div className="form-control w-[325px] p-1">
                         <label className="cursor-pointer label p-0">
                             <span>
-                                <img src={barcodeImage} style={{ maxWidth:"325px" }} />
+                                <img src={barcodeImage} className="max-w-[325px]" />
                             </span>
                         </label>
                     </div> : null

From aa6cc8714f0b78f3edfcdf95eeac6b4dad3909b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nikola=20Dere=C5=BEi=C4=87?= <nikola.derezic@gmail.com>
Date: Tue, 13 Feb 2024 11:25:58 +0100
Subject: [PATCH 2/2] improved AddLocation & AddMonth icons

---
 app/ui/AddLocationButton.tsx | 7 ++++---
 app/ui/AddMonthButton.tsx    | 7 ++++---
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/app/ui/AddLocationButton.tsx b/app/ui/AddLocationButton.tsx
index 1c200aa..f0a7ff2 100644
--- a/app/ui/AddLocationButton.tsx
+++ b/app/ui/AddLocationButton.tsx
@@ -1,4 +1,4 @@
-import { PlusCircleIcon } from "@heroicons/react/24/outline";
+import { PlusCircleIcon, HomeIcon } from "@heroicons/react/24/outline";
 import { YearMonth } from "../lib/db-types";
 import { formatYearMonth } from "../lib/format";
 import Link from "next/link";
@@ -12,8 +12,9 @@ export interface AddLocationButtonProps {
 export const AddLocationButton:React.FC<AddLocationButtonProps> = ({yearMonth}) =>
 <div className="card card-compact card-bordered bg-base-100 shadow-s my-1">
     <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 className='flex self-center' data-tip="Add a new billing location">
+            <HomeIcon className="h-[1em] w-[1em] cursor-pointer text-4xl" />
+            <PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-xl text-green-500 ml-[-.6em] mt-[-.4em]"  />
         </span>
     </Link>
 </div>;
\ No newline at end of file
diff --git a/app/ui/AddMonthButton.tsx b/app/ui/AddMonthButton.tsx
index 7616b71..af8e0f9 100644
--- a/app/ui/AddMonthButton.tsx
+++ b/app/ui/AddMonthButton.tsx
@@ -1,4 +1,4 @@
-import { PlusCircleIcon } from "@heroicons/react/24/outline";
+import { PlusCircleIcon, CalendarDaysIcon } from "@heroicons/react/24/outline";
 import React from "react";
 import { formatYearMonth } from "../lib/format";
 import { YearMonth } from "../lib/db-types";
@@ -11,8 +11,9 @@ export interface AddMonthButtonProps {
 export const AddMonthButton:React.FC<AddMonthButtonProps> = ({ yearMonth }) =>
 <div className="card card-compact shadow-s mb-4">
     <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 className='flex self-center'>
+            <CalendarDaysIcon className="h-[1em] w-[1em] cursor-pointer text-4xl"  />
+            <PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-xl text-green-500 ml-[-.4em] mt-[-.4em]"  />
         </span>
     </Link>
 </div>;