khata-ui/CONCEPT.md

Concept Overview

The application is a metadata‑driven admin UI built on top of an OpenAPI description. By describing each resource in a small JSON config (type ResourceConfig), the UI automatically generates:

1. Data tables (with pagination, sorting, and actions) – EnhancedTable.
2. Dynamic filters – FilterBar creates appropriate filter widgets (autocomplete, number‑range, date‑range) based on field metadata.
3. Forms for create/edit – A generic form component can render inputs for every ResourceField, handling relations via the displayFormat template.
4. Authentication layer – react‑auth supplies a central AuthProvider, a useAuth hook, and route guarding, ensuring only authenticated users reach the admin pages.

Core Principles

• Declarative configuration: Adding a new resource is just a JSON entry; no hand‑coded tables or forms.
• Template‑based display: displayFormat (e.g. "{{firstName}} {{lastName}}") defines how related objects are shown across the UI, eliminating the need for separate displayField props.
• Extensible UI: Consumers can plug custom components (components prop) to override cell renderers, filter widgets, or action buttons without altering core logic.
• Unified state: TanStack Query caches server data, while react‑auth manages JWTs and user info. Both are provided via React context for easy access.
• Responsive design: The UI automatically switches to a card‑based layout on mobile, preserving functionality with a consistent look.

Migration Goal for Lovable

The current repo implements these ideas with a solid foundation but could benefit from:

• Improved UI/UX (e.g., better loading states, richer snackbars, dark‑mode toggle).
• More robust error handling (centralized toast system, retry logic on auth failures).
• Enhanced theming (customizable palette, brand colors).
• Accessibility (ARIA roles, keyboard navigation).

By re‑using the existing ResourceConfig schema and displayFormat logic, the Lovable implementation can focus on UI polish and advanced handling while keeping the powerful code‑generation approach intact.