@atlashub/smartstack-cli 3.23.0 → 3.24.0

package/templates/skills/apex/references/smartstack-layers.md

@@ -192,14 +192,16 @@ var sectionRoute = $"{moduleRoute}/{ToKebabCase(sectionCode)}";
 
 ## Layer 2 — Frontend (parallel with I18n)
 
+> **Detailed patterns:** See `references/smartstack-frontend.md` for complete code templates.
+
 **Pages:** `src/pages/{ContextPascal}/{AppPascal}/{Module}/`
 **Components:** `src/components/{Module}/`
 
 | Action | Tool |
 |--------|------|
 | API client | MCP `scaffold_api_client` |
-| Routes | MCP `scaffold_routes` |
-| Complex pages | /ui-components skill |
+| Routes | MCP `scaffold_routes` (outputFormat: `clientRoutes`) |
+| Complex pages | /ui-components skill + `smartstack-frontend.md` patterns |
 | Validate routes | MCP `validate_frontend_routes` |
 
 **Layout mapping:**
@@ -210,21 +212,95 @@ var sectionRoute = $"{moduleRoute}/{ToKebabCase(sectionCode)}";
 | `business.*` | `BusinessLayout` | `/business` |
 | `personal.*` | `UserLayout` | `/personal/myspace` |
 
+### Lazy Loading (MANDATORY)
+
+ALL page components MUST be lazy-loaded using `React.lazy()`:
+
+```tsx
+const EmployeesPage = lazy(() =>
+  import('@/pages/Business/HumanResources/Employees/EmployeesPage')
+    .then(m => ({ default: m.EmployeesPage }))
+);
+
+// Route element — ALWAYS wrap with Suspense
+element: <Suspense fallback={<PageLoader />}><EmployeesPage /></Suspense>
+```
+
+### Page Structure Pattern
+
+All pages MUST follow: hooks → useEffect(load) → loading state → error state → content.
+
+```tsx
+// 1. Hooks at top
+const { t } = useTranslation(['{module}']);
+// 2. State
+const [loading, setLoading] = useState(true);
+// 3. useCallback + useEffect for data loading
+// 4. if (loading) return <Loader2 spinner />
+// 5. if (error) return <error UI with retry>
+// 6. return <content with CSS variables>
+```
+
+### Components & CSS
+
 **Components:** SmartTable, SmartFilter, EntityCard, SmartForm, StatCard (NEVER raw HTML)
-**CSS:** Variables only → `bg-[var(--bg-card)]`, `text-[var(--text-primary)]`
+**CSS:** Variables only → `bg-[var(--bg-card)]`, `text-[var(--text-primary)]`, `border-[var(--border-color)]`
+**Loader:** `Loader2` from `lucide-react` for spinners, `PageLoader` for Suspense fallback
+
+### FK Fields in Forms (CRITICAL)
+
+Any entity property that is a FK Guid (e.g., `EmployeeId`, `DepartmentId`) MUST use the `EntityLookup` component — NEVER a plain text input. Users cannot type GUIDs manually.
+
+```tsx
+// CORRECT — EntityLookup for FK field
+<EntityLookup
+  apiEndpoint="/api/business/human-resources/employees"
+  value={formData.employeeId}
+  onChange={(id) => handleChange('employeeId', id)}
+  label={t('module:form.employee', 'Employee')}
+  mapOption={(item) => ({ id: item.id, label: item.name, sublabel: item.code })}
+  required
+/>
+
+// WRONG — plain text input for FK GUID
+<input type="text" value={formData.employeeId} placeholder="Enter employee ID" />
+```
+
+**Backend requirement:** Each target entity's GetAll endpoint MUST accept `?search=` parameter. See `smartstack-api.md` Service Pattern.
+
+See `references/smartstack-frontend.md` section 6 for the full `EntityLookup` component definition and usage patterns.
 
 **FORBIDDEN:**
 - `src/pages/{Module}/` (flat, missing Context/App)
 - `import axios` → use `@/services/api/apiClient`
 - `<table>` → use SmartTable
-- Hardcoded colors → use CSS variables
+- `<input type="text">` for FK Guid fields → use `EntityLookup`
+- Placeholder "Enter ID" or "Enter GUID" → use `EntityLookup`
+- Hardcoded Tailwind colors (`bg-white`, `text-gray-900`) → use CSS variables
+- Static page imports in route files → use `React.lazy()`
+- `<Suspense>` without `fallback` prop
 - Only fr/en → MUST have 4 languages
