feat: initial commit
This commit is contained in:
Kemas M. Aryadary Rasyad
@@ -0,0 +1,25 @@
|
||||
import { Bell } from "lucide-react"
|
||||
import humiclogo from "../../assets/logo.png";
|
||||
|
||||
const Header = () => {
|
||||
return (
|
||||
<header className='sticky top-0 flex w-full justify-between items-center py-4 px-12 bg-white shadow-md z-10'>
|
||||
<div className=''>
|
||||
<img
|
||||
src={humiclogo}
|
||||
alt="Humic Logo"
|
||||
className="w-[130px] cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-row gap-4 items-center">
|
||||
<Bell className="w-6 h-6 hover:text-red-800"/>
|
||||
<div className="bg-blue-500 rounded-full w-8 h-8">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
export default Header
|
||||
@@ -0,0 +1,26 @@
|
||||
import HomeHeader from "./components/HomeHeader";
|
||||
import HomeProjectList from "./components/HomeProjectList";
|
||||
import HomeCalendar from "./components/HomeCalendar";
|
||||
import TaskTimeline from "./components/TaskTImeline";
|
||||
|
||||
// PR: tambahin breadcrumb
|
||||
export default function HomeInternPage() {
|
||||
return (
|
||||
<div className="flex-1 px-14 py-10 bg-gray-50">
|
||||
<HomeHeader />
|
||||
<div className="flex flex-col gap-5">
|
||||
<div className="grid grid-cols-2 gap-5">
|
||||
<div className="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<HomeProjectList />
|
||||
</div>
|
||||
<div className="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<TaskTimeline />
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl">
|
||||
<HomeCalendar />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,71 @@
|
||||
import { useState } from 'react';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import { mockProjects } from '../../../lib/mockData';
|
||||
import ForumTab from './ProjectForum';
|
||||
import ParticipantsTab from './ProjectParticipants';
|
||||
import { ChevronLeft } from 'lucide-react';
|
||||
|
||||
// ─── ProjectDetailPage ─────────────────────────────────────────────────────────
|
||||
export default function ProjectDetailPage() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const [activeTab, setActiveTab] = useState<'forum' | 'participants'>('forum');
|
||||
|
||||
const handleBack = () => {
|
||||
if (window.history.length > 1) {
|
||||
navigate(-1);
|
||||
} else {
|
||||
navigate('/intern/projects');
|
||||
}
|
||||
};
|
||||
|
||||
const project = mockProjects.find((p) => p.id === Number(id));
|
||||
|
||||
if (!project) {
|
||||
return (
|
||||
<div className="p-10 text-[#888]">
|
||||
Project tidak ditemukan.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const tabClass = (tab: string) =>
|
||||
`pr-0 py-2.5 mr-7 text-sm bg-transparent border-0 cursor-pointer transition-colors duration-150 border-b-2 ${activeTab === tab
|
||||
? 'font-bold text-[#C0392B] border-[#C0392B]'
|
||||
: 'font-medium text-[#666] border-transparent'
|
||||
}`;
|
||||
|
||||
return (
|
||||
<div className="bg-gray-50 min-h-screen">
|
||||
<div className="px-24 py-10">
|
||||
|
||||
{/* Back Button */}
|
||||
<button
|
||||
onClick={handleBack}
|
||||
className="flex items-center gap-2 mb-6 text-sm font-medium text-[#666] hover:text-[#C0392B] transition-colors duration-150 group"
|
||||
>
|
||||
<span className='flex flex-row gap-2'>
|
||||
<ChevronLeft width={20} height={20} className="transition-transform duration-150 group-hover:-translate-x-1" />
|
||||
Kembali ke Daftar Project
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex mb-4">
|
||||
<button className={tabClass('forum')} onClick={() => setActiveTab('forum')}>
|
||||
Forum
|
||||
</button>
|
||||
<button className={tabClass('participants')} onClick={() => setActiveTab('participants')}>
|
||||
Participants
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Tab content */}
|
||||
{activeTab === 'forum'
|
||||
? <ForumTab project={project} />
|
||||
: <ParticipantsTab project={project} />
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import type { Project } from '../../../lib/mockData';
|
||||
import ProjectTimeline from './components/ProjectTimeline';
|
||||
import TaskCard from './components/ProjectTaskCard';
|
||||
import HeroProject from './components/Hero-project';
|
||||
|
||||
export default function ForumTab({ project }: { project: Project }) {
|
||||
return (
|
||||
<div>
|
||||
{/* Hero banner */}
|
||||
<HeroProject title={project.name} description={project.description} />
|
||||
|
||||
{/* Timeline + Task list */}
|
||||
<div className="flex gap-7 items-start">
|
||||
<div className="w-1/5 bg-white rounded-xl p-5 shadow-md shrink-0">
|
||||
<ProjectTimeline tasks={project.tasks} />
|
||||
</div>
|
||||
|
||||
<div className="w-4/5">
|
||||
{project.tasks.map((task, idx) => (
|
||||
<TaskCard key={idx} task={task} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import type { Project, Intern } from '../../../lib/mockData';
|
||||
|
||||
export default function ParticipantsTab({ project }: { project: Project }) {
|
||||
return (
|
||||
<div>
|
||||
{/* Mentor */}
|
||||
<div className="mb-8">
|
||||
<h3 className=" font-bold text-base text-[#1a1a1a] mb-3.5">
|
||||
Mentor
|
||||
</h3>
|
||||
<div className="border-b border-[#eee] pb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className=" text-sm text-[#333]">
|
||||
{project.mentor}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Members */}
|
||||
<div>
|
||||
<h3 className="font-bold text-base text-[#1a1a1a] mb-3.5">
|
||||
Members
|
||||
</h3>
|
||||
{project.interns.map((intern: Intern, idx: number) => (
|
||||
<div
|
||||
key={idx}
|
||||
className={`flex items-center justify-between py-3 ${
|
||||
idx < project.interns.length - 1 ? 'border-b border-[#f0f0f0]' : ''
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className=" text-sm text-[#333]">
|
||||
{intern.email}
|
||||
</span>
|
||||
</div>
|
||||
<span className=" text-[13px] text-[#555] font-semibold">
|
||||
{intern.role}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import ProjectCard from './components/ProjectsCard'
|
||||
import { mockProjects } from '../../../lib/mockData'
|
||||
|
||||
export default function ProjectsPage() {
|
||||
return (
|
||||
<div className="px-14 py-15 bg-gray-50 min-h-screen">
|
||||
<div className="flex flex-col gap-1 mb-6">
|
||||
<span className="text-4xl font-bold">List Projects</span>
|
||||
<h1 className="text-lg text-gray-500">View assigned projects and track their progress.</h1>
|
||||
</div>
|
||||
|
||||
{/* Grid card */}
|
||||
<div className="flex flex-wrap gap-4">
|
||||
{mockProjects.map(project => (
|
||||
<ProjectCard key={project.id} {...project} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
const SertificatePage = () => {
|
||||
return (
|
||||
<div className="px-15 py-10">
|
||||
<div className="mb-6 flex flex-col gap-1">
|
||||
<h1 className="text-4xl font-bold mb-2">Certificates</h1>
|
||||
<p className="font-light text-gray-500">View and download internship certificates</p>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SertificatePage
|
||||
@@ -0,0 +1,79 @@
|
||||
import { Briefcase, Globe, Users } from 'lucide-react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
const footerLinks = {
|
||||
Internship: [
|
||||
{ label: "Beranda", path: "/" },
|
||||
{ label: "Tentang", path: "/tentang" },
|
||||
{ label: "Life At Humic", path: "/life" },
|
||||
],
|
||||
"Internify Logo": [
|
||||
{ label: "Humic Website", path: "/humic" },
|
||||
{ label: "Our Activity", path: "/activity" },
|
||||
{ label: "Life At Humic", path: "/life-humic" },
|
||||
{ label: "Our Developer", path: "/developer" },
|
||||
],
|
||||
};
|
||||
|
||||
const socials = [
|
||||
{ label: "Website", icon: Globe, href: "https://placeholder.com" },
|
||||
{ label: "Team", icon: Users, href: "https://placeholder.com" },
|
||||
{ label: "Work", icon: Briefcase, href: "https://placeholder.com" },
|
||||
];
|
||||
|
||||
|
||||
export function FooterIntern() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<footer className="bg-white border-t border-gray-100 px-14 py-8 flex gap-12 flex-wrap">
|
||||
{/* Brand info */}
|
||||
<div className="flex flex-col gap-2 flex-shrink-0 w-52">
|
||||
<p className="text-sm font-bold text-gray-900">Internify Logo</p>
|
||||
<address className="text-[12.5px] text-gray-400 leading-relaxed not-italic">
|
||||
Gedung Kultubai Selatan, Blok F<br />
|
||||
Jl. Telekomunikasi, Terusan Buah Batu Bandung<br />
|
||||
Jawa Barat, Indonesia. 40257
|
||||
</address>
|
||||
<div className="flex gap-2 mt-1">
|
||||
{socials.map(({ label, icon: Icon, href }) => (
|
||||
<a
|
||||
key={label}
|
||||
href={href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label={label}
|
||||
className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-400 hover:bg-red-50 hover:text-red-600 transition-colors"
|
||||
>
|
||||
<Icon className="w-4 h-4" />
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Link columns */}
|
||||
<div className="flex gap-12 flex-1 justify-end flex-wrap">
|
||||
{Object.entries(footerLinks).map(([title, links]) => (
|
||||
<div key={title} className="flex flex-col gap-2.5 min-w-[110px]">
|
||||
<p className="text-[13px] font-bold text-gray-900">{title}</p>
|
||||
<ul className="flex flex-col gap-2">
|
||||
{links.map(({ label, path }) => (
|
||||
<li key={label}>
|
||||
<button
|
||||
onClick={() => navigate(path)}
|
||||
className="text-[12.5px] text-gray-400 hover:text-red-600 transition-colors text-left bg-transparent border-none p-0 cursor-pointer"
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export default FooterIntern
|
||||
@@ -0,0 +1,26 @@
|
||||
interface HeroProps {
|
||||
title: string,
|
||||
description: string
|
||||
}
|
||||
|
||||
export default function HeroProject({ title, description }: HeroProps) {
|
||||
return (
|
||||
<div className="relative overflow-hidden rounded-xl px-8 py-7 mb-7 bg-gradient-to-br from-[#8B1A1A] via-[#C0392B] to-[#6B1414]">
|
||||
{/* Decorative circles */}
|
||||
<div className="absolute -top-8 -right-8 w-36 h-36 rounded-full bg-white/5" />
|
||||
<div className="absolute -bottom-5 right-16 w-20 h-20 rounded-full bg-white/[0.07]" />
|
||||
|
||||
<h2 className="mb-3 font-extrabold text-xl text-white tracking-[0.3px]">
|
||||
{title.toUpperCase()}
|
||||
</h2>
|
||||
{description.split('\n\n').map((para, i) => (
|
||||
<p
|
||||
key={i}
|
||||
className={`text-[13px] text-white/85 leading-[1.65] ${i === 0 ? 'mb-2.5' : 'mb-0'}`}
|
||||
>
|
||||
{para}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,181 @@
|
||||
import { useState } from 'react'
|
||||
import { ChevronLeft, ChevronRight } from 'lucide-react'
|
||||
|
||||
interface Deadline {
|
||||
date: number
|
||||
month: number
|
||||
year: number
|
||||
label: string
|
||||
}
|
||||
|
||||
const DEADLINES: Deadline[] = [
|
||||
{ date: 4, month: 4, year: 2025, label: 'Laporan Progress 1 Internify– 4 May' },
|
||||
{ date: 5, month: 4, year: 2025, label: 'Laporan Progress 1 Internify– 4 May' },
|
||||
]
|
||||
|
||||
const DAY_LABELS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
|
||||
const MONTH_NAMES = [
|
||||
'January', 'February', 'March', 'April', 'May', 'June',
|
||||
'July', 'August', 'September', 'October', 'November', 'December',
|
||||
]
|
||||
|
||||
function getDaysInMonth(year: number, month: number) {
|
||||
return new Date(year, month + 1, 0).getDate()
|
||||
}
|
||||
|
||||
function getFirstDayOfMonth(year: number, month: number) {
|
||||
return new Date(year, month, 1).getDay()
|
||||
}
|
||||
|
||||
const HomeCalendar = () => {
|
||||
const today = new Date()
|
||||
const [currentYear, setCurrentYear] = useState(2025)
|
||||
const [currentMonth, setCurrentMonth] = useState(4) // May = 4 (0-indexed)
|
||||
|
||||
const daysInMonth = getDaysInMonth(currentYear, currentMonth)
|
||||
const firstDay = getFirstDayOfMonth(currentYear, currentMonth)
|
||||
|
||||
const prevMonth = () => {
|
||||
if (currentMonth === 0) {
|
||||
setCurrentMonth(11)
|
||||
setCurrentYear(y => y - 1)
|
||||
} else {
|
||||
setCurrentMonth(m => m - 1)
|
||||
}
|
||||
}
|
||||
|
||||
const nextMonth = () => {
|
||||
if (currentMonth === 11) {
|
||||
setCurrentMonth(0)
|
||||
setCurrentYear(y => y + 1)
|
||||
} else {
|
||||
setCurrentMonth(m => m + 1)
|
||||
}
|
||||
}
|
||||
|
||||
const isToday = (day: number) =>
|
||||
day === today.getDate() &&
|
||||
currentMonth === today.getMonth() &&
|
||||
currentYear === today.getFullYear()
|
||||
|
||||
const hasDeadline = (day: number) =>
|
||||
DEADLINES.some(d => d.date === day && d.month === currentMonth && d.year === currentYear)
|
||||
|
||||
const upcomingDeadlines = DEADLINES.filter(
|
||||
d => d.month === currentMonth && d.year === currentYear
|
||||
)
|
||||
|
||||
// Previous month trailing days
|
||||
const prevMonthDays = getDaysInMonth(currentYear, currentMonth - 1 < 0 ? 11 : currentMonth - 1)
|
||||
const trailingDays = Array.from({ length: firstDay }, (_, i) => prevMonthDays - firstDay + 1 + i)
|
||||
|
||||
// Current month days
|
||||
const currentDays = Array.from({ length: daysInMonth }, (_, i) => i + 1)
|
||||
|
||||
// Next month leading days
|
||||
const totalCells = Math.ceil((firstDay + daysInMonth) / 7) * 7
|
||||
const leadingDays = Array.from({ length: totalCells - firstDay - daysInMonth }, (_, i) => i + 1)
|
||||
|
||||
// Bold dates (weekends or special)
|
||||
const isBold = (day: number) => {
|
||||
const d = new Date(currentYear, currentMonth, day).getDay()
|
||||
return d === 0 || d === 6 // Sun or Sat
|
||||
}
|
||||
|
||||
return (
|
||||
<div className=" px-13 py-5">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-base font-semibold text-gray-800">
|
||||
{MONTH_NAMES[currentMonth]} {currentYear}
|
||||
</h2>
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={prevMonth}
|
||||
className="p-1 rounded hover:bg-gray-100 transition-colors"
|
||||
aria-label="Previous month"
|
||||
>
|
||||
<ChevronLeft className="w-4 h-4 text-gray-500" />
|
||||
</button>
|
||||
<button
|
||||
onClick={nextMonth}
|
||||
className="p-1 rounded hover:bg-gray-100 transition-colors"
|
||||
aria-label="Next month"
|
||||
>
|
||||
<ChevronRight className="w-4 h-4 text-gray-500" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Day labels */}
|
||||
<div className="grid grid-cols-7 mb-1">
|
||||
{DAY_LABELS.map(day => (
|
||||
<div key={day} className="text-center text-xs text-gray-400 font-medium py-1">
|
||||
{day}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Calendar grid */}
|
||||
<div className="grid grid-cols-7">
|
||||
{/* Trailing days from prev month */}
|
||||
{trailingDays.map(day => (
|
||||
<div key={`prev-${day}`} className="text-center py-2">
|
||||
<span className="text-xs text-gray-300">{day}</span>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Current month days */}
|
||||
{currentDays.map(day => (
|
||||
<div key={day} className="flex justify-center items-center py-1 px-4">
|
||||
{isToday(day) ? (
|
||||
<span className="w-8 h-7 flex items-center justify-center rounded bg-red-800 text-white text-xs font-semibold">
|
||||
{day}
|
||||
</span>
|
||||
) : (
|
||||
<span
|
||||
className={`w-full h-7 flex items-center justify-center text-xs rounded
|
||||
${isBold(day) ? 'font-bold text-gray-800' : 'text-gray-700'}
|
||||
${hasDeadline(day) ? 'bg-red-700 text-white' : ''}
|
||||
hover:bg-gray-100 cursor-pointer transition-colors`}
|
||||
>
|
||||
{day}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Leading days from next month */}
|
||||
{leadingDays.map(day => (
|
||||
<div key={`next-${day}`} className="text-center py-2">
|
||||
<span className="text-xs text-gray-300">{day}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Divider */}
|
||||
<hr className="my-3 border-gray-100" />
|
||||
|
||||
{/* Upcoming Deadlines */}
|
||||
<div>
|
||||
<p className="text-[10px] font-semibold text-gray-400 uppercase tracking-widest mb-2">
|
||||
Upcoming Deadlines
|
||||
</p>
|
||||
{upcomingDeadlines.length > 0 ? (
|
||||
<ul className="flex flex-col gap-1">
|
||||
{upcomingDeadlines.map((d, i) => (
|
||||
<li key={i} className="flex items-center gap-2">
|
||||
<span className="w-2 h-2 rounded-full bg-red-600 flex-shrink-0" />
|
||||
<span className="text-xs text-gray-600">{d.label}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<p className="text-sm text-gray-400">No upcoming deadlines this month.</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default HomeCalendar
|
||||
@@ -0,0 +1,12 @@
|
||||
const HomeHeader = () => {
|
||||
const name = "Karina";
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-start px-0 mb-5">
|
||||
<h1 className="text-2xl font-bold text-gray-900">Hi, {name}!</h1>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default HomeHeader
|
||||
@@ -0,0 +1,40 @@
|
||||
import { Code2, ChessKing, Beef } from 'lucide-react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { mockProjects } from '../../../../lib/mockData'
|
||||
|
||||
interface Project {
|
||||
name: string
|
||||
role: string
|
||||
logo: React.ElementType
|
||||
iconBg: string
|
||||
iconColor: string
|
||||
}
|
||||
|
||||
const HomeProjectList = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-4">Projects</h2>
|
||||
<div className="flex flex-col gap-3">
|
||||
{mockProjects.map((project, index) => {
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
onClick={() => navigate(`/intern/projects/${project.id}`)}
|
||||
className="flex items-center gap-4 border border-gray-200 rounded-lg px-4 py-3 hover:bg-gray-50 cursor-pointer transition-colors duration-150"
|
||||
>
|
||||
<div className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 bg-gray-300`}>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-gray-800">{project.name}</p>
|
||||
{/* <p className="text-xs text-gray-400">{project.role}</p> */}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default HomeProjectList
|
||||
@@ -0,0 +1,34 @@
|
||||
import type { Task } from "../../../../lib/mockData";
|
||||
|
||||
const formatDate = (date: Date) =>
|
||||
new Date(date).toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' });
|
||||
|
||||
export default function TaskCard({ task }: { task: Task }) {
|
||||
return (
|
||||
<div className="border border-[#eee] rounded-[10px] px-5 py-4 mb-3 bg-white shadow-[0_1px_4px_rgba(0,0,0,0.05)] flex items-start justify-between gap-3">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className=" text-[11px] text-[#888] mb-1">
|
||||
Deadline : {formatDate(task.deadline.date)} at {task.deadline.time}
|
||||
</div>
|
||||
<div className=" font-bold text-[15px] text-[#1a1a1a] mb-1">
|
||||
{task.title}
|
||||
</div>
|
||||
<div className=" text-[13px] text-[#666]">
|
||||
{task.description}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="shrink-0">
|
||||
{task.isSubmitted ? (
|
||||
<span className=" inline-block bg-[#27AE60] text-white font-bold text-xs px-3.5 py-[5px] rounded-md tracking-[0.5px]">
|
||||
DONE
|
||||
</span>
|
||||
) : (
|
||||
<button className=" bg-white text-[#1a1a1a] border-[1.5px] border-[#d0d0d0] font-semibold text-xs px-3.5 py-[5px] rounded-md cursor-pointer whitespace-nowrap transition-colors duration-150 hover:border-[#C0392B] hover:text-[#C0392B]">
|
||||
Mark as Done
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
import type { Task } from "../../../../lib/mockData";
|
||||
|
||||
const formatDate = (date: Date) =>
|
||||
new Date(date).toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' });
|
||||
|
||||
export default function ProjectTimeline({ tasks }: { tasks: Task[] }) {
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center gap-1.5 mb-4">
|
||||
<span className="font-semibold text-sm text-[#1a1a1a]">
|
||||
Timeline
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ul className="relative pl-4">
|
||||
{tasks.map((task, idx) => {
|
||||
const d = new Date(task.deadline.date);
|
||||
d.setHours(0, 0, 0, 0);
|
||||
const isToday = d.getTime() === today.getTime();
|
||||
const isPast = d < today;
|
||||
const active = isToday || isPast;
|
||||
|
||||
return (
|
||||
<li key={idx} className="relative mb-6 list-none">
|
||||
{/* Dot */}
|
||||
<div
|
||||
className={`absolute -left-4 top-0.5 w-2.5 h-2.5 rounded-full border-2 border-white ${active ? 'bg-[#C0392B]' : 'bg-[#ccc]'
|
||||
} ${isToday ? 'shadow-md' : ''}`}
|
||||
/>
|
||||
<div
|
||||
className={`text-[11px] font-semibold ${isToday ? 'text-[#C0392B]' : 'text-[#888]'
|
||||
}`}
|
||||
>
|
||||
{isToday ? 'Hari ini' : formatDate(task.deadline.date)}
|
||||
</div>
|
||||
<div className="text-xs text-[#555] mt-px leading-[1.3]">
|
||||
{task.title}
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
|
||||
interface ProjectCardProps {
|
||||
id: number | string
|
||||
name: string
|
||||
mentor: string
|
||||
avatarUrl?: string
|
||||
thumbnailUrl?: string
|
||||
progress: number
|
||||
tasksDone: number
|
||||
tasksTotal: number
|
||||
}
|
||||
|
||||
const ProjectCard = ({
|
||||
id,
|
||||
name,
|
||||
mentor,
|
||||
avatarUrl,
|
||||
thumbnailUrl,
|
||||
progress,
|
||||
tasksDone,
|
||||
tasksTotal,
|
||||
}: ProjectCardProps) => {
|
||||
const navigate = useNavigate()
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100 w-[260px] flex flex-col">
|
||||
{/* Thumbnail */}
|
||||
<div className="h-[150px] bg-gradient-to-tr from-red-700 to-red-800 overflow-hidden">
|
||||
{thumbnailUrl && (
|
||||
<img src={thumbnailUrl} alt={name} className="w-full h-full object-cover" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-3 flex flex-col gap-2">
|
||||
<p className="text-sm font-semibold text-gray-800 leading-tight">{name}</p>
|
||||
|
||||
{/* Mentor */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-6 h-6 rounded-full bg-gray-200 overflow-hidden flex-shrink-0">
|
||||
{avatarUrl ? (
|
||||
<img src={avatarUrl} alt={mentor} className="w-full h-full object-cover" />
|
||||
) : (
|
||||
<div className="w-full h-full bg-gray-300" />
|
||||
)}
|
||||
</div>
|
||||
<span className="text-xs text-gray-500 truncate">{mentor}</span>
|
||||
</div>
|
||||
|
||||
{/* Progress bar */}
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="w-full h-1.5 bg-gray-200 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-red-600 rounded-full transition-all duration-300"
|
||||
style={{ width: `${progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-[10px] text-gray-400 text-right">
|
||||
{tasksDone}/{tasksTotal}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Button */}
|
||||
<button
|
||||
onClick={() => navigate(`/intern/projects/${id}`)}
|
||||
className="w-full bg-red-600 hover:bg-red-700 text-white text-xs font-medium py-1.5 rounded-lg transition-colors"
|
||||
>
|
||||
View Project
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProjectCard
|
||||
@@ -0,0 +1,97 @@
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Home, FolderKanban, Award, Settings, HelpCircle, LogOut, ChevronRight } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
|
||||
const navItems = [
|
||||
{ label: "Home", icon: Home, path: "/intern" },
|
||||
{ label: "List Projects", icon: FolderKanban, path: "/intern/projects" },
|
||||
{ label: "Certificates", icon: Award, path: "/intern/certificates" },
|
||||
];
|
||||
|
||||
const prefItems = [
|
||||
{ label: "Settings", icon: Settings, path: "/intern/settings" },
|
||||
{ label: "FAQ", icon: HelpCircle, path: "/intern/faq" },
|
||||
{ label: "Logout", icon: LogOut, path: "/intern/logout", danger: true },
|
||||
];
|
||||
|
||||
function SidebarIntern() {
|
||||
const navigate = useNavigate();
|
||||
const [active, setActive] = useState("/intern");
|
||||
|
||||
const handleNav = (path: string) => {
|
||||
setActive(path);
|
||||
navigate(path);
|
||||
};
|
||||
|
||||
return (
|
||||
<aside className="w-[279px] bg-white border-r border-gray-100 flex flex-col py-5 px-3 gap-1 sticky top-[73px] h-[calc(100vh-73px)] overflow-y-auto flex-shrink-0">
|
||||
{/* Brand */}
|
||||
<div className="flex items-center gap-2.5 px-2 pb-4">
|
||||
<div className="w-9 h-9 rounded-[10px] bg-red-600 flex items-center justify-center flex-shrink-0">
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-bold text-gray-900 leading-tight">Internify</p>
|
||||
<p className="text-[11px] text-gray-400">LMS Portal</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="h-px bg-gray-100 my-1" />
|
||||
|
||||
{/* Main nav */}
|
||||
<nav className="flex flex-col gap-0.5">
|
||||
{navItems.map(({ label, icon: Icon, path }) => {
|
||||
const isActive = active === path;
|
||||
return (
|
||||
<button
|
||||
key={path}
|
||||
onClick={() => handleNav(path)}
|
||||
className={`flex items-center gap-2.5 w-full px-3 py-2 rounded-lg text-[13.5px] font-medium text-left transition-colors
|
||||
${isActive
|
||||
? "bg-red-50 text-red-600 font-semibold border-l-4 border-red-600"
|
||||
: "text-gray-500 hover:bg-red-50 hover:text-red-600"
|
||||
}`}
|
||||
>
|
||||
<Icon className="w-[18px] h-[18px] flex-shrink-0" />
|
||||
<span>{label}</span>
|
||||
{isActive && (
|
||||
<ChevronRight className="w-3.5 h-3.5 ml-auto opacity-60" />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
<div className="h-px bg-gray-100 my-1" />
|
||||
|
||||
{/* Preferences */}
|
||||
<p className="text-[10px] font-semibold tracking-widest text-gray-400 px-3 py-1.5">
|
||||
PREFERENCES
|
||||
</p>
|
||||
<nav className="flex flex-col gap-0.5">
|
||||
{prefItems.map(({ label, icon: Icon, path, danger }) => {
|
||||
const isActive = active === path;
|
||||
return (
|
||||
<button
|
||||
key={path}
|
||||
onClick={() => handleNav(path)}
|
||||
className={`flex items-center gap-2.5 w-full px-3 py-2 rounded-lg text-[13.5px] font-medium text-left transition-colors
|
||||
${isActive
|
||||
? "bg-red-50 text-red-600 font-semibold"
|
||||
: danger
|
||||
? "text-gray-400 hover:bg-red-50 hover:text-red-600"
|
||||
: "text-gray-500 hover:bg-red-50 hover:text-red-600"
|
||||
}`}
|
||||
>
|
||||
<Icon className="w-[18px] h-[18px] flex-shrink-0" />
|
||||
<span>{label}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export default SidebarIntern
|
||||
@@ -0,0 +1,79 @@
|
||||
interface Task {
|
||||
tanggal: string
|
||||
title: string
|
||||
description: string
|
||||
}
|
||||
|
||||
interface TaskTimelineProps {
|
||||
tasks?: Task[]
|
||||
}
|
||||
|
||||
const defaultTasks: Task[] = [
|
||||
{
|
||||
tanggal: 'MAY 14, 2026 AT 23:59 PM',
|
||||
title: 'Laporan tugas 1',
|
||||
description: 'Berisi design uiux, dan user flow dari aplikasi internify',
|
||||
},
|
||||
{
|
||||
tanggal: 'MAY 15, 2026 AT 23:59 PM',
|
||||
title: 'Laporan tugas 1',
|
||||
description: 'Berisi design uiux, dan user flow dari aplikasi internify',
|
||||
},
|
||||
{
|
||||
tanggal: 'MAY 16, 2026 AT 23:59 PM',
|
||||
title: 'Laporan tugas 1',
|
||||
description: 'Berisi design uiux, dan user flow dari aplikasi internify',
|
||||
},
|
||||
]
|
||||
|
||||
const TaskTimeline = ({ tasks = defaultTasks }: TaskTimelineProps) => {
|
||||
const today = new Date()
|
||||
|
||||
const isOverdue = (tanggal: string) => {
|
||||
const deadline = new Date(tanggal)
|
||||
return deadline < today
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2 className="text-base font-semibold text-gray-800 mb-5">Task Timeline</h2>
|
||||
|
||||
<div className="relative">
|
||||
{/* Vertical line */}
|
||||
<div className="absolute left-1.5 top-2 bottom-2 w-px bg-gray-200" />
|
||||
|
||||
<ul className="flex flex-col gap-5">
|
||||
{tasks.map((task, index) => {
|
||||
const overdue = isOverdue(task.tanggal)
|
||||
|
||||
return (
|
||||
<li key={index} className="flex gap-4 pl-0">
|
||||
{/* Dot */}
|
||||
<div className="relative flex-shrink-0 mt-1">
|
||||
<span
|
||||
className={`block w-3 h-3 rounded-full border-2 z-10 relative
|
||||
${overdue
|
||||
? 'bg-red-500 border-red-500'
|
||||
: 'bg-white border-gray-300'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex flex-col gap-0.5 min-w-0">
|
||||
<p className="text-[10px] font-semibold text-gray-400 uppercase tracking-widest">
|
||||
{task.tanggal}
|
||||
</p>
|
||||
<p className="text-sm font-semibold text-gray-800">{task.title}</p>
|
||||
<p className="text-xs text-gray-500">{task.description}</p>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TaskTimeline
|
||||
@@ -0,0 +1,36 @@
|
||||
import { Outlet } from "react-router-dom";
|
||||
import Header from './Header';
|
||||
import SidebarIntern from './intern/components/SidebarIntern';
|
||||
import SidebarAdmin from '../../Layout/SidebarAdmin';
|
||||
import FooterIntern from './intern/components/FooterIntern';
|
||||
|
||||
export const InternLayout = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex flex-col">
|
||||
<Header />
|
||||
<div className="flex flex-1">
|
||||
<SidebarIntern />
|
||||
<main className="flex-1 flex flex-col min-w-0">
|
||||
<Outlet />
|
||||
</main>
|
||||
</div>
|
||||
<FooterIntern />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const MentorLayout = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex flex-col">
|
||||
<Header />
|
||||
<div className="flex flex-1">
|
||||
<SidebarAdmin />
|
||||
<main className="flex-1 flex flex-col min-w-0">
|
||||
<Outlet />
|
||||
</main>
|
||||
</div>
|
||||
<FooterIntern />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
import React from 'react'
|
||||
|
||||
const HomeMentorPage = () => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default HomeMentorPage
|
||||
@@ -0,0 +1,11 @@
|
||||
import React from 'react'
|
||||
|
||||
const MentorCertificatePage = () => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default MentorCertificatePage
|
||||
@@ -0,0 +1,11 @@
|
||||
import React from 'react'
|
||||
|
||||
const MentorDetailProject = () => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default MentorDetailProject
|
||||
@@ -0,0 +1,11 @@
|
||||
import React from 'react'
|
||||
|
||||
const MentorInternPage = () => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default MentorInternPage
|
||||
@@ -0,0 +1,11 @@
|
||||
import React from 'react'
|
||||
|
||||
const MentorProjectsPage = () => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default MentorProjectsPage
|
||||
@@ -0,0 +1,99 @@
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Home, FolderKanban, Award, Settings, HelpCircle, LogOut, ChevronRight } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
|
||||
const navItems = [
|
||||
// belum kutambahin
|
||||
{ label: "Home", icon: Home, path: "" },
|
||||
{ label: "List Projects", icon: FolderKanban, path: "" },
|
||||
{ label: "Interns", icon: FolderKanban, path: "" },
|
||||
{ label: "Certificates", icon: Award, path: "" },
|
||||
];
|
||||
|
||||
const prefItems = [
|
||||
{ label: "Settings", icon: Settings, path: "/home-intern/settings" },
|
||||
{ label: "FAQ", icon: HelpCircle, path: "/home-intern/faq" },
|
||||
{ label: "Logout", icon: LogOut, path: "/home-intern/logout", danger: true },
|
||||
];
|
||||
|
||||
function SidebarIntern() {
|
||||
const navigate = useNavigate();
|
||||
const [active, setActive] = useState("/home-intern");
|
||||
|
||||
const handleNav = (path: string) => {
|
||||
setActive(path);
|
||||
navigate(path);
|
||||
};
|
||||
|
||||
return (
|
||||
<aside className="w-[240px] bg-white border-r border-gray-100 flex flex-col py-5 px-3 gap-1 sticky top-[73px] h-[calc(100vh-73px)] overflow-y-auto flex-shrink-0">
|
||||
{/* Brand */}
|
||||
<div className="flex items-center gap-2.5 px-2 pb-4">
|
||||
<div className="w-9 h-9 rounded-[10px] bg-red-600 flex items-center justify-center flex-shrink-0">
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-bold text-gray-900 leading-tight">Internify</p>
|
||||
<p className="text-[11px] text-gray-400">LMS Portal</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="h-px bg-gray-100 my-1" />
|
||||
|
||||
{/* Main nav */}
|
||||
<nav className="flex flex-col gap-0.5">
|
||||
{navItems.map(({ label, icon: Icon, path }) => {
|
||||
const isActive = active === path;
|
||||
return (
|
||||
<button
|
||||
key={path}
|
||||
onClick={() => handleNav(path)}
|
||||
className={`flex items-center gap-2.5 w-full px-3 py-2 rounded-lg text-[13.5px] font-medium text-left transition-colors
|
||||
${isActive
|
||||
? "bg-red-50 text-red-600 font-semibold border-l-4 border-red-600"
|
||||
: "text-gray-500 hover:bg-red-50 hover:text-red-600"
|
||||
}`}
|
||||
>
|
||||
<Icon className="w-[18px] h-[18px] flex-shrink-0" />
|
||||
<span>{label}</span>
|
||||
{isActive && (
|
||||
<ChevronRight className="w-3.5 h-3.5 ml-auto opacity-60" />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
<div className="h-px bg-gray-100 my-1" />
|
||||
|
||||
{/* Preferences */}
|
||||
<p className="text-[10px] font-semibold tracking-widest text-gray-400 px-3 py-1.5">
|
||||
PREFERENCES
|
||||
</p>
|
||||
<nav className="flex flex-col gap-0.5">
|
||||
{prefItems.map(({ label, icon: Icon, path, danger }) => {
|
||||
const isActive = active === path;
|
||||
return (
|
||||
<button
|
||||
key={path}
|
||||
onClick={() => handleNav(path)}
|
||||
className={`flex items-center gap-2.5 w-full px-3 py-2 rounded-lg text-[13.5px] font-medium text-left transition-colors
|
||||
${isActive
|
||||
? "bg-red-50 text-red-600 font-semibold"
|
||||
: danger
|
||||
? "text-gray-400 hover:bg-red-50 hover:text-red-600"
|
||||
: "text-gray-500 hover:bg-red-50 hover:text-red-600"
|
||||
}`}
|
||||
>
|
||||
<Icon className="w-[18px] h-[18px] flex-shrink-0" />
|
||||
<span>{label}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export default SidebarIntern
|
||||
Reference in New Issue
Block a user