pos-realtime-report/src/apps/admin/layout/components/local-data-configuration.tsx

import axios from 'axios';
import { useEffect, useState } from 'react';
import { App, Button, Col, InputNumber, InputNumberProps, Modal, ModalProps, Row, Slider } from 'antd';
import { API_URL, BASE_API_URL_LOCAL } from '@pos/base';

export default function LocalDataConfiguration(modalProps: ModalProps) {
  const { modal, notification } = App.useApp();

  const [configData, setConfigData] = useState<any>();
  const [inputValue, setInputValue] = useState(0);
  const [loadingGet, setLoadingGet] = useState(false);
  const [loadingSave, setLoadingSave] = useState(false);
  const onChange: InputNumberProps['onChange'] = (newValue) => {
    setInputValue(newValue as number);
  };

  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';
    }
  }

  async function handleSave(value: number) {
    setLoadingSave(true);
    await axios
      .put(API_URL.EDIT_TRANSACTION_SETTING, { id: configData?.id, value }, { baseURL: BASE_API_URL_LOCAL })
      .then(() => {
        notification.success({
          message: 'Sukses',
          description: 'Konfigurasi berhasil disimpan',
        });

        if (modalProps.onCancel) modalProps.onCancel(null as any);
      })
      .catch((err) => {
        notification.error({
          message: 'Gagal',
          description: err?.message ?? err?.response?.data?.message ?? 'Terjadi kesalahan saat menyimpan konfigurasi',
        });
      })
      .finally(() => {
        setLoadingSave(false);
      });
  }

  async function handleGetData() {
    setLoadingGet(true);
    await axios
      .get(API_URL.GET_TRANSACTION_SETTING, { baseURL: BASE_API_URL_LOCAL })
      .then((res) => {
        const data = res.data.data;
        const respValue = data?.value;
        setInputValue(Number(respValue ?? '0'));
        setConfigData(data);
      })
      .catch((err) => {
        notification.error({
          message: 'Gagal',
          description: err?.message ?? err?.response?.data?.message ?? 'Terjadi kesalahan saat mengambil konfigurasi',
        });
      })
      .finally(() => {
        setLoadingGet(false);
      });
  }

  useEffect(() => {
    if (modalProps.open) handleGetData();
  }, [modalProps.open]);
  return (
    <Modal
      {...modalProps}
      title="KONFIGURASI TAMPILAN DATA LOKAL"
      width={800}
      footer={[
        <Button key="cancel" onClick={modalProps.onCancel} style={{ width: 100 }} disabled={loadingSave || loadingGet}>
          Batal
        </Button>,
        <Button
          key="submit"
          type="primary"
          disabled={loadingSave || loadingGet}
          onClick={() => {
            modal.confirm({
              title: 'KONFIRMASI',
              icon: null,
              cancelText: 'Batal',
              cancelButtonProps: { style: { width: 100 } },
              okButtonProps: { style: { width: 100 } },
              content: (
                <div>
                  <div>Apakah Anda yakin ingin menyimpan konfigurasi ini?</div>
                  <div className="mb-4">Jumlah data yang akan ditampilkan di aplikasi lokal adalah: </div>
                  <div className={`text-center font-bold text-6xl mb-6 ${makeColorText(inputValue)}`}>
                    {inputValue}%
                  </div>
                </div>
              ),
              onOk: () => handleSave(inputValue),
            });
          }}
        >
          Simpan
        </Button>,
      ]}
    >
      <div className="text-gray-600 italic mb-6">{`Gunakan slider atau input number dibawah ini untuk menentukan persentase data yang ingin ditampilkan di aplikasi lokal Anda. Semakin tinggi persentasenya, semakin banyak data yang akan ditampilkan. Sesuaikan dengan kebutuhan untuk memastikan performa aplikasi tetap optimal.`}</div>
      <div>
        <Row gutter={[32, 8]}>
          <Col span={24}>
            <InputNumber
              disabled={loadingSave || loadingGet}
              min={0}
              max={100}
              value={inputValue}
              onChange={onChange}
              addonAfter="%"
            />
          </Col>
          <Col span={24}>
            <Slider
              min={0}
              max={100}
              disabled={loadingSave || loadingGet}
              onChange={onChange}
              value={typeof inputValue === 'number' ? inputValue : 0}
              marks={{
                0: '0%',
                25: '25%',
                50: '50%',
                75: '75%',
                100: '100%',
              }}
            />
          </Col>
        </Row>
      </div>
    </Modal>
  );
}