+- `t('key')` without namespace prefix → use `t('ns:key', 'fallback')`
+- Hardcoded user-facing strings in JSX → use `t()`
 
 ---
 
 ## Layer 2 — I18n
 
-4 JSON files: fr, en, it, de — identical key structures.
+> **Template:** See `references/smartstack-frontend.md` Section 2 for complete JSON template.
+
+4 JSON files per module namespace: fr, en, it, de — identical key structures.
+
+**Location:** `src/i18n/locales/{lang}/{module}.json`
+
+**Required keys:** `title`, `description`, `actions`, `labels`, `columns`, `form`, `errors`, `validation`, `messages`, `empty`
+
+**Usage pattern:**
+```tsx
+const { t } = useTranslation(['{module}']);
+t('{module}:title', 'Module Title')           // ALWAYS with fallback
+t('{module}:actions.create', 'Create entity') // ALWAYS with namespace prefix
+```
 
 ---
 

package/templates/skills/apex/steps/step-01-analyze.md

@@ -136,7 +136,31 @@ Identify:
 
 ---
 
-## 4. Gap Analysis
+## 4. FK Field Detection
+
+For each entity found (or to be created), identify FK relationships:
+
+```
+For each entity in analysis results:
+  - List properties ending in "Id" with a matching navigation property (e.g., EmployeeId + Employee)
+  - Record: { fkProperty, targetEntity, isRequired }
+
+Output:
+  fkFields: [
+    { entity: "TimeEntry", fkProperty: "EmployeeId", targetEntity: "Employee", isRequired: true },
+    { entity: "TimeEntry", fkProperty: "ProjectId", targetEntity: "Project", isRequired: true }
+  ]
+```
+
+**Why:** FK fields drive two critical downstream requirements:
+1. **Frontend:** Each FK field MUST use `EntityLookup` component (NEVER plain text input for GUIDs)
+2. **Backend:** Each target entity's GetAll endpoint MUST support `?search=` query parameter
+
+These are propagated to step-02 (plan) and step-03 (execute).
+
+---
+
+## 5. Gap Analysis
 
 Compare what EXISTS vs what the TASK REQUIRES:
 
@@ -149,7 +173,7 @@ For each element in the task description:
 
 ---
 
