@campxdev/shared 1.9.0 → 1.9.1

package/src/components/Input/TimePicker.tsx

@@ -1,77 +1,77 @@
-import { QueryBuilder } from '@mui/icons-material'
-import { InputAdornment, TextFieldProps } from '@mui/material'
-import 'flatpickr/dist/flatpickr.css'
-import { ReactNode } from 'react'
-import Flatpickr, { DateTimePickerProps } from 'react-flatpickr'
-import TextField from './TextField'
-
-export interface ITimePicker {
-  label?: ReactNode
-  name?: string
-  required?: boolean
-  minTime?: Date | string | number
-  maxTime?: Date | string | number
-  value: Date | null
-  onChange: (value: Date) => void
-  placeholder?: string
-  inputProps?: TextFieldProps
-  size?: 'medium' | 'small'
-}
-
-export default function TimePicker({
-  name,
-  label,
-  required,
-  minTime,
-  maxTime,
-  onChange,
-  value,
-  placeholder,
-  size = 'medium',
-  ...rest
-}: ITimePicker) {
-  return (
-    <Flatpickr
-      options={{
-        enableTime: true,
-        noCalendar: true,
-        dateFormat: 'h:i K',
-        minTime,
-        maxTime,
-        allowInput: true,
-      }}
-      onClose={(dates) => {
-        if (onChange) onChange(dates[0])
-      }}
-      onChange={(dates: Date[]) => {
-        if (onChange) onChange(dates[0])
-      }}
-      value={value || null}
-      render={(
-        props: Omit<DateTimePickerProps, 'options' | 'render'>,
-        ref: (node: HTMLInputElement | null) => void,
-      ) => {
-        return (
-          <TextField
-            size={size}
-            placeholder={placeholder}
-            label={label}
-            name={name}
-            variant="outlined"
-            autoComplete="off"
-            required={required}
-            inputRef={ref}
-            InputProps={{
-              endAdornment: (
-                <InputAdornment position="end">
-                  <QueryBuilder />
-                </InputAdornment>
-              ),
-            }}
-            {...rest.inputProps}
-          />
-        )
-      }}
-    />
-  )
-}
+import { QueryBuilder } from '@mui/icons-material'
+import { InputAdornment, TextFieldProps } from '@mui/material'
+import 'flatpickr/dist/flatpickr.css'
+import { ReactNode } from 'react'
+import Flatpickr, { DateTimePickerProps } from 'react-flatpickr'
+import TextField from './TextField'
+
+export interface ITimePicker {
+  label?: ReactNode
+  name?: string
+  required?: boolean
+  minTime?: Date | string | number
+  maxTime?: Date | string | number
+  value: Date | null
+  onChange: (value: Date) => void
+  placeholder?: string
+  inputProps?: TextFieldProps
+  size?: 'medium' | 'small'
+}
+
+export default function TimePicker({
+  name,
+  label,
+  required,
+  minTime,
+  maxTime,
+  onChange,
+  value,
+  placeholder,
+  size = 'medium',
+  ...rest
+}: ITimePicker) {
+  return (
+    <Flatpickr
+      options={{
+        enableTime: true,
+        noCalendar: true,
+        dateFormat: 'h:i K',
+        minTime,
+        maxTime,
+        allowInput: true,
+      }}
+      onClose={(dates) => {
+        if (onChange) onChange(dates[0])
+      }}
+      onChange={(dates: Date[]) => {
+        if (onChange) onChange(dates[0])
+      }}
+      value={value || null}
+      render={(
+        props: Omit<DateTimePickerProps, 'options' | 'render'>,
+        ref: (node: HTMLInputElement | null) => void,
+      ) => {
+        return (
+          <TextField
+            size={size}
+            placeholder={placeholder}
+            label={label}
+            name={name}
+            variant="outlined"
+            autoComplete="off"
+            required={required}
+            inputRef={ref}
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position="end">
+                  <QueryBuilder />
+                </InputAdornment>
+              ),
+            }}
+            {...rest.inputProps}
+          />
+        )
+      }}
+    />
+  )
+}

package/src/components/Input/index.ts

