feat: update dashboard and project components for batch handling and icon management

This commit is contained in:
Kemas M. Aryadary Rasyad
2026-07-09 17:39:46 +07:00
parent 328bcbcdc2
commit 88f457258d
8 changed files with 198 additions and 177 deletions
@@ -1,16 +1,9 @@
import { useNavigate } from 'react-router-dom';
import { useProjects } from '../../../../hooks/useProjects';
import * as LucideIcons from 'lucide-react';
import type { LucideProps } from 'lucide-react';
import { getProjectIcon } from '../../../../lib/ProjectIcons';
const toSlug = (name: string) => name.toLowerCase().replace(/\s+/g, '-');
const getDynamicIcon = (iconName: string) => {
const formatted = iconName.charAt(0).toUpperCase() + iconName.slice(1);
const Icon = (LucideIcons as unknown as Record<string, React.ComponentType<LucideProps>>)[formatted];
return Icon ?? LucideIcons.FolderOpen;
};
const HomeProjectList = () => {
const navigate = useNavigate();
const { projects, loading, error } = useProjects();
@@ -27,7 +20,7 @@ const HomeProjectList = () => {
return (
<div>
<h2 className="text-lg font-semibold text-font-shade mb-8">Projects</h2>
<div className="flex flex-col gap-3">
<div className="flex flex-col gap-3 overflow-y-auto max-h-[190px]">
{projects.map((project) => (
<div
key={project.id}
@@ -36,7 +29,7 @@ const HomeProjectList = () => {
>
<div className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style={{ backgroundColor: project.background_color ?? '#dc2626' }}>
{(() => {
const Icon = getDynamicIcon(project.project_icon);
const Icon = getProjectIcon(project.project_icon);
return <Icon className="w-5 h-5 text-white" />;
})()}
</div>
@@ -1,9 +1,9 @@
import type { ProjectTask } from "../../../../types/task.types";
import type { InternTaskItem } from "../../../../types/project.types";
const formatDate = (dateStr: string) =>
new Date(dateStr).toLocaleDateString('id-ID', { day: 'numeric', month: 'short' });
export default function ProjectTimeline({ tasks }: { tasks: ProjectTask[] }) {
export default function ProjectTimeline({ tasks }: { tasks: InternTaskItem[] }) {
const today = new Date();
today.setHours(0, 0, 0, 0);
return (
@@ -1,17 +1,10 @@
import { useNavigate } from 'react-router-dom';
import * as LucideIcons from 'lucide-react';
import type { LucideProps } from 'lucide-react';
import { getProjectIcon } from '../../../../lib/ProjectIcons';
import type { Project } from '../../../../types/project.types';
const getDynamicIcon = (iconName: string) => {
const formatted = iconName.charAt(0).toUpperCase() + iconName.slice(1);
const Icon = (LucideIcons as unknown as Record<string, React.ComponentType<LucideProps>>)[formatted];
return Icon ?? LucideIcons.FolderOpen;
};
const ProjectCard = (project: Project) => {
const navigate = useNavigate();
const Icon = getDynamicIcon(project.project_icon);
const Icon = getProjectIcon(project.project_icon);
const tasksDone = project.task_done;
@@ -20,7 +20,7 @@ const TaskTimeline = () => {
return (
<div>
<h2 className="font-semibold text-font-shade mb-5">Timeline Tugas</h2>
<div className="relative">
<div className="relative overflow-y-auto max-h-[190px]">
<ul className="flex flex-col gap-5">
{tasks.map((item: InternTaskItem, index) => {
const overdue = isOverdue(item.deadline_at);