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
}
{attachment ? (
<div className="mt-4">
<Link
href={`/share/proof-of-payment/${_id}/`}
target="_blank"
className='text-center w-full max-w-[20em] text-nowrap truncate inline-block'
>
<DocumentIcon className="h-[1em] w-[1em] text-2xl inline-block mr-1" />
{decodeURIComponent(attachment.fileName)}
</Link>
</div>
) : (
<div className="form-control w-full mb-4 mt-4">
<label className="label">
<span className="label-text">{t("upload-proof-of-payment-label")}</span>
</label>
<div className="flex items-center gap-2">
<input
id="utilBillsProofOfPaymentAttachment"
name="utilBillsProofOfPaymentAttachment"
type="file"
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"
onChange={handleFileChange}
disabled={isUploading}
/>
{isUploading && (
<span className="loading loading-spinner loading-sm"></span>
<fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 pt-0 mt-2">
<legend className="fieldset-legend font-semibold uppercase">{t("upload-proof-of-payment-legend")}</legend>
{attachment ? (
<div className="mt-3 ml-[-.5rem]">
<Link
href={`/share/proof-of-payment/${_id}/`}
target="_blank"
className='text-center w-full max-w-[20rem] text-nowrap truncate inline-block'
>
<DocumentIcon className="h-[1em] w-[1em] text-2xl inline-block mr-1" />
{decodeURIComponent(attachment.fileName)}
</Link>
</div>
) : (
<div className="form-control w-full">
<label className="label">
<span className="label-text">{t("upload-proof-of-payment-label")}</span>
</label>
<div className="flex items-center gap-2">
<input
id="utilBillsProofOfPaymentAttachment"
name="utilBillsProofOfPaymentAttachment"
type="file"
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"
onChange={handleFileChange}
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>
{uploadError && (
<p className="text-sm text-red-500 mt-1">{uploadError}</p>
)}
</div>
)}
)}
</fieldset>
</div>
</div>);
};

3
messages/en.json
View File

@@ -68,7 +68,8 @@
"payment-reference-label": "Reference number:",
"payment-purpose-code-label": "Purpose code:",
"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": {
"payed-total-label": "Total monthly expenditure:",

3
messages/hr.json
View File

@@ -68,7 +68,8 @@
"payment-reference-label": "Poziv na broj:",
"payment-purpose-code-label": "Šifra namjene:",
"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": {
"payed-total-label": "Ukupni mjesečni trošak:",