# Customer Connect Documentation

This directory contains detailed technical documentation for the Customer Connect application.

## Quick Start

- **New to the project?** Start with [User Flow & Routing](workflows/user-flow.md)
- **Building a feature?** Check [Data Model](data-model.md) and [Components](components/)
- **Styling a component?** See [Styling Guide](styling-guide.md)

## Documentation Structure

### Components (`components/`)

Detailed component APIs, usage examples, and implementation notes:

- **[setup-shell.md](components/setup-shell.md)** — Shell components, header, footer
- **[connector-modal.md](components/connector-modal.md)** — Connector creation and editing modal
- **[access-policies.md](components/connections.md)** — Access policy system and modal with live preview
- **[network-map.md](components/network-map.md)** — Reusable Leaflet map component for infrastructure visualization

### Workflows (`workflows/`)

User flows, routing, and navigation patterns:

- **[user-flow.md](workflows/user-flow.md)** — Complete user journey, route structure, shell appearance

### Core Documentation

- **[data-model.md](data-model.md)** — Data structures, interfaces, SetupDataService API
- **[styling-guide.md](styling-guide.md)** — CSS variables, design tokens, styling patterns

## File Organization

```
docs/
├── README.md                    # This file
├── data-model.md                # Data structures and state management
├── styling-guide.md             # Styling system and design tokens
├── components/                  # Component-specific documentation
│   ├── setup-shell.md
│   ├── connector-modal.md
│   ├── access-policies.md
│   ├── network-map.md
│   └── provider-introduction.md
└── workflows/                   # User flows and routing
    └── user-flow.md
```

## How to Use This Documentation

### When Building New Features

1. Review [user-flow.md](workflows/user-flow.md) to understand where your feature fits
2. Check [data-model.md](data-model.md) for data structures and state management
3. Reference [components/setup-shell.md](components/setup-shell.md) for shell and layout patterns
4. Follow [styling-guide.md](styling-guide.md) for consistent styling

### When Debugging

1. Check [data-model.md](data-model.md) for state management methods
2. Review component-specific docs in [components/](components/)
3. Verify routing in [workflows/user-flow.md](workflows/user-flow.md)

### When Styling

1. Start with [styling-guide.md](styling-guide.md) for CSS variables and design tokens
2. Follow the three-layer approach: Tailwind → Component CSS → CSS Variables
3. Use consistent color-coding for connector types (see styling-guide.md)

## Key Concepts

### State Management
All application state lives in `SetupDataService` (`src/lib/shared/setup-data.service.ts`). See [data-model.md](data-model.md) for full API.

### Connector Types
Four types with consistent color-coding throughout the app:
- **Host** (blue) — Local forwarding
- **Gateway** (green) — Configurable forwarding
- **Clientless** (purple) — Application domain/URL
- **SDK Embedded** (orange) — No app configuration

### Connections
Flexible matching system for automated connectivity rules. See [components/connections.md](components/connections.md).

## Contributing to Documentation

When adding new features:

1. Update relevant docs in this directory
2. Keep CLAUDE.md lean — only essential patterns and conventions
3. Add detailed component documentation to `components/`
4. Update this README if adding new doc files

## External Resources

- **Angular 20**: https://angular.dev
- **Tailwind CSS**: https://tailwindcss.com
- **Font Awesome**: https://fontawesome.com