# 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.