ctms-common-components 1.0.1

package/src/components/button.css

@@ -0,0 +1,50 @@
+.storybook-button {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: 700;
+  border-radius: 4em;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1;
+  transition: all 0.3s ease;
+}
+
+/* GOLD FILLED */
+.storybook-button--primary {
+  color: #6b0f1a; /* Maroon text */
+  background-color: #d4af37; /* Gold */
+  border: 2px solid #d4af37;
+}
+
+/* GOLD OUTLINE */
+.storybook-button--secondary {
+  color: #6b0f1a; /* Maroon text */
+  background-color: transparent;
+  border: 2px solid #d4af37; /* Gold border */
+}
+
+/* Hover Effects */
+.storybook-button--primary:hover {
+  background-color: #c19b2e;
+  border-color: #c19b2e;
+}
+
+.storybook-button--secondary:hover {
+  background-color: #d4af37;
+  color: #6b0f1a;
+}
+
+/* Sizes */
+.storybook-button--small {
+  font-size: 12px;
+  padding: 10px 16px;
+}
+
+.storybook-button--medium {
+  font-size: 14px;
+  padding: 11px 20px;
+}
+
+.storybook-button--large {
+  font-size: 16px;
+  padding: 12px 24px;
+}

package/src/components/custom-Table/AdvancedTableBody.jsx

@@ -0,0 +1,186 @@
+/* eslint-disable no-nested-ternary */
+/* eslint-disable react/no-array-index-key */
+import React from 'react';
+import {
+
+  TableRow as Tr,
+
+  TableCell as Td,
+
+  Typography as Text,
+
+  Checkbox,
+
+  Radio,
+
+  TableBody as Tbody,
+
+  Button
+
+} from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+
+import RemoveIcon from '@mui/icons-material/Remove';
+import EllipsisCell from './EllipsisCell';
+import MoreActions from '../more-actions';
+
+const AdvancedTableBody = ({
+  paginatedData = [],
+  columns = [],
+  checkedItems = [],
+  handleIndividualCheck = () => {},
+  handleRadioSelect = () => {},
+  radioSelected = () => false,
+  rowDisabled = [],
+  rowDisabledOptionKey = '',
+  rowValues = () => {},
+  onRowClick = () => {},
+  columnWidths = {},
+  expandedRows = [],
+  setExpandedRows = () => {}
+}) => {
+  const toggleRow = (id) => {
+    if (expandedRows.includes(id)) {
+      setExpandedRows(expandedRows.filter((rowId) => rowId !== id));
+    } else {
+      setExpandedRows([...expandedRows, id]);
+    }
+  };
+  return (
+    <Tbody>
+      {paginatedData.length === 0 ? (
+        <Tr>
+          <Td colSpan={columns.length}>
+            <Text align="center" py={4}>No Data Found</Text>
+          </Td>
+        </Tr>
+      ) : (
+        paginatedData.map((row, index) => (
+          <Tr
+              key={row.id || `row-${index}`}
+              onClick={() => onRowClick({ row, index })}
+              hover={!!onRowClick}
+              sx={{
+                cursor: onRowClick ? 'pointer' : 'default',
+                backgroundColor: checkedItems[index]
+                  ? '#E8F5E9'
+                  : index % 2 === 0
+                    ? '#F9FAFB'
+                    : '#FFFFFF',
+
+                '& td': {
+                  borderBottom: '1px solid #E5E7EB'
+                }
+              }}
+            >
+            {columns.map((col, columnIndex) => {
+              const value = row[col.field];
+              const columnKey = `${index}-${columnIndex}`;
+
+              if (col.type === 'multi-select' || col.type === 'select') {
+                const isDisabled = rowDisabled.some(
+                  (item) => item[rowDisabledOptionKey] === row[rowDisabledOptionKey]
+                ) && checkedItems[index];
+                return (
+                  <Td
+                      key={columnKey}
+                      align={col.alignment || 'center'}
+                      sx={{
+                        py: 1.5,
+                        px: 2
+                      }}
+                    >
+                    <Checkbox
+                      checked={checkedItems[index]}
+                      onChange={(e) => handleIndividualCheck(e, index, row)}
+                      disabled={isDisabled}
+                      size="small"
+                    />
+                  </Td>
+                );
+              }
+
+              if (col.type === 'radio') {
+                return (
+                  <Td
+                  key={columnKey}
+                  align={col.alignment || 'center'}
+                  sx={{
+                    py: 1.5,
+                    px: 2
+                  }}
+                  >
+                    <Radio
+                      value={index}
+                      checked={radioSelected(row)}
+                      onClick={() => handleRadioSelect(row)}
+                      size="small"
+                    />
+                  </Td>
+                );
+              }
+
+              if (col.type === 'actions') {
+                return (
+                  <Td
+                    key={columnKey}
+                    align={col.alignment}
+                    onClick={(e) => rowValues(e, row)}
+                  >
+                    <MoreActions actionData={col.actions} rowData={row} />
+                  </Td>
+                );
+              }
+              if (col.type === 'isExpandable') {
+                return (
+                  <Td
+                    key={columnKey}
+                    align={col.alignment}
+                    onClick={(e) => rowValues(e, row)}
+                  >
+                    <Button
+                      variant="text"
+
+                      size="small"
+
+                      onClick={() => toggleRow(row.id)}
+
+                      sx={{
+
+                        minWidth: 'auto',
+
+                        p: 0.5
+
+                      }}
+                    >
+                      {expandedRows.includes(row.id) ? (
+                        <RemoveIcon variant="ghost"  />
+                      ) : (
+                        <AddIcon color="pink.500"  />
+                      )}
+                    </Button>
+                  </Td>
+                );
+              }
+
+              return (
+                <EllipsisCell
+                  columnKey={columnKey}
+                  col={col}
+                  value={value}
+                  row={row}
+                  rowIndex={index}
+                  columnIndex={columnIndex}
+                  maxWidth={columnWidths[col.field] || 160}
+                  expandedRows={expandedRows}
+                />
+              );
+            })}
+          </Tr>
+        ))
+      )}
+    </Tbody>
+  );
+};
+
+export default AdvancedTableBody;

