You are an AI assistant tasked with generating the complete frontend code for a single-page application (SPA) called 'Askerlik İzin Yönetimi' (Military Leave Management). This application aims to simplify the mandatory military permit process for German men aged 18-45 who plan to stay abroad for more than three months, as mandated by a new German law. The goal is to create an intuitive, user-friendly platform that guides users through the application process, tracks their status, and provides necessary information.
**1. PROJECT OVERVIEW:**
- **Purpose:** To streamline and digitize the process of obtaining a military permit for extended stays abroad for German men aged 18-45.
- **Problem Solved:** The new law requires a permit for stays longer than three months, causing potential bureaucratic hurdles and uncertainty for individuals planning international study, work, or travel. This app provides a centralized, easy-to-use interface for managing this requirement.
- **Value Proposition:** Save time, reduce stress, and ensure compliance with German military service regulations regarding international travel. Offers clarity and efficiency in a potentially confusing administrative process.
**2. TECH STACK:**
- **Framework:** React (using Vite for fast development and build)
- **Styling:** Tailwind CSS (for rapid UI development and utility-first styling)
- **State Management:** Zustand (lightweight and efficient for global state)
- **Routing:** React Router DOM (for SPA navigation)
- **Form Handling:** React Hook Form + Zod (for robust form validation)
- **Date Handling:** date-fns (for flexible date manipulation)
- **Icons:** React Icons (for a wide variety of icons)
- **Deployment:** Vercel (or similar static hosting platforms)
**3. CORE FEATURES & USER FLOWS:****
* **A. User Authentication & Onboarding:**
* **Flow:** User lands on the homepage. Clicks 'Get Started' or 'Login'. New users are guided through a registration process. They enter basic information (name, date of birth, nationality). A crucial step involves verifying age (must be 18-45) and nationality (must be German). This could involve a simple checkbox confirmation for MVP, with a note about legal responsibility. Advanced versions might integrate with external ID verification services.
* **Details:** A multi-step form or modal for registration. Clear error messages for invalid inputs (e.g., 'You must be between 18 and 45 years old', 'This service is for German citizens only'). Successful registration leads to the user dashboard.
* **B. Permit Application:**
* **Flow:** Logged-in users navigate to the 'Apply for Permit' section. They fill out a detailed form including:
1. **Personal Details:** Pre-filled from registration, with options to update if necessary.
2. **Travel Details:** Start Date, End Date (must be > 3 months apart), Destination(s), Purpose of travel (Study, Work, Travel, Other - with text input).
3. **Contact Information:** Valid German address and phone number, email.
4. **Declaration:** A checkbox confirming the accuracy of information and understanding of the permit requirement.
* **Details:** Form uses React Hook Form with Zod validation. Clear labels, placeholders, and helper text. Date pickers for start/end dates. A 'Calculate Duration' button could show the total duration based on selected dates. Submission triggers a 'Pending' status.
* **C. Application Status Tracking:**
* **Flow:** Users can view the status of their submitted applications on their dashboard. Statuses include 'Pending Review', 'Approved', 'Denied'. Each application entry shows the key details (dates, purpose) and the current status. Clicking on an application might show more details or next steps.
* **Details:** A table or list view displaying applications. Visual indicators (e.g., colored badges) for status. For 'Approved', users might see a downloadable confirmation or next steps. For 'Denied', reasons might be displayed if available.
* **D. Information Hub & Support:**
* **Flow:** A dedicated 'Information' or 'FAQ' section. Users can find answers to common questions about the law, the permit process, required documents (if any), and timelines. Contact information for the relevant Bundeswehr Career Center is provided.
* **Details:** Collapsible sections for FAQ. Clear contact details (phone, address, website link if available) for the Bundeswehr Career Center. Links to official government resources.
**4. UI/UX DESIGN:**
- **Layout:** Single Page Application (SPA) with a clean, modern navigation structure. A persistent sidebar or top navigation bar for key sections: Dashboard, Apply, My Applications, Information, Settings/Profile, Logout.
- **Color Palette:** Professional and trustworthy. Primary: A calm blue (e.g., `#4A90E2`). Secondary: A neutral gray (e.g., `#F5F7FA` for backgrounds, `#6B7280` for text). Accent: A subtle green for success states (e.g., `#34D399`) and orange/red for warnings/errors (e.g., `#F87171`).
- **Typography:** Sans-serif fonts for readability. Use Tailwind's defaults or choose a modern pair like Inter or Poppins.
- **Components:** Utilize Tailwind CSS for component styling. Focus on clear information hierarchy, ample whitespace, and intuitive controls (buttons, inputs, date pickers).
- **Responsiveness:** Mobile-first approach. Ensure usability across all devices (desktops, tablets, smartphones). Use Tailwind's responsive prefixes (sm:, md:, lg:).
- **Visuals:** Minimalist approach. Perhaps a subtle background graphic or relevant, professional illustrations. Avoid clutter.
**5. DATA MODEL (State Management with Zustand):**
- **`authStore`:**
* `isLoggedIn: boolean`
* `user: { id: string, name: string, dob: string, nationality: string, age: number } | null`
* `isLoading: boolean`
* `login(userData): void`
* `logout(): void`
* `register(userData): void`
- **`applicationStore`:**
* `applications: Array<{ id: string, userId: string, startDate: string, endDate: string, purpose: string, status: 'Pending' | 'Approved' | 'Denied', createdAt: string, updatedAt: string }>`
* `isLoading: boolean`
* `error: string | null`
* `fetchApplications(): void`
* `submitApplication(applicationData): void`
* `updateApplicationStatus(appId, newStatus): void`
- **`uiStore`:**
* `isModalOpen: boolean`
* `modalContent: React.ReactNode | null`
* `openModal(content): void`
* `closeModal(): void`
**Mock Data Format:**
```json
{
"id": "app_123xyz",
"userId": "user_abc789",
"startDate": "2025-08-15",
"endDate": "2026-02-20",
"purpose": "Study Abroad - Master's Degree",
"status": "Approved",
"createdAt": "2024-07-20T10:00:00Z",
"updatedAt": "2024-07-22T15:30:00Z"
}
{
"id": "app_456uvw",
"userId": "user_abc789",
"startDate": "2025-11-01",
"endDate": "2026-05-10",
"purpose": "Work Contract - Tech Industry",
"status": "Pending",
"createdAt": "2024-07-21T09:00:00Z",
"updatedAt": "2024-07-21T09:00:00Z"
}
{
"id": "app_789rst",
"userId": "user_def012",
"startDate": "2026-01-10",
"endDate": "2026-03-15",
"purpose": "Backpacking Trip",
"status": "Denied",
"createdAt": "2024-07-19T14:00:00Z",
"updatedAt": "2024-07-25T11:00:00Z"
}
```
**6. COMPONENT BREAKDOWN:**
* **`App.jsx`:** Main application component, sets up React Router.
* **`Layout.jsx`:** Wrapper component with Navbar/Sidebar and main content area.
* **`Navbar.jsx`:** Displays app title/logo and navigation links. Handles active link styling.
* **`Sidebar.jsx`:** (Optional, if using sidebar navigation) Contains links to different app sections.
* **`HomePage.jsx`:** Landing page with a clear call-to-action (CTA) and brief explanation.
* **`AuthPage.jsx`:** Container for Login/Register forms.
* **`LoginForm.jsx`:** Input fields for email/password, submit button. Uses `react-hook-form`.
* **`RegisterForm.jsx`:** Multi-step form for user registration (personal details, age/nationality verification). Uses `react-hook-form` and `zod`.
* **`DashboardPage.jsx`:** User's main dashboard after login.
* **`ApplicationSummary.jsx`:** Displays a summary of recent applications or overall status.
* **`ApplicationList.jsx`:** Renders `ApplicationListItem` components.
* **`ApplicationListItem.jsx`:** Displays a single application's details (ID, dates, purpose, status) and actions (View Details).
* **`ApplyPage.jsx`:** Form for submitting a new permit application.
* **`PermitForm.jsx`:** Contains all input fields for the application (using `react-hook-form`). Includes date pickers, text inputs, dropdowns, and a submit button.
* **`DatePickerInput.jsx`:** Reusable date picker component.
* **`TextInput.jsx`:** Reusable text input component with label and validation message.
* **`ApplicationDetailPage.jsx`:** Shows detailed information for a specific application.
* **`InfoPage.jsx`:** Displays FAQ content and Bundeswehr contact details.
* **`FAQSection.jsx`:** Renders collapsible FAQ items.
* **`SettingsPage.jsx`:** User profile and settings management.
* **`Modal.jsx`:** Generic modal component for displaying messages or confirmations.
* **`Button.jsx`:** Reusable button component with various states (loading, disabled).
* **`Spinner.jsx`:** Loading indicator component.
**Props Examples:**
- `ApplicationListItem` might receive `applicationData` object as a prop.
- `PermitForm` might receive `onSubmit` handler and `initialData` (for editing, though not MVP) as props.
**7. ANIMATIONS & INTERACTIONS:**
- **Page Transitions:** Subtle fade-in/fade-out between pages using React Router transitions or a library like `Framer Motion` (if complexity allows).
- **Button States:** Hover effects on buttons (slight scale or color change). Click feedback (slight depression).
- **Loading States:** Display `Spinner` components or skeleton loaders when fetching data (`applications`, user profile). Disable buttons during form submission.
- **Form Feedback:** Subtle animations for validation errors (e.g., input border color flash).
- **Hover Effects:** Tooltips on icons or status badges explaining their meaning.
- **Micro-interactions:** Smooth expansion/collapse for FAQ items.
**8. EDGE CASES:**
- **Authentication:** Handling expired tokens, incorrect login credentials, registration errors.
- **Empty States:** Dashboard should display a friendly message if no applications are submitted yet. Info page should handle cases where FAQ data is unavailable.
- **Error Handling:** Gracefully handle API errors (network issues, server errors) and display user-friendly messages. Implement try-catch blocks around asynchronous operations.
- **Validation:** Comprehensive validation using Zod for all forms. Ensure required fields are enforced, date ranges are logical (end date after start date), age is within bounds.
- **Accessibility (a11y):** Use semantic HTML elements (header, nav, main, button, etc.). Ensure proper ARIA attributes where necessary. Keyboard navigability for all interactive elements. Sufficient color contrast.
- **Unauthorized Access:** Redirect users to login if they try to access protected routes without being authenticated.
- **Data Persistence:** Use `localStorage` or `sessionStorage` for tokens/user session. Zustand persists state if configured, or use `persist` middleware.
**9. SAMPLE DATA:**
(See 'DATA MODEL' section for mock data examples)
**10. DEPLOYMENT NOTES:**
- **Build Command:** `npm run build` (or `yarn build`). Vite generates optimized static assets.
- **Environment Variables:** Use `.env` files for API endpoints (if applicable), base URLs, etc. Prefix variables with `VITE_` (e.g., `VITE_API_URL`).
- **Routing:** Ensure the hosting provider (e.g., Vercel, Netlify) is configured for SPA routing to handle client-side navigation correctly (e.g., rewrite all non-file requests to `index.html`).
- **Performance:** Code splitting (handled by Vite). Image optimization (if any). Minimize bundle size. Lazy loading components where appropriate.
- **HTTPS:** Always deploy using HTTPS.