- Convert InfoBox to collapsible details element with chevron indicators
- Add internationalized default title support for InfoBox
- Update NoteBox styling to match new design system
- Replace custom alert styling with consistent border-based design
- Add text-base class to fieldset legends for uniform sizing
- Remove className prop from InfoBox and NoteBox (no longer needed)
- Update translations for clearer payment instruction descriptions
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Remove disabled attribute from select - users can now always see all options
- Add conditional option labels showing "(disabled in app settings)" for unavailable methods
- Add userSettings check to IBAN form display condition
- Remove NoteBox warning (replaced by inline disabled labels in options)
- Remove unused NoteBox import
- Remove redundant InfoBox message
- Add English and Croatian translations for disabled option labels
- Clean up removed translation keys
Better UX: Users can now see why payment options are unavailable directly in the dropdown.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add userSettings prop to LocationEditForm to check payment configuration
- Disable payment method dropdown when neither IBAN nor Revolut is enabled
- Force select value to "none" when both methods are disabled
- Disable individual IBAN/Revolut options when not configured
- Display NoteBox warning explaining why payment options are unavailable
- Update LocationEditPage and LocationAddPage to fetch and pass userSettings
- Add English and Croatian translations for disabled state message
This prevents users from configuring location payment methods before setting up their own payment info.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Move styling classes (padding, background, border) directly to QRCode component
- Keep amount in cents as integer instead of converting to decimal (Revolut API expects cents)
- Fix URL template string (remove extra closing brace)
- Remove empty line for cleaner code
- Add space between size and className attributes
Amount format: from (monthlyExpense / 100).toFixed(2) to monthlyExpense.toFixed(0)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Install react-qr-code package for QR code generation
- Replace placeholder with actual QR code component in ViewLocationCard
- QR code displays Revolut payment URL with amount, currency, and profile
- Center-aligned QR code (200x200px) in white container with border
- Extract revolutPaymentUrl to single variable for reuse in QR code and link
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add tooltip under Revolut profile input explaining where to find the profile name
- Add test payment link that appears when profile name is valid (>5 chars)
- Reorder ViewLocationCard payment UI: QR code placeholder first, link below centered
- Replace hardcoded text with translation keys for better i18n support
- Add English and Croatian translations for test link and payment button
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Display Revolut payment link when enableRevolutPayment is enabled and tenantPaymentMethod is "revolut"
- Generate payment link with profile name (@ symbol removed), amount, currency, and reference
- Convert amount from cents to main currency unit (divide by 100, fixed to 2 decimals)
- Add placeholder for QR code (to be implemented)
- Remove unused import (inspector)
Payment link format: https://revolut.me/{profile}?amount={amount}¤cy={currency}&reference={text}🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Replace generateTenantCode boolean field with tenantPaymentMethod enum ("none" | "iban" | "revolut")
- Update LocationEditForm to use dropdown select instead of toggle for payment method selection
- Consolidate multiple useState hooks into single formValues state object
- Change from defaultValue to controlled components with value/onChange pattern
- Add hidden inputs to preserve tenant data when payment method is not selected
- Update validation logic to check tenantPaymentMethod === "iban"
- Update ViewLocationCard to use new tenantPaymentMethod field
- Add Croatian translations for new dropdown options
This provides better scalability for adding future payment methods and improves form state management.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Replace showPaymentInstructionsInMonthlyStatement dropdown with enableIbanPayment and enableRevolutPayment boolean toggles
- Update UserSettingsForm to use separate fieldsets for IBAN and Revolut with independent toggle switches
- Add hidden inputs to preserve values when toggles are disabled
- Update validation logic to check enableIbanPayment instead of show2dCodeInMonthlyStatement
- Reorganize translation keys to match new structure (iban-* and revolut-* prefixes)
- Update ViewLocationCard to use enableIbanPayment field
This provides better UX by allowing users to enable both payment methods simultaneously if needed.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add NoteBox component for displaying warning messages with icon
- Add Revolut profile name field to user settings schema
- Update UserSettingsForm to support payment instruction selection (disabled/IBAN/Revolut)
- Add Croatian and English translations for new payment options
- Reserve fields for future per-instruction enable/disable functionality
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Renamed "2D CODE" feature to "PAYMENT INSTRUCTIONS" for better clarity
and disabled incomplete auto-forwarding features.
Changes:
- Renamed tenant 2D code section to "Payment Instructions"
- Updated labels to reflect that feature shows payment instructions + 2D code
- Added InfoBox with important note about required app settings (name & IBAN)
- Disabled auto bill forwarding toggle (feature incomplete)
- Disabled rent due notification toggle (feature incomplete)
- Updated translations in both English and Croatian
The new naming better reflects what the feature does: showing payment
instructions with IBAN details and a scannable 2D code to tenants.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added conditional check to display proof of payment link only when
utilBillsProofOfPaymentAttachment is present in LocationCard.
Previously the link was always rendered, even when no attachment
was uploaded. This fix ensures the link only appears when there's
actually a proof of payment file available.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added justify-center class to label elements containing Pdf417Barcode
component for better visual alignment.
Changes:
- BillEditForm: Center barcode in form display
- ViewBillCard: Center barcode in read-only view
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit completes the migration from storing bitmap barcodes to using
decoded HUB-3A text strings, removing all legacy code while maintaining
backward compatibility during the transition period.
Database & Server Actions:
- billActions: Removed commented legacy barcodeImage code
- locationActions: Updated field references in projections
- monthActions: Use hub3aText when copying bills to new months
- printActions: Support both hub3aText and barcodeImage during migration
- Added @deprecated annotation to barcodeImage field
- Filter includes bills with either field
- Pass both fields to support gradual migration
Barcode Decoder:
- Removed barcodeImage field from DecodeResult type
- Deleted copyBarcodeImage() function (58 lines)
- No longer generating bitmaps during decode
- Barcodes now generated on-demand from hub3aText
- Cleaner separation: decoder extracts text, component renders barcode
UI Components:
- Pdf417Barcode: Added optional className prop for styling flexibility
- Removed unnecessary wrapper div
- Conditional styling (use className or default dimensions)
- PrintPreview: Use Pdf417Barcode component with fallback to legacy barcodeImage
- ViewBillCard: Major cleanup and migration support
- Removed unused imports (React, updateOrAddBill, useLocale)
- Removed unused middleware function
- Removed unused variables and hidden input
- Prefer hub3aText with Pdf417Barcode, fallback to barcodeImage
- Clear legacy support comments
Migration Strategy:
All rendering code now follows the pattern:
1. Prefer hub3aText (new field) when available
2. Fallback to barcodeImage (legacy field) if needed
3. Clear comments marking legacy support code
4. Allows gradual migration without breaking existing bills
Benefits:
- More efficient storage (text vs base64 bitmap)
- Barcodes generated on-demand (not stored)
- Cleaner, more maintainable code
- Consistent use of Pdf417Barcode component
- Removed ~60 lines of unused code
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Database & Types:
- Added hub3aText field to Bill interface in db-types.ts
- Marked barcodeImage as @deprecated legacy field
Server Actions:
- Updated billActions to read/write hub3aText instead of barcodeImage
- Commented out legacy barcodeImage code with migration notes
Barcode Decoder:
- Renamed image2canvas to file2canvas for clarity
- Added new image2canvas function for base64 encoded images (migration support)
- Added hub3aText to DecodeResult type
- Exported decodeFromImage function for legacy data migration
- Updated decoding logic to extract and return hub3aText
UI Components:
- Refactored Pdf417Barcode to accept hub3aText string instead of PaymentParams
- Removed EncodePayment call from Pdf417Barcode (now expects pre-encoded text)
- Updated ViewLocationCard to encode payment params before passing to Pdf417Barcode
This completes the refactoring from storing bitmap images to storing decoded
HUB-3A payment strings, providing more efficient storage and easier data manipulation.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Changed from storing base64-encoded bitmap to decoded HUB-3A payment string
- Implemented migration logic to convert legacy barcodeImage to hub3aText on component mount
- Updated state management to use hub3aText instead of barcodeImage
- Replaced image display with Pdf417Barcode component for consistent rendering
- Added error handling for migration promise
- Updated useEffect dependencies to prevent stale closures
- More efficient storage and easier to work with payment data going forward
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Changes:
- Added utilBillsProofOfPaymentAttachment to LocationCard component
- Updated monthly statement fieldset to show when proof of payment exists
- Added visual indicators with icons:
- CheckCircleIcon next to payed total amount
- EyeIcon for "seen by tenant" status (changed from CheckCircleIcon)
- LinkIcon for proof of payment download link
- Added download link for proof of payment with success indicator
- Code formatting improvements and removed console.log
- Updated translations to lowercase:
- English: "Seen by tenant" -> "seen by tenant"
- Croatian: "Viđeno od strane podstanara" -> "viđeno od strane podstanara"
- Added Croatian translation:
- "download-proof-of-payment-label": "potvrda-o-uplati.pdf"
The monthly statement section now displays proof of payment status
with a download link when available.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
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>
Changes:
- Updated BillingLocation interface:
- Added utilBillsProofOfPaymentAttachment field (BillAttachment type)
- Added server action uploadUtilBillsProofOfPayment:
- Validates PDF file type
- Serializes file attachment to base64
- Stores attachment in BillingLocation document
- Returns success/error status
- Updated ViewLocationCard component:
- Added file upload input with PDF-only accept
- Implemented handleFileChange with immediate upload
- Added upload state management (isUploading, uploadError, attachment)
- Shows spinner while uploading
- Input disabled during upload
- Conditionally renders file input or download link
- Link displayed after successful upload
- Created route handler for serving proof of payment PDFs:
- GET /share/proof-of-payment/[id]/route.tsx
- Fetches attachment from database
- Converts base64 to binary
- Returns PDF with proper headers
- Added not-found page for proof of payment route
- Updated middleware to include proof-of-payment in public pages
- Added translations:
- en: "Upload proof of payment (PDF only)"
- hr: "Priložite potvrdu o uplati:"
File uploads immediately on selection without page reload.
Only PDF files accepted with client and server-side validation.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Changes:
- Reorganized UserSettingsForm layout
- Moved currency select field from tenant 2D code fieldset
to new "General Settings" fieldset at the top of the form
- Added translations for "general-settings-legend":
- English: "General Settings"
- Croatian: "Opće postavke"
Currency is now in a more logical location as a general setting
rather than being grouped with tenant-specific 2D code settings.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Changes:
- Updated formatCurrency function:
- Added currencyCode parameter with EUR default
- Implemented Intl.NumberFormat for proper currency formatting
- Added fallback for invalid currency codes
- Updated component hierarchy to pass currency:
- HomePage: Fetch userSettings and pass to MonthLocationList
- MonthLocationList: Accept and pass currency to child components
- LocationCard: Accept currency prop and use in formatCurrency
- MonthCard: Accept currency prop and use in formatCurrency
- ViewLocationCard: Pass currency from userSettings to formatCurrency
- Removed hardcoded $ symbols, now using proper currency formatting
All currency amounts now display with the user's selected currency code
from their settings, using locale-appropriate formatting (hr-HR).
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Changes:
- Destructure generateTenantCode from location props
- Wrap payment information and PDF417 barcode in conditional rendering
- Only show payment details when BOTH conditions are met:
- userSettings.show2dCodeInMonthlyStatement === true
- location.generateTenantCode === true
This ensures payment information and barcode are only displayed when
both the user has enabled the feature globally AND the specific location
has it enabled.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Changes:
- Renamed destructured 'name' to 'locationName' for clarity
- Added locationNameTrimmed_max20 to limit location name to 19 chars
- Updated PozivNaBroj to use formatYearMonth() helper
- Updated OpisPlacanja with trimmed location name and formatYearMonth()
- Added comment documenting 35 character max length constraint
- Updated card title to use renamed locationName variable
This ensures payment descriptions fit within HUB-3A barcode constraints.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Changes:
- Updated UserSettings interface: town -> ownerTown
- Updated userSettingsActions.ts:
- Changed State type to use ownerTown
- Added max length validation (27 characters) to FormSchema
- Updated validation refinement to check ownerTown
- Updated form data parsing to read ownerTown
- Updated database write operations to use ownerTown
- Updated UserSettingsForm.tsx:
- Changed state tracking to use ownerTown
- Updated validation check to reference ownerTown
- Updated input field: id, name, maxLength={27}
- Updated ViewLocationCard.tsx to use ownerTown instead of town
- Updated English translations:
- town-label -> owner-town-label: "Your Postal Code and Town"
- town-placeholder -> owner-town-placeholder
- town-required -> owner-town-required
- Updated Croatian translations with corresponding ownerTown keys
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Changes:
- Updated UserSettings interface: street -> ownerStreet
- Updated userSettingsActions.ts:
- Changed State type to use ownerStreet
- Added max length validation (25 characters) to FormSchema
- Updated validation refinement to check ownerStreet
- Updated form data parsing to read ownerStreet
- Updated database write operations to use ownerStreet
- Updated UserSettingsForm.tsx:
- Changed state tracking to use ownerStreet
- Updated validation check to reference ownerStreet
- Updated input field: id, name, maxLength={25}
- Updated ViewLocationCard.tsx to use ownerStreet instead of street
- Updated English translations:
- street-label -> owner-street-label: "Your Street and House Number"
- street-placeholder -> owner-street-placeholder
- street-required -> owner-street-required
- Updated Croatian translations with corresponding ownerStreet keys
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Renamed firstName to ownerName in UserSettings interface
- Updated UserSettingsForm field to accept full name (first and last)
- Set maximum length to 25 characters for owner name field
- Updated all database operations to use ownerName
- Changed English label from "First Name" to "Your First and Last Name"
- Updated Croatian translations to match (Vaše ime i prezime)
- Updated form validation schema and error messages
- Removed old lastName-related translations
- Updated ViewLocationCard to use ownerName for recipient
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Removed lastName from UserSettings interface
- Updated UserSettingsForm to remove lastName input field
- Removed lastName from all database operations
- Updated form validation schema to remove lastName validation
- Updated ViewLocationCard to use only firstName for recipient name
- Removed lastName from user settings form state tracking
- Updated Croatian translations to reflect changes
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Renamed tenantFirstName to tenantName in BillingLocation interface
- Updated LocationEditForm field to accept full name (first and last)
- Set maximum length to 30 characters for tenant name field
- Updated all database operations to use tenantName
- Changed English label from "Tenant First Name" to "Tenant First and Last Name"
- Updated Croatian translations to match (Ime i prezime podstanara)
- Updated form validation schema and error messages
- Removed old tenantLastName-related translations
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
