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

Merge branch 'feature/improving-styling' into develop

Browse Source
This commit is contained in:
Knee Cola
2025-11-24 21:12:08 +01:00
parent fd0fbafb3a 248d29ef22
commit a37e0dc7c7
7 changed files with 133 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
app/ui/InfoBox.tsx
View File

@@ -1,9 +1,23 @@
import { ChevronDownIcon, ChevronUpIcon, QuestionMarkCircleIcon } from "@heroicons/react/24/outline";
import { useTranslations } from "next-intl";
import { FC, ReactNode } from "react";
export const InfoBox: FC<{ children: ReactNode, className?: string }> = ({ children, className }) =>
<div className={`alert max-w-md flex flex-row items-start gap-[0.5rem] ${className}`}>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="stroke-current shrink-0 w-6 h-6">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span className="text-left">{children}</span>
</div>
export const InfoBox: FC<{
children: ReactNode;
title?: string;
}> = ({ children, title }) => {
const t = useTranslations("info-box");
return (
<details className="group border border-gray-800 rounded-lg p-2 mb-1 max-w-md">
<summary className="flex cursor-pointer items-center justify-between">
<span className="font-bold"><QuestionMarkCircleIcon className="w-6 h-6 inline mr-1 mt-[-.3em] text-green-300" /> {title ?? t("default-title")}</span>
<span className="ml-2 text-sm text-gray-500 group-open:hidden"><ChevronDownIcon className="w-5 h-5 inline" /></span>
<span className="ml-2 text-sm text-gray-500 hidden group-open:inline"><ChevronUpIcon className="w-5 h-5 inline" /></span>
</summary>
<div className="mt-2 italic text-sm text-gray-400">{children}</div>
</details>
)
}

13
app/ui/LocationCard.tsx
View File

