feat: add edit dialogs for units and leases

[chitcommit]

Summary

• Add useUpdateUnit and useUpdateLease mutation hooks with cache invalidation for units, financials, and rent-roll
• Create EditUnitDialog — edit unit number, bed/bath, sqft, monthly rent
• Create EditLeaseDialog — edit tenant info, dates, rent, status (active/expired/terminated)
• Wire into PropertyDetail overview tab: pencil icon per unit row, clickable tenant name opens lease editor

Context

Backend PATCH endpoints for units and leases already exist but had no frontend counterparts. This closes the CRUD gap for the property management UI.

Test plan

• Navigate to a property detail page
• Click pencil icon on a unit row — EditUnitDialog opens pre-populated
• Edit and save — unit table updates
• Click tenant name — EditLeaseDialog opens
• Change lease status to terminated — rent roll and financials update

🤖 Generated with Claude Code

Summary by CodeRabbit

Release Notes

• New Features
  • Added lease editing capabilities to update tenant information, dates, rent, and security deposit.
  • Added unit editing capabilities to modify unit specifications including bedrooms, bathrooms, and square footage.
  • Integrated edit controls in the property detail view for quick access to lease and unit modifications.
  • Implemented success and error notifications for all lease and unit updates.

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

[github-actions]

@coderabbitai review

Please evaluate:

• Security implications
• Credential exposure risk
• Dependency supply chain concerns
• Breaking API changes

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: e47cd405-0ca8-4001-b5a0-3f2cdff69e66

📥 Commits

Reviewing files that changed from the base of the PR and between 97d06dc and 3f8b6fa.

📒 Files selected for processing (4)

• client/src/components/property/EditLeaseDialog.tsx
• client/src/components/property/EditUnitDialog.tsx
• client/src/hooks/use-property.ts
• client/src/pages/PropertyDetail.tsx

---

📝 Walkthrough

Walkthrough

This PR adds editing capabilities for property units and leases by introducing two modal dialog components (EditUnitDialog and EditLeaseDialog), implementing corresponding React Query mutation hooks (useUpdateUnit and useUpdateLease), and integrating these into the PropertyDetail page to enable inline editing with form validation and state synchronization.

Changes

Cohort / File(s)	Summary
Edit Dialog Components client/src/components/property/EditUnitDialog.tsx, client/src/components/property/EditLeaseDialog.tsx	Two new React modal dialog components for editing unit (bedrooms, bathrooms, square footage, monthly rent) and lease (tenant name/email/phone, dates, rent, deposit, status) details. Both components manage internal form state, validate required fields, handle submissions with trimming/parsing, display toast notifications, and disable actions during pending mutations.
Update Hooks client/src/hooks/use-property.ts	Added two React Query mutation hooks—useUpdateUnit and useUpdateLease—that issue PATCH requests to the respective API endpoints. Each hook invalidates related cached queries (units list, leases list, financials, rent-roll) on successful mutation to ensure data freshness.
PropertyDetail Integration client/src/pages/PropertyDetail.tsx	Integrated edit dialogs and dialogs state management into the Units table view. Added pencil icon buttons for per-row unit editing and converted the tenant name cell to a clickable control for lease editing. Renders dialogs when a unit or lease is selected.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 Hops with delight through property files,
Edit dialogs now add their smiles,
Forms validated, mutations that flow,
Units and leases steal the show! 🏘️✨

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/property-edit-dialogs

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Updated (UTC)
✅ Deployment successful! View logs	chittyfinance	3f8b6fa	Mar 26 2026, 05:06 AM

[claude]

Code Review — PR #69: Edit dialogs for units and leases

Overall this is clean, well-structured work that follows the existing patterns in the codebase. The cache invalidation strategy is correct and complete. A few issues worth addressing before merge:

---

Bug: No date range validation in EditLeaseDialog

handleSubmit sends whatever dates the user entered without verifying endDate >= startDate. A user can save a lease where the end date precedes the start date, producing corrupt data in the rent roll and financials calculations.

