sso

Author: izadoesdev

.cursor/rules/01-MUST-DO.mdc

@@ -46,4 +46,4 @@ use json.stringify() when adding debugging
 
 Almost NEVER use useEffect unless it's critical
 
-do NOT use types any, unknown or never, use proper explicit types, check the @shared/types folder for types, and use them in the codebase, or create ones if needed, don't define types in the same file as the component, create a new file in the @shared/types folder for the type
+do NOT use types any, unknown or never, use proper explicit types

apps/dashboard/app/(main)/organizations/settings/sso/page.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { FingerprintIcon } from "@phosphor-icons/react";
+import { Suspense } from "react";
+import { EmptyState } from "@/components/empty-state";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useOrganizations } from "@/hooks/use-organizations";
+import { SSOSettings } from "./sso-settings";
+
+function SkeletonRow() {
+	return (
+		<div className="grid grid-cols-[auto_1fr_auto] items-center gap-4 px-5 py-4">
+			<Skeleton className="h-10 w-10 rounded" />
+			<div className="space-y-2">
+				<Skeleton className="h-4 w-32" />
+				<Skeleton className="h-3 w-48" />
+			</div>
+			<Skeleton className="h-6 w-16 rounded-full" />
+		</div>
+	);
+}
+
+function PageSkeleton() {
+	return (
+		<div className="h-full lg:grid lg:grid-cols-[1fr_18rem]">
+			<div className="divide-y border-b lg:border-b-0">
+				<SkeletonRow />
+				<SkeletonRow />
+			</div>
+			<div className="space-y-4 bg-card p-5">
+				<Skeleton className="h-10 w-full" />
+				<Skeleton className="h-18 w-full rounded" />
+				<Skeleton className="h-10 w-full" />
+				<Skeleton className="h-20 w-full rounded" />
+			</div>
+		</div>
+	);
+}
+
+export default function SSOSettingsPage() {
+	const { activeOrganization, isLoading } = useOrganizations();
+
+	if (isLoading) {
+		return <PageSkeleton />;
+	}
+
+	if (!activeOrganization) {
+		return (
+			<EmptyState
+				description="Select or create an organization to configure SSO settings"
+				icon={<FingerprintIcon weight="duotone" />}
+				title="No organization selected"
+			/>
+		);
+	}
+
+	return (
+		<Suspense fallback={<PageSkeleton />}>
+			<SSOSettings organization={activeOrganization} />
+		</Suspense>
+	);
+}