# KMS Frontend - Key Management System

A modern React frontend for the Key Management System (KMS) API, built with TypeScript and Ant Design.

## Features

- **Dashboard**: System overview with health status and statistics
- **Application Management**: Create, view, edit, and delete applications
- **Token Management**: Create and manage static tokens with permissions
- **User Management**: Handle user authentication and token operations
- **Audit Logging**: Monitor system activities and security events
- **Responsive Design**: Mobile-friendly interface with Ant Design components

## Technology Stack

- **React 18** with TypeScript
- **Ant Design** for UI components
- **Axios** for API communication
- **React Router** for navigation
- **Day.js** for date handling

## Getting Started

### Prerequisites

- Node.js (v14 or higher)
- npm or yarn
- KMS API server running on `http://localhost:8080`

### Installation

1. Clone the repository:
```bash
git clone <repository-url>
cd kms-frontend
```

2. Install dependencies:
```bash
npm install
```

3. Configure environment variables:
```bash
cp .env.example .env
```

Edit `.env` to match your API configuration:
```
REACT_APP_API_URL=http://localhost:8080
REACT_APP_APP_NAME=KMS Frontend
REACT_APP_VERSION=1.0.0
```

4. Start the development server:
```bash
npm start
```

The application will be available at `http://localhost:3000`.

## Project Structure

```
src/
├── components/          # React components
│   ├── Applications.tsx # Application management
│   ├── Audit.tsx       # Audit logging
│   ├── Dashboard.tsx   # Main dashboard
│   ├── Login.tsx       # Authentication
│   ├── Tokens.tsx      # Token management
│   └── Users.tsx       # User management
├── contexts/           # React contexts
│   └── AuthContext.tsx # Authentication context
├── services/           # API services
│   └── apiService.ts   # KMS API client
├── App.tsx            # Main application component
├── App.css            # Custom styles
└── index.tsx          # Application entry point
```

## API Integration

The frontend integrates with the KMS API and supports:

- **Health Checks**: Monitor API availability
- **Application CRUD**: Full application lifecycle management
- **Token Operations**: Create, verify, and manage tokens
- **User Authentication**: Login and token renewal flows
- **Audit Trails**: View system activity logs

## Authentication

The application uses a demo authentication system for development:

1. Enter any valid email address on the login screen
2. The system will simulate authentication and grant permissions
3. In production, integrate with your identity provider (OAuth2, SAML, etc.)

## Available Scripts

- `npm start` - Start development server
- `npm run build` - Build for production
- `npm test` - Run tests
- `npm run eject` - Eject from Create React App

## Configuration

### Environment Variables

- `REACT_APP_API_URL` - KMS API base URL
- `REACT_APP_APP_NAME` - Application name
- `REACT_APP_VERSION` - Application version

### API Configuration

The API service automatically includes the `X-User-Email` header for authentication. Configure your KMS API to accept this header for demo purposes.

## Features Overview

### Dashboard
- System health monitoring
- Application and token statistics
- Quick action shortcuts

### Applications
- Create new applications with configuration
- View application details and security settings
- Edit application properties
- Delete applications and associated tokens

### Tokens
- Create static tokens with specific permissions
- View token details and metadata
- Verify token validity and permissions
- Delete tokens when no longer needed

### Users
- Current user information display
- Initiate user authentication flows
- Renew user tokens
- Authentication method documentation

### Audit Log
- Comprehensive activity tracking
- Filter by date, user, action, and status
- Detailed event information
- Timeline view of recent activities

## Security Considerations

- All API communications should use HTTPS in production
- Tokens are displayed only once during creation
- Sensitive information is masked in the UI
- Audit logging tracks all user actions

## Development

### Adding New Features

1. Create new components in `src/components/`
2. Add API methods to `src/services/apiService.ts`
3. Update routing in `src/App.tsx`
4. Add navigation items to the sidebar menu

### Styling

The application uses Ant Design's theming system with custom CSS overrides in `App.css`. Follow Ant Design's design principles for consistency.

### Testing

Run the test suite with:
```bash
npm test
```

## Production Deployment

1. Build the application:
```bash
npm run build
```

2. Deploy the `build/` directory to your web server
3. Configure your web server to serve the React app
4. Ensure the KMS API is accessible from your production domain
5. Update environment variables for production

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

## License

This project is licensed under the MIT License.

## Support

For issues and questions:
- Check the KMS API documentation
- Review the Ant Design documentation
- Create an issue in the repository