@codezee/sixtify-brahma 0.0.0

package/packages/shared-components/src/Actions/AddAction.tsx

@@ -0,0 +1,16 @@
+import type { IconButtonProps } from "@mui/material";
+import { IconButton } from "@mui/material";
+import { SvgAdd } from "../Svgs";
+import { Tooltip } from "../Tooltip";
+
+export type AddActionProps = IconButtonProps;
+
+export const AddAction = (props: AddActionProps) => {
+  return (
+    <IconButton {...props}>
+      <Tooltip toolTipLabel="Add">
+        <SvgAdd />
+      </Tooltip>
+    </IconButton>
+  );
+};

package/packages/shared-components/src/Actions/CalendarAction.tsx

@@ -0,0 +1,16 @@
+import type { IconButtonProps } from "@mui/material";
+import { IconButton } from "@mui/material";
+import { SvgCalendar } from "../Svgs";
+import { Tooltip } from "../Tooltip";
+
+export type CalendarActionProps = IconButtonProps;
+
+export const CalendarAction = (props: CalendarActionProps) => {
+  return (
+    <IconButton sx={{ color: "#4C5D70" }} {...props}>
+      <Tooltip toolTipLabel="Calendar">
+        <SvgCalendar />
+      </Tooltip>
+    </IconButton>
+  );
+};

package/packages/shared-components/src/Actions/ConfigureAction.tsx

@@ -0,0 +1,16 @@
+import type { IconButtonProps } from "@mui/material";
+import { IconButton } from "@mui/material";
+import { SvgConfigure } from "../Svgs";
+import { Tooltip } from "../Tooltip";
+
+export type ConfigureActionProps = IconButtonProps;
+
+export const ConfigureAction = (props: ConfigureActionProps) => {
+  return (
+    <IconButton {...props}>
+      <Tooltip toolTipLabel="Configure">
+        <SvgConfigure />
+      </Tooltip>
+    </IconButton>
+  );
+};

package/packages/shared-components/src/Actions/DeleteAction.tsx

@@ -0,0 +1,16 @@
+import type { IconButtonProps } from "@mui/material";
+import { IconButton } from "@mui/material";
+import { SvgDelete } from "../Svgs/SvgDelete";
+import { Tooltip } from "../Tooltip";
+
+export type DeleteActionProps = IconButtonProps;
+
+export const DeleteAction = (props: DeleteActionProps) => {
+  return (
+    <IconButton {...props}>
+      <Tooltip toolTipLabel="Delete">
+        <SvgDelete />
+      </Tooltip>
+    </IconButton>
+  );
+};

package/packages/shared-components/src/Actions/DownloadAction.tsx

@@ -0,0 +1,16 @@
+import type { IconButtonProps } from "@mui/material";
+import { IconButton } from "@mui/material";
+import { SvgDownload } from "../Svgs";
+import { Tooltip } from "../Tooltip";
+
+export type DownloadActionProps = IconButtonProps;
+
+export const DownloadAction = (props: DownloadActionProps) => {
+  return (
+    <IconButton {...props}>
+      <Tooltip toolTipLabel="Download">
+        <SvgDownload />
+      </Tooltip>
+    </IconButton>
+  );
+};

package/packages/shared-components/src/Actions/EditAction.tsx

@@ -0,0 +1,16 @@
+import type { IconButtonProps } from "@mui/material";
+import { IconButton } from "@mui/material";
+import { SvgsEdit } from "../Svgs/SvgsEdit";
+import { Tooltip } from "../Tooltip";
+
+export type EditActionProps = IconButtonProps;
+
+export const EditAction = (props: EditActionProps) => {
+  return (
+    <IconButton {...props}>
+      <Tooltip toolTipLabel="Edit">
+        <SvgsEdit />
+      </Tooltip>
+    </IconButton>
+  );
+};

package/packages/shared-components/src/Actions/ExportAction.tsx

@@ -0,0 +1,16 @@
+import type { IconButtonProps } from "@mui/material";
+import { IconButton } from "@mui/material";
+import { SvgExport } from "../Svgs";
+import { Tooltip } from "../Tooltip";
+
+export type ExportActionProps = IconButtonProps;
+
+export const ExportAction = (props: ExportActionProps) => {
+  return (
+    <IconButton {...props}>
+      <Tooltip toolTipLabel="Export">
+        <SvgExport />
+      </Tooltip>
+    </IconButton>
+  );
+};

package/packages/shared-components/src/Actions/FilterAction.tsx

@@ -0,0 +1,16 @@
+import type { IconButtonProps } from "@mui/material";
+import { IconButton } from "@mui/material";
+import { SvgFilterList } from "../Svgs/SvgFilterList";
+import { Tooltip } from "../Tooltip";
+
+export type FilterActionProps = IconButtonProps;
+
+export const FilterAction = (props: FilterActionProps) => {
+  return (
+    <IconButton {...props}>
+      <Tooltip toolTipLabel="Filter">
+        <SvgFilterList />
+      </Tooltip>
+    </IconButton>
+  );
+};

