Folder structure

Orbix is a standard Next.js (App Router) + React + TypeScript project:

orbix-next/
├── next.config.ts                   engine, static export or server build, base path (ORBIX_* variables)
├── packages/foundry-ui/             design system bundled with the template (local npm package),
│                                    with its SCSS sources (see Customize with SCSS)
├── public/
│   ├── favicon.svg
│   └── images/                      demo photos (CC0 / public domain) and their CREDITS.json
├── scripts/                         static export and server build, icon sprite and icon sets, preview server
├── src/
│   ├── app/                         App Router routes (server components)
│   │   ├── layout.tsx               root layout: <html>, engine stylesheet, boot scripts, icon sprite, preloader
│   │   ├── not-found.tsx            404 page for unknown URLs (404.html in the static export)
│   │   ├── (app)/                   route group of the sidebar shell: layout.tsx + one page.tsx per page
│   │   ├── (auth)/                  route group of the sign-in screens (auth/basic, auth/cover, auth/illustrated)
│   │   └── (blank)/                 route group of the status pages and the invoice print view
│   ├── views/                       one client component per page (129), same folders as the URLs
│   ├── config/
│   │   ├── pages.ts                 one entry per page: path, page id, title key, layout
│   │   ├── menu.ts                  sidebar menu (also feeds the command palette)
│   │   └── types.ts                 page and menu types
│   ├── layouts/                     AppLayout (sidebar shell), AuthLayout, BlankLayout (client components)
│   ├── components/
│   │   ├── shell/                   client root (AppRoot), sidebar, topbar, footer, page header, customizer, command palette
│   │   └── apps, auth, forms, ...   reusable blocks (product card, mail row, password field, ...)
│   ├── hooks/                       useI18n, usePageScript, useChart, useDataGrid, useCalendar, useCurrentPage
│   ├── core/                        app start, i18n, page titles, formats, charts, shell preferences, page scope, navigation
│   ├── scripts/                     demo behavior per page family (charts, boards, filters, forms)
│   ├── data/                        demo data (people, events)
│   ├── locales/{en,es,pt,fr,ar}/    translations, one JSON file per area (locales/index.ts loads them)
│   ├── scss/brand.scss              brand settings of the design system (colors, radius, fonts)
│   ├── styles/engines/bootstrap.css    CSS engine entry
│   ├── styles/foundry/              design system compiled from SCSS by the build (generated)
│   ├── styles/index.css, orbix/     template styles (tokens only, logical properties)
│   ├── boot/orbix-boot.js           no-flicker boot script inlined in <head> by the root layout
│   └── svg/                         Orbix icons (the sprite is generated)
├── tests/                           Vitest: routes, hydration, navigation, languages, hard-coded text, sources, images, build
├── vitest.config.ts, tsconfig.json
└── package.json

node_modules/, .next/, dist/, next-env.d.ts, src/generated/, src/styles/foundry/, src/svg/sprite.svg and public/icon-sets/ are created by npm install, npm run build and npm run assets.

How a page is put together

src/app/(app)/dashboards/crm/page.tsx is the route of /dashboards/crm. It is a server component: it sets the page title for the static HTML (metadata) and renders the view src/views/dashboards/crm.tsx.
Next.js wraps it in the layout of its route group: src/app/(app)/layout.tsx renders AppLayout (sidebar shell; the menu comes from src/config/menu.ts), inside the root layout and the client root (AppRoot).
src/config/pages.ts lists the page ({ path: '/dashboards/crm', id: 'dash-crm', title: 'dashboards.crm.title', layout: 'app' }): the layout reads it to set the translated document title and to mark the current menu entry.
The view ('use client') renders its content with translated texts (useI18n()), and usePageScript(init) runs its page script once the app started in the browser: src/scripts/dashboards/crm.ts draws the charts. Everything the script creates is released when you leave the page.

At build time Next.js renders every route to HTML in English (dist/bootstrap/dashboards/crm/index.html). In the browser React hydrates that markup, then src/core/app.ts applies the saved language and theme under the preloader.