@codezee/sixtify-brahma 0.2.3 → 0.2.6

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: "10px" }}>
+        <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 { Box, Stack } from "@mui/material";
+import type { PropsWithChildren } from "react";
+import { PadBox } from "../../../PadBox";
+import { SvgEmail } from "../../../Svgs/SvgEmail";
+import { SvgPhone } from "../../../Svgs/SvgPhone";
+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={<SvgEmail />}
+            value={<CardItemValue title={email} loading={loading} />}
+          />
+          <CardItem
+            label={<SvgPhone />}
+            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="500"
+            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,81 @@
+import { styled } from "@mui/material/styles";
+import type { PieSeriesType, PieValueType } from "@mui/x-charts";
+import { useDrawingArea } from "@mui/x-charts/hooks";
+import type { MakeOptional } from "@mui/x-charts/internals";
+import type { PieChartProps as MuiPieChartProps } from "@mui/x-charts/PieChart";
+import { PieChart as MuiPieChart } from "@mui/x-charts/PieChart";
+import type { ReactNode } from "react";
+import { Skeleton } from "./Skeleton";
+
+type PieChartProps = Omit<MuiPieChartProps, "series"> & {
+  series: MakeOptional<PieSeriesType<MakeOptional<PieValueType, "id">>, "type">;
+  label?: string;
+  valueFormatter?: (item: { value: number }) => string;
+  loading?: boolean;
+};
+
+type PieCenterLabelProps = {
+  children: ReactNode;
+};
+
+export const PieChart = ({
+  height = 235,
+  skipAnimation = false,
+  loading = false,
+  valueFormatter = (item: MakeOptional<PieValueType, "id">) => `${item.value}%`,
+  tooltip,
+  label,
+  series,
+  ...rest
+}: PieChartProps) => {
+  const StyledText = styled("text")(({ theme }) => ({
+    fill: theme.palette.text.primary,
+    textAnchor: "middle",
+    dominantBaseline: "central",
+    fontSize: 20,
+  }));
+
+  const outerRadius = Number(series.outerRadius ?? 0);
+
+  const innerRadius = Number(series.innerRadius ?? 0);
+
+  const radius = outerRadius - innerRadius;
+
+  // 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>
+    );
+  };
+
+  if (loading) {
+    return <Skeleton height={height} radius={radius} />;
+  }
+
+  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/Skeleton.tsx

@@ -0,0 +1,36 @@
+import { Box, Skeleton as MuiSkeleton } from "@mui/material";
+
+export const Skeleton = ({
+  height = 235,
+  radius = 18,
+}: {
+  height?: string | number;
+  radius?: number;
+}) => {
+  return (
+    <Box position="relative" display="flex" justifyContent="center">
+      <MuiSkeleton
+        sx={{
+          transform: "unset",
+          width: "162px",
+          height: { height },
+          borderRadius: "50%",
+          border: `${radius}px solid #e0e0e0`,
+          background: "transparent",
+          boxSizing: "border-box",
+        }}
+      />
+
+      <MuiSkeleton
+        sx={{
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          width: "80px",
+          height: "25px",
+        }}
+      />
+    </Box>
+  );
+};

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

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

package/packages/shared-components/src/Chips/Chip.tsx

@@ -0,0 +1,26 @@
+import {
+  Avatar,
+  Chip as MuiChip,
+  type ChipProps as MuiChipProps,
+} from "@mui/material";
+
+type ChipProps = {
+  imgURL?: string;
+} & MuiChipProps;
+
+export const Chip = ({
+  label,
+  variant = "outlined",
+  imgURL,
+  avatar,
+  ...rest
+}: ChipProps) => {
+  return (
+    <MuiChip
+      avatar={avatar && <Avatar alt="Natacha" src={imgURL} />}
+      label={label}
+      variant={variant}
+      {...rest}
+    />
+  );
+};

package/packages/shared-components/src/Chips/ChipWithBorder.tsx

@@ -0,0 +1,39 @@
+import type { ChipProps } from "@mui/material";
+import { alpha, Chip, Tooltip } from "@mui/material";
+
+type ChipWithBorderProps = Omit<ChipProps, "color"> & {
+  label: string;
+  color?: string;
+  toolTipLabel?: string;
+};
+
+export const ChipWithBorder = ({
+  label,
+  color = "green",
+  toolTipLabel,
+  ...rest
+}: ChipWithBorderProps) => {
+  return (
+    <Tooltip title={toolTipLabel} arrow placement="top">
+      <Chip
+        label={label}
+        {...rest}
+        sx={{
+          border: `1px solid ${color}`,
+          borderColor: color,
+          backgroundColor: alpha(color, 0.2),
+          borderRadius: "3px",
+          height: "20px",
+          width: "auto",
+          padding: "0px",
+          ".MuiChip-label": {
+            color,
+            fontSize: "12px",
+            fontWeight: 600,
+            padding: "5px",
+          },
+        }}
+      ></Chip>
+    </Tooltip>
+  );
+};

package/packages/shared-components/src/Chips/FilterPill.tsx

@@ -0,0 +1,47 @@
+import React, { forwardRef } from "react";
+import { Chip } from "../Chips";
+import { ClearIcon } from "@mui/x-date-pickers/icons";
+import { useTheme } from "@mui/material";
+
+type FilterPillProps = {
+  onDelete?: () => void;
+  label: React.ReactNode;
+  onClick?: (e: { currentTarget: HTMLDivElement | null }) => void;
+};
+
+export const FilterPill = forwardRef<HTMLDivElement, FilterPillProps>(
+  ({ onDelete, label, onClick }, ref) => {
+    const theme = useTheme();
+
+    const { black, sapphireBlue, iron } = theme.palette.app.color;
+
+    return (
+      <Chip
+        ref={ref}
+        label={label}
+        variant="filled"
+        deleteIcon={onDelete && <ClearIcon />}
+        sx={{
+          maxWidth: "200px",
+          borderRadius: "20px",
+          color: black[900],
+          backgroundColor: `${sapphireBlue[400]} !important`,
+          "&:hover": {
+            backgroundColor: sapphireBlue[500],
+          },
+          "& .MuiChip-deleteIcon": {
+            color: iron[800],
+            "&:hover": {
+              color: iron[900],
+              backgroundColor: sapphireBlue[400],
+            },
+          },
+        }}
+        onDelete={onDelete}
+        onClick={onClick}
+      />
+    );
+  }
+);
+
+FilterPill.displayName = "FilterPill";

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

@@ -0,0 +1,3 @@
+export * from "./Chip";
+export * from "./FilterPill";
+export * from "./ChipWithBorder";

package/packages/shared-components/src/Dialog/BottomDialog.styled.tsx

@@ -0,0 +1,28 @@
+import type { StyledComponent } from "@emotion/styled";
+import type { StackProps } from "@mui/material";
+import { Stack, styled } from "@mui/material";
+import type { DialogProps as MuiDialogProps } from "./Dialog";
+import { Dialog } from "./Dialog";
+
+export const BottomDialogStyled: StyledComponent<MuiDialogProps> = styled(
+  Dialog
+)({
+  height: "85%",
+  top: "auto",
+  "& .MuiDialogContent-root": {
+    display: "grid",
+    padding: "unset",
+  },
+  "& .MuiDialog-paper": {
+    borderTopLeftRadius: "12px",
+    borderTopRightRadius: "12px",
+  },
+});
+
+export const BottomDialogBody: StyledComponent<StackProps> = styled(Stack)(
+  () => ({
+    "& > *": {
+      flex: "1 1 auto",
+    },
+  })
+);