# Project export: Elevate

This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small.

## Project metadata

- Hackathon: Cal Hacks 11.0
- Tagline: Empowering Homelessness Through Community Crowdfunding and Prioritisation
- Devpost: https://devpost.com/software/elevate-pklvrh
- GitHub: https://github.com/coderkai03/Elevate
- Demo: https://github.com/cyu60/elevate-scout
- Video: https://www.youtube.com/embed/rRNFLokXTk8?enablejsapi=1&hl=en_US&rel=0&start=&version=3&wmode=transparent
- Team: 4 GitHub contributor(s) — Aurelia Sindhu (16 commits), Riankai1073 (12 commits), Aurelisa Sindhunirmala (11 commits), cyu60 (3 commits)

## Devpost submission (written by the team)

### Inspiration

🌟 Homelessness remains a growing and complex challenge across U.S. cities, with over 7,200 individuals experiencing homelessness in San Francisco alone in 2024. Family homelessness has risen by a staggering 94% since 2022. This pressing issue inspired us to create Elevate, a platform that goes beyond traditional solutions, offering a direct, transparent, and human-centered approach to addressing homelessness.

### What it does

💡 Elevate is a crowdfunding platform that connects donors with homeless individuals through personalized profiles and storytelling. Sponsors advocate for individuals, raise funds for essential needs, and provide ongoing updates to ensure transparency and accountability, empowering both donors and homeless individuals to create meaningful, lasting change.

### How we built it

🔧 Frontend: NextJS, Tailwind CSS, Shadcn Backend: Typescript API Integrations: Gemini (case creation), Hume AI (user communication), Singlestore (data storage), Groq (real-time image descriptions), Google Maps (location services)

### Challenges we ran into

🚧 One of the biggest challenges we faced was ensuring transparency and accountability for sponsors managing funds. We had to build a robust system for tracking donations, spending, and progress updates, while also balancing the privacy and dignity of the homeless individuals featured on the platform. Additionally, integrating various APIs seamlessly into the platform posed technical difficulties, particularly in handling real-time updates efficiently.

### Accomplishments we're proud of

🏆 We’re incredibly proud of creating a platform that personalizes the homelessness experience, giving a voice to individuals through their stories and enabling real-time impact updates. Our integration of AI technologies for storytelling and real-time image descriptions also makes Elevate more dynamic and accessible, offering transparency at every step. Launching a pilot in San Francisco, one of the hardest-hit cities, was a major milestone for us.

### What we learned

📚 We learned that personal stories and community engagement can have a profound impact on raising awareness and support for homelessness. We also gained valuable insights into how to build systems that ensure trust and transparency, which are crucial when managing donations and helping vulnerable populations. Most importantly, we discovered the power of collaboration with local organizations, social workers, and volunteers to amplify our mission.

### What's next

🚀 Next, we plan to expand Elevate to other cities facing homelessness crises, growing our network of sponsors and local partners. We aim to automate parts of the profile creation and update processes to scale the platform efficiently. We’re also looking into AI-driven solutions to improve donor-sponsor communication, ensuring that every donation continues to make a visible and impactful difference.

## README (from the GitHub repository)

# Elevate: Empowering Homeless Individuals through Community Support and Crowdfunding

## Project Overview

Elevate is an innovative crowdfunding platform designed to bridge the gap between donors and homeless individuals by fostering direct, transparent relationships. Our mission is to provide personalized support, enable accountability and transparency, and build community engagement to address the homelessness crisis.

This project was developed for Cal Hacks, leveraging Hume AI for emotion analysis and SingleStore for efficient data management.

## The Problem

Homelessness remains a persistent and complex challenge in cities across the U.S. As of 2024:
- Approximately 7,200 individuals experience homelessness in San Francisco
- Family homelessness has increased by 94% since 2022
- Over 580,000 people experience homelessness on any given night in the United States

Traditional solutions have not kept pace with the inflow of new individuals and families becoming homeless.

## Our Solution

Elevate provides a platform for social workers, volunteers, or community members to become sponsors of homeless individuals, sharing their stories, advocating on their behalf, and raising funds to support their transition out of homelessness.

