create middleware block and update proxy file also make token stored in cookes and up date user page to can show user details also fixed delete user error and delete car error and broken corse inginx image block now we can uplode image to server and but it in my app

app/users/page.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { Alert }              from "../../Components/UI";
 import { UserTable }          from "../../Components/User/UserTable";
 import { UserFormModal }      from "../../Components/User/UserFormModal";
+import { UserDetailModal }    from "../../Components/User/UserDetailModal";
 import { DeleteConfirmModal } from "../../Components/User/DeleteConfirmModal";
 import { Toast }              from "../../Components/User/Toast";
 import { useUsers }           from "../../hooks/useUser";
@@ -14,6 +15,8 @@ export default function UsersPage() {
   // false = closed | null = create mode | User = edit mode
   const [formTarget,   setFormTarget]   = useState<User | null | false>(false);
   const [deleteTarget, setDeleteTarget] = useState<User | null>(null);
+  // ID of user whose detail modal is open; null = closed
+  const [viewUserId,   setViewUserId]   = useState<string | null>(null);
   // Local submitting flag shown in DeleteConfirmModal spinner
   const [deleting, setDeleting] = useState(false);
 
@@ -35,24 +38,14 @@ export default function UsersPage() {
   };
 
   // ── Delete handler ──────────────────────────────────────────────────────────
-  // FIX: We guard against double-click with local `deleting` flag,
-  // then call deleteUser which:
-  //   1. Calls the API
-  //   2. Dispatches { type: "DELETE", id } → reducer removes user from array
-  //   3. Calls notify() → Toast appears immediately
-  // Result: the row disappears from the table and a success toast shows — all
-  // without a page refresh.
   const handleDeleteConfirm = async () => {
     if (!deleteTarget || deleting) return;
     setDeleting(true);
+    console.log(setDeleting(true))
     const ok = await deleteUser(deleteTarget.id);
-    console.log("Delete result:", ok);
+    console.log(ok)
     setDeleting(false);
-    if (ok) {
-      // Close modal only on success; on failure the user sees the error toast
-      // and can retry or cancel manually.
-      setDeleteTarget(null);
-    }
+    if (ok) setDeleteTarget(null);
   };
 
   // ── Render ──────────────────────────────────────────────────────────────────
@@ -61,6 +54,14 @@ export default function UsersPage() {
       {/* Global success / error toast — fires on create, update, AND delete */}
       <Toast notification={notification} />
 
+      {/* User detail modal */}
+      {viewUserId && (
+        <UserDetailModal
+          userId={viewUserId}
+          onClose={() => setViewUserId(null)}
+        />
+      )}
+
       {/* Create / Edit modal */}
       {formTarget !== false && (
         <UserFormModal
@@ -78,7 +79,6 @@ export default function UsersPage() {
           user={deleteTarget}
           deleting={deleting}
           onCancel={() => {
-            // Only allow cancel when not mid-flight
             if (!deleting) setDeleteTarget(null);
           }}
           onConfirm={handleDeleteConfirm}
@@ -172,6 +172,7 @@ export default function UsersPage() {
           search={search}
           page={page}
           pages={pages}
+          onView={user => setViewUserId(user.id)}
           onEdit={user => setFormTarget(user)}
           onDelete={user => setDeleteTarget(user)}
           onAddFirst={() => setFormTarget(null)}