Commit Graph

255 Commits

Author SHA1 Message Date
Knee Cola
9d06de1265 (refactor) improving content responsivness 2025-12-07 18:41:20 +01:00
Knee Cola
0f8b5678f4 Fix client-side cache staleness after proof of payment upload
Added cache revalidation to ensure ViewLocationCard reflects uploaded
proof of payment when navigating back from ViewBillCard:

- Server-side: Added revalidatePath() to upload actions in billActions
  and locationActions to invalidate Next.js server cache
- Client-side: Added router.refresh() calls in ViewBillCard and
  ViewLocationCard to refresh client router cache after successful upload

This maintains the current UX (no redirect on upload) while ensuring
fresh data is displayed on navigation.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-07 16:57:00 +01:00
Knee Cola
cfa6a4c5b7 Add proof of payment display to BillEditForm
Added read-only proof of payment display in bill edit form:
- Shows download link when proofOfPaymentType is "per-bill" and proof exists
- Uses TicketIcon with teal color for visual distinction
- Links to /share/proof-of-payment/per-bill/ download route
- Handles housekeeping case (no display if filename missing)

This allows users to view and download existing proof of payment
while editing a bill, improving transparency and user experience.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-07 16:35:08 +01:00
Knee Cola
25865cfae4 BillBage: implemented proof-of-payment indicator 2025-12-07 16:04:09 +01:00
Knee Cola
7994f9ebdb Add info box for billed-to selection in BillEditForm 2025-12-07 16:02:02 +01:00
Knee Cola
0b6555eff3 Update ViewLocationCard to use new combined proof download route
Changed proof of payment download link from old route structure
/share/proof-of-payment/[id]/ to new structure
/share/proof-of-payment/combined/[id]/

This aligns with the reorganized route structure that separates
combined and per-bill proof of payment downloads.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-07 13:40:11 +01:00
Knee Cola
aa573c68a3 Implement per-bill proof of payment and update field names
Frontend changes:
- Added ViewBillCard proof of payment upload for per-bill mode
  - Conditional rendering based on proofOfPaymentType
  - File upload with PDF validation and loading states
  - Download link to /share/proof-of-payment/per-bill/
- Updated LocationCard to use new utilBillsProofOfPayment field structure

Backend changes:
- Updated locationActions with improved file validation
  - File size validation using MAX_PROOF_OF_PAYMENT_UPLOAD_SIZE_KB
  - PDF type validation before database operations
  - Enhanced serializeAttachment with FileAttachment type
  - Updated database projections for optimized queries
- Updated monthActions to use consolidated field name
- Updated proof-of-payment download route with new field names

Data structure migration:
- Replaced utilBillsProofOfPaymentAttachment + utilBillsProofOfPaymentUploadedAt
  with single utilBillsProofOfPayment object containing uploadedAt
- Consistent use of FileAttachment type across all upload functions

Translations:
- Added upload-proof-of-payment-legend and upload-proof-of-payment-label
  to bill-edit-form section in both English and Croatian

This completes the proof of payment feature implementation for both
combined (location-level) and per-bill modes.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-07 13:11:17 +01:00
Knee Cola
a25a97f68b Add conditional rendering for proof of payment in ViewLocationCard
- Show upload section only when proofOfPaymentType is "combined"
- Updated field names to use new FileAttachment structure:
  - utilBillsProofOfPaymentAttachment → utilBillsProofOfPayment
  - utilBillsProofOfPaymentUploadedAt → utilBillsProofOfPayment.uploadedAt
- Updated FormData and input field names for consistency
- Improved code formatting and spacing throughout

This enables proper handling of the three proof of payment options:
- "none": No upload section shown
- "combined": Shows single proof upload for all utilities (this change)
- "per-bill": No upload section (handled per individual bill)

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-07 11:36:27 +01:00
Knee Cola
dd4c92be77 Add "none" option for proof of payment type
Enhanced the proof of payment attachment feature with the following improvements:

