@codezee/sixtify-brahma 0.1.1

package/packages/shared-components/src/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,76 @@
+import {
+  Box,
+  IconButton,
+  Link,
+  Breadcrumbs as MuiBreadcrumbs,
+  Typography,
+  useTheme,
+} from "@mui/material";
+import type { ReactNode } from "react";
+import { v4 as uuidv4 } from "uuid";
+
+type BreadcrumbItem = {
+  icon?: ReactNode;
+  text?: string;
+  onClick?: () => void;
+};
+
+type BreadcrumbProps = {
+  items: BreadcrumbItem[];
+};
+
+export const Breadcrumbs = ({ items }: BreadcrumbProps) => {
+  const theme = useTheme();
+
+  const { butterflyBlue } = theme.palette.app.color;
+
+  return (
+    <MuiBreadcrumbs>
+      {items.map((item) => {
+        const { icon, text, onClick } = item;
+
+        if (onClick) {
+          return (
+            <Link
+              key={uuidv4()}
+              underline="hover"
+              sx={{ display: "flex", alignItems: "center" }}
+              onClick={(e) => {
+                e.preventDefault();
+
+                onClick();
+              }}
+              href="#"
+            >
+              {icon && (
+                <IconButton
+                  sx={{
+                    color: butterflyBlue[900],
+                  }}
+                >
+                  {icon}
+                </IconButton>
+              )}
+              {text && <Typography>{text}</Typography>}
+            </Link>
+          );
+        }
+
+        return (
+          <Box key={uuidv4()}>
+            {icon && (
+              <IconButton
+                sx={{
+                  color: butterflyBlue[900],
+                }}
+              >
+                {icon}
+              </IconButton>
+            )}
+            {text && <Typography>{text}</Typography>}
+          </Box>
+        );
+      })}
+    </MuiBreadcrumbs>
+  );
+};

package/packages/shared-components/src/Breadcrumbs/index.ts

@@ -0,0 +1 @@
+export * from "./Breadcrumbs";

package/packages/shared-components/src/Button/ActionButton.tsx

@@ -0,0 +1,38 @@
+import ExpandMoreRoundedIcon from "@mui/icons-material/ExpandMoreRounded";
+import type { ButtonProps as MuiButtonProps } from "@mui/material";
+import {
+  Button,
+  CircularProgress,
+  Divider,
+  Stack,
+  useTheme,
+} from "@mui/material";
+export type ActionButtonProps = MuiButtonProps & {
+  loading?: boolean;
+};
+
+export const ActionButton = ({
+  loading = false,
+  children,
+  ...rest
+}: ActionButtonProps) => {
+  const theme = useTheme();
+
+  const { lightBlue } = theme.palette.app.color;
+
+  return (
+    <Button {...rest}>
+      <Stack gap="10px" flexDirection="row" alignItems="center">
+        {loading ? <CircularProgress size={28} /> : children}
+        <Divider
+          orientation="vertical"
+          sx={{
+            borderColor: lightBlue[100],
+            height: "22px",
+          }}
+        />
+        <ExpandMoreRoundedIcon fontSize="small" />
+      </Stack>
+    </Button>
+  );
+};

package/packages/shared-components/src/Button/Button.tsx

@@ -0,0 +1,19 @@
+import type { ButtonProps as MuiButtonProps } from "@mui/material";
+import { CircularProgress, Button as MuiButton } from "@mui/material";
+
+export type ButtonProps = MuiButtonProps & {
+  loading?: boolean;
+};
+
+export const Button = ({
+  loading = false,
+  children,
+  disabled = false,
+  ...rest
+}: ButtonProps) => {
+  return (
+    <MuiButton disabled={loading || disabled} {...rest}>
+      {loading ? <CircularProgress size={28} /> : children}
+    </MuiButton>
+  );
+};

package/packages/shared-components/src/Button/ButtonGroup.tsx