-## 5. Analysis Summary
+## 6. Analysis Summary
 
 ```
 **APEX SmartStack - Analysis Complete**
@@ -176,7 +200,7 @@ For each element in the task description:
 
 ---
 
-## 6. Save Output (if save_mode)
+## 7. Save Output (if save_mode)
 
 Write to `{output_dir}/01-analyze.md` with analysis results.
 

package/templates/skills/apex/steps/step-02-plan.md

@@ -63,9 +63,13 @@ For EACH file in the plan, specify HOW it will be created/modified:
 | # | File | Action | Tool |
 |---|------|--------|------|
 | 10 | src/pages/{Ctx}/{App}/{Mod}/ListPage.tsx | create | /ui-components skill |
+| 10b | src/pages/{Ctx}/{App}/{Mod}/CreatePage.tsx | create | /ui-components skill (EntityLookup for FK fields) |
+| 10c | src/pages/{Ctx}/{App}/{Mod}/EditPage.tsx | create | /ui-components skill (EntityLookup for FK fields) |
 | 11 | src/services/api/{module}Api.ts | create | MCP scaffold_api_client |
 | 12 | src/routes/{module}.tsx | create | MCP scaffold_routes |
-| 13 | src/locales/fr/{module}.json | create | manual (4 languages) |
+| 13 | src/i18n/locales/{lang}/{module}.json | create | ref smartstack-frontend.md (4 languages: fr, en, it, de) |
+
+**FK Field Guidance:** If step-01 identified `fkFields[]`, every Create/Edit page MUST use `EntityLookup` for those fields (see `smartstack-frontend.md` section 6). The corresponding backend GetAll endpoints (Layer 1) MUST support `?search=` parameter.
 
 ### Layer 3 — Tests (sequential, if -t)
 

package/templates/skills/apex/steps/step-03-execute.md

@@ -14,6 +14,7 @@ All code goes through skills (/controller, /application, /ui-components, /efcore
 ## LOAD CONDITIONALLY
 
 - **ALWAYS** read `references/smartstack-api.md` — BaseEntity API, entity/config/controller patterns
+- **ALWAYS** read `references/smartstack-frontend.md` — lazy loading, i18n, page structure, CSS variables
 - Read `references/smartstack-layers.md` for execution rules per layer
 - If NOT `{economy_mode}` AND Layer 1 has parallel work: read `references/agent-teams-protocol.md`
 
@@ -66,6 +67,18 @@ dotnet build
 
 Execute each item from the plan sequentially using skills and MCP.
 
+**For frontend tasks (economy_mode):** Follow the same rules as exec-frontend above:
+- `MCP scaffold_api_client` → API client + types + React Query hook
+- `MCP scaffold_routes` with `outputFormat: 'clientRoutes'` for lazy imports
+- Pages: use `/ui-components` skill — MANDATORY for entity lists, grids, tables, dashboards
+- **Form pages: Create `EntityCreatePage.tsx` (route: `/create`) and `EntityEditPage.tsx` (route: `/:id/edit`)**
+- **FK FIELDS (CRITICAL):** Any Guid FK property (e.g., EmployeeId, DepartmentId) MUST use `EntityLookup` component — NEVER a plain text input. See `smartstack-frontend.md` section 6.
+- **ZERO modals/popups/drawers for forms — ALL forms are full pages with their own URL**
+- **Form tests: Generate `EntityCreatePage.test.tsx` and `EntityEditPage.test.tsx` (co-located)**
+- Read `references/smartstack-frontend.md` for mandatory patterns (sections 3b + 8)
+- Generate i18n JSON files for all 4 languages (fr, en, it, de) — `src/i18n/locales/{lang}/{module}.json`
+- All pages must follow loading → error → content pattern with CSS variables
+
 ### If NOT economy_mode: Agent Teams (parallel)
 
 > **Protocol:** See `references/agent-teams-protocol.md`
@@ -82,6 +95,7 @@ Spawn 2 teammates (Opus, full tools):
     For each task:
     - Application services/DTOs: MCP scaffold_extension
     - Controllers: use /controller skill for complex, MCP scaffold_extension for simple
+    - IMPORTANT: ALL GetAll endpoints MUST support ?search= query parameter (enables EntityLookup on frontend)
     - Seed data: MCP generate_permissions, then follow smartstack-layers.md templates
 
     After ALL tasks done:
@@ -91,11 +105,37 @@ Spawn 2 teammates (Opus, full tools):
    "Execute these Layer 1 frontend tasks for module {module_code}:
     {list of frontend + i18n tasks from plan}
 
+    **MANDATORY: Read references/smartstack-frontend.md FIRST** — contains all required patterns.
+
     For each task:
     - API client: MCP scaffold_api_client
-    - Routes: MCP scaffold_routes
-    - Pages: use /ui-components skill
-    - I18n: 4 languages (fr, en, it, de)
+    - Routes: MCP scaffold_routes (outputFormat: 'clientRoutes') → generates lazy imports + Suspense
+    - Pages: use /ui-components skill — MUST follow smartstack-frontend.md patterns:
+      → React.lazy() for all page imports (named export wrapping)
+      → <Suspense fallback={<PageLoader />}> around all lazy components
+      → Page structure: hooks → useEffect(load) → loading → error → content
+      → CSS variables only: bg-[var(--bg-card)], text-[var(--text-primary)]
+      → SmartTable/SmartFilter/EntityCard (NEVER raw HTML)
+    - **FORM PAGES (CRITICAL):** Create/Edit forms are FULL PAGES with own routes:
+      → EntityCreatePage.tsx with route /{module}/create
+      → EntityEditPage.tsx with route /{module}/:id/edit
+      → ZERO modals/popups/drawers/dialogs for forms
+      → Back button with navigate(-1) on every form page
+      → See smartstack-frontend.md section 3b for templates
+    - **FK FIELDS (CRITICAL):** Foreign key Guid fields (e.g., EmployeeId) MUST use EntityLookup:
+      → NEVER render FK fields as plain text inputs — users cannot type GUIDs
+      → Use EntityLookup from @/components/ui/EntityLookup for searchable selection
+      → Each FK field needs: apiEndpoint, mapOption (display name), search support on backend
+      → See smartstack-frontend.md section 6 for the full EntityLookup pattern
+    - **FORM TESTS (MANDATORY):**
+      → EntityCreatePage.test.tsx (co-located next to page)
+      → EntityEditPage.test.tsx (co-located next to page)
+      → Cover: rendering, validation, submit, pre-fill, navigation, errors
+      → See smartstack-frontend.md section 8 for test templates
+    - I18n: Generate 4 JSON files per module namespace (fr, en, it, de)
+      → Follow JSON template from smartstack-frontend.md
+      → Keys: actions, labels, errors, validation, columns, form, messages, empty
+      → ALL t() calls MUST use namespace prefix + fallback: t('ns:key', 'Default text')
     - MUST use src/pages/{Context}/{App}/{Module}/ hierarchy (NOT flat)
 
     After ALL tasks done:

package/templates/skills/apex/steps/step-04-validate.md

@@ -222,6 +222,157 @@ if [ -n "$SERVICE_FILES" ]; then
 fi
 ```
 
