@codezee/sixtify-brahma 0.1.1

package/packages/shared-components/src/Svgs/SvgsEdit.tsx

@@ -0,0 +1,42 @@
+import type { SvgIconProps } from "@mui/material";
+
+export const SvgsEdit = (props: SvgIconProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={30}
+      height={30}
+      fill="none"
+      {...props}
+    >
+      <path
+        fill="#fff"
+        stroke="#DBE1E6"
+        d="M.5 4A3.5 3.5 0 0 1 4 .5h22A3.5 3.5 0 0 1 29.5 4v22a3.5 3.5 0 0 1-3.5 3.5H4A3.5 3.5 0 0 1 .5 26V4Z"
+      />
+      <path
+        stroke="#4C5D70"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.565}
+        d="M14.457 8.836h-1.25c-3.125 0-4.375 1.25-4.375 4.375v3.75c0 3.125 1.25 4.375 4.375 4.375h3.75c3.125 0 4.375-1.25 4.375-4.375v-1.25"
+      />
+      <path
+        stroke="#4C5D70"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.565}
+        d="M17.608 9.474 12.683 14.4a1.695 1.695 0 0 0-.413.825l-.269 1.881c-.1.682.382 1.157 1.063 1.063l1.881-.269a1.75 1.75 0 0 0 .825-.412l4.925-4.925c.85-.85 1.25-1.838 0-3.088s-2.237-.85-3.087 0Z"
+      />
+      <path
+        stroke="#4C5D70"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.565}
+        d="M16.898 10.18a4.465 4.465 0 0 0 3.088 3.087"
+      />
+    </svg>
+  );
+};

package/packages/shared-components/src/Svgs/SvgsHistory.tsx

