"use client"; import { useState } from "react"; import { Heart, Users, Shield, Clock, Upload, Download, Edit, Plus, Check, X } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Card, CardContent } from "@/components/ui/card"; import { Textarea } from "@/components/ui/textarea"; type UserRole = "donor" | "ngo" | "volunteer" | "shelter" | "public" | null; type Screen = "home" | "login" | "dashboard"; interface FormData { hotelLicense?: string; quantity?: string; foodType?: string; location?: string; documents?: string[]; idProof?: string; drivingLicense?: string; orphanageLicense?: string; sector?: "funds" | "groceries" | "clothes"; } export default function ServeNShareApp() { const [currentScreen, setCurrentScreen] = useState("home"); const [selectedRole, setSelectedRole] = useState(null); const [formData, setFormData] = useState({}); const [isLoggedIn, setIsLoggedIn] = useState(false); const handleRoleSelect = (role: UserRole) => { setSelectedRole(role); setCurrentScreen("login"); }; const handleLogin = () => { setIsLoggedIn(true); setCurrentScreen("dashboard"); }; const handleBack = () => { if (currentScreen === "login") { setCurrentScreen("home"); setSelectedRole(null); } else if (currentScreen === "dashboard") { setCurrentScreen("home"); setSelectedRole(null); setIsLoggedIn(false); } }; const handleInputChange = (field: keyof FormData, value: string) => { setFormData(prev => ({ ...prev, [field]: value })); }; const renderHomeScreen = () => (

{/* Header with search bar */}

ServeNShare

{/* Logo and tagline */}

ServeNShare

Share with Serve with purpose

{/* Role cards */}

Join as

} onClick={() => handleRoleSelect("donor")} /> } onClick={() => handleRoleSelect("ngo")} /> } onClick={() => handleRoleSelect("volunteer")} /> } onClick={() => handleRoleSelect("shelter")} />

} onClick={() => handleRoleSelect("public")} />

); const renderLoginScreen = () => (

ServeNShare

{selectedRole === "donor" && } {selectedRole === "ngo" && } {selectedRole === "volunteer" && } {selectedRole === "shelter" && } {selectedRole === "public" && }

{selectedRole} Login

Enter your details to continue

Email or Phone

); const renderDashboard = () => { switch (selectedRole) { case "donor": return ; case "ngo": return ; case "volunteer": return ; case "shelter": return ; case "public": return ; default: return

Dashboard not found

; } }; return (

{currentScreen === "home" && renderHomeScreen()} {currentScreen === "login" && renderLoginScreen()} {currentScreen === "dashboard" && (

{selectedRole} Dashboard

{renderDashboard()}

)}

); } // Role Card Component const RoleCard = ({ title, icon, onClick }: { title: string; icon: React.ReactNode; onClick: () => void }) => (

{icon}

{title}

); // Donor Dashboard Component const DonorDashboard = ({ formData, onInputChange }: { formData: FormData; onInputChange: (field: keyof FormData, value: string) => void }) => (

Donation Details

Hotel License onInputChange("hotelLicense", e.target.value)} placeholder="Enter license number" />

Quantity onInputChange("quantity", e.target.value)} placeholder="Enter quantity" />

Food Type onInputChange("foodType", e.target.value)} placeholder="Enter food type" />

Location onInputChange("location", e.target.value)} placeholder="Enter pickup location" />

Recent Donations

{[1, 2, 3].map((item) => (

Food Donation #{item}

2 hours ago

Completed

))}

); // NGO Dashboard Component const NGODashboard = ({ formData, onInputChange }: { formData: FormData; onInputChange: (field: keyof FormData, value: string) => void }) => (

Documents

ID Proof

onInputChange("idProof", e.target.value)} placeholder="Upload ID proof" className="flex-1" />

Driving License

onInputChange("drivingLicense", e.target.value)} placeholder="Upload driving license" className="flex-1" />

Points & Certificates

Total Points 1,250

Certificates Earned 5

Notifications

New food donation available

2 hours ago

Donation pickup completed

Yesterday

); // Volunteer Dashboard Component const VolunteerDashboard = ({ formData, onInputChange }: { formData: FormData; onInputChange: (field: keyof FormData, value: string) => void }) => (

Required Documents

ID Proof

onInputChange("idProof", e.target.value)} placeholder="Upload ID proof" className="flex-1" />

Driving License

onInputChange("drivingLicense", e.target.value)} placeholder="Upload driving license" className="flex-1" />

Points & Certificates

Total Points 850

Certificates Earned 3

Notifications

Pickup scheduled for tomorrow

3 hours ago

Donation delivered successfully

2 days ago

); // Shelter Dashboard Component const ShelterDashboard = ({ formData, onInputChange }: { formData: FormData; onInputChange: (field: keyof FormData, value: string) => void }) => (

Orphanage License

License Verification

onInputChange("orphanageLicense", e.target.value)} placeholder="Enter license number" className="flex-1" />

Request Supplies

Request Type

Details

