64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
import { useEffect } from "react";
|
|
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 company 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>
|
|
);
|
|
}
|