feat: setup crud scheduling data

package.json

@@ -10,10 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "antd": "^5.21.2",
     "ag-grid-community": "^31.3.2",
     "ag-grid-enterprise": "^31.3.2",
     "ag-grid-react": "^31.3.2",
+    "antd": "^5.21.2",
     "axios": "^1.7.7",
     "crypto-js": "^4.2.0",
     "dayjs": "^1.11.13",

src/apps/admin/pages/components/default-value.tsx

@@ -118,7 +118,7 @@ export default function DefaultValue() {
         </Form>
       </Modal>
       <Row gutter={[8, 8]}>
-        <Col xl={4} span={12}>
+        <Col span={12}>
           <Card loading={loading} styles={{ body: { padding: '6px 12px 6px 12px' } }}>
             <Flex vertical gap={8} justify="space-between">
               <div style={{ fontSize: 12, fontWeight: 600, color: 'rgba(0,0,0,0.4)' }}>DEFAULT PERCENTAGE</div>
@@ -136,7 +136,7 @@ export default function DefaultValue() {
             </Flex>
           </Card>
         </Col>
-        <Col xl={4} span={12}>
+        <Col span={12}>
           <Card loading={loading} styles={{ body: { padding: '6px 12px 6px 12px' } }}>
             <Flex vertical gap={8} justify="space-between">
               <div style={{ fontSize: 12, fontWeight: 600, color: 'rgba(0,0,0,0.4)' }}>CURRENT PERCENTAGE</div>

src/apps/admin/pages/components/scheduling-data.tsx

@@ -0,0 +1,207 @@
+import dayjs from 'dayjs';
+import axios from 'axios';
+import { App, Button, Card, Col, Flex, List, notification, Pagination, Row, Tag, Tooltip } from 'antd';
+import { useEffect, useState } from 'react';
+import { makeColorStatus, STATUS_DATA } from '@pos/base';
+
+import { DeleteOutlined, EditOutlined, LockOutlined, UnlockOutlined } from '@ant-design/icons';
+
+export default function SchedulingData() {
+  const { modal } = App.useApp();
+
+  const [loadingTable, setLoadingTable] = useState(false);
+  const [schedulingData, setSchedulingData] = useState<any[]>([]);
+  const [meta, setMeta] = useState<any>();
+
+  const handleGetData = async (page: number) => {
+    setLoadingTable(true);
+    await axios
+      .get('v1/data-scheduling', { params: { page: page, limit: 10 } })
+      .then((resp: any) => {
+        const data = resp?.data?.data ?? [];
+        const meta = resp?.data?.meta;
+        setMeta(meta);
+        setSchedulingData(data);
+        setLoadingTable(false);
+      })
+      .catch(() => {
+        setLoadingTable(false);
+      });
+  };
+
+  const handleActivate = async (id: string) => {
+    await axios
+      .patch(`v1/data-scheduling/${id}/active`)
+      .then(() => {
+        handleGetData(meta?.currentPage);
+      })
+      .catch((err: any) => {
+        notification.error({
+          message: 'Gagal mengaktifkan data.',
+          description:
+            err?.message ?? err?.response?.data?.message ?? 'Terjadi kesalahan saat mengaktifkan konfigurasi',
+        });
+      });
+  };
+
+  const handleDeactivate = async (id: string) => {
+    await axios
+      .patch(`v1/data-scheduling/${id}/inactive`)
+      .then(() => {
+        handleGetData(meta?.currentPage);
+      })
+      .catch((err: any) => {
+        notification.error({
+          message: 'Gagal menonaktifkan data.',
+          description:
+            err?.message ?? err?.response?.data?.message ?? 'Terjadi kesalahan saat menonaktifkan konfigurasi',
+        });
+      });
+  };
+
+  const handleDelete = async (id: string) => {
+    await axios
+      .delete(`v1/data-scheduling/${id}`)
+      .then(() => {
+        handleGetData(meta?.currentPage);
+      })
+      .catch((err: any) => {
+        notification.error({
+          message: 'Gagal menghapus data.',
+          description: err?.message ?? err?.response?.data?.message ?? 'Terjadi kesalahan saat menghapus konfigurasi',
+        });
+      });
+  };
+
+  function makeColorText(value: number) {
+    if (value <= 30) {
+      return 'text-red-500';
+    } else if (value > 30 && value <= 80) {
+      return 'text-yellow-500';
+    } else if (value > 80 && value <= 100) {
+      return 'text-green-500';
+    }
+  }
+
+  useEffect(() => {
+    handleGetData(1);
+  }, []);
+
+  return (
+    <div>
+      <Button>Tambah Jadwal</Button>
+      <div style={{ marginBottom: 10 }}></div>
+      <List
+        bordered={!schedulingData || schedulingData?.length <= 0}
+        style={{ maxHeight: 500, overflow: 'auto' }}
+        dataSource={schedulingData}
+        loading={loadingTable}
+        renderItem={(item) => (
+          <List.Item key={item.id} style={{ borderBlockEnd: 'none', padding: 5 }}>
+            <Card style={{ width: '100%' }}>
+              <Flex justify="space-between" style={{ width: '100%' }}>
+                <Row className="w-full">
+                  <Col span={12}>
+                    <Flex align="center" className="h-full" gap={4}>
+                      <div>
+                        <div className="text-[#00000066]">{item.name}</div>
+                        <div className="font-normal mt-1">{`${dayjs(item?.schedule_date_from).format('DD MMM YYYY')} - ${dayjs(item?.schedule_date_to).format('DD MMM YYYY')}`}</div>
+                      </div>
+                    </Flex>
+                  </Col>
+                  <Col span={12}>
+                    <Flex align="center" className="h-full" gap={8}>
+                      <div
+                        className={`text-2xl font-bold ${makeColorText(item.indexing_key)}`}
+                      >{`${item.indexing_key} %`}</div>
+                      <Tag color={makeColorStatus(item.status)}>{item.status}</Tag>
+                    </Flex>
+                  </Col>
+                </Row>
+                <Flex align="center" gap={12}>
+                  <Tooltip title="Edit" trigger={'hover'} placement="bottom">
+                    <Button icon={<EditOutlined />} />
+                  </Tooltip>
+
+                  {item.status === STATUS_DATA.ACTIVE && (
+                    <Tooltip title="Inactive" trigger={'hover'} placement="bottom">
+                      <Button
+                        icon={<LockOutlined />}
+                        onClick={() => {
+                          modal.confirm({
+                            icon: null,
+                            cancelText: 'Batal',
+                            title: 'Nonaktifkan Konfigurasi Penjadwalan?',
+                            cancelButtonProps: { style: { width: 100 } },
+                            okButtonProps: { style: { width: 100 } },
+                            content: (
+                              <div>
+                                <div className="font-semibold italic">{`Perhatian: `}</div>
+                                <div className="italic">{`Konfigurasi yang dinonaktifkan tidak akan diikutsertakan dalam proses penjadwalan hingga Anda mengaktifkannya kembali. Ini berguna untuk menjeda proses penjadwalan tertentu tanpa menghapus konfigurasi.`}</div>
+                              </div>
+                            ),
+                            onOk: () => handleDeactivate(item.id),
+                          });
+                        }}
+                      />
+                    </Tooltip>
+                  )}
+
+                  {item.status === STATUS_DATA.INACTIVE && (
+                    <Tooltip title="Active" trigger={'hover'} placement="bottom">
+                      <Button
+                        icon={<UnlockOutlined />}
+                        onClick={() => {
+                          modal.confirm({
+                            icon: null,
+                            cancelText: 'Batal',
+                            title: 'Aktifkan Konfigurasi Penjadwalan?',
+                            cancelButtonProps: { style: { width: 100 } },
+                            okButtonProps: { style: { width: 100 } },
+                            content: (
+                              <div>
+                                <div className="font-semibold italic">{`Perhatian: `}</div>
+                                <div className="italic">{`Dengan mengaktifkannya, konfigurasi ini akan kembali diperhitungkan dan digunakan dalam proses penjadwalan selanjutnya, sesuai dengan kriteria yang telah ditetapkan.`}</div>
+                              </div>
+                            ),
+                            onOk: () => handleActivate(item.id),
+                          });
+                        }}
+                      />
+                    </Tooltip>
+                  )}
+
+                  <Tooltip title="Delete" trigger={'hover'} placement="bottom">
+                    <Button
+                      icon={<DeleteOutlined />}
+                      onClick={() => {
+                        modal.confirm({
+                          icon: null,
+                          cancelText: 'Batal',
+                          title: 'Hapus Konfigurasi Penjadwalan?',
+                          cancelButtonProps: { style: { width: 100 } },
+                          okButtonProps: { style: { width: 100 } },
+                          content: (
+                            <div>
+                              <div className="font-semibold italic">{`Perhatian: `}</div>
+                              <div className="italic">{`Tindakan ini bersifat permanen. Konfigurasi yang terhapus tidak akan lagi disertakan dalam perhitungan atau proses penjadwalan di masa mendatang dan tidak dapat dipulihkan.`}</div>
+                            </div>
+                          ),
+                          onOk: () => handleDelete(item.id),
+                        });
+                      }}
+                    />
+                  </Tooltip>
+                </Flex>
+              </Flex>
+            </Card>
+          </List.Item>
+        )}
+      />
+      <div style={{ marginBottom: 10 }}></div>
+      <Flex justify="end">
+        <Pagination current={meta?.currentPage} total={meta?.totalPages} />
+      </Flex>
+    </div>
+  );
+}

src/apps/admin/pages/setting.tsx

@@ -2,7 +2,10 @@ import { ACCESS_SETTING, UserDataState } from '@pos/base';
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
-import DefaultValue from '../layout/components/default-value';
+
+import DefaultValue from './components/default-value';
+import SchedulingData from './components/scheduling-data';
+import { Flex } from 'antd';
 
 export default function SettingModule() {
   const user = useRecoilValue(UserDataState);
@@ -21,11 +24,13 @@ export default function SettingModule() {
     if (!checkAllowAccessSetting()) {
       navigate('/app');
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
-    <div>
+    <Flex vertical gap={24}>
       <DefaultValue />
-    </div>
+      <SchedulingData />
+    </Flex>
   );
 }