# Application-Level Business Analyse Viewer

> **Usage:** React component for application-level BA documentation within SmartStack web app
> **Route:** `/docs/{app}` (application overview)
> **Data source:** `docs/{app}/business-analyse/v{X.Y}/index.json` (scope: "application")
> **Linked to:** Module viewers at `/docs/{app}/{module}`

---

## Component: ApplicationAnalyseViewer

### Props

```typescript
interface ApplicationAnalyseViewerProps {
  app: string;           // Application code
  version?: string;      // Version to display (default: latest)
}
```

### Route Registration

```typescript
// In app router configuration
{
  path: '/docs/:app',
  component: ApplicationAnalyseViewer,
  exact: true
}
```

### Layout

```
┌─────────────────────────────────────────────────────────┐
│  📋 Business Analyse: {app_name}              v{version} │
│  Status: {status_badge}                                  │
├─────────────────────────────────────────────────────────┤
│                                                          │
│  ┌─ Tabs ──────────────────────────────────────────┐    │
│  │ [Cadrage] [Modules] [Dépendances] [Permissions] │    │
│  └─────────────────────────────────────────────────┘    │
│                                                          │
│  {Tab Content}                                           │
│                                                          │
├─────────────────────────────────────────────────────────┤
│  Module Progress                                         │
│  ┌──────────┬──────────┬──────────┬──────────┐         │
│  │Customers │ Products │ Orders   │ Invoices │         │
│  │ ✓ done   │ ✓ done   │ ● active │ ○ pending│         │
│  └──────────┴──────────┴──────────┴──────────┘         │
└─────────────────────────────────────────────────────────┘
```

### Tab: Cadrage (Framing)

Displays the application-level framing:

| Section | Data Source | Display |
|---------|------------|---------|
| Problem | cadrage.problem | Text block |
| AS-IS | cadrage.asIs | Text block |
| TO-BE | cadrage.toBe | Text block |
| Stakeholders | cadrage.stakeholders | Table: role, description, frequency |
| Global Scope | cadrage.globalScope | Priority badges: Essentiel/Important/Optionnel/Exclu |
| Risks | cadrage.risks | Severity-colored cards |

### Tab: Modules

Grid/cards layout showing all modules:

```
┌─────────────────────┐  ┌─────────────────────┐
│  📦 Customers       │  │  📦 Products        │
│  Status: ✓ Specified │  │  Status: ✓ Specified │
│  Entities: 3        │  │  Entities: 2         │
│  BRs: 5             │  │  BRs: 3              │
│  Complexity: medium  │  │  Complexity: simple   │
│  [View Details →]   │  │  [View Details →]    │
└─────────────────────┘  └─────────────────────┘
┌─────────────────────┐  ┌─────────────────────┐
│  📦 Orders          │  │  📦 Invoices        │
│  Status: ● Active   │  │  Status: ○ Pending   │
│  Entities: 2        │  │  Entities: ~3        │
│  BRs: ~8            │  │  BRs: ~5             │
│  Complexity: complex │  │  Complexity: medium   │
│  [View Details →]   │  │  [View Details →]    │
└─────────────────────┘  └─────────────────────┘
```

Each card links to the module viewer: `/docs/{app}/{module}`

Status colors:
- ✓ Specified (green)
- ● In Progress (blue/animated)
- ○ Pending (gray)
- ✗ Error (red)

### Tab: Dépendances (Dependency Graph)

Interactive SVG/Canvas dependency graph:

```
┌────────────┐     ┌────────────┐
│  Customers │────▶│  Orders    │────▶┌────────────┐
└────────────┘     └────────────┘     │  Invoices  │
┌────────────┐         │              └────────────┘
│  Products  │─────────┘
└────────────┘
```

Implementation options:
1. **Simple:** ASCII-rendered with `<pre>` (from dependencyGraph)
2. **Interactive:** SVG with zoom/pan using a lightweight library (e.g., dagre-d3 or vis.js)

Features:
- Nodes = modules, colored by status
- Edges = dependencies, labeled with type (FK, Event, Shared)
- Click on module → navigate to module viewer
- Layers/groups visualized (foundation → dependent)

### Tab: Permissions

Cross-module permission overview:

```
┌──────────────────────────────────────────────────────────┐
│  Application Roles                                        │
├──────────┬───────────┬──────────────┬───────────────────┤
│ Role     │ Level     │ Permissions  │ Modules           │
├──────────┼───────────┼──────────────┼───────────────────┤
│ Admin    │ admin     │ *.* (all)    │ All               │
│ Manager  │ manager   │ read,create, │ All               │
│          │           │ update,assign│                   │
│ Contrib. │ contrib.  │ read,create, │ All               │
│          │           │ update       │                   │
│ Viewer   │ viewer    │ read         │ All               │
└──────────┴───────────┴──────────────┴───────────────────┘

Per-Module Permission Paths:
┌──────────────┬──────────────────────────────────────────┐
│ Module       │ Permission Paths                         │
├──────────────┼──────────────────────────────────────────┤
│ Customers    │ sales.customers.{read|create|…}           │
│ Products     │ sales.products.{read|create|…}            │
│ Orders       │ sales.orders.{read|create|…}              │
│ Invoices     │ sales.invoices.{read|create|…}            │
└──────────────┴──────────────────────────────────────────┘
```

### Module Progress Bar

Bottom section showing linear progress through modules:

```typescript
interface ModuleProgressProps {
  modules: Array<{
    code: string;
    status: 'pending' | 'in-progress' | 'specified' | 'validated';
    isCurrent: boolean;
  }>;
}
```

Rendered as a horizontal stepper/progress bar with clickable module names.

---

## Sub-Components

### ApplicationStatusBadge

```typescript
const statusColors = {
  'draft': 'gray',
  'framed': 'blue',
  'decomposed': 'indigo',
  'specified': 'purple',
  'consolidated': 'orange',
  'handed-off': 'green'
};
```

### ModuleCard

Compact card for the Modules tab grid.

### DependencyGraph

SVG-based or ASCII-rendered dependency visualization.

### PermissionOverview

Cross-module permission matrix display.

---

## Data Loading

```typescript
import type { ApplicationFeatureJson } from '../types/docs';

export async function loadApplicationFeature(
  app: string,
  version: string
): Promise<ApplicationFeatureJson> {
  const response = await fetch(
    `/docs/${app}/business-analyse/v${version}/index.json`
  );
  return response.json();
}

export async function listApplicationVersions(
  app: string
): Promise<string[]> {
  const response = await fetch(
    `/api/docs/${app}/business-analyse/versions`
  );
  return response.json();
}
```

---

## Navigation Between Levels

| From | To | Action |
|------|----|--------|
| Application overview | Module viewer | Click module card or "View Details" link |
| Module viewer | Application overview | Breadcrumb: `{App} > {Module}` → click `{App}` |
| Module viewer | Next module | "Module suivant →" button (from module progress) |
| Module viewer | Previous module | "← Module précédent" button |

---

## Consolidation View (when consolidated)

After consolidation (status = "consolidated" or "handed-off"), additional sections appear:

- **Cross-Module Interactions:** Table showing FK refs, events, shared entities
- **E2E Flows:** Visual flow diagrams from consolidation.e2eFlows
- **Global Risk Assessment:** Risk dashboard with color-coded indicators
