code

import React, { useState, useEffect } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Bell, Box, PlusCircle, Trash, Cloud, Settings, RefreshCw } from "lucide-react";
import axios from "axios";

const InventoryApp = () => {
  const [inventory, setInventory] = useState([]);
  const [newItem, setNewItem] = useState("");
  const [newQuantity, setNewQuantity] = useState("");
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    fetchInventory();
  }, []);

  const fetchInventory = async () => {
    setLoading(true);
    try {
      const response = await axios.get("https://api.example.com/inventory");
      setInventory(response.data);
    } catch (error) {
      console.error("Error fetching inventory", error);
    }
    setLoading(false);
  };

  const addItem = async () => {
    if (newItem && newQuantity) {
      const newItemObj = { name: newItem, quantity: Number(newQuantity), threshold: 5 };
      try {
        await axios.post("https://api.example.com/inventory", newItemObj);
        fetchInventory();
        setNewItem("");
        setNewQuantity("");
      } catch (error) {
        console.error("Error adding item", error);
      }
    }
  };

  const removeItem = async (id) => {
    try {
      await axios.delete(`https://api.example.com/inventory/${id}`);
      fetchInventory();
    } catch (error) {
      console.error("Error removing item", error);
    }
  };

  return (
    <div className="p-6 max-w-lg mx-auto bg-white rounded-lg shadow-md">
      <h1 className="text-3xl font-bold mb-4 text-center text-blue-600">Inventory Dashboard</h1>
      
      <Card className="mb-4">
        <CardContent className="flex justify-between items-center p-4">
          <div>
            <h2 className="text-lg font-semibold">Total Stock</h2>
            <p className="text-gray-600">{inventory.reduce((sum, item) => sum + item.quantity, 0)} Items</p>
          </div>
          <Box size={28} className="text-blue-500" />
        </CardContent>
      </Card>
      
      <Card className="mb-4">
        <CardContent className="flex justify-between items-center p-4">
          <div>
            <h2 className="text-lg font-semibold">Low Stock Alerts</h2>
            <p className="text-red-600">{inventory.filter(item => item.quantity < item.threshold).length} Items need restocking</p>
          </div>
          <Bell size={28} className="text-red-500" />
        </CardContent>
      </Card>
      
      <Card className="mb-4">
        <CardContent className="p-4">
          <h2 className="text-lg font-semibold mb-2">Inventory List</h2>
          {loading ? <p>Loading inventory...</p> : (
            inventory.map(item => (
              <div key={item.id} className="flex justify-between border-b py-2 items-center">
                <span>{item.name} ({item.quantity})</span>
                <div className="flex items-center">
                  {item.quantity < item.threshold && <span className="text-red-500 mr-2">Low</span>}
                  <Button variant="ghost" size="icon" onClick={() => removeItem(item.id)}>
                    <Trash size={18} className="text-gray-500 hover:text-red-500" />
                  </Button>
                </div>
              </div>
            ))
          )}
        </CardContent>
      </Card>
      
      <div className="mb-4">
        <Input placeholder="Item Name" value={newItem} onChange={(e) => setNewItem(e.target.value)} className="mb-2" />
        <Input placeholder="Quantity" type="number" value={newQuantity} onChange={(e) => setNewQuantity(e.target.value)} className="mb-2" />
        <Button onClick={addItem} className="w-full flex items-center justify-center bg-blue-600 text-white hover:bg-blue-700">
          <PlusCircle className="mr-2" /> Add New Item
        </Button>
      </div>
      
      <div className="text-center mt-4 space-x-2">
        <Button variant="outline" className="flex items-center justify-center text-blue-600 border-blue-600 hover:bg-blue-100">
          <Cloud className="mr-2" /> Sync with Cloud
        </Button>
        <Button variant="outline" className="flex items-center justify-center text-gray-600 border-gray-600 hover:bg-gray-100" onClick={fetchInventory}>
          <RefreshCw className="mr-2" /> Refresh Data
        </Button>
        <Button variant="outline" className="flex items-center justify-center text-green-600 border-green-600 hover:bg-green-100">
          <Settings className="mr-2" /> Settings
        </Button>
      </div>
    </div>
  );
};

export default InventoryApp;