+### POST-CHECK 6: Translation files must exist for all 4 languages (if frontend)
+
+```bash
+# Find all i18n namespaces used in tsx files
+TSX_FILES=$(find src/pages/ -name "*.tsx" 2>/dev/null)
+if [ -n "$TSX_FILES" ]; then
+  NAMESPACES=$(grep -ohP "useTranslation\(\[?'([^']+)" $TSX_FILES | sed "s/.*'//" | sort -u)
+  for NS in $NAMESPACES; do
+    for LANG in fr en it de; do
+      if [ ! -f "src/i18n/locales/$LANG/$NS.json" ]; then
+        echo "BLOCKING: Missing translation file: src/i18n/locales/$LANG/$NS.json"
+        exit 1
+      fi
+    done
+  done
+fi
+```
+
+### POST-CHECK 7: Pages must use lazy loading (no static page imports in routes)
+
+```bash
+ROUTE_FILES=$(find src/routes/ -name "*.tsx" -o -name "*.ts" 2>/dev/null)
+if [ -n "$ROUTE_FILES" ]; then
+  STATIC_PAGE_IMPORTS=$(grep -Pn "^import .+ from '@/pages/" $ROUTE_FILES 2>/dev/null)
+  if [ -n "$STATIC_PAGE_IMPORTS" ]; then
+    echo "BLOCKING: Route files must use React.lazy() for page imports, not static imports"
+    echo "$STATIC_PAGE_IMPORTS"
+    echo "Fix: const Page = lazy(() => import('@/pages/...').then(m => ({ default: m.Page })));"
+    exit 1
+  fi
+fi
+```
+
+### POST-CHECK 8: Forms must be full pages with routes — ZERO modals/popups/drawers
+
+```bash
+# Check for modal/dialog/drawer imports in page files (create/edit forms)
+PAGE_FILES=$(find src/pages/ -name "*.tsx" 2>/dev/null)
+if [ -n "$PAGE_FILES" ]; then
+  MODAL_IMPORTS=$(grep -Pn "import.*(?:Modal|Dialog|Drawer|Popup|Sheet)" $PAGE_FILES 2>/dev/null)
+  if [ -n "$MODAL_IMPORTS" ]; then
+    echo "BLOCKING: Form pages must NOT use Modal/Dialog/Drawer/Popup components"
+    echo "Create/Edit forms MUST be full pages with their own URL routes"
+    echo "Found modal imports in page files:"
+    echo "$MODAL_IMPORTS"
+    echo "Fix: Create EntityCreatePage.tsx with route /create and EntityEditPage.tsx with route /:id/edit"
+    exit 1
+  fi
+fi
+```
+
+### POST-CHECK 9: Create/Edit pages must exist as separate route pages
+
+```bash
+# For each module with a list page, verify create and edit pages exist
+LIST_PAGES=$(find src/pages/ -name "*ListPage.tsx" -o -name "*sPage.tsx" 2>/dev/null | grep -v test)
+if [ -n "$LIST_PAGES" ]; then
+  for LIST_PAGE in $LIST_PAGES; do
+    PAGE_DIR=$(dirname "$LIST_PAGE")
+    MODULE_NAME=$(basename "$PAGE_DIR")
+    # Check for create page
+    CREATE_PAGE=$(find "$PAGE_DIR" -name "*CreatePage.tsx" 2>/dev/null)
+    if [ -z "$CREATE_PAGE" ]; then
+      echo "WARNING: Module $MODULE_NAME has a list page but no CreatePage — expected EntityCreatePage.tsx"
+    fi
+    # Check for edit page
+    EDIT_PAGE=$(find "$PAGE_DIR" -name "*EditPage.tsx" 2>/dev/null)
+    if [ -z "$EDIT_PAGE" ]; then
+      echo "WARNING: Module $MODULE_NAME has a list page but no EditPage — expected EntityEditPage.tsx"
+    fi
+  done
+fi
+```
+
+### POST-CHECK 10: Form pages must have companion test files
+
+```bash
+# Every CreatePage and EditPage must have a .test.tsx file
+FORM_PAGES=$(find src/pages/ -name "*CreatePage.tsx" -o -name "*EditPage.tsx" 2>/dev/null | grep -v test)
+if [ -n "$FORM_PAGES" ]; then
+  for FORM_PAGE in $FORM_PAGES; do
+    TEST_FILE="${FORM_PAGE%.tsx}.test.tsx"
+    if [ ! -f "$TEST_FILE" ]; then
+      echo "BLOCKING: Form page missing test file: $FORM_PAGE"
+      echo "Expected: $TEST_FILE"
+      echo "All form pages MUST have companion test files (rendering, validation, submit, navigation)"
+      exit 1
+    fi
+  done
+fi
+```
+
+### POST-CHECK 11: FK fields must NOT be plain text inputs (EntityLookup required)
+
+```bash
+# Check for FK fields rendered as plain text inputs in form pages
+FORM_PAGES=$(find src/pages/ -name "*CreatePage.tsx" -o -name "*EditPage.tsx" 2>/dev/null | grep -v test | grep -v node_modules)
+if [ -n "$FORM_PAGES" ]; then
+  # Detect pattern: input with value containing "Id" (e.g., employeeId, departmentId)
+  FK_TEXT_INPUTS=$(grep -Pn 'type=["\x27]text["\x27].*[a-z]+Id|value=\{[^}]*\.[a-z]+Id\}.*type=["\x27]text["\x27]' $FORM_PAGES 2>/dev/null)
+  if [ -n "$FK_TEXT_INPUTS" ]; then
+    echo "BLOCKING: FK fields rendered as plain text inputs — MUST use EntityLookup component"
+    echo "Users cannot type GUIDs manually. Use <EntityLookup /> from @/components/ui/EntityLookup"
+    echo "See smartstack-frontend.md section 6 for the EntityLookup pattern"
+    echo "$FK_TEXT_INPUTS"
+    exit 1
+  fi
+
+  # Check for input placeholders mentioning "ID" or "id" or "Enter...Id"
+  FK_PLACEHOLDER=$(grep -Pn 'placeholder=["\x27].*[Ee]nter.*[Ii][Dd]|placeholder=["\x27].*[Gg][Uu][Ii][Dd]' $FORM_PAGES 2>/dev/null)
+  if [ -n "$FK_PLACEHOLDER" ]; then
+    echo "BLOCKING: Form has placeholder asking user to enter an ID/GUID — use EntityLookup instead"
+    echo "$FK_PLACEHOLDER"
+    exit 1
+  fi
+fi
+```
+
+### POST-CHECK 12: Backend APIs must support search parameter for EntityLookup
+
+```bash
+# Check that controller GetAll methods accept search parameter
+CTRL_FILES=$(find src/ -path "*/Controllers/*" -name "*Controller.cs" 2>/dev/null)
+if [ -n "$CTRL_FILES" ]; then
+  for f in $CTRL_FILES; do
+    # Check if controller has GetAll but no search parameter
+    if grep -q "\[HttpGet\]" "$f" && grep -q "GetAll" "$f"; then
+      if ! grep -q "search" "$f"; then
+        echo "WARNING: Controller missing search parameter on GetAll: $f"
+        echo "GetAll endpoints MUST accept ?search= to enable EntityLookup on frontend"
+        echo "Fix: Add [FromQuery] string? search parameter to GetAll action"
+      fi
+    fi
+  done
+fi
+```
+
+### POST-CHECK 13: No hardcoded Tailwind colors in generated pages
+
+```bash
+NEW_PAGES=$(git diff --name-only HEAD 2>/dev/null | grep "src/pages/.*\.tsx$")
+if [ -n "$NEW_PAGES" ]; then
+  HARDCODED=$(grep -Pn '(bg|text|border)-(?!\[)(red|blue|green|gray|white|black|slate|zinc|neutral|stone)-' $NEW_PAGES 2>/dev/null)
+  if [ -n "$HARDCODED" ]; then
+    echo "WARNING: Pages should use CSS variables instead of hardcoded Tailwind colors"
+    echo "Fix: bg-[var(--bg-card)] instead of bg-white, text-[var(--text-primary)] instead of text-gray-900"
+    echo "$HARDCODED"
+  fi
+fi
+```
+
 **If ANY POST-CHECK fails → fix in step-03, re-validate.**
 
 ---
