+
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+ );
+ }
+
+ if (!user) {
+ return (
+
+
+
+
+
+
+ );
+ }
+
+ return (
+ Select a resume to view details
+
+ {/* Student Information */}
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/dashboard/ResumeDatabase/ResumeFilters.tsx b/src/components/dashboard/ResumeDatabase/ResumeFilters.tsx
new file mode 100644
index 0000000..772480e
--- /dev/null
+++ b/src/components/dashboard/ResumeDatabase/ResumeFilters.tsx
@@ -0,0 +1,172 @@
+import { useState, useEffect } from 'react';
+import { Get } from '../../../scripts/pocketbase/Get';
+import { Collections } from '../../../schemas/pocketbase/schema';
+import type { User } from '../../../schemas/pocketbase/schema';
+import { Authentication } from '../../../scripts/pocketbase/Authentication';
+
+export default function ResumeFilters() {
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState
+
+
+ {/* Resume Preview */}
+
+
+
+
+
+
+ {user.avatar ? (
+ 
+ ) : (
+
+
+ {user.name.charAt(0)}
+
+ )}
+
+
+ {user.name}
+{user.email}
+ +
+
+
+
+ Major
+{user.major || 'Not specified'}
+
+
+ Graduation Year
+{user.graduation_year || 'Not specified'}
+
+
+
+ {/* Contact Button */}
+
+
+
+ Resume
+ + Download + +
+ {user.resume && user.resume.toLowerCase().endsWith('.pdf') ? (
+
+
+
+
+ ) : (
+
+
+ )}
+ + Resume preview not available. Click the download button to view the resume. +
+
+
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+ {/* Major Filter */}
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/dashboard/ResumeDatabase/ResumeList.tsx b/src/components/dashboard/ResumeDatabase/ResumeList.tsx
new file mode 100644
index 0000000..4d3dc0d
--- /dev/null
+++ b/src/components/dashboard/ResumeDatabase/ResumeList.tsx
@@ -0,0 +1,254 @@
+import { useState, useEffect } from 'react';
+import { Get } from '../../../scripts/pocketbase/Get';
+import { Collections } from '../../../schemas/pocketbase/schema';
+import type { User } from '../../../schemas/pocketbase/schema';
+import { Authentication } from '../../../scripts/pocketbase/Authentication';
+
+interface ResumeUser {
+ id: string;
+ name: string;
+ major?: string;
+ graduation_year?: number;
+ resume?: string;
+ avatar?: string;
+}
+
+export default function ResumeList() {
+ const [users, setUsers] = useState
+
+
+
+
+ {/* Graduation Year Filter */}
+
+
+
+
+
+ {/* Reset Filters Button */}
+
+
+
+
+
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+ );
+ }
+
+ if (filteredUsers.length === 0) {
+ return (
+
+
+
+
+
+
+ );
+ }
+
+ return (
+ No resumes found matching your criteria
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/dashboard/ResumeDatabase/ResumeSearch.tsx b/src/components/dashboard/ResumeDatabase/ResumeSearch.tsx
new file mode 100644
index 0000000..0f7fb8d
--- /dev/null
+++ b/src/components/dashboard/ResumeDatabase/ResumeSearch.tsx
@@ -0,0 +1,73 @@
+import { useState, useEffect } from 'react';
+
+export default function ResumeSearch() {
+ const [searchQuery, setSearchQuery] = useState('');
+ const [debouncedQuery, setDebouncedQuery] = useState('');
+
+ // Debounce search input to avoid too many updates
+ useEffect(() => {
+ const timer = setTimeout(() => {
+ setDebouncedQuery(searchQuery);
+ }, 300);
+
+ return () => {
+ clearTimeout(timer);
+ };
+ }, [searchQuery]);
+
+ // When debounced query changes, dispatch event to notify parent
+ useEffect(() => {
+ dispatchSearchChange();
+ }, [debouncedQuery]);
+
+ const dispatchSearchChange = () => {
+ window.dispatchEvent(
+ new CustomEvent('resumeSearchChange', {
+ detail: {
+ searchQuery: debouncedQuery
+ }
+ })
+ );
+ };
+
+ const handleSearchChange = (e: React.ChangeEvent
+
+
+
+
+
+ {/* Pagination */}
+ {totalPages > 1 && (
+ | Student | +Major | +Graduation Year | +Actions | +
|---|---|---|---|
|
+
+
+
+
+
+ {user.avatar ? (
+
+
+ {user.name.charAt(0)}
+
+ )}
+
+
+ {user.name}
+ |
+ {user.major || 'Not specified'} | +{user.graduation_year || 'Not specified'} | ++ + | +
+
+ )}
+
+
+
+ {Array.from({ length: totalPages }, (_, i) => (
+
+ ))}
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/dashboard/SponsorAnalytics.astro b/src/components/dashboard/SponsorAnalytics.astro
deleted file mode 100644
index 705c551..0000000
--- a/src/components/dashboard/SponsorAnalytics.astro
+++ /dev/null
@@ -1,99 +0,0 @@
----
-// Sponsor Analytics Component
----
-
-
+
+
+
+
+
+
+
+ {searchQuery && (
+
+ )}
+
-
diff --git a/src/components/dashboard/SponsorAnalyticsSection.astro b/src/components/dashboard/SponsorAnalyticsSection.astro
new file mode 100644
index 0000000..7f5f38d
--- /dev/null
+++ b/src/components/dashboard/SponsorAnalyticsSection.astro
@@ -0,0 +1,334 @@
+---
+import EventAttendanceChart from "./SponsorAnalyticsSection/EventAttendanceChart";
+import EventTypeDistribution from "./SponsorAnalyticsSection/EventTypeDistribution";
+import MajorDistribution from "./SponsorAnalyticsSection/MajorDistribution";
+import EventEngagementMetrics from "./SponsorAnalyticsSection/EventEngagementMetrics";
+import EventTimeline from "./SponsorAnalyticsSection/EventTimeline";
+---
+
+
-
-Analytics Dashboard
- - -
-
-
-
-
-
-
- Resume Downloads
- 89
- ↗︎ 14 (30 days)
-
-
-
- Event Attendance
- 45
- ↘︎ 5 (30 days)
-
-
-
- Student Interactions
- 124
- ↗︎ 32 (30 days)
-
-
- Workshop Engagement
- 92%
- ↗︎ 8% (30 days)
-
-
-
-
-
-
-
-
-
- Event Performance
-
-
-
-
-
- | Event | -Attendance | -Rating | -
|---|---|---|
| Tech Talk | -32 | -4.8/5 | -
| Workshop | -28 | -4.6/5 | -
-
-
-
- Resume Analytics
-
-
-
-
-
- | Major | -Downloads | -Trend | -
|---|---|---|
| Computer Science | -45 | -↗︎ | -
| Electrical Engineering | -32 | -↗︎ | -
+
+
+
diff --git a/src/components/dashboard/SponsorAnalyticsSection/EventAttendanceChart.tsx b/src/components/dashboard/SponsorAnalyticsSection/EventAttendanceChart.tsx
new file mode 100644
index 0000000..f05683c
--- /dev/null
+++ b/src/components/dashboard/SponsorAnalyticsSection/EventAttendanceChart.tsx
@@ -0,0 +1,249 @@
+import { useState, useEffect, useRef } from 'react';
+import { Get } from '../../../scripts/pocketbase/Get';
+import { Collections } from '../../../schemas/pocketbase/schema';
+import type { Event, EventAttendee } from '../../../schemas/pocketbase/schema';
+import { Authentication } from '../../../scripts/pocketbase/Authentication';
+
+// Import Chart.js
+import {
+ Chart as ChartJS,
+ CategoryScale,
+ LinearScale,
+ PointElement,
+ LineElement,
+ Title,
+ Tooltip,
+ Legend,
+ BarElement,
+} from 'chart.js';
+import type { ChartOptions } from 'chart.js';
+import { Line } from 'react-chartjs-2';
+
+// Register Chart.js components
+ChartJS.register(
+ CategoryScale,
+ LinearScale,
+ PointElement,
+ LineElement,
+ BarElement,
+ Title,
+ Tooltip,
+ Legend
+);
+
+export default function EventAttendanceChart() {
+ const [chartData, setChartData] = useState
+
+
+
+
+
+ Event Analytics
++ Insights and analytics about IEEE UCSD events and student + engagement +
+
+
+
+
+
+
+ Time Range
+
+
+
+
+
+
+
+
+
+
+
+
+ + Total Events +
+--
+
+ vs previous
+ period
+
+
+
+
+
+
+ + Total Attendees +
+--
+
+ vs previous
+ period
+
+
+
+
+
+
+ + Unique Students +
+--
+
+ vs
+ previous period
+
+
+
+
+
+ + Avg. Attendance +
+--
+
+ vs
+ previous period
+
+
+
+
+
+
+
+
+
+
+ Event Attendance Over Time
+
+
+
+
+
+
+ Major Distribution
+
+
+
+
+
+
+
+
+
+
+
+ Event Type Distribution
+
+
+
+
+
+
+ Engagement Metrics
+
+
+
+
+
+
+ Event Timeline
+
+
+
+
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+ );
+ }
+
+ if (!chartData) {
+ return (
+ {error}
+
+
+ );
+ }
+
+ return (
+
+
+ No event data available for the selected time period
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/dashboard/SponsorAnalyticsSection/EventEngagementMetrics.tsx b/src/components/dashboard/SponsorAnalyticsSection/EventEngagementMetrics.tsx
new file mode 100644
index 0000000..3d992f7
--- /dev/null
+++ b/src/components/dashboard/SponsorAnalyticsSection/EventEngagementMetrics.tsx
@@ -0,0 +1,334 @@
+import { useState, useEffect } from 'react';
+import { Get } from '../../../scripts/pocketbase/Get';
+import { Collections } from '../../../schemas/pocketbase/schema';
+import type { Event, EventAttendee, User } from '../../../schemas/pocketbase/schema';
+import { Authentication } from '../../../scripts/pocketbase/Authentication';
+
+// Import Chart.js
+import {
+ Chart as ChartJS,
+ CategoryScale,
+ LinearScale,
+ PointElement,
+ LineElement,
+ BarElement,
+ Title,
+ Tooltip,
+ Legend,
+ RadialLinearScale,
+} from 'chart.js';
+import { Radar } from 'react-chartjs-2';
+
+// Register Chart.js components
+ChartJS.register(
+ CategoryScale,
+ LinearScale,
+ PointElement,
+ LineElement,
+ BarElement,
+ RadialLinearScale,
+ Title,
+ Tooltip,
+ Legend
+);
+
+export default function EventEngagementMetrics() {
+ const [chartData, setChartData] = useState
+
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+ );
+ }
+
+ if (!chartData) {
+ return (
+ {error}
+
+
+ );
+ }
+
+ return (
+
+
+ No event data available for the selected time period
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/dashboard/SponsorAnalyticsSection/EventTimeline.tsx b/src/components/dashboard/SponsorAnalyticsSection/EventTimeline.tsx
new file mode 100644
index 0000000..e71cfe6
--- /dev/null
+++ b/src/components/dashboard/SponsorAnalyticsSection/EventTimeline.tsx
@@ -0,0 +1,198 @@
+import { useState, useEffect } from 'react';
+import { Get } from '../../../scripts/pocketbase/Get';
+import { Collections } from '../../../schemas/pocketbase/schema';
+import type { Event, EventAttendee } from '../../../schemas/pocketbase/schema';
+import { Authentication } from '../../../scripts/pocketbase/Authentication';
+
+export default function EventTimeline() {
+ const [events, setEvents] = useState
+
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+ );
+ }
+
+ if (events.length === 0) {
+ return (
+
+
+
+
+
+
+ );
+ }
+
+ return (
+ No events found for the selected time period
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/dashboard/SponsorAnalyticsSection/EventTypeDistribution.tsx b/src/components/dashboard/SponsorAnalyticsSection/EventTypeDistribution.tsx
new file mode 100644
index 0000000..51f6fcc
--- /dev/null
+++ b/src/components/dashboard/SponsorAnalyticsSection/EventTypeDistribution.tsx
@@ -0,0 +1,225 @@
+import { useState, useEffect } from 'react';
+import { Get } from '../../../scripts/pocketbase/Get';
+import { Collections } from '../../../schemas/pocketbase/schema';
+import type { Event, EventAttendee } from '../../../schemas/pocketbase/schema';
+import { Authentication } from '../../../scripts/pocketbase/Authentication';
+
+// Import Chart.js
+import {
+ Chart as ChartJS,
+ ArcElement,
+ Tooltip,
+ Legend,
+ CategoryScale,
+ LinearScale,
+} from 'chart.js';
+import { Pie } from 'react-chartjs-2';
+
+// Register Chart.js components
+ChartJS.register(
+ ArcElement,
+ Tooltip,
+ Legend,
+ CategoryScale,
+ LinearScale
+);
+
+// Define event types and their colors
+const EVENT_TYPES = [
+ { name: 'Technical Workshop', color: 'rgba(54, 162, 235, 0.8)' },
+ { name: 'Social', color: 'rgba(255, 99, 132, 0.8)' },
+ { name: 'Professional Development', color: 'rgba(75, 192, 192, 0.8)' },
+ { name: 'Project Meeting', color: 'rgba(255, 206, 86, 0.8)' },
+ { name: 'Industry Talk', color: 'rgba(153, 102, 255, 0.8)' },
+ { name: 'Other', color: 'rgba(255, 159, 64, 0.8)' },
+];
+
+export default function EventTypeDistribution() {
+ const [chartData, setChartData] = useState| Event Name | +Date | +Duration | +Location | +Attendees | +Food | +
|---|---|---|---|---|---|
| {event.event_name} | +{formatDate(event.start_date)} | +{formatDuration(event.start_date, event.end_date)} | +{event.location} | +
+
+ {attendeesByEvent.get(event.id) || 0}
+
+ |
+
+ {event.has_food ? (
+ Yes
+ ) : (
+ No
+ )}
+ |
+
+
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+ );
+ }
+
+ if (!chartData) {
+ return (
+ {error}
+
+
+ );
+ }
+
+ return (
+
+
+ No event data available for the selected time period
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/dashboard/SponsorAnalyticsSection/MajorDistribution.tsx b/src/components/dashboard/SponsorAnalyticsSection/MajorDistribution.tsx
new file mode 100644
index 0000000..ee636d1
--- /dev/null
+++ b/src/components/dashboard/SponsorAnalyticsSection/MajorDistribution.tsx
@@ -0,0 +1,262 @@
+import { useState, useEffect } from 'react';
+import { Get } from '../../../scripts/pocketbase/Get';
+import { Collections } from '../../../schemas/pocketbase/schema';
+import type { User, EventAttendee } from '../../../schemas/pocketbase/schema';
+import { Authentication } from '../../../scripts/pocketbase/Authentication';
+
+// Import Chart.js
+import {
+ Chart as ChartJS,
+ CategoryScale,
+ LinearScale,
+ BarElement,
+ Title,
+ Tooltip,
+ Legend,
+} from 'chart.js';
+import { Bar } from 'react-chartjs-2';
+
+// Register Chart.js components
+ChartJS.register(
+ CategoryScale,
+ LinearScale,
+ BarElement,
+ Title,
+ Tooltip,
+ Legend
+);
+
+// Define major categories and their colors
+const MAJOR_CATEGORIES = [
+ { name: 'Computer Science', color: 'rgba(54, 162, 235, 0.8)' },
+ { name: 'Electrical Engineering', color: 'rgba(255, 99, 132, 0.8)' },
+ { name: 'Computer Engineering', color: 'rgba(75, 192, 192, 0.8)' },
+ { name: 'Mechanical Engineering', color: 'rgba(255, 206, 86, 0.8)' },
+ { name: 'Data Science', color: 'rgba(153, 102, 255, 0.8)' },
+ { name: 'Mathematics', color: 'rgba(255, 159, 64, 0.8)' },
+ { name: 'Physics', color: 'rgba(201, 203, 207, 0.8)' },
+ { name: 'Other Engineering', color: 'rgba(100, 149, 237, 0.8)' },
+ { name: 'Other', color: 'rgba(169, 169, 169, 0.8)' },
+];
+
+export default function MajorDistribution() {
+ const [chartData, setChartData] = useState
+
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+ );
+ }
+
+ if (!chartData) {
+ return (
+ {error}
+
+
+ );
+ }
+
+ return (
+
+
+ No student data available for the selected time period
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/dashboard/SponsorDashboard.astro b/src/components/dashboard/SponsorDashboard.astro
deleted file mode 100644
index f7210be..0000000
--- a/src/components/dashboard/SponsorDashboard.astro
+++ /dev/null
@@ -1,78 +0,0 @@
----
-// Sponsor Dashboard Component
----
-
-
-
diff --git a/src/config/dashboard.yaml b/src/config/dashboard.yaml
index 41bb8e7..e931abc 100644
--- a/src/config/dashboard.yaml
+++ b/src/config/dashboard.yaml
@@ -65,19 +65,19 @@ sections:
class: "text-info hover:text-info-focus"
# Sponsor Menu
- sponsorDashboard:
- title: "Sponsor Dashboard"
- icon: "heroicons:briefcase"
- role: "sponsor"
- component: "SponsorDashboard"
- class: "text-warning hover:text-warning-focus"
-
sponsorAnalytics:
- title: "Analytics"
+ title: "Event Analytics"
icon: "heroicons:chart-bar"
role: "sponsor"
- component: "SponsorAnalytics"
- class: "text-warning hover:text-warning-focus"
+ component: "SponsorAnalyticsSection"
+ class: "text-primary hover:text-primary-focus"
+
+ resumeDatabase:
+ title: "Resume Database"
+ icon: "heroicons:document-text"
+ role: "sponsor"
+ component: "ResumeDatabase"
+ class: "text-secondary hover:text-secondary-focus"
# Administrator Menu
adminDashboard:
@@ -126,7 +126,7 @@ categories:
sponsor:
title: "Sponsor Portal"
- sections: ["sponsorDashboard", "sponsorAnalytics"]
+ sections: ["sponsorAnalytics", "resumeDatabase"]
role: "sponsor"
account:
-
-Sponsor Dashboard
-
-
-
-
-
-
-
-
-
-
-
- Sponsorship Status
-Active
-Valid until: Dec 31, 2024
-
-
-
-
-
-
- Partnership Level
-Platinum
-All benefits included
-
-
-
-
- Quick Actions
-
-
-
-
-
-
- Recent Activity
-
-
-
-
-
- | Date | -Activity | -Status | -
|---|---|---|
| 2024-01-15 | -Resume Book Access | -Completed | -
| 2024-01-10 | -Workshop Scheduling | -Pending | -