Working version 6.2

src/components/packages/package-list.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { PACKAGE_CATALOG } from "@/lib/packages";
+import { PackageCard } from "./package-card";
+import type { PiecedTenantStatus } from "@/types";
+
+interface Props {
+  tenantName: string;
+  enabledPackages: string[];
+  conditions?: PiecedTenantStatus["conditions"];
+}
+
+export function PackageList({ tenantName, enabledPackages, conditions }: Props) {
+  const router = useRouter();
+
+  function getStatus(pkgId: string): "pending" | "active" | "error" | undefined {
+    if (!conditions) return enabledPackages.includes(pkgId) ? "pending" : undefined;
+    const cond = conditions.find((c) => c.type === `Package/${pkgId}`);
+    if (!cond) return enabledPackages.includes(pkgId) ? "pending" : undefined;
+    if (cond.status === "True") return "active";
+    if (cond.status === "False") return "error";
+    return "pending";
+  }
+
+  return (
+    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      {PACKAGE_CATALOG.map((pkg) => (
+        <PackageCard
+          key={pkg.id}
+          pkg={pkg}
+          enabled={enabledPackages.includes(pkg.id)}
+          status={enabledPackages.includes(pkg.id) ? getStatus(pkg.id) : undefined}
+          tenantName={tenantName}
+          onToggled={() => router.refresh()}
+        />
+      ))}
+    </div>
+  );
+}