Untitled

import { useState } from "react"; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input";

export default function WaterBusinessDemo() { const [customers, setCustomers] = useState([ { id: 1, name: "Rahim", contact: "017XXXXXXXX", taken: 3, returned: 2 }, { id: 2, name: "Karim", contact: "018XXXXXXXX", taken: 5, returned: 4 }, ]);

const [search, setSearch] = useState(""); const filtered = customers.filter( (c) => c.name.toLowerCase().includes(search.toLowerCase()) || c.contact.includes(search) );

return ( <div className="p-6 max-w-3xl mx-auto space-y-6"> <h1 className="text-2xl font-bold text-center">💧 Water Business Manager</h1>

{/* Search */}
  <div className="flex gap-2">
    <Input
      placeholder="Search by name or contact..."
      value={search}
      onChange={(e) => setSearch(e.target.value)}
    />
  </div>

  {/* Customers */}
  <div className="grid gap-4">
    {filtered.map((c) => (
      <Card key={c.id} className="shadow-md">
        <CardContent className="p-4">
          <p className="font-semibold">{c.name}</p>
          <p>📞 {c.contact}</p>
          <p>🛒 Taken: {c.taken} jars</p>
          <p>♻️ Returned: {c.returned} jars</p>
          <p className="font-bold text-blue-600">
            Balance: {c.taken - c.returned} jars
          </p>
        </CardContent>
      </Card>
    ))}
  </div>

  {/* Add Customer */}
  <Card className="shadow-md">
    <CardContent className="p-4 space-y-3">
      <p className="font-semibold">➕ Add New Customer (Demo)</p>
      <Input placeholder="Name" disabled />
      <Input placeholder="Contact Number" disabled />
      <Input placeholder="Jars Taken" disabled />
      <Input placeholder="Jars Returned" disabled />
      <Button disabled>Add</Button>
    </CardContent>
  </Card>
</div>

); }