Amana Industries – Factory Dashboard (Next.js)

An interactive, mobile‑responsive dashboard for the fictitious textile company Amana Industries. It visualizes factory locations in Jordan and Egypt on a Leaflet map with detailed popups and status‑based markers, using Tailwind CSS for styling.

Features

• Interactive Leaflet map with markers and popups
• Status‑based marker colors (green: operational, red: maintenance)
• Mobile‑first layout with Tailwind CSS v4
• Local JSON dataset for reliable offline development
• Simple top navigation and footer

Tech Stack

• Next.js 15
• React 19
• Tailwind CSS 4
• Leaflet + React‑Leaflet

Project Structure

app/
├── components/
│   └── FactoryMap.tsx
├── data/
│   └── factories.json
├── globals.css
├── layout.tsx
└── page.tsx

Getting Started

1. Install dependencies

npm install

2. Run the dev server

npm run dev

Open http://localhost:3000.

Scripts

• npm run dev: Start development server (Turbopack)
• npm run build: Production build (Turbopack)
• npm run start: Start prod server

Data

• Source: app/data/factories.json
• The main page (app/page.tsx) loads this JSON at runtime. Update this file to change factories, locations, or status.

Map Notes

• The FactoryMap component is dynamically imported to avoid SSR issues with Leaflet.
• Tile source: OpenStreetMap. Ensure network access to tile servers during development.

Troubleshooting

• If markers don’t appear, confirm Leaflet CSS is loaded by FactoryMap.tsx and network access to icon URLs is allowed.
• On Windows/PowerShell, use Set-ExecutionPolicy -Scope Process Bypass if you hit script policy issues when running tools.
• If Tailwind classes don’t apply, verify postcss.config.mjs includes @tailwindcss/postcss and app/globals.css is imported in app/layout.tsx.

License

For educational/demo use.