### Key Features

1. **Personalized Profiles**: Each homeless individual has a dedicated profile including:
   - Photo
   - Audio story (analyzed by Hume AI for emotion insights)
   - Written transcript/blog

2. **Sponsorship and Fundraising**: Crowdfunding pages for essential needs (shelter, clothing, food, healthcare)

3. **Impact Updates**: Regular updates on tangible results and progress

4. **Community Sharing**: Easy social media sharing and progress tracking for donors

5. **Emotion Analysis**: Utilizing Hume AI to analyze audio stories for deeper emotional understanding

6. **Efficient Data Management**: Powered by SingleStore for fast, scalable data processing

## Technology Stack

- **Hume AI**: For emotion analysis of audio stories, providing deeper insights into individuals' experiences
- **SingleStore**: High-performance database for efficient data management and quick retrieval
- [Other technologies used in the project]

## Implementation Plan

1. **Initial Launch**: Pilot program in San Francisco
2. **Platform Development**: User-friendly profiles with integrated payment processing
3. **Partnerships**: Collaboration with local non-profits, shelters, and government agencies
4. **Growth and Expansion**: Scale to other cities facing similar challenges

## Potential Challenges and Mitigations

- **Privacy and Consent**: Implement robust consent and data protection measures
- **Sponsor Accountability**: Require proof of spending and regular updates
- **Scalability**: Leverage SingleStore for efficient data handling as the platform grows

## Acknowledgments

This project was developed for Cal Hacks. Special thanks to Hume AI and SingleStore for providing the technology that makes Elevate possible.


## Detected evidence (automated analysis)

Indexed codebase: 50 recognized source files, 354 KB.
- CSS (language) — detected in the code
- Google Gemini (technology) — detected in the code
- Next.js (technology) — detected in the code
- React (technology) — detected in the code
- Tailwind CSS (technology) — detected in the code
- TypeScript (language) — detected in the code

## Codebase structure (from repository index)

### Files (54 of 54)

```
.gitignore
app/AllyView/page.tsx
app/api/hume-token/route.ts
app/demo/page.tsx
app/error.tsx
app/globals.css
app/home/page.tsx
app/layout.tsx
app/models/Task.ts
app/page.tsx
app/profile/[id]/page.tsx
app/task-manager/[id]/page.tsx
app/test/actions/caseActions.ts
app/test/page.tsx
app/view/[id]/page.tsx
components.json
components/Chat.tsx
components/Controls.tsx
components/Dashboard.tsx
components/Expressions.tsx
components/Home.tsx
components/HumeChatComponent.tsx
components/logos/GitHub.tsx
components/logos/Hume.tsx
components/LogOut.tsx
components/Messages.tsx
components/MicFFT.tsx
components/Nav.tsx
components/payment-popup.tsx
components/ProfileCard.tsx
components/Profiles.tsx
components/Settings.tsx
components/SidebarAlly.tsx
components/SidebarDemo.tsx
components/StartCall.tsx
components/TaskManager.tsx
components/ui/button.tsx
components/ui/dialog.tsx
components/ui/input.tsx
components/ui/label.tsx
components/ui/popover.tsx
components/ui/toggle.tsx
next-env.d.ts
package.json
postcss.config.mjs
prebuild.ts
README.md
tailwind.config.ts
tsconfig.json
utils/expressionColors.ts
utils/expressionLabels.ts
utils/getHumeAccessToken.ts
utils/index.ts
utils/singleStore.ts
```

### Dependencies

- package.json: @google/generative-ai@^0.21.0, @humeai/voice-react@^0.1.15, @next/env@^14.2.15, @radix-ui/react-dialog@^1.1.2, @radix-ui/react-label@^2.1.0, @radix-ui/react-popover@^1.1.2, @radix-ui/react-slot@^1.1.0, @radix-ui/react-switch@^1.0.3, @radix-ui/react-toggle@^1.0.3, @singlestore/ai@^0.0.32, @singlestore/client@^0.0.41, @types/node@^20, @types/react@^18, @types/react-dom@^18, @types/react-virtualized@^9.21.30, class-variance-authority@^0.7.0, clsx@^2.1.1, eslint@^8, eslint-config-next@14.2.3, framer-motion@^11.2.10, geist@^1.3.0, hume@^0.8.10, lucide-react@^0.394.0, next@^14.2.15, postcss@^8, react@^18, react-dom@^18, react-simple-typewriter@^5.0.1, react-virtualized@^9.22.5, remeda@^2.0.9, server-only@^0.0.1, shadcn-ui@^0.2.3, tailwind-merge@^2.3.0, tailwindcss@^3.4.1, tailwindcss-animate@^1.0.7, ts-node@^10.9.2, ts-pattern@^5.1.2, tsx@^4.19.1, typescript@^5.6.3

### Recent commits (newest first)

- gradient at sidenav
- fixed shit
- Merge branch 'main' of https://github.com/coderkai03/empathic-voice-interface-starter
- update page
- added profile overview on ally view
- updated emotion labels
- updated element
- updated element
- updated sidebar ally
- connected mock tasks to jira
- personal task manager
- connected more profile info
- connected profile info from db
- resolved conflicts
- fixed dashboard map markers
- most updated working product
- updated messages with emojis
- fixed small details
- latest working version
- latest update

## Key source files (fetched from GitHub, selected and truncated for size)

### package.json

```
{
  "name": "elevate",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "prebuild": "tsx prebuild.ts",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@google/generative-ai": "^0.21.0",
    "@humeai/voice-react": "^0.1.15",
    "@next/env": "^14.2.15",
    "@radix-ui/react-dialog": "^1.1.2",
    "@radix-ui/react-label": "^2.1.0",
    "@radix-ui/react-popover": "^1.1.2",
    "@radix-ui/react-slot": "^1.1.0",
    "@radix-ui/react-switch": "^1.0.3",
    "@radix-ui/react-toggle": "^1.0.3",
    "@singlestore/ai": "^0.0.32",
    "@singlestore/client": "^0.0.41",
    "@types/react-virtualized": "^9.21.30",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "framer-motion": "^11.2.10",
    "geist": "^1.3.0",
    "hume": "^0.8.10",
    "lucide-react": "^0.394.0",
    "next": "^14.2.15",
    "react": "^18",
    "react-dom": "^18",
    "react-simple-typewriter": "^5.0.1",
    "react-virtualized": "^9.22.5",
    "remeda": "^2.0.9",
    "server-only": "^0.0.1",
    "shadcn-ui": "^0.2.3",
    "tailwind-merge": "^2.3.0",
    "tailwindcss-animate": "^1.0.7",
    "ts-pattern": "^5.1.2"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.3",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "ts-node": "^10.9.2",
    "tsx": "^4.19.1",
    "typescript": "^5.6.3"
  }
}

```

### utils/index.ts

```typescript
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

```

### app/page.tsx

```typescript
import Home from '@/components/Home';  // Add this import at the top of the file

export default async function Page() {
  // const accessToken = await getHumeAccessToken();

  // if (!accessToken) {
  //   throw new Error("Failed to get access token");
  // }

  return (
    <div className="grow flex flex-col">
      {/* <Chat accessToken={accessToken} /> */}
      <Home />
    </div>
  );
}

```

### app/layout.tsx

```typescript
import type { Metadata } from "next";
import { GeistSans } from "geist/font/sans";
import { GeistMono } from "geist/font/mono";
import "./globals.css";
import { Nav } from "@/components/Nav";
import { cn } from "@/utils";

export const metadata: Metadata = {
  title: "Elevate",
  // description: "A Next.js starter using Hume AI's Empathic Voice Interface",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={cn(
          GeistSans.variable,
          GeistMono.variable,
          "flex flex-col min-h-screen"
        )}
      >
        {/* <Nav /> */}
        {children}
      </body>
    </html>
  );
}

```

### app/demo/page.tsx