</div>
          
          <Button className="w-full bg-orange-500 hover:bg-orange-600 text-white">
            Submit Request
          </Button>
        </div>
      </CardContent>
    </Card>
    
    <Card>
      <CardContent className="p-4">
        <h3 className="font-bold text-lg mb-2">Notifications</h3>
        <div className="space-y-3">
          <div className="flex items-start">
            <div className="bg-green-100 p-2 rounded-full mr-3">
              <Check className="text-green-500 w-4 h-4" />
            </div>
            <div>
              <p className="font-medium">Food donation received</p>
              <p className="text-sm text-gray-500">1 day ago</p>
            </div>
          </div>
          <div className="flex items-start">
            <div className="bg-orange-100 p-2 rounded-full mr-3">
              <Clock className="text-orange-500 w-4 h-4" />
            </div>
            <div>
              <p className="font-medium">New volunteer assigned</p>
              <p className="text-sm text-gray-500">2 days ago</p>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  </div>
);

// Public Dashboard Component
const PublicDashboard = ({ formData, onInputChange }: { formData: FormData; onInputChange: (field: keyof FormData, value: string) => void }) => (
  <div className="p-4 space-y-6">
    <h2 className="text-xl font-bold">How would you like to contribute?</h2>
    
    <div className="grid grid-cols-3 gap-4">
      <SectorCard 
        title="Funds" 
        icon={<Download className="text-green-500 w-6 h-6" />} 
        active={formData.sector === "funds"}
        onClick={() => onInputChange("sector", "funds")}
      />
      <SectorCard 
        title="Groceries" 
        icon={<Heart className="text-green-500 w-6 h-6" />} 
        active={formData.sector === "groceries"}
        onClick={() => onInputChange("sector", "groceries")}
      />
      <SectorCard 
        title="Clothes" 
        icon={<Users className="text-green-500 w-6 h-6" />} 
        active={formData.sector === "clothes"}
        onClick={() => onInputChange("sector", "clothes")}
      />
    </div>
    
    {formData.sector && (
      <Card>
        <CardContent className="p-4">
          <h3 className="font-bold text-lg mb-4 capitalize">
            {formData.sector} Contribution
          </h3>
          
          {formData.sector === "funds" && (
            <div className="space-y-4">
              <div>
                <Label htmlFor="amount">Amount (₹)</Label>
                <Input id="amount" type="number" placeholder="Enter amount" />
              </div>
              <Button className="w-full bg-orange-500 hover:bg-orange-600 text-white">
                Donate Funds
              </Button>
            </div>
          )}
          
          {formData.sector === "groceries" && (
            <div className="space-y-4">
              <div>
                <Label htmlFor="groceryList">Grocery List</Label>
                <Textarea 
                  id="groceryList" 
                  placeholder="List items you want to donate..." 
                  className="min-h-[100px]"
                />
              </div>
              <Button className="w-full bg-orange-500 hover:bg-orange-600 text-white">
                Donate Groceries
              </Button>
            </div>
          )}
          
          {formData.sector === "clothes" && (
            <div className="space-y-4">
              <div>
                <Label htmlFor="clothesList">Clothes Description</Label>
                <Textarea 
                  id="clothesList" 
                  placeholder="Describe clothes you want to donate..." 
                  className="min-h-[100px]"
                />
              </div>
              <Button className="w-full bg-orange-500 hover:bg-orange-600 text-white">
                Donate Clothes
              </Button>
            </div>
          )}
        </CardContent>
      </Card>
    )}
    
    <Card>
      <CardContent className="p-4">
        <h3 className="font-bold text-lg mb-2">Recent Contributions</h3>
        <div className="space-y-3">
          <div className="flex items-center justify-between border-b pb-3">
            <div>
              <p className="font-medium">₹500 donated to NGO</p>
              <p className="text-sm text-gray-500">3 days ago</p>
            </div>
            <div className="flex items-center">
              <Check className="text-green-500 w-5 h-5 mr-1" />
              <span className="text-green-500 text-sm">Completed</span>
            </div>
          </div>
          <div className="flex items-center justify-between border-b pb-3">
            <div>
              <p className="font-medium">Clothes donated to shelter</p>
              <p className="text-sm text-gray-500">1 week ago</p>
            </div>
            <div className="flex items-center">
              <Check className="text-green-500 w-5 h-5 mr-1" />
              <span className="text-green-500 text-sm">Completed</span>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  </div>
);

// Sector Card Component
const SectorCard = ({ title, icon, active, onClick }: { 
  title: string; 
  icon: React.ReactNode; 
  active: boolean;
  onClick: () => void;
}) => (
  <Card 
    className={`border-2 rounded-2xl cursor-pointer transition-all ${active ? 'border-orange-500 bg-orange-50' : 'border-gray-200'}`}
    onClick={onClick}
  >
    <CardContent className="p-4 flex flex-col items-center">
      <div className={`w-10 h-10 rounded-full flex items-center justify-center mb-2 ${active ? 'bg-orange-100' : 'bg-gray-100'}`}>
        {icon}
      </div>
      <h3 className="font-medium text-gray-800 text-sm">{title}</h3>
    </CardContent>
  </Card>
);

// Icon Components
const SearchIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="11" cy="11" r="8"></circle>
    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
  </svg>
);

const ArrowLeftIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <line x1="19" y1="12" x2="5" y2="12"></line>
    <polyline points="12 19 5 12 12 5"></polyline>
  </svg>
);

const Home = ({ className }: { className?: string }) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
    <polyline points="9 22 9 12 15 12 15 22"></polyline>
  </svg>
);</article></body></html>