prvng_platform/crates/control-center/web/README.md

# Control Center Web UI

React/TypeScript frontend for the Control Center vault secrets management.

## Features

- **Secrets List**: Browse and filter vault secrets
- **Secret View**: View secret details with show/hide value toggle
- **Secret Create/Edit**: Create new secrets or update existing ones
- **Secret History**: View version history and restore previous versions
- **Copy to Clipboard**: Easy copy functionality for secret values
- **Responsive Design**: Works on desktop and mobile devices

## Components

### Core Components

- **SecretsManager**: Main orchestrator component
- **SecretsList**: List view with pagination and filtering
- **SecretView**: Detailed secret view with metadata
- **SecretCreate**: Create/edit form for secrets
- **SecretHistory**: Version history with restore functionality

### API Client

- **secretsApi**: HTTP client for vault secrets endpoints
- Type-safe request/response handling
- Error handling with custom error types

## Prerequisites

- Node.js 18+
- npm or yarn
- Control Center backend running on <http://localhost:8080>

## Installation

```bash
cd provisioning/platform/control-center/web
npm install
```plaintext

## Development

```bash
# Start development server
npm start

# Build for production
npm build

# Run tests
npm test

# Lint code
npm run lint

# Format code
npm run format
```plaintext

## Environment Variables

Create a `.env` file in the web directory:

```bash
REACT_APP_API_URL=http://localhost:8080
```plaintext

## Usage

### Import and Use

```typescript
import { SecretsManager } from './components/secrets';

function App() {
  return (
    <div className="app">
      <SecretsManager />
    </div>
  );
}
```plaintext

### API Client

```typescript
import { secretsApi } from './api/secrets';

// Create a secret
const secret = await secretsApi.createSecret({
  path: 'database/prod/password',
  value: 'my-secret-value',
  context: 'production',
  metadata: { description: 'Production DB password' },
});

// Get a secret
const secretData = await secretsApi.getSecret('database/prod/password');

// List secrets
const { secrets, total } = await secretsApi.listSecrets({
  prefix: 'database/',
  limit: 50,
  offset: 0,
});

// Update secret
await secretsApi.updateSecret('database/prod/password', {
  value: 'new-secret-value',
});

// Delete secret
await secretsApi.deleteSecret('database/prod/password');

// Get history
const history = await secretsApi.getSecretHistory('database/prod/password');

// Restore version
await secretsApi.restoreSecretVersion('database/prod/password', 2);
```plaintext

## Architecture

```plaintext
SecretsManager (Orchestrator)
  ├── SecretsList (Browse)
  ├── SecretView (Detail)
  ├── SecretCreate (Create/Edit)
  └── SecretHistory (Versions)
       ↓
  secretsApi (HTTP Client)
       ↓
  Control Center Backend API
       ↓
  KMS Service (Encryption)
       ↓
  RustyVault (Storage)
```plaintext

## Security

- **MFA Required**: All secret operations require MFA verification
- **RBAC**: Role-based access control enforced by backend
- **Encrypted Storage**: Values encrypted via KMS Service before storage
- **Audit Trail**: All operations logged for compliance
- **No Plaintext**: Values never stored unencrypted
- **Context Encryption**: Optional AAD for additional security

## TypeScript Types

All components are fully typed. See `src/types/secrets.ts` for type definitions:

- `Secret`: Secret metadata
- `SecretWithValue`: Secret with decrypted value
- `SecretVersion`: Version information
- `SecretHistory`: Complete version history
- `CreateSecretRequest`: Create request payload
- `UpdateSecretRequest`: Update request payload
- `ListSecretsQuery`: List query parameters
- `ApiError`: Error response type

## Styling

Custom CSS in `src/components/secrets/secrets.css`. Modify to match your design system.

## Browser Support

- Chrome/Edge 90+
- Firefox 88+
- Safari 14+

## License

See project root LICENSE file.

## Contributing

See project root CONTRIBUTING.md for contribution guidelines.