Directory & Naming Overhaul

[mahid797]

Goal

Migrate from the old /links/[linkId] layout to a cleaner /documentAccess/[linkId], ensuring all files are renamed and ephemeral styled components are removed or replaced. The new structure must accommodate dynamic, JSON‐based visitor fields alongside future expansions (e.g., more sub‐routes, analytics tracking).

Detailed Guidelines

• Directory Structure:

  src/
  ├── app/
  │   ├── documentAccess/
  │   │   ├── [linkId]/
  │   │   │   ├── components/
  │   │   │   │   ├── AccessPage.tsx
  │   │   │   │   ├── VisitorInfoModal.tsx
  │   │   │   │   ├── AccessError.tsx
  │   │   │   │   └── FileDisplay.tsx
  │   │   │   ├── layout.tsx
  │   │   │   ├── loading.tsx
  │   │   │   └── page.tsx
  ├── components/
  │   ├── PDFViewer.tsx
  │   └── ...
  ├── hooks/
  │   ├── documentAccess/
  │   │   ├── useDocumentAccess.ts           // Hook for main doc link fetch logic
  │   │   ├── useVisitorSubmission.ts        // Hook for POST /access
  │   │   └── ... (any other hooks you create for analytics or events)
  │   └── ... (other domain-based folders, e.g. `auth`, `documents`, etc.)
  

• Remove ephemeral styled components (e.g., styled(Box)(...)) unless absolutely needed. If a layout style is used multiple times, create a small local component (e.g., <RowBox />) or use inline sx props:

  <Box
  	sx={{
  		display: 'flex',
  		justifyContent: 'space-between',
  		alignItems: 'center',
  		gap: 2,
  	}}>
  	{/* content */}
  </Box>

• JSON‐Based Fields:

  • The front end sees only the minimal keys from visitorFields. The actual labels or “required” logic come from the shared config.

• Use Global Components:

  • Where possible, reuse existing global <FormInput>, <ModalWrapper>, or similar (in src/components/).
  • If no suitable global component exists, create one if it will be used frequently.

Tasks

1. Rename /links/[linkId] → /documentAccess/[linkId] and fix references in imports/routes.
2. Rename files inside [linkId]/components:
   • FileAccessContainer.tsx → AccessPage.tsx
   • FileAccessFormModal.tsx → VisitorInfoModal.tsx
   • FileAccessMessage.tsx → AccessError.tsx
3. Remove or replace ephemeral styled components:
   • Inline sx or a small local <RowBox /> if reused frequently within the code.
4. Verify final structure matches the new directory layout, including page.tsx for disclaimers/entry flow.
5. Add or reuse any global components (<ModalWrapper>, <FormInput>, etc.) with minor tweaks, if needed.