@@ -255,6 +406,14 @@ AC2: {criterion} → PASS / FAIL (evidence: {file:line or test})
 | dotnet build | PASS |
 | npm typecheck | PASS / N/A |
 | Seed data | PASS / N/A |
+| I18n: 4 languages per namespace | PASS / N/A |
+| Lazy loading: no static page imports | PASS / N/A |
+| Forms: full pages, zero modals | PASS / N/A |
+| Forms: create/edit pages exist | PASS / N/A |
+| Forms: test files exist | PASS / N/A |
+| FK fields: EntityLookup, no plain text | PASS / N/A |
+| APIs: search parameter on GetAll | PASS / N/A |
+| CSS variables: no hardcoded colors | PASS / N/A |
 | Acceptance criteria | {X}/{Y} PASS |
 ```
 

package/templates/skills/apex/steps/step-05-examine.md

@@ -60,6 +60,13 @@ For each changed file, check:
 - [ ] SmartTable/SmartForm (not raw HTML tables/forms)
 - [ ] Correct Layout wrapper per context
 
+**FK Fields & Forms:**
+- [ ] FK Guid fields use `EntityLookup` component (NEVER plain text `<input>`)
+- [ ] No placeholder text asking user to "Enter ID" or "Enter GUID"
+- [ ] Create/Edit forms are full pages with own routes (ZERO modals/dialogs)
+- [ ] Backend GetAll endpoints support `?search=` param for EntityLookup
+- [ ] Each EntityLookup has `apiEndpoint`, `mapOption`, `label` props
+
 ---
 
 ## 4. Produce Findings

package/templates/skills/apex/steps/step-07-tests.md

@@ -100,6 +100,24 @@ Call: mcp__smartstack__scaffold_tests
 Tests: RequirePermission enforcement, multi-tenant isolation
 ```
 
