# /application:create - Génération Full-Stack SmartStack

> **Synergie Skill/Commande:**
> - **Skill** (`.claude/skills/application/`) → Invocation automatique par Claude
> - **Commande** (`/application:create`) → Invocation manuelle par l'utilisateur
> - Templates partagés dans `.claude/skills/application/templates-*.md`

---

## ARGUMENTS

```
/application:create <level> <parent> <code> [options]
```

| Variable | Description | Valeurs |
|----------|-------------|---------|
| `level` | Niveau de navigation | `context`, `application`, `module`, `section` |
| `parent` | Code du parent | Ex: `platform`, `platform.administration` |
| `code` | Code de l'entité | Ex: `products`, `crm`, `erp` |

**Exemples:**
```bash
# Créer un nouveau context
/application:create context _ erp

# Créer une application dans un context existant
/application:create application platform sales

# Créer un module dans une application existante
/application:create module platform.administration products

# Créer une section dans un module existant
/application:create section platform.administration.users settings
```

---

## WORKFLOW

### PHASE 1: PARSING & VALIDATION

```
1. EXTRAIRE level, parent, code des arguments
2. VALIDER que le parent existe (sauf pour context)
3. DÉTECTER le context racine
4. GÉNÉRER les chemins de route et permission
```

### PHASE 2: COLLECTE DES TRADUCTIONS

```typescript
AskUserQuestion({
  questions: [
    {
      header: "Labels FR",
      question: "Libellés en français ?",
      options: [
        { label: "$CODE_PASCAL", description: "Label par défaut" }
      ]
    },
    {
      header: "Icône",
      question: "Quelle icône Lucide ?",
      options: [
        { label: "Package", description: "Icône produit" },
        { label: "Folder", description: "Icône générique" },
        { label: "Settings", description: "Icône configuration" }
      ]
    }
  ]
})
```

### PHASE 3: GÉNÉRATION DB SEED

| Fichier | Action |
|---------|--------|
| `Navigation{Level}Configuration.cs` | Ajouter entité |
| `NavigationTranslationConfiguration.cs` | Ajouter 4 traductions |
| `PermissionConfiguration.cs` | Ajouter permissions CRUD |
| `RolePermissionConfiguration.cs` | Assigner aux rôles |

**Templates:** → `.claude/skills/application/templates-seed.md`

### PHASE 4: GÉNÉRATION BACKEND

| Fichier | Action |
|---------|--------|
| `Permissions.cs` | Ajouter classe permissions |
| `I{Entity}Service.cs` | Créer interface |
| `{Entity}Service.cs` | Créer implémentation |
| `{Entity}Dto.cs` | Créer DTOs |
| `{Entity}.cs` | Créer entité Domain |
| `{Entity}Configuration.cs` | Créer config EF |
| `IApplicationDbContext.cs` | Ajouter DbSet |
| `DependencyInjection.cs` | Enregistrer service |

**Templates:** → `.claude/skills/application/templates-backend.md`

**Chaîner:** → `/controller:create $AREA $MODULE $ENTITY`

### PHASE 5: GÉNÉRATION FRONTEND

| Fichier | Action |
|---------|--------|
| `{Module}Page.tsx` | Créer page principale |
| `{Module}ListView.tsx` | Créer composant liste |
| `use{Module}Preferences.ts` | Créer hook préférences |
| `{module}Api.ts` | Créer service API |
| `App.tsx` | Ajouter routes |

**Templates:** → `.claude/skills/application/templates-frontend.md`

#### 5.1 RÈGLE SECTIONS: Toute section DOIT avoir une page

Pour les **sections** (`level=section`), vérifier si une page dédiée est demandée :

```typescript
// Logique de décision
if (level === 'section') {
  const hasCustomPage = userRequestedSpecificPage();

  if (!hasCustomPage) {
    // Créer page placeholder avec UnderDevelopment
    createPlaceholderPage(code, parent);
  }
}
```

**Création automatique de page placeholder:**

1. **Vérifier** que `UnderDevelopment.tsx` existe dans `components/ui/`
2. **Créer** `{Section}Page.tsx` utilisant `UnderDevelopment`
3. **Ajouter** route dans `App.tsx`
4. **Ajouter** traductions i18n pour la section

**Template page placeholder:**

```tsx
// web/smartstack-web/src/pages/{area}/{Section}Page.tsx
import { {Icon} } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { UnderDevelopment } from '@/components/ui/UnderDevelopment';

export function {Section}Page() {
  const { t } = useTranslation('{namespace}');

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-[var(--text-primary)]">
          {t('{section}.title')}
        </h1>
        <p className="text-sm text-[var(--text-tertiary)] mt-1">
          {t('{section}.subtitle')}
        </p>
      </div>
      <div className="card">
        <UnderDevelopment
          title={t('{section}.underDevelopmentTitle')}
          description={t('{section}.underDevelopmentDescription')}
          icon={<{Icon} className="w-10 h-10 text-amber-600 dark:text-amber-400" />}
          showBackButton={true}
          backUrl="{parentRoute}"
        />
      </div>
    </div>
  );
}
```

**Template traductions placeholder (à ajouter dans le namespace existant):**

```json
"{section}": {
  "title": "{Label}",
  "subtitle": "{Description}",
  "underDevelopmentTitle": "{Label}",
  "underDevelopmentDescription": "Cette fonctionnalité sera bientôt disponible."
}
```