- Renamed field from `proofOfPaymentAttachmentType` to `proofOfPaymentType` for consistency
- Added "none" option allowing users to disable proof of payment attachments
- Changed default value from "combined" to "none" for better UX
- Repositioned section in form after payment instructions (more logical flow)
- Added conditional warning when "combined" is selected without payment method
- Updated translations with emojis and improved tooltips for all options
- Backend validation and database operations updated to support new field structure

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-07 11:19:51 +01:00
Knee Cola
2483b7bca5 locationEditForm: added proofOfPaymentAttachmentType 2025-12-07 01:29:48 +01:00
Knee Cola
d898f79ba3 Add Umami analytics tracking for key user interactions
Integrates Umami analytics with production-only tracking script and event tracking for user login and location creation actions.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-26 20:55:05 +01:00
Knee Cola
4f38fa4496 Add expand and fade-in animations to conditional form sections
Add smooth animations to form sections that appear when toggles are enabled, improving user experience with visual feedback.

Changes:
- Add expandFadeIn keyframe animation to Tailwind config
- Apply expand-fade-in animation to UserSettingsForm payment sections
- Apply expand-fade-in animation to LocationEditForm conditional fields
- Update account page HomeIcon color from green to white for consistency

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-26 20:31:41 +01:00
Knee Cola
eed92b5ac3 Replace seenByTenant boolean with seenByTenantAt timestamp field
Update location tracking to record when tenant views a location rather than just whether they've seen it. This provides better audit trail and enables future features like viewing history.

