SSA-Admin-Panel/src/Pages/SubAdmin/ViewSubAdmin.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 { Checkbox } from "../../components/ui/checkbox";
// import { MdOutlineRemoveRedEye } from "react-icons/md";
// import { FaRegEdit } from "react-icons/fa";
import View from "../../components/ActionIcons/View";
import { Button } from "../../components/ui/button";
import { useLazyViewSubAdminQuery } from "../../Redux/Service/manage.subadmin.service";

function ViewSubAdmin({ id }: { id: number }) {
  const [trigger, { data }] = useLazyViewSubAdminQuery();

  const handleView = () => {
    trigger(id)
  }
 
  const viewSubAdmin = data?.data

  const formatDateOfBirth = (dob: string): string => {
    return new Date(dob).toLocaleDateString("en-GB", {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
    });
  };

  console.log('data', data?.data);
  return (
    <DialogRoot placement="center">
      <DialogTrigger asChild>
        <Button
          onClick={handleView}
          bg={'transparent'}
          color={"black"}
        >
          <View />
        </Button>
      </DialogTrigger>

      {viewSubAdmin?.map((data: any) => (
        <DialogContent
          bg={"#fff"}
          // w={{ lg: "60%", md: "230px" }}
          w={{ base: "90%", md: "400px" }}
          height={"80vh"}
          overflow={"scroll"}
          overflowX="hidden"
          p={3} // Reduced padding
          bgSize={"md"}
        >
          <DialogHeader bg="white">
            <DialogTitle alignSelf="center" color="black" fontSize="14px">
              View 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
                  value={data.first_name}
                  bgColor="#EEEEEE"
                  color="black"
                  border="none"
                  pl={1}
                  fontSize="12px"
                  height="30px"
                  readOnly
                />

                <Field.Label color="black" pt={1} fontSize="12px">
                  Last Name
                </Field.Label>
                <Input
                  value={data.last_name}
                  bgColor="#EEEEEE"
                  color="black"
                  border="none"
                  pl={1}
                  fontSize="12px"
                  height="30px"
                  readOnly
                />

                <Field.Label color="black" pt={1} fontSize="12px">
                  ID
                </Field.Label>
                <Input
                  value={data.unique_id}
                  bgColor="#EEEEEE"
                  color="black"
                  border="none"
                  pl={1}
                  fontSize="12px"
                  height="30px"
                  readOnly
                />

                <Field.Label color="black" pt={1} fontSize="12px">
                  DOB
                </Field.Label>
                <Input
                  value={formatDateOfBirth(data.date_of_birth)}
                  bgColor="#EEEEEE"
                  color="black"
                  border="none"
                  pl={1}
                  fontSize="12px"
                  height="30px"
                  readOnly
                />

                <Field.Label color="black" pt={1} fontSize="12px">
                  Gender
                </Field.Label>
                <Input
                  value={data.gender}
                  bgColor="#EEEEEE"
                  color="black"
                  border="none"
                  pl={1}
                  fontSize="12px"
                  height="30px"
                  readOnly
                />
                <Heading mt={5} color={"#000"} fontSize={"sm"}>
                  Permissions
                </Heading>
              </Field.Root>
              <Grid templateColumns="repeat(2, 1fr)" gap={4}>
                {data.get_resource_action_link.map((check: any) => (
                  <Checkbox size={"sm"} color={"black"} checked={check.is_active}>
                    <Text fontSize={12}>{check.app_resource_xid}</Text>
                  </Checkbox>
                  // <>
                  //   <Checkbox size={"sm"} color={"black"}>
                  //     <Text fontSize={12}>Dashboard</Text>
                  //   </Checkbox>
                  //   <Checkbox size={"sm"} color={"black"}>
                  //     {" "}
                  //     <Text fontSize={12}>Manage contact us</Text>
                  //   </Checkbox>
                  //   <Checkbox size={"sm"} color={"black"}>
                  //     {" "}
                  //     <Text fontSize={12}>manage User</Text>
                  //   </Checkbox>
                  //   <Checkbox size={"sm"} color={"black"}>
                  //     {" "}
                  //     <Text fontSize={12}>Manage CMS</Text>
                  //   </Checkbox>
                  //   <Checkbox size={"sm"} color={"black"}>
                  //     {" "}
                  //     <Text fontSize={12}>Manage Post</Text>
                  //   </Checkbox>
                  //   <Checkbox size={"sm"} color={"black"}>
                  //     {" "}
                  //     <Text fontSize={12}>Manage Reports</Text>
                  //   </Checkbox>
                  //   <Checkbox size={"sm"} color={"black"}>
                  //     {" "}
                  //     <Text fontSize={12}>manage Sub-Admin</Text>
                  //   </Checkbox>
                  //   <Checkbox size={"sm"} color={"black"}>
                  //     {" "}
                  //     <Text fontSize={12}>My profile</Text>
                  //   </Checkbox>
                  //   <Checkbox size={"sm"} color={"black"}>
                  //     <Text fontSize={12}>Manage Jobs</Text>{" "}
                  //   </Checkbox>
                  //   <Checkbox size={"sm"} color={"black"}>
                  //     <Text fontSize={12}> manage feedbacks</Text>
                  //   </Checkbox>
                  //   <Checkbox size={"sm"} color={"black"}>
                  //     <Text fontSize={12}>Manage community</Text>{" "}
                  //   </Checkbox>
                  //   <Checkbox size={"sm"} color={"black"}>
                  //     <Text fontSize={12}> Notification</Text>
                  //   </Checkbox>
                  // </>
                ))}
              </Grid>
            </Stack>
          </DialogBody>
          <DialogFooter display="flex" justifyContent="center" pt={"2"}>
            {/* <Button w="100%" bg="#02A0A0" color={"#fff"}>
                        Save
                    </Button> */}
          </DialogFooter>

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

export default ViewSubAdmin;