[Feature] UI - Projects: Add Project Details Page

ui/litellm-dashboard/src/app/(dashboard)/hooks/projects/useProjectDetails.ts

@@ -0,0 +1,63 @@
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  getProxyBaseUrl,
+  getGlobalLitellmHeaderName,
+  deriveErrorMessage,
+  handleError,
+} from "@/components/networking";
+import { all_admin_roles } from "@/utils/roles";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+import { ProjectResponse, projectKeys } from "./useProjects";
+
+// ── Fetch function ───────────────────────────────────────────────────────────
+
+const fetchProjectDetails = async (
+  accessToken: string,
+  projectId: string,
+): Promise<ProjectResponse> => {
+  const baseUrl = getProxyBaseUrl();
+  const url = `${baseUrl}/project/info?project_id=${encodeURIComponent(projectId)}`;
+
+  const response = await fetch(url, {
+    method: "GET",
+    headers: {
+      [getGlobalLitellmHeaderName()]: `Bearer ${accessToken}`,
+      "Content-Type": "application/json",
+    },
+  });
+
+  if (!response.ok) {
+    const errorData = await response.json();
+    const errorMessage = deriveErrorMessage(errorData);
+    handleError(errorMessage);
+    throw new Error(errorMessage);
+  }
+
+  return response.json();
+};
+
+// ── Hook ─────────────────────────────────────────────────────────────────────
+
+export const useProjectDetails = (projectId?: string) => {
+  const { accessToken, userRole } = useAuthorized();
+  const queryClient = useQueryClient();
+
+  return useQuery<ProjectResponse>({
+    queryKey: projectKeys.detail(projectId!),
+    queryFn: async () => fetchProjectDetails(accessToken!, projectId!),
+    enabled:
+      Boolean(accessToken && projectId) &&
+      all_admin_roles.includes(userRole || ""),
+
+    // Seed from the list cache when available
+    initialData: () => {
+      if (!projectId) return undefined;
+
+      const projects = queryClient.getQueryData<ProjectResponse[]>(
+        projectKeys.list({}),
+      );
+
+      return projects?.find((p) => p.project_id === projectId);
+    },
+  });
+};

ui/litellm-dashboard/src/app/(dashboard)/hooks/projects/useUpdateProject.ts

@@ -0,0 +1,75 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+  getProxyBaseUrl,
+  getGlobalLitellmHeaderName,
+  deriveErrorMessage,
+  handleError,
+} from "@/components/networking";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+import { ProjectResponse, projectKeys } from "./useProjects";
+
+// ── Types ────────────────────────────────────────────────────────────────────
+
+export interface ProjectUpdateParams {
+  project_alias?: string;
+  description?: string;
+  team_id?: string;
+  models?: string[];
+  max_budget?: number;
+  blocked?: boolean;
+  metadata?: Record<string, unknown>;
+  model_rpm_limit?: Record<string, number>;
+  model_tpm_limit?: Record<string, number>;
+}
+
+// ── Fetch function ───────────────────────────────────────────────────────────
+
+const updateProject = async (
+  accessToken: string,
+  projectId: string,
+  params: ProjectUpdateParams,
+): Promise<ProjectResponse> => {
+  const baseUrl = getProxyBaseUrl();
+  const url = `${baseUrl}/project/update`;
+
+  const response = await fetch(url, {
+    method: "POST",
+    headers: {
+      [getGlobalLitellmHeaderName()]: `Bearer ${accessToken}`,
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ project_id: projectId, ...params }),
+  });
+
+  if (!response.ok) {
+    const errorData = await response.json();
+    const errorMessage = deriveErrorMessage(errorData);
+    handleError(errorMessage);
+    throw new Error(errorMessage);
+  }
+
+  return response.json();
+};
+
+// ── Hook ─────────────────────────────────────────────────────────────────────
+
+export const useUpdateProject = () => {
+  const { accessToken } = useAuthorized();
+  const queryClient = useQueryClient();
+
+  return useMutation<
+    ProjectResponse,
+    Error,
+    { projectId: string; params: ProjectUpdateParams }
+  >({
+    mutationFn: async ({ projectId, params }) => {
+      if (!accessToken) {
+        throw new Error("Access token is required");
+      }
+      return updateProject(accessToken, projectId, params);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: projectKeys.all });
+    },
+  });
+};