Lease Management

Appearance

Component overview ​

Reusable components live in front/src/components/. Components listed here are meaningful UI or application building blocks. Props below are based on source declarations; component-level API calls are only noted when present in implementation.

LoginForm ​

  • File: front/src/components/auth/LoginForm.tsx
  • Purpose: Login and forgot-password forms.
  • Props: optional onLogin(): void.
  • Events/state: form submission, remember-me, visibility toggle, forgot-password panel; local loading/error/success state.
  • API dependency: authService.login() and authService.forgotPassword().
  • Used by: /login.
  • Example: <LoginForm onLogin={handleUserChange} />

DashboardLayout ​

  • File: front/src/components/layout/DashboardLayout.tsx
  • Purpose: Authenticated shell with sidebar, header, and nested route outlet.
  • Props: optional onUserChange(): void.
  • API dependency: none directly. Header receives onUserChange.
  • Used by: protected routes in front/src/App.tsx.
  • Example: <DashboardLayout onUserChange={handleUserChange} />
  • File: front/src/components/layout/Sidebar.tsx
  • Purpose: Application navigation for the dashboard layout.
  • Props: none declared.
  • API dependency: none documented in component contract.
  • Used by: DashboardLayout.
  • File: front/src/components/layout/Header.tsx
  • Purpose: User menu with profile, change-password, and logout navigation.
  • Props: optional onUserChange(): void.
  • State: dropdown visibility.
  • API dependency: Logout uses clearUser() from frontend storage utilities; this component does not call the auth logout API.
  • Used by: DashboardLayout.

LeaseTable ​

  • File: front/src/components/dashboard/LeaseTable.tsx
  • Purpose: Renders lease rows and filter controls.
  • Props: leases: Lease[]; optional onDelete(leaseId), onReactivate(leaseId), filters (search, status, assetType), and onFiltersChange.
  • Events: filter change; navigate to detail/edit; optional delete/reactivate callbacks when supplied.
  • State/API: Reads user through useAuth; no API call in the component.
  • Used by: All Leases.

SummaryCard ​

  • File: front/src/components/dashboard/SummaryCard.tsx
  • Purpose: Dashboard metric presentation.
  • Props: title: string, value: string, icon: LucideIcon; optional change: string, changeType: 'positive' | 'negative' | 'neutral', and color: 'blue' | 'green' | 'orange' | 'purple' | 'indigo' | 'pink' | 'teal' | 'red'.
  • API dependency: none; parent supplies values.
  • Used by: Dashboard.

LeaseWizard ​

  • File: front/src/components/forms/LeaseWizard.tsx
  • Purpose: Multi-step lease create/edit data entry flow.
  • Props: no props declared in the component signature shown in source.
  • Steps: Basic Information, Lease Terms, Payment Details, Cost Components, Discounting, Review & Confirm.
  • State: active step, form data, loading; validates step transitions.
  • API dependencies: settings, entities, departments, and lease service methods in the wizard implementation.
  • Used by: Create Lease route. Edit Lease builds its own step state and uses the shared wizard-step components rather than this wrapper.

ConfirmationModal ​

  • File: front/src/components/ui/ConfirmationModal.tsx
  • Props: isOpen, onClose, onConfirm, title, message; optional confirm/cancel text, type (danger | warning | info), and loading.
  • Purpose: Reusable confirmation dialog with disabled cancel action while loading.
  • API dependency: none; caller supplies action.