Dashboard

Production

Active agents performance monitoring and metrics

{/* Statistics Cards */}

Active Agents

{productionAgents.length}

Avg QA Score

{Math.round(productionAgents.reduce((acc, a) => acc + a.qa_score, 0) / productionAgents.length)}%

Avg CSAT

{(productionAgents.reduce((acc, a) => acc + a.csat, 0) / productionAgents.length).toFixed(1)}

Perfect Attendance

{productionAgents.filter((a) => a.attendance === 100).length}

{/* Table */} Employee Team Lead Brand / Queue QA Score CSAT AHT Attendance OT Hours Performance Actions {filteredAgents.map((agent) => (

{agent.employee_name}

{agent.ot_hours}h {getPerformanceBadge(agent.qa_score)} ))}

Report Type	Generated By	Date & Time	Status	Actions
{{ activity.reportType }}	{{ activity.user }}	{{ activity.dateTime }}	{{ activity.status }}

) } [V0_FILE]vue:file="vue-frontend/src/views/Reports.vue" isEdit="true" isMerged="true" [V0_FILE]typescriptreact:file="app/dashboard/reports/page.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import DashboardLayout from "@/components/dashboard/dashboard-layout" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { TrendingDown, BarChart3, GraduationCap, Users, Download, ChevronRight, FileText, TrendingUp, Clock, Check, } from "lucide-react" import Link from "next/link" export default function ReportsPage() { const router = useRouter() const [isLoading, setIsLoading] = useState(true) useEffect(() => { const user = localStorage.getItem("user") if (!user) { router.push("/login") return } setIsLoading(false) }, [router]) const reportCategories = [ { id: 1, title: "Attrition Analysis", description: "Exit trends, reasons, and retention insights across teams and periods", icon: TrendingDown, href: "/dashboard/reports/attrition", color: "from-red-500 to-red-600", iconBg: "bg-red-50", iconColor: "text-red-600", recordCount: 156, }, { id: 2, title: "Performance Metrics", description: "QA scores, CSAT ratings, AHT analysis, and agent performance trends", icon: BarChart3, href: "/dashboard/reports/performance", color: "from-blue-500 to-blue-600", iconBg: "bg-blue-50", iconColor: "text-blue-600", recordCount: 450, }, { id: 3, title: "Training & Development", description: "Certification rates, nesting performance, and L&D program effectiveness", icon: GraduationCap, href: "/dashboard/reports/training", color: "from-green-500 to-green-600", iconBg: "bg-green-50", iconColor: "text-green-600", recordCount: 89, }, { id: 4, title: "Headcount Planning", description: "Active workforce distribution, tenure mix, and capacity forecasting", icon: Users, href: "/dashboard/reports/headcount", color: "from-purple-500 to-purple-600", iconBg: "bg-purple-50", iconColor: "text-purple-600", recordCount: 523, }, ] const quickStats = { totalReports: 1247, monthlyReports: 89, avgProcessingTime: 2.3, } const recentActivity = [ { id: 1, reportType: "Attrition Analysis", user: "John Doe", dateTime: "Jan 19, 2024 - 10:30 AM", status: "Completed", icon: TrendingDown, }, { id: 2, reportType: "Performance Metrics", user: "Jane Smith", dateTime: "Jan 18, 2024 - 03:45 PM", status: "Completed", icon: BarChart3, }, { id: 3, reportType: "Training Report", user: "Mike Johnson", dateTime: "Jan 17, 2024 - 09:15 AM", status: "Completed", icon: GraduationCap, }, { id: 4, reportType: "Headcount Planning", user: "Sarah Williams", dateTime: "Jan 16, 2024 - 02:20 PM", status: "Completed", icon: Users, }, ] if (isLoading) { return (

{reportCategories.map((report) => (

Reports & Analytics

Comprehensive insights and data visualization for strategic decision-making

{report.title}

{report.description}

{report.recordCount} records

))}

Quick Statistics

{quickStats.totalReports}

Total Reports Generated

{quickStats.monthlyReports}

