Build "MechTrak" — a machine maintenance platform and operational intelligence dashboard for manufacturing shop floors. It combines fleet overview, predictive telemetry, a replacement parts marketplace, and a contextual AI repair assistant.

Tech Stack:

React, React Router DOM, Tailwind CSS (v4), Recharts, @google/genai, react-markdown, lucide-react.

1. Design System & Aesthetics (Sophisticated Dark Theme):

• Colors: Deep black backgrounds (#050505 for body, #080808 for headers/panels). The primary accent color is Amber (#f59e0b or Tailwind's amber-500). Use Emerald and Red for status indicators.
• Typography: Import 3 Google Fonts: Inter (sans-serif for general UI), Playfair Display (serif, italicized for main headers/branding), and JetBrains Mono (monospace for IDs, technical data, logs, and timestamps).
• Micro-typography: Make heavy use of text-[10px] uppercase tracking-widest font-bold text-gray-500 for section titles, table headers, and tiny labels.
• Containers: Do not use plain solid colors for cards. Create a .glass CSS class in index.css (background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.08); rounded-2xl) and apply it to all major UI panels, cards, and charts.

2. Data Layer (Mock Data):

Create a mockData.ts file holding:

• mockMachines: Array of objects containing id (e.g., "MCH-1042"), name (e.g., "Haas VF-2SS"), category, status (operational, warning, down), healthScore (0-100), lastMaintenance, nextMaintenance, location, and an array of alerts.
• mockServiceHistory: A dictionary keyed by machine ID containing an array of service records (date, technician, type, notes, partsReplaced).
• mockParts: Array of items for the marketplace (name, brand, price, stock, compatibility array, nextDayShipping boolean).

3. Application Layout:

• Sidebar Navigation: Fixed left sidebar. Include branding (amber icon and italic serif "MechTrak" text). Links: Dashboard, Machines, AI Assistant, Marketplace. Standard links should be gray text, active links should have a bg-white/5 background with white text and an amber left border.
• Topbar: Search bar (border outlined, transparent background), notification bell, and a User avatar circle.

4. Core Pages:

• Dashboard (/):
  • Top row: 4 glass cards showing total machines, operational, warnings, and offline/down (using colored icons and large Playfair serif numbers).
  • Main area: A list of "Active Predictive Alerts" pulling from the mock data, showing the alert type (vibration, heat) and a link to jump to the AI Assistant.
  • Right column: A short list of "Upcoming Preventative Maintenance" sorted by date.
• Machine Fleet (/machines):
  • A dense, fast-scanning table mapping all mockMachines. Columns: ID (Mono font, amber), Name, Status (styled pill: green/amber/red), Health (visual width progress bar + score), Location, Next PM.
• Machine Detail (/machines/:id):
  • Header: Machine name, location, and a button to jump to the AI repair assistant.
  • Active Alerts banner (if any exist on the machine).
  • Telemetry: Use Recharts to draw two charts (LineChart for Vibration, AreaChart with a gradient fill for Temperature). The tooltips and axes MUST use the JetBrains Mono font.
  • Sidebar: Machine profile stats and a chronological vertical timeline of the Service History.