```typescript

"use client";

import { useState } from 'react';
import Dashboard from '@/components/Dashboard';
import Profiles from '@/components/Profiles';
import TaskManager from '@/components/TaskManager';
import dynamic from 'next/dynamic';
import Sidebar from '@/components/SidebarDemo';

// const HumeChatComponent = dynamic(() => import('@/components/HumeChatComponent'), {
//   ssr: false,
// });

export default function MainLayout() {
  const [activeLink, setActiveLink] = useState('Dashboard');

  const renderContent = () => {
    switch (activeLink) {
      case 'Dashboard':
        return <Dashboard />;
      case 'Profiles':
        return <Profiles />;
      case 'Task Manager':
        return <TaskManager />;
    //   case 'New Case':
    //     return <HumeChatComponent />;
      default:
        return <div>Select a valid option</div>;
    }
  };

  return (
    <div className="flex">
      {/* Sidebar */}
      <Sidebar activeLink={activeLink} setActiveLink={setActiveLink} />
      {/* Main Content Area */}
      <div
        className="flex-1 p-6"
        // style={{
        //   background: 'linear-gradient(to top, rgba(233, 135, 236, 0.3), rgba(150, 135, 236, 0.5), rgba(217, 217, 217, 0.2))',
        // }}
      >
        {renderContent()}
      </div>
    </div>
  );
}

```

### app/AllyView/page.tsx

```typescript
"use client";

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation'; // Correct import for Next.js navigation
import Sidebar from '@/components/SidebarAlly';
import Profiles from '@/components/Profiles';
import TaskManager from '@/components/TaskManager';
import dynamic from 'next/dynamic';
import Chat from '@/components/Chat';

export default function MainLayout() {
    const [activeLink, setActiveLink] = useState('Dashboard');
    const [accessToken, setAccessToken] = useState<string>("");
    const router = useRouter(); 

    useEffect(() => {
        const fetchAccessToken = async () => {
            try {
                const response = await fetch('/api/hume-token');
                const data = await response.json();
                if (response.ok) {
                    setAccessToken(data.accessToken);
                } else {
                    console.error('Failed to fetch Hume access token:', data.error);
                }
            } catch (error) {
                console.error('Error fetching Hume access token:', error);
            }
        };

        fetchAccessToken();
    }, []);

    const handleLogOut = () => {
        setActiveLink('LogOut');
        router.push('/'); 
    };

    const renderContent = () => {
        switch (activeLink) {
            case 'Profiles':
                return <Profiles />;
            case 'Task Manager':
                return <TaskManager />;
            case 'New Case':
                return accessToken ? <Chat accessToken={accessToken} /> : null;
            case 'LogOut':
                return null;
            default:
                return <Profiles />;
        }
    };

    return (
        <div className="flex h-screen overflow-hidden">
            {activeLink !== 'LogOut' && (
                <Sidebar activeLink={activeLink} setActiveLink={setActiveLink} />
            )}

            <div
                className="flex-1 p-6 overflow-y-auto"
                // style={{
                //     background:
                //         'linear-gradient(to top, rgba(233, 135, 236, 0.3), rgba(150, 135, 236, 0.5), rgba(217, 217, 217, 0.2))',
                // }}
            >
                {renderContent()}
            </div>
        </div>
    );
}

```

### app/home/page.tsx