Reports This Month

{quickStats.avgProcessingTime}s

Avg Processing Time

Recent Report Activity

{recentActivity.map((activity) => ( ))}

Report Type	Generated By	Date & Time	Status	Actions
{activity.reportType}	{activity.user}	{activity.dateTime}	{activity.status}

) } [V0_FILE]typescript:file="vue-frontend/src/utils/axios.ts" isEdit="true" isQuickEdit="true" isMerged="true" import axios from "axios" import { useToastStore } from "@/stores/toast" const instance = axios.create({ baseURL: import.meta.env.VITE_API_URL || "http://localhost:8000", timeout: 30000, headers: { "Content-Type": "application/json", "X-Requested-With": "XMLHttpRequest", }, withCredentials: true, }) instance.interceptors.request.use( (config) => { const token = localStorage.getItem("token") if (token) { config.headers.Authorization = `Bearer ${token}` } // Add CSRF token if available const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute("content") if (csrfToken) { config.headers["X-CSRF-TOKEN"] = csrfToken } return config }, (error) => { console.error("Request error:", error) return Promise.reject(error) }, ) instance.interceptors.response.use( (response) => { return response }, (error) => { const toastStore = useToastStore() if (error.response?.status === 401) { localStorage.removeItem("token") toastStore.error("Session Expired", "Please login again to continue") window.location.href = "/login" } else if (error.response?.status === 403) { toastStore.error("Access Denied", "You don't have permission to perform this action") } else if (error.response?.status === 404) { toastStore.error("Not Found", "The requested resource was not found") } else if (error.response?.status === 422) { const errors = error.response.data.errors if (errors) { const firstError = Object.values(errors)[0] toastStore.error("Validation Error", Array.isArray(firstError) ? firstError[0] : String(firstError)) } else { toastStore.error("Validation Error", error.response.data.message || "Please check your input") } } else if (error.response?.status === 429) { toastStore.error("Too Many Requests", "Please slow down and try again later") } else if (error.response?.status >= 500) { toastStore.error("Server Error", "Something went wrong. Please try again later") } else if (error.code === "ECONNABORTED") { toastStore.error("Request Timeout", "The request took too long. Please try again") } else if (!error.response) { toastStore.error("Network Error", "Please check your internet connection") } return Promise.reject(error) }, ) export default instance [V0_FILE]typescriptreact:file="app/dashboard/reports/attrition/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import Link from "next/link" import DashboardLayout from "@/components/dashboard/dashboard-layout" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Download, ArrowLeft } from "lucide-react" import { ChartTooltip, ChartTooltipContent } from "@/components/ui/chart" import { Bar, BarChart, Line, LineChart, Pie, PieChart, XAxis, YAxis, CartesianGrid, ResponsiveContainer, Cell, } from "recharts" import api from "@/lib/api" import { useToast } from "@/hooks/use-toast" export default function AttritionReportPage() { const router = useRouter() const { toast } = useToast() const [isLoading, setIsLoading] = useState(true) const [data, setData] = useState(null) const [error, setError] = useState(null) const [filters, setFilters] = useState({ dateRange: "last_90_days", }) useEffect(() => { const user = localStorage.getItem("user") if (!user) { router.push("/login") return } loadData() }, [router]) const loadData = async () => { setIsLoading(true) setError(null) try { const reportData = await api.reports.getAttrition({ start_date: getStartDate(filters.dateRange), end_date: new Date().toISOString().split("T")[0], }) if (!reportData) { throw new Error("No data received from server") } setData(reportData) } catch (error: any) { const errorMsg = error.response?.data?.message || error.message || "Failed to load attrition report" setError(errorMsg) console.error("Attrition report error:", error) toast({ title: "Error Loading Report", description: errorMsg, variant: "destructive", }) } finally { setIsLoading(false) } } const getStartDate = (range: string) => { const date = new Date() switch (range) { case "last_30_days": date.setDate(date.getDate() - 30) break case "last_90_days": date.setDate(date.getDate() - 90) break case "last_6_months": date.setMonth(date.getMonth() - 6) break case "last_year": date.setFullYear(date.getFullYear() - 1) break } return date.toISOString().split("T")[0] } const exportReport = async () => { try { const result = await api.reports.export("attrition", "excel") if (result?.download_url) { window.open(result.download_url, "_blank") } toast({ title: "Success", description: "Report exported successfully", }) } catch (error: any) { toast({ title: "Export Failed", description: error.response?.data?.message || error.message || "Failed to export report", variant: "destructive", }) } } if (isLoading) { return (

Loading attrition report...

) } if (error) { return (

Failed to Load Report

{error}

) } const metrics = { totalExits: data?.total_exits || 0, earlyAttrition: data?.early_attrition?.count || 0, earlyAttritionPct: data?.early_attrition?.percentage || 0, avgTenure: data?.by_month && data.by_month.length > 0 ? ( data.by_month.reduce((sum: number, item: any) => sum + (item.avg_tenure_days || 0), 0) / data.by_month.length / 30 ).toFixed(1) : "0.0", } const attritionTrendData = data?.by_month?.map((item: any) => ({ month: item.month, exits: item.exits || 0, })) || [] const exitReasonData = data?.by_reason?.map((item: any, index: number) => ({ reason: item.exit_reason || "Unknown", value: item.count || 0, color: ["#ef4444", "#f59e0b", "#8b5cf6", "#ec4899", "#10b981"][index % 5], })) || [] const stageData = data?.by_stage?.map((item: any) => ({ stage: item.lifecycle_stage || "Unknown", count: item.count || 0, })) || [] return (

No Data Available

No attrition data found for the selected period

Attrition Analysis Report

Comprehensive attrition metrics and trends

{/* Removed department and exit type filters */}

Total Exits

{metrics.totalExits}

this period

Early Attrition (<60 Days)

{metrics.earlyAttrition}

{metrics.earlyAttritionPct}% of total

Avg Tenure at Exit

{metrics.avgTenure}

months

Attrition Rate

{metrics.totalExits > 0 ? ((metrics.totalExits / 500) * 100).toFixed(1) : "0.0"}%

calculated rate

Failed to Load Report

{error}

) } const metrics = { avgQA: data?.overall_metrics?.avg_qa_score || 0, avgCSAT: data?.overall_metrics?.avg_csat_score || 0, avgAHT: data?.overall_metrics?.avg_aht_minutes || 0, avgAttendance: data?.overall_metrics?.avg_attendance || 0, } const performanceTrendData = data?.performance_trend || [] const teamPerformanceData = data?.team_performance || [] const topPerformers = data?.top_performers?.map((p: any) => ({ id: p.employee_id, employee_id: p.employee_id, name: p.employee?.full_name || "Unknown", team: "N/A", qa: p.avg_qa?.toFixed(1) || "0", csat: p.avg_csat?.toFixed(1) || "0", aht: "N/A", attendance: p.avg_attendance?.toFixed(1) || "0", })) || [] return (

No Data Available

No performance data found for the selected period

Performance Analytics Report

QA scores, CSAT, AHT, and performance metrics

Team

Brand

Average QA Score

{metrics.avgQA}%

3.2% vs last period

Average CSAT

{metrics.avgCSAT}

0.2 vs last period

Average AHT

{metrics.avgAHT}

minutes

Perfect Attendance

{metrics.avgAttendance}%

of agents

QA Score Trend

CSAT Trend

AHT Trend

Team Performance Comparison

{topPerformers.map((performer) => ( ))}

Top Performers

Employee ID	Name	Team	QA Score	CSAT	AHT	Attendance
{performer.employee_id}	{performer.name}	{performer.team}	{performer.qa}%	{performer.csat}	{performer.aht} min	{performer.attendance}%

) } [V0_FILE]typescriptreact:file="app/dashboard/reports/training/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import Link from "next/link" import DashboardLayout from "@/components/dashboard/dashboard-layout" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Download, ArrowLeft, TrendingUp } from "lucide-react" import { ChartTooltip, ChartTooltipContent } from "@/components/ui/chart" import { Bar, BarChart, Line, LineChart, XAxis, YAxis, CartesianGrid, Legend, ResponsiveContainer } from "recharts" import api from "@/lib/api" import { toast } from "@/components/ui/use-toast" export default function TrainingReportPage() { const router = useRouter() const [isLoading, setIsLoading] = useState(true) const [data, setData] = useState(null) const [error, setError] = useState(null) const [filters, setFilters] = useState({ dateRange: "last_90_days", trainer: "all", }) useEffect(() => { const user = localStorage.getItem("user") if (!user) { router.push("/login") return } loadData() }, [router]) const loadData = async () => { setIsLoading(true) setError(null) try { const reportData = await api.reports.getTraining({ start_date: getStartDate(filters.dateRange), end_date: new Date().toISOString().split("T")[0], }) if (!reportData) { throw new Error("No data received from server") } setData(reportData) } catch (error: any) { const errorMsg = error.response?.data?.message || error.message || "Failed to load training report" setError(errorMsg) console.error("Training report error:", error) toast({ title: "Error Loading Report", description: errorMsg, variant: "destructive", }) } finally { setIsLoading(false) } } const getStartDate = (range: string) => { const date = new Date() switch (range) { case "last_30_days": date.setDate(date.getDate() - 30) break case "last_90_days": date.setDate(date.getDate() - 90) break case "last_6_months": date.setMonth(date.getMonth() - 6) break } return date.toISOString().split("T")[0] } const exportReport = async () => { try { const result = await api.reports.export("training", "excel") if (result?.download_url) { window.open(result.download_url, "_blank") } } catch (error) { console.error("Failed to export report:", error) } } if (isLoading) { return (

