OrchestrAD/docs/FrontendCleanup.md

Frontend Cleanup Guide

The frontend/ tree was imported from the Spike Next.js admin template (subtree). It ships with a huge number of demo routes, contexts, and components that OrchestrAD will never use. This guide explains the structural constraints imposed by Next.js App Router, then lists exactly what to delete, what to keep, and what to rename.

Work order: do the renames first (item 2), then the deletions (item 3). Doing deletions first makes the rename diff harder to review.

---

1. Why (DashboardLayout) has parentheses

Folders named (something) in src/app/ are Next.js App Router route groups. The folder name is stripped from the URL, but the layout.tsx inside it still wraps every descendant page. That is why:

• src/app/(DashboardLayout)/page.tsx resolves to / (not /DashboardLayout) and gets the sidebar + header chrome.
• src/app/auth/auth1/login/page.tsx resolves to /auth/auth1/login and does not get the chrome (it is outside the route group).
• src/app/frontend-pages/... is a sibling top-level segment that also bypasses the chrome.

If we move everything from (DashboardLayout)/ up into src/app/, the dashboard layout will wrap the login page too. If we strip the parentheses, every dashboard URL gains a /DashboardLayout/ prefix. Neither is what we want.

Recommended rename: keep the parentheses, but shorten the group name to something project-neutral. (app) is the convention.

---

2. Renames

From	To
frontend/src/app/(DashboardLayout)	frontend/src/app/(app)
(optional) frontend/src/app/auth/auth1	frontend/src/app/auth (then delete the auth2 variant)

After renaming the route group, update every import that references it:

@/app/(DashboardLayout)/...   →   @/app/(app)/...

A single find-and-replace across frontend/src/ is sufficient. The parentheses are literal — include them in the search string.

---

3. Deletions — demo content we will never ship

Everything in this section is demo/template filler. Delete the whole folder in each case.

3a. Route folders (under src/app/(app)/)

• apps/ (blog, calendar, chats, contacts, ecommerce, email, invoice, kanban, notes, tickets, user-profile, user-profile2)
• charts/ (apex charts demo)
• muicharts/ (mui-x charts demo)
• forms/ (form-custom, form-elements, form-horizontal, form-layout, form-tiptap, form-validation, form-vertical, form-wizard)
• icons/
• mui-trees/
• react-tables/ (basic, column-visiblity, dense, drag-n-drop, editable, empty, expanding, filter, pagination, row-selection, sorting, sticky)
• tables/ (basic, collapsible, enhanced, fixed-header, pagination, search)
• theme-pages/ (account-settings, casl, faq, pricing)
• ui-components/ (accordion, alert, avatar, chip, dialog, list, popover, rating, tabs, tooltip, transfer-list, typography)
• widgets/ (banners, cards, charts)
• sample-page/
• dashboards/dashboard2/ (keep page.tsx at the group root as our dashboard)
• EventData.ts (calendar demo fixture)

3b. Component folders (under src/app/components/)

• apps/ — all subfolders
• dashboards/dashboard1 and dashboards/dashboard2 — demo dashboard widgets
• forms/form-tiptap, forms/form-wizard, forms/form-validation, forms/form-horizontal, forms/form-vertical, forms/form-layouts, forms/form-elements (keep forms/theme-elements/ — that contains CustomTextField, CustomFormLabel, CustomCheckbox used throughout)
• frontend-pages/
• landingpage/
• muicharts/
• muitrees/
• pages/account-setting and pages/faq
• react-table/
• tables/ — all demo tables
• ui-components/ — all subfolders
• widgets/ — all subfolders

3c. Other top-level demo routes (under src/app/)

• frontend-pages/ — entire folder
• landingpage/ — entire folder
• api/ — every subfolder except globalFetcher.ts (we'll replace this with our own client anyway; safe to delete the whole api/ folder once our client is in place)
• auth/auth2/ — duplicate of auth1 with a different visual style; pick one

3d. Context providers (under src/app/context/)

Delete everything except customizerContext.tsx and config.ts:

• BlogContext/, ChatContext/, Conatactcontext/, Ecommercecontext/, EmailContext/, InvoiceContext/, NotesContext/, TicketContext/, UserDataContext/, kanbancontext/

3e. Types (under src/app/(app)/types/)

Delete apps/ and auth/ subfolders (we'll add our own types under src/app/types/orchestrad/). Keep dashboard.ts and layout/.

3f. Locale payloads (under src/utils/languages/)

Only keep en.json. Trim it down to strings actually used by the remaining pages, or leave it as-is for now.

---

4. Sidebar and layout updates

After the deletions, src/app/(app)/layout/vertical/sidebar/MenuItems.ts will contain dozens of broken hrefs. Replace its entire contents with the OrchestrAD menu (Dashboard, Credentials, Connections, Schedules, Rules, Rule Runs, Users, API Keys, Audit, Settings, Config). The horizontal navbar at src/app/(app)/layout/horizontal/navbar/Menudata.ts should mirror the same list.

The customizer panel at src/app/(app)/layout/shared/customizer/ can stay — it's useful for theme toggling and does not reference any demo data.

---

5. Keep list (do not touch)

• src/app/(app)/layout/ — header, sidebar shell, footer, customizer
• src/app/components/container/PageContainer.tsx
• src/app/components/custom-scroll/Scrollbar.tsx
• src/app/components/shared/ (BlankCard, ChildCard, DashboardCard, ParentCard, ScrollToTop, etc.)
• src/app/components/forms/theme-elements/ (CustomTextField, CustomFormLabel, CustomCheckbox, CustomSelect, etc.)
• src/app/context/customizerContext.tsx + config.ts
• src/utils/theme/ and src/utils/theme.ts
• src/app/auth/authForms/ (we'll reuse AuthLogin.tsx and drop the rest)

---

6. After the cleanup

When the dust settles, the tree should look roughly like:

frontend/src/app/
├── (app)/
│   ├── layout.tsx
│   ├── layout/            # header, sidebar, footer, customizer
│   ├── page.tsx           # dashboard
│   ├── credentials/       # OrchestrAD pages we will add
│   ├── connections/
│   ├── schedules/
│   ├── rules/
│   ├── users/
│   ├── api-keys/
│   ├── audit/
│   ├── settings/
│   └── config/
├── auth/
│   ├── login/             # the only auth page we keep
│   └── authForms/AuthLogin.tsx
├── components/
│   ├── container/
│   ├── custom-scroll/
│   ├── forms/theme-elements/
│   └── shared/
├── context/
│   ├── AuthContext.tsx    # we will add
│   ├── customizerContext.tsx
│   └── config.ts
├── lib/                   # we will add (api client)
├── app.tsx
├── layout.tsx
└── global.css

Run yarn build (or npm run build) after the cleanup. Next.js will surface every dangling import in one pass, making any cleanup mistake easy to fix.