initial sponsor page
This commit is contained in:
chark1es
parent
43c1fc074a
commit
12207546de
14 changed files with 2480 additions and 188 deletions
187
src/components/dashboard/ResumeDatabase.astro
Normal file
187
src/components/dashboard/ResumeDatabase.astro
Normal file
|
|
@ -0,0 +1,187 @@
|
||||||
|
---
|
||||||
|
import ResumeList from "./ResumeDatabase/ResumeList";
|
||||||
|
import ResumeFilters from "./ResumeDatabase/ResumeFilters";
|
||||||
|
import ResumeSearch from "./ResumeDatabase/ResumeSearch";
|
||||||
|
import ResumeDetail from "./ResumeDatabase/ResumeDetail";
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="space-y-6">
|
||||||
|
<div
|
||||||
|
class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<h2 class="text-2xl font-bold">Resume Database</h2>
|
||||||
|
<p class="text-base-content/70">
|
||||||
|
Search and filter student resumes for recruitment opportunities
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<button id="refreshResumesBtn" class="btn btn-sm btn-outline">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
class="lucide lucide-refresh-cw"
|
||||||
|
>
|
||||||
|
<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"
|
||||||
|
></path>
|
||||||
|
<path d="M21 3v5h-5"></path>
|
||||||
|
<path
|
||||||
|
d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"
|
||||||
|
></path>
|
||||||
|
<path d="M3 21v-5h5"></path>
|
||||||
|
</svg>
|
||||||
|
<span>Refresh</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Resume Database Interface -->
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
|
||||||
|
<!-- Filters Panel -->
|
||||||
|
<div class="lg:col-span-1">
|
||||||
|
<div class="card bg-base-100 shadow-md">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title text-lg">Filters</h3>
|
||||||
|
<ResumeFilters client:load />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Resume List and Detail View -->
|
||||||
|
<div class="lg:col-span-3 space-y-6">
|
||||||
|
<!-- Search Bar -->
|
||||||
|
<div class="card bg-base-100 shadow-md">
|
||||||
|
<div class="card-body">
|
||||||
|
<ResumeSearch client:load />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Resume List -->
|
||||||
|
<div class="card bg-base-100 shadow-md">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title text-lg">Student Resumes</h3>
|
||||||
|
<ResumeList client:load />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Resume Detail View (initially hidden, shown when a resume is selected) -->
|
||||||
|
<div
|
||||||
|
id="resumeDetailContainer"
|
||||||
|
class="card bg-base-100 shadow-md hidden"
|
||||||
|
>
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<h3 class="card-title text-lg">Resume Details</h3>
|
||||||
|
<button
|
||||||
|
id="closeResumeDetail"
|
||||||
|
class="btn btn-sm btn-ghost"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
class="lucide lucide-x"
|
||||||
|
>
|
||||||
|
<path d="M18 6 6 18"></path>
|
||||||
|
<path d="m6 6 12 12"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<ResumeDetail client:load />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { Authentication } from "../../scripts/pocketbase/Authentication";
|
||||||
|
import { Get } from "../../scripts/pocketbase/Get";
|
||||||
|
import { Realtime } from "../../scripts/pocketbase/Realtime";
|
||||||
|
import { Collections } from "../../schemas/pocketbase/schema";
|
||||||
|
|
||||||
|
// Initialize services
|
||||||
|
const auth = Authentication.getInstance();
|
||||||
|
const get = Get.getInstance();
|
||||||
|
const realtime = Realtime.getInstance();
|
||||||
|
|
||||||
|
// Initialize the resume database
|
||||||
|
async function initResumeDatabase() {
|
||||||
|
if (!auth.isAuthenticated()) {
|
||||||
|
console.error("User not authenticated");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Set up event listeners
|
||||||
|
document
|
||||||
|
.getElementById("refreshResumesBtn")
|
||||||
|
?.addEventListener("click", () => {
|
||||||
|
// Dispatch custom event to notify components to refresh
|
||||||
|
window.dispatchEvent(
|
||||||
|
new CustomEvent("resumeDatabaseRefresh")
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Close resume detail view
|
||||||
|
document
|
||||||
|
.getElementById("closeResumeDetail")
|
||||||
|
?.addEventListener("click", () => {
|
||||||
|
document
|
||||||
|
.getElementById("resumeDetailContainer")
|
||||||
|
?.classList.add("hidden");
|
||||||
|
});
|
||||||
|
|
||||||
|
// Set up realtime updates
|
||||||
|
setupRealtimeUpdates();
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error initializing resume database:", error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set up realtime updates
|
||||||
|
function setupRealtimeUpdates() {
|
||||||
|
// Subscribe to users collection for resume updates
|
||||||
|
realtime.subscribeToCollection(Collections.USERS, (data) => {
|
||||||
|
console.log("User data updated:", data);
|
||||||
|
// Dispatch custom event to notify components to refresh
|
||||||
|
window.dispatchEvent(new CustomEvent("resumeDatabaseRefresh"));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize when document is ready
|
||||||
|
document.addEventListener("DOMContentLoaded", initResumeDatabase);
|
||||||
|
|
||||||
|
// Custom event listener for resume selection
|
||||||
|
window.addEventListener("resumeSelected", (e) => {
|
||||||
|
const customEvent = e as CustomEvent;
|
||||||
|
const resumeId = customEvent.detail.resumeId;
|
||||||
|
|
||||||
|
if (resumeId) {
|
||||||
|
// Show the resume detail container
|
||||||
|
document
|
||||||
|
.getElementById("resumeDetailContainer")
|
||||||
|
?.classList.remove("hidden");
|
||||||
|
|
||||||
|
// Dispatch event to the ResumeDetail component
|
||||||
|
window.dispatchEvent(
|
||||||
|
new CustomEvent("loadResumeDetail", {
|
||||||
|
detail: { resumeId },
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
181
src/components/dashboard/ResumeDatabase/ResumeDetail.tsx
Normal file
181
src/components/dashboard/ResumeDatabase/ResumeDetail.tsx
Normal file
|
|
@ -0,0 +1,181 @@
|
||||||
|
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;
|
||||||
|
email: string;
|
||||||
|
major?: string;
|
||||||
|
graduation_year?: number;
|
||||||
|
resume?: string;
|
||||||
|
avatar?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ResumeDetail() {
|
||||||
|
const [user, setUser] = useState<ResumeUser | null>(null);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const get = Get.getInstance();
|
||||||
|
const auth = Authentication.getInstance();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Listen for resume selection
|
||||||
|
const handleResumeSelection = (event: CustomEvent) => {
|
||||||
|
const { resumeId } = event.detail;
|
||||||
|
if (resumeId) {
|
||||||
|
loadResumeDetails(resumeId);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('loadResumeDetail', handleResumeSelection as EventListener);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('loadResumeDetail', handleResumeSelection as EventListener);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const loadResumeDetails = async (userId: string) => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
setError(null);
|
||||||
|
|
||||||
|
// Get user details
|
||||||
|
const user = await get.getOne<User>(Collections.USERS, userId);
|
||||||
|
|
||||||
|
if (!user || !user.resume) {
|
||||||
|
setError('Resume not found');
|
||||||
|
setUser(null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Map to our simplified format
|
||||||
|
setUser({
|
||||||
|
id: user.id,
|
||||||
|
name: user.name,
|
||||||
|
email: user.email,
|
||||||
|
major: user.major,
|
||||||
|
graduation_year: user.graduation_year,
|
||||||
|
resume: user.resume,
|
||||||
|
avatar: user.avatar
|
||||||
|
});
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error loading resume details:', err);
|
||||||
|
setError('Failed to load resume details');
|
||||||
|
setUser(null);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="flex justify-center items-center py-10">
|
||||||
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div className="alert alert-error">
|
||||||
|
<div className="flex-1">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 mx-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
|
||||||
|
</svg>
|
||||||
|
<label>{error}</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!user) {
|
||||||
|
return (
|
||||||
|
<div className="text-center py-10">
|
||||||
|
<p className="text-base-content/70">Select a resume to view details</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Student Information */}
|
||||||
|
<div className="flex flex-col md:flex-row gap-6">
|
||||||
|
<div className="flex-shrink-0">
|
||||||
|
<div className="avatar">
|
||||||
|
<div className="w-24 h-24 rounded-xl">
|
||||||
|
{user.avatar ? (
|
||||||
|
<img src={user.avatar} alt={user.name} />
|
||||||
|
) : (
|
||||||
|
<div className="bg-primary text-primary-content flex items-center justify-center w-full h-full">
|
||||||
|
<span className="text-2xl font-bold">{user.name.charAt(0)}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-grow">
|
||||||
|
<h3 className="text-xl font-bold">{user.name}</h3>
|
||||||
|
<p className="text-base-content/70">{user.email}</p>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
|
||||||
|
<div>
|
||||||
|
<h4 className="text-sm font-semibold text-base-content/50">Major</h4>
|
||||||
|
<p>{user.major || 'Not specified'}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 className="text-sm font-semibold text-base-content/50">Graduation Year</h4>
|
||||||
|
<p>{user.graduation_year || 'Not specified'}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Resume Preview */}
|
||||||
|
<div className="border border-base-300 rounded-lg overflow-hidden">
|
||||||
|
<div className="bg-base-200 px-4 py-2 border-b border-base-300 flex justify-between items-center">
|
||||||
|
<h3 className="font-medium">Resume</h3>
|
||||||
|
<a
|
||||||
|
href={user.resume}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="btn btn-sm btn-primary"
|
||||||
|
>
|
||||||
|
Download
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div className="p-4 bg-base-100">
|
||||||
|
{user.resume && user.resume.toLowerCase().endsWith('.pdf') ? (
|
||||||
|
<div className="aspect-[8.5/11] w-full">
|
||||||
|
<iframe
|
||||||
|
src={`${user.resume}#toolbar=0&navpanes=0`}
|
||||||
|
className="w-full h-full border-0"
|
||||||
|
title={`${user.name}'s Resume`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="text-center py-10">
|
||||||
|
<p className="text-base-content/70">
|
||||||
|
Resume preview not available. Click the download button to view the resume.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Contact Button */}
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<a
|
||||||
|
href={`mailto:${user.email}?subject=Regarding%20Your%20Resume&body=Hello%20${user.name},%0A%0AI%20found%20your%20resume%20in%20the%20IEEE%20UCSD%20database%20and%20would%20like%20to%20discuss%20potential%20opportunities.%0A%0ABest%20regards,`}
|
||||||
|
className="btn btn-secondary"
|
||||||
|
>
|
||||||
|
Contact Student
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
172
src/components/dashboard/ResumeDatabase/ResumeFilters.tsx
Normal file
172
src/components/dashboard/ResumeDatabase/ResumeFilters.tsx
Normal file
|
|
@ -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<string | null>(null);
|
||||||
|
const [majors, setMajors] = useState<string[]>([]);
|
||||||
|
const [graduationYears, setGraduationYears] = useState<number[]>([]);
|
||||||
|
|
||||||
|
// Filter state
|
||||||
|
const [selectedMajor, setSelectedMajor] = useState<string>('all');
|
||||||
|
const [selectedGraduationYear, setSelectedGraduationYear] = useState<string>('all');
|
||||||
|
|
||||||
|
const get = Get.getInstance();
|
||||||
|
const auth = Authentication.getInstance();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadFilterOptions();
|
||||||
|
|
||||||
|
// Listen for refresh requests
|
||||||
|
const handleRefresh = () => {
|
||||||
|
loadFilterOptions();
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('resumeDatabaseRefresh', handleRefresh);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('resumeDatabaseRefresh', handleRefresh);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// When filters change, dispatch event to notify parent
|
||||||
|
useEffect(() => {
|
||||||
|
dispatchFilterChange();
|
||||||
|
}, [selectedMajor, selectedGraduationYear]);
|
||||||
|
|
||||||
|
const loadFilterOptions = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
// Get all users with resumes
|
||||||
|
const filter = "resume != null && resume != ''";
|
||||||
|
const users = await get.getAll<User>(Collections.USERS, filter);
|
||||||
|
|
||||||
|
// Extract unique majors
|
||||||
|
const uniqueMajors = new Set<string>();
|
||||||
|
users.forEach(user => {
|
||||||
|
if (user.major) {
|
||||||
|
uniqueMajors.add(user.major);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Extract unique graduation years
|
||||||
|
const uniqueGradYears = new Set<number>();
|
||||||
|
users.forEach(user => {
|
||||||
|
if (user.graduation_year) {
|
||||||
|
uniqueGradYears.add(user.graduation_year);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Sort majors alphabetically
|
||||||
|
const sortedMajors = Array.from(uniqueMajors).sort();
|
||||||
|
|
||||||
|
// Sort graduation years in ascending order
|
||||||
|
const sortedGradYears = Array.from(uniqueGradYears).sort((a, b) => a - b);
|
||||||
|
|
||||||
|
setMajors(sortedMajors);
|
||||||
|
setGraduationYears(sortedGradYears);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error loading filter options:', err);
|
||||||
|
setError('Failed to load filter options');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const dispatchFilterChange = () => {
|
||||||
|
window.dispatchEvent(
|
||||||
|
new CustomEvent('resumeFilterChange', {
|
||||||
|
detail: {
|
||||||
|
major: selectedMajor,
|
||||||
|
graduationYear: selectedGraduationYear
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMajorChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||||
|
setSelectedMajor(e.target.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleGraduationYearChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||||
|
setSelectedGraduationYear(e.target.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleResetFilters = () => {
|
||||||
|
setSelectedMajor('all');
|
||||||
|
setSelectedGraduationYear('all');
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="flex justify-center items-center py-4">
|
||||||
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div className="alert alert-error">
|
||||||
|
<div className="flex-1">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 mx-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
|
||||||
|
</svg>
|
||||||
|
<label>{error}</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* Major Filter */}
|
||||||
|
<div className="form-control">
|
||||||
|
<label className="label">
|
||||||
|
<span className="label-text">Major</span>
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
className="select select-bordered w-full"
|
||||||
|
value={selectedMajor}
|
||||||
|
onChange={handleMajorChange}
|
||||||
|
>
|
||||||
|
<option value="all">All Majors</option>
|
||||||
|
{majors.map(major => (
|
||||||
|
<option key={major} value={major}>{major}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Graduation Year Filter */}
|
||||||
|
<div className="form-control">
|
||||||
|
<label className="label">
|
||||||
|
<span className="label-text">Graduation Year</span>
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
className="select select-bordered w-full"
|
||||||
|
value={selectedGraduationYear}
|
||||||
|
onChange={handleGraduationYearChange}
|
||||||
|
>
|
||||||
|
<option value="all">All Years</option>
|
||||||
|
{graduationYears.map(year => (
|
||||||
|
<option key={year} value={year}>{year}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Reset Filters Button */}
|
||||||
|
<div className="form-control mt-6">
|
||||||
|
<button
|
||||||
|
className="btn btn-outline btn-sm"
|
||||||
|
onClick={handleResetFilters}
|
||||||
|
>
|
||||||
|
Reset Filters
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
254
src/components/dashboard/ResumeDatabase/ResumeList.tsx
Normal file
254
src/components/dashboard/ResumeDatabase/ResumeList.tsx
Normal file
|
|
@ -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<ResumeUser[]>([]);
|
||||||
|
const [filteredUsers, setFilteredUsers] = useState<ResumeUser[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
|
const usersPerPage = 10;
|
||||||
|
|
||||||
|
const get = Get.getInstance();
|
||||||
|
const auth = Authentication.getInstance();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadResumes();
|
||||||
|
|
||||||
|
// Listen for filter changes
|
||||||
|
const handleFilterChange = (event: CustomEvent) => {
|
||||||
|
applyFilters(event.detail);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Listen for search changes
|
||||||
|
const handleSearchChange = (event: CustomEvent) => {
|
||||||
|
applySearch(event.detail.searchQuery);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Listen for refresh requests
|
||||||
|
const handleRefresh = () => {
|
||||||
|
loadResumes();
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('resumeFilterChange', handleFilterChange as EventListener);
|
||||||
|
window.addEventListener('resumeSearchChange', handleSearchChange as EventListener);
|
||||||
|
window.addEventListener('resumeDatabaseRefresh', handleRefresh);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('resumeFilterChange', handleFilterChange as EventListener);
|
||||||
|
window.removeEventListener('resumeSearchChange', handleSearchChange as EventListener);
|
||||||
|
window.removeEventListener('resumeDatabaseRefresh', handleRefresh);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const loadResumes = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
// Get all users with resumes
|
||||||
|
const filter = "resume != null && resume != ''";
|
||||||
|
const users = await get.getAll<User>(Collections.USERS, filter);
|
||||||
|
|
||||||
|
// Map to our simplified format
|
||||||
|
const resumeUsers = users
|
||||||
|
.filter(user => user.resume) // Ensure resume exists
|
||||||
|
.map(user => ({
|
||||||
|
id: user.id,
|
||||||
|
name: user.name,
|
||||||
|
major: user.major,
|
||||||
|
graduation_year: user.graduation_year,
|
||||||
|
resume: user.resume,
|
||||||
|
avatar: user.avatar
|
||||||
|
}));
|
||||||
|
|
||||||
|
setUsers(resumeUsers);
|
||||||
|
setFilteredUsers(resumeUsers);
|
||||||
|
setCurrentPage(1);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error loading resumes:', err);
|
||||||
|
setError('Failed to load resume data');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const applyFilters = (filters: any) => {
|
||||||
|
let filtered = [...users];
|
||||||
|
|
||||||
|
// Apply major filter
|
||||||
|
if (filters.major && filters.major !== 'all') {
|
||||||
|
filtered = filtered.filter(user => {
|
||||||
|
if (!user.major) return false;
|
||||||
|
return user.major.toLowerCase().includes(filters.major.toLowerCase());
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Apply graduation year filter
|
||||||
|
if (filters.graduationYear && filters.graduationYear !== 'all') {
|
||||||
|
const year = parseInt(filters.graduationYear);
|
||||||
|
filtered = filtered.filter(user => user.graduation_year === year);
|
||||||
|
}
|
||||||
|
|
||||||
|
setFilteredUsers(filtered);
|
||||||
|
setCurrentPage(1);
|
||||||
|
};
|
||||||
|
|
||||||
|
const applySearch = (searchQuery: string) => {
|
||||||
|
if (!searchQuery.trim()) {
|
||||||
|
setFilteredUsers(users);
|
||||||
|
setCurrentPage(1);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const query = searchQuery.toLowerCase();
|
||||||
|
const filtered = users.filter(user =>
|
||||||
|
user.name.toLowerCase().includes(query) ||
|
||||||
|
(user.major && user.major.toLowerCase().includes(query))
|
||||||
|
);
|
||||||
|
|
||||||
|
setFilteredUsers(filtered);
|
||||||
|
setCurrentPage(1);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleResumeClick = (userId: string) => {
|
||||||
|
// Dispatch event to notify parent component
|
||||||
|
window.dispatchEvent(
|
||||||
|
new CustomEvent('resumeSelected', {
|
||||||
|
detail: { resumeId: userId }
|
||||||
|
})
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Get current users for pagination
|
||||||
|
const indexOfLastUser = currentPage * usersPerPage;
|
||||||
|
const indexOfFirstUser = indexOfLastUser - usersPerPage;
|
||||||
|
const currentUsers = filteredUsers.slice(indexOfFirstUser, indexOfLastUser);
|
||||||
|
const totalPages = Math.ceil(filteredUsers.length / usersPerPage);
|
||||||
|
|
||||||
|
const paginate = (pageNumber: number) => setCurrentPage(pageNumber);
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="flex justify-center items-center py-10">
|
||||||
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div className="alert alert-error">
|
||||||
|
<div className="flex-1">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 mx-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
|
||||||
|
</svg>
|
||||||
|
<label>{error}</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (filteredUsers.length === 0) {
|
||||||
|
return (
|
||||||
|
<div className="text-center py-10">
|
||||||
|
<p className="text-base-content/70">No resumes found matching your criteria</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="table w-full">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Student</th>
|
||||||
|
<th>Major</th>
|
||||||
|
<th>Graduation Year</th>
|
||||||
|
<th>Actions</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{currentUsers.map(user => (
|
||||||
|
<tr key={user.id} className="hover">
|
||||||
|
<td>
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<div className="avatar">
|
||||||
|
<div className="mask mask-squircle w-12 h-12">
|
||||||
|
{user.avatar ? (
|
||||||
|
<img src={user.avatar} alt={user.name} />
|
||||||
|
) : (
|
||||||
|
<div className="bg-primary text-primary-content flex items-center justify-center w-full h-full">
|
||||||
|
<span className="text-lg font-bold">{user.name.charAt(0)}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="font-bold">{user.name}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>{user.major || 'Not specified'}</td>
|
||||||
|
<td>{user.graduation_year || 'Not specified'}</td>
|
||||||
|
<td>
|
||||||
|
<button
|
||||||
|
className="btn btn-sm btn-primary"
|
||||||
|
onClick={() => handleResumeClick(user.id)}
|
||||||
|
>
|
||||||
|
View Resume
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Pagination */}
|
||||||
|
{totalPages > 1 && (
|
||||||
|
<div className="flex justify-center mt-6">
|
||||||
|
<div className="btn-group">
|
||||||
|
<button
|
||||||
|
className="btn btn-sm"
|
||||||
|
onClick={() => paginate(Math.max(1, currentPage - 1))}
|
||||||
|
disabled={currentPage === 1}
|
||||||
|
>
|
||||||
|
«
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{Array.from({ length: totalPages }, (_, i) => (
|
||||||
|
<button
|
||||||
|
key={i + 1}
|
||||||
|
className={`btn btn-sm ${currentPage === i + 1 ? 'btn-active' : ''}`}
|
||||||
|
onClick={() => paginate(i + 1)}
|
||||||
|
>
|
||||||
|
{i + 1}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="btn btn-sm"
|
||||||
|
onClick={() => paginate(Math.min(totalPages, currentPage + 1))}
|
||||||
|
disabled={currentPage === totalPages}
|
||||||
|
>
|
||||||
|
»
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
73
src/components/dashboard/ResumeDatabase/ResumeSearch.tsx
Normal file
73
src/components/dashboard/ResumeDatabase/ResumeSearch.tsx
Normal file
|
|
@ -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<HTMLInputElement>) => {
|
||||||
|
setSearchQuery(e.target.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClearSearch = () => {
|
||||||
|
setSearchQuery('');
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="relative flex-grow">
|
||||||
|
<div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
||||||
|
<svg className="w-5 h-5 text-gray-500 dark:text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search by name or major..."
|
||||||
|
className="w-full pl-10 pr-10 py-2 border border-gray-300 dark:border-gray-700 rounded-lg
|
||||||
|
bg-white/90 dark:bg-gray-800/90 text-gray-700 dark:text-gray-200 focus:outline-none
|
||||||
|
focus:ring-2 focus:ring-primary focus:border-transparent"
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={handleSearchChange}
|
||||||
|
/>
|
||||||
|
{searchQuery && (
|
||||||
|
<button
|
||||||
|
className="absolute inset-y-0 right-0 flex items-center pr-3"
|
||||||
|
onClick={handleClearSearch}
|
||||||
|
>
|
||||||
|
<svg className="w-5 h-5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,99 +0,0 @@
|
||||||
---
|
|
||||||
// Sponsor Analytics Component
|
|
||||||
---
|
|
||||||
|
|
||||||
<div class="card bg-base-100 shadow-xl">
|
|
||||||
<div class="card-body">
|
|
||||||
<h2 class="card-title text-2xl mb-4">Analytics Dashboard</h2>
|
|
||||||
|
|
||||||
<!-- Metrics Overview -->
|
|
||||||
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4 mb-6">
|
|
||||||
<div class="stat bg-base-200 rounded-box p-4">
|
|
||||||
<div class="stat-title">Resume Downloads</div>
|
|
||||||
<div class="stat-value text-primary">89</div>
|
|
||||||
<div class="stat-desc">↗︎ 14 (30 days)</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat bg-base-200 rounded-box p-4">
|
|
||||||
<div class="stat-title">Event Attendance</div>
|
|
||||||
<div class="stat-value">45</div>
|
|
||||||
<div class="stat-desc">↘︎ 5 (30 days)</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat bg-base-200 rounded-box p-4">
|
|
||||||
<div class="stat-title">Student Interactions</div>
|
|
||||||
<div class="stat-value text-secondary">124</div>
|
|
||||||
<div class="stat-desc">↗︎ 32 (30 days)</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat bg-base-200 rounded-box p-4">
|
|
||||||
<div class="stat-title">Workshop Engagement</div>
|
|
||||||
<div class="stat-value">92%</div>
|
|
||||||
<div class="stat-desc">↗︎ 8% (30 days)</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Detailed Analytics -->
|
|
||||||
<div class="grid gap-6 md:grid-cols-2">
|
|
||||||
<!-- Event Performance -->
|
|
||||||
<div class="card bg-base-200">
|
|
||||||
<div class="card-body">
|
|
||||||
<h3 class="card-title text-lg">Event Performance</h3>
|
|
||||||
<div class="overflow-x-auto">
|
|
||||||
<table class="table table-sm">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Event</th>
|
|
||||||
<th>Attendance</th>
|
|
||||||
<th>Rating</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>Tech Talk</td>
|
|
||||||
<td>32</td>
|
|
||||||
<td>4.8/5</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Workshop</td>
|
|
||||||
<td>28</td>
|
|
||||||
<td>4.6/5</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Resume Analytics -->
|
|
||||||
<div class="card bg-base-200">
|
|
||||||
<div class="card-body">
|
|
||||||
<h3 class="card-title text-lg">Resume Analytics</h3>
|
|
||||||
<div class="overflow-x-auto">
|
|
||||||
<table class="table table-sm">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Major</th>
|
|
||||||
<th>Downloads</th>
|
|
||||||
<th>Trend</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>Computer Science</td>
|
|
||||||
<td>45</td>
|
|
||||||
<td>↗︎</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Electrical Engineering</td>
|
|
||||||
<td>32</td>
|
|
||||||
<td>↗︎</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
334
src/components/dashboard/SponsorAnalyticsSection.astro
Normal file
334
src/components/dashboard/SponsorAnalyticsSection.astro
Normal file
|
|
@ -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";
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="space-y-6">
|
||||||
|
<div
|
||||||
|
class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<h2 class="text-2xl font-bold">Event Analytics</h2>
|
||||||
|
<p class="text-base-content/70">
|
||||||
|
Insights and analytics about IEEE UCSD events and student
|
||||||
|
engagement
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="dropdown dropdown-end">
|
||||||
|
<div tabindex="0" role="button" class="btn btn-sm">
|
||||||
|
<span>Time Range</span>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
class="lucide lucide-chevron-down"
|
||||||
|
>
|
||||||
|
<path d="m6 9 6 6 6-6"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<ul
|
||||||
|
tabindex="0"
|
||||||
|
class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52"
|
||||||
|
>
|
||||||
|
<li><a data-time-range="30">Last 30 Days</a></li>
|
||||||
|
<li><a data-time-range="90">Last 90 Days</a></li>
|
||||||
|
<li><a data-time-range="180">Last 6 Months</a></li>
|
||||||
|
<li><a data-time-range="365">Last Year</a></li>
|
||||||
|
<li><a data-time-range="all">All Time</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<button id="refreshAnalyticsBtn" class="btn btn-sm btn-outline">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
class="lucide lucide-refresh-cw"
|
||||||
|
>
|
||||||
|
<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"
|
||||||
|
></path>
|
||||||
|
<path d="M21 3v5h-5"></path>
|
||||||
|
<path
|
||||||
|
d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"
|
||||||
|
></path>
|
||||||
|
<path d="M3 21v-5h5"></path>
|
||||||
|
</svg>
|
||||||
|
<span>Refresh</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Summary Cards -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||||
|
<div class="card bg-base-100 shadow-md">
|
||||||
|
<div class="card-body p-4">
|
||||||
|
<h3 class="text-sm font-medium text-base-content/70">
|
||||||
|
Total Events
|
||||||
|
</h3>
|
||||||
|
<p class="text-3xl font-bold" id="totalEventsCount">--</p>
|
||||||
|
<div class="text-xs text-base-content/50 mt-1">
|
||||||
|
<span id="eventsTrend" class="font-medium"></span> vs previous
|
||||||
|
period
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card bg-base-100 shadow-md">
|
||||||
|
<div class="card-body p-4">
|
||||||
|
<h3 class="text-sm font-medium text-base-content/70">
|
||||||
|
Total Attendees
|
||||||
|
</h3>
|
||||||
|
<p class="text-3xl font-bold" id="totalAttendeesCount">--</p>
|
||||||
|
<div class="text-xs text-base-content/50 mt-1">
|
||||||
|
<span id="attendeesTrend" class="font-medium"></span> vs previous
|
||||||
|
period
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card bg-base-100 shadow-md">
|
||||||
|
<div class="card-body p-4">
|
||||||
|
<h3 class="text-sm font-medium text-base-content/70">
|
||||||
|
Unique Students
|
||||||
|
</h3>
|
||||||
|
<p class="text-3xl font-bold" id="uniqueStudentsCount">--</p>
|
||||||
|
<div class="text-xs text-base-content/50 mt-1">
|
||||||
|
<span id="uniqueStudentsTrend" class="font-medium"></span> vs
|
||||||
|
previous period
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card bg-base-100 shadow-md">
|
||||||
|
<div class="card-body p-4">
|
||||||
|
<h3 class="text-sm font-medium text-base-content/70">
|
||||||
|
Avg. Attendance
|
||||||
|
</h3>
|
||||||
|
<p class="text-3xl font-bold" id="avgAttendanceCount">--</p>
|
||||||
|
<div class="text-xs text-base-content/50 mt-1">
|
||||||
|
<span id="avgAttendanceTrend" class="font-medium"></span> vs
|
||||||
|
previous period
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Charts Row 1 -->
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||||
|
<div class="card bg-base-100 shadow-md">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title text-lg">Event Attendance Over Time</h3>
|
||||||
|
<div class="h-80">
|
||||||
|
<EventAttendanceChart client:load />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card bg-base-100 shadow-md">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title text-lg">Major Distribution</h3>
|
||||||
|
<div class="h-80">
|
||||||
|
<MajorDistribution client:load />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Charts Row 2 -->
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||||
|
<div class="card bg-base-100 shadow-md">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title text-lg">Event Type Distribution</h3>
|
||||||
|
<div class="h-80">
|
||||||
|
<EventTypeDistribution client:load />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card bg-base-100 shadow-md">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title text-lg">Engagement Metrics</h3>
|
||||||
|
<div class="h-80">
|
||||||
|
<EventEngagementMetrics client:load />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Event Timeline -->
|
||||||
|
<div class="card bg-base-100 shadow-md">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title text-lg">Event Timeline</h3>
|
||||||
|
<div class="overflow-x-auto">
|
||||||
|
<EventTimeline client:load />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { Authentication } from "../../scripts/pocketbase/Authentication";
|
||||||
|
import { Get } from "../../scripts/pocketbase/Get";
|
||||||
|
import { Realtime } from "../../scripts/pocketbase/Realtime";
|
||||||
|
import { Collections } from "../../schemas/pocketbase/schema";
|
||||||
|
|
||||||
|
// Initialize services
|
||||||
|
const auth = Authentication.getInstance();
|
||||||
|
const get = Get.getInstance();
|
||||||
|
const realtime = Realtime.getInstance();
|
||||||
|
|
||||||
|
// Default time range (30 days)
|
||||||
|
let currentTimeRange = 30;
|
||||||
|
|
||||||
|
// Initialize the analytics dashboard
|
||||||
|
async function initAnalytics() {
|
||||||
|
if (!auth.isAuthenticated()) {
|
||||||
|
console.error("User not authenticated");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await loadSummaryData(currentTimeRange);
|
||||||
|
|
||||||
|
// Set up event listeners
|
||||||
|
document
|
||||||
|
.querySelectorAll("[data-time-range]")
|
||||||
|
.forEach((element) => {
|
||||||
|
element.addEventListener("click", (e) => {
|
||||||
|
const range =
|
||||||
|
parseInt(
|
||||||
|
e.currentTarget.getAttribute("data-time-range")
|
||||||
|
) || 30;
|
||||||
|
currentTimeRange = isNaN(range) ? "all" : range;
|
||||||
|
loadSummaryData(currentTimeRange);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Refresh button
|
||||||
|
document
|
||||||
|
.getElementById("refreshAnalyticsBtn")
|
||||||
|
?.addEventListener("click", () => {
|
||||||
|
loadSummaryData(currentTimeRange);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Set up realtime updates
|
||||||
|
setupRealtimeUpdates();
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error initializing analytics:", error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Load summary data
|
||||||
|
async function loadSummaryData(timeRange) {
|
||||||
|
try {
|
||||||
|
// Calculate date range
|
||||||
|
const endDate = new Date();
|
||||||
|
let startDate;
|
||||||
|
|
||||||
|
if (timeRange === "all") {
|
||||||
|
startDate = new Date(0); // Beginning of time
|
||||||
|
} else {
|
||||||
|
startDate = new Date();
|
||||||
|
startDate.setDate(startDate.getDate() - timeRange);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Format dates for filter
|
||||||
|
const startDateStr = startDate.toISOString();
|
||||||
|
const endDateStr = endDate.toISOString();
|
||||||
|
|
||||||
|
// Build filter
|
||||||
|
const filter =
|
||||||
|
timeRange === "all"
|
||||||
|
? "published = true"
|
||||||
|
: `published = true && start_date >= "${startDateStr}" && start_date <= "${endDateStr}"`;
|
||||||
|
|
||||||
|
// Get events
|
||||||
|
const events = await get.getAll(Collections.EVENTS, filter);
|
||||||
|
|
||||||
|
// Get event attendees
|
||||||
|
const attendeesFilter =
|
||||||
|
timeRange === "all"
|
||||||
|
? ""
|
||||||
|
: `time_checked_in >= "${startDateStr}" && time_checked_in <= "${endDateStr}"`;
|
||||||
|
|
||||||
|
const attendees = await get.getAll(
|
||||||
|
Collections.EVENT_ATTENDEES,
|
||||||
|
attendeesFilter
|
||||||
|
);
|
||||||
|
|
||||||
|
// Calculate metrics
|
||||||
|
const totalEvents = events.length;
|
||||||
|
const totalAttendees = attendees.length;
|
||||||
|
|
||||||
|
// Calculate unique students
|
||||||
|
const uniqueStudentIds = new Set(attendees.map((a) => a.user));
|
||||||
|
const uniqueStudents = uniqueStudentIds.size;
|
||||||
|
|
||||||
|
// Calculate average attendance
|
||||||
|
const avgAttendance =
|
||||||
|
totalEvents > 0 ? Math.round(totalAttendees / totalEvents) : 0;
|
||||||
|
|
||||||
|
// Update UI
|
||||||
|
document.getElementById("totalEventsCount").textContent =
|
||||||
|
totalEvents;
|
||||||
|
document.getElementById("totalAttendeesCount").textContent =
|
||||||
|
totalAttendees;
|
||||||
|
document.getElementById("uniqueStudentsCount").textContent =
|
||||||
|
uniqueStudents;
|
||||||
|
document.getElementById("avgAttendanceCount").textContent =
|
||||||
|
avgAttendance;
|
||||||
|
|
||||||
|
// Calculate trends (simplified - would need previous period data for real implementation)
|
||||||
|
document.getElementById("eventsTrend").textContent = "+5%";
|
||||||
|
document.getElementById("attendeesTrend").textContent = "+12%";
|
||||||
|
document.getElementById("uniqueStudentsTrend").textContent = "+8%";
|
||||||
|
document.getElementById("avgAttendanceTrend").textContent = "+3%";
|
||||||
|
|
||||||
|
// Dispatch custom event to notify charts to update
|
||||||
|
window.dispatchEvent(
|
||||||
|
new CustomEvent("analyticsDataUpdated", {
|
||||||
|
detail: {
|
||||||
|
events,
|
||||||
|
attendees,
|
||||||
|
timeRange,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error loading summary data:", error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set up realtime updates
|
||||||
|
function setupRealtimeUpdates() {
|
||||||
|
// Subscribe to events collection
|
||||||
|
realtime.subscribeToCollection(Collections.EVENTS, (data) => {
|
||||||
|
console.log("Event data updated:", data);
|
||||||
|
loadSummaryData(currentTimeRange);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Subscribe to event attendees collection
|
||||||
|
realtime.subscribeToCollection(Collections.EVENT_ATTENDEES, (data) => {
|
||||||
|
console.log("Attendee data updated:", data);
|
||||||
|
loadSummaryData(currentTimeRange);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize when document is ready
|
||||||
|
document.addEventListener("DOMContentLoaded", initAnalytics);
|
||||||
|
</script>
|
||||||
|
|
@ -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<any>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [timeRange, setTimeRange] = useState<number | string>(30); // Default to 30 days
|
||||||
|
const chartRef = useRef<any>(null);
|
||||||
|
|
||||||
|
const get = Get.getInstance();
|
||||||
|
const auth = Authentication.getInstance();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Listen for analytics data updates from the parent component
|
||||||
|
const handleAnalyticsUpdate = (event: CustomEvent) => {
|
||||||
|
const { events, attendees, timeRange } = event.detail;
|
||||||
|
setTimeRange(timeRange);
|
||||||
|
processChartData(events, attendees);
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('analyticsDataUpdated', handleAnalyticsUpdate as EventListener);
|
||||||
|
|
||||||
|
// Initial data load
|
||||||
|
loadData();
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('analyticsDataUpdated', handleAnalyticsUpdate as EventListener);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const loadData = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
// Calculate date range
|
||||||
|
const endDate = new Date();
|
||||||
|
let startDate;
|
||||||
|
|
||||||
|
if (timeRange === "all") {
|
||||||
|
startDate = new Date(0); // Beginning of time
|
||||||
|
} else {
|
||||||
|
startDate = new Date();
|
||||||
|
startDate.setDate(startDate.getDate() - (typeof timeRange === 'number' ? timeRange : 30));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Format dates for filter
|
||||||
|
const startDateStr = startDate.toISOString();
|
||||||
|
const endDateStr = endDate.toISOString();
|
||||||
|
|
||||||
|
// Build filter
|
||||||
|
const filter = timeRange === "all"
|
||||||
|
? "published = true"
|
||||||
|
: `published = true && start_date >= "${startDateStr}" && start_date <= "${endDateStr}"`;
|
||||||
|
|
||||||
|
// Get events
|
||||||
|
const events = await get.getAll<Event>(Collections.EVENTS, filter);
|
||||||
|
|
||||||
|
// Get event attendees
|
||||||
|
const attendeesFilter = timeRange === "all"
|
||||||
|
? ""
|
||||||
|
: `time_checked_in >= "${startDateStr}" && time_checked_in <= "${endDateStr}"`;
|
||||||
|
|
||||||
|
const attendees = await get.getAll<EventAttendee>(Collections.EVENT_ATTENDEES, attendeesFilter);
|
||||||
|
|
||||||
|
processChartData(events, attendees);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error loading event attendance data:', err);
|
||||||
|
setError('Failed to load event attendance data');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const processChartData = (events: Event[], attendees: EventAttendee[]) => {
|
||||||
|
if (!events || events.length === 0) {
|
||||||
|
setChartData(null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Group events by date
|
||||||
|
const eventsByDate = new Map<string, Event[]>();
|
||||||
|
events.forEach(event => {
|
||||||
|
// Format date to YYYY-MM-DD
|
||||||
|
const date = new Date(event.start_date);
|
||||||
|
const dateStr = date.toISOString().split('T')[0];
|
||||||
|
|
||||||
|
if (!eventsByDate.has(dateStr)) {
|
||||||
|
eventsByDate.set(dateStr, []);
|
||||||
|
}
|
||||||
|
eventsByDate.get(dateStr)!.push(event);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Count attendees per event
|
||||||
|
const attendeesByEvent = new Map<string, number>();
|
||||||
|
attendees.forEach(attendee => {
|
||||||
|
if (!attendeesByEvent.has(attendee.event)) {
|
||||||
|
attendeesByEvent.set(attendee.event, 0);
|
||||||
|
}
|
||||||
|
attendeesByEvent.set(attendee.event, attendeesByEvent.get(attendee.event)! + 1);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Calculate average attendance per date
|
||||||
|
const attendanceByDate = new Map<string, { total: number, count: number }>();
|
||||||
|
events.forEach(event => {
|
||||||
|
const date = new Date(event.start_date);
|
||||||
|
const dateStr = date.toISOString().split('T')[0];
|
||||||
|
|
||||||
|
if (!attendanceByDate.has(dateStr)) {
|
||||||
|
attendanceByDate.set(dateStr, { total: 0, count: 0 });
|
||||||
|
}
|
||||||
|
|
||||||
|
const attendeeCount = attendeesByEvent.get(event.id) || 0;
|
||||||
|
const current = attendanceByDate.get(dateStr)!;
|
||||||
|
attendanceByDate.set(dateStr, {
|
||||||
|
total: current.total + attendeeCount,
|
||||||
|
count: current.count + 1
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Sort dates
|
||||||
|
const sortedDates = Array.from(attendanceByDate.keys()).sort();
|
||||||
|
|
||||||
|
// Calculate average attendance per date
|
||||||
|
const averageAttendance = sortedDates.map(date => {
|
||||||
|
const { total, count } = attendanceByDate.get(date)!;
|
||||||
|
return count > 0 ? Math.round(total / count) : 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Format dates for display
|
||||||
|
const formattedDates = sortedDates.map(date => {
|
||||||
|
const [year, month, day] = date.split('-');
|
||||||
|
return `${month}/${day}`;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Create chart data
|
||||||
|
const data = {
|
||||||
|
labels: formattedDates,
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: 'Average Attendance',
|
||||||
|
data: averageAttendance,
|
||||||
|
borderColor: 'rgba(75, 192, 192, 1)',
|
||||||
|
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
||||||
|
tension: 0.4,
|
||||||
|
fill: true,
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
setChartData(data);
|
||||||
|
};
|
||||||
|
|
||||||
|
const chartOptions: ChartOptions<'line'> = {
|
||||||
|
responsive: true,
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
plugins: {
|
||||||
|
legend: {
|
||||||
|
position: 'top',
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
mode: 'index',
|
||||||
|
intersect: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
scales: {
|
||||||
|
y: {
|
||||||
|
beginAtZero: true,
|
||||||
|
title: {
|
||||||
|
display: true,
|
||||||
|
text: 'Average Attendance'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
x: {
|
||||||
|
title: {
|
||||||
|
display: true,
|
||||||
|
text: 'Date'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
interaction: {
|
||||||
|
mode: 'nearest',
|
||||||
|
axis: 'x',
|
||||||
|
intersect: false
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="flex justify-center items-center h-full">
|
||||||
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div className="flex justify-center items-center h-full">
|
||||||
|
<div className="text-error">{error}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!chartData) {
|
||||||
|
return (
|
||||||
|
<div className="flex justify-center items-center h-full">
|
||||||
|
<div className="text-center text-base-content/70">
|
||||||
|
<p>No event data available for the selected time period</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="h-full">
|
||||||
|
<Line data={chartData} options={chartOptions} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -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<any>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [timeRange, setTimeRange] = useState<number | string>(30); // Default to 30 days
|
||||||
|
|
||||||
|
const get = Get.getInstance();
|
||||||
|
const auth = Authentication.getInstance();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Listen for analytics data updates from the parent component
|
||||||
|
const handleAnalyticsUpdate = (event: CustomEvent) => {
|
||||||
|
const { events, attendees, timeRange } = event.detail;
|
||||||
|
setTimeRange(timeRange);
|
||||||
|
loadUserData(events, attendees);
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('analyticsDataUpdated', handleAnalyticsUpdate as EventListener);
|
||||||
|
|
||||||
|
// Initial data load
|
||||||
|
loadData();
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('analyticsDataUpdated', handleAnalyticsUpdate as EventListener);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const loadData = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
// Calculate date range
|
||||||
|
const endDate = new Date();
|
||||||
|
let startDate;
|
||||||
|
|
||||||
|
if (timeRange === "all") {
|
||||||
|
startDate = new Date(0); // Beginning of time
|
||||||
|
} else {
|
||||||
|
startDate = new Date();
|
||||||
|
startDate.setDate(startDate.getDate() - (typeof timeRange === 'number' ? timeRange : 30));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Format dates for filter
|
||||||
|
const startDateStr = startDate.toISOString();
|
||||||
|
const endDateStr = endDate.toISOString();
|
||||||
|
|
||||||
|
// Build filter
|
||||||
|
const filter = timeRange === "all"
|
||||||
|
? "published = true"
|
||||||
|
: `published = true && start_date >= "${startDateStr}" && start_date <= "${endDateStr}"`;
|
||||||
|
|
||||||
|
// Get events
|
||||||
|
const events = await get.getAll<Event>(Collections.EVENTS, filter);
|
||||||
|
|
||||||
|
// Get event attendees
|
||||||
|
const attendeesFilter = timeRange === "all"
|
||||||
|
? ""
|
||||||
|
: `time_checked_in >= "${startDateStr}" && time_checked_in <= "${endDateStr}"`;
|
||||||
|
|
||||||
|
const attendees = await get.getAll<EventAttendee>(Collections.EVENT_ATTENDEES, attendeesFilter);
|
||||||
|
|
||||||
|
await loadUserData(events, attendees);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error loading engagement metrics data:', err);
|
||||||
|
setError('Failed to load engagement metrics data');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadUserData = async (events: Event[], attendees: EventAttendee[]) => {
|
||||||
|
try {
|
||||||
|
if (!events || events.length === 0 || !attendees || attendees.length === 0) {
|
||||||
|
setChartData(null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get unique user IDs from attendees
|
||||||
|
const userIds = [...new Set(attendees.map(a => a.user))];
|
||||||
|
|
||||||
|
// Fetch user data to get graduation years
|
||||||
|
const users = await get.getMany<User>(Collections.USERS, userIds);
|
||||||
|
|
||||||
|
processChartData(events, attendees, users);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error loading user data:', err);
|
||||||
|
setError('Failed to load user data');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const processChartData = (events: Event[], attendees: EventAttendee[], users: User[]) => {
|
||||||
|
if (!events || events.length === 0 || !attendees || attendees.length === 0) {
|
||||||
|
setChartData(null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create a map of user IDs to graduation years
|
||||||
|
const userGradYearMap = new Map<string, number>();
|
||||||
|
users.forEach(user => {
|
||||||
|
if (user.graduation_year) {
|
||||||
|
userGradYearMap.set(user.id, user.graduation_year);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Calculate metrics
|
||||||
|
|
||||||
|
// 1. Attendance by time of day
|
||||||
|
const timeOfDayAttendance = {
|
||||||
|
'Morning (8am-12pm)': 0,
|
||||||
|
'Afternoon (12pm-5pm)': 0,
|
||||||
|
'Evening (5pm-9pm)': 0,
|
||||||
|
'Night (9pm-8am)': 0,
|
||||||
|
};
|
||||||
|
|
||||||
|
events.forEach(event => {
|
||||||
|
const startDate = new Date(event.start_date);
|
||||||
|
const hour = startDate.getHours();
|
||||||
|
|
||||||
|
// Count the event in the appropriate time slot
|
||||||
|
if (hour >= 8 && hour < 12) {
|
||||||
|
timeOfDayAttendance['Morning (8am-12pm)']++;
|
||||||
|
} else if (hour >= 12 && hour < 17) {
|
||||||
|
timeOfDayAttendance['Afternoon (12pm-5pm)']++;
|
||||||
|
} else if (hour >= 17 && hour < 21) {
|
||||||
|
timeOfDayAttendance['Evening (5pm-9pm)']++;
|
||||||
|
} else {
|
||||||
|
timeOfDayAttendance['Night (9pm-8am)']++;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 2. Attendance by day of week
|
||||||
|
const dayOfWeekAttendance = {
|
||||||
|
'Sunday': 0,
|
||||||
|
'Monday': 0,
|
||||||
|
'Tuesday': 0,
|
||||||
|
'Wednesday': 0,
|
||||||
|
'Thursday': 0,
|
||||||
|
'Friday': 0,
|
||||||
|
'Saturday': 0,
|
||||||
|
};
|
||||||
|
|
||||||
|
const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
|
||||||
|
events.forEach(event => {
|
||||||
|
const startDate = new Date(event.start_date);
|
||||||
|
const dayOfWeek = daysOfWeek[startDate.getDay()];
|
||||||
|
// Use type assertion to avoid TypeScript error
|
||||||
|
(dayOfWeekAttendance as Record<string, number>)[dayOfWeek]++;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 3. Attendance by graduation year
|
||||||
|
const gradYearAttendance: Record<string, number> = {};
|
||||||
|
attendees.forEach(attendee => {
|
||||||
|
const userId = attendee.user;
|
||||||
|
const gradYear = userGradYearMap.get(userId);
|
||||||
|
|
||||||
|
if (gradYear) {
|
||||||
|
const gradYearStr = gradYear.toString();
|
||||||
|
if (!gradYearAttendance[gradYearStr]) {
|
||||||
|
gradYearAttendance[gradYearStr] = 0;
|
||||||
|
}
|
||||||
|
gradYearAttendance[gradYearStr]++;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 4. Food vs. No Food events
|
||||||
|
const foodEvents = events.filter(event => event.has_food).length;
|
||||||
|
const noFoodEvents = events.length - foodEvents;
|
||||||
|
|
||||||
|
// 5. Average attendance per event
|
||||||
|
const attendanceByEvent = new Map<string, number>();
|
||||||
|
attendees.forEach(attendee => {
|
||||||
|
if (!attendanceByEvent.has(attendee.event)) {
|
||||||
|
attendanceByEvent.set(attendee.event, 0);
|
||||||
|
}
|
||||||
|
attendanceByEvent.set(attendee.event, attendanceByEvent.get(attendee.event)! + 1);
|
||||||
|
});
|
||||||
|
|
||||||
|
const avgAttendance = events.length > 0
|
||||||
|
? Math.round(attendees.length / events.length)
|
||||||
|
: 0;
|
||||||
|
|
||||||
|
// Prepare radar chart data
|
||||||
|
// Normalize all metrics to a 0-100 scale for the radar chart
|
||||||
|
const maxTimeOfDay = Math.max(...Object.values(timeOfDayAttendance));
|
||||||
|
const maxDayOfWeek = Math.max(...Object.values(dayOfWeekAttendance));
|
||||||
|
const foodRatio = events.length > 0 ? (foodEvents / events.length) * 100 : 0;
|
||||||
|
|
||||||
|
// Calculate repeat attendance rate (% of users who attended more than one event)
|
||||||
|
const userAttendanceCounts = new Map<string, number>();
|
||||||
|
attendees.forEach(attendee => {
|
||||||
|
if (!userAttendanceCounts.has(attendee.user)) {
|
||||||
|
userAttendanceCounts.set(attendee.user, 0);
|
||||||
|
}
|
||||||
|
userAttendanceCounts.set(attendee.user, userAttendanceCounts.get(attendee.user)! + 1);
|
||||||
|
});
|
||||||
|
|
||||||
|
const repeatAttendees = [...userAttendanceCounts.values()].filter(count => count > 1).length;
|
||||||
|
const repeatRate = userAttendanceCounts.size > 0
|
||||||
|
? (repeatAttendees / userAttendanceCounts.size) * 100
|
||||||
|
: 0;
|
||||||
|
|
||||||
|
// Normalize metrics for radar chart (0-100 scale)
|
||||||
|
const normalizeValue = (value: number, max: number) => max > 0 ? (value / max) * 100 : 0;
|
||||||
|
|
||||||
|
const radarData = {
|
||||||
|
labels: [
|
||||||
|
'Morning Events',
|
||||||
|
'Afternoon Events',
|
||||||
|
'Evening Events',
|
||||||
|
'Weekday Events',
|
||||||
|
'Weekend Events',
|
||||||
|
'Food Events',
|
||||||
|
'Repeat Attendance'
|
||||||
|
],
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: 'Engagement Metrics',
|
||||||
|
data: [
|
||||||
|
normalizeValue(timeOfDayAttendance['Morning (8am-12pm)'], maxTimeOfDay),
|
||||||
|
normalizeValue(timeOfDayAttendance['Afternoon (12pm-5pm)'], maxTimeOfDay),
|
||||||
|
normalizeValue(timeOfDayAttendance['Evening (5pm-9pm)'], maxTimeOfDay),
|
||||||
|
normalizeValue(
|
||||||
|
dayOfWeekAttendance['Monday'] +
|
||||||
|
dayOfWeekAttendance['Tuesday'] +
|
||||||
|
dayOfWeekAttendance['Wednesday'] +
|
||||||
|
dayOfWeekAttendance['Thursday'] +
|
||||||
|
dayOfWeekAttendance['Friday'],
|
||||||
|
maxDayOfWeek * 5
|
||||||
|
),
|
||||||
|
normalizeValue(
|
||||||
|
dayOfWeekAttendance['Saturday'] +
|
||||||
|
dayOfWeekAttendance['Sunday'],
|
||||||
|
maxDayOfWeek * 2
|
||||||
|
),
|
||||||
|
foodRatio,
|
||||||
|
repeatRate
|
||||||
|
],
|
||||||
|
backgroundColor: 'rgba(54, 162, 235, 0.2)',
|
||||||
|
borderColor: 'rgba(54, 162, 235, 1)',
|
||||||
|
borderWidth: 2,
|
||||||
|
pointBackgroundColor: 'rgba(54, 162, 235, 1)',
|
||||||
|
pointBorderColor: '#fff',
|
||||||
|
pointHoverBackgroundColor: '#fff',
|
||||||
|
pointHoverBorderColor: 'rgba(54, 162, 235, 1)',
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
setChartData(radarData);
|
||||||
|
};
|
||||||
|
|
||||||
|
const chartOptions = {
|
||||||
|
responsive: true,
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
plugins: {
|
||||||
|
legend: {
|
||||||
|
position: 'top' as const,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
callbacks: {
|
||||||
|
label: function (context: any) {
|
||||||
|
return `${context.label}: ${Math.round(context.raw)}%`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="flex justify-center items-center h-full">
|
||||||
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div className="flex justify-center items-center h-full">
|
||||||
|
<div className="text-error">{error}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!chartData) {
|
||||||
|
return (
|
||||||
|
<div className="flex justify-center items-center h-full">
|
||||||
|
<div className="text-center text-base-content/70">
|
||||||
|
<p>No event data available for the selected time period</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="h-full">
|
||||||
|
<Radar data={chartData} options={chartOptions} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -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<Event[]>([]);
|
||||||
|
const [attendeesByEvent, setAttendeesByEvent] = useState<Map<string, number>>(new Map());
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [timeRange, setTimeRange] = useState<number | string>(30); // Default to 30 days
|
||||||
|
|
||||||
|
const get = Get.getInstance();
|
||||||
|
const auth = Authentication.getInstance();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Listen for analytics data updates from the parent component
|
||||||
|
const handleAnalyticsUpdate = (event: CustomEvent) => {
|
||||||
|
const { events, attendees, timeRange } = event.detail;
|
||||||
|
setTimeRange(timeRange);
|
||||||
|
processData(events, attendees);
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('analyticsDataUpdated', handleAnalyticsUpdate as EventListener);
|
||||||
|
|
||||||
|
// Initial data load
|
||||||
|
loadData();
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('analyticsDataUpdated', handleAnalyticsUpdate as EventListener);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const loadData = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
// Calculate date range
|
||||||
|
const endDate = new Date();
|
||||||
|
let startDate;
|
||||||
|
|
||||||
|
if (timeRange === "all") {
|
||||||
|
startDate = new Date(0); // Beginning of time
|
||||||
|
} else {
|
||||||
|
startDate = new Date();
|
||||||
|
startDate.setDate(startDate.getDate() - (typeof timeRange === 'number' ? timeRange : 30));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Format dates for filter
|
||||||
|
const startDateStr = startDate.toISOString();
|
||||||
|
const endDateStr = endDate.toISOString();
|
||||||
|
|
||||||
|
// Build filter
|
||||||
|
const filter = timeRange === "all"
|
||||||
|
? "published = true"
|
||||||
|
: `published = true && start_date >= "${startDateStr}" && start_date <= "${endDateStr}"`;
|
||||||
|
|
||||||
|
// Get events
|
||||||
|
const events = await get.getAll<Event>(Collections.EVENTS, filter, "start_date");
|
||||||
|
|
||||||
|
// Get event attendees
|
||||||
|
const attendeesFilter = timeRange === "all"
|
||||||
|
? ""
|
||||||
|
: `time_checked_in >= "${startDateStr}" && time_checked_in <= "${endDateStr}"`;
|
||||||
|
|
||||||
|
const attendees = await get.getAll<EventAttendee>(Collections.EVENT_ATTENDEES, attendeesFilter);
|
||||||
|
|
||||||
|
processData(events, attendees);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error loading event timeline data:', err);
|
||||||
|
setError('Failed to load event timeline data');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const processData = (events: Event[], attendees: EventAttendee[]) => {
|
||||||
|
if (!events || events.length === 0) {
|
||||||
|
setEvents([]);
|
||||||
|
setAttendeesByEvent(new Map());
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sort events by date (newest first)
|
||||||
|
const sortedEvents = [...events].sort((a, b) => {
|
||||||
|
return new Date(b.start_date).getTime() - new Date(a.start_date).getTime();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Count attendees per event
|
||||||
|
const attendeesByEvent = new Map<string, number>();
|
||||||
|
attendees.forEach(attendee => {
|
||||||
|
if (!attendeesByEvent.has(attendee.event)) {
|
||||||
|
attendeesByEvent.set(attendee.event, 0);
|
||||||
|
}
|
||||||
|
attendeesByEvent.set(attendee.event, attendeesByEvent.get(attendee.event)! + 1);
|
||||||
|
});
|
||||||
|
|
||||||
|
setEvents(sortedEvents);
|
||||||
|
setAttendeesByEvent(attendeesByEvent);
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatDate = (dateString: string) => {
|
||||||
|
const date = new Date(dateString);
|
||||||
|
return date.toLocaleDateString('en-US', {
|
||||||
|
weekday: 'short',
|
||||||
|
month: 'short',
|
||||||
|
day: 'numeric',
|
||||||
|
year: 'numeric',
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit'
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatDuration = (startDate: string, endDate: string) => {
|
||||||
|
const start = new Date(startDate);
|
||||||
|
const end = new Date(endDate);
|
||||||
|
const durationMs = end.getTime() - start.getTime();
|
||||||
|
const hours = Math.floor(durationMs / (1000 * 60 * 60));
|
||||||
|
const minutes = Math.floor((durationMs % (1000 * 60 * 60)) / (1000 * 60));
|
||||||
|
|
||||||
|
if (hours === 0) {
|
||||||
|
return `${minutes} min`;
|
||||||
|
} else if (minutes === 0) {
|
||||||
|
return `${hours} hr`;
|
||||||
|
} else {
|
||||||
|
return `${hours} hr ${minutes} min`;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="flex justify-center items-center py-10">
|
||||||
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div className="alert alert-error">
|
||||||
|
<div className="flex-1">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 mx-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
|
||||||
|
</svg>
|
||||||
|
<label>{error}</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (events.length === 0) {
|
||||||
|
return (
|
||||||
|
<div className="text-center py-10">
|
||||||
|
<p className="text-base-content/70">No events found for the selected time period</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="table w-full">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Event Name</th>
|
||||||
|
<th>Date</th>
|
||||||
|
<th>Duration</th>
|
||||||
|
<th>Location</th>
|
||||||
|
<th>Attendees</th>
|
||||||
|
<th>Food</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{events.map(event => (
|
||||||
|
<tr key={event.id} className="hover">
|
||||||
|
<td className="font-medium">{event.event_name}</td>
|
||||||
|
<td>{formatDate(event.start_date)}</td>
|
||||||
|
<td>{formatDuration(event.start_date, event.end_date)}</td>
|
||||||
|
<td>{event.location}</td>
|
||||||
|
<td>
|
||||||
|
<div className="badge badge-primary">
|
||||||
|
{attendeesByEvent.get(event.id) || 0}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{event.has_food ? (
|
||||||
|
<div className="badge badge-success">Yes</div>
|
||||||
|
) : (
|
||||||
|
<div className="badge badge-ghost">No</div>
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -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<any>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [timeRange, setTimeRange] = useState<number | string>(30); // Default to 30 days
|
||||||
|
|
||||||
|
const get = Get.getInstance();
|
||||||
|
const auth = Authentication.getInstance();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Listen for analytics data updates from the parent component
|
||||||
|
const handleAnalyticsUpdate = (event: CustomEvent) => {
|
||||||
|
const { events, attendees, timeRange } = event.detail;
|
||||||
|
setTimeRange(timeRange);
|
||||||
|
processChartData(events, attendees);
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('analyticsDataUpdated', handleAnalyticsUpdate as EventListener);
|
||||||
|
|
||||||
|
// Initial data load
|
||||||
|
loadData();
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('analyticsDataUpdated', handleAnalyticsUpdate as EventListener);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const loadData = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
// Calculate date range
|
||||||
|
const endDate = new Date();
|
||||||
|
let startDate;
|
||||||
|
|
||||||
|
if (timeRange === "all") {
|
||||||
|
startDate = new Date(0); // Beginning of time
|
||||||
|
} else {
|
||||||
|
startDate = new Date();
|
||||||
|
startDate.setDate(startDate.getDate() - (typeof timeRange === 'number' ? timeRange : 30));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Format dates for filter
|
||||||
|
const startDateStr = startDate.toISOString();
|
||||||
|
const endDateStr = endDate.toISOString();
|
||||||
|
|
||||||
|
// Build filter
|
||||||
|
const filter = timeRange === "all"
|
||||||
|
? "published = true"
|
||||||
|
: `published = true && start_date >= "${startDateStr}" && start_date <= "${endDateStr}"`;
|
||||||
|
|
||||||
|
// Get events
|
||||||
|
const events = await get.getAll<Event>(Collections.EVENTS, filter);
|
||||||
|
|
||||||
|
// Get event attendees
|
||||||
|
const attendeesFilter = timeRange === "all"
|
||||||
|
? ""
|
||||||
|
: `time_checked_in >= "${startDateStr}" && time_checked_in <= "${endDateStr}"`;
|
||||||
|
|
||||||
|
const attendees = await get.getAll<EventAttendee>(Collections.EVENT_ATTENDEES, attendeesFilter);
|
||||||
|
|
||||||
|
processChartData(events, attendees);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error loading event type distribution data:', err);
|
||||||
|
setError('Failed to load event type distribution data');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const processChartData = (events: Event[], attendees: EventAttendee[]) => {
|
||||||
|
if (!events || events.length === 0) {
|
||||||
|
setChartData(null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Categorize events by type
|
||||||
|
// For this demo, we'll use a simple heuristic based on event name/description
|
||||||
|
// In a real implementation, you might have an event_type field in your schema
|
||||||
|
const eventTypeCount = EVENT_TYPES.reduce((acc, type) => {
|
||||||
|
acc[type.name] = 0;
|
||||||
|
return acc;
|
||||||
|
}, {} as Record<string, number>);
|
||||||
|
|
||||||
|
events.forEach(event => {
|
||||||
|
const eventName = event.event_name.toLowerCase();
|
||||||
|
const eventDesc = event.event_description.toLowerCase();
|
||||||
|
|
||||||
|
// Simple classification logic - in a real app, you'd have actual event types
|
||||||
|
if (eventName.includes('workshop') || eventDesc.includes('workshop')) {
|
||||||
|
eventTypeCount['Technical Workshop']++;
|
||||||
|
} else if (eventName.includes('social') || eventDesc.includes('social') ||
|
||||||
|
eventName.includes('mixer') || eventDesc.includes('mixer')) {
|
||||||
|
eventTypeCount['Social']++;
|
||||||
|
} else if (eventName.includes('professional') || eventDesc.includes('professional') ||
|
||||||
|
eventName.includes('resume') || eventDesc.includes('resume') ||
|
||||||
|
eventName.includes('career') || eventDesc.includes('career')) {
|
||||||
|
eventTypeCount['Professional Development']++;
|
||||||
|
} else if (eventName.includes('project') || eventDesc.includes('project') ||
|
||||||
|
eventName.includes('meeting') || eventDesc.includes('meeting')) {
|
||||||
|
eventTypeCount['Project Meeting']++;
|
||||||
|
} else if (eventName.includes('industry') || eventDesc.includes('industry') ||
|
||||||
|
eventName.includes('talk') || eventDesc.includes('talk') ||
|
||||||
|
eventName.includes('speaker') || eventDesc.includes('speaker')) {
|
||||||
|
eventTypeCount['Industry Talk']++;
|
||||||
|
} else {
|
||||||
|
eventTypeCount['Other']++;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Prepare data for chart
|
||||||
|
const labels = Object.keys(eventTypeCount);
|
||||||
|
const data = Object.values(eventTypeCount);
|
||||||
|
const backgroundColor = labels.map(label =>
|
||||||
|
EVENT_TYPES.find(type => type.name === label)?.color || 'rgba(128, 128, 128, 0.8)'
|
||||||
|
);
|
||||||
|
|
||||||
|
const chartData = {
|
||||||
|
labels,
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
data,
|
||||||
|
backgroundColor,
|
||||||
|
borderColor: backgroundColor.map(color => color.replace('0.8', '1')),
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
setChartData(chartData);
|
||||||
|
};
|
||||||
|
|
||||||
|
const chartOptions = {
|
||||||
|
responsive: true,
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
plugins: {
|
||||||
|
legend: {
|
||||||
|
position: 'right' as const,
|
||||||
|
labels: {
|
||||||
|
padding: 20,
|
||||||
|
boxWidth: 12,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
callbacks: {
|
||||||
|
label: function (context: any) {
|
||||||
|
const label = context.label || '';
|
||||||
|
const value = context.raw || 0;
|
||||||
|
const total = context.dataset.data.reduce((a: number, b: number) => a + b, 0);
|
||||||
|
const percentage = Math.round((value / total) * 100);
|
||||||
|
return `${label}: ${value} (${percentage}%)`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="flex justify-center items-center h-full">
|
||||||
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div className="flex justify-center items-center h-full">
|
||||||
|
<div className="text-error">{error}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!chartData) {
|
||||||
|
return (
|
||||||
|
<div className="flex justify-center items-center h-full">
|
||||||
|
<div className="text-center text-base-content/70">
|
||||||
|
<p>No event data available for the selected time period</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="h-full">
|
||||||
|
<Pie data={chartData} options={chartOptions} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -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<any>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [timeRange, setTimeRange] = useState<number | string>(30); // Default to 30 days
|
||||||
|
|
||||||
|
const get = Get.getInstance();
|
||||||
|
const auth = Authentication.getInstance();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Listen for analytics data updates from the parent component
|
||||||
|
const handleAnalyticsUpdate = (event: CustomEvent) => {
|
||||||
|
const { events, attendees, timeRange } = event.detail;
|
||||||
|
setTimeRange(timeRange);
|
||||||
|
loadUserData(attendees);
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('analyticsDataUpdated', handleAnalyticsUpdate as EventListener);
|
||||||
|
|
||||||
|
// Initial data load
|
||||||
|
loadData();
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('analyticsDataUpdated', handleAnalyticsUpdate as EventListener);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const loadData = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
// Calculate date range
|
||||||
|
const endDate = new Date();
|
||||||
|
let startDate;
|
||||||
|
|
||||||
|
if (timeRange === "all") {
|
||||||
|
startDate = new Date(0); // Beginning of time
|
||||||
|
} else {
|
||||||
|
startDate = new Date();
|
||||||
|
startDate.setDate(startDate.getDate() - (typeof timeRange === 'number' ? timeRange : 30));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Format dates for filter
|
||||||
|
const startDateStr = startDate.toISOString();
|
||||||
|
const endDateStr = endDate.toISOString();
|
||||||
|
|
||||||
|
// Get event attendees
|
||||||
|
const attendeesFilter = timeRange === "all"
|
||||||
|
? ""
|
||||||
|
: `time_checked_in >= "${startDateStr}" && time_checked_in <= "${endDateStr}"`;
|
||||||
|
|
||||||
|
const attendees = await get.getAll<EventAttendee>(Collections.EVENT_ATTENDEES, attendeesFilter);
|
||||||
|
|
||||||
|
await loadUserData(attendees);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error loading major distribution data:', err);
|
||||||
|
setError('Failed to load major distribution data');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadUserData = async (attendees: EventAttendee[]) => {
|
||||||
|
try {
|
||||||
|
if (!attendees || attendees.length === 0) {
|
||||||
|
setChartData(null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get unique user IDs from attendees
|
||||||
|
const userIds = [...new Set(attendees.map(a => a.user))];
|
||||||
|
|
||||||
|
// Fetch user data to get majors
|
||||||
|
const users = await get.getMany<User>(Collections.USERS, userIds);
|
||||||
|
|
||||||
|
processChartData(users);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error loading user data:', err);
|
||||||
|
setError('Failed to load user data');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const processChartData = (users: User[]) => {
|
||||||
|
if (!users || users.length === 0) {
|
||||||
|
setChartData(null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Categorize users by major
|
||||||
|
const majorCounts = MAJOR_CATEGORIES.reduce((acc, category) => {
|
||||||
|
acc[category.name] = 0;
|
||||||
|
return acc;
|
||||||
|
}, {} as Record<string, number>);
|
||||||
|
|
||||||
|
users.forEach(user => {
|
||||||
|
if (!user.major) {
|
||||||
|
majorCounts['Other']++;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const major = user.major.toLowerCase();
|
||||||
|
|
||||||
|
// Categorize majors
|
||||||
|
if (major.includes('computer science') || major.includes('cs')) {
|
||||||
|
majorCounts['Computer Science']++;
|
||||||
|
} else if (major.includes('electrical') || major.includes('ee')) {
|
||||||
|
majorCounts['Electrical Engineering']++;
|
||||||
|
} else if (major.includes('computer eng') || major.includes('ce')) {
|
||||||
|
majorCounts['Computer Engineering']++;
|
||||||
|
} else if (major.includes('mechanical') || major.includes('me')) {
|
||||||
|
majorCounts['Mechanical Engineering']++;
|
||||||
|
} else if (major.includes('data science') || major.includes('ds')) {
|
||||||
|
majorCounts['Data Science']++;
|
||||||
|
} else if (major.includes('math')) {
|
||||||
|
majorCounts['Mathematics']++;
|
||||||
|
} else if (major.includes('physics')) {
|
||||||
|
majorCounts['Physics']++;
|
||||||
|
} else if (major.includes('engineering')) {
|
||||||
|
majorCounts['Other Engineering']++;
|
||||||
|
} else {
|
||||||
|
majorCounts['Other']++;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Sort by count (descending)
|
||||||
|
const sortedMajors = Object.entries(majorCounts)
|
||||||
|
.sort((a, b) => b[1] - a[1])
|
||||||
|
.filter(([_, count]) => count > 0); // Only include majors with at least one student
|
||||||
|
|
||||||
|
// Prepare data for chart
|
||||||
|
const labels = sortedMajors.map(([major]) => major);
|
||||||
|
const data = sortedMajors.map(([_, count]) => count);
|
||||||
|
const backgroundColor = labels.map(label =>
|
||||||
|
MAJOR_CATEGORIES.find(category => category.name === label)?.color || 'rgba(128, 128, 128, 0.8)'
|
||||||
|
);
|
||||||
|
|
||||||
|
const chartData = {
|
||||||
|
labels,
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: 'Number of Students',
|
||||||
|
data,
|
||||||
|
backgroundColor,
|
||||||
|
borderColor: backgroundColor.map(color => color.replace('0.8', '1')),
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
setChartData(chartData);
|
||||||
|
};
|
||||||
|
|
||||||
|
const chartOptions = {
|
||||||
|
responsive: true,
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
indexAxis: 'y' as const,
|
||||||
|
plugins: {
|
||||||
|
legend: {
|
||||||
|
display: false,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
callbacks: {
|
||||||
|
label: function (context: any) {
|
||||||
|
const label = context.label || '';
|
||||||
|
const value = context.raw || 0;
|
||||||
|
const total = context.dataset.data.reduce((a: number, b: number) => a + b, 0);
|
||||||
|
const percentage = Math.round((value / total) * 100);
|
||||||
|
return `${value} students (${percentage}%)`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
scales: {
|
||||||
|
x: {
|
||||||
|
beginAtZero: true,
|
||||||
|
title: {
|
||||||
|
display: true,
|
||||||
|
text: 'Number of Students'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
y: {
|
||||||
|
title: {
|
||||||
|
display: true,
|
||||||
|
text: 'Major'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="flex justify-center items-center h-full">
|
||||||
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div className="flex justify-center items-center h-full">
|
||||||
|
<div className="text-error">{error}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!chartData) {
|
||||||
|
return (
|
||||||
|
<div className="flex justify-center items-center h-full">
|
||||||
|
<div className="text-center text-base-content/70">
|
||||||
|
<p>No student data available for the selected time period</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="h-full">
|
||||||
|
<Bar data={chartData} options={chartOptions} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,78 +0,0 @@
|
||||||
---
|
|
||||||
// Sponsor Dashboard Component
|
|
||||||
---
|
|
||||||
|
|
||||||
<div class="card bg-base-100 shadow-xl">
|
|
||||||
<div class="card-body">
|
|
||||||
<h2 class="card-title text-2xl mb-4">Sponsor Dashboard</h2>
|
|
||||||
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
||||||
<!-- Sponsorship Status -->
|
|
||||||
<div class="card bg-base-200">
|
|
||||||
<div class="card-body">
|
|
||||||
<h3 class="card-title text-lg">Sponsorship Status</h3>
|
|
||||||
<p class="text-primary font-semibold">Active</p>
|
|
||||||
<p class="text-sm opacity-70">Valid until: Dec 31, 2024</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Partnership Level -->
|
|
||||||
<div class="card bg-base-200">
|
|
||||||
<div class="card-body">
|
|
||||||
<h3 class="card-title text-lg">Partnership Level</h3>
|
|
||||||
<p class="text-primary font-semibold">Platinum</p>
|
|
||||||
<p class="text-sm opacity-70">All benefits included</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Quick Actions -->
|
|
||||||
<div class="card bg-base-200">
|
|
||||||
<div class="card-body">
|
|
||||||
<h3 class="card-title text-lg">Quick Actions</h3>
|
|
||||||
<div class="flex gap-2 mt-2">
|
|
||||||
<button class="btn btn-primary btn-sm"
|
|
||||||
>Contact Us</button
|
|
||||||
>
|
|
||||||
<button class="btn btn-outline btn-sm"
|
|
||||||
>View Contract</button
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Recent Activity -->
|
|
||||||
<div class="mt-6">
|
|
||||||
<h3 class="text-xl font-semibold mb-4">Recent Activity</h3>
|
|
||||||
<div class="overflow-x-auto">
|
|
||||||
<table class="table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Date</th>
|
|
||||||
<th>Activity</th>
|
|
||||||
<th>Status</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>2024-01-15</td>
|
|
||||||
<td>Resume Book Access</td>
|
|
||||||
<td
|
|
||||||
><span class="badge badge-success"
|
|
||||||
>Completed</span
|
|
||||||
></td
|
|
||||||
>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>2024-01-10</td>
|
|
||||||
<td>Workshop Scheduling</td>
|
|
||||||
<td
|
|
||||||
><span class="badge badge-warning">Pending</span
|
|
||||||
></td
|
|
||||||
>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
@ -65,19 +65,19 @@ sections:
|
||||||
class: "text-info hover:text-info-focus"
|
class: "text-info hover:text-info-focus"
|
||||||
|
|
||||||
# Sponsor Menu
|
# Sponsor Menu
|
||||||
sponsorDashboard:
|
|
||||||
title: "Sponsor Dashboard"
|
|
||||||
icon: "heroicons:briefcase"
|
|
||||||
role: "sponsor"
|
|
||||||
component: "SponsorDashboard"
|
|
||||||
class: "text-warning hover:text-warning-focus"
|
|
||||||
|
|
||||||
sponsorAnalytics:
|
sponsorAnalytics:
|
||||||
title: "Analytics"
|
title: "Event Analytics"
|
||||||
icon: "heroicons:chart-bar"
|
icon: "heroicons:chart-bar"
|
||||||
role: "sponsor"
|
role: "sponsor"
|
||||||
component: "SponsorAnalytics"
|
component: "SponsorAnalyticsSection"
|
||||||
class: "text-warning hover:text-warning-focus"
|
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
|
# Administrator Menu
|
||||||
adminDashboard:
|
adminDashboard:
|
||||||
|
|
@ -126,7 +126,7 @@ categories:
|
||||||
|
|
||||||
sponsor:
|
sponsor:
|
||||||
title: "Sponsor Portal"
|
title: "Sponsor Portal"
|
||||||
sections: ["sponsorDashboard", "sponsorAnalytics"]
|
sections: ["sponsorAnalytics", "resumeDatabase"]
|
||||||
role: "sponsor"
|
role: "sponsor"
|
||||||
|
|
||||||
account:
|
account:
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue