revenue-fe/src/pages/groups/ManageGroups.tsx

import { DataTable } from '@/components/ui/DataTable';
import { columns, Group } from './Column';
import { apiConfig } from '@/config/api.config';
import axios, { AxiosResponse } from 'axios';
import { DialogContent, MenuItem, Radio, RadioGroup, FormControlLabel, FormControl,
  Dialog, DialogTitle, Typography, Button, Box } from '@mui/material';
import { useState, useEffect } from 'react';
// import IconButton from '@mui/material/IconButton';
import CloseIcon from '@mui/icons-material/Close';
import Divider from '@mui/material/Divider';
import ConfirmDialog from '@/components/confirm';
// import { DialogHeader } from '@/components/ui/dialog';
// import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
const BASE_URL = apiConfig.service_customer;

let initGroup = {
  id: '',
  groupName: '',
  status: '',
  description: '',
  pin_length: '',
  max_pin_attempts: '',
  default_notification: ''
}

const ManageGroups = () => {
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [dataGroup, setDataGroup] = useState([]);
  const [formData, setFormData] = useState(initGroup);
  const [pageIndex, setPageIndex] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [dialogType, setDialogType] = useState('');
  const [dialogOpen, setDialogOpen] = useState(false);
  
  useEffect(() => {
    fetchGroups()
  }, []);

  async function fetchGroups() {
    try {
      let groups = await axios.get(`${BASE_URL}/groups/list`, {
        params: {
          limit: pageSize,
          page: pageIndex,
          with_deleted: false,
          order_field: 'name',
          order_direction: 'ASC'
        }
      });
      setDataGroup(groups.data.data.list)
    } catch (error: any) {
      alert(error.message)
      console.log(error);
    }
  }

  const openDialog = () => setIsDialogOpen(true);
  const closeDialog = () => {
    setIsDialogOpen(false)
    setFormData(initGroup)
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    })
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setDialogOpen(true);
  };

  function createGroup() {
    setDialogType('create');
    openDialog();
  }

  const handleUpdate = (group: any) => {
    setFormData({
      ...formData,
      id: group.id,
      groupName: group.name,
      status: group.status,
      description: group.description
    })
    setDialogType('update');
    setIsDialogOpen(true)
  };

  const handleDelete = (group: any) => {
    setFormData({
      ...formData,
      id: group.id,
      groupName: group.name,
      status: group.status,
      description: group.description
    })
    setDialogType('delete');
    setDialogOpen(true)
  };

  const handleYes = async () => {
    try {
      if (dialogType === 'create') {
        await axios.post(`${BASE_URL}/groups/create`, {
          "name": formData.groupName,
          "status": formData.status,
          "created_at": new Date()
        })
      } else if (dialogType === 'update') {
        await axios.put(`${BASE_URL}/groups/update/${formData.id}`, {
          "name": formData.groupName,
          "status": formData.status,
          "updated_at": new Date()
        })
      } else if (dialogType === 'delete') {
        await axios.delete(`${BASE_URL}/groups/delete/${formData.id}/true`)
      }
      await fetchGroups();
      closeDialog();
      setDialogOpen(false);
    } catch (error) {
      console.log(error);
      closeDialog();
      setDialogOpen(false);
    }
  };

  return (
    <div>
      <div className="container mx-auto pt-2">
      <ConfirmDialog
        open={dialogOpen}
        onClose={() => setDialogOpen(false)}
        title="Confirm Action"
        content={`Are you sure you want to `+( dialogType === 'create' ? "create?" : ( dialogType === 'update' ? "update?" : "delete?"))}
        onYes={handleYes}
        onNo={() => setDialogOpen(false)}
      />
        <h1 className="text-xl font-medium leading-none text-gray-900 p-5">Groups</h1>
        <DataTable data={dataGroup} columns={columns} createGroup={createGroup} onUpdate={handleUpdate} onDelete={handleDelete} />
        <Dialog open={isDialogOpen} onClose={closeDialog}>
          <DialogContent className="w-[600px]">
            <div className="flex justify-between">
              <DialogTitle>Create New Group</DialogTitle>
              <Box display="flex" justifyContent="flex-end">
                <Button variant="outlined" sx={{ borderColor: "white", color: 'grey' }} onClick={closeDialog}><CloseIcon/></Button>
              </Box>
            </div>
            <Divider/>
            <div className="p-5 mt-5">
              <form onSubmit={handleSubmit} className="flex flex-col gap-4 w-full">
                <div className="grid grid-cols-4 items-center gap-4 w-full">
                  <label className="form-label text-sm">
                    <span className="text-red-500">*</span>Group Name:
                  </label>
                  <input
                    type="text"
                    name="groupName"
                    className="input w-full col-span-3"
                    value={formData.groupName}
                    onChange={handleChange}
                  />
                </div>
                <div className="grid grid-cols-4 items-center gap-4 w-full">
                  <label className="form-label text-sm">
                    <span className="text-red-500">*</span>Active Status:
                  </label>
                  <FormControl>
                    <RadioGroup name='status' row value={formData.status} onChange={handleChange}>
                      <FormControlLabel value="Y" checked={formData.status === 'Y'} control={<Radio />} label="Yes" />
                      <FormControlLabel value="N" checked={formData.status === 'N'} control={<Radio />} label="No" />
                    </RadioGroup>
                  </FormControl>
                </div>
                <div className="grid grid-cols-4 items-center gap-4 w-full">
                  <label className="form-label text-sm">
                    <span className="text-red-500">*</span>Description:
                  </label>
                  <input
                    type="text"
                    name="description"
                    className="input w-full col-span-3"
                    value={formData.description}
                    onChange={handleChange}
                  />
                </div>
                <Button type="submit">Submit</Button>
              </form>
            </div>
          </DialogContent>
        </Dialog>
      </div>
    </div>
  );
};

export default ManageGroups;