goitacademy/nextjs-course-code

Purpose and Runtime

This is a Next.js App Router administrative UI for viewing and managing companies and their promotions, plus a dashboard of business summaries. It runs as a React/TypeScript web application, with the Next.js server/runtime handling route rendering and navigation. Styling is global CSS plus Tailwind configuration.

Primary application entry points are src/app/layout.tsx, src/app/page.tsx, and the admin shell at src/app/(admin)/layout.tsx.

Application Shell and Navigation

The root layout establishes cross-route application concerns; the admin route group supplies the management-area frame. Shared navigation and page chrome are componentized around header, sidebar, and toolbar primitives.

Key paths:

• src/app/layout.tsx

• src/app/(admin)/layout.tsx

• src/app/components/header.tsx

• src/app/components/sidebar.tsx

Dashboard Composition

/dashboard is a composite route using App Router parallel routes. Its layout renders independently supplied slots for categories, countries, promotions, sales, and stats, allowing dashboard panels to be fetched/rendered in isolation and to have localized loading/error behavior where implemented.

Key paths:

• src/app/(admin)/dashboard/layout.tsx

• src/app/(admin)/dashboard/@stats/page.tsx

• src/app/(admin)/dashboard/@sales/page.tsx

• src/app/(admin)/dashboard/error.tsx

Dashboard display is built from reusable summary/card components, notably src/app/components/dashboard-card.tsx and src/app/components/summary-table.tsx.

Companies Domain and Detail Flow

The companies route is the central CRUD-oriented domain. The list route presents company rows/table data; dynamic [id] routes render a company detail page and its promotion-related context. A route-level not-found boundary supports invalid or missing company identifiers.

Key paths:

• src/app/(admin)/companies/page.tsx

• src/app/(admin)/companies/[id]/page.tsx

• src/app/(admin)/companies/[id]/not-found.tsx

• src/app/components/company-table.tsx

• src/app/components/company-info.tsx

• src/app/components/company-promotions.tsx

Modal, Toolbar, and Header Route Slots

The companies layout uses parallel route slots (@header, @toolbar, @modal) to vary surrounding UI by list, detail, creation, and promotion-creation state. Intercepting modal routes—such as (.)new and (.)new-promotion—overlay forms during in-app navigation while canonical /new and /[id]/new-promotion routes remain directly addressable.

Key paths:

• src/app/(admin)/companies/layout.tsx

• src/app/(admin)/companies/@modal/(.)new/page.tsx

• src/app/(admin)/companies/@modal/[id]/(.)new-promotion/page.tsx

• src/app/(admin)/companies/new/page.tsx

• src/app/(admin)/companies/[id]/new-promotion/page.tsx

Mutation UI and Data Boundary

Company and promotion creation/editing are represented by dedicated form and modal components. UI components should remain consumers of the repository’s API abstraction rather than coupling directly to a backend transport. getQueryClient and providers indicate a client-side query/cache provider boundary, while api.ts is the likely external data-service integration point.

Key paths:

• src/app/components/company-form.tsx

• src/app/components/promotion-form.tsx

• src/app/components/providers.tsx

• src/lib/api.ts

• src/lib/utils/getQueryClient.ts

Failure and Asset Boundaries

Global and dashboard-specific error boundaries prevent rendering failures from collapsing the whole application. Static visual assets are served from Next’s public directory; uploaded company logos are handled through a dedicated UI component, with persistence/service behavior expected behind the API layer.

Key paths:

• src/app/global-error.tsx

• src/app/(admin)/dashboard/error.tsx

• src/app/components/logo-uploader.tsx

• public/images