@@ -59,12 +59,13 @@ export const LocationCard: FC<LocationCardProps> = ({ location, currency }) => {
{monthlyExpense > 0 || seenByTenant || utilBillsProofOfPaymentUploadedAt ?
<>
<div className="divider mt-1 mb-0 font-bold uppercase">{t("monthly-statement-legend")}</div>
<fieldset className="card card-compact card-bordered border-1 border-neutral p-3 mt-2 mr-[3.5rem]">
<legend className="fieldset-legend px-2 text-sm font-semibold uppercase">{t("monthly-statement-legend")}</legend>
{
monthlyExpense > 0 ?
<div className="flex items-center gap-2 ml-4">
<div className="flex items-center gap-2 ml-2">
<BanknotesIcon className="h-5 w-5" />
{t("payed-total-label")} <strong>{formatCurrency(monthlyExpense, currency ?? "EUR")}</strong>
<CheckCircleIcon className="h-5 w-5 text-success" />
@@ -72,7 +73,7 @@ export const LocationCard: FC<LocationCardProps> = ({ location, currency }) => {
: null
}
{seenByTenant && (
<div className="flex items-center gap-2 mt-2 ml-4">
<div className="flex items-center gap-2 mt-[-0.2rem] ml-2">
<EyeIcon className="h-5 w-5" />
<span className="text-sm">{t("seen-by-tenant-label")}</span>
<CheckCircleIcon className="h-5 w-5 text-success" />
@@ -82,14 +83,14 @@ export const LocationCard: FC<LocationCardProps> = ({ location, currency }) => {
<Link
href={`/share/proof-of-payment/${_id}/`}
target="_blank"
className="flex items-center gap-2 mt-2 ml-4"
className="flex items-center gap-2 mt-[-0.2rem] ml-2"
>
<TicketIcon className="h-5 w-5" />
<span className="text-sm">{t("download-proof-of-payment-label")}</span>
<CheckCircleIcon className="h-5 w-5 text-success" />
</Link>
)}
</fieldset> : null
</>: null
}
<ShareIcon className="h-[1em] w-[1em] cursor-pointer text-2xl inline-block hover:text-red-500" title="create sharable link" style={{ position: "absolute", bottom: ".6em", right: "1.2em" }} onClick={handleCopyLinkClick} />

154
app/ui/LocationEditForm.tsx
View File

@@ -27,7 +27,7 @@ export type LocationEditFormProps = {
export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMonth, userSettings }) => {
const initialState = { message: null, errors: {} };
const handleAction = updateOrAddLocation.bind(null, location?._id, location?.yearMonth ?? yearMonth);
const [state, dispatch] = useFormState(handleAction, initialState);
@@ -65,30 +65,32 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
<TrashIcon className="h-[1em] w-[1em] text-error text-2xl" />
</Link>
}
<fieldset className="fieldset mt-2 p-2">
<legend className="fieldset-legend font-semibold uppercase">{t("location-name-legend")}</legend>
<input id="locationName"
name="locationName"
type="text"
placeholder={t("location-name-placeholder")}
className="input input-bordered w-full placeholder:text-gray-600"
value={formValues.locationName}
onChange={(e) => handleInputChange("locationName", e.target.value)}
<fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 pt-3 mt-4">
<legend className="fieldset-legend font-semibold uppercase text-base">{t("location-name-legend")}</legend>
<fieldset className="fieldset p-2 pt-0">
<input id="locationName"
name="locationName"
type="text"
placeholder={t("location-name-placeholder")}
className="input input-bordered w-full placeholder:text-gray-600"
value={formValues.locationName}
onChange={(e) => handleInputChange("locationName", e.target.value)}
/>
<div id="status-error" aria-live="polite" aria-atomic="true">
{state.errors?.locationName &&
state.errors.locationName.map((error: string) => (
<p className="mt-2 text-sm text-red-500" key={error}>
{error}
</p>
))}
</div>
<div id="status-error" aria-live="polite" aria-atomic="true">
{state.errors?.locationName &&
state.errors.locationName.map((error: string) => (
<p className="mt-2 text-sm text-red-500" key={error}>
{error}
</p>
))}
</div>
</fieldset>
</fieldset>
<fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 mt-4">
<legend className="fieldset-legend font-semibold uppercase">{t("tenant-payment-instructions-legend")}</legend>
<legend className="fieldset-legend font-semibold uppercase text-base">{t("tenant-payment-instructions-legend")}</legend>
<InfoBox className="p-1 pt-0 mb-1">{t("tenant-payment-instructions-code-info")}</InfoBox>
<InfoBox>{t("tenant-payment-instructions-code-info")}</InfoBox>
<fieldset className="fieldset mt-2 p-2">
<legend className="fieldset-legend">{t("tenant-payment-instructions-method--legend")}</legend>
@@ -105,7 +107,7 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
t("tenant-payment-instructions-method--iban") :
t("tenant-payment-instructions-method--iban-disabled")
}
</option>
</option>
<option value="revolut" disabled={!userSettings?.enableRevolutPayment}>
{
userSettings?.enableRevolutPayment ?
@@ -116,7 +118,7 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
</select>
</fieldset>
{ formValues.tenantPaymentMethod === "iban" && userSettings?.enableIbanPayment ? (
{formValues.tenantPaymentMethod === "iban" && userSettings?.enableIbanPayment ? (
<>
<div className="divider mt-4 mb-2 font-bold uppercase">{t("iban-payment--form-title")}</div>
<div className="form-control w-full">
@@ -192,33 +194,33 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
</div>
</>
) : // ELSE include hidden inputs to preserve existing values
<>
<input
id="tenantName"
name="tenantName"
type="hidden"
maxLength={30}
defaultValue={formValues.tenantName}
/>
<input
id="tenantStreet"
name="tenantStreet"
type="hidden"
className="input input-bordered w-full placeholder:text-gray-600"
defaultValue={formValues.tenantStreet}
/>
<input
id="tenantTown"
name="tenantTown"
type="hidden"
defaultValue={formValues.tenantTown}
/>
</>
<>
<input
id="tenantName"
name="tenantName"
type="hidden"
maxLength={30}
defaultValue={formValues.tenantName}
/>
<input
id="tenantStreet"
name="tenantStreet"
type="hidden"
className="input input-bordered w-full placeholder:text-gray-600"
defaultValue={formValues.tenantStreet}
/>
<input
id="tenantTown"
name="tenantTown"
type="hidden"
defaultValue={formValues.tenantTown}
/>
</>
}
</fieldset>
</fieldset>
<fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 mt-4">
<legend className="fieldset-legend font-semibold uppercase">{t("auto-utility-bill-forwarding-legend")}</legend>
<InfoBox className="p-1 mb-1">{t("auto-utility-bill-forwarding-info")}</InfoBox>
<legend className="fieldset-legend font-semibold uppercase text-base">{t("auto-utility-bill-forwarding-legend")}</legend>
<InfoBox>{t("auto-utility-bill-forwarding-info")}</InfoBox>
<fieldset className="fieldset">
<label className="label cursor-pointer justify-start gap-3">
@@ -246,8 +248,8 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
</fieldset>
<fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 mt-4">
<legend className="fieldset-legend font-semibold uppercase">{t("auto-rent-notification-legend")}</legend>
<InfoBox className="p-1 mb-1">{t("auto-rent-notification-info")}</InfoBox>
<legend className="fieldset-legend font-semibold uppercase text-base">{t("auto-rent-notification-legend")}</legend>
<InfoBox>{t("auto-rent-notification-info")}</InfoBox>
<fieldset className="fieldset">
<label className="label cursor-pointer justify-start gap-3">
@@ -270,7 +272,7 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
<select defaultValue={formValues.rentDueDay}
className="select input-bordered w-full"
name="rentDueDay"
onChange={(e) => handleInputChange("rentDueDay", parseInt(e.target.value,10))
onChange={(e) => handleInputChange("rentDueDay", parseInt(e.target.value, 10))
}>
{Array.from({ length: 28 }, (_, i) => i + 1).map(day => (
<option key={day} value={day}>{day}</option>
@@ -327,32 +329,32 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
)}
<fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 mt-4">
<legend className="fieldset-legend font-semibold uppercase">{t("scope-legend")}</legend>
{!location ? (
<fieldset className="fieldset">
<label className="label cursor-pointer justify-start gap-3">
<input
type="checkbox"
name="addToSubsequentMonths"
className="toggle toggle-primary"
/>
<legend className="fieldset-legend">{t("add-to-subsequent-months")}</legend>
</label>
</fieldset>
<legend className="fieldset-legend font-semibold uppercase text-base">{t("scope-legend")}</legend>
{!location ? (
<fieldset className="fieldset">
<label className="label cursor-pointer justify-start gap-3">
<input
type="checkbox"
name="addToSubsequentMonths"
className="toggle toggle-primary"
/>
<legend className="fieldset-legend">{t("add-to-subsequent-months")}</legend>
</label>
</fieldset>
) : (
<>
<InfoBox className="p-1 mb-1">{t("update-scope-info")}</InfoBox>
<fieldset className="fieldset mt-2 p-2">
<legend className="fieldset-legend">{t("update-scope-legend")}</legend>
<select defaultValue="current" className="select input-bordered w-full" name="updateScope">
<option value="current">{t("update-current-month")}</option>
<option value="subsequent">{t("update-subsequent-months")}</option>
<option value="all">{t("update-all-months")}</option>
</select>
</fieldset>
</>
)}
) : (
<>
<InfoBox>{t("update-scope-info")}</InfoBox>
<fieldset className="fieldset mt-2 p-2">
<legend className="fieldset-legend">{t("update-scope-legend")}</legend>
<select defaultValue="current" className="select input-bordered w-full" name="updateScope">
<option value="current">{t("update-current-month")}</option>
<option value="subsequent">{t("update-subsequent-months")}</option>
<option value="all">{t("update-all-months")}</option>
</select>
</fieldset>
</>
)}
</fieldset>
<div id="status-error" aria-live="polite" aria-atomic="true">
@@ -378,7 +380,7 @@ export const LocationEditFormSkeleton: FC = () => {
return (
<div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
<div className="card-body">
<fieldset className="fieldset mt-2 p-2">
<legend className="fieldset-legend font-semibold uppercase">{t("location-name-legend")}</legend>

11
app/ui/NoteBox.tsx
View File

@@ -1,7 +1,8 @@
import { CogIcon } from "@heroicons/react/24/outline";
import { FC, ReactNode } from "react";
export const NoteBox: FC<{ children: ReactNode, className?: string }> = ({ children, className }) =>
<div className={`alert max-w-md flex flex-row items-start gap-[.8rem] ml-1 ${className}`}>
<span className="w-6 h-6 text-xl">⚠️</span>
<span className="text-left">{children}</span>
</div>
export const NoteBox: FC<{ children: ReactNode }> = ({ children }) =>
<div className="group border border-gray-800 rounded-lg p-2 mb-1 max-w-md">
<div className="mt-2 italic text-sm"><CogIcon className="w-6 h-6 inline mt-[-.3em] text-blue-400" /> {children}</div>
</div>

14
app/ui/UserSettingsForm.tsx
View File

@@ -49,7 +49,7 @@ const FormFields: FC<FormFieldsProps> = ({ userSettings, errors, message }) => {
return (
<>
<fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pt-1 pb-2 mt-4">
<legend className="fieldset-legend font-semibold uppercase">{t("general-settings-legend")}</legend>
<legend className="fieldset-legend font-semibold uppercase text-base">{t("general-settings-legend")}</legend>
<div className="form-control w-full">
<label className="label">
@@ -111,9 +111,9 @@ const FormFields: FC<FormFieldsProps> = ({ userSettings, errors, message }) => {
</fieldset>
<fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 mt-4">
<legend className="fieldset-legend font-semibold uppercase">{t("iban-payment-instructions--legend")}</legend>
<legend className="fieldset-legend font-semibold uppercase text-base">{t("iban-payment-instructions--legend")}</legend>
<InfoBox className="p-1 mb-1">{t("iban-payment-instructions--intro-message")}</InfoBox>
<InfoBox>{t("iban-payment-instructions--intro-message")}</InfoBox>
<fieldset className="fieldset">
<label className="label cursor-pointer justify-start gap-3">
@@ -230,7 +230,7 @@ const FormFields: FC<FormFieldsProps> = ({ userSettings, errors, message }) => {
</div>
</div>
<NoteBox className="p-1 mt-1">{t("payment-additional-notes")}</NoteBox>
<NoteBox>{t("payment-additional-notes")}</NoteBox>
</>
) : // ELSE include hidden inputs to preserve existing values
<>
@@ -263,9 +263,9 @@ const FormFields: FC<FormFieldsProps> = ({ userSettings, errors, message }) => {
</fieldset>
<fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 mt-4">
<legend className="fieldset-legend font-semibold uppercase">{t("revolut-payment-instructions--legend")}</legend>
<legend className="fieldset-legend font-semibold uppercase text-base">{t("revolut-payment-instructions--legend")}</legend>
<InfoBox className="p-1 mb-1">{t("revolut-payment-instructions--intro-message")}</InfoBox>
<InfoBox>{t("revolut-payment-instructions--intro-message")}</InfoBox>
<fieldset className="fieldset">
<label className="label cursor-pointer justify-start gap-3">
@@ -325,7 +325,7 @@ const FormFields: FC<FormFieldsProps> = ({ userSettings, errors, message }) => {
) : null
}
</div>
<NoteBox className="p-1 mt-1">{t("payment-additional-notes")}</NoteBox>
<NoteBox>{t("payment-additional-notes")}</NoteBox>
</>
)
: // ELSE include hidden input to preserve existing value

9
messages/en.json
View File

@@ -204,7 +204,8 @@
"title": "User settings",
"iban-payment-instructions--legend": "Payment to Your IBAN",
"iban-payment-instructions--intro-message": "By activating this option, payment instructions will be included in the monthly statement sent to the tenant, allowing a direct payment via IBAN to be made to your bank account.",
"iban-payment-instructions--intro-title": "What does this option do?",
"iban-payment-instructions--intro-message": "By activating this option, the monthly statement sent to the tenant will contain payment details and a 2D barcode allowing a direct payment to your bank account.",
"iban-payment-instructions--toggle-label": "enable IBAN payment instructions",
"iban-form-title": "Payment Information for IBAN",
@@ -220,7 +221,8 @@
"revolut-form-title": "Payment Information for Revolut",
"revolut-payment-instructions--legend": "Payment to Your Revolut Profile",
"revolut-payment-instructions--intro-message": "By activating this option, payment instructions will be included in the monthly statement sent to the tenant, allowing a direct payment via Revolut to be made to your Revolut profile.",
"revolut-payment-instructions--intro-title": "What does this option do?",
"revolut-payment-instructions--intro-message": "By activating this option, the monthly statement sent to the tenant will contain a link allowing a direct payment to your Revolut account.",
"revolut-payment-instructions--toggle-label": "enable Revolut payment instructions",
"revolut-profile-label": "Revolut profile name",
@@ -246,5 +248,8 @@
"owner-revolut-profile-invalid": "Invalid Revolut profile format. Must start with '@' and contain only English letters and numbers (e.g., '@john123')",
"validation-failed": "Validation failed. Please check the form and try again."
}
},
"info-box": {
"default-title": "What is this option for?"
}
}

11
messages/hr.json
View File

@@ -203,8 +203,8 @@
"title": "Korisničke postavke",
"iban-payment-instructions--legend": "Uplata na vaš IBAN",
"iban-payment-instructions--intro-message": "Aktiviranjem ove opcije, upute za uplatu bit će uključene u mjesečni izvještaj poslan podstanaru, omogućujući im da izvrše izravnu uplatu putem IBAN-a na vaš bankovni račun.",
"iban-payment-instructions--toggle-label": "uključi IBAN uplatu",
"iban-payment-instructions--intro-message": "Aktiviranjem ove opcije, mjesečni obračun poslan podstanaru sadržavati će podatke za uplatu i 2D barkod putem kojeg će podstanar moći izvršiti izravnu uplatu sredstava na bankovni račun.",
"iban-payment-instructions--toggle-label": "omogući IBAN uplatu",
"iban-form-title": "Informacije za uplatu na IBAN",
"iban-owner-name-label": "Vaše ime i prezime",
@@ -217,8 +217,8 @@
"iban-owner-iban-placeholder": "IBAN putem kojeg ćete primate uplate",
"revolut-payment-instructions--legend": "Uplata na vaš Revolut profil",
"revolut-payment-instructions--intro-message": "Aktiviranjem ove opcije, upute za uplatu bit će uključene u mjesečni izvještaj poslan podstanaru, omogućujući im da izvrše izravnu uplatu putem Revolut-a na vaš profil.",
"revolut-payment-instructions--toggle-label": "uključi Revolut uplatu",
"revolut-payment-instructions--intro-message": "Aktiviranjem ove opcije, mjesečni obračun poslan podstanaru sadržavati će link putem kojeg će podstanar moći izvršiti izravnu uplatu sredstava na vaš Revolut račun.",
"revolut-payment-instructions--toggle-label": "omogući Revolut uplatu",
"revolut-form-title": "Informacije za uplatu na Revolut",
"revolut-profile-label": "Naziv vašeg Revolut profila",
@@ -243,5 +243,8 @@
"validation-failed": "Validacija nije uspjela. Molimo provjerite formu i pokušajte ponovno."
},
"payment-additional-notes": "VAŽNO: da bi upute za uplatu bile prikazane podstanaru, morate tu ovu opciju uključiti i u postavkama pripadajuće nekretnine."
},
"info-box": {
"default-title": "Čemu služi ova opcija?"
}
}