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

// 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:

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;
  };
}

4.3 KiB Raw Blame History