How jongperono/nccc-clearance works
This is a React frontend for an employee clearance system. Users can submit clearance requests, assign templates, review and approve clearances, and check progress through public tracking routes; dashboard users also manage employees, organizational settings, templates, status, and logs. The graph follows the documented route and dashboard composition, then shows sampled request/detail actions and the shared API client. The README describes only the Vite starter, so product capabilities are inferred from source names and the SOURCE INDEX; unsampled interactions are not expanded into guessed call chains.
Main entry points: Dashboard.tsx Dashboard navigation · ApiService.tsx API client · App.tsx Application router · ClearanceRequest.tsx Clearance requests
Components 28
Application shell
- Application router
src/views/App.tsx - Landing and login
src/views/pages/Landing.tsx - Dashboard navigation
src/views/pages/Dashboard.tsx
Clearance workflow
- Clearance tracking
src/views/components/ClearanceTracking.tsx - Tracking details
src/views/components/ClearanceTrackingDetails.tsx - Clearance requests
src/views/components/ClearanceRequest.tsx - Request details
src/views/components/ClearanceRequestDetails.tsx - Template management
src/views/components/Templates.tsx - Template creation
src/views/components/TemplateCreation.tsx - Template preview
src/views/components/TemplatePreviewModal.tsx - Clearance review
src/views/components/Clearances.tsx - Clearance details
src/views/components/ClearanceDetails.tsx - Edit clearance
src/views/components/ClearanceEditModal.tsx
Dashboard management
- Dashboard overview
src/views/components/DashboardContent.tsx - Employee management
src/views/components/Employee.tsx - Branch management
src/views/components/Branch.tsx - Company management
src/views/components/Company.tsx - Department management
src/views/components/Departments.tsx - Role management
src/views/components/Roles.tsx - Status view
src/views/components/Status.tsx - Activity logs
src/views/components/Logs.tsx
Shared services
- API client
src/utils/ApiService.tsx - Route verifier
src/utils/TokenVerifier.tsx - Dynamic table
src/utils/DynamicTable.tsx - Alert utility
src/utils/CustomAlert.tsx - Domain interfaces
src/types/interfaces.tsx
Other components
- User
- Clearance API
Connections 35
- User → Application router: opens
- Application router → Landing and login: routes to
src/views/App.tsx - Application router → Dashboard navigation: protects route
src/views/App.tsx - Application router → Clearance tracking: routes to
src/views/App.tsx - Application router → Tracking details: routes to
src/views/App.tsx - Landing and login → User: offers login
- Dashboard navigation → Dashboard overview: selects page
src/views/pages/Dashboard.tsx - Dashboard navigation → Clearance requests: selects page
src/views/pages/Dashboard.tsx - Dashboard navigation → Clearance review: selects page
src/views/pages/Dashboard.tsx - Dashboard navigation → Template management: selects page
src/views/pages/Dashboard.tsx - Dashboard navigation → Employee management: selects page
src/views/pages/Dashboard.tsx - Dashboard navigation → Branch management: selects page
src/views/pages/Dashboard.tsx - Dashboard navigation → Company management: selects page
src/views/pages/Dashboard.tsx - Dashboard navigation → Department management: selects page
src/views/pages/Dashboard.tsx - Dashboard navigation → Role management: selects page
src/views/pages/Dashboard.tsx - Dashboard navigation → Status view: selects page
src/views/pages/Dashboard.tsx - Dashboard navigation → Activity logs: selects page
src/views/pages/Dashboard.tsx - Clearance requests → API client: submits request
src/views/components/ClearanceRequest.tsx - Clearance requests → API client: assigns template
src/views/components/ClearanceRequest.tsx - Clearance requests → Request details: renders details
src/views/components/ClearanceRequest.tsx - Clearance requests → Template preview: opens preview
src/views/components/ClearanceRequest.tsx - Template management → Template creation: opens editor
src/views/components/Templates.tsx - Template management → Template preview: opens preview
src/views/components/Templates.tsx - Template preview → API client: manages templates
src/views/components/TemplatePreviewModal.tsx - Clearance review → Clearance details: opens details
src/views/components/Clearances.tsx - Clearance review → Edit clearance: opens editor
src/views/components/Clearances.tsx - Clearance review → API client: loads and approves
src/views/components/Clearances.tsx - Dashboard overview → API client: loads and updates
src/views/components/DashboardContent.tsx - Dashboard overview → Clearance details: opens details
src/views/components/DashboardContent.tsx - Dashboard overview → Edit clearance: opens editor
src/views/components/DashboardContent.tsx - Clearance details → API client: loads details
src/views/components/ClearanceDetails.tsx - API client → Clearance API: sends requests
src/utils/ApiService.tsx - Route verifier → API client: verifies access
src/utils/TokenVerifier.tsx - Route verifier → Alert utility: shows errors
src/utils/TokenVerifier.tsx - Employee management → Domain interfaces: uses employee type
src/views/components/Employee.tsx