@@ -0,0 +1,37 @@
+import { ButtonGroup as MuiButtonGroup } from "@mui/material";
+import { isFunction } from "lodash";
+import type { ReactNode } from "react";
+import { Button } from "./Button";
+
+type ButtonObject = {
+  icon: ReactNode;
+  value: string;
+  label: string;
+  selected: boolean;
+  onClick: (value: string) => void;
+};
+
+type ButtonGroupProps = {
+  renderButtons: ButtonObject[];
+};
+
+export const ButtonGroup = ({ renderButtons }: ButtonGroupProps) => {
+  return (
+    <MuiButtonGroup sx={{ boxShadow: "none" }} aria-label="Basic button group">
+      {renderButtons?.map(({ icon, value, label, selected, onClick }) => (
+        <Button
+          variant={!selected ? "outlined" : "contained"}
+          key={value}
+          onClick={() => {
+            if (isFunction(onClick)) {
+              onClick(value);
+            }
+          }}
+          startIcon={icon}
+        >
+          {label}
+        </Button>
+      ))}
+    </MuiButtonGroup>
+  );
+};

package/packages/shared-components/src/Button/index.ts

@@ -0,0 +1,3 @@
+export * from "./ActionButton";
+export * from "./Button";
+export * from "./ButtonGroup";

package/packages/shared-components/src/Card/AttendanceCard.tsx

@@ -0,0 +1,51 @@
+import { Box, Skeleton, Stack, Typography } from "@mui/material";
+import { PadBox } from "../PadBox";
+import { SvgsIndicator } from "../Svgs/SvgsIndicator";
+import { getColorByVariant, type WorkDayType } from "../utils/colorVariant";
+
+type AttendanceCardProps = {
+  variant: WorkDayType;
+  label: string;
+  value: string;
+  isLoading: boolean;
+};
+export const AttendanceCard = ({
+  variant,
+  label,
+  value,
+  isLoading = false,
+}: AttendanceCardProps) => {
+  return (
+    <Box
+      sx={{
+        width: "223px",
+        height: "93px",
+        borderRadius: "8px",
+        border: `1px solid ${getColorByVariant(variant)}`,
+        backgroundColor: `${getColorByVariant(variant, "light")}`,
+        position: "relative",
+      }}
+    >
+      <PadBox padding={{ padding: "15px" }}>
+        <Stack gap="15px">
+          <Typography>{label}</Typography>
+          {isLoading ? (
+            <Skeleton
+              width={80}
+              height={25}
+              sx={{
+                transform: "scale(1)",
+                borderRadius: "4px",
+              }}
+            />
+          ) : (
+            <Typography variant="h6">{value}</Typography>
+          )}
+        </Stack>
+        <Box sx={{ position: "absolute", top: "0px", right: "5px" }}>
+          <SvgsIndicator variant={variant} />
+        </Box>
+      </PadBox>
+    </Box>
+  );
+};

package/packages/shared-components/src/Card/Card.tsx

@@ -0,0 +1,34 @@
+import { Box, Stack, Typography, useTheme } from "@mui/material";
+import type { PropsWithChildren, ReactNode } from "react";
+import { PadBox } from "../PadBox";
+
+type CardProps = PropsWithChildren<{
+  heading?: ReactNode;
+  action?: ReactNode;
+}>;
+
+export function Card({ heading, children, action }: Readonly<CardProps>) {
+  const theme = useTheme();
+
+  const { lightBlue } = theme.palette.app.color;
+
+  return (
+    <Box bgcolor={lightBlue[50]} flex={1} sx={{ borderRadius: "5px" }}>
+      <PadBox padding={{ padding: 2 }}>
+        <Stack gap="10px">
+          <Stack
+            flexDirection="row"
+            alignItems="center"
+            justifyContent="space-between"
+          >
+            <Typography variant="h6">{heading}</Typography>
+
+            <Box>{action}</Box>
+          </Stack>
+
+          {children}
+        </Stack>
+      </PadBox>
+    </Box>
+  );
+}

package/packages/shared-components/src/Card/CardItem/CardItem.tsx

