import React, { useState } from 'react';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, LineChart, Line, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar } from 'recharts';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
const Dashboard = () => {
const [selectedRole, setSelectedRole] = useState('all');
// Color scheme
const colors = {
primary: '#d5204d', // Pink
secondary: '#ffa600', // Orange
tertiary: '#e6d5c6', // Light beige
background: '#eee7e2', // Lighter beige
text: '#000000' // Black
};
const metrics = [
{ metric: "Mission Alignment", all: 4.63, staff: 4.67, volunteer: 4.75 },
{ metric: "Responsiveness", all: 4.50, staff: 3.67, volunteer: 5.00 },
{ metric: "Community Impact", all: 4.75, staff: 4.33, volunteer: 5.00 },
{ metric: "Internal Values", all: 3.43, staff: 3.33, volunteer: 3.50 },
{ metric: "Volunteer Engagement", all: 4.38, staff: 4.00, volunteer: 4.50 },
{ metric: "Stakeholder Engagement", all: 3.13, staff: 3.00, volunteer: 3.25 },
{ metric: "External Values", all: 4.63, staff: 4.33, volunteer: 4.75 },
{ metric: "Partner Engagement", all: 4.00, staff: 4.33, volunteer: 3.75 }
];
const respondentTypes = [
{ role: "Staff", count: 3 },
{ role: "Volunteer Case Manager", count: 5 },
{ role: "Other", count: 0 }
];
const strengthsWeaknesses = [
{
category: "Strengths",
items: [
{ area: "Community Impact", score: 4.75 },
{ area: "Mission Alignment", score: 4.63 },
{ area: "External Values", score: 4.63 },
{ area: "Responsiveness", score: 4.50 }
]
},
{
category: "Areas for Growth",
items: [
{ area: "Stakeholder Engagement", score: 3.13 },
{ area: "Internal Values", score: 3.43 },
{ area: "Partner Engagement", score: 4.00 }
]
}
];
return (
<div className="space-y-4 p-4" style={{ background: colors.background, color: colors.text }}>
<Card className="w-full" style={{ background: 'white' }}>
<CardHeader>
<CardTitle className="text-2xl" style={{ color: colors.primary }}>NYAAF Survey Analysis Dashboard</CardTitle>
</CardHeader>
<CardContent>
<Tabs defaultValue="overview" className="w-full">
<TabsList className="mb-4" style={{ background: colors.tertiary }}>
<TabsTrigger
value="overview"
className="data-[state=active]:bg-white"
style={{ color: colors.text }}
>
Overview
</TabsTrigger>
<TabsTrigger
value="comparison"
className="data-[state=active]:bg-white"
style={{ color: colors.text }}
>
Role Comparison
</TabsTrigger>
<TabsTrigger
value="radar"
className="data-[state=active]:bg-white"
style={{ color: colors.text }}
>
Radar Analysis
</TabsTrigger>
</TabsList>
<TabsContent value="overview">
<div className="grid gap-4">
<div className="h-80">
<ResponsiveContainer width="100%" height="100%">
<BarChart data={metrics} margin={{ top: 20, right: 30, left: 40, bottom: 60 }}>
<XAxis dataKey="metric" angle={-45} textAnchor="end" height={80} stroke={colors.text} />
<YAxis domain={[0, 5]} stroke={colors.text} />
<Tooltip
contentStyle={{
background: 'white',
border: `1px solid ${colors.tertiary}`
}}
/>
<Bar dataKey="all" fill={colors.primary} name="Overall Score" />
</BarChart>
</ResponsiveContainer>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
{strengthsWeaknesses.map((category) => (
<Card key={category.category} style={{ background: colors.tertiary }}>
<CardHeader>
<CardTitle className="text-lg" style={{ color: colors.primary }}>
{category.category}
</CardTitle>
</CardHeader>
<CardContent>
<ul className="space-y-2">
{category.items.map((item) => (
<li key={item.area} className="flex justify-between">
<span style={{ color: colors.text }}>{item.area}</span>
<span className="font-bold" style={{ color: colors.primary }}>
{item.score.toFixed(2)}
</span>
</li>
))}
</ul>
</CardContent>
</Card>
))}
</div>
</div>
</TabsContent>
<TabsContent value="comparison">
<div className="h-80">
<ResponsiveContainer width="100%" height="100%">
<BarChart data={metrics} margin={{ top: 20, right: 30, left: 40, bottom: 60 }}>
<XAxis dataKey="metric" angle={-45} textAnchor="end" height={80} stroke={colors.text} />
<YAxis domain={[0, 5]} stroke={colors.text} />
<Tooltip
contentStyle={{
background: 'white',
border: `1px solid ${colors.tertiary}`
}}
/>
<Bar dataKey="staff" fill={colors.primary} name="Staff" />
<Bar dataKey="volunteer" fill={colors.secondary} name="Volunteers" />
</BarChart>
</ResponsiveContainer>
</div>
</TabsContent>
<TabsContent value="radar">
<div className="h-80">
<ResponsiveContainer width="100%" height="100%">
<RadarChart data={metrics}>
<PolarGrid stroke={colors.tertiary} />
<PolarAngleAxis dataKey="metric" stroke={colors.text} />
<PolarRadiusAxis domain={[0, 5]} stroke={colors.text} />
<Radar
name="Staff"
dataKey="staff"
stroke={colors.primary}
fill={colors.primary}
fillOpacity={0.3}
/>
<Radar
name="Volunteers"
dataKey="volunteer"
stroke={colors.secondary}
fill={colors.secondary}
fillOpacity={0.3}
/>
<Tooltip
contentStyle={{
background: 'white',
border: `1px solid ${colors.tertiary}`
}}
/>
</RadarChart>
</ResponsiveContainer>
</div>
</TabsContent>
</Tabs>
</CardContent>
</Card>
<Card style={{ background: 'white' }}>
<CardHeader>
<CardTitle style={{ color: colors.primary }}>Survey Respondent Breakdown</CardTitle>
</CardHeader>
<CardContent>
<div className="h-40">
<ResponsiveContainer width="100%" height="100%">
<BarChart data={respondentTypes} margin={{ top: 20, right: 30, left: 40, bottom: 20 }}>
<XAxis dataKey="role" stroke={colors.text} />
<YAxis stroke={colors.text} />
<Tooltip
contentStyle={{
background: 'white',
border: `1px solid ${colors.tertiary}`
}}
/>
<Bar dataKey="count" fill={colors.primary} />
</BarChart>
</ResponsiveContainer>
</div>
</CardContent>
</Card>
</div>
);
};
export default Dashboard;
