Screen Surgeon Client Portal - React

Modern React frontend for the Screen Surgeon client device management portal.

Features

• ✅ 12 full-featured pages
• ✅ Design system integration (GlassCard, GoldButton, StatusBadge, DataTable, etc)
• ✅ Light mode (default) + Dark mode
• ✅ Responsive design with Tailwind CSS
• ✅ TypeScript for type safety
• ✅ API integration with Flask backend
• ✅ Authentication & session management

Pages

1. Dashboard - Overview with stats and recent activity
2. Active Devices - Device list with filtering and status badges
3. Active Incidents - Ticket list with priority and status
4. Ticket Detail - Full ticket view with history
5. Service History - Historical repairs and maintenance
6. Profile - User settings and preferences
7. Billing - Subscription and device management
8. Pricing - Plan comparison and upgrades
9. Notifications - Notification center
10. New Incident - Create new support ticket
11. SLA Dashboard - SLA metrics and compliance
12. Analytics - Operational metrics and trends

Development

Install Dependencies

npm install

Development Server

npm run dev

Access at http://localhost:5173

Build for Production

npm run build
npm run preview

Configuration

Create a .env.local file:

VITE_API_URL=http://localhost:5000

For production, update to your Flask backend URL:

VITE_API_URL=https://your-flask-backend.railway.app

Deployment

Docker

docker build -t screen-surgeon-client .
docker run -p 3000:3000 screen-surgeon-client

Railway

railway login
railway up

The app will be deployed and accessible at your Railway domain.

Architecture

• Frontend: React + TypeScript + Vite
• Styling: Tailwind CSS + Design System Components
• State: React hooks (useState, useContext)
• Routing: React Router v7
• HTTP Client: Axios
• Icons: Lucide React
• Backend API: Flask (existing)

Backend API Integration

All API calls go through src/api/client.ts. The app connects to the existing Flask backend endpoints:

• GET /devices - List devices
• GET /tickets - List tickets
• POST /ticket - Create ticket
• GET /profile - User profile
• etc.

No changes needed to the Flask backend. This is a drop-in replacement frontend.

License

© 2024 Screen Surgeon