```typescript
import Image from "next/image";
import Link from "next/link";
import bg from "@/public/pic/background1.png";
// import element from "@/public/pic/element2.png";
import logo from "@/public/pic/logo.png";

export default function Home() {
    return (
        <div 
            className="w-screen h-screen overflow-hidden"  
            style={{
                backgroundImage: `url(${bg.src})`,
                backgroundSize: 'cover',
                backgroundPosition: 'center',
            }}
        >

        <header className="container mx-auto px-4 py-6 flex items-center justify-between">
            <div className="flex items-center space-x-2">
            <Image src={logo} alt="logo" className="w-8 h-8 rounded-md" />
            <span className="text-2xl font-bold">Elevate</span>

            <nav className="hidden md:flex space-x-6 pl-8">
                <Link className="text-gray-600 hover:text-gray-900" href="#">
                About
                </Link>
                <Link className="text-gray-600 hover:text-gray-900" href="#">
                Features
                </Link>
                <Link className="text-gray-600 hover:text-gray-900" href="#">
                Pricing
                </Link>
                <Link className="text-[#9687EC] hover:text-[#3D364B]" href="#">
                Cases
                </Link>
            </nav>
            </div>

            <div className="flex items-center space-x-4">
            <button className="hidden md:block text-gray-600 hover:text-gray-900">Log In</button>
            <button className="bg-[#9687EC] text-white px-4 py-2 rounded-md hover:bg-[#3D364B] transition duration-300">
                Sign In
            </button>
            </div>
        </header>

            <main className="mx-auto h-full flex flex-col md:flex-row items-center px-0 pl-11">
                <div className="md:w-1/2 mb-8 md:mb-0 mt-[-100px]">
                    <h1 className="text-6xl md:text-6xl font-bold mb-4">
                        <span className="text-[#9687EC]">Empowering</span>
                        <br />
                        <span className="text-[#9687EC]">Homelessness</span>
                    </h1>
                    <h2 className="text-3xl md:text-6xl font-bold mb-6">
                        Through Community
                        <br />
                        Crowdfunding
                    </h2>
                    <div className="flex space-x-4">
                        <Link href="/demo">
                            <button className="bg-white text-gray-800 px-6 py-3 rounded-md hover:bg-gray-300 transition duration-100">
                                Try demo
                            </button>
                        </Link>
                        <button className="bg-[#9687EC] text-white px-6 py-3 rounded-md hover:bg-[#3D364B] transition duration-300 flex items-center">
                            Start now 
                            <span className="ml-2">›</span>
                        </button>
                    </div>
                    <div className="pt-4">
                        <Link href="/AllyView">
                            <p className="text-black hover:text-[#9687EC]">Sign in as Ally</p>
                        </Link>
                    </div>
                </div>

                <div className="md:w-1 flex justify-end items-center h-screen mt-[-100px]">
                    <Image src="/pic/element2.png" alt="element2" className="object-cover align-right h-full" />
                </div>
            </main>
        </div>
    );
}

```

### app/test/page.tsx

