fix

app/dashboard/categories/page.tsx

@@ -4,7 +4,7 @@ import { useState, useEffect } from "react";
 import Layout from "@/components/layout/layout";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Plus, Pencil, Trash2, ChevronRight, ChevronDown, Loader2 } from "lucide-react";
+import { Plus, Pencil, Trash2, ChevronRight, ChevronDown } from "lucide-react";
 import { toast } from "sonner";
 import {
   Select,
@@ -29,7 +29,6 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
 export default function CategoriesPage() {
   const [categories, setCategories] = useState<Category[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
   const [newCategoryName, setNewCategoryName] = useState("");
   const [selectedParentId, setSelectedParentId] = useState<string>("");
   const [editingCategory, setEditingCategory] = useState<Category | null>(null);
@@ -46,13 +45,10 @@ export default function CategoriesPage() {
 
   const fetchCategories = async () => {
     try {
-      setIsLoading(true);
       const fetchedCategories = await apiRequest("/categories", "GET");
       setCategories(fetchedCategories);
     } catch (error) {
       toast.error("Failed to fetch categories");
-    } finally {
-      setIsLoading(false);
     }
   };
 
@@ -247,11 +243,7 @@ export default function CategoriesPage() {
           </CardHeader>
           <CardContent>
             <div className="space-y-1">
-              {isLoading ? (
+              {rootCategories.length === 0 ? (
-                <div className="flex items-center justify-center py-8">
-                  <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
-                </div>
-              ) : rootCategories.length === 0 ? (
                 <p className="text-sm text-muted-foreground text-center py-4">
                   No categories yet. Add your first category above.
                 </p>

lib/auth-utils.ts

@@ -6,10 +6,17 @@
  * Get the authentication token from cookies or localStorage
  */
 export function getAuthToken(): string | null {
-  return document.cookie
+  const token = document.cookie
     .split('; ')
     .find(row => row.startsWith('Authorization='))
     ?.split('=')[1] || localStorage.getItem('Authorization');
+
+  // If token exists but doesn't have Bearer prefix, add it
+  if (token && !token.startsWith('Bearer ')) {
+    return `Bearer ${token}`;
+  }
+
+  return token;
 }
 
 /**
@@ -30,7 +37,7 @@ export async function logoutUser(): Promise<void> {
       await fetch(`/api/auth/logout`, {
         method: 'POST',
         headers: {
-          'Authorization': `Bearer ${token}`,
+          'Authorization': token,
           'Content-Type': 'application/json'
         }
       }).catch(err => {

lib/client-utils.ts

@@ -32,12 +32,13 @@ function getAuthToken(): string | null {
 function createApiHeaders(token?: string | null, customHeaders: Record<string, string> = {}): Headers {
   const headers = new Headers({
     'Content-Type': 'application/json',
+    'accept': '*/*',  
     ...customHeaders
   });
 
   const authToken = token || getAuthToken();
   if (authToken) {
-    headers.set('Authorization', `Bearer ${authToken}`);
+    headers.set('authorization', `Bearer ${authToken}`);
   }
 
   return headers;
@@ -59,6 +60,8 @@ export async function clientFetch<T = any>(url: string, options: RequestInit = {
       ...options,
       headers,
       credentials: 'include',
+      mode: 'cors',
+      referrerPolicy: 'strict-origin-when-cross-origin'
     });
 
     if (!res.ok) {