Mikkel Georgsen
e4ddb2453a
- 14 UI pages: all Select a company empty states use VOCAB.company.toLowerCase() - AgentConfigForm: 3 error throws use VOCAB.company - AgentDetail: additional Select a company upload error replaced - CLI run.ts: Starting/Could not locate/failed to start messages use VOCAB.appName - CLI deployment-auth-check: repairHint uses VOCAB.appName - CLI agent-jwt-secret-check: repairHint uses VOCAB.appName - CLI allowed-hostname: restart message uses VOCAB.appName - Added VOCAB import to all files missing it
64 lines
2 KiB
TypeScript
64 lines
2 KiB
TypeScript
import { useEffect } from "react";
|
|
import { VOCAB } from "@paperclipai/branding";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { goalsApi } from "../api/goals";
|
|
import { useCompany } from "../context/CompanyContext";
|
|
import { useDialog } from "../context/DialogContext";
|
|
import { useBreadcrumbs } from "../context/BreadcrumbContext";
|
|
import { queryKeys } from "../lib/queryKeys";
|
|
import { GoalTree } from "../components/GoalTree";
|
|
import { EmptyState } from "../components/EmptyState";
|
|
import { PageSkeleton } from "../components/PageSkeleton";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Target, Plus } from "lucide-react";
|
|
|
|
export function Goals() {
|
|
const { selectedCompanyId } = useCompany();
|
|
const { openNewGoal } = useDialog();
|
|
const { setBreadcrumbs } = useBreadcrumbs();
|
|
|
|
useEffect(() => {
|
|
setBreadcrumbs([{ label: "Goals" }]);
|
|
}, [setBreadcrumbs]);
|
|
|
|
const { data: goals, isLoading, error } = useQuery({
|
|
queryKey: queryKeys.goals.list(selectedCompanyId!),
|
|
queryFn: () => goalsApi.list(selectedCompanyId!),
|
|
enabled: !!selectedCompanyId,
|
|
});
|
|
|
|
if (!selectedCompanyId) {
|
|
return <EmptyState icon={Target} message={`Select a ${VOCAB.company.toLowerCase()} to view goals.`} />;
|
|
}
|
|
|
|
if (isLoading) {
|
|
return <PageSkeleton variant="list" />;
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{error && <p className="text-sm text-destructive">{error.message}</p>}
|
|
|
|
{goals && goals.length === 0 && (
|
|
<EmptyState
|
|
icon={Target}
|
|
message="No goals yet."
|
|
action="Add Goal"
|
|
onAction={() => openNewGoal()}
|
|
/>
|
|
)}
|
|
|
|
{goals && goals.length > 0 && (
|
|
<>
|
|
<div className="flex items-center justify-start">
|
|
<Button size="sm" variant="outline" onClick={() => openNewGoal()}>
|
|
<Plus className="h-3.5 w-3.5 mr-1.5" />
|
|
New Goal
|
|
</Button>
|
|
</div>
|
|
<GoalTree goals={goals} goalLink={(goal) => `/goals/${goal.id}`} />
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|