Loading training report...

) } if (error) { return (

Failed to Load Report

{error}

) } const metrics = { certificationRate: data?.overall_stats?.certification_rate || 0, avgCertScore: data?.overall_stats?.avg_certification_score || 0, inTraining: data?.overall_stats?.total || 0, avgAbsences: data?.overall_stats?.avg_absences || 0, } const certificationTrendData = data?.certification_trend || [ { month: "Jan", rate: 88, avgScore: 85 }, { month: "Feb", rate: 90, avgScore: 86 }, { month: "Mar", rate: 92, avgScore: 87 }, { month: "Apr", rate: 89, avgScore: 84 }, { month: "May", rate: 93, avgScore: 89 }, { month: "Jun", rate: 92, avgScore: 87.5 }, ] const trainerPerformanceData = data?.by_trainer?.map((trainer: any) => ({ trainer: trainer.trainer_name || "Unknown", certified: trainer.passed || 0, failed: (trainer.total_trainees || 0) - (trainer.passed || 0), avgScore: Math.round(trainer.avg_score || 0), })) || [] const recentGraduates = data?.recent_graduates || [ { id: 1, employee_id: "EMP201", name: "Maria Santos", trainer: "Trainer A", start_date: "2023-12-01", end_date: "2024-01-05", cert_score: 92, nesting_score: 88, status: "Certified", }, { id: 2, employee_id: "EMP202", name: "Juan Dela Cruz", trainer: "Trainer C", start_date: "2023-12-01", end_date: "2024-01-05", cert_score: 95, nesting_score: 90, status: "Certified", }, { id: 3, employee_id: "EMP203", name: "Anna Garcia", trainer: "Trainer B", start_date: "2023-12-01", end_date: "2024-01-05", cert_score: 88, nesting_score: 85, status: "Certified", }, { id: 4, employee_id: "EMP204", name: "Jose Reyes", trainer: "Trainer A", start_date: "2023-12-01", end_date: "2024-01-05", cert_score: 90, nesting_score: 87, status: "Certified", }, { id: 5, employee_id: "EMP205", name: "Pedro Ramos", trainer: "Trainer D", start_date: "2023-12-01", end_date: "2024-01-05", cert_score: 85, nesting_score: 82, status: "Certified", }, ] return (

No Data Available

No training data found for the selected period

Training & Development Report

Certification rates, nesting scores, and training effectiveness

Trainer

Certification Rate

{metrics.certificationRate}%

2.1% vs last period

Avg Training Days

days

Avg Cert Score

{metrics.avgCertScore}%

all trainees

Currently In Training

{metrics.inTraining}

employees

Avg Absences

{metrics.avgAbsences}

days

Certification Rate Trend

Average Certification Score Trend

Trainer Performance Comparison

{recentGraduates.map((graduate) => ( ))}

Recent Graduates

Employee ID	Name	Trainer	Training Period	Cert Score	Nesting Score	Status
{graduate.employee_id}	{graduate.name}	{graduate.trainer}	{graduate.start_date} to {graduate.end_date}	{graduate.cert_score}%	{graduate.nesting_score}%	{graduate.status}

) } [V0_FILE]typescriptreact:file="app/dashboard/reports/headcount/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import Link from "next/link" import DashboardLayout from "@/components/dashboard/dashboard-layout" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Download, ArrowLeft, TrendingUp } from "lucide-react" import { ChartTooltip, ChartTooltipContent } from "@/components/ui/chart" import { Bar, BarChart, Line, LineChart, Pie, PieChart, XAxis, YAxis, CartesianGrid, Legend, ResponsiveContainer, Cell, } from "recharts" import api from "@/lib/api" import { toast } from "@/components/ui/use-toast" export default function HeadcountReportPage() { const router = useRouter() const [isLoading, setIsLoading] = useState(true) const [data, setData] = useState(null) const [error, setError] = useState(null) const [filters, setFilters] = useState({ dateRange: "current", department: "all", }) useEffect(() => { const user = localStorage.getItem("user") if (!user) { router.push("/login") return } loadData() }, [router]) const loadData = async () => { setIsLoading(true) setError(null) try { const reportData = await api.reports.getHeadcount() if (!reportData) { throw new Error("No data received from server") } setData(reportData) } catch (error: any) { const errorMsg = error.response?.data?.message || error.message || "Failed to load headcount report" setError(errorMsg) console.error("Headcount report error:", error) toast({ title: "Error Loading Report", description: errorMsg, variant: "destructive", }) } finally { setIsLoading(false) } } const exportReport = async () => { try { const result = await api.reports.export("headcount", "excel") if (result?.download_url) { window.open(result.download_url, "_blank") } } catch (error) { console.error("Failed to export report:", error) } } if (isLoading) { return (

