Fix jwt-token

management/src/pages/Tenants.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import api from '../services/api'
 import toast from 'react-hot-toast'
+import TenantModal from '../components/TenantModal'
 import { 
   PlusIcon, 
   PencilIcon, 
@@ -55,6 +56,28 @@ const Tenants = () => {
     loadTenants(0, term)
   }
 
+  const handleSaveTenant = async (tenantData) => {
+    try {
+      if (editingTenant) {
+        // Update existing tenant
+        await api.put(`/tenants/${editingTenant.id}`, tenantData)
+        toast.success('Tenant updated successfully')
+      } else {
+        // Create new tenant
+        await api.post('/tenants', tenantData)
+        toast.success('Tenant created successfully')
+      }
+      
+      setEditingTenant(null)
+      setShowCreateModal(false)
+      loadTenants() // Reload the list
+    } catch (error) {
+      console.error('Error saving tenant:', error)
+      const message = error.response?.data?.message || 'Failed to save tenant'
+      throw new Error(message)
+    }
+  }
+
   const deleteTenant = async (tenantId) => {
     if (!confirm('Are you sure you want to delete this tenant? This action cannot be undone.')) {
       return
@@ -70,6 +93,18 @@ const Tenants = () => {
     }
   }
 
+  const handleEditTenant = async (tenant) => {
+    try {
+      // Fetch full tenant details for editing
+      const response = await api.get(`/tenants/${tenant.id}`)
+      setEditingTenant(response.data.data)
+      setShowCreateModal(true)
+    } catch (error) {
+      toast.error('Failed to load tenant details')
+      console.error('Error loading tenant:', error)
+    }
+  }
+
   const getAuthProviderBadge = (provider) => {
     const colors = {
       local: 'bg-gray-100 text-gray-800',
@@ -204,7 +239,7 @@ const Tenants = () => {
                 <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                   <div className="flex items-center justify-end space-x-2">
                     <button
-                      onClick={() => setEditingTenant(tenant)}
+                      onClick={() => handleEditTenant(tenant)}
                       className="text-blue-600 hover:text-blue-900 p-1 rounded"
                       title="Edit"
                     >
@@ -275,36 +310,16 @@ const Tenants = () => {
         )}
       </div>
 
-      {/* Modals would go here */}
-      {showCreateModal && (
-        <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
-          <div className="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
-            <div className="mt-3">
-              <h3 className="text-lg font-medium text-gray-900 mb-4">Create New Tenant</h3>
-              <p className="text-sm text-gray-500 mb-4">
-                Tenant creation modal would go here with form fields for name, slug, domain, auth provider, etc.
-              </p>
-              <div className="flex justify-end space-x-3">
-                <button
-                  onClick={() => setShowCreateModal(false)}
-                  className="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300"
-                >
-                  Cancel
-                </button>
-                <button
-                  onClick={() => {
-                    setShowCreateModal(false)
-                    toast.success('Tenant creation modal - implement form handling')
-                  }}
-                  className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
-                >
-                  Create
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
+      {/* Tenant Creation/Edit Modal */}
+      <TenantModal
+        isOpen={showCreateModal}
+        onClose={() => {
+          setShowCreateModal(false)
+          setEditingTenant(null)
+        }}
+        tenant={editingTenant}
+        onSave={handleSaveTenant}
+      />
     </div>
   )
 }