@campxdev/shared 1.8.14 → 1.8.16

package/src/components/StepsHeader/StepsHeader.tsx

@@ -0,0 +1,115 @@
+import { Done } from '@mui/icons-material'
+import { alpha, Box, styled, Typography } from '@mui/material'
+import { useEffect, useState } from 'react'
+
+export const StyledStepsContainer = styled(Box)(({ theme }) => ({
+  padding: '10px 0',
+  display: 'flex',
+  justifyContent: 'center',
+  gap: '10px',
+}))
+
+export const StyledStep = styled(Box, {
+  shouldForwardProp: (prop) =>
+    !['active', 'disableHover'].includes(prop as string),
+})<{ active: boolean; disableHover: boolean }>(
+  ({ theme, active, disableHover }) => ({
+    maxWidth: '130px',
+    position: 'relative',
+    display: 'grid',
+    gridTemplateRows: '50px 1fr',
+    placeItems: 'center',
+    gap: '10px',
+    cursor: disableHover ? 'default' : 'pointer',
+    padding: '6px',
+    borderRadius: '10px',
+    transition: 'background 0.3s ease',
+    '&:hover': {
+      background: disableHover ? 'none' : theme.palette.secondary.light,
+    },
+    '& .MuiTypography-root': {
+      color: alpha(theme.palette.secondary.main, active ? 1 : 0.6),
+      fontWeight: 'bold',
+      textAlign: 'center',
+    },
+    '& .connector': {
+      position: 'absolute',
+      top: '30%',
+      left: '50%',
+      width: '100%',
+      borderBottom: `1px dashed #1212128A`,
+    },
+    '&:last-of-type': {
+      '& .connector': {
+        display: 'none',
+      },
+    },
+  }),
+)
+
+export const StyledCircle = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'active',
+})<{ active: boolean }>(({ theme, active }) => ({
+  height: '50px',
+  width: '50px',
+  borderRadius: '50%',
+  background: 'white',
+  zIndex: 30,
+  backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='gray' stroke-width='1.2' stroke-dasharray='8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e")`,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  ...(active && {
+    border: `1px solid ${theme.palette.primary.main}`,
+    backgroundImage: 'none',
+  }),
+}))
+
+interface StepsHeaderProps {
+  steps: { step: number; label: string }[]
+  onChange: (step: number) => void
+  activeStep?: number
+  disableClick?: boolean
+}
+
+export default function StepsHeader({
+  steps,
+  onChange,
+  activeStep: _activeStep = 0,
+  disableClick = false,
+}: StepsHeaderProps) {
+  const [activeStep, setActiveStep] = useState(0)
+
+  const handleClick = (step) => {
+    setActiveStep(step)
+    onChange(step)
+  }
+
+  useEffect(() => {
+    setActiveStep(_activeStep)
+  }, [_activeStep])
+
+  return (
+    <StyledStepsContainer>
+      {steps?.map((item) => (
+        <StyledStep
+          active={activeStep > item?.step - 1}
+          disableHover={disableClick}
+          onClick={() => {
+            if (disableClick) return
+            handleClick(item.step)
+          }}
+          key={item?.step}
+        >
+          <StyledCircle active={activeStep > item?.step - 1}>
+            {activeStep > item?.step - 1 && <Done color="success" />}
+          </StyledCircle>
+          <Typography variant="body1" sx={{ fontSize: '13px' }}>
+            {item?.label}
+          </Typography>
+          <Box className="connector"></Box>
+        </StyledStep>
+      ))}
+    </StyledStepsContainer>
+  )
+}

package/src/components/StepsHeader/index.tsx

@@ -0,0 +1 @@
+export { default } from './StepsHeader'

package/src/components/StyledTableContainer.tsx

@@ -0,0 +1,33 @@
+import styled from 'styled-components'
+
+export const StyledTableContainer = styled.div`
+  /* background: white; */
+  margin-top: 10px;
+  border-radius: 16px;
+
+  table thead tr {
+    background-color: #efefef;
+  }
+
+  table,
+  td,
+  th {
+    border: 1px solid #bebebe;
+    padding: 8px;
+  }
+
+  table {
+    background: white;
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  @media print {
+    table,
+    td,
+    th {
+      border: 1px solid black;
+      padding: 8px;
+    }
+  }
+`