package/src/components/custom-Table/AdvancedTableHead.jsx

@@ -0,0 +1,315 @@
+/* eslint-disable no-return-assign */
+/* eslint-disable no-param-reassign */
+
+import React from 'react';
+
+import {
+  Table,
+  TableHead,
+  TableRow,
+  TableCell,
+  Checkbox,
+  Typography,
+  Box,
+  InputBase,
+  IconButton
+} from '@mui/material';
+
+
+const AdvancedTableHead = ({
+  tableSize,
+  columns,
+  columnWidths,
+  checkedItems,
+  handleAllCheck,
+  sortConfig,
+  handleSort,
+  filterValues,
+  setFilterValues,
+  onFilterInput,
+  headerRefs
+}) => {
+  return (
+
+      <TableHead>
+        <TableRow>
+          {columns.map((col) => {
+            const isSortedAsc =
+              sortConfig.field === col.field &&
+              sortConfig.direction === 'asc';
+
+            const isSortedDesc =
+              sortConfig.field === col.field &&
+              sortConfig.direction === 'desc';
+
+            return (
+              <TableCell
+                key={col.field}
+                ref={(el) => (headerRefs.current[col.field] = el)}
+                align={col.alignment || 'center'}
+                sx={{
+                  backgroundColor: '#edeef0',
+                  color: '#fff',
+                  px: 2,
+                  py: 1.5,
+                  borderBottom: 'none',
+
+                  maxWidth: columnWidths[col.field] || col.width ,
+                  '&:first-of-type': {
+                    borderTopLeftRadius: 10
+                  },
+                  '&:last-child': {
+                    borderTopRightRadius: 10
+                  }
+                }}
+              >
+                <Box
+                  display="flex"
+                  flexDirection="column"
+                  alignItems="center"
+                  gap={1}
+                  width="100%"
+                >
+                  {/* Header */}
+                  <Box
+                    display="flex"
+                    alignItems="center"
+                    justifyContent={
+                      col.alignment === 'right'
+                        ? 'flex-end'
+                        : col.alignment === 'left'
+                          ? 'flex-start'
+                          : 'center'
+                    }
+                    gap={0.5}
+                    width="100%"
+                  >
+                    {col.type === 'multi-select' ? (
+                      <Checkbox
+                        checked={
+                          checkedItems.length > 0 &&
+                          checkedItems.every(Boolean)
+                        }
+                        indeterminate={
+                          checkedItems.some(Boolean) &&
+                          !checkedItems.every(Boolean)
+                        }
+                        onChange={handleAllCheck}
+                        size="small"
+                        sx={{
+                          color: '#404040',
+                          p: 0.5,
+                          '&.Mui-checked': {
+                            color: '#FFD54F'
+                          },
+                          '&.MuiCheckbox-indeterminate': {
+                            color: '#FFD54F'
+                          }
+                        }}
+                      />
+                    ) : (
+                      <Typography
+                        variant="subtitle2"
+                        noWrap
+                        sx={{
+                          fontWeight: 400,
+                          color: '#404040',
+
+                        }}
+                      >
+                        {col.header}
+                      </Typography>
+                    )}
+
+                    {/* Sort */}
+                    {/* {col.sort && (
+                      <Box
+                        onClick={() => handleSort(col.field)}
+                        sx={{
+                          display: 'flex',
+                          flexDirection: 'column',
+                          cursor: 'pointer',
+                          ml: 0.5
+                        }}
+                      >
+                        <KeyboardArrowUpRoundedIcon
+                          sx={{
+                            fontSize: 16,
+                            color: isSortedAsc
+                              ? '#FFD54F'
+                              : 'rgba(255,255,255,0.7)',
+                            mb: -0.8
+                          }}
+                        />
+
+                        <KeyboardArrowDownRoundedIcon
+                          sx={{
+                            fontSize: 16,
+                            color: isSortedDesc
+                              ? '#FFD54F'
+                              : 'rgba(255,255,255,0.7)'
+                          }}
+                        />
+                      </Box>
+                    )} */}
+                  </Box>
+
+                  {/* Filter */}
+                  <Box width="100%">
+                    {!filterValues[col.field]?.visible ? (
+                      <Box display="flex" justifyContent="center">
+                        <IconButton
+                          size="small"
+                          onClick={() =>
+                            setFilterValues((prev) => ({
+                              ...prev,
+                              [col.field]: {
+                                type: col.filterType || 'text',
+                                value: '',
+                                visible: true
+                              }
+                            }))
+                          }
+                          sx={{
+                            color: 'rgba(255,255,255,0.85)',
+                            p: 0.5,
+                            '&:hover': {
+                              backgroundColor: 'rgba(255,255,255,0.12)'
+                            }
+                          }}
+                        >
+                          {/* {col.filterType === 'date' ? (
+                            <CalendarTodayOutlinedIcon fontSize="small" />
+                          ) : col.filterType === 'select' ? (
+                            <KeyboardArrowDownRoundedIcon fontSize="small" />
+                          ) : (
+                            <SearchRoundedIcon fontSize="small" />
+                          )} */}
+                        </IconButton>
+                      </Box>
+                    ) : (
+                      <>
+                        {/* Text Filter */}
+                        {(!col.filterType ||
+                          col.filterType === 'text') && (
+                          <InputBase
+                            fullWidth
+                            value={
+                              filterValues[col.field]?.value || ''
+                            }
+                            onChange={(e) =>
+                              onFilterInput(
+                                col.field,
+                                'text',
+                                e.target.value
+                              )
+                            }
+                            placeholder="Search..."
+                            sx={{
+                              px: 1,
+                              py: 0.5,
+                              fontSize: 13,
+                              color: '#404040',
+                              borderRadius: 1,
+                              backgroundColor:
+                                'rgba(255,255,255,0.12)',
+                              border:
+                                '1px solid rgba(255,255,255,0.18)',
+
+                              '& input::placeholder': {
+                                color: 'rgba(255,255,255,0.7)',
+                                opacity: 1
+                              },
+
+                              '&:hover': {
+                                backgroundColor:
+                                  'rgba(255,255,255,0.16)'
+                              },
+
+                              '&.Mui-focused': {
+                                border:
+                                  '1px solid rgba(255,255,255,0.35)'
+                              }
+                            }}
+                          />
+                        )}
+
+                        {/* Date Filter */}
+                        {col.filterType === 'date' && (
+                          <InputBase
+                            type="date"
+                            fullWidth
+                            value={
+                              filterValues[col.field]?.value || ''
+                            }
+                            onChange={(e) =>
+                              onFilterInput(
+                                col.field,
+                                'date',
+                                e.target.value
+                              )
+                            }
+                            sx={{
+                              px: 1,
+                              py: 0.5,
+                              fontSize: 13,
+                              color: '#fff',
+                              borderRadius: 1,
+                              backgroundColor:
+                                'rgba(255,255,255,0.12)',
+                              border:
+                                '1px solid rgba(255,255,255,0.18)',
+
+                              '& input': {
+                                color: '#fff'
+                              },
+
+                              '&::-webkit-calendar-picker-indicator': {
+                                filter: 'invert(1)'
+                              }
+                            }}
+                          />
+                        )}
+
+                        {/* Select Filter */}
+                        {col.filterType === 'select' && (
+                          <InputBase
+                            select
+                            fullWidth
+                            value={
+                              filterValues[col.field]?.value || ''
+                            }
+                            onChange={(e) =>
+                              onFilterInput(
+                                col.field,
+                                'select',
+                                e.target.value
+                              )
+                            }
+                            sx={{
+                              px: 1,
+                              py: 0.5,
+                              fontSize: 13,
+                              color: '#fff',
+                              borderRadius: 1,
+                              backgroundColor:
+                                'rgba(255,255,255,0.12)',
+                              border:
+                                '1px solid rgba(255,255,255,0.18)'
+                            }}
+                          />
+                        )}
+                      </>
+                    )}
+                  </Box>
+                </Box>
+              </TableCell>
+            );
+          })}
+        </TableRow>
+      </TableHead>
+
+  );
+};
+
+export default AdvancedTableHead;