+### Frontend Form Tests
+```
+For each module with create/edit pages:
+  → Generate EntityCreatePage.test.tsx and EntityEditPage.test.tsx
+  → Co-located next to the page component (NOT in __tests__/ folder)
+
+Required test coverage:
+  - Rendering: form renders with all expected fields
+  - Validation: required fields show errors on empty submit
+  - Submission: successful submit calls API and navigates back
+  - Pre-fill (edit only): entity data loaded into fields
+  - Navigation: back/cancel button calls navigate(-1)
+  - Error handling: API error displays error message
+
+Tools: Vitest + React Testing Library + @testing-library/user-event
+Mock API: vi.mock() or MSW — NEVER real API calls
+```
+
 ---
 
 ## 3. Suggest Additional Scenarios
@@ -136,6 +154,7 @@ If under 80%: identify uncovered paths, scaffold additional tests
 | Application | {count} | {%} |
 | API | {count} | {%} |
 | Security | {count} | {%} |
+| Frontend Forms | {count} | {%} |
 
 **Total tests:** {count}
 **Estimated coverage:** {%}

package/templates/skills/business-analyse/_shared.md

@@ -98,13 +98,13 @@ Level 1: Context (business)
 ### Standard Sections per Module
 
 > **RULE: Sections are functional zones, NOT CRUD operations.**
-> `create` and `edit` are ACTIONS within the `list` page (modal/drawer).
+> `create` and `edit` are SEPARATE PAGES with their own URL routes (`/create` and `/:id/edit`).
 > `detail` is a page with tabs accessible by clicking a row in `list` (not a standalone nav section).
 
 | Section | Purpose | Typical Components |
 |---------|---------|-------------------|
-| `list` | **Main page**: entity grid + create action (modal/drawer) + click to detail | DataGrid, FilterBar, Pagination, CreateForm |
-| `detail` | **Reached from list** (hidden nav, route `:id`): tabbed view of entity details + edit capability | BackButton, DetailHeader, StatusBadge, TabPanel, DetailCard, SmartForm (edit), SmartTable (relations), Timeline (history) |
+| `list` | **Main page**: entity grid + create button (navigates to `/create` page) + click to detail | DataGrid, FilterBar, Pagination, CreateButton |
+| `detail` | **Reached from list** (hidden nav, route `:id`): tabbed view of entity details + edit button (navigates to `/:id/edit` page) | BackButton, DetailHeader, StatusBadge, TabPanel, DetailCard, SmartTable (relations), Timeline (history) |
 | `dashboard` | Module overview/KPIs (if analytics needed) | Charts, StatCards, RecentActivity |
 | `approve` | Approval workflow queue (if validation workflow) | ApprovalPanel, StatusTimeline |
 | `import` | Bulk data import (if volume > 100) | FileUpload, MappingTable, Preview |
@@ -115,9 +115,9 @@ Level 1: Context (business)
 
 | NOT a sidebar section | What it really is |
 |---------------|-------------------|