Loading headcount report...

) } if (error) { return (

Failed to Load Report

{error}

) } const metrics = { activeHeadcount: data?.total_active || 0, monthlyGrowth: 0, // Calculate from trend data avgTenure: 0, // Not provided by backend fullTimeEquivalent: data?.total_active || 0, } const headcountTrendData = data?.headcount_trend?.map((item: any) => ({ month: item.month, headcount: item.count || 0, })) || [] const lifecycleDistributionData = data?.by_lifecycle_stage?.map((item: any, index: number) => ({ stage: item.lifecycle_stage || "Unknown", count: item.count || 0, color: ["#8b5cf6", "#6366f1", "#3b82f6", "#10b981", "#f59e0b"][index % 5], })) || [] const departmentDistributionData = data?.by_team?.map((item: any) => ({ department: item.brand || item.account || "Unknown", count: item.count || 0, })) || [] return (

No Data Available

No headcount data found

Headcount Report

Active workforce, tenure mix, and workforce planning

Department

Active Headcount

{metrics.activeHeadcount}

{metrics.monthlyGrowth}% vs last month

Monthly Growth

+{metrics.monthlyGrowth}%

growth rate

Average Tenure

{metrics.avgTenure}

months

FTE

{metrics.fullTimeEquivalent}

full-time equivalent

Headcount Growth Trend

{lifecycleDistributionData.map((entry, index) => ( ))} } />