Changes:
- Convert seenByTenant (boolean) to seenByTenantAt (Date) in database schema
- Update setSeenByTenantAt action to store timestamp instead of boolean flag
- Modify LocationCard UI to display when location was seen by tenant
- Update all references across locationActions, monthActions, and view components
- Remove unused imports from ViewLocationCard

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-26 20:10:18 +01:00
ddfa0a5595 Fix ESLint warnings for img elements
Add ESLint disable comments for @next/next/no-img-element warnings where appropriate (barcode images with base64 data URIs don't benefit from Next.js Image optimization) and add missing alt attribute to PDF417 barcode component.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-26 14:07:27 +01:00
985fb4bc41 Add smooth open/close animation to InfoBox component
Implements a slide-down fade-in animation when the InfoBox expands, improving the user experience with smooth visual transitions.

Changes:
- Add animateDown keyframe animation to Tailwind config
- Apply animation to InfoBox content div when opened
- Animation includes opacity fade, vertical slide, and max-height transition
- Update InfoBox width to use responsive sizing (17rem on mobile, 28rem on larger screens)
- Change icon color to green for better visual consistency

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-26 13:51:17 +01:00
364a12f9d6 Add home navigation button and improve account page UI
Enhances the account page navigation by adding a "Back to home" button and improving the overall user experience with better visual hierarchy and navigation flow.

Changes:
- Add home navigation button to account page with green icon
- Update logout button styling with red icon for visual emphasis
- Improve settings button label clarity
- Fix settings cancel button to navigate back to account page
- Increase account icon size in page header
- Update translation keys for consistency across EN/HR

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-26 13:26:19 +01:00
Knee Cola
b5405009ba Fix homepage link in PageHeader component 2025-11-25 22:03:53 +01:00
Knee Cola
f980ac3be2 Check pathname instead of session for account link visibility
- Replace useSession with usePathname from next/navigation
- Show account link only when pathname includes '/home' (restricted pages)
- More efficient than checking session state
- Aligns with middleware logic that protects /home routes

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-25 22:00:46 +01:00
Knee Cola
8fd9da8210 Hide account link for anonymous users in PageHeader
- Add useSession hook from next-auth/react
- Conditionally render account icon link only when user is authenticated
- Anonymous users on public pages will not see the account button

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-25 21:58:21 +01:00
Knee Cola
47b99c05e0 Add locale to PageHeader links
- Convert PageHeader to client component to use useLocale hook
- Update home logo link to include locale: /${locale}/home
- Update account icon link to include locale: /${locale}/home/account/

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-25 21:56:08 +01:00
Knee Cola
15133286c9 Fix cancel button links in edit forms to redirect to /home
- Update BillEditForm cancel button to redirect to /home
- Update LocationEditForm cancel button to redirect to /home
- Update UserSettingsForm cancel button to redirect to /home

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-25 21:51:47 +01:00
Knee Cola
b9f73e9a90 Restructure application to use /home for authenticated pages
- Move authenticated home page from /[locale] to /[locale]/home
- Move login page from /[locale]/login to /[locale] (new landing page)
- Move all restricted pages (bill, location, year-month, print, account) under /[locale]/home
- Simplify middleware to protect all routes under /home instead of using publicPages array
- Update auth config: change signIn page from /login to /
- Update SignInButton callback URL to redirect to /home after login
- Update all internal links throughout the application to reflect new structure
- Update server action redirects in navigationActions.ts
- Public share routes (/share/*) remain unchanged

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-25 21:49:01 +01:00
Knee Cola
62d0cb81a7 Refactor account page structure and update UI
- Move user settings form to dedicated /account/settings route
- Update PageHeader icon from Settings to AccountCircle for clarity
- Update debug log labels in auth config for better readability

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-25 20:49:33 +01:00
fe924d0ee4 (style) LocationCard: fixing shared button position, compacting layout 2025-11-25 14:48:55 +01:00
cd8c4cf370 (style) reduced print button width so it fits on screen 2025-11-25 14:24:34 +01:00
Knee Cola
18fbb31917 preventing scroll reset in case of message 2025-11-24 23:08:18 +01:00
Knee Cola
b650620390 (bugfix) typescript error 2025-11-24 22:19:28 +01:00
Knee Cola
248d29ef22 style: replace fieldset with divider in LocationCard monthly statement
- Replace bordered fieldset with divider for cleaner visual separation
- Adjust spacing and margins for better alignment
- Remove card-based container in favor of simpler layout
- Maintain all functionality while improving visual consistency

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-24 21:10:54 +01:00
Knee Cola
a2ccde16e5 style: improve LocationEditForm fieldset styling and formatting
- Wrap location name input in styled fieldset matching other sections
- Add consistent bg-base-200 border styling to location name fieldset
- Fix indentation and whitespace for better code consistency
- Remove trailing whitespace throughout the file

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-24 21:04:21 +01:00
Knee Cola
e554fe3cb2 refactor: improve InfoBox and NoteBox components with collapsible design
- 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>
2025-11-24 21:00:28 +01:00
830578c2e4 refactor: improve payment method dropdown UX with inline disabled labels
- 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>
2025-11-24 17:02:09 +01:00
600e31e7b1 feat: disable payment method select when no payment methods configured
- 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>
2025-11-24 16:48:23 +01:00
f47693fdd6 (refactor) formatting revolut link 2025-11-24 16:39:10 +01:00
4c7a423a4d feat: formatting revolut link 2025-11-24 16:35:20 +01:00
ab0b661567 refactor: improve Revolut QR code styling and amount format
- 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>
2025-11-24 16:32:40 +01:00
3ef9e411e9 feat: add QR code for Revolut payment link
- 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>
2025-11-24 16:25:06 +01:00
df9a3596f3 feat: add Revolut profile tooltip and test link to UserSettingsForm
- 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>
2025-11-24 16:21:28 +01:00
bd283ce6db (refactor) removed "reference" from revolute URL 2025-11-24 15:53:01 +01:00
7c8497ccfe feat: add Revolut payment link to ViewLocationCard
- 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}&currency={currency}&reference={text}

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-24 15:45:19 +01:00
3e581d8878 refactor: replace generateTenantCode boolean with tenantPaymentMethod enum
- 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>
2025-11-24 15:34:59 +01:00
ead7451170 (refactor) LocationEditForm: renaming localization string names 2025-11-24 14:50:54 +01:00
632f8888b5 refactor: replace payment dropdown with independent toggles
- 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>
2025-11-24 14:45:59 +01:00
686bec6c10 feat: add Revolut payment link support alongside IBAN
- 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>
2025-11-24 13:37:54 +01:00
Knee Cola
134f04d634 fix: format IBAN in payment info on ViewLocationCard 2025-11-23 23:02:46 +01:00
Knee Cola
db65d82ab5 (refactor) BillEditForm: billed-to-* converted from radio buttons to select; added info box 2025-11-23 22:49:05 +01:00
Knee Cola
eddddb4199 (refactor) LocationCard: replaced pay receit icon 2025-11-23 22:31:10 +01:00
Knee Cola
fda4b59e58 (refactor) PrintPreview: fixing Pdf417Barcode margin & size 2025-11-23 22:28:03 +01:00
Knee Cola
fcecaaa901 (refactor) dbTypes: added utilBillsProofOfPaymentUploadedAt to BillingLocation 2025-11-23 22:13:09 +01:00
Knee Cola
54a9de77d3 (refactor) ViewBillCard: formatting 3D bar code 2025-11-23 21:52:09 +01:00
Knee Cola
7722cbdf0a (refactor) ViewLocationCard: formatting 2D code 2025-11-23 21:49:22 +01:00