feat(country-province-city): add, edit functionality

src/pages/Roles.jsx

@@ -2,6 +2,9 @@ import React, { useEffect, useMemo, useState } from 'react';
 import DataTable from '../components/DataTable';
 import { rolesAPI, listPermissions } from '../services/api';
 import { Plus, Trash2, Search, Pencil } from 'lucide-react';
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import { getErrorMessage, getSuccessMessage } from '../utils/errorHandler';
 
 const Roles = () => {
   const [roles, setRoles] = useState([]);
@@ -23,7 +26,9 @@ const Roles = () => {
       const list = await rolesAPI.list(q);
       setRoles(list);
     } catch (e) {
-      setError('Failed to load roles');
+      const errorMsg = getErrorMessage(e);
+      setError(errorMsg);
+      toast.error(errorMsg);
     } finally {
       setLoading(false);
     }
@@ -54,14 +59,22 @@ const Roles = () => {
       setSelectedPermissions([]);
       await fetchRoles(nameFilter);
       setIsModalOpen(false);
-    } catch (_) {
-      setError('Failed to create role');
+      toast.success('Role created successfully');
+    } catch (err) {
+      const errorMsg = getErrorMessage(err);
+      setError(errorMsg);
+      toast.error(errorMsg);
     }
   };
 
   const onDelete = async (id) => {
-    await rolesAPI.remove(id);
-    await fetchRoles(nameFilter);
+    try {
+      await rolesAPI.remove(id);
+      await fetchRoles(nameFilter);
+      toast.success('Role deleted successfully');
+    } catch (err) {
+      toast.error(getErrorMessage(err));
+    }
   };
 
   const openEdit = (role) => {
@@ -86,8 +99,11 @@ const Roles = () => {
       setName('');
       setPermissionsInput('');
       setSelectedPermissions([]);
-    } catch (_) {
-      setError('Failed to update role');
+      toast.success('Role updated successfully');
+    } catch (err) {
+      const errorMsg = getErrorMessage(err);
+      setError(errorMsg);
+      toast.error(errorMsg);
     }
   };
 
@@ -115,6 +131,7 @@ const Roles = () => {
 
   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">Roles</h1>