-| `create` | Action button in `list` page → opens Form in modal/drawer |
-| `edit` | Action in detail page → switches fields to edit mode |
-| `delete` | Action with confirmation dialog in `list` or detail |
+| `create` | Action button in `list` page → navigates to `/create` page with form |
+| `edit` | Action in list/detail page → navigates to `/:id/edit` page with pre-filled form |
+| `delete` | Action with inline confirmation in `list` or detail |
 | `search` | FilterBar component integrated in the `list` section |
 
 > **Note on `detail`:** The detail page IS a `specification.sections[]` entry (with `navigation: "hidden"`) so it gets a wireframe, resources, and route. But it is NOT shown in the sidebar — it is reached by clicking a row in `list`. Every module with a `list` section MUST have a companion `detail` section.

package/templates/skills/business-analyse/patterns/suggestion-catalog.md

@@ -489,7 +489,7 @@ Auto-added:
 | Produits/Products | Commerce, Inventaire | Catalogue avec variantes, tarification, stock |
 
 **Section pattern for module dedie:**
-- Section `list` (TOUJOURS) : grille + create en modale + clic vers detail
+- Section `list` (TOUJOURS) : grille + bouton create (navigue vers page `/create`) + clic vers detail
 - Page detail avec onglets : Infos + onglets relationnels
 - Sections additionnelles UNIQUEMENT si : dashboard, approve, import, rapport
 

package/templates/skills/business-analyse/questionnaire/07-ui.md

@@ -39,8 +39,8 @@
 | Need | Component | Détail |
 |------|-----------|--------|
 | List with pagination | DataTable | Tri, pagination, sélection, actions inline |
-| Creation form | Form + Modal | Validation FluentValidation, i18n des erreurs |
-| Edit form | Form + Modal | Pré-remplissage, dirty check, optimistic locking |
+| Creation form | Form page (`/create` route) | Validation FluentValidation, i18n des erreurs |
+| Edit form | Form page (`/:id/edit` route) | Pré-remplissage, dirty check, optimistic locking |
 | Filters | FilterBar | Filtres combinables, persistance URL params |
 | Export | ExportButton | CSV/Excel, respecte les filtres actifs |
 | Cards/Grid | CardGrid | Affichage visuel alternatif au tableau |
@@ -58,7 +58,7 @@
 | Question | If answer is vague/insufficient | Probe |
 |----------|-------------------------------|-------|
 | Q7.1 (devices) | "Desktop uniquement" | "Aucun accès mobile ? Même pas en consultation ? Tablette en atelier/terrain ?" |
-| Q7.5 (screens) | "Un écran de liste" | "Avec création/édition inline ou en modal ? Détail en side panel ou page séparée ?" |
+| Q7.5 (screens) | "Un écran de liste" | "Avec pages dédiées pour création et édition ? Détail en page avec onglets ?" |
 | Q7.5 (screens) | Pas de mention dashboard | "L'utilisateur a-t-il besoin d'un tableau de bord avec des KPIs avant de plonger dans les données ?" |
 | Q7.7 (key info) | "Toutes les colonnes" | "Sur mobile/petit écran, quelles 3-4 colonnes sont indispensables ? Le reste = détail secondaire" |
 | Q7.8 (actions) | "CRUD classique" | "Actions métier spécifiques ? (valider, dupliquer, archiver, changer statut, assigner)" |

package/templates/skills/business-analyse/references/cadrage-pre-analysis.md

@@ -84,7 +84,7 @@ For each detected module, anticipate sections (Level 4) and resources (Level 5)
 | integration | list | sync-status-grid, config-form, log-viewer | Infos, Config, Logs |
 
 > **RULE:** Sections = functional zones only (`list`, `dashboard`, `approve`, `import`, `rapport`, `planning`).
-> `create`/`edit` = actions (modal/drawer) within the `list` page. `detail` = tabbed page reached by clicking a row in `list`.
+> `create`/`edit` = separate pages with own URL routes (`/create` and `/:id/edit`). `detail` = tabbed page reached by clicking a row in `list`.
 
 **Always check:** Does the user's description imply additional functional sections? (e.g., "reports" → `dashboard`, "calendar view" → `planning`, "approval workflow" → `approve`)
 

package/templates/skills/business-analyse/references/entity-architecture-decision.md

@@ -121,7 +121,7 @@ L'entite {E} est-elle CORE pour cette application ?
 Module
 ├── Section: list
 │   └── Page principale avec grille/table
-│   └── Action "Creer" (ouvre formulaire en modale/drawer DANS cette page)
+│   └── Action "Creer" (navigue vers la page /create avec formulaire)
 │   └── Clic sur une ligne → navigation vers la page detail
 │   └── Resources : {entity}-grid, {entity}-filters, {entity}-form
 │
@@ -152,8 +152,8 @@ Module
 
 | PAS une section | C'est quoi en realite |
 |-----------------|----------------------|