@@ -1,26 +1,26 @@
-import TextField from './TextField'
-import DateTimePicker from './DateTimePicker'
-import FormLabel from './FormLabel'
-import MultiCheckbox from './MultiCheckbox'
-import MultiSelect from './MultiSelect'
-import RadioGroup from './RadioGroup'
-import SingleCheckbox from './SingleCheckbox'
-import SingleSelect from './SingleSelect'
-import AutoCompleteSearch from './AutoCompleteSearch'
-import TimePicker from './TimePicker'
-import DatePicker from './DatePicker'
-import DateRangePicker from './DateRangePicker'
-export {
-  TextField,
-  DateTimePicker,
-  FormLabel,
-  MultiCheckbox,
-  MultiSelect,
-  RadioGroup,
-  SingleCheckbox,
-  SingleSelect,
-  AutoCompleteSearch,
-  TimePicker,
-  DatePicker,
-  DateRangePicker,
-}
+import TextField from './TextField'
+import DateTimePicker from './DateTimePicker'
+import FormLabel from './FormLabel'
+import MultiCheckbox from './MultiCheckbox'
+import MultiSelect from './MultiSelect'
+import RadioGroup from './RadioGroup'
+import SingleCheckbox from './SingleCheckbox'
+import SingleSelect from './SingleSelect'
+import AutoCompleteSearch from './AutoCompleteSearch'
+import TimePicker from './TimePicker'
+import DatePicker from './DatePicker'
+import DateRangePicker from './DateRangePicker'
+export {
+  TextField,
+  DateTimePicker,
+  FormLabel,
+  MultiCheckbox,
+  MultiSelect,
+  RadioGroup,
+  SingleCheckbox,
+  SingleSelect,
+  AutoCompleteSearch,
+  TimePicker,
+  DatePicker,
+  DateRangePicker,
+}

package/src/components/Input/types.ts

@@ -1,3 +1,3 @@
-import { ReactNode } from 'react'
-
-export type IOption = { label: ReactNode; value: any }
+import { ReactNode } from 'react'
+
+export type IOption = { label: ReactNode; value: any }

package/src/components/Institutions/InsititutionsDialog.tsx

@@ -1,70 +1,86 @@
-import { Box, Typography } from '@mui/material'
-import { InsititutionsStore } from '../../shared-state/InstitutionsStore'
-import Image from '../Image/Image'
-
-export default function InsititutionsDialog({ close }) {
-  const { institutions } = InsititutionsStore.useState((s) => s)
-
-  return (
-    <Box
-      sx={{
-        padding: '20px',
-      }}
-    >
-      <Typography variant="h3" textAlign={'center'}>
-        Select an Instituition
-      </Typography>
-      <Box>
-        <Box
-          sx={{
-            marginTop: '30px',
-            display: 'flex',
-            gap: '30px',
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}
-        >
-          {institutions?.map((item, index) => (
-            <InstitutionCard institution={item} key={index} />
-          ))}
-        </Box>
-      </Box>
-    </Box>
-  )
-}
-
-const InstitutionCard = ({ institution }) => {
-  const urlTenantKey = window.location.pathname.split('/')[1]
-  const handleClick = () => {
-    localStorage.setItem('institution_key', institution?.code)
-    window.location.replace(
-      `${window.location.origin}/${urlTenantKey}/${institution?.code}`,
-    )
-  }
-
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        gap: '20px',
-        padding: '14px',
-        border: '1px solid black',
-        borderRadius: '10px',
-        cursor: 'pointer',
-        width: '200px',
-        flexShrink: 0,
-      }}
-      onClick={handleClick}
-    >
-      <Image
-        alt="logo"
-        height={100}
-        width="auto"
-        src={institution?.images?.url}
-      />
-      <Typography variant="body2">{institution?.name}</Typography>
-    </Box>
-  )
-}
+import { Box, Stack, Typography, styled } from '@mui/material'
+import { InsititutionsStore } from '../../shared-state/InstitutionsStore'
+import Image from '../Image/Image'
+
+export default function InsititutionsDialog({ close }) {
+  const { institutions } = InsititutionsStore.useState((s) => s)
+
+  return (
+    <Stack
+      gap={4}
+      sx={{
+        padding: '20px',
+        alignItems: 'center',
+      }}
+    >
+      <Typography variant="h3" textAlign={'center'}>
+        Select an Instituition
+      </Typography>
+
+      <StyledInstitutionContainer>
+        {institutions?.map((item, index) => (
+          <InstitutionCard institution={item} key={index} />
+        ))}
+      </StyledInstitutionContainer>
+    </Stack>
+  )
+}
+
+const InstitutionCard = ({ institution }) => {
+  const urlTenantKey = window.location.pathname.split('/')[1]
+  const handleClick = () => {
+    localStorage.setItem('institution_key', institution?.code)
+    window.location.replace(
+      `${window.location.origin}/${urlTenantKey}/${institution?.code}`,
+    )
+  }
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: '20px',
+        padding: '14px',
+        border: '1px solid black',
+        borderRadius: '10px',
+        cursor: 'pointer',
+        width: '200px',
+        flexShrink: 0,
+      }}
+      onClick={handleClick}
+    >
+      <Image
+        alt="logo"
+        height={100}
+        width="auto"
+        src={institution?.images?.url}
+      />
+      <Typography variant="body2">{institution?.name}</Typography>
+    </Box>
+  )
+}
+
+export const StyledInstitutionContainer = styled(Box)(({ theme }) => ({
+  width: '87%',
+  overflowX: 'auto',
+  display: 'flex',
+  flex: 1,
+  justifyContent: 'flex-start',
+  padding: '20px',
+  gap: '20px',
+  '&::-webkit-scrollbar': {
+    width: '0.5em',
+    height: '0.5em',
+    backgroundColor: 'rgba(0, 0, 0, 0.1)',
+  },
+  '&::-webkit-scrollbar-thumb': {
+    backgroundColor: 'rgba(0, 0, 0, 0.2)',
+    borderRadius: '3px',
+
+    '&:hover': {
+      background: 'rgba(0, 0, 0, 0.3)',
+    },
+  },
+}))

