# Reusable Component Index

Import components from each folder's barrel: `import { Component } from 'src/components/folder';`.

| Component group | Path | Use |
| --- | --- | --- |
| DataTable | `src/components/data-table` | Preferred list table: search, filters, date ranges, pagination, sorting, selection, columns, density, CSV, print |
| Table filters | `src/components/table-filters` | Canonical status, select, text, and entity autocomplete toolbar filters |
| Legacy table helpers | `src/components/table` | Low-level table primitives for exceptional layouts |
| Form and fields | `src/components/hook-form` | React Hook Form provider and typed `Field.*` controls |
| Bilingual field | `src/components/bilingual-field` | Paired Arabic/English form fields. Defaults to the `name` / `name_en` pair; pass `englishName` for translation-table payloads (`translations.ar.name` / `translations.en.name`) and `required` to mark both inputs |
| Iconify | `src/components/iconify` | Offline-registered icon wrapper; only icon API allowed in features |
| Label | `src/components/label` | Semantic status badges |
| Dialogs | `src/components/custom-dialog` | Confirmation and shared dialog behavior |
| Popovers | `src/components/custom-popover` | Shared popover shell and hooks |
| Breadcrumbs | `src/components/custom-breadcrumbs` | Page heading, links, back navigation, and action slot |
| Detail views | `src/components/detail-view` | Reusable hero and detail-section compositions |
| Image name cell | `src/components/image-name-cell` | Table cell showing a record's thumbnail next to its name; click zooms to the full image, and the thumbnail is dropped when there is none |
| Active toggles | `src/components/toggle-active-dialog`, `src/components/post-toggle-dialog` | API-backed enable/disable confirmations |
| Selectors | `src/components/deferred-multi-select`, `src/components/customer-multi-select`, `src/components/tree-multi-select` | Reusable async and hierarchical selection controls |
| Feedback | `src/components/snackbar`, `src/components/empty-content`, `src/components/loading-screen`, `src/components/search-not-found` | Toasts and loading/empty/search states |
| Navigation | `src/components/nav-section` | Dashboard navigation renderer |
| Settings | `src/components/settings` | Theme mode, direction, contrast, font, and navigation settings |
| Media | `src/components/file-thumbnail`, `src/components/mobile-notification-preview`, `src/components/profile-cover` | File, mobile notification, and profile presentation |
| Data display | `src/components/chart`, `src/components/dashboard-analytics`, `src/components/audit-info` | Charts, metric widgets, and audit metadata |
| Shell utilities | `src/components/logo`, `src/components/progress-bar`, `src/components/scrollbar`, `src/components/swr-provider` | Global application shell helpers |
| Animation | `src/components/animate` | Shared motion primitives and lazy motion provider |
| Other inputs/actions | `src/components/phone-input`, `src/components/whatsapp-button`, `src/components/flag-icon` | Phone, WhatsApp, and flag utilities |

When adding a reusable component, create `src/components/<kebab-name>/index.ts` and add or update its row here in the same change.