telfax/web-ui/README.md

Telfax Web UI

Modern Web UI for Telfax Enterprise Fax Server built with Tauri + Vue 3 + TypeScript.

Features

• Dashboard: Real-time status overview, send faxes directly
• Fax History: View and manage fax jobs
• Modem Status: Monitor modem health and status
• Settings: Configure API connection and authentication

Tech Stack

• Frontend: Vue 3 + TypeScript + Vite
• Styling: Tailwind CSS
• State Management: Pinia
• Routing: Vue Router 4
• HTTP Client: Axios
• Desktop App: Tauri 2.0

Development

Prerequisites

• Node.js 18+
• Rust (for Tauri)
• Telfax backend running on http://localhost:3000

Install Dependencies

cd web-ui
npm install

Run Development Server

# Web only (for development)
npm run dev

# Desktop app (with Tauri)
npm run tauri dev

The app will be available at http://localhost:1420

Build for Production

# Build web app
npm run build

# Build desktop app (all platforms)
npm run tauri build

Configuration

Environment Variables

Create .env file in web-ui/ directory:

VITE_API_URL=http://localhost:3000
VITE_API_TOKEN=your-api-token-here

Production Configuration

1. Set API URL in .env:

   VITE_API_URL=https://your-server.com
   VITE_API_TOKEN=prod-admin-token-change-me-abc123xyz
   

2. Build and deploy:

   npm run build
   

3. Deploy dist/ directory to your web server

Architecture

web-ui/
├── src/
│   ├── api/           # API client and types
│   │   └── client.ts  # Axios client with interceptors
│   ├── components/    # Reusable Vue components
│   ├── router/        # Vue Router configuration
│   │   └── index.ts
│   ├── stores/        # Pinia stores
│   │   └── fax.ts     # Fax state management
│   ├── types/         # TypeScript interfaces
│   │   └── index.ts
│   ├── utils/         # Utility functions
│   ├── views/         # Page components
│   │   ├── Dashboard.vue
│   │   ├── FaxHistory.vue
│   │   ├── ModemStatus.vue
│   │   └── Settings.vue
│   ├── App.vue        # Root component
│   ├── main.ts        # Application entry point
│   └── style.css      # Global styles (Tailwind)
├── src-tauri/         # Tauri backend (Rust)
│   └── tauri.conf.json
├── .env               # Environment variables
├── package.json
├── tailwind.config.js
├── postcss.config.js
└── vite.config.ts

API Endpoints

The Web UI connects to the Telfax backend REST API:

Endpoint	Method	Description
/api/v1/status	GET	Server status
/api/v1/modems	GET	List modems
/api/v1/jobs	GET	List fax jobs
/api/v1/jobs/:id	GET	Get job details
/api/v1/fax/send	POST	Send fax
/api/v1/jobs/:id/cancel	POST	Cancel job

All endpoints require Authorization: Bearer <token> header.

Screenshots

Dashboard

• Real-time statistics (total, pending, completed, failed jobs)
• Quick send fax form
• Active modems overview

Fax History

• Table view of all fax jobs
• Status badges
• Cancel pending jobs

Modem Status

• Modem health monitoring
• Class and priority information
• Status indicators (idle, busy, error, disabled)

Settings

• API URL configuration
• Authentication token management
• App information

Desktop App Features

When running as a Tauri desktop app:

• Native window controls
• System tray integration (optional)
• Auto-update support (optional)
• Offline mode (view cached data)
• Native notifications

Troubleshooting

Development Issues

1. API Connection Failed

   • Check if Telfax backend is running
   • Verify .env configuration
   • Check CORS settings on backend

2. Build Errors

   • Run npm install to ensure dependencies
   • Check Node.js version (18+)
   • Clear cache: rm -rf node_modules package-lock.json && npm install

3. Tauri Build Fails

   • Ensure Rust is installed
   • Check platform-specific dependencies
   • Run npm run tauri dev first to test

Production Issues

1. Authentication Errors

   • Verify API token in Settings
   • Check token permissions (admin/write/read)

2. Modem Not Detected

   • Check backend logs
   • Verify modem device paths in backend config

License

MIT License - See LICENSE file for details.

Contributing

1. Fork the repository
2. Create feature branch: git checkout -b feature/amazing-feature
3. Commit changes: git commit -m 'Add amazing feature'
4. Push to branch: git push origin feature/amazing-feature
5. Open Pull Request

Support

• GitHub Issues: https://github.com/yourorg/telfax/issues
• Documentation: /docs