-

kms-frontend/README.md

@@ -0,0 +1,213 @@
+# 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