100 lines
3.1 KiB
TypeScript
100 lines
3.1 KiB
TypeScript
import Layout from "@/components/Layout";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import RealmSwitcher, {
|
|
REALM_OPTIONS,
|
|
RealmKey,
|
|
} from "@/components/settings/RealmSwitcher";
|
|
import { useAuth } from "@/contexts/AuthContext";
|
|
import { useMemo, useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export default function Realms() {
|
|
const { user, profile, roles, updateProfile } = useAuth();
|
|
const navigate = useNavigate();
|
|
const [activating, setActivating] = useState<string | null>(null);
|
|
const [selectedRealm, setSelectedRealm] = useState<RealmKey | null>(
|
|
(profile as any)?.user_type ?? null,
|
|
);
|
|
const [experience, setExperience] = useState<string>(
|
|
(profile as any)?.experience_level || "beginner",
|
|
);
|
|
const [saving, setSaving] = useState(false);
|
|
const lastRealm = (profile as any)?.user_type as RealmKey | undefined;
|
|
const canSeeStaff = useMemo(
|
|
() =>
|
|
roles.some((r) =>
|
|
["owner", "admin", "founder", "staff", "employee"].includes(
|
|
r.toLowerCase(),
|
|
),
|
|
),
|
|
[roles],
|
|
);
|
|
const visible = useMemo(
|
|
() => REALM_OPTIONS.filter((o) => (o.id === "staff" ? canSeeStaff : true)),
|
|
[canSeeStaff],
|
|
);
|
|
|
|
return (
|
|
<Layout>
|
|
<div className="mx-auto w-full max-w-6xl px-4 py-10 lg:px-6">
|
|
<div className="mb-8">
|
|
<Badge variant="outline" className="mb-2">
|
|
Realms
|
|
</Badge>
|
|
<h1 className="text-3xl font-bold">Choose your realm</h1>
|
|
<p className="text-muted-foreground">
|
|
Your dashboard adapts to the selected realm. Last used realm is
|
|
highlighted.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Realm & Path manager */}
|
|
<div className="mb-8">
|
|
<RealmSwitcher
|
|
selectedRealm={selectedRealm}
|
|
onRealmChange={setSelectedRealm}
|
|
selectedExperience={experience}
|
|
onExperienceChange={setExperience}
|
|
hasChanges={
|
|
selectedRealm !== ((profile as any)?.user_type ?? null) ||
|
|
experience !== ((profile as any)?.experience_level || "beginner")
|
|
}
|
|
onSave={async () => {
|
|
if (!selectedRealm) return;
|
|
if (!user) {
|
|
navigate("/onboarding");
|
|
return;
|
|
}
|
|
setSaving(true);
|
|
try {
|
|
await updateProfile({
|
|
user_type: selectedRealm,
|
|
experience_level: experience,
|
|
} as any);
|
|
navigate("/dashboard", { replace: true });
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
}}
|
|
saving={saving}
|
|
/>
|
|
</div>
|
|
|
|
<div className="mt-6 flex justify-end">
|
|
<Button onClick={() => navigate(user ? "/dashboard" : "/onboarding")}>
|
|
{user ? "Open Dashboard" : "Start Onboarding"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|