A comprehensive web-based platform designed to streamline and digitize the entire service enquiry and management process for typing centers operating in the UAE. This system serves multiple user types including customers, staff, and administrators, providing a complete solution for service requests, tracking, and management.

• Service Discovery: Browse and search through comprehensive service catalog
• Multi-step Enquiry Forms: Intuitive forms with document upload capabilities
• Real-time Tracking: Track service progress with status updates
• Customer Dashboard: Manage documents, services, and personal information
• WhatsApp Integration: Direct communication with service staff

• Service Management: Handle assigned service requests efficiently
• Document Processing: Access and process customer documents
• Status Updates: Update service progress and communicate with customers
• Workload Management: Manage and prioritize tasks

• Analytics Dashboard: Real-time performance metrics and insights
• Staff Management: Assign tasks, monitor performance, and manage workload
• Service Configuration: Manage service catalog, pricing, and workflows
• Customer Management: Track customer history and manage renewals
• Financial Reporting: Revenue tracking and financial analytics

• Frontend: React 18 with TypeScript
• UI Framework: Shadcn/ui components
• Styling: Tailwind CSS
• State Management: React Context API
• Routing: React Router DOM
• Build Tool: Vite
• Icons: Lucide React
• Forms: React Hook Form with Zod validation
• Charts: Recharts
• Notifications: Sonner

• Node.js 18+
• npm or yarn
• Modern web browser

1. Clone the repository

   git clone <repository-url>
   cd typing-center-enquiry-flow

2. Install dependencies

   npm install
   # or
   yarn install

3. Start the development server

   npm run dev
   # or
   yarn dev

4. Open your browser Navigate to http://localhost:5173

npm run build
# or
yarn build

npm run preview
# or
yarn preview

src/
├── components/          # Reusable UI components
│   ├── admin/          # Admin-specific components
│   ├── auth/           # Authentication components
│   ├── ui/             # Shadcn/ui components
│   └── workHistory/    # Work history components
├── data/               # Mock data and service configurations
│   ├── services/       # Service-specific data
│   └── mockData/       # Mock data for development
├── hooks/              # Custom React hooks
├── lib/                # Utility functions
├── pages/              # Page components
├── types/              # TypeScript type definitions
└── main.tsx           # Application entry point

• Consent & Authorization Letters
• Employment Letters
• Resignation Letters
• Termination Letters
• Custom Immigration Letters
• Legal Document Typing

• Trade License Applications
• Company Formation
• MOA Drafting & Renewal
• Partner Addition/Removal
• Business License Renewal
• Company Liquidation

• Family Visa Applications
• Visa Renewals & Cancellations
• NOC for Sponsoring
• Maid Visa Processing
• Change of Status
• Travel Permits for Minors

• Golden Chance Booking
• New License Applications
• Eye Test Appointments
• Traffic File Transfers
• Driving Class Booking
• Foreign License Translation

• Birth Certificate Attestation
• Degree Certificate Attestation
• Marriage Certificate Attestation
• MOFA Attestation
• Embassy Attestations
• Police Clearance Certificates

• New Daman Applications
• Insurance Renewals
• DHA/HAAD Registrations
• Medical Insurance
• Investor Insurance
• Family Medical Coverage

The system implements role-based access control with three main user types:

• Service browsing and booking
• Document upload and management
• Service tracking and history
• Profile management

• Assigned service management
• Document processing
• Customer communication
• Status updates

• Full system administration
• Analytics and reporting
• Staff management
• Service configuration

• Responsive Design: Mobile-first approach with desktop optimization
• Accessibility: WCAG 2.1 AA compliance
• Modern UI: Clean, intuitive interface using Shadcn/ui
• Dark/Light Mode: Theme switching capability
• Loading States: Smooth loading animations
• Error Handling: Comprehensive error states and user feedback

The application is fully responsive and optimized for:

• Mobile phones (320px+)
• Tablets (768px+)
• Desktop (1024px+)
• Large screens (1440px+)

Create a .env file in the root directory:

VITE_API_URL=your_api_url
VITE_WHATSAPP_NUMBER=your_whatsapp_number
VITE_APP_NAME=UAE Digital Solutions

Services can be configured in src/data/services/:

• documentTyping.ts - Document typing services
• businessSetup.ts - Business setup services
• visaServices.ts - Visa and immigration services
• drivingLicense.ts - Driving license services
• otherServices.ts - Other miscellaneous services

# Run linting
npm run lint

# Run type checking
npm run type-check

• Page Load Time: < 3 seconds
• API Response Time: < 500ms
• Bundle Size: Optimized with Vite
• Image Optimization: Automatic optimization
• Caching: Efficient caching strategies

• Authentication: Secure login/logout flows
• Authorization: Role-based access control
• Data Protection: Secure data handling
• Input Validation: Comprehensive form validation
• XSS Protection: Built-in React security features

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

• Performance Monitoring: Built-in performance tracking
• Error Tracking: Comprehensive error logging
• User Analytics: User behavior tracking
• Service Metrics: Service performance monitoring

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

• Use TypeScript for all new code
• Follow ESLint configuration
• Use Prettier for code formatting
• Write meaningful commit messages

• Use functional components with hooks
• Implement proper TypeScript interfaces
• Follow Shadcn/ui component patterns
• Use proper error boundaries

• Use React Context for global state
• Use local state for component-specific data
• Implement proper loading and error states

npm run build

• Vercel: Recommended for React applications
• Netlify: Great for static sites
• AWS S3: For static hosting
• Docker: For containerized deployment

For support and questions:

• Email: support@uaedigitalsolutions.com
• WhatsApp: +971-XX-XXX-XXXX
• Documentation: [Link to documentation]

This project is proprietary software developed for UAE Digital Solutions.

• Shadcn/ui for the excellent UI components
• Tailwind CSS for the utility-first CSS framework
• Lucide for the beautiful icons
• Vite for the fast build tool

• Initial release
• Complete customer, staff, and admin portals
• Service management system
• Document upload and tracking
• WhatsApp integration
• Responsive design
• Comprehensive service catalog

Built with ❤️ for UAE Digital Solutions