package/src/components/SwitchButton.tsx

@@ -0,0 +1,41 @@
+import { Box, styled, Switch, Typography } from '@mui/material'
+import { ReactNode } from 'react'
+
+interface SwicthButtonProps {
+  label: ReactNode
+  checked: boolean
+  onChange: (v: any) => void
+  subtitle?: ReactNode
+}
+
+export default function SwitchButton({
+  label,
+  checked,
+  onChange,
+  subtitle,
+}: SwicthButtonProps) {
+  return (
+    <StyledBox>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+        <Typography variant="body1">{label}</Typography>
+        <Switch
+          checked={checked}
+          onChange={(e, checked) => onChange(checked)}
+        />
+      </Box>
+      {subtitle && <Typography variant="subtitle1">{subtitle}</Typography>}
+    </StyledBox>
+  )
+}
+
+const StyledBox = styled(Box)(({ theme }) => ({
+  '& > .MuiBox-root': {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: '1rem',
+  },
+  '& > .MuiTypography-root': {
+    marginTop: '0.5rem',
+  },
+}))

package/src/components/Table.tsx

@@ -0,0 +1,42 @@
+import styled from 'styled-components'
+
+const secondaryColor = '#233659'
+const primaryColor = '#c02633'
+
+export const Table = styled.table`
+  background: white;
+  border: 1px solid #dfdfdf;
+  padding: ${(props: any) => props.cellPadding || '4px 8px'};
+  border-collapse: collapse;
+  box-shadow: 0 3px 15px rgb(39 59 128 / 20%);
+  thead {
+    background-color: ${secondaryColor};
+    color: white;
+    border-top: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
+  }
+
+  thead tr th {
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+
+  tbody tr:hover {
+    background-color: #f9f9f9;
+  }
+
+  td {
+    /* border: 1px solid #dfdfdf; */
+    border: 1px solid #dfdfdf;
+  }
+
+  td,
+  th {
+    padding: ${(props: any) => props.cellPadding || '4px 8px'};
+  }
+
+  tbody tr:nth-child(even) {
+    /* background: #f4f4f4; */
+    /* background: #fafcff; */
+  }
+`

package/src/components/Tables/BasicTable/Table.tsx

