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

Improve proof of payment upload UI with fieldset styling

Browse Source 
Changes:
- Wrapped upload section in a styled fieldset with legend
- Adjusted spacing and layout for better visual hierarchy
- Updated translations:
  - Added "upload-proof-of-payment-legend" key
  - English: "Proof of payment"
  - Croatian: "Potvrda o uplati"
  - Updated label text to be more descriptive
  - English: "Here you can upload proof of payment:"
  - Croatian: "Ovdje možete priložiti potvrdu o uplati:"

The upload section now has a consistent fieldset styling
matching other sections of the form.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Knee Cola
2025-11-22 23:56:56 +01:00
parent 6df9557921
commit dbe2b08e1c
3 changed files with 41 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
app/ui/ViewLocationCard.tsx
View File

@@ -122,41 +122,45 @@ export const ViewLocationCard:FC<ViewLocationCardProps> = ({location, userSettin
</> </>
: null : null
} }
{attachment ? ( <fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 pt-0 mt-2">
<div className="mt-4"> <legend className="fieldset-legend font-semibold uppercase">{t("upload-proof-of-payment-legend")}</legend>
<Link
href={`/share/proof-of-payment/${_id}/`} {attachment ? (
target="_blank" <div className="mt-3 ml-[-.5rem]">
className='text-center w-full max-w-[20em] text-nowrap truncate inline-block' <Link
> href={`/share/proof-of-payment/${_id}/`}
<DocumentIcon className="h-[1em] w-[1em] text-2xl inline-block mr-1" /> target="_blank"
{decodeURIComponent(attachment.fileName)} className='text-center w-full max-w-[20rem] text-nowrap truncate inline-block'
</Link> >
</div> <DocumentIcon className="h-[1em] w-[1em] text-2xl inline-block mr-1" />
) : ( {decodeURIComponent(attachment.fileName)}
<div className="form-control w-full mb-4 mt-4"> </Link>
<label className="label"> </div>
<span className="label-text">{t("upload-proof-of-payment-label")}</span> ) : (
</label> <div className="form-control w-full">
<div className="flex items-center gap-2"> <label className="label">
<input <span className="label-text">{t("upload-proof-of-payment-label")}</span>
id="utilBillsProofOfPaymentAttachment" </label>
name="utilBillsProofOfPaymentAttachment" <div className="flex items-center gap-2">
type="file" <input
accept="application/pdf" id="utilBillsProofOfPaymentAttachment"
className="file-input file-input-bordered grow file-input-sm my-2 block max-w-[17em] md:max-w-[80em] break-words" name="utilBillsProofOfPaymentAttachment"
onChange={handleFileChange} type="file"
disabled={isUploading} accept="application/pdf"
/> className="file-input file-input-bordered grow file-input-sm my-2 block max-w-[17em] md:max-w-[80em] break-words"
{isUploading && ( onChange={handleFileChange}
<span className="loading loading-spinner loading-sm"></span> disabled={isUploading}
/>
{isUploading && (
<span className="loading loading-spinner loading-sm"></span>
)}
</div>
{uploadError && (
<p className="text-sm text-red-500 mt-1">{uploadError}</p>
)} )}
</div> </div>
{uploadError && ( )}
<p className="text-sm text-red-500 mt-1">{uploadError}</p> </fieldset>
)}
</div>
)}
</div> </div>
</div>); </div>);
}; };

3
messages/en.json
View File

@@ -68,7 +68,8 @@
"payment-reference-label": "Reference number:", "payment-reference-label": "Reference number:",
"payment-purpose-code-label": "Purpose code:", "payment-purpose-code-label": "Purpose code:",
"payment-description-label": "Payment description:", "payment-description-label": "Payment description:",
"upload-proof-of-payment-label": "Upload proof of payment:" "upload-proof-of-payment-legend": "Proof of payment",
"upload-proof-of-payment-label": "Here you can upload proof of payment:"
}, },
"month-card": { "month-card": {
"payed-total-label": "Total monthly expenditure:", "payed-total-label": "Total monthly expenditure:",

3
messages/hr.json
View File

@@ -68,7 +68,8 @@
"payment-reference-label": "Poziv na broj:", "payment-reference-label": "Poziv na broj:",
"payment-purpose-code-label": "Šifra namjene:", "payment-purpose-code-label": "Šifra namjene:",
"payment-description-label": "Opis plaćanja:", "payment-description-label": "Opis plaćanja:",
"upload-proof-of-payment-label": "Priložite potvrdu o uplati:" "upload-proof-of-payment-legend": "Potvrda o uplati",
"upload-proof-of-payment-label": "Ovdje možete priložiti potvrdu o uplati:"
}, },
"month-card": { "month-card": {
"payed-total-label": "Ukupni mjesečni trošak:", "payed-total-label": "Ukupni mjesečni trošak:",