@@ -0,0 +1,33 @@
+import { Stack, Typography } from "@mui/material";
+import type { ReactNode } from "react";
+
+type CardItemProps = Readonly<{
+  label: ReactNode;
+  value?: ReactNode;
+}>;
+
+export function CardItem({ label, value }: CardItemProps) {
+  return (
+    <Stack
+      direction="row"
+      justifyContent="space-between"
+      alignItems="center"
+      gap="5px"
+    >
+      {typeof label === "string" ? (
+        <Typography
+          variant="body1"
+          sx={{ fontWeight: 500 }}
+          flex={1}
+          maxWidth="400px"
+        >
+          {label} :
+        </Typography>
+      ) : (
+        <> {label} :</>
+      )}
+
+      {value}
+    </Stack>
+  );
+}

package/packages/shared-components/src/Card/CardItem/CardItemValue.tsx

@@ -0,0 +1,98 @@
+import type { AvatarOwnProps, SxProps, Theme } from "@mui/material";
+import { Avatar, Skeleton, Stack, Typography, useTheme } from "@mui/material";
+
+type CardItemValueProps = {
+  title?: string;
+  subTitle?: string;
+  loading?: boolean;
+  avatar?: string;
+  showAvatar?: boolean;
+  sx?: SxProps<Theme>;
+  isHideTitle?: boolean;
+  variant?: AvatarOwnProps["variant"];
+};
+
+export const CardItemValue = ({
+  title,
+  subTitle,
+  avatar,
+  loading = false,
+  showAvatar = false,
+  isHideTitle = false,
+  variant = "circular",
+  sx,
+}: CardItemValueProps) => {
+  const theme = useTheme();
+
+  const { slate, iron } = theme.palette.app.color;
+
+  if (loading) {
+    return (
+      <Stack gap="10px " flex="1">
+        <Stack direction="row" gap="10px" alignItems="center">
+          {avatar && (
+            <Skeleton
+              variant="circular"
+              height="30px"
+              animation="wave"
+              width="30px"
+            />
+          )}
+          <Skeleton
+            variant="rounded"
+            height={20}
+            animation="wave"
+            width="150px"
+          />
+        </Stack>
+
+        {subTitle && (
+          <Skeleton
+            variant="rounded"
+            height={20}
+            animation="wave"
+            width="200px"
+          />
+        )}
+      </Stack>
+    );
+  }
+
+  return (
+    <Stack gap="10px" flex="1">
+      <Stack gap="10px" direction="row" alignItems="center">
+        {showAvatar && <Avatar alt={title} src={avatar} variant={variant} />}
+
+        {!isHideTitle && (
+          <Typography
+            variant="body1"
+            sx={{
+              fontWeight: 400,
+              color: slate[900],
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              display: "-webkit-box",
+              WebkitLineClamp: 1,
+              WebkitBoxOrient: "vertical",
+              width: "min-contact",
+              ...sx,
+            }}
+          >
+            {title ? title : "-"}
+          </Typography>
+        )}
+      </Stack>
+
+      {subTitle && (
+        <Typography
+          variant="body1"
+          sx={{
+            color: iron[500],
+          }}
+        >
+          {subTitle}
+        </Typography>
+      )}
+    </Stack>
+  );
+};

package/packages/shared-components/src/Card/CardItem/index.ts

@@ -0,0 +1,2 @@
+export * from "./CardItem";
+export * from "./CardItemValue";

package/packages/shared-components/src/Card/ProfileCard/ProfileCard.tsx

@@ -0,0 +1,40 @@
+import { Box, Stack, useTheme } from "@mui/material";
+import type { PropsWithChildren, ReactNode } from "react";
+import { PadBox } from "../../PadBox";
+
+type ProfileCardProps = PropsWithChildren<{
+  header: ReactNode;
+  body: ReactNode;
+  onClick: (e: React.MouseEvent) => void;
+}>;
+
+export function ProfileCard({
+  onClick,
+  header,
+  body,
+}: Readonly<ProfileCardProps>) {
+  const theme = useTheme();
+
+  const { lightBlue, butterflyBlue } = theme.palette.app.color;
+
+  return (
+    <Box
+      bgcolor={lightBlue[50]}
+      flex={1}
+      sx={{
+        borderRadius: "10px",
+        cursor: "pointer",
+        ":hover": { background: butterflyBlue[600] },
+      }}
+      height="400px"
+      onClick={onClick}
+    >
+      <PadBox padding={{ padding: "5px" }}>
+        <Stack height="100%" justifyContent="space-between">
+          {header}
+          {body}
+        </Stack>
+      </PadBox>
+    </Box>
+  );
+}

