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} />

22
app/ui/LocationEditForm.tsx
View File

@@ -65,8 +65,9 @@ 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>
<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"
@@ -84,11 +85,12 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
))}
</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>
@@ -217,8 +219,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-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">
@@ -327,7 +329,7 @@ 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>
<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">
@@ -342,7 +344,7 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
) : (
<>
<InfoBox className="p-1 mb-1">{t("update-scope-info")}</InfoBox>
<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">

9
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>
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?"
}
}