# jlusong15/refine-nextjs architecture

> Architecture diagram of the GitHub repository jlusong15/refine-nextjs, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/jlusong15/refine-nextjs
- Repository: https://github.com/jlusong15/refine-nextjs

## Overview

Applicant Tracking Dashboard is a Next.js recruitment interface for managing applicants and interviews against a shared Strapi backend. Recruiters can browse, search, and maintain applicant records, inspect an applicant’s interviews, and schedule interviews; the dashboard summarizes applicant and interview data. Refine provides resource operations and access checks, while the UI includes a mock-login viewer. The README documents the Strapi integration; unsampled forms and dashboard widgets are included based on the source index, so their internal behavior is not detailed here.

Main entry points: [`src/app/applicants/page.tsx`](https://github.com/jlusong15/refine-nextjs/blob/main/src/app/applicants/page.tsx) (Applicant list), [`src/app/dashboard/page.tsx`](https://github.com/jlusong15/refine-nextjs/blob/main/src/app/dashboard/page.tsx) (Dashboard page), [`src/providers/refine.provider.tsx`](https://github.com/jlusong15/refine-nextjs/blob/main/src/providers/refine.provider.tsx) (Resource provider), [`src/app/applicants/[id]/page.tsx`](https://github.com/jlusong15/refine-nextjs/blob/main/src/app/applicants/%5Bid%5D/page.tsx) (Applicant details)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_workflow["Recruitment workflow"]
  node_applicants["Applicant list<br/>[page.tsx]"]
  node_create_applicant["Create applicant"]
  node_edit_applicant["Edit applicant"]
  node_applicant_detail["Applicant details<br/>[page.tsx]"]
  node_interview_form["Schedule interview"]
end

subgraph group_insights["Dashboard insights"]
  node_dashboard["Dashboard page<br/>[page.tsx]"]
  node_dashboard_stats["Summary statistics<br/>[DashboardStats.tsx]"]
  node_status_chart["Status chart"]
  node_upcoming_interviews["Upcoming interviews"]
  node_recent_applicants["Recent applicants"]
end

subgraph group_platform["Data and access"]
  node_refine["Resource provider"]
  node_api_client["HTTP client<br/>[axios.ts]"]
  node_strapi{{"Strapi API"}}
  node_access_control["Access control"]
  node_access_guard["Access guard<br/>[access.guard.ts]"]
  node_mock_login["Mock login state"]
  node_domain_types["Recruitment types"]
  node_constants["Domain constants"]
  node_format["Date and currency formatting<br/>[format.ts]"]
  node_applicant_schema["Applicant validation"]
  node_interview_schema["Interview validation"]
end

subgraph group_ui["Shared interface"]
  node_page_layout["Page layout<br/>[index.tsx]"]
  node_data_table["Data table<br/>[index.tsx]"]
  node_search["Table search"]
  node_ui_primitives["UI primitives"]
end

node_user(("Recruiter"))

node_user -.->|"manages"| node_applicants
node_applicants -->|"queries and deletes"| node_refine
node_applicants -->|"renders"| node_data_table
node_applicants -->|"renders"| node_search
node_applicants -->|"links to"| node_create_applicant
node_applicants -->|"links to"| node_applicant_detail
node_create_applicant -.->|"validates with"| node_applicant_schema
node_create_applicant -.->|"submits through"| node_refine
node_edit_applicant -.->|"submits through"| node_refine
node_applicant_detail -->|"loads and deletes"| node_refine
node_applicant_detail -->|"opens"| node_interview_form
node_interview_form -.->|"validates with"| node_interview_schema
node_interview_form -.->|"submits through"| node_refine
node_dashboard -->|"loads resources"| node_refine
node_dashboard -->|"renders"| node_dashboard_stats
node_dashboard -->|"renders"| node_status_chart
node_dashboard -->|"renders"| node_upcoming_interviews
node_dashboard -->|"renders"| node_recent_applicants
node_refine -->|"configures"| node_api_client
node_refine -->|"configures"| node_access_control
node_api_client -->|"sends requests"| node_strapi
node_access_control -->|"reads state"| node_mock_login
node_access_guard -.->|"checks access"| node_access_control
node_applicants -->|"uses resource and access values"| node_constants
node_applicant_detail -->|"formats values"| node_format
node_applicant_detail -->|"uses types"| node_domain_types
node_dashboard -->|"uses types"| node_domain_types
node_dashboard -->|"formats date"| node_format
node_applicants -->|"uses layout"| node_page_layout
node_applicants -->|"uses controls"| node_ui_primitives
node_data_table -->|"uses controls"| node_ui_primitives
node_search -->|"uses input"| node_ui_primitives

click node_applicants "https://github.com/jlusong15/refine-nextjs/blob/main/src/app/applicants/page.tsx"
click node_create_applicant "https://github.com/jlusong15/refine-nextjs/blob/main/src/app/applicants/create/CreateApplicantForm.tsx"
click node_edit_applicant "https://github.com/jlusong15/refine-nextjs/blob/main/src/app/applicants/edit/%5Bid%5D/EditApplicantForm.tsx"
click node_applicant_detail "https://github.com/jlusong15/refine-nextjs/blob/main/src/app/applicants/%5Bid%5D/page.tsx"
click node_interview_form "https://github.com/jlusong15/refine-nextjs/blob/main/src/app/applicants/%5Bid%5D/CreateInterviewForm.tsx"
click node_dashboard "https://github.com/jlusong15/refine-nextjs/blob/main/src/app/dashboard/page.tsx"
click node_dashboard_stats "https://github.com/jlusong15/refine-nextjs/blob/main/src/app/dashboard/DashboardStats.tsx"
click node_status_chart "https://github.com/jlusong15/refine-nextjs/blob/main/src/app/dashboard/ApplicantStatusChart.tsx"
click node_upcoming_interviews "https://github.com/jlusong15/refine-nextjs/blob/main/src/app/dashboard/UpcomingInterviewsCard.tsx"
click node_recent_applicants "https://github.com/jlusong15/refine-nextjs/blob/main/src/app/dashboard/RecentApplicantsCard.tsx"
click node_refine "https://github.com/jlusong15/refine-nextjs/blob/main/src/providers/refine.provider.tsx"
click node_api_client "https://github.com/jlusong15/refine-nextjs/blob/main/src/lib/axios.ts"
click node_access_control "https://github.com/jlusong15/refine-nextjs/blob/main/src/providers/access-control.provider.ts"
click node_access_guard "https://github.com/jlusong15/refine-nextjs/blob/main/src/guards/access.guard.ts"
click node_mock_login "https://github.com/jlusong15/refine-nextjs/blob/main/src/components/store/toggle-viewer.store.ts"
click node_domain_types "https://github.com/jlusong15/refine-nextjs/tree/main/src/types"
click node_constants "https://github.com/jlusong15/refine-nextjs/tree/main/src/constants"
click node_format "https://github.com/jlusong15/refine-nextjs/blob/main/src/lib/format.ts"
click node_page_layout "https://github.com/jlusong15/refine-nextjs/blob/main/src/components/layout/DefaulPageLayout/index.tsx"
click node_data_table "https://github.com/jlusong15/refine-nextjs/blob/main/src/components/shared/DataTable/index.tsx"
click node_search "https://github.com/jlusong15/refine-nextjs/blob/main/src/components/shared/DataTable/DataTableSearch.tsx"
click node_ui_primitives "https://github.com/jlusong15/refine-nextjs/tree/main/src/components/ui"
click node_applicant_schema "https://github.com/jlusong15/refine-nextjs/blob/main/src/schemas/applicant.schema.ts"
click node_interview_schema "https://github.com/jlusong15/refine-nextjs/blob/main/src/schemas/interview.schema.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_applicants,node_create_applicant,node_edit_applicant,node_applicant_detail,node_interview_form toneBlue
class node_dashboard,node_dashboard_stats,node_status_chart,node_upcoming_interviews,node_recent_applicants toneAmber
class node_refine,node_api_client,node_strapi,node_access_control,node_access_guard,node_mock_login,node_domain_types,node_constants,node_format,node_applicant_schema,node_interview_schema toneMint
class node_page_layout,node_data_table,node_search,node_ui_primitives toneRose
class node_user toneIndigo
```

## Components

### Recruitment workflow

- [Applicant list](https://github.com/jlusong15/refine-nextjs/blob/main/src/app/applicants/page.tsx): `src/app/applicants/page.tsx`
- [Create applicant](https://github.com/jlusong15/refine-nextjs/blob/main/src/app/applicants/create/CreateApplicantForm.tsx): `src/app/applicants/create/CreateApplicantForm.tsx`
- [Edit applicant](https://github.com/jlusong15/refine-nextjs/blob/main/src/app/applicants/edit/%5Bid%5D/EditApplicantForm.tsx): `src/app/applicants/edit/[id]/EditApplicantForm.tsx`
- [Applicant details](https://github.com/jlusong15/refine-nextjs/blob/main/src/app/applicants/%5Bid%5D/page.tsx): `src/app/applicants/[id]/page.tsx`
- [Schedule interview](https://github.com/jlusong15/refine-nextjs/blob/main/src/app/applicants/%5Bid%5D/CreateInterviewForm.tsx): `src/app/applicants/[id]/CreateInterviewForm.tsx`

### Dashboard insights

- [Dashboard page](https://github.com/jlusong15/refine-nextjs/blob/main/src/app/dashboard/page.tsx): `src/app/dashboard/page.tsx`
- [Summary statistics](https://github.com/jlusong15/refine-nextjs/blob/main/src/app/dashboard/DashboardStats.tsx): `src/app/dashboard/DashboardStats.tsx`
- [Status chart](https://github.com/jlusong15/refine-nextjs/blob/main/src/app/dashboard/ApplicantStatusChart.tsx): `src/app/dashboard/ApplicantStatusChart.tsx`
- [Upcoming interviews](https://github.com/jlusong15/refine-nextjs/blob/main/src/app/dashboard/UpcomingInterviewsCard.tsx): `src/app/dashboard/UpcomingInterviewsCard.tsx`
- [Recent applicants](https://github.com/jlusong15/refine-nextjs/blob/main/src/app/dashboard/RecentApplicantsCard.tsx): `src/app/dashboard/RecentApplicantsCard.tsx`

### Data and access

- [Resource provider](https://github.com/jlusong15/refine-nextjs/blob/main/src/providers/refine.provider.tsx): `src/providers/refine.provider.tsx`
- [HTTP client](https://github.com/jlusong15/refine-nextjs/blob/main/src/lib/axios.ts): `src/lib/axios.ts`
- **Strapi API**
- [Access control](https://github.com/jlusong15/refine-nextjs/blob/main/src/providers/access-control.provider.ts): `src/providers/access-control.provider.ts`
- [Access guard](https://github.com/jlusong15/refine-nextjs/blob/main/src/guards/access.guard.ts): `src/guards/access.guard.ts`
- [Mock login state](https://github.com/jlusong15/refine-nextjs/blob/main/src/components/store/toggle-viewer.store.ts): `src/components/store/toggle-viewer.store.ts`
- [Recruitment types](https://github.com/jlusong15/refine-nextjs/tree/main/src/types): `src/types`
- [Domain constants](https://github.com/jlusong15/refine-nextjs/tree/main/src/constants): `src/constants`
- [Date and currency formatting](https://github.com/jlusong15/refine-nextjs/blob/main/src/lib/format.ts): `src/lib/format.ts`
- [Applicant validation](https://github.com/jlusong15/refine-nextjs/blob/main/src/schemas/applicant.schema.ts): `src/schemas/applicant.schema.ts`
- [Interview validation](https://github.com/jlusong15/refine-nextjs/blob/main/src/schemas/interview.schema.ts): `src/schemas/interview.schema.ts`

### Shared interface

- [Page layout](https://github.com/jlusong15/refine-nextjs/blob/main/src/components/layout/DefaulPageLayout/index.tsx): `src/components/layout/DefaulPageLayout/index.tsx`
- [Data table](https://github.com/jlusong15/refine-nextjs/blob/main/src/components/shared/DataTable/index.tsx): `src/components/shared/DataTable/index.tsx`
- [Table search](https://github.com/jlusong15/refine-nextjs/blob/main/src/components/shared/DataTable/DataTableSearch.tsx): `src/components/shared/DataTable/DataTableSearch.tsx`
- [UI primitives](https://github.com/jlusong15/refine-nextjs/tree/main/src/components/ui): `src/components/ui`

### Other components

- **Recruiter**

## Connections

- Recruiter → Applicant list: manages
- Applicant list → Resource provider: queries and deletes (evidence: `src/app/applicants/page.tsx`)
- Applicant list → Data table: renders (evidence: `src/app/applicants/page.tsx`)
- Applicant list → Table search: renders (evidence: `src/app/applicants/page.tsx`)
- Applicant list → Create applicant: links to (evidence: `src/app/applicants/page.tsx`)
- Applicant list → Applicant details: links to (evidence: `src/app/applicants/page.tsx`)
- Create applicant → Applicant validation: validates with
- Create applicant → Resource provider: submits through
- Edit applicant → Resource provider: submits through
- Applicant details → Resource provider: loads and deletes (evidence: `src/app/applicants/[id]/page.tsx`)
- Applicant details → Schedule interview: opens (evidence: `src/app/applicants/[id]/page.tsx`)
- Schedule interview → Interview validation: validates with
- Schedule interview → Resource provider: submits through
- Dashboard page → Resource provider: loads resources (evidence: `src/app/dashboard/page.tsx`)
- Dashboard page → Summary statistics: renders (evidence: `src/app/dashboard/page.tsx`)
- Dashboard page → Status chart: renders (evidence: `src/app/dashboard/page.tsx`)
- Dashboard page → Upcoming interviews: renders (evidence: `src/app/dashboard/page.tsx`)
- Dashboard page → Recent applicants: renders (evidence: `src/app/dashboard/page.tsx`)
- Resource provider → HTTP client: configures (evidence: `src/providers/refine.provider.tsx`)
- Resource provider → Access control: configures (evidence: `src/providers/refine.provider.tsx`)
- HTTP client → Strapi API: sends requests (evidence: `README.md`)
- Access control → Mock login state: reads state (evidence: `src/providers/access-control.provider.ts`)
- Access guard → Access control: checks access
- Applicant list → Domain constants: uses resource and access values (evidence: `src/app/applicants/page.tsx`)
- Applicant details → Date and currency formatting: formats values (evidence: `src/app/applicants/[id]/page.tsx`)
- Applicant details → Recruitment types: uses types (evidence: `src/app/applicants/[id]/page.tsx`)
- Dashboard page → Recruitment types: uses types (evidence: `src/app/dashboard/page.tsx`)
- Dashboard page → Date and currency formatting: formats date (evidence: `src/app/dashboard/page.tsx`)
- Applicant list → Page layout: uses layout (evidence: `src/app/applicants/page.tsx`)
- Applicant list → UI primitives: uses controls (evidence: `src/app/applicants/page.tsx`)
- Data table → UI primitives: uses controls (evidence: `src/components/shared/DataTable/index.tsx`)
- Table search → UI primitives: uses input (evidence: `src/components/shared/DataTable/DataTableSearch.tsx`)