package/packages/shared-components/src/Card/ProfileCard/ProfileCardItem/ProfileCardBody.tsx

@@ -0,0 +1,53 @@
+import CallOutlinedIcon from "@mui/icons-material/CallOutlined";
+import EmailOutlinedIcon from "@mui/icons-material/EmailOutlined";
+import { Box, Stack } from "@mui/material";
+import type { PropsWithChildren } from "react";
+import { PadBox } from "../../../PadBox";
+import { CardItem, CardItemValue } from "../../CardItem";
+
+type ProfileCardBodyProps = PropsWithChildren<{
+  joiningDate: string;
+  department: string;
+  subDepartment: string;
+  email: string;
+  phone: string;
+  loading?: boolean;
+}>;
+
+export function ProfileCardBody({
+  joiningDate,
+  department,
+  subDepartment,
+  email,
+  phone,
+  loading,
+}: ProfileCardBodyProps) {
+  return (
+    <Box bgcolor="#F3F5F7" sx={{ borderRadius: "10px" }}>
+      <PadBox padding={{ padding: "12px" }}>
+        <Stack gap="10px">
+          <CardItem
+            label="Date of Joining"
+            value={<CardItemValue title={joiningDate} loading={loading} />}
+          />
+          <CardItem
+            label="Department"
+            value={<CardItemValue title={department} loading={loading} />}
+          />
+          <CardItem
+            label="Sub Department"
+            value={<CardItemValue title={subDepartment} loading={loading} />}
+          />
+          <CardItem
+            label={<EmailOutlinedIcon />}
+            value={<CardItemValue title={email} loading={loading} />}
+          />
+          <CardItem
+            label={<CallOutlinedIcon />}
+            value={<CardItemValue title={phone} loading={loading} />}
+          />
+        </Stack>
+      </PadBox>
+    </Box>
+  );
+}

package/packages/shared-components/src/Card/ProfileCard/ProfileCardItem/ProfileCardHeader.tsx

@@ -0,0 +1,96 @@
+import type { SxProps, Theme } from "@mui/material";
+import { Box, Skeleton, Stack, Typography } from "@mui/material";
+import type { PropsWithChildren, ReactNode } from "react";
+import { DeleteAction } from "../../../Actions";
+import { Chip } from "../../../Chips";
+import { PadBox } from "../../../PadBox";
+import { CardItemValue } from "../../CardItem";
+
+type ProfileCardHeaderProps = PropsWithChildren<{
+  avatar: ReactNode;
+  employeeName: string;
+  designation: string;
+  employeeCode: string;
+  loading: boolean;
+  isDraft?: boolean;
+  sx?: SxProps<Theme>;
+  onDeleteClick?: (e: React.MouseEvent) => void;
+}>;
+
+export function ProfileCardHeader({
+  avatar,
+  employeeName,
+  designation,
+  employeeCode,
+  loading,
+  isDraft = false,
+  onDeleteClick,
+}: ProfileCardHeaderProps) {
+  return (
+    <Box>
+      <PadBox padding={{ padding: "10px 5px 0px 10px" }}>
+        <Stack
+          gap="10px"
+          direction="row"
+          alignItems="center"
+          justifyContent="space-between"
+        >
+          {loading ? (
+            <Skeleton
+              variant="rounded"
+              height={20}
+              animation="wave"
+              width="100px"
+            />
+          ) : // eslint-disable-next-line sonarjs/no-nested-conditional
+          isDraft ? (
+            <Chip label="Draft" size="small" color="error" variant="outlined" />
+          ) : (
+            <CardItemValue title={employeeCode} loading={loading} />
+          )}
+
+          {isDraft &&
+            (loading ? (
+              <Skeleton
+                variant="rounded"
+                height={20}
+                animation="wave"
+                width="50px"
+              />
+            ) : (
+              <DeleteAction onClick={onDeleteClick} />
+            ))}
+        </Stack>
+      </PadBox>
+      <Stack alignItems="center" gap="8px">
+        {avatar}
+        {loading ? (
+          <Skeleton
+            variant="rounded"
+            height={30}
+            animation="wave"
+            width="300px"
+          />
+        ) : (
+          <Typography
+            variant="h6"
+            sx={{
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              display: "-webkit-box",
+              WebkitLineClamp: 1,
+              WebkitBoxOrient: "vertical",
+            }}
+            width="330px"
+            fontWeight="600"
+            textAlign="center"
+          >
+            {employeeName ?? "-"}
+          </Typography>
+        )}
+
+        <CardItemValue title={designation} loading={loading} />
+      </Stack>
+    </Box>
+  );
+}

