From 9d2e2c223c4bf099e35c43e5101f7814c80189f6 Mon Sep 17 00:00:00 2001
From: ghazall-ag <ghazall_agoush@yahoo.com>
Date: Sun, 30 Nov 2025 21:05:37 +0330
Subject: [PATCH] feat(Issuers): add , edit, delete , toggle ,capability and
 currencies functionality

---
 src/App.jsx                |  14 +
 src/components/Navbar.jsx  |  17 +-
 src/components/Sidebar.jsx |   4 +-
 src/pages/Issuer.jsx       | 667 +++++++++++++++++++++++++++++++++++++
 src/pages/Roles.jsx        | 114 ++++---
 src/pages/Users.jsx        |  51 +--
 src/services/api.js        |   1 +
 src/services/issuerAPI.js  | 194 +++++++++++
 src/services/usersAPI.js   |  10 +-
 9 files changed, 1004 insertions(+), 68 deletions(-)
 create mode 100644 src/pages/Issuer.jsx
 create mode 100644 src/services/issuerAPI.js

diff --git a/src/App.jsx b/src/App.jsx
index d9e4a91..1495186 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -12,6 +12,8 @@ import Roles from './pages/Roles';
 import Users from './pages/Users';
 import Currency from './pages/Currency';
 import Location from './pages/Location';
