{t("settings.api_keys.list_title")}
diff --git a/apps/app/src/components/vendors/charts/category-chart.tsx b/apps/app/src/components/vendors/charts/category-chart.tsx
new file mode 100644
index 0000000000..f1288b341a
--- /dev/null
+++ b/apps/app/src/components/vendors/charts/category-chart.tsx
@@ -0,0 +1,209 @@
+"use client";
+
+import React, { type CSSProperties } from "react";
+import { scaleBand, scaleLinear, max, format } from "d3";
+import { ClientTooltip } from "@bubba/ui/chart-tooltip";
+
+const VENDOR_CATEGORY_COLORS = {
+ cloud: "bg-[var(--chart-open)]",
+ infrastructure: "bg-[var(--chart-pending)]",
+ software_as_a_service: "bg-[var(--chart-closed)]",
+ finance: "bg-[var(--chart-open)]",
+ marketing: "bg-[var(--chart-pending)]",
+ sales: "bg-[var(--chart-closed)]",
+ hr: "bg-[var(--chart-open)]",
+ other: "bg-[var(--chart-pending)]",
+};
+
+interface VendorCategoryData {
+ name: string;
+ value: number;
+}
+
+interface VendorCategoryChartProps {
+ data: VendorCategoryData[];
+ showEmptyDepartments?: boolean;
+}
+
+export function VendorCategoryChart({
+ data,
+ showEmptyDepartments = true,
+}: VendorCategoryChartProps) {
+ const filteredData = showEmptyDepartments
+ ? data
+ : data.filter((dept) => dept.value > 0);
+
+ const sortedData = [...filteredData].sort((a, b) => b.value - a.value);
+
+ // Return early with a message if no departments have risks
+ if (sortedData.length === 0) {
+ return (
+
+ No departments with risks found
+
+ );
+ }
+
+ // Define fixed settings for consistent bar sizing
+ const barHeight = 40; // Fixed height for each bar in pixels
+ const barGap = 16; // Gap between bars in pixels
+ const minChartHeight = 300; // Minimum chart height
+
+ // Calculate dynamic chart height based on number of departments
+ const chartHeight = Math.max(
+ minChartHeight,
+ (barHeight + barGap) * sortedData.length + 40, // Extra padding at top/bottom
+ );
+
+ // Get the maximum value for scaling
+ const maxValue = max(sortedData.map((d) => d.value)) ?? 1;
+
+ // Scales
+ const yScale = scaleBand()
+ .domain(sortedData.map((d) => d.name))
+ .range([0, 100])
+ .padding(0.25);
+
+ const xScale = scaleLinear().domain([0, maxValue]).range([0, 100]);
+
+ const marginLeft = 70;
+ const marginRight = 20;
+ const marginBottom = 20;
+
+ const getBarKey = (item: VendorCategoryData) =>
+ `bar-${item.name}-${item.value}`;
+ const getTickKey = (value: number) => `tick-${value}`;
+ const getGridKey = (value: number, position = 0) =>
+ `grid-${value.toString().replace(".", "-")}-${position}`;
+ const getLabelKey = (item: VendorCategoryData) => `label-${item.name}`;
+
+ const getCategoryColor = (categoryName: string) => {
+ const normalizedName = categoryName.toLowerCase();
+ return (
+ VENDOR_CATEGORY_COLORS[
+ normalizedName as keyof typeof VENDOR_CATEGORY_COLORS
+ ] || "bg-gray-400"
+ );
+ };
+
+ // Generate appropriate tick values based on max value
+ const generateTickValues = () => {
+ // For small values, generate specific tick values
+ if (maxValue <= 1) return [0, 1];
+ if (maxValue <= 2) return [0, 1, 2];
+ if (maxValue <= 5) return [0, 1, 2, 3, 4, 5];
+ if (maxValue <= 10) return [0, 2, 4, 6, 8, 10];
+
+ // For larger values, let D3 handle it with a reasonable number of ticks
+ const tickCount = Math.min(maxValue, 6); // Limit number of ticks
+ return xScale.ticks(tickCount).map(Number);
+ };
+
+ const tickValues = generateTickValues();
+
+ return (
+
+
+
+ {sortedData.map((d, index) => {
+ const barWidth = d.value === 0 ? 3 : xScale(d.value);
+ const fixedBarHeightPercentage = (barHeight / chartHeight) * 100;
+
+ // Calculate exact position to align with labels
+ // Get center point of the band for this item
+ const bandCenter = yScale(d.name)! + yScale.bandwidth() / 2;
+ // Position bar so its center aligns with the band center
+ const barTopPosition = bandCenter - fixedBarHeightPercentage / 2;
+
+ return (
+
+ );
+ })}
+
+
+ {tickValues.map((value) => (
+
+ );
+ }
+
+ const barHeight = 40; // Fixed height for each bar in pixels
+ const barGap = 16; // Gap between bars in pixels
+ const minChartHeight = 300; // Minimum chart height
+
+ // Calculate dynamic chart height based on number of departments
+ const chartHeight = Math.max(
+ minChartHeight,
+ (barHeight + barGap) * sortedData.length + 40, // Extra padding at top/bottom
+ );
+
+ // Get the maximum value for scaling
+ const maxValue = max(sortedData.map((d) => d.value)) ?? 1;
+
+ // Scales
+ const yScale = scaleBand()
+ .domain(sortedData.map((d) => d.name))
+ .range([0, 100])
+ .padding(0.25);
+
+ const xScale = scaleLinear().domain([0, maxValue]).range([0, 100]);
+
+ const marginLeft = 70;
+ const marginRight = 20;
+ const marginBottom = 20;
+
+ const getBarKey = (item: StatusData) => `bar-${item.name}-${item.value}`;
+ const getTickKey = (value: number) => `tick-${value}`;
+ const getGridKey = (value: number, position = 0) =>
+ `grid-${value.toString().replace(".", "-")}-${position}`;
+ const getLabelKey = (item: StatusData) => `label-${item.name}`;
+
+ const getStatusColor = (statusName: string) => {
+ const normalizedName = statusName.toLowerCase();
+ return (
+ STATUS_COLORS[normalizedName as keyof typeof STATUS_COLORS] ||
+ "bg-gray-400"
+ );
+ };
+
+ // Generate appropriate tick values based on max value
+ const generateTickValues = () => {
+ // For small values, generate specific tick values
+ if (maxValue <= 1) return [0, 1];
+ if (maxValue <= 2) return [0, 1, 2];
+ if (maxValue <= 5) return [0, 1, 2, 3, 4, 5];
+ if (maxValue <= 10) return [0, 2, 4, 6, 8, 10];
+
+ // For larger values, let D3 handle it with a reasonable number of ticks
+ const tickCount = Math.min(maxValue, 6); // Limit number of ticks
+ return xScale.ticks(tickCount).map(Number);
+ };
+
+ const tickValues = generateTickValues();
+
+ return (
+
+
+
+ {sortedData.map((d, index) => {
+ const barWidth = d.value === 0 ? 3 : xScale(d.value);
+ const fixedBarHeightPercentage = (barHeight / chartHeight) * 100;
+
+ // Calculate exact position to align with labels
+ // Get center point of the band for this item
+ const bandCenter = yScale(d.name)! + yScale.bandwidth() / 2;
+ // Position bar so its center aligns with the band center
+ const barTopPosition = bandCenter - fixedBarHeightPercentage / 2;
+
+ return (
+
+ );
+ })}
+
+
+ {tickValues.map((value) => (
+