fix(color): change design & color for icon notification

.gitignore

@@ -6,7 +6,6 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
-*.config
 
 node_modules
 dist

public/web.config

@@ -3,7 +3,7 @@
     <system.webServer>
         <rewrite>
             <rules>
-                <rule name="CallOfDuty">
+                <rule name="reactViteSypiu">
                     <match url=".*" />
                     <conditions logicalGrouping="MatchAll">
                         <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />

src/api/notification.jsx

@@ -82,6 +82,15 @@ const resendChatAllUser = async (notificationId) => {
     return response.data;
 };
 
+// Searching
+const searchData = async (queryParams) => {
+    const response = await SendRequest({
+        method: 'get',
+        prefix: `notification?criteria=${queryParams}`,
+    });
+    return response.data;
+};
+
 export {
     getAllNotification,
     getNotificationById,
@@ -92,4 +101,5 @@ export {
     resendNotificationToUser,
     resendChatByUser,
     resendChatAllUser,
+    searchData,
 };

src/pages/notification/component/ListNotification.jsx

@@ -36,6 +36,7 @@ import {
     PlusOutlined,
     ExclamationCircleOutlined,
     SearchOutlined,
+    MailFilled,
 } from '@ant-design/icons';
 import { useNavigate, Link as RouterLink } from 'react-router-dom';
 import {
@@ -44,6 +45,7 @@ import {
     getNotificationDetail,
     resendChatByUser,
     resendChatAllUser,
+    searchData,
 } from '../../../api/notification';
 
 const { Text, Paragraph, Link: AntdLink } = Typography;
@@ -54,6 +56,7 @@ const transformNotificationData = (apiData) => {
         id: `notification-${item.notification_error_id}-${index}`, // Unique key prefix with array index
         type: item.is_read ? 'resolved' : item.is_delivered ? 'warning' : 'critical',
         title: item.error_code_name || 'Unknown Error',
+        color: item.error_code_color || 'Black',
         issue: item.error_code || item.error_code_name || 'Unknown Error',
         description: `${item.error_code} - ${item.error_code_name || ''}`,
         timestamp: item.created_at
@@ -181,13 +184,13 @@ const ListNotification = memo(function ListNotification(props) {
     const getIconAndColor = (type) => {
         switch (type) {
             case 'critical':
-                return { IconComponent: CloseCircleFilled, color: '#ff4d4f', bgColor: '#fff1f0' };
+                return { IconComponent: MailFilled, color: '#faad14', bgColor: '#fff1f0' };
             case 'warning':
-                return { IconComponent: WarningFilled, color: '#faad14', bgColor: '#fffbe6' };
+                return { IconComponent: MailFilled, color: '#1890ff', bgColor: '#fffbe6' };
             case 'resolved':
-                return { IconComponent: CheckCircleFilled, color: '#52c41a', bgColor: '#f6ffed' };
+                return { IconComponent: MailFilled, color: '#52c41a', bgColor: '#f6ffed' };
             default:
-                return { IconComponent: InfoCircleFilled, color: '#1890ff', bgColor: '#e6f7ff' };
+                return { IconComponent: MailFilled, color: '#1890ff', bgColor: '#e6f7ff' };
         }
     };
 
@@ -219,13 +222,49 @@ const ListNotification = memo(function ListNotification(props) {
         );
     };
 
+    const fetchSearch = async (data) => {
+        setLoading(true);
+        try {
+            const response = await searchData(data);
+            if (response && response.data) {
+                const transformedData = transformNotificationData(response.data);
+                setNotifications(transformedData);
+
+                // Update pagination with API response or calculate from data
+                if (response.paging) {
+                    setPagination({
+                        current_page: response.paging.current_page || page,
+                        current_limit: response.paging.current_limit || limit,
+                        total_limit: response.paging.total_limit || transformedData.length,
+                        total_page:
+                            response.paging.total_page || Math.ceil(transformedData.length / limit),
+                    });
+                } else {
+                    // Fallback: calculate pagination from data
+                    const totalItems = transformedData.length;
+                    setPagination((prev) => ({
+                        ...prev,
+                        current_page: page,
+                        current_limit: limit,
+                        total_limit: totalItems,
+                        total_page: Math.ceil(totalItems / limit),
+                    }));
+                }
+            }
+        } catch (error) {
+            console.error(error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
     const handleSearch = () => {
-        setSearchTerm(searchValue);
+        fetchSearch(searchValue);
     };
 
     const handleSearchClear = () => {
         setSearchValue('');
-        setSearchTerm('');
+        fetchSearch('');
     };
 
     const getUnreadCount = () => notifications.filter((n) => !n.isRead).length;
@@ -383,7 +422,11 @@ const ListNotification = memo(function ListNotification(props) {
                                                     <div>
                                                         <Text strong>{notification.title}</Text>
                                                         <div style={{ marginTop: '4px' }}>
-                                                            <Text style={{ color }}>
+                                                            <Text
+                                                                style={{
+                                                                    color: notification.color,
+                                                                }}
+                                                            >
                                                                 Error Code {notification.issue}
                                                             </Text>
                                                         </div>
@@ -711,9 +754,7 @@ const ListNotification = memo(function ListNotification(props) {
                                                     </Space>
 
                                                     <div>
-                                                        <Text strong>
+                                                        <Text strong>{log.addedBy.name}</Text>
-                                                            {log.addedBy.name}
-                                                        </Text>
                                                     </div>
 
                                                     <div>