Lifecycle Stage Distribution

Tenure Mix

Department Distribution

) } [V0_FILE]vue:file="vue-frontend/src/components/superadmin/SystemSettings.vue" isEdit="true" isMerged="true" [V0_FILE]vue:file="vue-frontend/src/views/SuperAdmin.vue" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" [V0_FILE]vue:file="vue-frontend/src/components/superadmin/UsersManager.vue" isEdit="true" isQuickEdit="true" isMerged="true" [V0_FILE]typescriptreact:file="app/dashboard/employees/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import DashboardLayout from "@/components/dashboard/dashboard-layout" import EmployeeList from "@/components/employees/employee-list" import EmployeeFilters from "@/components/employees/employee-filters" import { ImportExportButtons } from "@/components/import-export-buttons" import { Button } from "@/components/ui/button" import { Plus } from "lucide-react" import { api } from "@/lib/api" import { useToast } from "@/components/ui/use-toast" import { exportToExcel, exportToCSV, importFromFile, downloadTemplate } from "@/lib/export-utils" export default function EmployeesPage() { const [filters, setFilters] = useState({ lifecycle_stage: "", status: "active", search: "", }) const [employees, setEmployees] = useState([]) const [loading, setLoading] = useState(false) const { toast } = useToast() const handleExport = async (format: "xlsx" | "csv") => { try { const data = await api.employees.getAll(filters) const columns = [ { key: "employee_id", label: "Employee ID" }, { key: "first_name", label: "First Name" }, { key: "last_name", label: "Last Name" }, { key: "email", label: "Email" }, { key: "phone", label: "Phone" }, { key: "lifecycle_stage", label: "Lifecycle Stage" }, { key: "status", label: "Status" }, { key: "hire_date", label: "Hire Date" }, { key: "location", label: "Location" }, ] if (format === "xlsx") { exportToExcel(data, columns, "employees") } else { exportToCSV(data, columns, "employees") } toast({ title: "Success", description: `Exported ${data.length} employees to ${format.toUpperCase()}`, }) } catch (error) { toast({ title: "Error", description: "Failed to export employees", variant: "destructive", }) } } const handleImport = async (file: File) => { try { const data = await importFromFile(file) await api.bulkImport("employees", data) toast({ title: "Success", description: `Imported ${data.length} employees successfully`, }) loadEmployees() } catch (error: any) { toast({ title: "Error", description: error.message || "Failed to import employees", variant: "destructive", }) } } const handleDownloadTemplate = () => { const columns = [ { key: "employee_id", label: "Employee ID" }, { key: "first_name", label: "First Name" }, { key: "last_name", label: "Last Name" }, { key: "email", label: "Email" }, { key: "phone", label: "Phone" }, { key: "lifecycle_stage", label: "Lifecycle Stage" }, { key: "status", label: "Status" }, { key: "hire_date", label: "Hire Date" }, { key: "location", label: "Location" }, ] const sampleData = [ { "Employee ID": "EMP001", "First Name": "John", "Last Name": "Doe", Email: "john.doe@company.com", Phone: "+63 917 123 4567", "Lifecycle Stage": "Active", Status: "active", "Hire Date": "2024-01-15", Location: "Manila", }, ] downloadTemplate(columns, sampleData, "employees") } const loadEmployees = async () => { setLoading(true) try { const response = await api.employees.getAll(filters) setEmployees(response || []) } catch (error) { toast({ title: "Error", description: "Failed to load employees", variant: "destructive", }) } finally { setLoading(false) } } useEffect(() => { loadEmployees() }, [filters]) return ( {loading && (

Name	Email	Role	Status	Created	Actions
{{ user.full_name }}	{{ user.email }}		{{ user.is_active ? 'Active' : 'Inactive' }}	{{ formatDate(user.created_at) }}

)} {!loading && (

Employees

Manage employee lifecycle from acquisition to offboarding

Timestamp	User	Action	Entity	IP Address	Details
{{ formatTimestamp(log.created_at) }}	{{ log.user?.name \|\| 'System' }} {{ log.user?.role }}	{{ formatAction(log.action) }}	{{ log.entity_type }} #{{ log.entity_id }}	{{ log.ip_address }}