You are an AI assistant tasked with generating a single-page React application (SPA) for 'Apple Business Solutions Hub', a platform designed to help small and medium-sized businesses (SMBs) leverage the Apple ecosystem for device management, business communication, and local customer outreach. This application aims to simplify the complexities of managing Apple devices, setting up custom domain email/calendars, and improving local customer engagement through Apple services.
**PROJECT OVERVIEW:**
The primary goal of the Apple Business Solutions Hub is to provide SMBs with an intuitive, all-in-one platform to manage their Apple devices, streamline business communications using custom domains, and enhance their visibility and reach within the local market via Apple's integrated services like Maps and Siri. The core value proposition lies in simplifying IT management for businesses that may not have dedicated IT staff, enabling them to efficiently run and securely grow their operations within the Apple ecosystem.
**TECH STACK:**
- **Frontend Framework:** React.js
- **Styling:** Tailwind CSS for rapid and utility-first styling.
- **State Management:** Zustand for efficient and simple global state management.
- **Routing:** React Router DOM for client-side routing within the SPA.
- **Forms:** React Hook Form for efficient form handling and validation.
- **Icons:** Heroicons or similar.
- **Build Tool:** Vite for fast development and optimized builds.
- **API Interaction (Conceptual):** Assume a RESTful API backend for actual data persistence (though MVP will use mock data/local storage). Libraries like Axios can be used for actual API calls.
**CORE FEATURES:**
1. **Dashboard Overview:**
* **User Flow:** Upon login, the user sees a consolidated dashboard showing key metrics: number of managed devices, recent email activity (placeholder), upcoming calendar events (placeholder), and quick access links to major features.
* **Functionality:** Displays summary information and navigation to other sections.
* **State:** Dashboard data (device count, etc.), loading states.
2. **Device Management:**
* **User Flow:** Navigate to 'Devices'. View a list of registered devices. Option to add a new device (simulated), view device details (e.g., name, model, OS version - mock data), and perform basic actions like 'configure settings' (simulated). Integration with MDM (Mobile Device Management) concepts is key, but MVP will simulate this.
* **Functionality:** List devices, view details, simulate configuration actions. Data will be stored in local state or mock API.
* **State:** List of devices, selected device details, loading indicators, form states for adding/editing devices.
3. **Email & Calendar Setup:**
* **User Flow:** Navigate to 'Communication'. Select 'Email Setup'. A form allows users to input their custom domain (e.g., 'yourcompany.com'), desired email address (e.g., 'info@yourcompany.com'), and potentially select an email provider (simulated). Similarly, for 'Calendar Setup', users can configure their business calendar.
* **Functionality:** Guides users through the conceptual steps of setting up business email and calendar with their domain. MVP focuses on the UI/UX for configuration.
* **State:** Form input states, validation status, success/error messages.
4. **Local Customer Outreach:**
* **User Flow:** Navigate to 'Marketing'. Select 'Local Presence'. Users can input business information (name, address, phone, category) to be formatted for potential submission to services like Apple Maps. Includes information fields for Siri interactions and Wallet passes.
* **Functionality:** Provides a structured form to gather and display business information optimized for local discovery on Apple platforms.
* **State:** Form input states for business details, generated informational snippets.
5. **User & Group Management:**
* **User Flow:** Navigate to 'Team'. View existing users and groups. Ability to add new users (name, email, role) and assign them to groups. Simulate assigning devices or permissions to groups.
* **Functionality:** Basic user and group management interface.
* **State:** List of users, list of groups, selected user/group details, form states for adding/editing.
**UI/UX DESIGN:**
- **Layout:** A clean, modern dashboard layout. A persistent sidebar navigation for main sections (Dashboard, Devices, Communication, Marketing, Team, Settings). Main content area displays the relevant feature.
- **Color Palette:** Primary: Dark Blue (#1a202c), Secondary: Light Gray (#f7fafc), Accent: Apple Green (#34d399) or a professional blue. Use subtle gradients and shadows for depth.
- **Typography:** San Francisco (or a close system font like Inter) for headings and body text. Clear hierarchy with distinct font sizes and weights.
- **Responsive Design:** Mobile-first approach. Sidebar collapses into a hamburger menu on smaller screens. Content adapts fluidly. Aim for excellent usability on desktop, tablet, and mobile.
- **Component Library:** Utilize common UI patterns (cards, modals, tables, forms, buttons) styled with Tailwind CSS.
**COMPONENT BREAKDOWN:**
- `App.jsx`: Main application component, sets up routing.
- `Layout.jsx`: Main layout including sidebar and header.
- `Sidebar.jsx`: Navigation component.
- `DashboardPage.jsx`: Displays overview metrics.
- `StatCard.jsx`: Reusable component for displaying summary statistics.
- `DevicesPage.jsx`: Manages device listing and details.
- `DeviceList.jsx`: Renders the table or list of devices.
- `DeviceDetailModal.jsx`: Displays detailed information for a selected device.
- `AddDeviceForm.jsx`: Form for adding new devices.
- `CommunicationPage.jsx`: Handles Email & Calendar setup.
- `EmailSetupForm.jsx`: Form for custom domain email setup.
- `CalendarSetupForm.jsx`: Form for calendar setup.
- `MarketingPage.jsx`: Manages local customer outreach info.
- `LocalPresenceForm.jsx`: Form for business details.
- `TeamPage.jsx`: Manages users and groups.
- `UserList.jsx`: Renders user table.
- `GroupList.jsx`: Renders group table.
- `AddUserForm.jsx`: Form for adding users.
- `AddGroupForm.jsx`: Form for adding groups.
- `SettingsPage.jsx`: Placeholder for future settings.
- `LoginForm.jsx`: Component for user authentication (simulated).
**DATA MODEL (Zustand Store & Mock Data):**
- **`authStore`:** `{ user: null | object, isAuthenticated: boolean, login: (userData) => void, logout: () => void }`
- **`deviceStore`:** `{ devices: Device[], selectedDevice: Device | null, isLoading: boolean, fetchDevices: () => void, addDevice: (deviceData) => void, updateDevice: (deviceData) => void, deleteDevice: (deviceId) => void, selectDevice: (deviceId) => void }`
- **`communicationStore`:** `{ emailConfig: object | null, calendarConfig: object | null, saveEmailConfig: (config) => void, saveCalendarConfig: (config) => void }`
- **`marketingStore`:** `{ businessInfo: BusinessInfo | null, saveBusinessInfo: (info) => void }`
- **`teamStore`:** `{ users: User[], groups: Group[], selectedUser: User | null, selectedGroup: Group | null, fetchTeamData: () => void, addUser: (userData) => void, updateUser: (userData) => void, deleteUser: (userId) => void, addGroup: (groupData) => void, updateGroup: (groupData) => void, deleteGroup: (groupId) => void }`
**Mock Data Structures:**
```javascript
// src/mock/data.js
export const mockDevices = [
{ id: 'd1', name: 'John Doe_iPhone', model: 'iPhone 14 Pro', os: 'iOS 16.5', status: 'Active', configured: true },
{ id: 'd2', name: 'Marketing_iPad', model: 'iPad Air 5th Gen', os: 'iPadOS 16.5', status: 'Active', configured: true },
{ id: 'd3', name: 'Dev_MacBook', model: 'MacBook Pro 16"', os: 'macOS Ventura 13.4', status: 'Active', configured: false },
{ id: 'd4', name: 'Sales_iPhone', model: 'iPhone 13', os: 'iOS 16.4', status: 'Pending', configured: false }
];
export const mockUsers = [
{ id: 'u1', name: 'Alice Smith', email: 'alice@example.com', role: 'Manager', groupId: 'g1' },
{ id: 'u2', name: 'Bob Johnson', email: 'bob@example.com', role: 'Employee', groupId: 'g1' },
{ id: 'u3', name: 'Charlie Brown', email: 'charlie@example.com', role: 'Employee', groupId: 'g2' }
];
export const mockGroups = [
{ id: 'g1', name: 'Sales Team', description: 'Customer-facing sales representatives' },
{ id: 'g2', name: 'Development Team', description: 'Software development engineers' },
{ id: 'g3', name: 'Management', description: 'Company leadership' }
];
export const mockBusinessInfo = {
businessName: 'Innovative Solutions Ltd.',
address: '123 Innovation Drive, Tech City, CA 90210',
phoneNumber: '+1 (555) 123-4567',
category: 'Technology Consulting',
website: 'https://innovativesolutions.com'
};
```
**ANIMATIONS & INTERACTIONS:**
- **Page Transitions:** Subtle fade-in/fade-out transitions between pages using `Framer Motion` or CSS transitions.
- **Hover Effects:** Gentle scaling or background color changes on interactive elements like buttons and navigation items.
- **Loading States:** Use skeletons or spinners (e.g., from `react-spinners` or custom Tailwind animations) for data fetching operations. Indicate loading within buttons when actions are being performed.
- **Micro-interactions:** Subtle animations on form submission success/error messages, smooth expansion/collapse of accordions or dropdowns.
- **Sidebar Toggle:** Smooth animation when the sidebar collapses/expands.
**EDGE CASES & VALIDATION:**
- **Empty States:** Display user-friendly messages and clear calls-to-action when lists are empty (e.g., 'No devices managed yet. Add your first device!').
- **Error Handling:** Implement robust error handling for API calls (simulated). Display clear, concise error messages to the user. Use a global error boundary.
- **Form Validation:** Use `react-hook-form` with built-in HTML5 validation and custom rules (e.g., email format, required fields, domain format) for all forms. Provide real-time feedback.
- **Accessibility (a11y):** Ensure proper ARIA attributes, semantic HTML, keyboard navigability, sufficient color contrast, and focus management.
- **Authentication:** Simulate login/logout flow. Protect routes that require authentication.
- **Data Persistence:** For MVP, use `localStorage` or Zustand's persistence middleware to retain state across sessions. Acknowledge that a real backend API is needed for production.
**DEPLOYMENT NOTES:**
- **Build:** Use Vite (`vite build`) for optimized production builds.
- **Environment Variables:** Configure environment variables (e.g., `VITE_API_URL`) using a `.env` file. Ensure sensitive variables are not hardcoded.
- **Performance:** Optimize image loading, code splitting (if application grows), and memoization (`React.memo`, `useMemo`, `useCallback`) where appropriate.
- **Hosting:** Consider platforms like Vercel, Netlify, or AWS Amplify for easy deployment.
- **HTTPS:** Ensure the application is served over HTTPS in production.