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,
  Icon,
  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";
function ViewSubAdmin() {
  return (
    <DialogRoot placement="center">
      <DialogTrigger asChild>
        <View />
      </DialogTrigger>

      <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="Priyanka"
                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="Joshi"
                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="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="11/02/1989"
                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="Male"
                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}>
              <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;