@campxdev/shared 1.10.58 → 1.10.59

package/package.json

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

package/src/components/HookForm/MultiSelect.tsx

@@ -1,8 +1,8 @@
+import { AutocompleteInputChangeReason } from '@mui/material'
 import { ReactNode } from 'react'
 import { Controller } from 'react-hook-form'
 import { MultiSelect } from '../Input'
 import { IOption } from '../Input/types'
-import { AutocompleteInputChangeReason } from '@mui/material'
 
 interface MultiSelectProps {
   control: any
@@ -20,6 +20,7 @@ interface MultiSelectProps {
   value?: IOption[] | IOption
   onChange?: (value: IOption[] | IOption) => void
   multiple?: boolean
+  noOptionsText?: string
 }
 
 export default function FormMultiSelect({
@@ -30,6 +31,7 @@ export default function FormMultiSelect({
   loading,
   required,
   multiple = true,
+  noOptionsText,
   onInputChange,
   ...props
 }: MultiSelectProps) {
@@ -50,6 +52,7 @@ export default function FormMultiSelect({
             loading={loading}
             options={options || []}
             error={!!error}
+            noOptionsText={noOptionsText}
             required={required}
             helperText={error ? error.message : null}
             {...props}

package/src/components/HookForm/SingleSelect.tsx

@@ -8,6 +8,7 @@ type Props = {
   control: any
   options: Array<{ label: ReactNode; value: any }>
   firstItemEmpty?: boolean
+  onOpen?: (e: any) => void
 } & SelectProps
 
 export default function FormSingleSelect(props: Props) {
@@ -37,6 +38,7 @@ export default function FormSingleSelect(props: Props) {
           value={value ?? field?.value}
           options={inputOptions}
           error={!!error}
+          onOpen={props?.onOpen}
           helperText={error?.message}
           {...props}
         />

package/src/components/Input/MultiSelect.tsx

@@ -1,11 +1,11 @@
 import { Close, KeyboardArrowDown } from '@mui/icons-material'
 import {
-  alpha,
   Autocomplete,
   AutocompleteInputChangeReason,
   Checkbox,
   CircularProgress,
   Popper,
+  alpha,
   styled,
 } from '@mui/material'
 import { ReactNode } from 'react'
@@ -87,6 +87,7 @@ interface MultiSelectProps {
   helperText?: string
   multiple?: boolean
   limitTags?: number
+  noOptionsText?: string
 }
 
 export default function MultiSelect({
@@ -99,6 +100,7 @@ export default function MultiSelect({
   onInputChange,
   required,
   error,
+  noOptionsText,
   helperText,
   multiple = true,
   limitTags = -1,
@@ -106,6 +108,7 @@ export default function MultiSelect({
 }: MultiSelectProps) {
   return (
     <StyledAutocomplete
+      noOptionsText={noOptionsText}
       multiple={multiple}
       value={value}
       loading={loading}

package/src/components/Input/SingleSelect.tsx

@@ -54,6 +54,7 @@ type Props = {
   firstItemEmpty?: boolean
   helperText?: string
   containerProps?: BoxProps
+  onOpen?: (e: any) => void
 } & SelectProps
 
 export default function SingleSelect({
@@ -87,6 +88,7 @@ export default function SingleSelect({
           MenuProps={{
             PaperProps: PaperProps,
           }}
+          onOpen={props?.onOpen}
           IconComponent={KeyboardArrowDown}
           onChange={onChange}
           {...props}

package/src/components/ReportPageHeader.tsx

@@ -0,0 +1,36 @@
+import styled from '@emotion/styled'
+import { Box, Divider, Typography } from '@mui/material'
+import { ReactNode } from 'react'
+interface PageHeaderProps {
+  urlTenantKey: string | ReactNode
+  title?: string | ReactNode
+  actions?: ReactNode
+}
+export const StyledHeaderBox = styled(Box)(({ theme }) => ({
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+}))
+export default function ReportPageHeader({
+  urlTenantKey,
+  title,
+  actions,
+}: PageHeaderProps) {
+  return (
+    <StyledHeaderBox>
+      <Typography variant="h6" sx={{ textTransform: 'uppercase' }}>
+        {urlTenantKey}
+      </Typography>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+        <Divider orientation="horizontal" sx={{ width: '100px' }} />
+        <Typography variant="h6" sx={{ fontSize: '24px' }}>
+          {title}
+        </Typography>
+        <Divider orientation="horizontal" sx={{ width: '100px' }} />
+      </Box>
+      <Box className="actions">{actions}</Box>
+    </StyledHeaderBox>
+  )
+}

package/src/components/Selectors/ProgramSelector.tsx

@@ -0,0 +1,49 @@
+import { useState } from 'react'
+import { FormSingleSelect } from '../HookForm'
+import axios from '../../config/axios'
+import { SelectProps } from '@mui/material'
+
+type ProgramSelectorProps = {
+  control: any
+  name: string
+  label: string
+  required?: boolean
+  multiple?: boolean
+} & SelectProps
+export default function ProgramSelector(props: ProgramSelectorProps) {
+  const { name, required = false, control, label, multiple = false } = props
+  const [options, setOptions] = useState([])
+  const handleOpen = (e) => {
+    if (options.length === 0) {
+      axios
+        .get('/square/branches')
+        .then((response) => {
+          setOptions(response.data)
+        })
+        .catch((error) => {
+          console.error('Error fetching data from the API:', error)
+        })
+    }
+  }
+  const handleOptions =
+    options.length > 0
+      ? [
+          { value: 'all', label: 'All' },
+          ...options.map((item) => ({
+            label: `${item.branchName} (${item.course.courseName})`,
+            value: `${item.id}`,
+          })),
+        ]
+      : [{ value: 'all', label: 'All' }]
+  return (
+    <FormSingleSelect
+      control={control}
+      name={name}
+      label={label}
+      required={required}
+      options={handleOptions}
+      onOpen={handleOpen}
+      {...props}
+    />
+  )
+}

package/src/components/Selectors/index.tsx

@@ -0,0 +1,2 @@
+import ProgramSelector from './ProgramSelector'
+export { ProgramSelector }

package/src/components/index.ts

@@ -42,6 +42,7 @@ 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'
@@ -111,3 +112,4 @@ export * from './HookForm'
 export * from './IconButtons'
 export * from './Input'
 export * from './UploadButton/types'
+export * from './Selectors'