Changes

Co-authored-by: wolfoftyreso-debug <250630591+wolfoftyreso-debug@users.noreply.github.com>

src/pages/Admin.tsx

@@ -8,50 +8,51 @@ import { OrdersTable } from "@/components/admin/OrdersTable";
 import { CustomersTable } from "@/components/admin/CustomersTable";
 import { PaymentsTable } from "@/components/admin/PaymentsTable";
 import { LeadsGenerator } from "@/components/admin/LeadsGenerator";
-import { Package, Users, CreditCard, LogOut, ArrowLeft, Sparkles } from "lucide-react";
+import { AuthDialog } from "@/components/AuthDialog";
+import { Package, Users, CreditCard, LogOut, ArrowLeft, Sparkles, Lock } from "lucide-react";
 import { Skeleton } from "@/components/ui/skeleton";
 
+type AuthState = "loading" | "signed_out" | "not_admin" | "admin";
+
 export default function Admin() {
   const navigate = useNavigate();
-  const [loading, setLoading] = useState(true);
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [state, setState] = useState<AuthState>("loading");
+  const [authOpen, setAuthOpen] = useState(false);
 
   useEffect(() => {
-    const checkAuth = async () => {
-      const { data: { session } } = await supabase.auth.getSession();
-      if (!session) {
-        navigate("/");
+    const check = async (session: any) => {
+      if (!session?.user) {
+        setState("signed_out");
         return;
       }
-      setIsAuthenticated(true);
-      setLoading(false);
+      const { data, error } = await supabase
+        .from("user_roles")
+        .select("role")
+        .eq("user_id", session.user.id)
+        .eq("role", "admin")
+        .maybeSingle();
+      if (error) console.error("Role check failed:", error);
+      setState(data ? "admin" : "not_admin");
     };
 
-    const { data: { subscription } } = supabase.auth.onAuthStateChange((event, session) => {
-      if (!session) {
-        navigate("/");
-      }
+    const { data: { subscription } } = supabase.auth.onAuthStateChange((_e, session) => {
+      check(session);
     });
-
-    checkAuth();
-
+    supabase.auth.getSession().then(({ data }) => check(data.session));
     return () => subscription.unsubscribe();
-  }, [navigate]);
+  }, []);
 
   const handleLogout = async () => {
     await supabase.auth.signOut();
-    navigate("/");
   };
 
-  if (loading) {
+  if (state === "loading") {
     return (
       <div className="min-h-screen bg-background p-8">
         <div className="max-w-7xl mx-auto space-y-8">
           <Skeleton className="h-10 w-48" />
           <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-            {[...Array(4)].map((_, i) => (
-              <Skeleton key={i} className="h-32" />
-            ))}
+            {[...Array(4)].map((_, i) => <Skeleton key={i} className="h-32" />)}
           </div>
           <Skeleton className="h-96" />
         </div>
@@ -59,8 +60,43 @@ export default function Admin() {
     );
   }
 
-  if (!isAuthenticated) {
-    return null;
+  if (state === "signed_out") {
+    return (
+      <>
+        <div className="min-h-screen flex items-center justify-center bg-background px-6">
+          <div className="max-w-md text-center space-y-6">
+            <Lock className="h-12 w-12 mx-auto text-primary" />
+            <h1 className="text-3xl font-serif">Admin-inloggning krävs</h1>
+            <p className="text-muted-foreground">
+              Denna sida är privat. Logga in med ditt admin-konto för att se ordrar och annan intern information.
+            </p>
+            <div className="flex gap-3 justify-center">
+              <Button onClick={() => setAuthOpen(true)}>Logga in</Button>
+              <Button variant="outline" onClick={() => navigate("/")}>Till startsidan</Button>
+            </div>
+          </div>
+        </div>
+        <AuthDialog open={authOpen} onOpenChange={setAuthOpen} />
+      </>
+    );
+  }
+
+  if (state === "not_admin") {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-background px-6">
+        <div className="max-w-md text-center space-y-6">
+          <Lock className="h-12 w-12 mx-auto text-destructive" />
+          <h1 className="text-3xl font-serif">Ingen behörighet</h1>
+          <p className="text-muted-foreground">
+            Ditt konto har inte tillgång till admin-sidan. Endast ägaren kan se den här sidan.
+          </p>
+          <div className="flex gap-3 justify-center">
+            <Button variant="outline" onClick={handleLogout}>Logga ut</Button>
+            <Button onClick={() => navigate("/")}>Till startsidan</Button>
+          </div>
+        </div>
+      </div>
+    );
   }
 
   return (