package/packages/shared-components/src/Actions/HistoryAction.tsx

@@ -0,0 +1,16 @@
+import type { IconButtonProps } from "@mui/material";
+import { IconButton } from "@mui/material";
+import { SvgsHistory } from "../Svgs/SvgsHistory";
+import { Tooltip } from "../Tooltip";
+
+export type HistoryActionProps = IconButtonProps;
+
+export const HistoryAction = (props: HistoryActionProps) => {
+  return (
+    <IconButton {...props}>
+      <Tooltip toolTipLabel="History">
+        <SvgsHistory />
+      </Tooltip>
+    </IconButton>
+  );
+};

package/packages/shared-components/src/Actions/ImportAction.tsx

@@ -0,0 +1,16 @@
+import type { IconButtonProps } from "@mui/material";
+import { IconButton } from "@mui/material";
+import { SvgImport } from "../Svgs";
+import { Tooltip } from "../Tooltip";
+
+export type ImportActionProps = IconButtonProps;
+
+export const ImportAction = (props: ImportActionProps) => {
+  return (
+    <IconButton {...props}>
+      <Tooltip toolTipLabel="Import">
+        <SvgImport />
+      </Tooltip>
+    </IconButton>
+  );
+};

package/packages/shared-components/src/Actions/ViewAction.tsx

@@ -0,0 +1,16 @@
+import type { IconButtonProps } from "@mui/material";
+import { IconButton } from "@mui/material";
+import { SvgView } from "../Svgs";
+import { Tooltip } from "../Tooltip";
+
+export type ViewActionProps = IconButtonProps;
+
+export const ViewAction = (props: ViewActionProps) => {
+  return (
+    <IconButton {...props}>
+      <Tooltip toolTipLabel="View">
+        <SvgView />
+      </Tooltip>
+    </IconButton>
+  );
+};

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

@@ -0,0 +1,11 @@
+export * from "./AddAction";
+export * from "./CalendarAction";
+export * from "./ConfigureAction";
+export * from "./DeleteAction";
+export * from "./DownloadAction";
+export * from "./EditAction";
+export * from "./ExportAction";
+export * from "./FilterAction";
+export * from "./HistoryAction";
+export * from "./ImportAction";
+export * from "./ViewAction";

package/packages/shared-components/src/AgGrid/ActionCell/ActionCell.tsx