```typescript
"use client";

import { useState, useEffect } from "react";
import {
  createCase,
  getCases,
  getTasks,
  updateCase,
  updateTask,
} from "./actions/caseActions";
import { Button } from "@/components/ui/button";
import { Case, Task } from "@/utils/singleStore";
// import { Checkbox } from "@/components/ui/checkbox";

export const fetchUserData = async () => {
  const casesResult = await getCases();
  if (!casesResult.success) {
    console.log(casesResult.error);
    return { cases: [] };
  }

  // Fetch tasks for each case
      const tasksPromises =
        casesResult.cases?.map(async (caseItem) => {
          const tasksResult = await getTasks(caseItem.id);
          return {
            caseId: caseItem.id,
            tasks: tasksResult.success ? tasksResult.tasks : [],
          };
        }) ?? [];

      const tasksResults = await Promise.all(tasksPromises);
      const tasksMap = tasksResults.reduce<{ [caseId: number]: Task[] }>(
        (acc, { caseId, tasks }) => {
          if (tasks) {
            acc[caseId] = tasks;
          }
          return acc;
        },
        {}
      );

    return { casesResult, tasksMap };
};

export default function Page() {
  const [message, setMessage] = useState("");
  const [cases, setCases] = useState<Case[]>([]);
  const [caseTasks, setCaseTasks] = useState<{ [caseId: number]: Task[] }>({});
  const [editingCase, setEditingCase] = useState<Case | null>(null);

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

  const fetchCasesAndTasks = async () => {
    const { cases, tasksMap } = await fetchUserData();
    setCases(cases ?? []);
    setCaseTasks(tasksMap ?? {});
  };

  const handleTaskChange = async (task: Task, completed: boolean) => {
    const updatedTask = { ...task, completed };
    const result = await updateTask(updatedTask);
    if (result.success) {
      fetchCasesAndTasks();
    } else {
      setMessage(result.error || "Error updating task. Please try again.");
    }
  };

  const handleEditCase = (caseItem: Case) => {
    setEditingCase(caseItem);
  };

  const handleUpdateCase = async () => {
    if (editingCase) {
      const result = await updateCase(editingCase);
      if (result.success) {
        setMessage("Case updated successfully!");
        setEditingCase(null);
        fetchCasesAndTasks();
      } else {
        setMessage(result.error || "Error updating case. Please try again.");
      }
    }
  };

  const handleCreateNewCase = async () => {
    const newCase = {
      name: "John Doe",
      age: 20,
      gender: "Male",
      location: "New York, NY",
      profile_description: "This is a sample case created from the test page.",
      image_link: "https://example.com/sample-image.jpg",
      donation_amount: 0,
      tasks: [
        {
          id: Math.floor(Math.random() * 1000000),
          case_id: 0, // This will be updated when the case is created
          name: "Initial Assessment",
          description: "Conduct an initial assessment of John Doe's situation.",
          completed: false,
          createdAt: new Date(),
          updatedAt: new Date(),
        },
        {
          id: Math.floor(Math.random() * 1000000),
          case_id: 0, // This will be updated when the case is created
          name: "Create Support Plan",
          description: "Develop a comprehensive support plan for John Doe.",
          completed: false,
          createdAt: new Date(),
          updatedAt: new Date(),
        },
        {
          id: Math.floor(Math.random() * 1000000),
          case_id: 0, // This will be updated when the case is created
          name: "Follow-up Meeting",
          description:
            "Schedule and conduct a follow-up meeting with John Doe.",
          completed: false,
          createdAt: new Date(),
          updatedAt: new Date(),
        },
      ],
    };

    const result = await createCase(newCase);

    if (result.success) {
      setMessage(`New case created successfully! Case ID: ${result.caseId}`);
      fetchCasesAndTasks(); // Refresh the list after creating a new case
    } else {
      setMessage(result.error || "Error creating new case. Please try again.");
    }
  };

  return (
    <div className="mx-auto max-w-3xl">
      <Button onClick={handleCreateNewCase}>Create New Case</Button>
      {message && <p>{message}</p>}

      <h2>Cases List</h2>
      <ul>
        {cases.map((caseItem) => (
          <li key={caseItem.id}>
            {editingCase?.id === caseItem.id ? (
              <div>
                <input
                  value={editingCase.name}
                  onChange={(e) =>
                    setEditingCase({ ...editingCase, name: e.target.value })
                  }
                />
                <input
                  value={editingCase.age}
                  onChange={(e) =>
                    setEditingCase({
                      ...editingCase,
                      age: parseInt(e.target.value),
                    })
                  }
                />
                <input
                  value={editingCase.location}
                  onChange={(e) =>
                    setEditingCase({ ...editingCase, location: e.target.value })
                  }
                />
                <textarea
                  value={editingCase.profile_description}
                  onChange={(e) =>
                    setEditingCase({
                      ...editingCase,
                      profile_description: e.target.value,
                    })
                  }
                />
                <Button onClick={handleUpdateCase}>Save</Button>
                <Button onClick={() => setEditingCase(null)}>Cancel</Button>
              </div>
            ) : (
              <div>
                <p>
                  {caseItem.name} - {caseItem.age} years old -{" "}
                  {caseItem.location}
                </p>
                <p>Description: {caseItem.profile_description}</p>
          
[truncated — 564 more characters]
```

### app/api/hume-token/route.ts

```typescript
import { NextResponse } from 'next/server';
import { getHumeAccessToken } from '@/utils/getHumeAccessToken';

export async function GET() {
  try {
    const accessToken = await getHumeAccessToken();
    
    if (!accessToken) {
      return NextResponse.json({ error: 'Failed to fetch access token' }, { status: 500 });
    }

    return NextResponse.json({ accessToken });
  } catch (error) {
    console.error('Error fetching Hume access token:', error);
    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
  }
}

```

### app/profile/[id]/page.tsx