package/src/components/custom-Table/EllipsisCell.jsx

@@ -0,0 +1,137 @@
+/* eslint-disable no-nested-ternary */
+/* eslint-disable react/no-array-index-key */
+
+import React, { useRef, useEffect, useState } from 'react';
+
+import {
+  TableCell,
+  Tooltip,
+  Box,
+  List,
+  ListItem,
+  Typography
+} from '@mui/material';
+
+const EllipsisCell = ({
+  value,
+  row,
+  columnIndex,
+  rowIndex,
+  col,
+  expandedRows,
+  maxWidth = 200
+}) => {
+  const boxRef = useRef(null);
+
+  const [isOverflowed, setIsOverflowed] = useState(false);
+
+  useEffect(() => {
+    const box = boxRef.current;
+
+    if (box) {
+      setIsOverflowed(box.scrollWidth > box.clientWidth);
+    }
+  }, [value, maxWidth]);
+
+  const isExpanded = expandedRows.includes(row.id);
+
+  const items = Array.isArray(value) ? value : [];
+
+  const renderExpandableList = () => (
+    <List
+      dense
+      sx={{
+        pl: 2,
+        py: 0,
+        width: '100%'
+      }}
+    >
+      {items.map((item, i) => {
+        const shouldShow = i === 0 || isExpanded;
+
+        if (!shouldShow) return null;
+
+        return (
+          <ListItem
+            key={i}
+            sx={{
+              display: 'list-item',
+              listStyleType: 'disc',
+              py: 0.25,
+              px: 0,
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis'
+            }}
+          >
+            <Typography variant="body2">
+              {item}
+            </Typography>
+          </ListItem>
+        );
+      })}
+    </List>
+  );
+
+  const content = col?.isExpandable
+    ? renderExpandableList()
+    : col?.cell
+      ? col.cell({
+        field: value,
+        row,
+        rowIndex,
+        columnIndex
+      })
+      : value;
+
+  const columnKey =
+    col?.id || col?.accessor || columnIndex;
+
+  const ellipsisStyles = {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    width: '100%'
+  };
+
+  return (
+    <TableCell
+      key={columnKey}
+      align={col.alignment || 'left'}
+      sx={{
+        width: `${maxWidth}px`,
+      minWidth: `${maxWidth}px`,
+      maxWidth: `${maxWidth}px`,
+        py: 1.5,
+        px: 2,
+        borderBottom: '1px solid #E5E7EB'
+      }}
+    >
+      {col?.type === 'isExpandable' ? (
+        content
+      ) : isOverflowed ? (
+        <Tooltip
+          title={String(value || '')}
+          arrow
+          placement="top"
+        >
+          <Box
+            ref={boxRef}
+            sx={ellipsisStyles}
+          >
+            {content}
+          </Box>
+        </Tooltip>
+      ) : (
+        <Box
+          ref={boxRef}
+          sx={ellipsisStyles}
+        >
+          {content}
+        </Box>
+      )}
+    </TableCell>
+  );
+};
+
+export default EllipsisCell;

package/src/components/custom-Table/Loader.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import {
+  Modal,
+  Box,
+  CircularProgress
+} from '@mui/material';
+
+const Loader = ({ isLoading = false }) => {
+  return (
+    <Modal open={isLoading}>
+      <Box
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
+        height="100vh"
+        bgcolor="rgba(0,0,0,0.3)"
+      >
+        <CircularProgress />
+      </Box>
+    </Modal>
+  );
+};
+
+export default Loader;