@campxdev/shared 1.10.63 → 1.10.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.10.63",
+  "version": "1.10.65",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",

package/src/components/Input/TimePicker.tsx

@@ -16,6 +16,7 @@ export interface ITimePicker {
   placeholder?: string
   inputProps?: TextFieldProps
   size?: 'medium' | 'small'
+  disabled?: boolean
 }
 
 export default function TimePicker({
@@ -28,6 +29,7 @@ export default function TimePicker({
   value,
   placeholder,
   size = 'medium',
+  disabled,
   ...rest
 }: ITimePicker) {
   return (
@@ -68,6 +70,7 @@ export default function TimePicker({
                 </InputAdornment>
               ),
             }}
+            disabled={disabled}
             {...rest.inputProps}
           />
         )

package/src/components/Tables/MobileTable/MobileTable.tsx

@@ -0,0 +1,218 @@
+import {
+  Box,
+  IconButton,
+  ListItemIcon,
+  Table as MuiTable,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  alpha,
+  styled,
+} from '@mui/material'
+import _ from 'lodash'
+import { useEffect, useState } from 'react'
+import Spinner from '../../Spinner'
+import TableFooter from '../BasicTable/TableFooter'
+import NoRecordsFound from '../common/NoRecordsFound'
+import { SortAscIcon, SortDescIcon, SortIcon } from '../common/icons'
+
+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
+  isLastRowColorChange?: boolean
+}
+
+type Order = 'asc' | 'desc' | ''
+type Sort = {}
+
+export default function MobileTable({
+  columns,
+  dataSource,
+  onRowClick,
+  pagination,
+  loading,
+  onSort,
+  dense = false,
+  isLastRowColorChange = 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>
+      <>
+        <StyledMuiTable>
+          <TableHead>
+            <TableRow>
+              {columns.map((col, index) => (
+                <TableCell
+                  key={index}
+                  sx={{
+                    ...(col?.width && {
+                      width: col?.width,
+                    }),
+                    borderRightColor: '#1212121A',
+                    borderRightStyle: 'solid',
+                  }}
+                >
+                  <Box sx={{ fontWeight: 500, 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)
+                      }}
+                      isLastRowColorChange={isLastRowColorChange}
+                    >
+                      {columns.map((col, colIndex) => (
+                        <TableCell
+                          sx={{
+                            color: col.textColor,
+                            padding: dense ? '10px' : '15px',
+                            font: 'avenir',
+                            fontSize: '14px',
+                            borderRightColor: '#1212121A',
+                            borderRightStyle: 'solid',
+                          }}
+                          key={colIndex}
+                        >
+                          <>
+                            {col?.render
+                              ? col.render(row[col.dataIndex], row, index)
+                              : _.get(row, col.dataIndex)}
+                          </>
+                        </TableCell>
+                      ))}
+                    </StyledTableRow>
+                  ))}
+                </TableBody>
+              ) : (
+                <>
+                  <NoRecordsFound colLength={columns?.length} />
+                </>
+              )}
+            </>
+          ) : (
+            <Spinner />
+          )}
+        </StyledMuiTable>
+      </>
+      <>
+        {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',
+  borderRadius: '10px 10px 10px 10px',
+  border: '1px solid #1212121A',
+}))
+
+const StyledMuiTable = styled(MuiTable)<{}>(({ theme }) => ({
+  border: 'none',
+}))
+
+const StyledTableRow = styled(TableRow, {
+  shouldForwardProp: (prop) => prop !== 'canRowClick',
+})<{ canRowClick: boolean; isLastRowColorChange?: boolean }>(
+  ({ canRowClick, isLastRowColorChange }) => ({
+    ...(canRowClick && {
+      cursor: 'pointer',
+      '&.MuiTableRow-hover:hover': {
+        backgroundColor: alpha('#f2f2f2', 0.4),
+      },
+    }),
+    ...(isLastRowColorChange && {
+      '&:last-child': {
+        backgroundColor: '#F2F2F2',
+      },
+    }),
+  }),
+)

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

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

package/src/components/Tabs/TabsContainer.tsx

@@ -1,24 +1,31 @@
 import { Tab } from '@mui/material'
 import { ChangeEvent, ReactNode, useEffect, useState } from 'react'
-import { StyledComponentWrapper, StyledContainer, StyledTabs } from './styles'
 import ErrorBoundary from '../ErrorBoundary'
