Skip to main content

Admin Dashboard Components

Reusable components used throughout the admin dashboard.

Layout​

Location: src/components/Layout.tsx

Main layout wrapper providing:

  • Navigation sidebar
  • Header with user info
  • Content area
  • Responsive design

Loader​

Location: src/components/Loader.tsx

Loading indicator component.

Props:

  • size?: 'small' | 'medium' | 'large'
  • fullScreen?: boolean
  • message?: string

Usage:

<Loader fullScreen message="Loading..." />
<Loader size="small" />

ProtectedRoute​

Location: src/components/ProtectedRoute.tsx

Route wrapper that requires authentication.

Common UI Elements​

Buttons​

  • btn-primary - Primary action button
  • btn-edit - Edit button
  • btn-cancel - Cancel button
  • btn-verify - Verify button
  • btn-unverify - Unverify button

Status Badges​

  • status-badge - General status badge
  • active / inactive - Status classes
  • verified / unverified - Verification status

Form Elements​

  • form-group - Form field wrapper
  • form-row - Horizontal form row
  • search-input - Search input field
  • filter-select - Filter dropdown

Modals​

  • modal-overlay - Modal background
  • modal-content - Modal content container
  • modal-actions - Modal button container

Component Patterns​

Loading States​

All pages show loaders during data fetching:

if (loading) {
  return <Loader fullScreen message="Loading..." />;
}

Error Handling​

Errors are displayed using toast notifications:

toast.error(errorMessage);
toast.success('Operation successful');

Update Operations​

All update operations now:

  • Show loading indicators during the operation
  • Disable buttons during processing
  • Refresh data after successful updates
  • Display success/error messages

Best Practices​

  1. Reusable Components: Extract common UI into reusable components
  2. Loading States: Always show loading indicators
  3. Error Handling: Handle errors gracefully with user-friendly messages
  4. Consistent Styling: Use CSS classes for consistent styling
  5. Accessibility: Ensure proper ARIA labels and keyboard navigation