Track HiveGrid Cloud planning reference

hivegrid-cloud/apps/web/app/components/admin/SetupSteps.test.tsx

@@ -0,0 +1,40 @@
+import { vi, describe, it, expect } from "vitest";
+import "@testing-library/jest-dom";
+import { render } from "@testing-library/react";
+import { BrowserRouter as Router } from "react-router";
+
+import SetupSteps from "./SetupSteps";
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => {
+    return { t: (str: string) => str };
+  },
+}));
+
+describe("SetupSteps component", () => {
+  const mockItems = [
+    { title: "Step 1", description: "Description 1", path: "/step1", completed: true },
+    { title: "Step 2", description: "Description 2", path: "/step2", completed: false },
+    { title: "Step 3", description: "Description 3", path: "/step3", completed: false },
+  ];
+
+  it("renders a list of setup steps with correct details", () => {
+    const { getAllByRole, getByText } = render(
+      <Router>
+        <SetupSteps items={mockItems} />
+      </Router>
+    );
+
+    const stepItems = getAllByRole("listitem");
+
+    expect(stepItems).toHaveLength(mockItems.length);
+
+    stepItems.forEach((stepItem, index) => {
+      const item = mockItems[index];
+      const title = getByText(item.title);
+      const description = getByText(item.description);
+      expect(title).toBeInTheDocument();
+      expect(description).toBeInTheDocument();
+    });
+  });
+});

hivegrid-cloud/apps/web/app/components/admin/SetupSteps.tsx

@@ -0,0 +1,75 @@
+import { useTranslation } from "react-i18next";
+import { SetupItem } from "~/application/dtos/setup/SetupItem";
+import ButtonSecondary from "../ui/buttons/ButtonSecondary";
+import clsx from "clsx";
+import { CheckCircleIcon } from "~/components/ui/icons/vendor";
+
+interface Props {
+  items: SetupItem[];
+}
+
+function CompletedIcon() {
+  return (
+    <CheckCircleIcon className="border-border h-6 w-6 rounded-full border text-gray-200" />
+  );
+}
+
+function IncompletedIcon() {
+  return (
+    <CheckCircleIcon className="h-6 w-6 rounded-full border border-teal-500 text-teal-500" />
+  );
+}
+
+function SetupStep({ item, index, total }: { item: SetupItem; index: number; total: number }) {
+  const { t } = useTranslation();
+
+  return (
+    <li key={index} className="border-border bg-background space-y-3 rounded-lg border p-4">
+      <div className="flex items-center space-x-2">
+        <div className="shrink-0">{!item.completed ? <CompletedIcon /> : <IncompletedIcon />}</div>
+        <div className="flex w-full justify-between">
+          <div className="font-medium">{item.title}</div>
+          <div className=" text-muted-foreground text-sm">
+            {index + 1}/{total}
+          </div>
+        </div>
+      </div>
+      <p className=" text-sm">{item.description}</p>
+      <div>
+        <ButtonSecondary to={item.path} className="mt-3">
+          {!item.completed ? t("app.sidebar.setup") : `${t("shared.goTo")} ${item.title.toLowerCase()}`} &rarr;
+        </ButtonSecondary>
+      </div>
+    </li>
+  );
+}
+
+export default function SetupSteps({ items }: Props) {
+  const { t } = useTranslation();
+  return (
+    <div>
+      <h3 className="text-foreground font-medium leading-4">{t("onboarding.gettingStarted.title")}</h3>
+      <ul
+        className={clsx(
+          "mt-3 grid grid-cols-1 gap-4",
+          items.length === 1 && "lg:grid-cols-3",
+          items.length === 2 && "lg:grid-cols-2",
+          items.length === 3 && "lg:grid-cols-3",
+          items.length === 4 && "lg:grid-cols-2",
+          items.length === 5 && "lg:grid-cols-3",
+          items.length === 6 && "lg:grid-cols-3",
+          items.length === 7 && "lg:grid-cols-4",
+          items.length === 8 && "lg:grid-cols-4",
+          items.length === 9 && "lg:grid-cols-3",
+          items.length === 10 && "lg:grid-cols-5",
+          items.length === 11 && "lg:grid-cols-4",
+          items.length === 12 && "lg:grid-cols-4"
+        )}
+      >
+        {items.map((item, index) => (
+          <SetupStep key={index} item={item} index={index} total={items.length} />
+        ))}
+      </ul>
+    </div>
+  );
+}