Merge pull request 'Refactor NotificationDetailTab component to use strict equality for reminder checks, enhancing clarity in rendering logic for reminder and non-reminder notifications.' (#48) from lavoce into main

Reviewed-on: #48

.gitignore

@@ -6,6 +6,7 @@ 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="reactViteSypiu">
+                <rule name="CallOfDuty">
                     <match url=".*" />
                     <conditions logicalGrouping="MatchAll">
                         <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />

src/api/notification.jsx

@@ -91,25 +91,6 @@ const searchData = async (queryParams) => {
     return response.data;
 };
 
-// Reminder Monthly
-const reminderMonthly = async (id, queryParams) => {
-    const response = await SendRequest({
-        method: 'post',
-        prefix: `notifikasi-wa/reminder-monthly/${id}`,
-        params: queryParams,
-    });
-    return response.data;
-};
-
-const reminderCustom= async (id, queryParams) => {
-    const response = await SendRequest({
-        method: 'post',
-        prefix: `notifikasi-wa/reminder-custom/${id}`,
-        params: queryParams,
-    });
-    return response.data;
-};
-
 export {
     getAllNotification,
     getNotificationById,
@@ -121,6 +102,4 @@ export {
     resendChatByUser,
     resendChatAllUser,
     searchData,
-    reminderMonthly,
-    reminderCustom,
 };

src/components/Global/ToastNotif.jsx

@@ -20,19 +20,6 @@ const NotifOk = ({ icon, title, message }) => {
     });
 };
 
-const NotifSmall = ({ icon, title, message }) => {
-    Swal.fire({
-        toast: true,
-        position: 'top-end',
-        icon: icon,
-        title: title,
-        text: message,
-        showConfirmButton: false,
-        timer: 2000,
-        timerProgressBar: true,
-    });
-};
-
 const NotifConfirmDialog = ({
     icon,
     title,
@@ -80,4 +67,4 @@ const QuestionConfirmSubmit = ({ icon, title, message, onConfirm, onCancel }) =>
     });
 };
 
-export { NotifAlert, NotifOk, NotifSmall, NotifConfirmDialog, QuestionConfirmSubmit };
+export { NotifAlert, NotifOk, NotifConfirmDialog, QuestionConfirmSubmit };

src/pages/contact/component/DetailContact.jsx

@@ -13,7 +13,6 @@ const DetailContact = memo(function DetailContact(props) {
         id: '',
         name: '',
         phone: '',
-        email: '',
         is_active: true,
     };
 
@@ -35,22 +34,6 @@ const DetailContact = memo(function DetailContact(props) {
                 [name]: value,
             }));
         }
-
-        if (name === 'email') {
-            const email = value.trim();
-            setFormData((prev) => ({
-                ...prev,
-                [name]: email,
-            }));
-
-            setErrors((prev) => ({
-                ...prev,
-                email:
-                    email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
-                        ? 'Format email tidak valid'
-                        : '',
-            }));
-        }
     };
 
   
