init

2025-09-12 23:04:52 +03:00
commit 2277b11563
127 changed files with 23640 additions and 0 deletions
@@ -0,0 +1,138 @@
+# Personal Internet Cell - Web UI
+
+A modern React-based web interface for managing your Personal Internet Cell.
+
+## Features
+
+- **Dashboard**: Overview of cell status and services
+- **Peer Management**: Add, remove, and configure WireGuard peers
+- **Network Services**: DNS, DHCP, and NTP management
+- **WireGuard**: VPN configuration and status
+- **Email Services**: Postfix and Dovecot management
+- **Calendar Services**: Radicale CalDAV/CardDAV management
+- **File Storage**: WebDAV file storage management
+- **Routing**: Advanced VPN gateway and routing configuration
+- **Logs**: System logs and monitoring
+- **Settings**: Cell configuration and security settings
+
+## Tech Stack
+
+- **React 19**: Modern React with hooks
+- **Vite**: Fast build tool and dev server
+- **Tailwind CSS**: Utility-first CSS framework
+- **Lucide React**: Beautiful icons
+- **React Router**: Client-side routing
+- **Axios**: HTTP client for API communication
+
+## Development
+
+### Prerequisites
+
+- Node.js 18+ and npm
+- Personal Internet Cell backend running on port 3000
+
+### Setup
+
+1. Install dependencies:
+   ```bash
+   npm install
+   ```
+
+2. Start the development server:
+   ```bash
+   npm run dev
+   ```
+
+3. Open your browser to `http://localhost:5173`
+
+### Development Features
+
+- **Hot Reload**: Changes reflect immediately
+- **API Proxy**: Requests to `/api/*` are proxied to `http://localhost:3000`
+- **TypeScript Support**: Full TypeScript support available
+- **ESLint**: Code linting and formatting
+
+## Building for Production
+
+### Build
+
+```bash
+npm run build
+```
+
+This creates a `dist/` directory with optimized production files.
+
+### Preview
+
+```bash
+npm run preview
+```
+
+This serves the built files locally for testing.
+
+## API Integration
+
+The Web UI communicates with the Personal Internet Cell backend API:
+
+- **Base URL**: `http://localhost:3000` (development)
+- **Health Check**: `/health`
+- **API Endpoints**: `/api/*`
+
+### Environment Variables
+
+Create a `.env` file to customize the API URL:
+
+```env
+VITE_API_URL=http://localhost:3000
+```
+
+## Project Structure
+
+```
+src/
+├── components/          # Reusable UI components
+│   └── Sidebar.jsx     # Navigation sidebar
+├── pages/              # Page components
+│   ├── Dashboard.jsx   # Main dashboard
+│   ├── Peers.jsx       # Peer management
+│   ├── NetworkServices.jsx
+│   ├── WireGuard.jsx   # VPN configuration
+│   ├── Email.jsx       # Email services
+│   ├── Calendar.jsx    # Calendar services
+│   ├── Files.jsx       # File storage
+│   ├── Routing.jsx     # Routing configuration
+│   ├── Logs.jsx        # System logs
+│   └── Settings.jsx    # Cell settings
+├── services/           # API services
+│   └── api.js         # API client and endpoints
+├── App.jsx            # Main app component
+├── main.jsx           # App entry point
+└── index.css          # Global styles
+```
+
+## Styling
+
+The Web UI uses Tailwind CSS with custom components:
+
+- **Cards**: `.card` for content containers
+- **Buttons**: `.btn`, `.btn-primary`, `.btn-secondary`, etc.
+- **Inputs**: `.input` for form fields
+- **Status Indicators**: `.status-indicator`, `.status-online`, etc.
+
+## Browser Support
+
+- Chrome 90+
+- Firefox 88+
+- Safari 14+
+- Edge 90+
+
+## Contributing
+
+1. Follow the existing code style
+2. Use TypeScript for new components
+3. Add tests for new features
+4. Update documentation as needed
+
+## License
+
+Part of the Personal Internet Cell project.