64 lines
2.6 KiB
TypeScript
64 lines
2.6 KiB
TypeScript
import React from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { useApplications, useInterviews, useStaff, useJobPostings } from '@/lib/krowHooks';
|
|
import { Loader2, BarChart3 } from 'lucide-react';
|
|
import ImpactMetrics from '@/components/krow/ImpactMetrics';
|
|
import AnalyticsMetrics from '@/components/krow/AnalyticsMetrics';
|
|
import PipelineFunnel from '@/components/krow/PipelineFunnel';
|
|
import ScoreDistribution from '@/components/krow/ScoreDistribution';
|
|
import InterviewAnalytics from '@/components/krow/InterviewAnalytics';
|
|
import HiringAnalytics from '@/components/krow/HiringAnalytics';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
export default function Analytics() {
|
|
const { t } = useTranslation();
|
|
const { data: applications = [], isLoading: appsLoading } = useApplications();
|
|
const { data: interviews = [], isLoading: intLoading } = useInterviews();
|
|
const { data: staff = [], isLoading: staffLoading } = useStaff();
|
|
useJobPostings();
|
|
|
|
if (appsLoading || intLoading || staffLoading) {
|
|
return (
|
|
<div className="flex items-center justify-center py-20">
|
|
<Loader2 className="w-6 h-6 text-[#9CA3AF] animate-spin" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -12 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.4 }}
|
|
className="flex items-center gap-3"
|
|
>
|
|
<div className="w-10 h-10 rounded-xl bg-[#0838E0] flex items-center justify-center shadow-lg shadow-blue-500/20">
|
|
<BarChart3 className="w-5 h-5 text-white" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-[22px] font-heading font-bold text-[#111827]">{t('analytics.hiringAnalytics')}</h1>
|
|
<p className="text-[13px] text-[#6B7280]">{t('analytics.applicantsPipelineScoresInterviewsHiringInsights')}</p>
|
|
</div>
|
|
<div className="ml-auto">
|
|
</div>
|
|
</motion.div>
|
|
|
|
<ImpactMetrics applications={applications} interviews={interviews} staff={staff} />
|
|
|
|
<AnalyticsMetrics applications={applications} interviews={interviews} staff={staff} />
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<PipelineFunnel applications={applications} />
|
|
<ScoreDistribution applications={applications} />
|
|
</div>
|
|
|
|
<div>
|
|
<h2 className="text-[11px] font-bold text-[#9CA3AF] tracking-wider mb-3 font-heading">{t('analytics.interviewCompletion')}</h2>
|
|
<InterviewAnalytics applications={applications} interviews={interviews} />
|
|
</div>
|
|
|
|
<HiringAnalytics applications={applications} staff={staff} />
|
|
</div>
|
|
);
|
|
} |