package/packages/shared-components/src/Card/index.ts

@@ -0,0 +1,6 @@
+export * from "./Card";
+export * from "./CardItem";
+export * from "./ProfileCard/ProfileCard";
+export * from "./ProfileCard/ProfileCardItem/ProfileCardBody";
+export * from "./ProfileCard/ProfileCardItem/ProfileCardHeader";
+export * from "./AttendanceCard";

package/packages/shared-components/src/Charts/PieChart.tsx

@@ -0,0 +1,69 @@
+import type { ReactNode } from "react";
+import type { PieChartProps as MuiPieChartProps } from "@mui/x-charts/PieChart";
+import { PieChart as MuiPieChart } from "@mui/x-charts/PieChart";
+import type { PieSeriesType, PieValueType } from "@mui/x-charts";
+import type { MakeOptional } from "@mui/x-charts/internals";
+import { useDrawingArea } from "@mui/x-charts/hooks";
+import { styled } from "@mui/material/styles";
+
+type PieChartProps = Omit<MuiPieChartProps, "series"> & {
+  series: MakeOptional<PieSeriesType<MakeOptional<PieValueType, "id">>, "type">;
+  label?: string;
+};
+
+type PieCenterLabelProps = {
+  children: ReactNode;
+};
+
+export const PieChart = ({
+  height = 235,
+  skipAnimation = false,
+  tooltip,
+  label,
+  series,
+  ...rest
+}: PieChartProps) => {
+  const valueFormatter = (item: MakeOptional<PieValueType, "id">) =>
+    `${item.value}%`;
+
+  const StyledText = styled("text")(({ theme }) => ({
+    fill: theme.palette.text.primary,
+    textAnchor: "middle",
+    dominantBaseline: "central",
+    fontSize: 20,
+  }));
+
+  // eslint-disable-next-line sonarjs/no-unstable-nested-components
+  const PieCenterLabel = ({ children }: PieCenterLabelProps) => {
+    const { width, height, left, top } = useDrawingArea();
+
+    return (
+      <StyledText x={left + width / 2} y={top + height / 2}>
+        {children}
+      </StyledText>
+    );
+  };
+
+  return (
+    <MuiPieChart
+      height={height}
+      sx={{
+        transform: "translate(50px, 0px)",
+        overflow: "visible",
+      }}
+      series={[
+        {
+          arcLabel: (params) => params.label ?? "",
+          arcLabelMinAngle: 20,
+          valueFormatter,
+          ...series,
+        },
+      ]}
+      {...rest}
+      tooltip={tooltip}
+      skipAnimation={skipAnimation}
+    >
+      <PieCenterLabel>{label}</PieCenterLabel>
+    </MuiPieChart>
+  );
+};

package/packages/shared-components/src/Charts/index.ts

@@ -0,0 +1 @@
+export * from "./PieChart";