@@ -68,7 +51,6 @@ const DetailContact = memo(function DetailContact(props) {
         const validationRules = [
             { field: 'name', label: 'Contact Name', required: true },
             { field: 'phone', label: 'Phone', required: true },
-            { field: 'email', label: 'Email', required: false },
         ];
 
         if (
@@ -102,23 +84,10 @@ const DetailContact = memo(function DetailContact(props) {
             return;
         }
 
-        // Validasi Email
-        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-        if (formData.email && !emailRegex.test(formData.email.trim())) {
-            NotifOk({
-                icon: 'warning',
-                title: 'Peringatan',
-                message: 'Format email tidak valid.',
-            });
-            setConfirmLoading(false);
-            return;
-        }
-
         try {
             const contactData = {
                 contact_name: formData.name,
                 contact_phone: formData.phone.replace(/[\s\-\(\)]/g, ''), // Clean phone number
-                email: formData.email?.trim(),
                 is_active: formData.is_active,
             };
 
@@ -165,7 +134,6 @@ const DetailContact = memo(function DetailContact(props) {
                 setFormData({
                     name: props.selectedData.contact_name || props.selectedData.name,
                     phone: props.selectedData.contact_phone || props.selectedData.phone,
-                    email: props.selectedData.contact_email || props.selectedData.email,
                     is_active:
                         props.selectedData.is_active || props.selectedData.status === 'active',
                 });
@@ -173,7 +141,6 @@ const DetailContact = memo(function DetailContact(props) {
                 setFormData({
                     name: '',
                     phone: '',
-                    email: '',
                     is_active: true,
                 });
             }
@@ -282,19 +249,6 @@ const DetailContact = memo(function DetailContact(props) {
                         style={{ color: formData.is_active ? '#000000' : '#ff4d4f' }}
                     />
                 </div>
-                <div style={{ marginBottom: 12 }}>
-                    <Text strong>Email</Text>
-                    {/* <Text style={{ color: 'red' }}> *</Text> */}
-                    <Input
-                        name="email"
-                        value={formData.email}
-                        onChange={handleInputChange}
-                        placeholder="Enter Email Number"
-                        readOnly={props.readOnly}
-                        maxLength={64}
-                        style={{ color: formData.is_active ? '#000000' : '#ff4d4f' }}
-                    />
-                </div>
                 {/* Contact Type */}
                 {/* <div style={{ marginBottom: 12 }}>
                     <Text strong>Contact Type</Text>

src/pages/master/device/component/DetailDevice.jsx

@@ -10,9 +10,8 @@ import {
     Select,
     DatePicker,
 } from 'antd';
-import { NotifAlert, NotifOk, NotifSmall } from '../../../../components/Global/ToastNotif';
+import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
 import { createDevice, updateDevice } from '../../../../api/master-device';
-import { reminderMonthly, reminderCustom } from '../../../../api/notification';
 import { getAllBrands } from '../../../../api/master-brand';
 import { validateRun } from '../../../../Utils/validate';
 import { toApiDateFormatter } from '../../../../components/Global/Formatter';
@@ -36,12 +35,8 @@ const DetailDevice = (props) => {
         device_location: '',
         device_description: '',
         ip_address: '',
-        listen_channel: null,
         reminder_at: null,
-        reminder_at_monthly: null,
+        listen_channel: null,
-        start_date: null,
-        end_date: null,
-        period: null,
     };
 
     const [formData, setFormData] = useState(defaultData);
@@ -87,9 +82,6 @@ const DetailDevice = (props) => {
                 listen_channel: formData.listen_channel,
                 listen_channel_reminder: formData.listen_channel_reminder,
                 reminder_at: formData.reminder_at,
-                reminder_at_monthly: formData.period !== 'custom' ? formData.reminder_at_monthly : null,
-                start_date: formData.start_date,
-                end_date: formData.end_date,
             };
 
             console.log(payload);
@@ -98,13 +90,6 @@ const DetailDevice = (props) => {
                 ? await updateDevice(formData.device_id, payload)
                 : await createDevice(payload);
 
-            const response2 = formData.period !== 'custom'
-                ? await updateDevice(formData.device_id, { reminder_at_monthly: formData.reminder_at_monthly,})
-                : await updateDevice(formData.device_id, {
-                                                            start_date: formData.start_date, 
-                                                            end_date: formData.end_date,
-                                                        });
-
             // Check if response is successful
             if (response && (response.statusCode === 200 || response.statusCode === 201)) {
                 const deviceName = response.data?.device_name || formData.device_name;
@@ -125,25 +110,6 @@ const DetailDevice = (props) => {
                     message: response?.message || 'Terjadi kesalahan saat menyimpan data.',
                 });
             }
-
-            // Check if response Reminder At(Monthly) or Period are successful
-            const tipe = formData.period !== 'custom' ? 'Reminder At(Monthly)' : 'Period';
-            if (response2 && (response2.statusCode === 200 || response2.statusCode === 201)) {
-                NotifSmall({
-                    icon: 'success',
-                    title: 'Berhasil',
-                    message: `${tipe} berhasil disimpan`,
-                });
-            } else {
-                NotifSmall({
-                    icon: 'error',
-                    title: 'Gagal',
-                    message:
-                        response?.message ||
-                        `Terjadi kesalahan saat menyimpan ${tipe}`,
-                });
-            }
-
         } catch (error) {
             console.error('Save Device Error:', error);
             NotifAlert({
@@ -206,56 +172,6 @@ const DetailDevice = (props) => {
         }
     };
 
-    useEffect(() => {
-        if (formData.start_date && formData.end_date) {
-            const start = dayjs(formData.start_date);
-            const end = dayjs(formData.end_date);
-
-            let periodValue = 'custom';
-
-            if (end.isSame(start.add(1, 'month').subtract(1, 'day'), 'day')) {
-                periodValue = '1';
-            } else if (end.isSame(start.add(3, 'month').subtract(1, 'day'), 'day')) {
-                periodValue = '3';
-            } else if (end.isSame(start.add(6, 'month').subtract(1, 'day'), 'day')) {
-                periodValue = '6';
-            }
-
-            setFormData((prev) => ({
-                ...prev,
-                period: periodValue,
-            }));
-        }
-    }, [formData.start_date, formData.end_date]);
-
-    const handleMonthly = (field, value) => {
-    setFormData((prev) => {
-        const data = {
-            ...prev,
-            [field]: value,
-        };
-
-        if (value !== 'custom') {
-            const months = Number(value);
-
-            const startDate = dayjs().startOf('day');
-            const endDate = startDate
-                .add(months, 'month')
-                .subtract(1, 'day')
-                .endOf('day');
-
-            data.start_date = startDate.toISOString();
-            data.end_date = endDate.toISOString();
-            data.reminder_at_monthly = null;
-        } else {
-            data.start_date = null;
-            data.end_date = null;
-        }
-
-        return data;
-    });
-};
-
     useEffect(() => {
         if (props.showModal && (props.actionMode === 'add' || props.actionMode === 'edit')) {
             fetchBrands();
@@ -465,7 +381,7 @@ const DetailDevice = (props) => {
                         </div>
                     </div>
                     <div style={{ marginBottom: 12 }}>
-                        <Text strong>Reminder At(Yearly)</Text>
+                        <Text strong>Reminder At</Text>
                         <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                             <DatePicker
                                 value={
@@ -497,92 +413,6 @@ const DetailDevice = (props) => {
                             </Button>
                         </div>
                     </div>
-                    <div style={{ marginBottom: 12 }}>
-                        <Text strong>Period</Text>
-                        <Text style={{ color: 'red' }}> *</Text>
-
-                        <Select
-                            value={formData.period}
-                            onChange={(value) => handleMonthly('period', value)}
-                            placeholder="Select Period"
-                            style={{ width: '100%' }}
-                        >
-                            <Select.Option value="1">1 Monthly</Select.Option>
-                            <Select.Option value="3">3 Monthly</Select.Option>
-                            <Select.Option value="6">6 Monthly</Select.Option>
-                            <Select.Option value="custom">Custom</Select.Option>
-                        </Select>
-                    </div>
-                    {formData.period === 'custom' && (
-                        <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
-                            <DatePicker
-                                placeholder="Start Date"
-                                value={formData.start_date ? dayjs(formData.start_date) : null}
-                                onChange={(date) =>
-                                    handleDateChange('start_date', date ? date.toISOString() : null)
-                                }
-                                disabledDate={(current) =>
-                                    formData.end_date &&
-                                    current &&
-                                    current.isAfter(dayjs(formData.end_date), 'day')
-                                }
-                                format="DD-MM-YYYY HH:mm"
-                                showTime={{ format: 'HH:mm' }}
-                                style={{ flex: 1 }}
-                            />
-
-                            <DatePicker
-                                placeholder="End Date"
-                                value={formData.end_date ? dayjs(formData.end_date) : null}
-                                onChange={(date) =>
-                                    handleDateChange('end_date', date ? date.toISOString() : null)
-                                }
-                                disabledDate={(current) =>
-                                    formData.start_date &&
-                                    current &&
-                                    current.isBefore(dayjs(formData.start_date), 'day')
-                                }
-                                format="DD-MM-YYYY HH:mm"
-                                showTime={{ format: 'HH:mm' }}
-                                style={{ flex: 1 }}
-                            />
-                        </div>
-                    )}
-                    <div style={{ marginBottom: 12 }}>
-                        <Text strong>Reminder At(Monthly)</Text>
-                        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
-                            <DatePicker
-                                disabled={formData.period === 'custom'}
-                                value={
-                                    formData.reminder_at_monthly
-                                        ? dayjs(formData.reminder_at_monthly) // ✅ langsung parse ISO
-                                        : null
-                                }
-                                onChange={(date) =>
-                                    handleDateChange(
-                                        'reminder_at_monthly',
-                                        date ? date.toISOString() : null
-                                    )
-                                }
-                                format="DD-MM-YYYY HH:mm"
-                                showTime={{ format: 'HH:mm' }}
-                                style={{ flex: 1 }}
-                            />
-
-                            <Button
-                                disabled={formData.period === 'custom'}
-                                danger
-                                onClick={() =>
-                                    setFormData((prev) => ({
-                                        ...prev,
-                                        reminder_at_monthly: null,
-                                    }))
-                                }
-                            >
-                                Clear
-                            </Button>
-                        </div>
-                    </div>
                     <div style={{ marginBottom: 12 }}>
                         <Text strong>Device Description</Text>
                         <TextArea

src/pages/master/sparepart/component/DetailSparepart.jsx

@@ -38,24 +38,6 @@ const DetailSparepart = (props) => {
     const [previewTitle, setPreviewTitle] = useState('');
     const [isHovering, setIsHovering] = useState(false);
 
-    const optionsMonthly = [
-        {
-            key: 1,
-            value: 1,
-            text: '1 Month',
-        },
-        {
-            key: 3,
-            value: 3,
-            text: '3 Month',
-        },
-        {
-            key: 6,
-            value: 6,
-            text: '6 Month',
-        },
-    ];
-
     const optionsYearly = [
         {
             key: 1,
@@ -88,10 +70,6 @@ const DetailSparepart = (props) => {
             text: '6 Year',
         },
     ];
-    const [checkedListM, setCheckedListM] = useState([]);
-    const [checkAllM, setCheckAllM] = useState(false);
-    const [indeterminateM, setIndeterminateM] = useState(false);
-
     const [checkedList, setCheckedList] = useState([]);
     const [checkAll, setCheckAll] = useState(false);
     const [indeterminate, setIndeterminate] = useState(false);
@@ -298,7 +276,6 @@ const DetailSparepart = (props) => {
 
             payload.sparepart_number = formData.sparepart_number;
             payload.sparepart_yearly = checkedList;
-            payload.sparepart_monthly = checkedListM;
 
             // console.log('Sending payload:', payload);
 
@@ -346,21 +323,6 @@ const DetailSparepart = (props) => {
         setFormData({ ...formData, [name]: value });
     };
 
-    const onChangeCheckboxM = (list) => {
-        setCheckedListM(list);
-
-        setIndeterminateM(!!list.length && list.length < optionsMonthly.length);
-        setCheckAllM(list.length === optionsMonthly.length);
-    };
-
-    const onCheckAllChangeM = (e) => {
-        const checked = e.target.checked;
-
-        setCheckedListM(checked ? optionsMonthly.map((item) => item.value) : []);
-        setIndeterminateM(false);
-        setCheckAllM(checked);
-    };
-
     const onChangeCheckbox = (list) => {
         setCheckedList(list);
 
@@ -412,16 +374,10 @@ const DetailSparepart = (props) => {
             } else {
                 setFileList([]);
             }
-            setCheckedListM(JSON.parse(props.selectedData.sparepart_monthly));
             setCheckedList(JSON.parse(props.selectedData.sparepart_yearly));
         } else {
             setFormData(defaultData);
             setFileList([]);
-
-            setIndeterminateM(false);
-            setCheckedListM([]);
-            setCheckAllM(false);
-
             setIndeterminate(false);
             setCheckedList([]);
             setCheckAll(false);
@@ -683,8 +639,6 @@ const DetailSparepart = (props) => {
                             },
                         }}
                     >
-                        
-                        {/* Yearly */}
                         <Row style={{ marginTop: 16 }}>
                             <Col>
                                 <Checkbox
@@ -715,38 +669,6 @@ const DetailSparepart = (props) => {
                                 </Checkbox.Group>
                             </Col>
                         </Row>
-
-                        {/* Monthly */}
-                        <Row style={{ marginTop: 16 }}>
-                            <Col>
-                                <Checkbox
-                                    indeterminate={indeterminateM}
-                                    onChange={onCheckAllChangeM}
-                                    checked={checkAllM}
-                                >
-                                    {checkAllM ? 'Unselect All Months' : 'Select All Months'}
-                                </Checkbox>
-                            </Col>
-                        </Row>
-                        <Row style={{ marginTop: 10 }}>
-                            <Col span={24}>
-                                <Checkbox.Group
-                                    value={checkedListM}
-                                    onChange={onChangeCheckboxM}
-                                    style={{
-                                        width: '100%',
-                                        display: 'flex',
-                                        justifyContent: 'space-between',
-                                    }}
-                                >
-                                    {optionsMonthly.map((item) => (
-                                        <Checkbox key={item.key} value={item.value}>
-                                            {item.text}
-                                        </Checkbox>
-                                    ))}
-                                </Checkbox.Group>
-                            </Col>
-                        </Row>
                     </ConfigProvider>
                     <Row gutter={[16, 16]} style={{ marginTop: 16 }}>
                         <Col span={24}>

src/pages/notificationDetail/IndexNotificationDetail.jsx

@@ -102,8 +102,6 @@ const transformNotificationData = (apiData) => {
             brand_name: apiData.brand_name,
         },
         users: apiData.users || [],
-        is_reminder: apiData.is_reminder || false,
-        spareparts_reminder: apiData.spareparts_reminder || [],
     };
 };
 
@@ -364,104 +362,6 @@ const NotificationDetailTab = (props) => {
                         <Row gutter={[8, 8]}>
                             {/* Kolom Kiri: Data Kompresor */}
 
-                            {notification.is_reminder == false && (
-                                <Col xs={24} lg={8}>
-                                    <Card
-                                        size="small"
-                                        style={{ height: '100%', borderColor: '#d4380d' }}
-                                        bodyStyle={{ padding: '16px' }}
-                                    >
-                                        <Space
-                                            direction="vertical"
-                                            size="large"
-                                            style={{ width: '100%' }}
-                                        >
-                                            <Row gutter={16} align="middle">
-                                                <Col>
-                                                    <div
-                                                        style={{
-                                                            width: '32px',
-                                                            height: '32px',
-                                                            borderRadius: '50%',
-                                                            backgroundColor: '#d4380d',
-                                                            display: 'flex',
-                                                            alignItems: 'center',
-                                                            justifyContent: 'center',
-                                                            color: '#ffffff',
-                                                            fontSize: '18px',
-                                                        }}
-                                                    >
-                                                        <CloseOutlined />
-                                                    </div>
-                                                </Col>
-                                                <Col>
-                                                    <Text>{notification.title}</Text>
-                                                    <div style={{ marginTop: '2px' }}>
-                                                        <Text strong style={{ fontSize: '16px' }}>
-                                                            Error Code {notification.issue}
-                                                        </Text>
-                                                    </div>
-                                                </Col>
-                                            </Row>
-                                            <div>
-                                                <Text strong>Plant Subsection</Text>
-                                                <div>{notification.location}</div>
-                                                <Text
-                                                    strong
-                                                    style={{ display: 'block', marginTop: '8px' }}
-                                                >
-                                                    Date & Time
-                                                </Text>
-                                                <div>{notification.timestamp}</div>
-                                            </div>
-                                        </Space>
-                                    </Card>
-                                </Col>
-                            )}
-                            {/* Kolom Tengah: Informasi Teknis */}
-                            <Col xs={24} lg={8}>
-                                <Card
-                                    title="Device Information"
-                                    size="small"
-                                    style={{ height: '100%' }}
-                                >
-                                    <Space
-                                        direction="vertical"
-                                        size="middle"
-                                        style={{ width: '100%' }}
-                                    >
-                                        <div>
-                                            <Text strong>Error Channel</Text>
-                                            <div>{notification.error_chanel || 'N/A'}</div>
-                                        </div>
-                                        <div>
-                                            <Text strong>Device Code</Text>
-                                            <div>
-                                                {notification.device_info?.device_code || 'N/A'}
-                                            </div>
-                                        </div>
-                                        <div>
-                                            <Text strong>Device Name</Text>
-                                            <div>
-                                                {notification.device_info?.device_name || 'N/A'}
-                                            </div>
-                                        </div>
-                                        <div>
-                                            <Text strong>Device Location</Text>
-                                            <div>
-                                                {notification.device_info?.device_location || 'N/A'}
-                                            </div>
-                                        </div>
-                                        <div>
-                                            <Text strong>Brand</Text>
-                                            <div>
-                                                {notification.device_info?.brand_name || 'N/A'}
-                                            </div>
-                                        </div>
-                                    </Space>
-                                </Card>
-                            </Col>
-
                             {notification.is_reminder == true && (
                                 <Col xs={24} md={8}>
                                     <div>
@@ -615,6 +515,104 @@ const NotificationDetailTab = (props) => {
                                 </Col>
                             )}
 
+                            {notification.is_reminder == false && (
+                                <Col xs={24} lg={8}>
+                                    <Card
+                                        size="small"
+                                        style={{ height: '100%', borderColor: '#d4380d' }}
+                                        bodyStyle={{ padding: '16px' }}
+                                    >
+                                        <Space
+                                            direction="vertical"
+                                            size="large"
+                                            style={{ width: '100%' }}
+                                        >
+                                            <Row gutter={16} align="middle">
+                                                <Col>
+                                                    <div
+                                                        style={{
+                                                            width: '32px',
+                                                            height: '32px',
+                                                            borderRadius: '50%',
+                                                            backgroundColor: '#d4380d',
+                                                            display: 'flex',
+                                                            alignItems: 'center',
+                                                            justifyContent: 'center',
+                                                            color: '#ffffff',
+                                                            fontSize: '18px',
+                                                        }}
+                                                    >
+                                                        <CloseOutlined />
+                                                    </div>
+                                                </Col>
+                                                <Col>
+                                                    <Text>{notification.title}</Text>
+                                                    <div style={{ marginTop: '2px' }}>
+                                                        <Text strong style={{ fontSize: '16px' }}>
+                                                            Error Code {notification.issue}
+                                                        </Text>
+                                                    </div>
+                                                </Col>
+                                            </Row>
+                                            <div>
+                                                <Text strong>Plant Subsection</Text>
+                                                <div>{notification.location}</div>
+                                                <Text
+                                                    strong
+                                                    style={{ display: 'block', marginTop: '8px' }}
+                                                >
+                                                    Date & Time
+                                                </Text>
+                                                <div>{notification.timestamp}</div>
+                                            </div>
+                                        </Space>
+                                    </Card>
+                                </Col>
+                            )}
+                            {/* Kolom Tengah: Informasi Teknis */}
+                            <Col xs={24} lg={8}>
+                                <Card
+                                    title="Device Information"
+                                    size="small"
+                                    style={{ height: '100%' }}
+                                >
+                                    <Space
+                                        direction="vertical"
+                                        size="middle"
+                                        style={{ width: '100%' }}
+                                    >
+                                        <div>
+                                            <Text strong>Error Channel</Text>
+                                            <div>{notification.error_chanel || 'N/A'}</div>
+                                        </div>
+                                        <div>
+                                            <Text strong>Device Code</Text>
+                                            <div>
+                                                {notification.device_info?.device_code || 'N/A'}
+                                            </div>
+                                        </div>
+                                        <div>
+                                            <Text strong>Device Name</Text>
+                                            <div>
+                                                {notification.device_info?.device_name || 'N/A'}
+                                            </div>
+                                        </div>
+                                        <div>
+                                            <Text strong>Device Location</Text>
+                                            <div>
+                                                {notification.device_info?.device_location || 'N/A'}
+                                            </div>
+                                        </div>
+                                        <div>
+                                            <Text strong>Brand</Text>
+                                            <div>
+                                                {notification.device_info?.brand_name || 'N/A'}
+                                            </div>
+                                        </div>
+                                    </Space>
+                                </Card>
+                            </Col>
+
                             {/* Kolom Kanan: User History */}
                             <Col xs={24} lg={8}>
                                 <Card title="User History" size="small" style={{ height: '100%' }}>