Reorganize and Clean Up Components

[mahid797]

The components/ folder currently holds unrelated files with inconsistent naming. This issue
aims to group components by domain or functionality, improve naming conventions, and
simplify imports using a centralized export system.

---

Tasks

• Create domain-based component folders as per the proposed structure:

  • navigation/: For pagination and navigation-related components.
  • input/: For form input components.
  • loaders/: For loading indicators and empty states.
  • fileHandling/: For file-related components like uploaders and viewers.
  • common/: For general reusable components used across multiple features.
  • modals/: For components related to modal handling (e.g., modal wrappers).

• Move existing components into their respective folders, ensuring proper categorization.

• Add an index.ts to each folder for centralized exports to enable cleaner imports.

• Rename all component files using PascalCase for consistency with React conventions.

• Update all imports throughout the project to reflect the new directory structure.

• Create and document any new global reusable components discovered during reorganization or testing.

  📝 What is a reusable component?
  Reusable components are self-contained UI elements used across multiple parts of the application (e.g., buttons, modals, input fields, loaders). They should be generic and customizable via props, ensuring they can be reused without code duplication.

• Test components after moving to ensure no import or rendering issues occur.

---

Proposed Directory Structure

src/
└── components/
    ├── navigation/
    │   ├── Paginator.tsx
    │   └── NavLink.tsx
    ├── input/
    │   ├── CustomCheckbox.tsx
    │   ├── Dropdown.tsx
    │   ├── FormInput.tsx
    │   └── PasswordValidation.tsx
    ├── loaders/
    │   ├── LoadingButton.tsx
    │   ├── LoadingSpinner.tsx
    │   ├── CustomCircularProgress.tsx
    │   └── EmptyState.tsx
    ├── fileHandling/
    │   ├── CustomUploader.tsx
    │   └── PDFViewer.tsx
    ├── common/
    │   ├── Breadcrumb.tsx
    │   └── Toast.tsx
    ├── modals/
    │   └── ModalWrapper.tsx
    └── index.ts

Guidelines

✅ Group similar components together for easy maintenance.
✅ Use PascalCase** naming** for consistency.
✅ Centralize exports to keep imports clean.

---

Benefits

✅ Improved project scalability and maintainability.
✅ Easier navigation and onboarding for new developers.
✅ Cleaner imports with centralized export files.