Refactor frontend codebase to improve DRY, SRP, and structure

[Ayush8923]

Describe the current behavior
The current frontend codebase has multiple inconsistencies and repeated logic across files.

• API calls are duplicated across many route.ts files with similar fetch configurations.
• SVG icons are directly hardcoded inside page components, making them less reusable and harder to manage.
• Utility/helper functions (e.g., escapeCSVValue) are defined inside page files instead of shared utility modules.

This leads to violations of DRY (Don't Repeat Yourself) and SRP (Single Responsibility Principle), making the code harder to maintain and scale.

Describe the enhancement you'd like
Refactor the frontend codebase to improve structure, reusability, and maintainability:

1. Introduce a centralised API client (e.g., apiClient or backendFetch) to handle all API requests and remove duplicated fetch logic.
2. Create a dedicated components/icons directory to store reusable SVG components instead of hardcoding them in pages.
3. Move reusable helper functions (e.g., escapeCSVValue) to a shared utils or lib directory.

Why is this enhancement needed?

• Reduces code duplication (DRY compliance)
• Improves code readability and maintainability
• Encourages proper separation of concerns (SRP)
• Makes the codebase easier to scale and extend
• Simplifies future updates (e.g., changing headers or API logic in one place)

Additional context
Example of duplicated API logic:

const response = await fetch(`${backendUrl}/api/v1/configs/`, {
  headers: {
    'X-API-KEY': apiKey || '',
  },
});

Proposed centralized approach:

const { status, data } = await apiClient(
  request,
  `/api/v1/configs/${config_id}`
);

[Ayush8923]

Currently, on multiple pages we are fetching the API key from localStorage using useEffect, which results in repeated and duplicated code across the codebase.

useEffect(() => {
    const stored = localStorage.getItem(STORAGE_KEY);
    if (stored) {
      try {
        setApiKeys(JSON.parse(stored));
      } catch (e) {
        console.error('Failed to load API keys:', e);
      }
    }
  }, []);

We can optimize this by introducing a shared context and/or a helper function to manage the API key. This will reduce repetition, minimize state usage across pages, and improve overall code maintainability.