```typescript
"use client"
import { useEffect, useState } from 'react'
import { Home, Users, ClipboardList, PlusCircle, Settings, LogOut } from 'lucide-react'
import Link from 'next/link'
import Image from 'next/image'
import Sidebar from '@/components/SidebarAlly';
import { fetchUserData } from '@/app/test/page'
import { useParams } from 'next/navigation';
import { profiles } from '@/components/Profiles';


// Progress bar component
interface ProgressBarProps {
    label: string;
    progress: number;
    color: string;
}

const ProgressBar = ({ label, progress, color }: ProgressBarProps) => (
    <div className="mb-4">
        <div className="flex justify-between mb-1">
        <span className="text-sm font-medium text-gray-700">{label}</span>
        <span className="text-sm font-medium text-gray-700">{progress}%</span>
        </div>
        <div className="w-full bg-gray-200 rounded-full h-2.5">
        <div
            className={`h-2.5 rounded-full ${color}`}
            style={{ width: `${progress}%` }}
        ></div>
        </div>
    </div>
)

interface Profile {
    name: string;
    gender: string;
    age: number;
    about: string;
}

// Main component
export default function ProfileOverview() {
    const { id } = useParams();
    const [profile, setProfile] = useState<Profile | null>(null)
    const [overallProgress, setOverallProgress] = useState(75)
    const [donationProgress, setDonationProgress] = useState(60)
    useEffect(() => {
        console.log(id)
        const selectedProfile = profiles[parseInt(id as string)-1];
        if (selectedProfile) {
            setProfile({
                name: selectedProfile.name,
                gender: selectedProfile.gender || '',
                age: selectedProfile.age,
                about: selectedProfile.about || ''
            });
        }
    }, [id]);

    if (!profile) {
        return <div>Loading...</div>;
    }

    return (
        <div className="flex h-screen bg-purple-50">
            <Sidebar activeLink="overview" setActiveLink={() => {}} />
            <main className="flex-1 p-8 overflow-auto">
                {/* Remove the progress bars from here */}
                <div className="flex justify-between items-start mb-8">
                <h2 className="text-4xl font-bold text-[#9687EC]">Overview</h2>
                </div>
                <div className="bg-white rounded-lg shadow-md overflow-hidden">
                {/* Updated container */}
                <div className="bg-gradient-to-r from-blue-100 to-purple-100 p-6 flex items-center justify-between">
                    {/* Left side: Profile image and info */}
                    <div className="flex items-center space-x-6">
                    <Image
                        src="/placeholder.svg?height=128&width=128"
                        width={128}
                        height={128}
                        alt={profile?.name || 'Profile Picture'}
                        className="rounded-full"
                    />
                    <div>
                        <h3 className="text-2xl font-bold mb-2">{profile?.name}</h3>
                        <div className="flex space-x-4 mb-2">
                        <span className="bg-purple-200 text-[#9687EC] px-3 py-1 rounded-full text-sm">
                            Gender: {profile?.gender}
                        </span>
                        <span className="bg-purple-200 text-[#9687EC] px-3 py-1 rounded-full text-sm">
                            Age: {profile?.age}
                        </span>
                        </div>
                        <div className="space-x-4">
                        <button className="bg-[#9687EC] text-white text-sm px-4 py-2 rounded-md hover:bg-purple-700 transition duration-300">
                            Edit Profile
                        </button>
                        <button className="border border-gray-300 text-sm px-4 py-2 rounded-md hover:bg-gray-100 transition duration-300">
                            Settings
                        </button>
                        </div>
                    </div>
                    </div>
                    {/* Right side: Progress bars */}
                    <div className="w-64">
                    <ProgressBar
                        label="Overall Progress"
                        progress={overallProgress}
                        color="bg-[#9687EC]"
                    />
                    <ProgressBar
                        label="Donation Progress"
                        progress={donationProgress}
                        color="bg-[#9687EC]"
                    />
                    </div>
                </div>
                <div className="p-6">
                    <h4 className="text-xl font-semibold mb-4">About</h4>
                    <p className="text-gray-700 whitespace-pre-line">{profile?.about}</p>
                </div>
                </div>
            </main>
        </div>
    )
}
```

[37 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]