ZacharyZhang-NY
16d10c0814
- Split organization.tsx (1395 lines) into 12 files: AgentRoster, AgentCreator, AgentEditor, GoalList, GoalCreator, GoalEditor, ProjectList, ProjectCreator, ProjectEditor, OrgChart, helpers, orgTreeLayout - Split dashboard.tsx (1053 lines) into 11 files: Dashboard, HealthCard, MetricsGrid, ActivityFeed, QuickActions, DepartmentOverview, TaskPipeline, SprintProgress, GoalProgress, KanbanBoard, NeedsAttention - All sub-component files under 300 lines (max: 239 lines) - Original files replaced with backward-compatible re-exports - TypeScript compilation passes
55 lines
1.9 KiB
TypeScript
55 lines
1.9 KiB
TypeScript
import { CheckCircle } from "@phosphor-icons/react";
|
|
import type { AgentRecord, GoalRecord } from "@shared/types";
|
|
import { EmptyState, ListFrame, ListRow, StatusPill } from "../ui";
|
|
import { useT } from "../../i18n";
|
|
|
|
export function GoalList({
|
|
goals,
|
|
agents,
|
|
selectedGoalId,
|
|
onSelect,
|
|
}: {
|
|
goals: GoalRecord[];
|
|
agents: AgentRecord[];
|
|
selectedGoalId: string | null;
|
|
onSelect: (goalId: string) => void;
|
|
}) {
|
|
const t = useT();
|
|
if (goals.length === 0) {
|
|
return <EmptyState title={t("org.noGoalsYet")} />;
|
|
}
|
|
return (
|
|
<ListFrame>
|
|
{goals.map((goal) => {
|
|
const isSelected = goal.id === selectedGoalId;
|
|
const parentGoal = goal.parentId ? goals.find((g) => g.id === goal.parentId) : null;
|
|
const ownerAgent = goal.ownerAgentId
|
|
? agents.find((a) => a.id === goal.ownerAgentId)
|
|
: null;
|
|
return (
|
|
<ListRow
|
|
key={goal.id}
|
|
onClick={() => onSelect(goal.id)}
|
|
className={`cursor-pointer transition-colors duration-100 ${isSelected ? "bg-[color:var(--accent-soft)]" : "hover:bg-[color:var(--panel-soft)]"}`}
|
|
>
|
|
<div className="mb-2 flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
{isSelected && (
|
|
<CheckCircle size={16} weight="fill" className="text-[color:var(--accent)]" />
|
|
)}
|
|
<div className="text-[15px] text-[color:var(--text)]">{goal.title}</div>
|
|
</div>
|
|
<StatusPill status={goal.status} />
|
|
</div>
|
|
<div className="text-[13px] text-[color:var(--muted)]">{goal.description}</div>
|
|
<div className="mt-1 flex gap-4 text-[12px] text-[color:var(--muted)]">
|
|
{parentGoal && <span>Parent: {parentGoal.title}</span>}
|
|
{ownerAgent && <span>Owner: {ownerAgent.name}</span>}
|
|
</div>
|
|
</ListRow>
|
|
);
|
|
})}
|
|
</ListFrame>
|
|
);
|
|
}
|