+import { StyledComponentWrapper, StyledContainer, StyledTabs } from './styles'
 
 export interface TabsContainerProps {
   tabs: {
     key: string
     label: string
     component: ReactNode
+    highlight?: boolean
   }[]
   size?: 'small' | 'medium'
-  conatinerVariant?: 'box' | 'page'
+  containerVariant?: 'box' | 'page'
   onTabChange?: (tabKey: string) => void
+  isMobile?: boolean
+  tabUnderlineColor?: string
+  tabMobileUnderlineColor?: string
 }
 
 export default function TabsContainer({
   tabs,
   size = 'small',
-  conatinerVariant = 'box',
+  containerVariant = 'box',
+  isMobile = false,
   onTabChange,
+  tabUnderlineColor,
+  tabMobileUnderlineColor,
 }: TabsContainerProps) {
   const [currentTab, setCurrentTab] = useState(tabs[0].key)
 
@@ -33,7 +40,7 @@ export default function TabsContainer({
   return (
     <StyledContainer>
       <StyledTabs
-        containerVariant={conatinerVariant}
+        containerVariant={containerVariant}
         size={size}
         onChange={handleTabsChange}
         value={currentTab}
@@ -41,12 +48,21 @@ export default function TabsContainer({
         scrollButtons="auto"
         textColor="primary"
         indicatorColor="primary"
+        isMobile={isMobile}
+        underlineColor={tabUnderlineColor}
+        mobileUnderlineColor={tabMobileUnderlineColor}
       >
         {tabs.map((tab) => (
-          <Tab key={tab.key} label={tab.label} value={tab.key} />
+          <Tab
+            key={tab.key}
+            label={tab.label}
+            value={tab.key}
+            icon={tab.highlight ? <span>{'.'}</span> : null}
+            iconPosition="end"
+          />
         ))}
       </StyledTabs>
-      <StyledComponentWrapper containerVariant={conatinerVariant}>
+      <StyledComponentWrapper containerVariant={containerVariant}>
         <ErrorBoundary>
           {tabs.find((tab) => tab.key === currentTab)?.component}
         </ErrorBoundary>

package/src/components/Tabs/styles.tsx

@@ -1,39 +1,62 @@
 import { Box, Stack, styled, Tabs } from '@mui/material'
 
-export const StyledTabs = styled(Tabs)<{
+interface StyledTabsProps {
   size: 'small' | 'medium'
   containerVariant?: 'page' | 'box'
-}>(({ theme, size, containerVariant }) => ({
-  borderTopRightRadius: '10px',
-  borderTopLeftRadius: '10px',
-  background: theme.palette.secondary.light,
-  minHeight: '60px',
-  paddingLeft: '15px',
-  '& .MuiTabs-indicator': {
-    backgroundColor: theme.palette.common.yellow,
-  },
-  '& .MuiTabs-flexContainer': {
-    height: '100%',
-    alignItems: 'end',
-  },
-  '& .MuiTab-root': {
-    textTransform: 'none',
-    transition: 'color 0.2s ease-in-out',
-    padding: '5px 15px',
-    paddingBottom: '8px',
-    minHeight: 0,
-    fontSize: size === 'medium' ? '16px' : '14px',
-    fontWeight: '600',
-  },
-  '& .MuiTab-root.Mui-selected': {
-    color: theme.palette.secondary.main,
-  },
-  ...(containerVariant === 'page' && {
-    background: 'none',
-    paddingLeft: 0,
-    borderBottom: theme.borders.grayLight,
+  isMobile?: false | true
+  underlineColor?: string
+  mobileUnderlineColor?: string
+}
+
+export const StyledTabs = styled(Tabs)<StyledTabsProps>(
+  ({
+    theme,
+    size,
+    containerVariant,
+    isMobile,
+    underlineColor,
+    mobileUnderlineColor,
+  }) => ({
+    borderTopRightRadius: '10px',
+    borderTopLeftRadius: '10px',
+    background: theme.palette.secondary.light,
+    minHeight: isMobile ? '30px' : '60px',
+    paddingLeft: '15px',
+    '& .MuiTabs-indicator': {
+      backgroundColor: isMobile
+        ? mobileUnderlineColor
+        : underlineColor ?? theme.palette.common.yellow,
+    },
+    '& span': {
+      color: theme.palette.error.main,
+      fontSize: '20px',
+      marginTop: '-20px',
+      marginLeft: '3px  !important',
+    },
+    '& .MuiTabs-flexContainer': {
+      height: '100%',
+      alignItems: 'end',
+      justifyContent: isMobile ? 'center' : 'flex-start',
+    },
+    '& .MuiTab-root': {
+      textTransform: 'none',
+      transition: 'color 0.2s ease-in-out',
+      padding: '5px 15px',
+      paddingBottom: '8px',
+      minHeight: 0,
+      fontSize: size === 'medium' ? '16px' : '14px',
+      fontWeight: isMobile ? '500' : '600',
+    },
+    '& .MuiTab-root.Mui-selected': {
+      color: theme.palette.secondary.main,
+    },
+    ...(containerVariant === 'page' && {
+      background: 'none',
+      paddingLeft: 0,
+      borderBottom: theme.borders.grayLight,
+    }),
   }),
-}))
+)
 
 export const StyledContainer = styled(Stack)(({ theme }) => ({
   borderRadius: '10px',

package/src/components/index.ts

@@ -42,7 +42,6 @@ import UploadFileDialog from './UploadFileDialog'
 export { default as ActionButton } from './ActionButton'
 export { default as AutocompleteSearch } from './AutocompleteSearch'
 export { default as Breadcrumbs } from './Breadcrumbs'
-export { default as ReportPageHeader } from './ReportPageHeader'
 export { default as Card } from './Card'
 export { default as CardsGrid } from './CardsGrid'
 export { default as DividerHeading } from './DividerHeading'
@@ -56,10 +55,12 @@ export { default as NoDataIllustration } from './NoDataIllustration'
 export { PageContent } from './PageContent'
 export { default as PageHeader } from './PageHeader'
 export { default as useConfirm } from './PopupConfirm/useConfirm'
+export { default as ReportPageHeader } from './ReportPageHeader'
 export { default as Spinner } from './Spinner'
 export { default as SwitchButton } from './SwitchButton'
 export { default as Table } from './Tables/BasicTable'
 export { default as TableFooter } from './Tables/BasicTable/TableFooter'
+export { default as MobileTable } from './Tables/MobileTable'
 export { default as ReactTable } from './Tables/ReactTable'
 export { default as Tabs } from './Tabs/Tabs'
 export { default as ToastContainer } from './ToastContainer'
@@ -111,5 +112,5 @@ export {
 export * from './HookForm'
 export * from './IconButtons'
 export * from './Input'
-export * from './UploadButton/types'
 export * from './Selectors'
+export * from './UploadButton/types'