@@ -0,0 +1,57 @@
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import { Box, IconButton, ListItemButton, Stack } from "@mui/material";
+import { type MouseEvent, useState } from "react";
+import { PadBox } from "../../PadBox";
+import { Popover } from "./Popover";
+
+type AgGridActionColumn = {
+  title: string;
+  onClick: () => void;
+};
+
+type ActionColumnProps = {
+  items: AgGridActionColumn[];
+  disabled?: boolean;
+};
+export const ActionCell = ({ items, disabled }: ActionColumnProps) => {
+  const [anchorEl, setAnchorEl] = useState<HTMLDivElement | null>(null);
+
+  const HandleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const HandleClick = (event: MouseEvent<HTMLDivElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  return (
+    <Box sx={{ width: "100%" }}>
+      <IconButton
+        component="div"
+        sx={{ cursor: "pointer", alignItems: "center", width: "100%" }}
+        onClick={HandleClick}
+        disabled={disabled}
+      >
+        <MoreVertIcon />
+      </IconButton>
+      {!!anchorEl && (
+        <Popover open={true} anchorEl={anchorEl} onClose={HandleClose}>
+          <PadBox padding={{ padding: "2px" }}>
+            {items.map((item) => {
+              return (
+                <Stack key={item.title}>
+                  <ListItemButton
+                    sx={{ width: "100%", textAlign: "center" }}
+                    onClick={() => item?.onClick()}
+                  >
+                    {item.title}
+                  </ListItemButton>
+                </Stack>
+              );
+            })}
+          </PadBox>
+        </Popover>
+      )}
+    </Box>
+  );
+};

package/packages/shared-components/src/AgGrid/ActionCell/Popover.tsx

@@ -0,0 +1,32 @@
+import type { PopoverProps } from "@mui/material";
+import { Popover as MuiPopover } from "@mui/material";
+
+export const Popover = ({
+  open,
+  anchorEl,
+  children,
+  onClose,
+}: PopoverProps) => {
+  return (
+    <MuiPopover
+      open={open}
+      anchorEl={anchorEl}
+      onClose={onClose}
+      anchorOrigin={{
+        vertical: "bottom",
+        horizontal: "center",
+      }}
+      transformOrigin={{
+        vertical: "top",
+        horizontal: "right",
+      }}
+      sx={{
+        "& .MuiPaper-root": {
+          width: "auto",
+        },
+      }}
+    >
+      {children}
+    </MuiPopover>
+  );
+};

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

@@ -0,0 +1,93 @@
+import { Box, Typography, useTheme } from "@mui/material";
+import type { AgGridReactProps } from "ag-grid-react";
+import { AgGridReact } from "ag-grid-react";
+import type { Ref } from "react";
+import { forwardRef } from "react";
+
+export const defaultPageSize = 50;
+
+export const pageSizeOptions = [20, 50, 100, 200];
+
+//TODO: jaydip, fix unknown type
+export type AgGridProps<T = unknown> = AgGridReactProps<T> & {
+  height?: string;
+  ref?: Ref<AgGridReact<T>>;
+  totalRecords?: number;
+  overlayNoRowsTemplate?: string;
+};
+
+type AgGridType = React.ForwardRefExoticComponent<AgGridProps> &
+  (<GenericType>(props: AgGridProps<GenericType>) => JSX.Element);
+
+export const AgGrid = forwardRef(
+  <T,>(props: AgGridProps<T>, ref: Ref<AgGridReact<T>>) => {
+    const {
+      cacheBlockSize = defaultPageSize,
+      defaultColDef = {
+        flex: 1,
+        floatingFilter: false,
+        filterParams: {
+          buttons: ["apply", "reset"],
+          closeOnApply: true,
+          contains: false,
+        },
+      },
+      height = "597px",
+      rowHeight = 50,
+      rowModelType = "infinite",
+      rowBuffer = 5,
+      totalRecords,
+      // eslint-disable-next-line quotes
+      overlayNoRowsTemplate = '<span class="ag-overlay-no-rows-center">No Data Found</span>',
+      infiniteInitialRowCount = defaultPageSize,
+      pagination = false,
+      ...rest
+    } = props;
+
+    const {
+      palette: {
+        app: { color },
+      },
+    } = useTheme();
+
+    if (totalRecords === 0) {
+      return (
+        <Box
+          sx={{
+            borderRadius: "4px",
+            margin: "20px",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            height: "300px",
+            textAlign: "center",
+            backgroundColor: color.butterflyBlue[700],
+          }}
+        >
+          <Typography variant="h6">No result found</Typography>
+        </Box>
+      );
+    }
+
+    return (
+      <div className="ag-theme-quartz " style={{ width: "100%", height }}>
+        <AgGridReact<T>
+          ref={ref}
+          cacheBlockSize={cacheBlockSize}
+          defaultColDef={defaultColDef}
+          rowHeight={rowHeight}
+          rowModelType={rowModelType}
+          rowBuffer={rowBuffer}
+          infiniteInitialRowCount={infiniteInitialRowCount}
+          overlayNoRowsTemplate={overlayNoRowsTemplate}
+          pagination={pagination}
+          {...(pagination ? { paginationPageSize: defaultPageSize } : {})}
+          paginationPageSizeSelector={pagination ? pageSizeOptions : false}
+          {...rest}
+        />
+      </div>
+    );
+  }
+) as AgGridType;
+
+AgGrid.displayName = "AgGrid";

package/packages/shared-components/src/AgGrid/LoadingCell.tsx

@@ -0,0 +1,5 @@
+import { Skeleton } from "@mui/material";
+
+export const LoadingCell = () => {
+  return <Skeleton animation="pulse" width="100%" />;
+};

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

@@ -0,0 +1,3 @@
+export * from "./AgGrid";
+export * from "./LoadingCell";
+export * from "./ActionCell/ActionCell";

package/packages/shared-components/src/AppBar/AppBar.styled.tsx

@@ -0,0 +1,33 @@
+import { styled } from "@mui/material";
+import type { AppBarProps as MuiAppBarProps } from "@mui/material/AppBar";
+import MuiAppBar from "@mui/material/AppBar";
+import type { ComponentType } from "react";
+
+type StyledAppBarProps = {
+  open?: boolean;
+} & MuiAppBarProps;
+
+export const StyledAppBar: ComponentType<StyledAppBarProps> = styled(
+  MuiAppBar,
+  {
+    shouldForwardProp: (prop) => prop !== "open",
+  }
+)<StyledAppBarProps>(({ theme, open }) => ({
+  background: theme.palette.app.color.iron[600],
+  boxShadow: "unset",
+  zIndex: theme.zIndex.drawer + 1,
+  transition: theme.transitions.create(["width", "margin"], {
+    easing: theme.transitions.easing.sharp,
+    duration: theme.transitions.duration.leavingScreen,
+  }),
+  marginLeft: "80px",
+  width: "calc(100% - 80px)",
+  ...(open && {
+    marginLeft: "300px",
+    width: "calc(100% - 300px)",
+    transition: theme.transitions.create(["width", "margin"], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+  }),
+}));

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

@@ -0,0 +1,20 @@
+"use client";
+
+import { Toolbar } from "@mui/material";
+import type { PropsWithChildren } from "react";
+import { StyledAppBar } from "./AppBar.styled";
+
+export type AppBarProps = {
+  drawerOpen: boolean;
+};
+
+export const AppBar = ({
+  drawerOpen,
+  children,
+}: PropsWithChildren<AppBarProps>) => {
+  return (
+    <StyledAppBar position="fixed" open={drawerOpen}>
+      <Toolbar>{children}</Toolbar>
+    </StyledAppBar>
+  );
+};

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

@@ -0,0 +1 @@
+export { AppBar } from "./AppBar";

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";