75 lines
3.4 KiB
TypeScript
75 lines
3.4 KiB
TypeScript
'use client';
|
|
|
|
import { CalendarDays, ClipboardList, Clock3 } from 'lucide-react';
|
|
import type { WorkspaceDailyReport } from '@/lib/workspace-daily-report';
|
|
import { formatWorkHours, formatWorkHoursShort } from '@/lib/work-hours';
|
|
|
|
interface Props {
|
|
report: WorkspaceDailyReport;
|
|
}
|
|
|
|
export function DailyReportPanel({ report }: Props) {
|
|
return (
|
|
<aside className="w-80 shrink-0 border-l border-[var(--line)] bg-[var(--bg-card)] flex flex-col">
|
|
<div className="flex h-14 items-center justify-between border-b border-[var(--line)] px-4">
|
|
<div>
|
|
<h2 className="text-[14px] font-semibold text-[var(--ink)]">今日日报</h2>
|
|
<div className="mt-0.5 flex items-center gap-1 text-[11px] text-[var(--ink-muted)]">
|
|
<CalendarDays className="h-3 w-3" />
|
|
<span>{report.date}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-2 border-b border-[var(--line)] p-3">
|
|
<div className="rounded-lg border border-[var(--line)] bg-[var(--bg)] p-2">
|
|
<div className="flex items-center gap-1 text-[10px] text-[var(--ink-muted)]">
|
|
<Clock3 className="h-3 w-3" />
|
|
<span>今日合计</span>
|
|
</div>
|
|
<p className="mt-1 text-[16px] font-semibold text-[var(--ink)]">{formatWorkHours(report.totalHours)}</p>
|
|
</div>
|
|
<div className="rounded-lg border border-[var(--line)] bg-[var(--bg)] p-2">
|
|
<div className="flex items-center gap-1 text-[10px] text-[var(--ink-muted)]">
|
|
<ClipboardList className="h-3 w-3" />
|
|
<span>已登记</span>
|
|
</div>
|
|
<p className="mt-1 text-[16px] font-semibold text-[var(--ink)]">{report.totalCount} 条</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto p-3">
|
|
{report.items.length === 0 ? (
|
|
<div className="rounded-lg border border-dashed border-[var(--line)] bg-[var(--bg)] p-4 text-center">
|
|
<p className="text-[13px] font-medium text-[var(--ink)]">今日暂无日报记录</p>
|
|
<p className="mt-1 text-[11px] leading-5 text-[var(--ink-muted)]">从任务详情里的工时记录登记今日工作内容。</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{report.items.map((item) => {
|
|
const contextLabel = [item.productName, item.projectName, item.versionName].filter(Boolean).join(' / ');
|
|
|
|
return (
|
|
<div key={item.id} className="rounded-lg border border-[var(--line)] bg-[var(--bg)] p-3">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<p className="min-w-0 flex-1 break-words text-[12px] font-medium leading-5 text-[var(--ink)]">{item.workContent}</p>
|
|
<span className="shrink-0 rounded bg-[var(--accent-soft)] px-1.5 py-0.5 text-[10px] font-medium text-[var(--accent)]">
|
|
{formatWorkHoursShort(item.hours)}
|
|
</span>
|
|
</div>
|
|
<p className="mt-2 truncate text-[11px] text-[var(--ink-soft)]" title={item.taskTitle}>{item.taskTitle}</p>
|
|
{contextLabel && (
|
|
<p className="mt-1 truncate text-[10px] text-[var(--ink-muted)]" title={contextLabel}>
|
|
{contextLabel}
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|