Add vehicle tracking features with Leaflet and Tailwind CSS integration

package.json

@@ -6,8 +6,10 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "leaflet": "^1.9.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-leaflet": "^4.2.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
@@ -34,5 +36,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.14"
   }
 }

src/App.jsx

@@ -0,0 +1,16 @@
+// src/App.js
+import React from 'react';
+import InventoryDashboard from './components/InventoryDashboard';
+import VehicleMap from './components/VehicleMap';
+
+function App() {
+  return (
+    <div className="App">
+      <InventoryDashboard />
+      <h1>Vehicle Tracking</h1>
+      <VehicleMap vehicleId="vehicle_1" />
+    </div>
+  );
+}
+
+export default App;

src/components/InventoryDashboard.jsx

@@ -0,0 +1,46 @@
+import React, { useEffect, useState } from 'react';
+
+function InventoryDashboard() {
+  const [inventory, setInventory] = useState([]);
+
+  useEffect(() => {
+    // Fetch inventory data on component mount
+    fetch('http://localhost:8000/api/inventory')
+      .then(response => response.json())
+      .then(data => setInventory(data))
+      .catch(error => console.error('Error fetching inventory:', error));
+  }, []);
+
+  const updateStock = (itemId, quantity) => {
+    fetch('http://localhost:8000/api/inventory/update', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ item_id: itemId, quantity: quantity })
+    })
+    .then(response => response.json())
+    .then(data => {
+      console.log(data.message);
+      setInventory(inventory.map(item => 
+        item.id === itemId ? { ...item, stock_level: item.stock_level + quantity } : item
+      ));
+    })
+    .catch(error => console.error('Error updating stock:', error));
+  };
+
+  return (
+    <div>
+      <h2>Inventory Dashboard</h2>
+      <ul>
+        {inventory.map(item => (
+          <li key={item.id}>
+            {item.item_name} - Stock: {item.stock_level}
+            <button onClick={() => updateStock(item.id, 1)}>Add Stock</button>
+            <button onClick={() => updateStock(item.id, -1)}>Remove Stock</button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export default InventoryDashboard;

src/components/ScanSimulator.jsx

@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+
+function ScanSimulator({ itemId }) {
+  const [message, setMessage] = useState("");
+
+  const simulateScan = () => {
+    fetch(`http://localhost:8000/api/scan`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ item_id: itemId })
+    })
+    .then(response => response.json())
+    .then(data => setMessage(data.message))
+    .catch(error => console.error('Error simulating scan:', error));
+  };
+
+  return (
+    <div>
+      <button onClick={simulateScan}>Simulate Scan</button>
+      {message && <p>{message}</p>}
+    </div>
+  );
+}
+
+export default ScanSimulator;

src/components/VehicleMap.jsx

@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from 'react';
+import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
+import 'leaflet/dist/leaflet.css';
+
+function VehicleMap({ vehicleId }) {
+  const [location, setLocation] = useState(null);
+
+  useEffect(() => {
+    const fetchLocation = () => {
+      fetch(`http://localhost:8000/gps/update`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ vehicle_id: vehicleId })
+      })
+        .then(response => response.json())
+        .then(data => setLocation(data.location))
+        .catch(error => console.error("Error fetching location:", error));
+    };
+
+    const intervalId = setInterval(fetchLocation, 5000);
+    return () => clearInterval(intervalId);
+  }, [vehicleId]);
+
+  if (!location) return <p>Loading vehicle location...</p>;
+
+  return (
+    <MapContainer center={[location.lat, location.lon]} zoom={13} style={{ height: "400px", width: "100%" }}>
+      <TileLayer
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+      />
+      <Marker position={[location.lat, location.lon]}>
+        <Popup>
+          Vehicle {vehicleId} is here.
+        </Popup>
+      </Marker>
+    </MapContainer>
+  );
+}
+
+export default VehicleMap;

src/index.css

@@ -1,13 +1,3 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+