@@ -0,0 +1,198 @@
+import {
+  alpha,
+  Box,
+  IconButton,
+  ListItemIcon,
+  styled,
+  Table as MuiTable,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+} from '@mui/material'
+import _ from 'lodash'
+import { useEffect, useState } from 'react'
+import Spinner from '../../Spinner'
+import { SortAscIcon, SortDescIcon, SortIcon } from '../common/icons'
+import NoRecordsFound from '../common/NoRecordsFound'
+import TableFooter from './TableFooter'
+
+export interface ColumnProps {
+  dataIndex: string
+  key: string
+  title: any
+  render?: (cellData: any, row: any, index: number) => any
+  textColor?: string
+  sort?: boolean
+  width?: string //pixels
+}
+
+interface TableProps {
+  columns: Array<ColumnProps>
+  rowKey?: string
+  dataSource?: any[]
+  loading?: boolean
+  onRowClick?: (row: any) => void
+  pagination?: {
+    page: number
+    limit: number
+    totalCount: number
+    onChange: (v: number) => void
+    onChangeLimit?: (v: number) => void
+  }
+  onSort?: (sort: any) => void
+  dense?: boolean
+}
+
+type Order = 'asc' | 'desc' | ''
+type Sort = {}
+
+export default function Table({
+  columns,
+  dataSource,
+  onRowClick,
+  pagination,
+  loading,
+  onSort,
+  dense = false,
+}: TableProps) {
+  const [sort, setSort] = useState<Sort>({})
+
+  const handleSortClick = (sortBykey) => {
+    setSort((prev) => {
+      if (prev[sortBykey]) {
+        if (prev[sortBykey] === 'desc') return { ...prev, [sortBykey]: 'asc' }
+        if (prev[sortBykey] === 'asc') {
+          delete prev[sortBykey]
+          return { ...prev }
+        }
+      } else {
+        return {
+          ...prev,
+          [sortBykey]: 'desc',
+        }
+      }
+    })
+  }
+
+  useEffect(() => {
+    if (!onSort) return
+
+    onSort({
+      sortBy: Object.keys(sort).join(','),
+      sortOrder: Object.keys(sort)
+        .map((item) => sort[item])
+        .join(','),
+    })
+  }, [sort])
+
+  return (
+    <StyledTableContainer>
+      <>
+        <MuiTable>
+          <TableHead>
+            <TableRow>
+              {columns.map((col, index) => (
+                <TableCell
+                  key={index}
+                  sx={{
+                    ...(col?.width && {
+                      width: col?.width,
+                    }),
+                  }}
+                >
+                  <Box sx={{ fontWeight: 600, fontSize: '14px' }}>
+                    {col.title}
+                  </Box>
+                  {col.sort && (
+                    <IconButton onClick={() => handleSortClick(col.dataIndex)}>
+                      <ListItemIcon>
+                        {sort[col.dataIndex] === 'asc' ? (
+                          <SortAscIcon />
+                        ) : sort[col.dataIndex] === 'desc' ? (
+                          <SortDescIcon />
+                        ) : (
+                          <SortIcon />
+                        )}
+                      </ListItemIcon>
+                    </IconButton>
+                  )}
+                </TableCell>
+              ))}
+            </TableRow>
+          </TableHead>
+          {!loading ? (
+            <>
+              {dataSource?.length ? (
+                <TableBody>
+                  {dataSource?.map((row, index) => (
+                    <StyledTableRow
+                      canRowClick={!!onRowClick}
+                      hover={!!onRowClick}
+                      key={index}
+                      onClick={() => {
+                        return onRowClick && onRowClick(row)
+                      }}
+                    >
+                      {columns.map((col, colIndex) => (
+                        <TableCell
+                          sx={{
+                            color: col.textColor,
+                            padding: dense ? '10px' : '15px',
+                            font: 'avenir',
+                            fontSize: '14px',
+                          }}
+                          key={colIndex}
+                        >
+                          <>
+                            {col?.render
+                              ? col.render(row[col.dataIndex], row, index)
+                              : _.get(row, col.dataIndex)}
+                          </>
+                        </TableCell>
+                      ))}
+                    </StyledTableRow>
+                  ))}
+                </TableBody>
+              ) : (
+                <>
+                  <NoRecordsFound colLength={columns?.length} />
+                </>
+              )}
+            </>
+          ) : (
+            <Spinner />
+          )}
+        </MuiTable>
+      </>
+      <>
+        {pagination && (
+          <TableFooter
+            page={pagination.page + 1}
+            limit={pagination.limit}
+            totalCount={pagination.totalCount ?? 0}
+            handlePagination={pagination.onChange}
+            handlePageLimit={pagination.onChangeLimit}
+          />
+        )}
+      </>
+    </StyledTableContainer>
+  )
+}
+
+const StyledTableContainer = styled(TableContainer)(({ theme }) => ({
+  width: '100%',
+  overflowX: 'auto',
+}))
+
+const StyledTableRow = styled(TableRow, {
+  shouldForwardProp: (prop) => prop !== 'canRowClick',
+})<{ canRowClick: boolean }>(({ canRowClick }) => ({
+  ...(canRowClick && {
+    cursor: 'pointer',
+    '&.MuiTableRow-hover:hover': {
+      backgroundColor: alpha('#f2f2f2', 0.4),
+    },
+  }),
+}))

package/src/components/Tables/BasicTable/TableFooter.tsx