+import Issuer from './pages/Issuer';
+import { AuthProvider } from './context/AuthContext';
 
 // Protected Route Component
 const ProtectedRoute = ({ children }) => {
@@ -135,6 +137,16 @@ const AppRoutes = () => {
             </Layout>
           </ProtectedRoute>
         }
+      />
+      <Route
+        path="/issuer"
+        element={
+          <ProtectedRoute>
+            <Layout>
+              <Issuer/>
+            </Layout>
+          </ProtectedRoute>
+        }
       />   
 
 
@@ -147,9 +159,11 @@ const AppRoutes = () => {
 const App = () => {
   return (
     <Router>
+      <AuthProvider>
       <div className="App">
         <AppRoutes />
       </div>
+      </AuthProvider>
     </Router>
   );
 };
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 175dab2..99dabbd 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -2,8 +2,19 @@ import React, { useState } from 'react';
 import { Menu, Sun, Moon, User, LogOut, ChevronDown } from 'lucide-react';
 import { signOut } from '../services/api';
 import { useAuthStore } from '../store/authStore';
+import { useAuth } from '../context/AuthContext';
 
 const Navbar = ({ onSidebarToggle }) => {
+  let user = null;
+  try {
+    const authContext = useAuth();
+    user = authContext?.user || null;
+  } catch (e) {
+    // useAuth not available, will use localStorage
+  }
+  const userData = user || JSON.parse(localStorage.getItem('user') || '{}') || {};
+  const userName = userData.name && userData.name !== '...' ? userData.name : (userData.email || '...');
+  const userEmail = userData.email || '';
   const isLoggedIn = useAuthStore((s) => s.isLoggedIn);
   const [isDarkMode, setIsDarkMode] = useState(() => {
     return localStorage.getItem('theme') === 'dark' || 
@@ -77,7 +88,7 @@ const Navbar = ({ onSidebarToggle }) => {
               <User className="h-4 w-4 text-blue-600 dark:text-blue-400" />
             </div>
             <span className="hidden sm:block text-sm font-medium">
-              {isLoggedIn ? 'Admin' : 'Guest'}
+              {isLoggedIn ? userName : 'Guest'}
             </span>
             <ChevronDown className="h-4 w-4" />
           </button>
@@ -87,10 +98,10 @@ const Navbar = ({ onSidebarToggle }) => {
             <div className="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-1 z-50">
               <div className="px-4 py-2 border-b border-gray-200 dark:border-gray-700">
                 <p className="text-sm font-medium text-gray-900 dark:text-white">
-                  {isLoggedIn ? 'Admin User' : 'Guest'}
+                  {isLoggedIn ? userName : 'Guest'}
                 </p>
                 <p className="text-xs text-gray-500 dark:text-gray-400">
-                  {isLoggedIn ? 'admin@example.com' : ''}
+                  {isLoggedIn ? userEmail : ''}
                 </p>
               </div>
               <button
diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index c74a75c..3a4ab2b 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -9,7 +9,8 @@ import {
   Users,
   Shield,
   DollarSign,
-  MapPin
+  MapPin,
+  Building2
 } from 'lucide-react';
 
 const Sidebar = ({ isOpen, onToggle }) => {
@@ -20,6 +21,7 @@ const Sidebar = ({ isOpen, onToggle }) => {
     { name: 'Users', href: '/users', icon: Users },
     { name: 'Currency', href: '/currency', icon: DollarSign },
     { name: 'Location', href: '/location', icon: MapPin },
+    { name: 'Issuer', href: '/issuer', icon: Building2 },
     { name: 'Settings', href: '/settings', icon: Settings },
   ];
 
diff --git a/src/pages/Issuer.jsx b/src/pages/Issuer.jsx
new file mode 100644
index 0000000..52eac85
--- /dev/null
+++ b/src/pages/Issuer.jsx
@@ -0,0 +1,667 @@
+import React, { useEffect, useMemo, useState, useCallback } from 'react';
+import DataTable from '../components/DataTable';
+import { issuerAPI, cityAPI, currencyAPI } from '../services/api';
+import { Plus, Trash2, Search, Pencil, Power, Settings, DollarSign } from 'lucide-react';
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import { getErrorMessage, getSuccessMessage } from '../utils/errorHandler';
+
+const Issuer = () => {
+  const [issuers, setIssuers] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [filter, setFilter] = useState('');
+
+  const [addForm, setAddForm] = useState({
+    name: '',
+    supportEmail: '',
+    cityId: null,
+    postalCode: '',
+    addressDetails: ''
+  });
+
+  const [editForm, setEditForm] = useState({
+    name: '',
+    supportEmail: '',
+    cityId: null,
+    postalCode: '',
+    addressDetails: ''
+  });
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [editingIssuer, setEditingIssuer] = useState(null);
+  const [capabilitiesModal, setCapabilitiesModal] = useState(null);
+  const [currenciesModal, setCurrenciesModal] = useState(null);
+  const [cities, setCities] = useState([]);
+  const [currencies, setCurrencies] = useState([]);
+  const [selectedCapabilities, setSelectedCapabilities] = useState([]);
+  const [selectedCurrencies, setSelectedCurrencies] = useState([]);
+  const [capabilitiesData, setCapabilitiesData] = useState([]); // Store full capabilities data from API
+
+  // Capabilities options
+  const capabilityOptions = ['TopUpAgent', 'VoucherIssuer', 'PaymentProcessor', 'WalletProvider'];
+
+  // دریافت Issuers
+  const fetchIssuers = useCallback(async () => {
+    try {
+      setLoading(true);
+      const list = await issuerAPI.list();
+      setIssuers(Array.isArray(list) ? list : []);
+      setError('');
+    } catch (err) {
+      console.error('Error fetching issuers:', err);
+      const status = err?.response?.status;
+      const errorMsg = getErrorMessage(err);
+      setError(errorMsg);
+      // Only show toast for non-server errors
+      if (status !== 500) {
+        toast.error(errorMsg);
+      } else {
+        toast.error('Server error. Please try again later.');
+      }
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchIssuers();
+    // Load cities from /api/v1/City
+    const loadCities = async () => {
+      try {
+        const citiesList = await cityAPI.list({ currentPage: 1, pageSize: 1000 });
+        console.log('Cities loaded from /api/v1/City:', citiesList);
+        console.log('Cities count:', citiesList?.length || 0);
+        if (citiesList && citiesList.length > 0) {
+          console.log('First city sample:', citiesList[0]);
+        }
+        setCities(Array.isArray(citiesList) ? citiesList : []);
+      } catch (err) {
+        console.error('Failed to load cities from /api/v1/City:', err);
+        const status = err?.response?.status;
+        // Don't show toast for server errors (500) - it's a server issue
+        if (status !== 500) {
+          toast.error('Failed to load cities');
+        }
+        setCities([]);
+      }
+    };
+    // Load currencies
+    const loadCurrencies = async () => {
+      try {
+        const currenciesList = await currencyAPI.list();
+        setCurrencies(Array.isArray(currenciesList) ? currenciesList : []);
+      } catch (err) {
+        console.error('Failed to load currencies:', err);
+        const status = err?.response?.status;
+        // Don't show toast for server errors (500) - it's a server issue
+        if (status !== 500) {
+          console.warn('Currency loading failed but continuing...');
+        }
+        setCurrencies([]);
+      }
+    };
+    loadCities();
+    loadCurrencies();
+  }, [fetchIssuers]);
+
+  // --- اضافه کردن Issuer ---
+  const onAddIssuer = async (e) => {
+    e.preventDefault();
+    if (!addForm.name.trim() || !addForm.supportEmail.trim()) {
+      toast.error('Name and Support Email are required');
+      return;
+    }
+    try {
+      const newIssuer = await issuerAPI.create(addForm);
+      await fetchIssuers();
+      setIsModalOpen(false);
+      setAddForm({
+        name: '',
+        supportEmail: '',
+        cityId: null,
+        postalCode: '',
+        addressDetails: ''
+      });
+      toast.success(getSuccessMessage(newIssuer) || 'Issuer added successfully');
+    } catch (err) {
+      toast.error(getErrorMessage(err));
+    }
+  };
+
+  // --- ویرایش Issuer ---
+  const openEdit = async (issuer) => {
+    setEditingIssuer(issuer);
+    try {
+      const issuerDetails = await issuerAPI.getById(issuer.id);
+      console.log('Issuer details from API:', issuerDetails);
+      
+      // API returns: name, supportEmail, address (not addressDetails), and may have cityId, postalCode
+      // Use address as addressDetails if addressDetails doesn't exist
+      setEditForm({
+        name: issuerDetails?.name || '',
+        supportEmail: issuerDetails?.supportEmail || '',
+        cityId: issuerDetails?.cityId || null,
+        postalCode: issuerDetails?.postalCode || '',
+        addressDetails: issuerDetails?.addressDetails || issuerDetails?.address || ''
+      });
+      
+      console.log('Edit form set to:', {
+        name: issuerDetails?.name || '',
+        supportEmail: issuerDetails?.supportEmail || '',
+        cityId: issuerDetails?.cityId || null,
+        postalCode: issuerDetails?.postalCode || '',
+        addressDetails: issuerDetails?.addressDetails || issuerDetails?.address || ''
+      });
+    } catch (err) {
+      console.error('Error loading issuer details:', err);
+      toast.error('Failed to load issuer details');
+      // Fallback to issuer data from list
+      setEditForm({
+        name: issuer?.name || '',
+        supportEmail: issuer?.supportEmail || '',
+        cityId: issuer?.cityId || null,
+        postalCode: issuer?.postalCode || '',
+        addressDetails: issuer?.addressDetails || issuer?.address || ''
+      });
+    }
+    setIsEditModalOpen(true);
+  };
+
+  const onUpdateIssuer = async (e) => {
+    e.preventDefault();
+    if (!editingIssuer) return;
+    if (!editForm.name.trim() || !editForm.supportEmail.trim()) {
+      toast.error('Name and Support Email are required');
+      return;
+    }
+    try {
+      const updatedIssuer = await issuerAPI.update(editingIssuer.id, editForm);
+      await fetchIssuers();
+      setIsEditModalOpen(false);
+      setEditingIssuer(null);
+      toast.success(getSuccessMessage(updatedIssuer) || 'Issuer updated successfully');
+    } catch (err) {
+      toast.error(getErrorMessage(err));
+    }
+  };
+
+  // --- حذف Issuer ---
+  const onDelete = async (id) => {
+    if (!window.confirm('Are you sure you want to delete this issuer?')) return;
+    try {
+      const result = await issuerAPI.remove(id);
+      await fetchIssuers();
+      toast.success(getSuccessMessage(result) || 'Issuer deleted successfully');
+    } catch (err) {
+      toast.error(getErrorMessage(err));
+    }
+  };
+
+  // --- تغییر وضعیت فعال بودن ---
+  const onToggleActivation = async (id) => {
+    try {
+      const updated = await issuerAPI.toggleActivation(id);
+      await fetchIssuers();
+      toast.success(getSuccessMessage(updated) || 'Issuer status updated');
+    } catch (err) {
+      toast.error(getErrorMessage(err));
+    }
+  };
+
+  // --- مدیریت Capabilities ---
+  const openCapabilitiesModal = async (issuer) => {
+    setCapabilitiesModal(issuer);
+    try {
+      const caps = await issuerAPI.getCapabilities(issuer.id);
+      if (Array.isArray(caps) && caps.length > 0) {
+        setCapabilitiesData(caps);
+        setSelectedCapabilities(caps.filter(c => c.hasCapability).map(c => c.capability));
+      } else {
+        // If no capabilities from API, create default structure
+        const defaultCaps = capabilityOptions.map(cap => ({
+          capability: cap,
+          capabilityName: cap,
+          hasCapability: false
+        }));
+        setCapabilitiesData(defaultCaps);
+        setSelectedCapabilities(Array.isArray(issuer.capabilities) ? issuer.capabilities : []);
+      }
+    } catch (err) {
+      // Fallback: create default structure
+      const defaultCaps = capabilityOptions.map(cap => ({
+        capability: cap,
+        capabilityName: cap,
+        hasCapability: false
+      }));
+      setCapabilitiesData(defaultCaps);
+      setSelectedCapabilities(Array.isArray(issuer.capabilities) ? issuer.capabilities : []);
+    }
+  };
+
+  const onUpdateCapabilities = async () => {
+    if (!capabilitiesModal) return;
+    try {
+      // Build capabilities array - only include selected capabilities
+      const capabilities = selectedCapabilities
+        .filter(cap => cap && String(cap).trim() !== '') // Filter out empty/invalid capabilities
+        .map(cap => {
+          const capStr = String(cap).trim();
+          const existingCap = capabilitiesData.find(c => c.capability === capStr);
+          
+          return {
+            capability: capStr,
+            capabilityName: existingCap?.capabilityName || capStr,
+            hasCapability: true
+          };
+        })
+        .filter(cap => cap.capability); // Final filter to ensure capability is not empty
+      
+      console.log('Sending capabilities (selected only):', JSON.stringify(capabilities, null, 2));
+      console.log('Selected capabilities:', selectedCapabilities);
+      
+      await issuerAPI.updateCapabilities(capabilitiesModal.id, capabilities);
+      toast.success('Capabilities updated successfully');
+      setCapabilitiesModal(null);
+      await fetchIssuers();
+    } catch (err) {
+      console.error('Error updating capabilities:', err);
+      console.error('Error response:', err?.response?.data);
+      console.error('Error details:', err?.response?.data?.errors);
+      toast.error(getErrorMessage(err));
+    }
+  };
+
+  // --- مدیریت Allowed Currencies ---
+  const openCurrenciesModal = async (issuer) => {
+    setCurrenciesModal(issuer);
+    try {
+      const allowed = await issuerAPI.getAllowedCurrencies(issuer.id);
+      console.log('Allowed currencies from API:', allowed);
+      if (Array.isArray(allowed) && allowed.length > 0) {
+        // Extract currency codes from the response
+        const codes = allowed.map(c => c.code).filter(code => code);
+        console.log('Extracted currency codes:', codes);
+        setSelectedCurrencies(codes);
+      } else {
+        setSelectedCurrencies([]);
+      }
+    } catch (err) {
+      console.error('Error loading allowed currencies:', err);
+      setSelectedCurrencies([]);
+    }
+  };
+
+  const onUpdateCurrencies = async () => {
+    if (!currenciesModal) return;
+    try {
+      const allowedCurrencies = currencies.map(curr => ({
+        currencyCode: curr.currencyCode?.code || curr.code || '',
+        currencyEnglishName: curr.currencyCode?.name || curr.name || '',
+        allowed: selectedCurrencies.includes(curr.currencyCode?.code || curr.code || '')
+      }));
+      await issuerAPI.updateAllowedCurrencies(currenciesModal.id, allowedCurrencies);
+      toast.success('Allowed currencies updated successfully');
+      setCurrenciesModal(null);
+      await fetchIssuers();
+    } catch (err) {
+      toast.error(getErrorMessage(err));
+    }
+  };
+
+  // --- ستون‌های جدول ---
+  const columns = useMemo(() => [
+    { key: 'name', header: 'Name' },
+    { key: 'supportEmail', header: 'Support Email' },
+    { key: 'address', header: 'Address' },
+    { key: 'supportCurrencies', header: 'Support Currencies' },
+    {
+      key: 'capabilities',
+      header: 'Capabilities',
+      render: (val) => (
+        <span>
+          {Array.isArray(val) && val.length > 0
+            ? val.join(', ')
+            : '—'}
+        </span>
+      ),
+    },
+    {
+      key: 'isActive',
+      header: 'Active',
+      render: (val) => (val ? '✅' : '❌')
+    },
+    {
+      key: 'actions',
+      header: 'Actions',
+      render: (_val, row) => (
+        <div className="flex flex-wrap items-center gap-2">
+          <button
+            onClick={() => openEdit(row)}
+            className="inline-flex items-center px-3 py-1 text-sm rounded-md bg-blue-100 text-blue-700 hover:opacity-90"
+          >
+            <Pencil className="h-4 w-4 mr-1" /> Edit
+          </button>
+          <button
+            onClick={() => onDelete(row.id)}
+            className="inline-flex items-center px-3 py-1 text-sm rounded-md bg-red-100 text-red-700 hover:opacity-90"
+          >
+            <Trash2 className="h-4 w-4 mr-1" /> Delete
+          </button>
+          <button
+            onClick={() => onToggleActivation(row.id)}
+            className="inline-flex items-center px-3 py-1 text-sm rounded-md bg-gray-100 text-gray-700 hover:opacity-90"
+          >
+            <Power className="h-4 w-4 mr-1" /> Toggle
+          </button>
+          <button
+            onClick={() => openCapabilitiesModal(row)}
+            className="inline-flex items-center px-3 py-1 text-sm rounded-md bg-purple-100 text-purple-700 hover:opacity-90"
+          >
+            <Settings className="h-4 w-4 mr-1" /> Capabilities
+          </button>
+          <button
+            onClick={() => openCurrenciesModal(row)}
+            className="inline-flex items-center px-3 py-1 text-sm rounded-md bg-green-100 text-green-700 hover:opacity-90"
+          >
+            <DollarSign className="h-4 w-4 mr-1" /> Currencies
+          </button>
+        </div>
+      ),
+    },
+  ], []);
+
+  // --- مودال اضافه و ویرایش ---
+  const renderModal = (isOpen, title, onSubmit, formState, setFormState, onClose) => {
+    if (!isOpen) return null;
+    return (
+      <>
+        <div className="fixed inset-0 bg-black bg-opacity-50 z-40" onClick={onClose} />
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+          <div className="w-full max-w-2xl card p-6 relative bg-white rounded-2xl shadow-lg">
+            <h3 className="text-lg font-semibold text-gray-900 mb-4">{title}</h3>
+            <form className="space-y-4" onSubmit={onSubmit}>
+              <div>
+                <label className="block text-sm mb-1 text-gray-700 dark:text-gray-300">Name *</label>
+                <input
+                  value={formState.name}
+                  onChange={(e) => setFormState({ ...formState, name: e.target.value })}
+                  className="w-full p-2 border rounded-lg"
+                  placeholder="Issuer name"
+                  required
+                />
+              </div>
+              <div>
+                <label className="block text-sm mb-1 text-gray-700 dark:text-gray-300">Support Email *</label>
+                <input
+                  type="email"
+                  value={formState.supportEmail}
+                  onChange={(e) => setFormState({ ...formState, supportEmail: e.target.value })}
+                  className="w-full p-2 border rounded-lg"
+                  placeholder="support@example.com"
+                  required
+                />
+              </div>
+              {title.includes('Edit') && (
+                <>
+                  <div>
+                    <label className="block text-sm mb-1 text-gray-700 dark:text-gray-300">City</label>
+                    <select
+                      value={formState.cityId ? String(formState.cityId) : ''}
+                      onChange={(e) => setFormState({ ...formState, cityId: e.target.value || null })}
+                      className="w-full p-2 border rounded-lg"
+                    >
+                      <option value="">Select City</option>
+                      {cities.length > 0 ? (
+                        cities.map(city => (
+                          <option key={city.id || city.cityId} value={city.id || city.cityId}>
+                            {city.cityName || city.name || 'Unknown City'}
+                          </option>
+                        ))
+                      ) : (
+                        <option value="" disabled>Loading cities...</option>
+                      )}
+                    </select>
+                  </div>
+                  <div>
+                    <label className="block text-sm mb-1 text-gray-700 dark:text-gray-300">Postal Code</label>
+                    <input
+                      value={formState.postalCode}
+                      onChange={(e) => setFormState({ ...formState, postalCode: e.target.value })}
+                      className="w-full p-2 border rounded-lg"
+                      placeholder="Postal code"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm mb-1 text-gray-700 dark:text-gray-300">Address Details</label>
+                    <textarea
+                      value={formState.addressDetails}
+                      onChange={(e) => setFormState({ ...formState, addressDetails: e.target.value })}
+                      className="w-full p-2 border rounded-lg"
+                      placeholder="Address details"
+                      rows={3}
+                    />
+                  </div>
+                </>
+              )}
+              {!title.includes('Edit') && (
+                <>
+                  <div>
+                    <label className="block text-sm mb-1 text-gray-700 dark:text-gray-300">City</label>
+                    <select
+                      value={formState.cityId ? String(formState.cityId) : ''}
+                      onChange={(e) => setFormState({ ...formState, cityId: e.target.value || null })}
+                      className="w-full p-2 border rounded-lg"
+                    >
+                      <option value="">Select City</option>
+                      {cities.length > 0 ? (
+                        cities.map(city => (
+                          <option key={city.id || city.cityId} value={city.id || city.cityId}>
+                            {city.cityName || city.name || 'Unknown City'}
+                          </option>
+                        ))
+                      ) : (
+                        <option value="" disabled>Loading cities...</option>
+                      )}
+                    </select>
+                  </div>
+                  <div>
+                    <label className="block text-sm mb-1 text-gray-700 dark:text-gray-300">Postal Code</label>
+                    <input
+                      value={formState.postalCode}
+                      onChange={(e) => setFormState({ ...formState, postalCode: e.target.value })}
+                      className="w-full p-2 border rounded-lg"
+                      placeholder="Postal code"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm mb-1 text-gray-700 dark:text-gray-300">Address Details</label>
+                    <textarea
+                      value={formState.addressDetails}
+                      onChange={(e) => setFormState({ ...formState, addressDetails: e.target.value })}
+                      className="w-full p-2 border rounded-lg"
+                      placeholder="Address details"
+                      rows={3}
+                    />
+                  </div>
+                </>
+              )}
+              <div className="flex justify-end gap-x-2">
+                <button type="button" onClick={onClose} className="px-4 py-2 border rounded-lg">
+                  Cancel
+                </button>
+                <button type="submit" className="btn-primary px-4 py-2 rounded-lg">
+                  {title.includes('Edit') ? 'Update' : 'Add'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </>
+    );
+  };
+
+  return (
+    <div className="p-6">
+      <ToastContainer position="top-right" autoClose={3000} />
+
+      <div className="mb-6 flex items-start justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Issuers</h1>
+          <p className="text-gray-600 dark:text-gray-400">
+            Manage issuers: add, edit, activate/deactivate, and delete
+          </p>
+        </div>
+        <button onClick={() => setIsModalOpen(true)} className="btn-primary inline-flex items-center">
+          <Plus className="h-4 w-4 mr-2" /> Add Issuer
+        </button>
+      </div>
+
+      {renderModal(isModalOpen, 'Add Issuer', onAddIssuer, addForm, setAddForm, () => setIsModalOpen(false))}
+      {renderModal(isEditModalOpen, 'Edit Issuer', onUpdateIssuer, editForm, setEditForm, () => setIsEditModalOpen(false))}
+
+      {/* Capabilities Modal */}
+      {capabilitiesModal && (
+        <>
+          <div className="fixed inset-0 bg-black bg-opacity-50 z-40" onClick={() => setCapabilitiesModal(null)} />
+          <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+            <div className="w-full max-w-2xl card p-6 relative bg-white rounded-2xl shadow-lg">
+              <h3 className="text-lg font-semibold text-gray-900 mb-4">
+                Manage Capabilities for {capabilitiesModal.name}
+              </h3>
+              <div className="space-y-2">
+                {capabilityOptions.map((cap) => {
+                  const checked = selectedCapabilities.includes(cap);
+                  return (
+                    <label key={cap} className="flex items-center gap-2 p-2 border rounded hover:bg-gray-50">
+                      <input
+                        type="checkbox"
+                        checked={checked}
+                        onChange={(e) => {
+                          if (e.target.checked) {
+                            setSelectedCapabilities([...selectedCapabilities, cap]);
+                          } else {
+                            setSelectedCapabilities(selectedCapabilities.filter(c => c !== cap));
+                          }
+                        }}
+                      />
+                      <span className="text-sm">{cap}</span>
+                    </label>
+                  );
+                })}
+              </div>
+              <div className="flex justify-end gap-x-2 mt-4">
+                <button
+                  type="button"
+                  onClick={() => setCapabilitiesModal(null)}
+                  className="px-4 py-2 border rounded-lg"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={onUpdateCapabilities}
+                  className="btn-primary px-4 py-2 rounded-lg"
+                >
+                  Save
+                </button>
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+
+      {/* Allowed Currencies Modal */}
+      {currenciesModal && (
+        <>
+          <div className="fixed inset-0 bg-black bg-opacity-50 z-40" onClick={() => setCurrenciesModal(null)} />
+          <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+            <div className="w-full max-w-2xl card p-6 relative bg-white rounded-2xl shadow-lg max-h-[80vh] overflow-y-auto">
+              <h3 className="text-lg font-semibold text-gray-900 mb-4">
+                Manage Allowed Currencies for {currenciesModal.name}
+              </h3>
+              <div className="space-y-2">
+                {currencies.map((curr) => {
+                  const code = curr.currencyCode?.code || curr.code || '';
+                  const name = curr.currencyCode?.name || curr.name || '';
+                  const checked = selectedCurrencies.includes(code);
+                  return (
+                    <label key={code} className="flex items-center gap-2 p-2 border rounded hover:bg-gray-50">
+                      <input
+                        type="checkbox"
+                        checked={checked}
+                        onChange={(e) => {
+                          if (e.target.checked) {
+                            setSelectedCurrencies([...selectedCurrencies, code]);
+                          } else {
+                            setSelectedCurrencies(selectedCurrencies.filter(c => c !== code));
+                          }
+                        }}
+                      />
+                      <span className="text-sm">{code} - {name}</span>
+                    </label>
+                  );
+                })}
+              </div>
+              <div className="flex justify-end gap-x-2 mt-4">
+                <button
+                  type="button"
+                  onClick={() => setCurrenciesModal(null)}
+                  className="px-4 py-2 border rounded-lg"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={onUpdateCurrencies}
+                  className="btn-primary px-4 py-2 rounded-lg"
+                >
+                  Save
+                </button>
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+
+      <div className="card p-4 mb-4">
+        <div className="relative max-w-md">
+          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+          <input
+            value={filter}
+            onChange={(e) => {
+              setFilter(e.target.value);
+            }}
+            placeholder="Filter by name, email or address"
+            className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500"
+          />
+        </div>
+      </div>
+
+      {loading ? (
+        <div className="flex justify-center py-10">
+          <div className="w-8 h-8 border-4 border-t-transparent border-primary-500 rounded-full animate-spin" />
+        </div>
+      ) : (
+        <DataTable
+          data={issuers.filter(issuer => {
+            if (!filter.trim()) return true;
+            const searchTerm = filter.toLowerCase();
+            const name = (issuer.name || '').toLowerCase();
+            const email = (issuer.supportEmail || '').toLowerCase();
+            const address = (issuer.address || '').toLowerCase();
+            return name.includes(searchTerm) ||
+                   email.includes(searchTerm) ||
+                   address.includes(searchTerm);
+          })}
+          columns={columns}
+          searchable={false}
+        />
+      )}
+
+      {error && <div className="mt-4 text-sm text-red-600">{error}</div>}
+    </div>
+  );
+};
+
+export default Issuer;
+
diff --git a/src/pages/Roles.jsx b/src/pages/Roles.jsx
index 77175f8..d758683 100644
--- a/src/pages/Roles.jsx
+++ b/src/pages/Roles.jsx
@@ -153,7 +153,7 @@ const Roles = () => {
             onClick={() => setIsModalOpen(false)}
           />
           <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-            <div className="w-full max-w-lg card p-6 relative">
+            <div className="w-full max-w-2xl card p-6 relative">
               <div className="mb-4">
                 <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Add Role</h3>
                 <p className="text-sm text-gray-600 dark:text-gray-400">Create a new role with permissions</p>
@@ -170,16 +170,34 @@ const Roles = () => {
                 </div>
                 <div>
                   <label className="block text-sm mb-2 text-gray-700 dark:text-gray-300">Permissions</label>
-                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+                  <div className="flex items-center gap-2 mb-2">
+                    <button
+                      type="button"
+                      onClick={() => setSelectedPermissions(permissionOptions.map(p => typeof p === 'string' ? p : p?.name).filter(Boolean))}
+                      className="text-xs border px-2 py-1 rounded bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-primary-50 dark:hover:bg-gray-600 transition"
+                    >
+                      Select All
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setSelectedPermissions([])}
+                      className="text-xs border px-2 py-1 rounded bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-red-50 dark:hover:bg-gray-600 transition"
+                    >
+                      Clear
+                    </button>
+                  </div>
+                  <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3 max-h-48 overflow-y-auto border rounded-lg p-3 bg-gray-50 dark:bg-gray-800">
                     {permissionOptions.map((perm) => {
                       const permName = typeof perm === 'string' ? perm : perm?.name;
                       const permDesc = typeof perm === 'object' ? perm?.description : undefined;
                       const checked = selectedPermissions.includes(permName);
                       return (
-                        <label key={permName} className="inline-flex items-center   gap-x-2 space-x-reverse justify-start">
+                        <label key={permName}
+                          className="flex items-start gap-x-2 cursor-pointer border border-gray-200 dark:border-gray-700 rounded-md bg-white dark:bg-gray-900 px-2 py-2 shadow-sm hover:border-primary-400 dark:hover:border-primary-600 relative transition"
+                        >
                           <input
                             type="checkbox"
-                            className="h-4 w-4 text-primary-600 border-gray-300 rounded"
+                            className="mt-1 h-4 w-4 text-primary-600 border-gray-300 rounded"
                             checked={checked}
                             onChange={(e) => {
                               if (e.target.checked) {
@@ -189,37 +207,32 @@ const Roles = () => {
                               }
                             }}
                           />
-                          <span className="text-sm text-gray-700 dark:text-gray-300 mx-2">
+                          <span className="text-sm text-gray-700 dark:text-gray-200 flex flex-col">
+                            <span
+                              title={permDesc || ''}
+                              className={permDesc ? 'underline decoration-dotted decoration-gray-400 cursor-help' : ''}
+                            >
                             {permName}
-                            {permDesc ? (
-                              <span className="ml-2 text-xs text-gray-500 dark:text-gray-400 block">{permDesc}</span>
-                            ) : null}
+                            </span>
+                            {permDesc && (
+                              <span className="text-xs text-gray-400 dark:text-gray-400 mt-1 ">{permDesc}</span>
+                            )}
                           </span>
                         </label>
                       );
                     })}
                   </div>
-                  <div className="mt-2">
-                    <button
-                      type="button"
-                      onClick={() => setSelectedPermissions([])}
-                      className="text-xs text-blue-600 dark:text-gray-300 hover:underline"
-                    >
-                      Clear selection
-                    </button>
-                  </div>
-                  <div className="mt-3">
-                    <label className="block text-xs mb-1 text-gray-500 dark:text-gray-400">Or enter custom permissions (comma-separated)</label>
+                  <div className="mt-4 p-3 rounded bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600">
+                    <label className="block text-xs mb-1 text-gray-500 dark:text-gray-400">Custom permissions (comma separated)</label>
                     <input
                       value={permissionsInput}
                       onChange={(e) => setPermissionsInput(e.target.value)}
-                      className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-500"
+                      className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-500"
                       placeholder="Administrator, RoleManagement"
                     />
                   </div>
                 </div>
-                
-                <div className="flex items-center justify-end   gap-x-2">
+                <div className="flex items-center justify-end gap-x-2">
                   <button
                     type="button"
                     onClick={() => setIsModalOpen(false)}
@@ -245,7 +258,7 @@ const Roles = () => {
             onClick={() => setIsEditModalOpen(false)}
           />
           <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-            <div className="w-full max-w-lg card p-6 relative">
+            <div className="w-full max-w-2xl card p-6 relative">
               <div className="mb-4">
                 <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Edit Role</h3>
                 <p className="text-sm text-gray-600 dark:text-gray-400">Update role name and permissions</p>
@@ -262,16 +275,34 @@ const Roles = () => {
                 </div>
                 <div>
                   <label className="block text-sm mb-2 text-gray-700 dark:text-gray-300">Permissions</label>
-                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+                  <div className="flex items-center gap-2 mb-2">
+                    <button
+                      type="button"
+                      onClick={() => setSelectedPermissions(permissionOptions.map(p => typeof p === 'string' ? p : p?.name).filter(Boolean))}
+                      className="text-xs border px-2 py-1 rounded bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-primary-50 dark:hover:bg-gray-600 transition"
+                    >
+                      Select All
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setSelectedPermissions([])}
+                      className="text-xs border px-2 py-1 rounded bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-red-50 dark:hover:bg-gray-600 transition"
+                    >
+                      Clear
+                    </button>
+                  </div>
+                  <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3 max-h-48 overflow-y-auto border rounded-lg p-3 bg-gray-50 dark:bg-gray-800">
                     {permissionOptions.map((perm) => {
                       const permName = typeof perm === 'string' ? perm : perm?.name;
                       const permDesc = typeof perm === 'object' ? perm?.description : undefined;
                       const checked = selectedPermissions.includes(permName);
                       return (
-                        <label key={permName} className="inline-flex items-center   space-x-reverse justify-start">
+                        <label key={permName}
+                          className="flex items-start gap-x-2 cursor-pointer border border-gray-200 dark:border-gray-700 rounded-md bg-white dark:bg-gray-900 px-2 py-2 shadow-sm hover:border-primary-400 dark:hover:border-primary-600 relative transition"
+                        >
                           <input
                             type="checkbox"
-                            className="h-4 w-4 text-primary-600 border-gray-300 rounded"
+                            className="mt-1 h-4 w-4 text-primary-600 border-gray-300 rounded"
                             checked={checked}
                             onChange={(e) => {
                               if (e.target.checked) {
@@ -281,37 +312,32 @@ const Roles = () => {
                               }
                             }}
                           />
-                          <span className="text-sm text-gray-700 dark:text-gray-300 mx-2">
+                          <span className="text-sm text-gray-700 dark:text-gray-200 flex flex-col">
+                            <span
+                              title={permDesc || ''}
+                              className={permDesc ? 'underline decoration-dotted decoration-gray-400 cursor-help' : ''}
+                            >
                             {permName}
-                            {permDesc ? (
-                              <span className="ml-2 text-xs text-gray-500 dark:text-gray-400 block">{permDesc}</span>
-                            ) : null}
+                            </span>
+                            {permDesc && (
+                              <span className="text-xs text-gray-400 dark:text-gray-400 mt-1 ">{permDesc}</span>
+                            )}
                           </span>
                         </label>
                       );
                     })}
                   </div>
-                  <div className="mt-2">
-                    <button
-                      type="button"
-                      onClick={() => setSelectedPermissions([])}
-                      className="text-xs text-blue-600 dark:text-gray-300 hover:underline"
-                    >
-                      Clear selection
-                    </button>
-                  </div>
-                  <div className="mt-3">
-                    <label className="block text-xs mb-1 text-gray-500 dark:text-gray-400">Or enter custom permissions (comma-separated)</label>
+                  <div className="mt-4 p-3 rounded bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600">
+                    <label className="block text-xs mb-1 text-gray-500 dark:text-gray-400">Custom permissions (comma separated)</label>
                     <input
                       value={permissionsInput}
                       onChange={(e) => setPermissionsInput(e.target.value)}
-                      className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-500"
+                      className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-500"
                       placeholder="Administrator, RoleManagement"
                     />
                   </div>
                 </div>
-                
-                <div className="flex items-center justify-end   gap-x-2">
+                <div className="flex items-center justify-end gap-x-2">
                   <button
                     type="button"
                     onClick={() => setIsEditModalOpen(false)}
diff --git a/src/pages/Users.jsx b/src/pages/Users.jsx
index 7744e3e..dd102a8 100644
--- a/src/pages/Users.jsx
+++ b/src/pages/Users.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState, useCallback } from 'react';
+import React, { useEffect, useMemo, useState, useCallback, useRef } from 'react';
 import DataTable from '../components/DataTable';
 import { usersAPI, rolesAPI } from '../services/api';
 import { Plus, Trash2, Search, Pencil, ShieldOff, RefreshCcw } from 'lucide-react';
@@ -6,15 +6,6 @@ import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import { getErrorMessage, getSuccessMessage } from '../utils/errorHandler';
 
-// debounce ساده
-function debounce(func, delay) {
-  let timer;
-  return function (...args) {
-    clearTimeout(timer);
-    timer = setTimeout(() => func.apply(this, args), delay);
-  };
-}
-
 const Users = () => {
   const [users, setUsers] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -60,8 +51,9 @@ const Users = () => {
     setRoles(list);
   }, []);
 
+  // Initial load - fetch all users once
   useEffect(() => {
-    fetchUsers();
+    fetchUsers('');
     fetchRoles();
   }, [fetchUsers, fetchRoles]);
 
@@ -140,9 +132,18 @@ const Users = () => {
   };
 
   // --- مدیریت رول‌ها ---
-  const openRolesModal = (user) => {
+  const openRolesModal = async (user) => {
     setRolesModalUser(user);
-    setSelectedRoles(user.roles?.map(r => r.id) || []);
+    try {
+      // دریافت roles کاربر از API
+      const userRoles = await usersAPI.getRoles(user.id);
+      setSelectedRoles(userRoles?.map(r => r.id) || []);
+    } catch (err) {
+      console.error('Error fetching user roles:', err);
+      // Fallback to roles from user object
+      setSelectedRoles(user.roles?.map(r => r.id) || []);
+      toast.error('Failed to load user roles');
+    }
   };
 
   const onUpdateRoles = async () => {
@@ -151,7 +152,7 @@ const Users = () => {
       await usersAPI.updateRoles(rolesModalUser.id, selectedRoles);
       toast.success('Roles updated successfully');
       setRolesModalUser(null);
-      fetchUsers(filter);
+      await fetchUsers(filter);
     } catch (err) {
       toast.error(getErrorMessage(err));
     }
@@ -197,9 +198,7 @@ const Users = () => {
         </div>
       ),
     },
-  ], [filter]);
-
-  const handleFilterChange = useMemo(() => debounce(async (v) => fetchUsers(v), 400), [fetchUsers]);
+  ], []);
 
   // --- مودال اضافه و ویرایش ---
   const renderModal = (isOpen, title, onSubmit, formState, setFormState, onClose) => {
@@ -295,7 +294,6 @@ const Users = () => {
             value={filter}
             onChange={(e) => {
               setFilter(e.target.value);
-              handleFilterChange(e.target.value);
             }}
             placeholder="Filter by name, email or role"
             className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500"
@@ -308,7 +306,22 @@ const Users = () => {
           <div className="w-8 h-8 border-4 border-t-transparent border-primary-500 rounded-full animate-spin" />
         </div>
       ) : (
-        <DataTable data={users} columns={columns} searchable={false} />
+        <DataTable 
+          data={users.filter(user => {
+            if (!filter.trim()) return true;
+            const searchTerm = filter.toLowerCase();
+            const firstName = (user.firstName || '').toLowerCase();
+            const lastName = (user.lastName || '').toLowerCase();
+            const email = (user.email || '').toLowerCase();
+            const rolesText = (user.roles || []).map(r => r.name).join(' ').toLowerCase();
+            return firstName.includes(searchTerm) || 
+                   lastName.includes(searchTerm) || 
+                   email.includes(searchTerm) ||
+                   rolesText.includes(searchTerm);
+          })} 
+          columns={columns} 
+          searchable={false} 
+        />
       )}
 
       {error && <div className="mt-4 text-sm text-red-600">{error}</div>}
diff --git a/src/services/api.js b/src/services/api.js
index f2243a8..ab19331 100644
--- a/src/services/api.js
+++ b/src/services/api.js
@@ -12,4 +12,5 @@ export { currencyAPI } from './currencyAPI';
 export { countryAPI } from './countryAPI';
 export { provinceAPI } from './provinceAPI';
 export { cityAPI } from './cityAPI';
+export { issuerAPI } from './issuerAPI';
 export { listPermissions } from './permissionsAPI';
diff --git a/src/services/issuerAPI.js b/src/services/issuerAPI.js
new file mode 100644
index 0000000..19ca9cd
--- /dev/null
+++ b/src/services/issuerAPI.js
@@ -0,0 +1,194 @@
+import api from './apiClient';
+
+// -----------------------------
+// Issuer API
+// -----------------------------
+export const issuerAPI = {
+  // GET /api/v1/Issuer (with pagination)
+  async list(params = {}) {
+    const { currentPage = 1, pageSize = 100, ...otherParams } = params;
+    const res = await api.get('/api/v1/Issuer', {
+      params: { currentPage, pageSize, ...otherParams },
+      skipAuthRedirect: true
+    });
+    return res?.data?.data?.data || [];
+  },
+
+  // GET /api/v1/Issuer/{id}
+  async getById(id) {
+    const res = await api.get(`/api/v1/Issuer/${encodeURIComponent(id)}`, {
+      skipAuthRedirect: true
+    });
+    console.log('Full API response:', res?.data);
+    console.log('API response data:', res?.data?.data);
+    return res?.data?.data;
+  },
+
+  // POST /api/v1/Issuer
+  async create(issuer) {
+    const payload = {
+      name: String(issuer?.name || ''),
+      supportEmail: String(issuer?.supportEmail || ''),
+      postalCode: String(issuer?.postalCode || ''),
+      addressDetails: String(issuer?.addressDetails || '')
+    };
+    
+    // Include cityId - use null if empty or invalid
+    if (issuer?.cityId && issuer.cityId !== '' && issuer.cityId !== 'null' && issuer.cityId !== null) {
+      payload.cityId = issuer.cityId;
+    } else {
+      payload.cityId = null;
+    }
+    
+    console.log('Issuer Create Payload:', payload);
+    const res = await api.post('/api/v1/Issuer', payload, { skipAuthRedirect: true });
+    return res?.data;
+  },
+
+  // PUT /api/v1/Issuer/{id}
+  async update(id, issuer) {
+    const payload = {
+      name: String(issuer?.name || ''),
+      supportEmail: String(issuer?.supportEmail || ''),
+      postalCode: String(issuer?.postalCode || ''),
+      addressDetails: String(issuer?.addressDetails || '')
+    };
+    
+    // Include cityId - use null if empty or invalid
+    if (issuer?.cityId && issuer.cityId !== '' && issuer.cityId !== 'null' && issuer.cityId !== null) {
+      payload.cityId = issuer.cityId;
+    } else {
+      payload.cityId = null;
+    }
+    
+    console.log('Issuer Update Payload:', payload);
+    const res = await api.put(`/api/v1/Issuer/${encodeURIComponent(id)}`, payload, {
+      skipAuthRedirect: true
+    });
+    return res?.data;
+  },
+
+  // DELETE /api/v1/Issuer/{id}
+  async remove(id) {
+    const res = await api.delete(`/api/v1/Issuer/${encodeURIComponent(id)}`, {
+      skipAuthRedirect: true
+    });
+    return res?.data;
+  },
+
+  // PATCH /api/v1/Issuer/{id}/ToggleActivation
+  async toggleActivation(id) {
+    const res = await api.patch(`/api/v1/Issuer/${encodeURIComponent(id)}/ToggleActivation`, null, {
+      skipAuthRedirect: true
+    });
+    return res?.data;
+  },
+
+  // GET /api/v1/Issuer/{id}/Capabilities
+  async getCapabilities(id) {
+    try {
+      const res = await api.get(`/api/v1/Issuer/${encodeURIComponent(id)}/Capabilities`, {
+        skipAuthRedirect: true
+      });
+      // Response structure: { data: [...], statusCode, isSuccess, ... }
+      const capabilities = res?.data?.data || [];
+      console.log('Capabilities from API:', capabilities);
+      return capabilities;
+    } catch (err) {
+      // Handle 404 gracefully - endpoint might not exist for some issuers
+      if (err?.response?.status === 404) {
+        console.warn('Capabilities endpoint not found (404), returning empty array');
+        return [];
+      }
+      throw err;
+    }
+  },
+
+  // PUT /api/v1/Issuer/{id}/Capabilities
+  async updateCapabilities(id, capabilities) {
+    // Filter out invalid capabilities and ensure all required fields are present
+    const validCapabilities = Array.isArray(capabilities) ? capabilities
+      .filter(cap => {
+        const capabilityValue = typeof cap === 'string' ? cap : (cap.capability || '');
+        return capabilityValue && String(capabilityValue).trim() !== '';
+      })
+      .map(cap => {
+        const capabilityValue = typeof cap === 'string' ? cap : (cap.capability || '');
+        const capabilityName = typeof cap === 'object' && cap.capabilityName ? cap.capabilityName : capabilityValue;
+        const hasCapability = typeof cap === 'object' ? (cap.hasCapability !== undefined ? cap.hasCapability : true) : true;
+        
+        // Ensure capability is a valid string (not empty, not null, not undefined)
+        const capValue = String(capabilityValue).trim();
+        if (!capValue) {
+          return null; // Will be filtered out
+        }
+        
+        return {
+          capability: capValue,
+          capabilityName: String(capabilityName).trim() || capValue,
+          hasCapability: Boolean(hasCapability)
+        };
+      })
+      .filter(cap => cap !== null) : [];
+    
+    // Wrap in IssuerManageCapabilitiesCommand structure
+    const payload = {
+      capabilities: validCapabilities
+    };
+    
+    console.log('Update Capabilities Payload:', JSON.stringify(payload, null, 2));
+    console.log('Valid capabilities count:', validCapabilities.length);
+    console.log('Capabilities details:', validCapabilities);
+    
+    try {
+      const res = await api.put(`/api/v1/Issuer/${encodeURIComponent(id)}/Capabilities`, payload, {
+        skipAuthRedirect: true
+      });
+      return res?.data;
+    } catch (err) {
+      console.error('Capabilities update error details:', {
+        status: err?.response?.status,
+        data: err?.response?.data,
+        errors: err?.response?.data?.errors,
+        payload: payload
+      });
+      throw err;
+    }
+  },
+
+  // GET /api/v1/Issuer/{id}/AllowedCurrencies
+  async getAllowedCurrencies(id) {
+    try {
+      const res = await api.get(`/api/v1/Issuer/${encodeURIComponent(id)}/AllowedCurrencies`, {
+        skipAuthRedirect: true
+      });
+      // Response is a direct array: [{code, name, nativeName, symbol, numericCode, decimalPlaces}, ...]
+      const currencies = Array.isArray(res?.data) ? res.data : (res?.data?.data || []);
+      console.log('Allowed Currencies from API:', currencies);
+      return currencies;
+    } catch (err) {
+      // Handle 404 gracefully - endpoint might not exist for some issuers
+      if (err?.response?.status === 404) {
+        console.warn('AllowedCurrencies endpoint not found (404), returning empty array');
+        return [];
+      }
+      throw err;
+    }
+  },
+
+  // PUT /api/v1/Issuer/{id}/AllowedCurrencies
+  async updateAllowedCurrencies(id, allowedCurrencies) {
+    const payload = {
+      allowedCurrencies: Array.isArray(allowedCurrencies) ? allowedCurrencies.map(curr => ({
+        currencyCode: curr.currencyCode || curr.code || '',
+        currencyEnglishName: curr.currencyEnglishName || curr.name || '',
+        allowed: curr.allowed !== undefined ? curr.allowed : true
+      })) : []
+    };
+    const res = await api.put(`/api/v1/Issuer/${encodeURIComponent(id)}/AllowedCurrencies`, payload, {
+      skipAuthRedirect: true
+    });
+    return res?.data;
+  }
+};
+
diff --git a/src/services/usersAPI.js b/src/services/usersAPI.js
index a60df3f..dd3bc1a 100644
--- a/src/services/usersAPI.js
+++ b/src/services/usersAPI.js
@@ -38,6 +38,14 @@ export const usersAPI = {
     }
   },
   async removeRole(userId,roleId){ try{ const res = await api.delete(`/api/v1/User/${encodeURIComponent(userId)}/Role/${encodeURIComponent(roleId)}`,{skipAuthRedirect:true}); return res?.data; } catch(err){ console.error(err); return null; } },
-  async updateRoles(userId,roleIds=[]){ try{ const res = await api.post(`/api/v1/User/${encodeURIComponent(userId)}/Role`,{roleIds},{skipAuthRedirect:true}); return res?.data; } catch(err){ console.error(err); return null; } },
+  async updateRoles(userId,roleIds=[]){ 
+    try{ 
+      const res = await api.put(`/api/v1/User/${encodeURIComponent(userId)}/Role`,{roleIds},{skipAuthRedirect:true}); 
+      return res?.data; 
+    } catch(err){ 
+      console.error(err); 
+      return null; 
+    } 
+  },
 };