// Before calling updateLease.mutate, add:
if (form.endDate && form.startDate && form.endDate < form.startDate) {
  toast({ title: 'Invalid dates', description: 'End date must be on or after start date.', variant: 'destructive' });
  return;
}

---

Accessibility: Icon button needs aria-label

The pencil icon button in PropertyDetail.tsx has no accessible label. Screen readers will announce nothing useful.

// Current
<Button variant="ghost" size="icon" className="h-7 w-7"
  onClick={() => { setSelectedUnit(u); setEditUnitOpen(true); }}>
  <Pencil className="h-3.5 w-3.5" />
</Button>

// Fix
<Button variant="ghost" size="icon" className="h-7 w-7"
  aria-label={`Edit unit ${u.unitNumber}`}
  onClick={() => { setSelectedUnit(u); setEditUnitOpen(true); }}>
  <Pencil className="h-3.5 w-3.5" />
</Button>

---

Style inconsistency: raw <button> for tenant name

The tenant name uses a plain HTML <button> while the rest of the UI uses the shadcn Button component. At minimum use variant="link" for visual consistency and correct focus styling.

// Current
<button className="text-left hover:underline" onClick={...}>
  {lease.tenantName}
</button>

// Consistent with codebase
<Button variant="link" className="h-auto p-0 font-normal" onClick={...}>
  {lease.tenantName}
</Button>

---

Minor: selectedUnit / selectedLease not cleared on close

When the dialog closes, only the open state is reset — selectedUnit and selectedLease hold stale references until the next edit action. This won't cause functional bugs given the conditional rendering guard, but it's worth clearing them in onOpenChange:

onOpenChange={(open) => {
  setEditUnitOpen(open);
  if (!open) setSelectedUnit(null);
}}

---

Note on hook instantiation pattern

useUpdateUnit(propertyId, unit.id) bakes the unitId into the mutation at hook-call time. This works correctly here because the dialog conditionally unmounts/remounts when selectedUnit changes ({selectedUnit && id && <EditUnitDialog ...>}), so the hook always gets the right ID. Worth a brief comment in the code since the pattern is non-obvious to future readers.

---

Summary: The date validation bug and the missing aria-label are the two items I'd want fixed before merge. The Button vs button inconsistency is a quick fix. Everything else is minor polish.

[Copilot]

Pull request overview

Adds frontend editing capabilities for property units and leases, completing the UI CRUD flow by introducing edit dialogs and update mutation hooks with cache invalidation so overview/rent-roll/financial metrics stay in sync.

Changes:

• Added useUpdateUnit and useUpdateLease mutation hooks with targeted query invalidation.
• Introduced EditUnitDialog and EditLeaseDialog components to edit unit/lease fields.
• Wired edit entry points into PropertyDetail overview (unit row pencil icon; tenant name opens lease editor).

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File	Description
client/src/pages/PropertyDetail.tsx	Adds edit entry points in the Units table and mounts the new edit dialogs.
client/src/hooks/use-property.ts	Adds update mutation hooks for units and leases with cache invalidation.
client/src/components/property/EditUnitDialog.tsx	New dialog UI for updating unit details via PATCH.
client/src/components/property/EditLeaseDialog.tsx	New dialog UI for updating lease terms/status via PATCH.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Icon-only edit button (Pencil) has no accessible name. Add an aria-label (e.g. "Edit unit") or include a visually-hidden <span className="sr-only">Edit unit</span> inside the button so screen readers can identify the action.

Suggested change

	<Button variant="ghost" size="icon" className="h-7 w-7"
	<Button
	variant="ghost"
	size="icon"
	className="h-7 w-7"
	aria-label="Edit unit"

[Copilot]

The new actions column header is empty. For accessibility, add a label (can be visually hidden with sr-only) so screen readers can announce the column purpose (e.g. "Actions").

Suggested change

	<TableHead className="w-[70px]"></TableHead>
	<TableHead className="w-[70px]">
	<span className="sr-only">Actions</span>
	</TableHead>