You are an expert AI assistant specializing in full-stack development, UX/UI design, and startup ideation. Your task is to generate a complete, single-page React SPA (Single Page Application) for a supply chain risk management platform called 'Tedarik Zinciri Kalkanı' (Supply Chain Shield). This platform aims to proactively identify and mitigate risks associated with critical raw material supply chain disruptions. The prompt needs to be detailed enough for an AI developer to directly copy-paste and generate a functional application.
**1. PROJECT OVERVIEW:**
**Application Name:** Tedarik Zinciri Kalkanı (Supply Chain Shield)
**Problem:** Global supply chains are increasingly vulnerable to unexpected disruptions, as evidenced by events like the Qatar helium shutdown impacting the chip industry. Manufacturers reliant on critical raw materials face significant risks to their production continuity and profitability when supply chains break.
**Solution:** Supply Chain Shield is a SaaS platform that provides real-time monitoring of critical raw material availability, proactive alerts for potential disruptions, risk assessment, and suggestions for alternative sourcing. It empowers businesses to anticipate and mitigate supply chain risks before they severely impact operations.
**Value Proposition:** Gain visibility and control over critical raw material supply chains. Reduce the impact of disruptions, ensure production continuity, and optimize sourcing strategies through proactive risk management and intelligent alerts.
**Target Audience:** Procurement managers, supply chain directors, operations managers, and C-level executives in industries heavily reliant on specific raw materials (e.g., semiconductors, electronics, automotive, aerospace, medical devices). These users need timely information to make informed decisions and safeguard their operations.
**2. TECH STACK:**
* **Frontend Framework:** React 18+ (with Hooks and Context API for state management)
* **Styling:** Tailwind CSS v3+ for rapid, utility-first styling and responsive design.
* **State Management:** React Context API for global state, `useState` and `useReducer` for local component state.
* **Routing:** React Router DOM v6+ for client-side navigation.
* **API Communication:** `fetch` API or Axios for asynchronous requests.
* **UI Components:** Custom components built with Tailwind CSS. Consider a library like `Headless UI` for accessible, unstyled components that integrate well with Tailwind.
* **Data Fetching:** TanStack Query (React Query) for efficient server-state management, caching, and background updates.
* **Icons:** React Icons or a similar library.
* **Build Tool:** Vite for fast development server and optimized builds.
**3. CORE FEATURES:**
* **Dashboard:** The central hub displaying an overview of monitored materials, recent alerts, and overall risk score.
* **User Flow:** Upon login, the user lands on the dashboard. It shows cards for each monitored material, a feed of the latest alerts, and a summary risk indicator. Users can click on a material card to navigate to its detailed view.
* **Material Monitoring:** Allows users to add, view, and manage critical raw materials.
* **User Flow:** Users navigate to the 'Materials' section. They can click 'Add Material', search from a predefined list or input custom details. Each added material appears on the dashboard and its dedicated detail page. The detail page shows supply status, news affecting it, and historical risk data.
* **Alert System:** Real-time notifications based on news analysis and supply chain event monitoring.
* **User Flow:** An automated system scans news feeds, geopolitical updates, and industry reports. When a potential disruption is detected for a monitored material, an alert is generated. Users receive in-app notifications and potentially email alerts (future enhancement). Alerts are categorized by severity (e.g., Low, Medium, High).
* **Risk Assessment:** A calculated score indicating the current risk level for each material.
* **User Flow:** The system aggregates data points (supply levels, geopolitical factors, news sentiment) to calculate a risk score (e.g., 1-10). This score is displayed on the dashboard and material detail pages.
* **Alternative Sourcing (Basic):** Provides initial suggestions for alternative suppliers or sources.
* **User Flow:** On a material detail page, especially when a high-risk alert is active, a section suggests potential alternative suppliers or related materials based on a curated database. This is a starting point, not exhaustive.
**4. UI/UX DESIGN:**
* **Layout:** Single-page application layout. A persistent sidebar navigation (collapsible on smaller screens) for main sections (Dashboard, Materials, Alerts, Settings). Main content area displays the active section.
* **Color Palette:**
* Primary: Deep Blue (`#1a202c` - dark background elements)
* Secondary: Teal (`#0694a2` - primary call-to-actions, active states)
* Accent: Orange (`#f6ad55` - warnings, attention)
* Neutral: Grays (`#f7fafc` - light backgrounds, `cbd5e0` - borders, `a0aec0` - secondary text)
* Status Colors: Red (`#f56565` - High Risk/Alert), Yellow (`#ecc94b` - Medium Risk/Alert), Green (`#48bb78` - Low Risk/Stable)
* **Typography:** Use a clean, readable sans-serif font like Inter or Poppins. Define clear hierarchy for headings (h1-h6), paragraphs, and labels.
* Headings: Semibold or Bold, larger sizes.
* Body Text: Regular weight, comfortable line height.
* **Responsive Design:** Mobile-first approach. Ensure usability across devices (smartphones, tablets, desktops). Use Tailwind's responsive prefixes (sm:, md:, lg:, xl:). Sidebar collapses into a hamburger menu on small screens. Cards and grids adjust layout.
* **Interactions:** Subtle hover effects on buttons and interactive elements. Smooth transitions for page loads and modal popups. Clear loading indicators (spinners, skeleton loaders).
**5. DATA MODEL (Mock Data Structure):**
* **`User`:** `{ id: string, name: string, email: string, role: 'admin' | 'user', monitoredMaterials: string[] }`
* **`Material`:** `{ id: string, name: string, symbol: string, description: string, category: string, currentSupplyStatus: 'Stable' | 'Low' | 'Critical' | 'Disrupted', riskScore: number, lastUpdated: string }`
* **`Alert`:** `{ id: string, materialId: string, title: string, description: string, severity: 'Low' | 'Medium' | 'High', timestamp: string, source: string, isRead: boolean }`
* **`Supplier`:** `{ id: string, name: string, materialId: string, location: string, contact: string, reliabilityScore: number }`
**State Management:**
* Global State (Context API): User authentication status, list of monitored materials, list of alerts.
* Local State: Form inputs, modal visibility, component-specific UI states.
* Server State (React Query): Fetching and caching data for materials, alerts, suppliers.
**6. COMPONENT BREAKDOWN:**
* **`App.jsx`:** Main application component, sets up routing, context providers.
* **`Layout.jsx`:** Wrapper component containing the sidebar and main content area.
* Props: `children` (content to render)
* **`Sidebar.jsx`:** Navigation menu component.
* Props: `isOpen` (boolean for mobile view), `onClose` (function)
* **`DashboardPage.jsx`:** Main dashboard view.
* Components used: `MaterialOverviewCard`, `AlertFeed`, `RiskSummary`
* **`MaterialOverviewCard.jsx`:** Displays summary info for a single monitored material.
* Props: `material` (Material object), `onClick` (function)
* **`AlertFeed.jsx`:** List of recent alerts.
* Props: `alerts` (array of Alert objects)
* **`RiskSummary.jsx`:** Overall risk indicator.
* **`MaterialListPage.jsx`:** Displays the list of all monitored materials.
* Components used: `MaterialListItem`
* **`MaterialListItem.jsx`:** Row item for the material list.
* Props: `material` (Material object), `onSelect` (function)
* **`MaterialDetailPage.jsx`:** Detailed view for a single material.
* Components used: `MaterialDetails`, `AlertsForMaterial`, `AlternativeSuppliers`
* **`AddMaterialForm.jsx`:** Modal or page for adding a new material.
* Props: `onSubmit` (function), `onClose` (function)
* **`AlertsPage.jsx`:** Displays all alerts with filtering/sorting options.
* **`AlternativeSuppliers.jsx`:** Displays suggested alternative suppliers for a material.
* Props: `suppliers` (array of Supplier objects)
* **`Notification.jsx`:** Component for displaying toast notifications/alerts.
* **`LoadingSpinner.jsx`:** Generic loading indicator.
**7. ANIMATIONS & INTERACTIONS:**
* **Page Transitions:** Use `react-transition-group` or Framer Motion for subtle fade-in/fade-out animations between page changes.
* **Hover Effects:** Light scaling or background color changes on buttons, cards, and links.
* **Loading States:** Display `LoadingSpinner` or skeleton loaders while data is being fetched. Use React Query's `isLoading` state.
* **Alert Badges:** Animate the appearance of new, unread alerts (e.g., a subtle pulse or bounce).
* **Sidebar Collapse:** Smooth transition animation when the sidebar expands/collapses.
* **Modal Animations:** Fade-in and slide-up/down animations for modals (e.g., Add Material form).
**8. EDGE CASES:**
* **Empty States:** Display informative messages and clear calls to action when lists are empty (e.g., 'No materials added yet. Click here to add one.', 'No alerts found.').
* **Error Handling:** Gracefully handle API errors. Display user-friendly error messages (e.g., 'Failed to load materials. Please try again later.'). Implement retry mechanisms where appropriate.
* **Validation:** Client-side validation for forms (e.g., material name, supplier details). Ensure required fields are not empty and data formats are correct.
* **Accessibility (a11y):** Use semantic HTML5 elements. Ensure proper ARIA attributes for dynamic content and interactive elements. Keyboard navigability for all interactive components. Sufficient color contrast.
* **No Data Available:** For specific data points (e.g., risk score, supply status) if data is missing, display 'N/A' or a similar indicator clearly.
**9. SAMPLE DATA (Mock Data):**
```json
[
{
"id": "mat-001",
"name": "Helium-3 (He-3)",
"symbol": "He-3",
"description": "High-purity helium isotope crucial for semiconductor manufacturing and MRI machines.",
"category": "Gases",
"currentSupplyStatus": "Low",
"riskScore": 7.8,
"lastUpdated": "2023-10-27T10:00:00Z"
},
{
"id": "mat-002",
"name": "Neodymium",
"symbol": "Nd",
"description": "Rare earth element essential for high-strength magnets used in EVs and electronics.",
"category": "Rare Earths",
"currentSupplyStatus": "Stable",
"riskScore": 5.2,
"lastUpdated": "2023-10-26T15:30:00Z"
},
{
"id": "mat-003",
"name": "Lithium Carbonate",
"symbol": "Li2CO3",
"description": "Key component for lithium-ion batteries.",
"category": "Chemicals",
"currentSupplyStatus": "Critical",
"riskScore": 8.5,
"lastUpdated": "2023-10-27T09:15:00Z"
}
]
```
```json
[
{
"id": "alert-101",
"materialId": "mat-001",
"title": "Qatar Helium Production Halts Amid Geopolitical Tensions",
"description": "QatarEnergy has not restarted helium production after drone strikes forced the facility offline. This impacts ~30% of global supply. Chip industry facing potential delays.",
"severity": "High",
"timestamp": "2023-10-25T08:00:00Z",
"source": "Industry News Feed",
"isRead": false
},
{
"id": "alert-102",
"materialId": "mat-003",
"title": "New Lithium Mine Approved in South America",
"description": "Government grants permit for a new large-scale lithium carbonate mine, potentially easing supply constraints in 18-24 months.",
"severity": "Low",
"timestamp": "2023-10-26T11:00:00Z",
"source": "Geopolitical Monitor",
"isRead": false
}
]
```
```json
[
{
"id": "sup-1001",
"name": "Air Liquide (Global)",
"materialId": "mat-001",
"location": "Multiple Locations",
"contact": "sales@airliquide.com",
"reliabilityScore": 9.0
},
{
"id": "sup-1002",
"name": "Linde plc (Global)",
"materialId": "mat-001",
"location": "Multiple Locations",
"contact": "info@linde.com",
"reliabilityScore": 8.8
},
{
"id": "sup-1003",
"name": "Chinese Rare Earth Group",
"materialId": "mat-002",
"location": "China",
"contact": "contact@creg.cn",
"reliabilityScore": 7.5
}
]
```
**10. DEPLOYMENT NOTES:**
* **Build Command:** `npm run build` or `yarn build` (using Vite).
* **Environment Variables:** Use `.env` files for API endpoints, keys, and other configuration. Vite supports `import.meta.env`. Example: `VITE_API_URL=https://api.supplychainshield.com`.
* **Hosting:** Recommend modern hosting platforms like Vercel, Netlify, or AWS Amplify for easy deployment and CI/CD integration.
* **Performance Optimizations:**
* Code Splitting: Vite handles this automatically for efficient loading.
* Image Optimization: Use optimized image formats and lazy loading.
* Memoization: Use `React.memo` and `useMemo`/`useCallback` judiciously to prevent unnecessary re-renders.
* Bundle Analysis: Use tools like `rollup-plugin-visualizer` to analyze bundle size and identify potential optimizations.
* **HTTPS:** Ensure the application is always served over HTTPS.
* **CORS:** Configure backend CORS appropriately if a separate API server is used.