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>
- Removed tenantLastName from BillingLocation interface
- Updated LocationEditForm to remove tenantLastName input field
- Removed tenantLastName from all database operations (insert and update)
- Updated form validation schema to remove tenantLastName validation
- Updated ViewLocationCard to use only tenantFirstName for payer name
- Removed tenantLastName from tenant field state tracking
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Updated ViewLocationCard to accept userSettings prop
- Replaced all hardcoded payment values with dynamic data:
* Amount calculated from monthly expenses
* Payer info from tenant fields (name, street, town)
* Recipient info from userSettings (name, street, town, IBAN)
* Reference number and description generated from location data
- Created getUserSettingsByUserId function for fetching owner settings on public pages
- Updated LocationViewPage to fetch and pass userSettings to ViewLocationCard
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Added tenantStreet and tenantTown optional fields to BillingLocation interface
- Updated LocationEditForm to include new input fields with 27 character max length
- Both fields are mandatory when 2D code generation is enabled
- Updated all database operations (insert and update) to persist new fields
- Added Croatian and English translations for labels and validation messages
- Updated form state tracking to include new tenant address fields
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Adds two new fields to user settings form:
- Town field: Text input for city/town (required when 2D code enabled)
- Currency field: Select dropdown with ISO 4217 currency codes (EUR default)
Updates:
- Database schema: Added town and currency fields to UserSettings
- Validation: Both fields required when 2D code is enabled
- Form UI: Added input fields with proper validation and error handling
- Translations: Added Croatian and English labels and error messages
- Currency options: 36 ISO 4217 codes with EUR at top as default
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Changes the user settings address field to street with the following updates:
- Renames database field from 'address' to 'street' in UserSettings type
- Changes form input from textarea to single-line text input
- Updates validation logic and error messages
- Updates translations in both Croatian and English
- Removes deprecated AppSettingsForm component
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Changes Pdf417Barcode component from using hardcoded payment data to
accepting paymentParams as a prop, making it reusable. Updates useEffect
dependency array to regenerate barcode when payment params change.
Also updates hub-3a-payment-encoder to v1.1.0 for PaymentParams type support.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Replaces hardcoded Croatian text in ViewLocationCard with i18n translations.
Adds payment information labels (amount, recipient, IBAN, etc.) to both
Croatian and English language files for proper internationalization support.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implements client-side PDF417 barcode rendering with React component.
Uses useEffect to prevent hydration mismatch by generating barcodes
only after component mount. Integrates barcode display in location cards.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implements PDF417 2D barcode encoder with bcmath utilities and lookup tables.
Ported from TCPDF library to TypeScript for client-side barcode generation.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add seenByTenant field to BillingLocation interface
- Implement setSeenByTenant function to mark locations as viewed by tenant
- Checks if flag is already set to avoid unnecessary DB updates
- Includes TypeDoc documentation
- Update LocationViewPage to call setSeenByTenant when non-owner visits
- Add seenByTenant to fetchAllLocations projection
- Update LocationCard to show "seen by tenant" status indicator
- Displays in "Monthly statement" fieldset with checkmark icon
- Shows alongside monthly expense total
- Add localization strings for monthly statement and seen status
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add .int() validation to rentAmount in FormSchema
- Remove decimal formatting (was dividing by 100)
- Change min value from 0 to 1
- Add right text alignment for better numeric display
- Add localization for integer validation error message
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add rentAmount field to BillingLocation interface (stored in cents)
- Implement Zod validation with conditional requirement when rent notification is enabled
- Add rent amount input field to LocationEditForm with decimal display
- Update all database operations to persist rentAmount
- Add localization strings for both English and Croatian
- Fix missing notes field in insertOne/insertMany operations
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Refactor AccountForm to use toggle for showing/hiding profile fields
- Add show2dCodeInMonthlyStatement field to UserProfile database schema
- Implement conditional validation: all fields mandatory when 2D code is enabled
- Update FormSchema with .refine() methods for firstName, lastName, address, and IBAN
- IBAN validation includes both presence check and format validation when required
- Add validation error messages to English and Croatian localization files
- Initialize toggle state from persisted database value
- Form fields conditionally displayed based on toggle state
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add rentDueNotification toggle to enable automatic rent notifications
- Add rentDueDay selector (1-28) for specifying when rent is due
- Extract tenant email to independent section shown when either autoBillFwd or rentDueNotification is enabled
- Update email validation to be mandatory when any automatic notification is active
- Update database schema to persist rentDueNotification and rentDueDay fields
- Add all database operations to handle new fields with proper defaults
- Add localization strings for English and Croatian
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Extract InfoBox component for reusable alert boxes
- Update AccountForm to use InfoBox component
- Add InfoBox with explanatory text to tenant sections in LocationEditForm
- Convert billFwdStrategy from radio buttons to select element
- Convert updateScope from radio buttons to select element
- Update localization strings for improved clarity
- Fix updateScope defaultValue to use "current" instead of billFwdStrategy
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added billFwdStrategy field to store user's choice for when to forward
utility bills to tenants, with database persistence and UI updates.
Changes:
- Added billFwdStrategy field to BillingLocation interface ("when-payed" | "when-attached")
- Updated FormSchema to validate billFwdStrategy enum values
- Modified updateOrAddLocation to persist billFwdStrategy in all database operations
- Defaults to "when-payed" (first option) when no value exists in database
- Updated LocationEditForm radio buttons to use persisted database values
- Radio button selection is preserved across edits and restored from database
- Renamed autoTenantNotification to autoBillFwd throughout codebase
- Updated localization strings for bill forwarding features
Form behavior:
- New locations: "when-payed" radio selected by default
- Existing locations: Radio selection matches stored database value
- Value persisted in current, subsequent, and all month update operations
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added conditional required validation and format validation for tenant email.
Changes:
- Tenant email is now required when autoTenantNotification is enabled
- Added email format validation using Zod's built-in email validator
- Email field validates format even when autoTenantNotification is off (if not empty)
- Added localization strings for validation errors (Croatian/English)
Validation logic:
- Format validation: Always checks if email is valid format (when not empty)
- Required validation: Email required when autoTenantNotification is true
- Error messages: "email address is invalid" for format, "tenant email is missing" for required
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added toggle to control automatic tenant notifications with conditional
email field visibility based on the toggle state.
Changes:
- Added autoTenantNotification field to BillingLocation interface
- Updated LocationEditForm with "Notify tenant automatically" toggle
- Email field now only visible when autoTenantNotification is enabled
- Toggle appears after tenant name fields (when generateTenantCode is active)
- Updated updateOrAddLocation action to persist autoTenantNotification flag
- Added localization strings for toggle (Croatian/English)
Field visibility hierarchy:
1. Generate 2D code toggle (always visible)
2. Tenant name fields (visible when #1 is ON)
3. Auto notification toggle (visible when #1 is ON)
4. Email field (visible when #1 AND #3 are ON)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Modified gotoHomeWithMessage to accept optional yearMonth parameter and
updated location actions to redirect with year/month context after save/delete.
Changes:
- Updated gotoHomeWithMessage to accept yearMonth parameter
- Modified redirect URLs to include year and month query params
- updateOrAddLocation now redirects to /${locale}?year=${year}&month=${month}&locationSaved=true
- deleteLocationById now redirects to /${locale}?year=${year}&month=${month}&locationDeleted=true
- Removed unused gotoHome import from locationActions
This ensures users return to the same month view after location operations,
maintaining context and providing success feedback via URL parameters.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