@@ -0,0 +1,40 @@
+import type { SvgIconProps } from "@mui/material";
+
+export const SvgsHistory = (props: SvgIconProps) => {
+  return (
+    <svg
+      width="30"
+      height="30"
+      viewBox="0 0 30 30"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M0.5 4C0.5 2.067 2.067 0.5 4 0.5H26C27.933 0.5 29.5 2.067 29.5 4V26C29.5 27.933 27.933 29.5 26 29.5H4C2.067 29.5 0.5 27.933 0.5 26V4Z"
+        fill="white"
+        stroke="#DBE1E6"
+      />
+      <g clipPath="url(#clip0_22174_76909)">
+        <path
+          d="M15.687 8.125C14.1756 8.13236 12.7094 8.64089 11.5179 9.57092C10.3265 10.501 9.4773 11.7999 9.1033 13.2644L8.6458 12.5725C8.60248 12.5001 8.54495 12.4372 8.47667 12.3876C8.40838 12.338 8.33076 12.3027 8.24848 12.2839C8.1662 12.2651 8.08097 12.2632 7.99792 12.2783C7.91488 12.2933 7.83575 12.325 7.76529 12.3715C7.69484 12.418 7.63452 12.4782 7.58798 12.5486C7.54144 12.619 7.50965 12.6981 7.49451 12.7811C7.47937 12.8642 7.48121 12.9494 7.4999 13.0317C7.5186 13.114 7.55377 13.1917 7.6033 13.26L8.9783 15.3438C9.07381 15.4774 9.21463 15.5718 9.37455 15.6094C9.53784 15.6418 9.70733 15.6093 9.84705 15.5188L11.9095 14.1294C11.9807 14.085 12.0421 14.0267 12.0902 13.9581C12.1384 13.8894 12.1722 13.8118 12.1897 13.7298C12.2072 13.6478 12.2081 13.5631 12.1922 13.4808C12.1763 13.3985 12.144 13.3202 12.0972 13.2506C12.0505 13.181 11.9902 13.1216 11.9199 13.0758C11.8497 13.03 11.771 12.9988 11.6885 12.984C11.6059 12.9693 11.5213 12.9713 11.4395 12.9899C11.3578 13.0085 11.2806 13.0434 11.2127 13.0925L10.2745 13.725C10.5242 12.7115 11.0538 11.7886 11.8027 11.0615C12.5517 10.3345 13.4899 9.83264 14.5104 9.6132C15.5309 9.39375 16.5925 9.46557 17.5741 9.82045C18.5558 10.1753 19.4179 10.799 20.0621 11.6203C20.7063 12.4416 21.1067 13.4274 21.2176 14.4653C21.3285 15.5032 21.1455 16.5514 20.6893 17.4902C20.2332 18.4291 19.5223 19.2208 18.6378 19.7751C17.7533 20.3294 16.7309 20.6239 15.687 20.625C14.7923 20.6226 13.9113 20.4042 13.119 19.9883C12.3267 19.5724 11.6466 18.9713 11.1364 18.2363C11.0907 18.1661 11.0314 18.1058 10.962 18.059C10.8925 18.0122 10.8144 17.9799 10.7322 17.9639C10.65 17.9478 10.5655 17.9485 10.4836 17.9658C10.4016 17.9831 10.324 18.0167 10.2553 18.0646C10.1866 18.1124 10.1283 18.1736 10.0837 18.2445C10.0391 18.3154 10.0092 18.3945 9.99577 18.4771C9.98235 18.5598 9.98567 18.6443 10.0055 18.7256C10.0254 18.807 10.0614 18.8835 10.1114 18.9506C10.9408 20.1464 12.1319 21.0445 13.5097 21.513C14.8874 21.9816 16.3791 21.9959 17.7656 21.5537C19.152 21.1116 20.36 20.2364 21.2122 19.0567C22.0643 17.877 22.5155 16.4551 22.4995 15C22.5057 13.1856 21.7919 11.4428 20.5148 10.1539C19.2377 8.86508 17.5015 8.13542 15.687 8.125Z"
+          fill="#4C5D70"
+        />
+        <path
+          d="M15.625 11.2188C15.4592 11.2188 15.3003 11.2846 15.1831 11.4018C15.0658 11.519 15 11.678 15 11.8438V15C15.0027 15.1652 15.0681 15.3232 15.1831 15.4419L17.0581 17.3338C17.1758 17.4496 17.334 17.5148 17.4991 17.5156C17.6642 17.5165 17.8231 17.4528 17.9419 17.3381C18.0595 17.2214 18.126 17.0628 18.1267 16.897C18.1274 16.7313 18.0623 16.5721 17.9456 16.4544L16.25 14.7431V11.8438C16.25 11.678 16.1842 11.519 16.0669 11.4018C15.9497 11.2846 15.7908 11.2188 15.625 11.2188Z"
+          fill="#4C5D70"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_22174_76909">
+          <rect
+            width="15"
+            height="15"
+            fill="white"
+            transform="translate(7.5 7.5)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

package/packages/shared-components/src/Svgs/SvgsHome.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+export const SvgsHome = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={20}
+    height={20}
+    fill="none"
+    {...props}
+    style={{ color: "inherit" }}
+  >
+    <path
+      fill={props.fill ?? "currentColor"}
+      d="m17.901 6.46-5.925-4.67A3.16 3.16 0 0 0 10 1.11a3.16 3.16 0 0 0-1.975.679L2.099 6.46a2.697 2.697 0 0 0-.734.907c-.17.346-.257.72-.254 1.099v7.76c0 .706.313 1.384.868 1.883.556.5 1.31.78 2.095.78h11.852c.786 0 1.54-.28 2.095-.78.556-.5.868-1.177.868-1.883V8.457a2.436 2.436 0 0 0-.255-1.094 2.696 2.696 0 0 0-.733-.903Zm-5.925 10.653H8.024v-4.439c0-.235.104-.461.29-.627.184-.167.436-.26.698-.26h1.975c.262 0 .513.093.698.26.185.166.29.392.29.627v4.44Zm4.938-.887a.845.845 0 0 1-.29.627c-.185.167-.436.26-.698.26h-1.975v-4.439c0-.706-.312-1.383-.868-1.883a3.14 3.14 0 0 0-2.095-.78H9.013c-.786 0-1.54.28-2.096.78-.555.5-.867 1.177-.867 1.883v4.44H4.074c-.262 0-.513-.094-.698-.26a.845.845 0 0 1-.29-.628V8.457c0-.126.03-.25.089-.365a.901.901 0 0 1 .248-.3L9.348 3.13c.18-.142.412-.22.652-.22.24 0 .472.078.652.22l5.926 4.661c.105.083.19.186.248.3.058.116.088.24.088.366v7.769Z"
+    />
+  </svg>
+);

package/packages/shared-components/src/Svgs/SvgsIndicator.tsx

@@ -0,0 +1,20 @@
+import { getColorByVariant, type WorkDayType } from "../utils/colorVariant";
+
+type SvgsIndicatorIconProps = {
+  variant: WorkDayType;
+};
+export const SvgsIndicator = ({ variant }: SvgsIndicatorIconProps) => {
+  const color = getColorByVariant(variant);
+
+  return (
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 10 10"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="5" cy="5" r="5" fill={color} />
+    </svg>
+  );
+};

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

@@ -0,0 +1,12 @@
+export * from "./Company";
+export * from "./Drawer";
+export * from "./FormAction";
+export * from "./LogoIcon";
+export * from "./SvgCalendar";
+export * from "./SvgDelete";
+export * from "./SvgDownload";
+export * from "./SvgNoLogo";
+export * from "./SvgNoSign";
+export * from "./SvgsDrop";
+export * from "./SvgsHome";
+export * from "./SvgAdd";

package/packages/shared-components/src/Tab/Skeleton.tsx

@@ -0,0 +1,15 @@
+import { Skeleton as MuiSkeleton, Stack } from "@mui/material";
+
+export const Skeleton = () => {
+  return (
+    <Stack gap="10px">
+      <MuiSkeleton
+        width={200}
+        height="30px"
+        sx={{
+          transform: "scale(1)",
+        }}
+      />
+    </Stack>
+  );
+};

package/packages/shared-components/src/Tab/Tabs.tsx

@@ -0,0 +1,64 @@
+import HelpOutlineOutlinedIcon from "@mui/icons-material/HelpOutlineOutlined";
+import { Tabs as MuiTabs, Stack } from "@mui/material";
+import type { TabOwnProps } from "@mui/material/Tab";
+import Tab from "@mui/material/Tab";
+import type { ReactElement } from "react";
+import { v4 as uuidv4 } from "uuid";
+import { Tooltip } from "../Tooltip";
+import { Skeleton } from "./Skeleton";
+
+export type TabsItems = {
+  value: string;
+  label: string;
+  icon?: ReactElement;
+  toolTipLabel?: string;
+  iconPosition?: TabOwnProps["iconPosition"];
+  onClick: () => void;
+};
+
+type TabsProps = {
+  tabs: TabsItems[];
+  value: string;
+  loading?: boolean;
+};
+
+export const Tabs = ({ tabs, value, loading }: TabsProps) => {
+  if (loading) {
+    return (
+      <Stack gap="10px" direction="row">
+        {tabs.map(() => {
+          return <Skeleton key={uuidv4()} />;
+        })}
+      </Stack>
+    );
+  }
+
+  return (
+    <MuiTabs value={value}>
+      {tabs.map(
+        ({
+          iconPosition = "end",
+          toolTipLabel = "",
+          icon = <HelpOutlineOutlinedIcon color="secondary" />,
+          ...rest
+        }) => (
+          <Tab
+            key={uuidv4()}
+            icon={
+              toolTipLabel ? (
+                <Tooltip toolTipLabel={toolTipLabel} placement="bottom">
+                  {icon}
+                </Tooltip>
+              ) : (
+                icon
+              )
+            }
+            disabled={loading}
+            iconPosition={iconPosition}
+            {...rest}
+          />
+        )
+      )}
+    </MuiTabs>
+  );
+};

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

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

package/packages/shared-components/src/Timeline/AttendanceStatus.tsx

@@ -0,0 +1,56 @@
+import { Box, Slider, Stack } from "@mui/material";
+import {
+  getColorByVariant,
+  getStatusLabel,
+  type WorkDayType,
+} from "../utils/colorVariant";
+
+type AttendanceStatusProps = {
+  variant: WorkDayType;
+};
+
+export const AttendanceStatus = ({ variant }: AttendanceStatusProps) => {
+  const color = getColorByVariant(variant);
+
+  return (
+    <Stack sx={{ position: "relative", width: "100%", alignItems: "center" }}>
+      <Box
+        sx={{
+          position: "absolute",
+          backgroundColor: "#ffffff",
+          border: `1px solid ${color}`,
+          borderRadius: "7px",
+          padding: "0px 5px",
+          zIndex: 1,
+          color: `${color}`,
+          height: "28px",
+          display: "flex",
+          alignItems: "center",
+        }}
+      >
+        {getStatusLabel(variant)}
+      </Box>
+      <Slider
+        valueLabelDisplay="off"
+        value={[0, 2]}
+        max={2}
+        step={1}
+        sx={{
+          "& .MuiSlider-track": {
+            background: `${color}`,
+            height: "2px",
+            border: "none",
+          },
+          "& .MuiSlider-thumb": {
+            backgroundColor: `${color}`,
+            height: 8,
+            width: 8,
+          },
+          "& .MuiSlider-rail": {
+            backgroundColor: "transparent",
+          },
+        }}
+      />
+    </Stack>
+  );
+};

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

@@ -0,0 +1,171 @@
+import { Box, Slider, Stack, Tooltip } from "@mui/material";
+import React from "react";
+import { TimelineTrackSegments } from "./TimelineTrackSegments";
+import { type WorkDayType } from "../utils/colorVariant";
+import { getTimeInHHmm } from "../utils/date";
+import { ArrowUp } from "../Svgs/ArrowUp";
+import { DateTime } from "luxon";
+
+export type HighlightedInterval = {
+  in_time: string;
+  out_time: string;
+  status_type: WorkDayType;
+};
+
+type TimelineProps = {
+  totalDots: number;
+  highlightedIntervals: HighlightedInterval[];
+  startTimeline: string;
+  shiftStartTime: string;
+  shiftEndTime: string;
+};
+
+export const getArrowValue = (date: string) => {
+  const time = DateTime.fromFormat(date, "HH:mm");
+
+  const hour = time.hour;
+
+  const minute = time.minute;
+
+  return hour + minute / 60;
+};
+
+export const Timeline = ({
+  totalDots,
+  highlightedIntervals,
+  shiftStartTime,
+  shiftEndTime,
+  startTimeline = "2024-11-17T18:30:04.000Z",
+}: TimelineProps) => {
+  const slotStartTime = parseFloat(getTimeInHHmm(startTimeline));
+
+  const getArrowPosition = (
+    shiftStartTime: string,
+    shiftEndTime: string,
+    type: "END" | "START"
+  ) => {
+    const shiftStart = getTimeInHHmm(shiftStartTime);
+
+    const shiftEnd = getTimeInHHmm(shiftEndTime);
+
+    let shiftStartValue = getArrowValue(shiftStart);
+
+    let shiftEndValue = getArrowValue(shiftEnd);
+
+    shiftStartValue =
+      shiftStartValue < slotStartTime
+        ? shiftStartValue + totalDots
+        : shiftStartValue;
+
+    shiftEndValue =
+      shiftEndValue < shiftStartValue
+        ? shiftEndValue + totalDots
+        : shiftEndValue;
+
+    return type === "END" ? shiftEndValue : shiftStartValue;
+  };
+
+  const isHighlighted = (index: number) => {
+    const wrappedValue = (index + slotStartTime) % totalDots;
+
+    return highlightedIntervals.some(
+      (interval) =>
+        wrappedValue >= parseFloat(getTimeInHHmm(interval.in_time)) &&
+        wrappedValue <= parseFloat(getTimeInHHmm(interval.out_time))
+    );
+  };
+
+  const marks = Array.from({ length: totalDots }, (_, index) => ({
+    value: (index + slotStartTime) % totalDots,
+    label: "",
+    highlighted: isHighlighted((index + slotStartTime) % totalDots),
+  }));
+
+  return (
+    <Stack sx={{ position: "relative", width: "100%" }}>
+      <TimelineTrackSegments
+        totalDots={totalDots}
+        intervals={highlightedIntervals}
+        startTimeline={slotStartTime}
+      />
+      <Tooltip
+        title={`Shift Start: ${getTimeInHHmm(shiftStartTime)}`}
+        arrow
+        placement="top"
+      >
+        <Box
+          sx={{
+            cursor: "pointer",
+            position: "absolute",
+            top: "12px",
+            zIndex: 2,
+            left: `${(((getArrowPosition(shiftStartTime, shiftEndTime, "START") - slotStartTime) % totalDots) / (totalDots - 1)) * 100}%`,
+          }}
+        >
+          <ArrowUp />
+        </Box>
+      </Tooltip>
+      <Tooltip
+        title={`Shift End: ${getTimeInHHmm(shiftEndTime)}`}
+        arrow
+        placement="top"
+      >
+        <Box
+          sx={{
+            cursor: "pointer",
+            position: "absolute",
+            top: "12px",
+            zIndex: 2,
+            left: `${(((getArrowPosition(shiftStartTime, shiftEndTime, "END") - slotStartTime) % totalDots) / (totalDots - 1)) * 100}%`,
+          }}
+        >
+          <ArrowUp />
+        </Box>
+      </Tooltip>
+      <Slider
+        valueLabelDisplay="off"
+        marks={marks}
+        max={totalDots - 1}
+        step={1}
+        value={highlightedIntervals
+          .map((interval) => [
+            (parseFloat(getTimeInHHmm(interval.in_time)) -
+              slotStartTime +
+              totalDots) %
+              totalDots,
+            (parseFloat(getTimeInHHmm(interval.out_time)) -
+              slotStartTime +
+              totalDots) %
+              totalDots,
+          ])
+          .flat()}
+        sx={{
+          zIndex: 1,
+          "& .MuiSlider-track": {
+            background: "transparent",
+            height: 1,
+            border: "none",
+          },
+          "& .MuiSlider-mark": {
+            backgroundColor: "gray",
+            height: 4,
+            width: 4,
+            borderRadius: "50%",
+          },
+          "& .MuiSlider-markActive": {
+            backgroundColor: "transparent",
+            height: 5,
+            width: 5,
+          },
+          "& .MuiSlider-rail": {
+            height: 2,
+            backgroundColor: "#929292",
+          },
+          "& .MuiSlider-thumb": {
+            display: "none",
+          },
+        }}
+      />
+    </Stack>
+  );
+};

package/packages/shared-components/src/Timeline/TimelineTrackSegments.tsx

@@ -0,0 +1,121 @@
+import { Box, Stack, Tooltip } from "@mui/material";
+import { getColorByVariant } from "../utils/colorVariant";
+import { getArrowValue, type HighlightedInterval } from "./Timeline";
+import { getTimeInHHmm } from "../utils/date";
+
+type TimelineTrackSegmentsProps = {
+  totalDots: number;
+  intervals: HighlightedInterval[];
+  startTimeline: number;
+};
+
+export const TimelineTrackSegments = ({
+  totalDots,
+  intervals,
+  startTimeline,
+}: TimelineTrackSegmentsProps) => {
+  return (
+    <Box sx={{ position: "relative", width: "100%", height: 4 }}>
+      {intervals?.map((interval, index) => {
+        const inTime = getTimeInHHmm(interval.in_time);
+
+        const outTime = getTimeInHHmm(interval.out_time);
+
+        let in_time = getArrowValue(inTime);
+
+        in_time = in_time < startTimeline ? in_time + totalDots : in_time;
+
+        let out_time = getArrowValue(outTime);
+
+        out_time = out_time < in_time ? out_time + totalDots : out_time;
+
+        const isValidInTime = !isNaN(in_time);
+
+        const isValidOutTime = !isNaN(out_time);
+
+        let inTimeLabel = "";
+
+        let outTimeLabel = "";
+
+        if (isValidInTime) {
+          inTimeLabel = `In time : ${inTime} ${!isValidOutTime ? " / Missing punch" : ""}`;
+        }
+
+        if (isValidOutTime) {
+          outTimeLabel = `Out time : ${outTime}  ${!isValidInTime ? "/ Missing punch" : ""}`;
+        }
+
+        const startPercent =
+          (((in_time - startTimeline) % totalDots) / (totalDots - 1)) * 100;
+
+        const endPercent =
+          (((out_time - startTimeline) % totalDots) / (totalDots - 1)) * 100;
+
+        const labelText = `In/Out: ${getTimeInHHmm(interval.in_time)} - ${getTimeInHHmm(
+          interval.out_time
+        )}`;
+
+        const color = getColorByVariant(interval.status_type);
+
+        return (
+          // eslint-disable-next-line sonarjs/no-array-index-key
+          <Stack direction="row" key={index}>
+            {isValidInTime && (
+              <Tooltip arrow title={inTimeLabel} placement="top">
+                <Box
+                  sx={{
+                    height: 8,
+                    width: 8,
+                    position: "absolute",
+                    left: `${startPercent}%`,
+                    boxShadow: "none",
+                    backgroundColor: color,
+                    borderRadius: "50%",
+                    top: "15px",
+                    zIndex: 3,
+                    "&:focus, &:hover, &:active": {
+                      boxShadow: "none",
+                    },
+                  }}
+                />
+              </Tooltip>
+            )}
+            <Tooltip arrow title={labelText} placement="top">
+              <Box
+                sx={{
+                  position: "absolute",
+                  left: `${startPercent}%`,
+                  width: `${endPercent - startPercent}%`,
+                  height: 3.5,
+                  top: "17.5px",
+                  backgroundColor: color,
+                  zIndex: 2,
+                }}
+              />
+            </Tooltip>
+            {isValidOutTime && (
+              <Tooltip arrow title={outTimeLabel} placement="top">
+                <Box
+                  sx={{
+                    height: 8,
+                    width: 8,
+                    position: "absolute",
+                    right: `${100 - endPercent}%`,
+                    boxShadow: "none",
+                    backgroundColor: color,
+                    borderRadius: "50%",
+                    top: "15px",
+                    zIndex: 3,
+                    "&:focus, &:hover, &:active": {
+                      boxShadow: "none",
+                    },
+                  }}
+                />
+              </Tooltip>
+            )}
+          </Stack>
+        );
+      })}
+    </Box>
+  );
+};

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

@@ -0,0 +1,2 @@
+export * from "./AttendanceStatus";
+export * from "./Timeline";

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

@@ -0,0 +1,59 @@
+import {
+  AddCircleOutline,
+  CheckCircleOutline,
+  Close,
+  ErrorOutline,
+  HighlightOff,
+} from "@mui/icons-material";
+import { IconButton, Stack } from "@mui/material";
+import type { ReactNode } from "react";
+import { PadBox } from "../PadBox";
+import type { ToastBodyProps } from "./ToastBody";
+import { ToastBody } from "./ToastBody";
+import type { ToastFooterLinkProps } from "./ToastFooterLink";
+import { ToastFooterLink } from "./ToastFooterLink";
+import type { ToastType } from "./types";
+
+export type ToastProps = ToastBodyProps &
+  ToastFooterLinkProps & {
+    closeToast?: () => void;
+    type: ToastType;
+  };
+
+type ToastIcon = {
+  [K in ToastType]: ReactNode;
+};
+
+export const Toast = ({
+  closeToast,
+  type,
+  title,
+  description,
+  href,
+  linkText,
+}: ToastProps) => {
+  const toastIcons: ToastIcon = {
+    info: <AddCircleOutline color="info" fontSize="large" />,
+    success: <CheckCircleOutline color="success" fontSize="large" />,
+    warning: <ErrorOutline color="warning" fontSize="large" />,
+    error: <HighlightOff color="error" fontSize="large" />,
+  };
+
+  return (
+    <PadBox padding={{ p: "20px", pl: "16px" }}>
+      <Stack direction="row" gap="16px" alignItems="center">
+        {toastIcons[type]}
+
+        <Stack alignItems="flex-start" gap="1.2rem" flexGrow={1}>
+          <ToastBody title={title} description={description} />
+
+          {href && <ToastFooterLink href={href} linkText={linkText} />}
+        </Stack>
+
+        <IconButton onClick={closeToast} disableRipple>
+          <Close />
+        </IconButton>
+      </Stack>
+    </PadBox>
+  );
+};

package/packages/shared-components/src/Toast/ToastBody.tsx

@@ -0,0 +1,26 @@
+import { Stack, Typography, useTheme } from "@mui/material";
+import type { ToastBody as ToastBodyType } from "./types";
+
+export type ToastBodyProps = Readonly<ToastBodyType>;
+
+export function ToastBody({ title, description }: ToastBodyProps) {
+  const {
+    palette: {
+      app: { color },
+    },
+  } = useTheme();
+
+  return (
+    <Stack gap="4px">
+      <Typography fontWeight={500} color="black" variant="body1">
+        {title}
+      </Typography>
+
+      {description && (
+        <Typography color={color.slate[900]} variant="body2">
+          {description}
+        </Typography>
+      )}
+    </Stack>
+  );
+}

package/packages/shared-components/src/Toast/ToastFooterLink.tsx

@@ -0,0 +1,19 @@
+import { Link, Typography } from "@mui/material";
+import { HoverBox } from "./Toaster.styled";
+import type { ToastLink } from "./types";
+
+export type ToastFooterLinkProps = Readonly<ToastLink>;
+
+export function ToastFooterLink({ href, linkText }: ToastFooterLinkProps) {
+  return (
+    <Link
+      href={href}
+      underline="none"
+      target={href?.startsWith("http") ? "_blank" : "_self"}
+    >
+      <HoverBox>
+        <Typography>{linkText ?? href}</Typography>
+      </HoverBox>
+    </Link>
+  );
+}