@@ -0,0 +1,86 @@
+import { Box, Typography } from '@mui/material'
+import DropDownButton from '../../DropDownButton/DropDownButton'
+import { StyledPagination, StyledTableFooter } from '../common/styles'
+import TableStats from '../common/TableStats'
+
+interface TableFooterProps {
+  totalCount: number
+  limit: number
+  handlePagination: (v: number) => void
+  page: number
+  handlePageLimit?: (v: number) => void
+}
+
+export default function TableFooter({
+  totalCount,
+  limit,
+  handlePagination,
+  page,
+  handlePageLimit,
+}: TableFooterProps) {
+  const onChange = (v: number) => {
+    handlePagination(v)
+  }
+  return (
+    <StyledTableFooter>
+      <TableStats limit={limit} totalCount={totalCount} page={page} />
+      <StyledPagination
+        page={page}
+        count={Math.ceil(totalCount / limit)}
+        onChange={(e, v) => onChange(v)}
+        variant="outlined"
+        shape="rounded"
+      />
+      {handlePageLimit ? (
+        <LimitField handlePageLimit={handlePageLimit} limit={limit} />
+      ) : (
+        <Box></Box>
+      )}
+    </StyledTableFooter>
+  )
+}
+
+const LimitField = ({ handlePageLimit, limit }) => {
+  return (
+    <Box>
+      <DropDownButton
+        button={{
+          buttonProps: {
+            variant: 'outlined',
+            color: 'secondary',
+            sx: {
+              padding: '0px 10px',
+              color: '#121212',
+              fontSize: '13px',
+              border: '1px solid #1212121A',
+            },
+          },
+          label: `${limit} / page`,
+        }}
+        menu={[
+          {
+            label: 10,
+            onClick: () => handlePageLimit(10),
+          },
+
+          {
+            label: 20,
+            onClick: () => handlePageLimit(20),
+          },
+          {
+            label: 30,
+            onClick: () => handlePageLimit(30),
+          },
+          {
+            label: 50,
+            onClick: () => handlePageLimit(50),
+          },
+          {
+            label: 100,
+            onClick: () => handlePageLimit(100),
+          },
+        ]}
+      />
+    </Box>
+  )
+}

package/src/components/Tables/BasicTable/index.tsx

@@ -0,0 +1 @@
+export { default } from './Table'

package/src/components/Tables/ReactTable/BatchActionsHeader.tsx

@@ -0,0 +1,58 @@
+import { Box, Typography } from '@mui/material'
+import DropDownButton from '../../DropDownButton'
+import {
+  StyledActionIconButton,
+  StyledActionsRow,
+  StyledTableActionsHeader,
+} from '../common/styles'
+
+export default function BatchActionsHeader({
+  selectedRowIds,
+  actions,
+  clearSelection,
+}) {
+  const ids = Object?.keys(selectedRowIds)
+  const rowActions = actions?.filter((item) => !item?.dropdown)
+  const dropDownActions = actions?.filter((item) => item?.dropdown)
+
+  if (!ids?.length) return null
+  return (
+    <StyledTableActionsHeader>
+      <Typography variant="subtitle1">
+        Selected <span>{ids?.length}</span> rows
+      </Typography>
+      <RowActions actions={rowActions} ids={ids} clear={clearSelection} />
+      <DropDownActions
+        actions={dropDownActions}
+        ids={ids}
+        clear={clearSelection}
+      />
+    </StyledTableActionsHeader>
+  )
+}
+
+const RowActions = ({ actions, ids, clear }) => {
+  if (!actions?.length) return null
+
+  return (
+    <StyledActionsRow>
+      {actions?.map(({ component }, index) => (
+        <Box key={index}>{component(ids, clear)}</Box>
+      ))}
+    </StyledActionsRow>
+  )
+}
+const DropDownActions = ({ actions, ids, clear }) => {
+  if (!actions?.length) return null
+  return (
+    <DropDownButton
+      icon={{
+        icon: <StyledActionIconButton />,
+      }}
+      menu={actions?.map((action) => ({
+        ...action,
+        // onClick: () => action?.onClick(ids, clear),
+      }))}
+    />
+  )
+}