Skip to content

Commit

Permalink
feat: new updated dashboard
Browse files Browse the repository at this point in the history
  • Loading branch information
@thomasdavis
thomasdavis committed Jul 24, 2024
1 parent c67dc54 commit e32dd10
Show file tree
Hide file tree
Showing 5 changed files with 218 additions and 184 deletions.
239 changes: 142 additions & 97 deletions apps/registry/app/[username]/dashboard/Dashboard.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,21 @@
import React from 'react';
import { Briefcase, Book, Award, FileText, TrendingUp } from 'lucide-react';
import {
Briefcase,
Code,
FileText,
BarChart,
GraduationCap,
} from 'lucide-react';
import { useProfileData } from '../ProfileContext';

import {
Card,
CardContent,
CardHeader,
CardTitle,
} from '@repo/ui/components/ui/card';

import { Progress } from '@repo/ui/components/ui/progress';
import {
totalExperience,
averageJobDuration,
Expand Down Expand Up @@ -30,110 +45,140 @@ const getMetrics = ({ resume }) => {
return ResumeData;
};

const SectionTitle = ({ children }) => (
<h2 className="text-2xl font-bold mb-4 text-gray-800 border-b-2 border-secondary-500 pb-2">
{children}
</h2>
);

const InfoItem = ({ icon: Icon, label, value }) => (
<div className="flex items-center space-x-2 mb-2">
<Icon className="w-5 h-5 text-secondary-500" />
<span className="font-medium text-gray-700">{label}:</span>
<span className="text-gray-900">{value}</span>
</div>
);

const TimelineItem = ({ title, duration }) => (
<div className="mb-4">
<div className="flex items-center mb-1">
<div className="bg-secondary-500 rounded-full w-3 h-3 mr-2"></div>
<h4 className="text-lg font-semibold">{title}</h4>
</div>
<p className="text-sm text-gray-600 ml-5">{duration.years} years</p>
</div>
);

const SkillBadge = ({ skill }) => (
<span className="bg-secondary-100 text-secondary-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded">
{skill}
</span>
);

const ResumeDashboard = () => {
const { resume } = useProfileData();
const ResumeData = getMetrics({ resume });
return (
<div className="w-full p-6 bg-white shadow-lg rounded-lg">
<h1 className="text-3xl font-bold mb-6 text-center text-gray-800">
Resume Dashboard
</h1>
<>
<div className="min-h-screen p-8">
<div className="">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<Card>
<CardHeader>
<CardTitle className="text-xl font-semibold flex items-center">
<Briefcase className="w-5 h-5 mr-2" />
Overview
</CardTitle>
</CardHeader>
<CardContent className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Total Experience</p>
<p className="text-2xl font-bold">
{ResumeData.totalExperience.years} y{' '}
{ResumeData.totalExperience.months} m
</p>
</div>
<div>
<p className="text-sm text-gray-500">Total Projects</p>
<p className="text-2xl font-bold">
{ResumeData.totalProjects}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Total Skills</p>
<p className="text-2xl font-bold">{ResumeData.totalSkills}</p>
</div>
<div>
<p className="text-sm text-gray-500">Certifications</p>
<p className="text-2xl font-bold">
{ResumeData.totalCertifications ?? 0}
</p>
</div>
</CardContent>
</Card>

<section className="mb-8">
<SectionTitle>Overview</SectionTitle>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<InfoItem
icon={Briefcase}
label="Total Experience"
value={`${ResumeData.totalExperience.years}y ${ResumeData.totalExperience.months}m`}
/>
<InfoItem
icon={FileText}
label="Total Projects"
value={ResumeData.totalProjects}
/>
<InfoItem
icon={Award}
label="Total Skills"
value={ResumeData.totalSkills}
/>
<InfoItem
icon={Award}
label="Certifications"
value={ResumeData.totalCertifications || 0}
/>
<InfoItem
icon={Book}
label="Education"
value={ResumeData.educationLevel}
/>
</div>
</section>
<Card>
<CardHeader>
<CardTitle className="text-xl font-semibold flex items-center">
<GraduationCap className="w-5 h-5 mr-2" />
Education
</CardTitle>
</CardHeader>
<CardContent>
<p className="text-2xl font-bold">
{ResumeData.educationLevel}
</p>
<p className="text-sm text-gray-500">Highest Degree Achieved</p>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle className="text-xl font-semibold flex items-center">
<BarChart className="w-5 h-5 mr-2" />
Stats
</CardTitle>
</CardHeader>
<CardContent className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Total Jobs</p>
<p className="text-2xl font-bold">{ResumeData.totalJobs}</p>
</div>
<div>
<p className="text-sm text-gray-500">Avg Job Duration</p>
<p className="text-2xl font-bold">
{`${ResumeData.averageJobDuration.years}y ${ResumeData.averageJobDuration.months}m`}
</p>
</div>
</CardContent>
</Card>
</div>

<section className="mb-8">
<SectionTitle>Top Skill Categories</SectionTitle>
<div className="flex flex-wrap gap-2 mb-4">
{resume.skills?.map((s, index) => (
<SkillBadge key={index} skill={s.name} />
))}
</div>
</section>
<Card className="mb-8">
<CardHeader>
<CardTitle className="text-xl font-semibold flex items-center">
<Code className="w-5 h-5 mr-2" />
Top Skill Categories
</CardTitle>
</CardHeader>
<CardContent>
<div className="flex flex-wrap gap-2">
{ResumeData.topSkillCategories.map((skill, index) => (
<span
key={index}
className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium"
>
{skill}
</span>
))}
</div>
</CardContent>
</Card>

<section className="mb-8">
<SectionTitle>Career Progression</SectionTitle>
<div className="space-y-4">
{ResumeData.careerProgression.map((job, index) => (
<TimelineItem
key={index}
title={job.title}
duration={job.duration}
/>
))}
</div>
<div className="mt-4">
<InfoItem
icon={Briefcase}
label="Total Jobs"
value={ResumeData.totalJobs}
/>
<InfoItem
icon={TrendingUp}
label="Avg Job Duration"
value={`${ResumeData.averageJobDuration.years}y ${ResumeData.averageJobDuration.months}m`}
/>
<Card>
<CardHeader>
<CardTitle className="text-xl font-semibold flex items-center">
<FileText className="w-5 h-5 mr-2" />
Career Progression
</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-4">
{ResumeData.careerProgression.map((job, index) => (
<div key={index} className="flex items-center">
<div className="w-1/3">
<p className="font-semibold">{job.title}</p>
<p className="text-sm text-gray-500">
{job.duration.years} years {job.duration.months} months
</p>
</div>
<div className="w-2/3">
<Progress
value={
(parseInt(job.duration.years) +
parseInt(job.duration.months / 12)) *
5
}
className="h-2"
/>
</div>
</div>
))}
</div>
</CardContent>
</Card>
</div>
</section>
</div>
</div>
</>
);
};

Expand Down
Loading

0 comments on commit e32dd10

Please sign in to comment.