package/src/components/Institutions/InsititutionsNotAssignedDialog .tsx

@@ -1,12 +1,12 @@
-import { Box, Typography } from '@mui/material'
-
-export default function InsititutionsNotAssignedDialog() {
-  return (
-    <Box padding="40px 10px">
-      <Typography variant="body2" textAlign="center">
-        You have not been assigned to any institutions. Please contact your
-        administrator.
-      </Typography>
-    </Box>
-  )
-}
+import { Box, Typography } from '@mui/material'
+
+export default function InsititutionsNotAssignedDialog() {
+  return (
+    <Box padding="40px 10px">
+      <Typography variant="body2" textAlign="center">
+        You have not been assigned to any institutions. Please contact your
+        administrator.
+      </Typography>
+    </Box>
+  )
+}

package/src/components/Institutions/InstitutionsDropdown.tsx

@@ -1,33 +1,33 @@
-import { useState } from 'react'
-import { FormSingleSelect } from '../HookForm'
-import { SingleSelect } from '../Input'
-import { InsititutionsStore } from '../../shared-state/InstitutionsStore'
-import { urlTenantKey } from '../../contexts/Providers'
-
-export default function SchoolSwitch() {
-  const { current, institutions } = InsititutionsStore.useState((s) => s)
-
-  const handleChange = (e) => {
-    localStorage.setItem('institution_key', e.target.value)
-    window.location.replace(
-      `${window.location.origin}/${urlTenantKey}/${e.target.value}`,
-    )
-  }
-
-  return (
-    <SingleSelect
-      containerProps={{
-        sx: {
-          minWidth: '200px',
-        },
-      }}
-      size="small"
-      options={institutions?.map((item) => ({
-        label: item.name,
-        value: item.code,
-      }))}
-      value={current?.code}
-      onChange={handleChange}
-    />
-  )
-}
+import { useState } from 'react'
+import { FormSingleSelect } from '../HookForm'
+import { SingleSelect } from '../Input'
+import { InsititutionsStore } from '../../shared-state/InstitutionsStore'
+import { urlTenantKey } from '../../contexts/Providers'
+
+export default function SchoolSwitch() {
+  const { current, institutions } = InsititutionsStore.useState((s) => s)
+
+  const handleChange = (e) => {
+    localStorage.setItem('institution_key', e.target.value)
+    window.location.replace(
+      `${window.location.origin}/${urlTenantKey}/${e.target.value}`,
+    )
+  }
+
+  return (
+    <SingleSelect
+      containerProps={{
+        sx: {
+          minWidth: '200px',
+        },
+      }}
+      size="small"
+      options={institutions?.map((item) => ({
+        label: item.name,
+        value: item.code,
+      }))}
+      value={current?.code}
+      onChange={handleChange}
+    />
+  )
+}

package/src/components/Institutions/index.tsx

@@ -1 +1 @@
-export { default } from './InsititutionsDialog'
+export { default } from './InsititutionsDialog'

package/src/components/Institutions/services.ts

