SSA-Admin-Panel/src/Pages/SubAdmin/AddModel.tsx

import { Button } from "../../components/ui/button";
import {
  DialogBody,
  DialogCloseTrigger,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogRoot,
  DialogTitle,
  DialogTrigger,
} from "../../components/ui/dialog";
import { Field, Grid, Heading, Input, Stack, Text } from "@chakra-ui/react";
import { IoMdAdd } from "react-icons/io";
import { Checkbox } from "../../components/ui/checkbox";
import { useCreateSubAdminPostMutation } from "../../Redux/Service/manage.subadmin.service";
import { toaster } from "../../components/ui/toaster";
import { useState } from "react";

function AddModel({ refetch }: { refetch: VoidFunction }) {
  const [createSubAdminPost] = useCreateSubAdminPostMutation();

  // State fields
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [userName, setUserName] = useState("");
  const [dateOfBirth, setDateOfBirth] = useState("");
  const [gender, setGender] = useState("");
  const [ setIsOpen] = useState(false);

  const handleSubmit = async () => {
    if (
      !firstName.trim() ||
      !lastName.trim() ||
      !userName.trim() ||
      !dateOfBirth.trim() ||
      !gender.trim()
    ) {
      toaster.create({
        title: "Error",
        description: "Please fill in all required fields",
        type: "error",
      });
      return;
    }

    const payload = {
      principal_type_xid: 4,
      principal_source_xid: 1,
      user_name: userName,
      first_name: firstName,
      last_name: lastName,
      date_of_birth: dateOfBirth,
      gender: gender,
      email_address: "example@yopmail.com", // Hardcoded
      phone_number: "9876543210", // Hardcoded
      created_by: 1,
    };

    try {
      const response = await createSubAdminPost(payload).unwrap();
      if (response) {
        toaster.create({
          title: "Success",
          description: "Sub-admin created successfully",
          type: "success",
        });
        refetch();
        setIsOpen(false);
        setFirstName("");
        setLastName("");
        setUserName("");
        setDateOfBirth("");
        setGender("");
      }
    } catch (error) {
      console.error("Error creating sub-admin:", error);
      toaster.create({
        title: "Error",
        description: "Failed to create sub-admin",
        type: "error",
      });
    }
  };

  return (
    <DialogRoot placement="center">
      <DialogTrigger asChild>
        <Button rounded={"md"} px={4} py={2} size={"xs"} bg={"#02A0A0"}>
          <IoMdAdd /> Add
        </Button>
      </DialogTrigger>

      <DialogContent
        bg={"#fff"}
        w={{ base: "90%", md: "400px" }}
        height={"80vh"}
        overflow={"scroll"}
        overflowX="hidden"
        p={3}
        bgSize={"md"}
      >
        <DialogHeader bg="white">
          <DialogTitle alignSelf="center" color="black" fontSize="14px">
            Add Sub Admin Account
          </DialogTitle>
        </DialogHeader>

        <DialogBody bg="white">
          <Stack py={3}>
            <Field.Root>
              <Field.Label color="black" pt={1} fontSize="12px">
                First Name
              </Field.Label>
              <Input
                placeholder="Enter the First Name"
                bgColor="#EEEEEE"
                color="black"
                border="none"
                pl={1}
                fontSize="12px"
                height="30px"
                value={firstName}
                onChange={(e) => setFirstName(e.target.value)}
              />

              <Field.Label color="black" pt={1} fontSize="12px">
                Last Name
              </Field.Label>
              <Input
                placeholder="Enter the Last Name"
                bgColor="#EEEEEE"
                color="black"
                border="none"
                pl={1}
                fontSize="12px"
                height="30px"
                value={lastName}
                onChange={(e) => setLastName(e.target.value)}
              />

              <Field.Label color="black" pt={1} fontSize="12px">
                Username
              </Field.Label>
              <Input
                placeholder="Enter the Username"
                bgColor="#EEEEEE"
                color="black"
                border="none"
                pl={1}
                fontSize="12px"
                height="30px"
                value={userName}
                onChange={(e) => setUserName(e.target.value)}
              />

              <Field.Label color="black" pt={1} fontSize="12px">
                DOB
              </Field.Label>
              <Input
                placeholder="Enter the DOB"
                bgColor="#EEEEEE"
                color="black"
                border="none"
                pl={1}
                fontSize="12px"
                height="30px"
                type="date"
                value={dateOfBirth}
                onChange={(e) => setDateOfBirth(e.target.value)}
              />

              <Field.Label color="black" pt={1} fontSize="12px">
                Gender
              </Field.Label>
              <Input
                placeholder="Enter the Gender"
                bgColor="#EEEEEE"
                color="black"
                border="none"
                pl={1}
                fontSize="12px"
                height="30px"
                value={gender}
                onChange={(e) => setGender(e.target.value)}
              />

              <Heading mt={5} color={"#000"} fontSize={"sm"}>
                Permissions
              </Heading>
            </Field.Root>

            <Grid templateColumns="repeat(2, 1fr)" gap={4}>
              {[
                "Dashboard",
                "Manage contact us",
                "manage User",
                "Manage CMS",
                "Manage Post",
                "Manage Reports",
                "manage Sub-Admin",
                "My profile",
                "Manage Jobs",
                "manage feedbacks",
                "Manage community",
                "Notification",
              ].map((permission) => (
                <Checkbox size="sm" color="black" key={permission}>
                  <Text fontSize={12}>{permission}</Text>
                </Checkbox>
              ))}
            </Grid>
          </Stack>
        </DialogBody>

        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
          <Button
            size={"xs"}
            w="100%"
            bg="#02A0A0"
            color={"#fff"}
            onClick={handleSubmit}
          >
            Save
          </Button>
        </DialogFooter>

        <DialogCloseTrigger color="black" />
      </DialogContent>
    </DialogRoot>
  );
}

export default AddModel;