-| `create` | Action (bouton) dans la page `list`, ouvre un formulaire en modale/drawer |
-| `edit` | Action dans la page detail, bascule les champs en mode edition |
+| `create` | Action (bouton) dans la page `list`, navigue vers la page `/create` avec formulaire |
+| `edit` | Action dans la page list/detail, navigue vers la page `/:id/edit` avec formulaire pre-rempli |
 | `detail` | Page de detail accessible par navigation depuis `list` (pas une section menu) |
 | `delete` | Action avec confirmation dans la page `list` ou `detail` |
 | `search` | Composant de filtrage integre dans la section `list` |

package/templates/skills/business-analyse/references/handoff-file-templates.md

@@ -70,14 +70,22 @@ From `specification.uiWireframes[]`, `specification.dashboards[]` and `analysis.
 
 ```json
 "frontend": [
-  { "path": "src/pages/{ModuleName}/{PageName}Page.tsx", "type": "Page", "linkedUCs": [], "linkedWireframes": ["{module}-list"], "module": "{moduleCode}", "wireframeAcceptanceCriteria": "Layout MUST match wireframe..." },
-  { "path": "src/pages/{ModuleName}/{PageName}DetailPage.tsx", "type": "Page", "linkedUCs": [], "linkedWireframes": ["{module}-detail"], "module": "{moduleCode}" },
-  { "path": "src/pages/{ModuleName}/{DashboardName}DashboardPage.tsx", "type": "DashboardPage", "linkedUCs": [], "linkedWireframes": ["{module}-dashboard"], "module": "{moduleCode}", "dashboardRef": "{module}-dashboard", "instructions": "Use Recharts library..." },
-  { "path": "src/components/{ModuleName}/{ComponentName}.tsx", "type": "Component", "linkedUCs": [], "linkedWireframes": [], "module": "{moduleCode}" },
-  { "path": "src/hooks/use{ModuleName}{Hook}.ts", "type": "Hook", "linkedUCs": [], "module": "{moduleCode}" }
+  { "path": "src/pages/{ContextPascal}/{ApplicationName}/{ModuleName}/{PageName}Page.tsx", "type": "Page", "linkedUCs": [], "linkedWireframes": ["{module}-list"], "module": "{moduleCode}", "wireframeAcceptanceCriteria": "Layout MUST match wireframe...", "skill": "/ui-components" },
+  { "path": "src/pages/{ContextPascal}/{ApplicationName}/{ModuleName}/{PageName}DetailPage.tsx", "type": "Page", "linkedUCs": [], "linkedWireframes": ["{module}-detail"], "module": "{moduleCode}", "skill": "/ui-components" },
+  { "path": "src/pages/{ContextPascal}/{ApplicationName}/{ModuleName}/{DashboardName}DashboardPage.tsx", "type": "DashboardPage", "linkedUCs": [], "linkedWireframes": ["{module}-dashboard"], "module": "{moduleCode}", "dashboardRef": "{module}-dashboard", "instructions": "Use Recharts library...", "skill": "/ui-components" },
+  { "path": "src/components/{ModuleName}/{ComponentName}.tsx", "type": "Component", "linkedUCs": [], "linkedWireframes": [], "module": "{moduleCode}", "skill": "/ui-components" },
+  { "path": "src/hooks/use{ModuleName}{Hook}.ts", "type": "Hook", "linkedUCs": [], "module": "{moduleCode}" },
+  { "path": "src/i18n/locales/fr/{moduleLower}.json", "type": "I18n", "language": "fr", "module": "{moduleCode}" },
+  { "path": "src/i18n/locales/en/{moduleLower}.json", "type": "I18n", "language": "en", "module": "{moduleCode}" },
+  { "path": "src/i18n/locales/it/{moduleLower}.json", "type": "I18n", "language": "it", "module": "{moduleCode}" },
+  { "path": "src/i18n/locales/de/{moduleLower}.json", "type": "I18n", "language": "de", "module": "{moduleCode}" }
 ]
 ```
 
+**Page generation:** ALL pages and components MUST be generated via `/ui-components` skill (entity lists, grids, tables, dashboards, charts). The `"skill"` field indicates which skill to invoke.
+
+**I18n generation:** 4 JSON files per module (fr, en, it, de) with identical key structures. `{moduleLower}` = lowercase module code. See `smartstack-frontend.md` for JSON template (keys: actions, labels, columns, form, errors, validation, messages, empty).
+
 **Dashboard acceptance criteria:** Chart library (Recharts), chart types matching spec, KPI cards, filters, CSS variables, responsive layout, wireframe-matching positions.
 
 ## 4.6 SeedData Files