251208:0010 Backend & Frontend Debug

frontend/components/common/can.tsx

@@ -1,27 +1,42 @@
-"use client";
+// File: components/common/can.tsx
+'use client';
 
-import { useSession } from "next-auth/react";
-import { ReactNode } from "react";
+import { useAuthStore } from '@/lib/stores/auth-store';
+import { ReactNode } from 'react';
 
 interface CanProps {
-  permission: string;
+  permission?: string;
+  role?: string;
   children: ReactNode;
+  fallback?: ReactNode;
+  // Logic: OR (default) - if multiple provided, any match is enough?
+  // For simplicity, let's enforce: if permission provided -> check permission.
+  // If role provided -> check role. If both -> check both (AND/OR needs definition).
+  // Let's go with: if multiple props are provided, ALL must pass (AND logic) for now, or just handle one.
+  // Common use case: <Can permission="x">
 }
 
-export function Can({ permission, children }: CanProps) {
-  const { data: session } = useSession();
+export function Can({
+  permission,
+  role,
+  children,
+  fallback = null,
+}: CanProps) {
+  const { hasPermission, hasRole } = useAuthStore();
 
-  if (!session?.user) {
-    return null;
+  let allowed = true;
+
+  if (permission && !hasPermission(permission)) {
+    allowed = false;
   }
 
-  const userRole = session.user.role;
-
-  // Simple role-based check
-  // If the user's role matches the required permission (role), allow access.
-  if (userRole === permission) {
-    return <>{children}</>;
+  if (role && !hasRole(role)) {
+    allowed = false;
   }
 
-  return null;
+  if (!allowed) {
+    return <>{fallback}</>;
+  }
+
+  return <>{children}</>;
 }