@@ -1,12 +1,12 @@
-import axios from '../../config/axios'
-
-export const institutions = {
-  async fetchInsititutions() {
-    const res = await axios.get('/square/institutions')
-    return res.data
-  },
-  async fetchInsititutionByCode(code: string) {
-    const res = await axios.get(`/square/institutions/code/${code}`)
-    return res.data
-  },
-}
+import axios from '../../config/axios'
+
+export const institutions = {
+  async fetchInsititutions() {
+    const res = await axios.get('/square/institutions')
+    return res.data
+  },
+  async fetchInsititutionByCode(code: string) {
+    const res = await axios.get(`/square/institutions/code/${code}`)
+    return res.data
+  },
+}

package/src/components/JsonPreview.tsx

@@ -1,7 +1,7 @@
-export default function JsonPreview({ data }: { data: any }) {
-  return (
-    <div>
-      <pre>{JSON.stringify(data, null, 2)}</pre>
-    </div>
-  )
-}
+export default function JsonPreview({ data }: { data: any }) {
+  return (
+    <div>
+      <pre>{JSON.stringify(data, null, 2)}</pre>
+    </div>
+  )
+}

package/src/components/LabelValue.tsx

@@ -1,21 +1,21 @@
-import { Box, Stack, Typography } from '@mui/material'
-import { ReactNode } from 'react'
-
-export default function LabelValue({
-  label,
-  value,
-  reverse = false,
-}: {
-  label: string | ReactNode
-  value?: ReactNode
-  reverse?: boolean
-}) {
-  return (
-    <Stack flexDirection={reverse ? 'column-reverse' : 'column'} gap="6px">
-      <Typography variant="subtitle2">{label}</Typography>
-      <Typography paragraph fontWeight={600}>
-        {value ?? '-'}
-      </Typography>
-    </Stack>
-  )
-}
+import { Box, Stack, Typography } from '@mui/material'
+import { ReactNode } from 'react'
+
+export default function LabelValue({
+  label,
+  value,
+  reverse = false,
+}: {
+  label: string | ReactNode
+  value?: ReactNode
+  reverse?: boolean
+}) {
+  return (
+    <Stack flexDirection={reverse ? 'column-reverse' : 'column'} gap="6px">
+      <Typography variant="subtitle2">{label}</Typography>
+      <Typography paragraph fontWeight={600}>
+        {value ?? '-'}
+      </Typography>
+    </Stack>
+  )
+}

package/src/components/Layout/ChangePassword.tsx

@@ -1,49 +1,49 @@
-import { Button, Stack } from '@mui/material'
-import { useForm } from 'react-hook-form'
-import { toast } from 'react-toastify'
-import { FormTextField } from '..'
-import axios, { axiosErrorToast } from '../../config/axios'
-
-export default function ChangePassword({ close }) {
-  const { handleSubmit, control } = useForm()
-
-  const onSubmit = async (formData) => {
-    try {
-      await axios.post('/auth-server/auth/change-password', formData)
-      toast.success('Password Changed Successfully')
-    } catch (error) {
-      axiosErrorToast(error)
-    }
-  }
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <Stack gap={2}>
-        <FormTextField
-          label="Old Password"
-          control={control}
-          name="oldPassword"
-          required
-        />
-        <FormTextField
-          label="New Password"
-          control={control}
-          name="newPassword"
-          required
-        />
-        <FormTextField
-          label="Confirm Password"
-          control={control}
-          name="password"
-          required
-        />
-        <Stack>
-          <Button variant="outlined" onClick={close}>
-            Cancel
-          </Button>
-          <Button type="submit">Submit</Button>
-        </Stack>
-      </Stack>
-    </form>
-  )
-}
+import { Button, Stack } from '@mui/material'
+import { useForm } from 'react-hook-form'
+import { toast } from 'react-toastify'
+import { FormTextField } from '..'
+import axios, { axiosErrorToast } from '../../config/axios'
+
+export default function ChangePassword({ close }) {
+  const { handleSubmit, control } = useForm()
+
+  const onSubmit = async (formData) => {
+    try {
+      await axios.post('/auth-server/auth/change-password', formData)
+      toast.success('Password Changed Successfully')
+    } catch (error) {
+      axiosErrorToast(error)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Stack gap={2}>
+        <FormTextField
+          label="Old Password"
+          control={control}
+          name="oldPassword"
+          required
+        />
+        <FormTextField
+          label="New Password"
+          control={control}
+          name="newPassword"
+          required
+        />
+        <FormTextField
+          label="Confirm Password"
+          control={control}
+          name="password"
+          required
+        />
+        <Stack>
+          <Button variant="outlined" onClick={close}>
+            Cancel
+          </Button>
+          <Button type="submit">Submit</Button>
+        </Stack>
+      </Stack>
+    </form>
+  )
+}