### PHASE 6: GÉNÉRATION I18N

| Fichier | Action |
|---------|--------|
| `fr/{module}.json` | Créer traductions FR |
| `en/{module}.json` | Créer traductions EN |
| `it/{module}.json` | Créer traductions IT |
| `de/{module}.json` | Créer traductions DE |
| `navigation.json` (×4) | Mettre à jour |
| `i18n/index.ts` | Enregistrer namespace |

**Templates:** → `.claude/skills/application/templates-i18n.md`

### PHASE 7: MIGRATION

```bash
# Chaîner automatiquement
/efcore:migration Add{Level}{Code}
```

### PHASE 8: VALIDATION

```bash
# Backend
dotnet build
dotnet test

# Frontend
cd web/smartstack-web
npm run build
npm run lint
npm run test
```

### PHASE 9: RÉSUMÉ

```markdown
## ✅ Création terminée

### Fichiers créés
- 📁 Backend: X fichiers
- 📁 Frontend: X fichiers
- 🌐 i18n: 4 langues

### Navigation
- Route: /$ROUTE
- Permission: $PERMISSION_PATH.*

### Prochaines étapes
1. Vérifier les seeds générés
2. Tester avec Swagger
3. Valider l'UI

### Commandes utiles
- `dotnet ef database update` - Appliquer migration
- `npm run dev` - Lancer frontend
```

---

## RÈGLES ABSOLUES

1. **TOUJOURS** 4 langues (FR, EN, IT, DE)
2. **TOUJOURS** respecter l'architecture en couches
3. **TOUJOURS** implémenter les préférences utilisateur (template complet)
4. **TOUJOURS** chaîner avec `/controller:create` et `/efcore:migration`
5. **TOUJOURS** utiliser GUIDs déterministes (`GenerateGuid(index)`)
6. **TOUJOURS** créer une page pour chaque section (placeholder si non spécifiée)
7. **JAMAIS** de violation d'architecture (WEB → Infrastructure)
8. **JAMAIS** de traduction manquante
9. **JAMAIS** de section sans page frontend correspondante

---

## VALIDATION ARCHITECTURE

Le skill **DOIT** vérifier après génération :

```typescript
// Vérifier qu'aucun fichier frontend n'importe Infrastructure
const frontendFiles = glob('web/**/*.{ts,tsx}');
for (const file of frontendFiles) {
  const content = read(file);
  if (content.includes('SmartStack.Infrastructure')) {
    ERROR('Architecture violation: ' + file);
  }
}
```

---

## SOURCES DE DONNÉES

| Donnée | Source |
|--------|--------|
| Navigation entities | `src/SmartStack.Infrastructure/Persistence/Configurations/Navigation/` |
| Translations | `NavigationTranslationConfiguration.cs` |
| Permissions | `src/SmartStack.Application/Common/Authorization/Permissions.cs` |
| i18n locales | `web/smartstack-web/src/i18n/locales/` |
| Routes | `web/smartstack-web/src/App.tsx` |
| UnderDevelopment | `web/smartstack-web/src/components/ui/UnderDevelopment.tsx` |

---

## MAPPING NIVEAU → GÉNÉRATION

| Niveau | DB Seed | Backend | Frontend | i18n |
|--------|---------|---------|----------|------|
| Context | ✅ | ❌ | ❌ | ✅ (nav) |
| Application | ✅ | ❌ | ✅ (layout) | ✅ (nav) |
| Module | ✅ | ✅ (complet) | ✅ (complet) | ✅ (complet) |
| Section | ✅ | ✅ (optionnel) | ✅ (page ou placeholder) | ✅ (nav + section) |

> **Note Section:** Toute section DOIT avoir une page. Si aucune page spécifique n'est demandée, créer automatiquement une page placeholder utilisant `UnderDevelopment`.

---

## EXEMPLES COMPLETS

### Exemple 1: Nouveau module Products

```bash
/application:create module business.sales products
```

Génère:
- Navigation seed + 4 traductions
- Permissions CRUD
- Domain entity `Product`
- Service `IProductService` + `ProductService`
- DTOs
- Controller (via /controller:create)
- Page React + ListView + Hook préférences
- 4 fichiers i18n
- Routes
- Migration

### Exemple 2: Nouvelle application CRM

```bash
/application:create application business crm
```

Génère:
- Navigation seed application + 4 traductions
- Layout/Dashboard pour CRM
- Mise à jour navigation.json (4 langues)

### Exemple 3: Nouveau context ERP

```bash
/application:create context _ erp
```

Génère:
- Navigation seed context + 4 traductions
- Mise à jour navigation.json (4 langues)
- Base pour futures applications

### Exemple 4: Nouvelle section (avec page placeholder automatique)

```bash
/application:create section platform.administration.workflows analytics
```

Génère:
- Navigation seed section + 4 traductions
- Permissions (si applicable)
- **Page placeholder** `WorkflowAnalyticsPage.tsx` utilisant `UnderDevelopment`
- Traductions i18n pour la section (titre, description, underDevelopment)
- Route dans `App.tsx`
- Export dans `index.ts` du dossier pages

**Fichiers créés:**
```
web/smartstack-web/src/pages/admin/communications/WorkflowAnalyticsPage.tsx
web/smartstack-web/src/i18n/locales/{fr,en,de,it}/communications.json (màj)
web/smartstack-web/src/App.tsx (màj)
```
