# EVYOS Management Frontend - Common Components

## Overview

This directory contains modular, reusable components for building consistent UIs across the EVYOS Management Frontend. These components follow a modular design pattern where complex functionality is broken down into smaller, focused components with clear responsibilities.

## Component Structure

### ActionButtonsDisplay
- **CreateButton**: A button component for triggering create actions with translation support
- **CustomButtonComponent**: Configurable button component with selection state support
- **types.ts**: Shared type definitions for button components

### CardDisplay
- **CardDisplay**: Main component for displaying data in a responsive grid layout
- **CardItem**: Individual card component with customizable fields and actions
- **CardSkeleton**: Loading state placeholder for cards
- **schema.ts**: API response and data schemas
- **utils.ts**: Helper functions for card operations

### FormDisplay
- **FormDisplay**: Container component that handles form mode switching
- **CreateComponent**: Form implementation for creating new records
- **UpdateComponent**: Form implementation for updating existing records
- **ViewComponent**: Read-only view of record details
- **types.ts**: Type definitions for form components and modes

### HeaderSelections
- **GridSelectionComponent**: Controls the number of columns in card grid layouts
- **LanguageSelectionComponent**: Language switcher with translation support

### PaginationModifiers
- **PaginationToolsComponent**: Main container for pagination controls
- **PaginationStats**: Displays record count information
- **PageNavigation**: Handles page navigation buttons with smart page number calculation
- **PageSizeSelector**: Controls items per page selection
- **types.ts**: Type definitions including ResponseMetadata interface

### QueryModifiers
- **TextQueryModifier**: Text search input with clear functionality
- **SelectQueryModifier**: Dropdown selection for filtering
- **TypeQueryModifier**: Button-based type selection
- **types.ts**: Shared interfaces for query components

### Hooks
- **useApiData**: Custom hook for fetching and managing API data with pagination
- **useDataFetching**: Base hook for data fetching with pagination, sorting, and filtering

## Usage Example

```tsx
// Import components
import { CardDisplay } from "@/components/common/CardDisplay";
import { TextQueryModifier, SelectQueryModifier, TypeQueryModifier } from "@/components/common/QueryModifiers";
import { CreateButton } from "@/components/common/ActionButtonsDisplay/CreateButton";
import { PaginationToolsComponent } from "@/components/common/PaginationModifiers/PaginationToolsComponent";
import { GridSelectionComponent, GridSize } from "@/components/common/HeaderSelections/GridSelectionComponent";
import { LanguageSelectionComponent, Language } from "@/components/common/HeaderSelections/LanguageSelectionComponent";
import { FormDisplay } from "@/components/common/FormDisplay/FormDisplay";
import { useApiData } from "@/components/common/hooks/useApiData";

// Use the API data hook
const {
  data,
  pagination,
  loading,
  error,
  updatePagination,
  refetch
} = useApiData<YourDataType>("/api/your-endpoint");

// Define fields to display
const showFields = ["field1", "field2", "field3"];

// Example component usage
<Card>
  <CardContent>
    <TextQueryModifier
      fieldKey="name"
      value={pagination.query["name__ilike"] ? pagination.query["name__ilike"].replace(/%/g, "") : ""}
      label="Search"
      onQueryChange={handleQueryChange}
      translations={translations}
      lang={lang}
    />
  </CardContent>
</Card>

<CardDisplay
  showFields={showFields}
  data={data}
  lang={lang}
  translations={translations}
  error={error}
  loading={loading}
  titleField="name"
  onCardClick={handleCardClick}
  gridCols={gridCols}
  showViewIcon={true}
  showUpdateIcon={true}
  onViewClick={handleViewClick}
  onUpdateClick={handleUpdateClick}
/>
```

## API Response Structure

Components expect API responses in this format:

```typescript
interface ApiResponse<T> {
  data: T[];
  pagination: {
    page: number;
    size: number;
    totalCount: number;
    totalItems: number;
    totalPages: number;
    pageCount: number;
    allCount?: number;
    orderField: string[];
    orderType: string[];
    query: Record<string, any>;
    next: boolean;
    back: boolean;
  };
}
```