@campxdev/shared 1.8.14 → 1.8.16

package/src/components/Tabs/index.tsx

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

package/src/components/Tabs/styles.tsx

@@ -0,0 +1,55 @@
+import { Box, Stack, styled, Tabs } from '@mui/material'
+
+export const StyledTabs = styled(Tabs)<{
+  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,
+  }),
+}))
+
+export const StyledContainer = styled(Stack)(({ theme }) => ({
+  borderRadius: '10px',
+  // border: theme.borders.grayLight,
+}))
+
+export const StyledComponentWrapper = styled(Box)<{
+  containerVariant: 'page' | 'box'
+}>(({ theme, containerVariant }) => ({
+  padding: '15px',
+  height: '100%',
+  ...(containerVariant === 'page' && {
+    padding: '15px 0',
+  }),
+}))
+
+export const StyledTabsWrapper = styled(Box)(({ theme }) => ({
+  borderBottom: theme.borders.grayLight,
+}))

package/src/components/ToastContainer/ToastContainer.tsx

@@ -0,0 +1,57 @@
+import { Done, Close, WarningAmberRounded } from '@mui/icons-material'
+import { Box } from '@mui/material'
+import { Slide, ToastContainer as ReactToastContainer } from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
+import WarningAmberRoundedIcon from '@mui/icons-material/WarningAmberRounded'
+
+export default function ToastContainer() {
+  return (
+    <ReactToastContainer
+      containerId={'toast-container'}
+      position="bottom-center"
+      autoClose={4000}
+      hideProgressBar={true}
+      newestOnTop={false}
+      transition={Slide}
+      closeOnClick
+      rtl={false}
+      pauseOnFocusLoss={false}
+      draggable
+      pauseOnHover
+      theme="colored"
+      icon={({ type }) => <Icon type={type} />}
+    />
+  )
+}
+
+const Icon = ({ type }) => {
+  const renderIcon = () => {
+    switch (type) {
+      case 'error':
+        return <Close />
+      case 'success':
+        return <Done />
+      case 'warning':
+        return <WarningAmberRounded />
+
+      default:
+        return <Done />
+    }
+  }
+
+  return (
+    <Box
+      sx={{
+        background: 'rgba(0, 0, 0, 0.1)',
+        minWidth: '50px',
+        height: '100%',
+        alignSelf: 'stretch',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      {renderIcon()}
+    </Box>
+  )
+}

package/src/components/ToastContainer/index.tsx

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

package/src/components/UploadButton/UploadButton.tsx

@@ -0,0 +1,126 @@
+import { Button, CircularProgress, styled } from '@mui/material'
+import { useRef, useState } from 'react'
+import { toast } from 'react-toastify'
+import axios from '../../config/axios'
+import { UploadButtonProps } from './types'
+
+const getAccept = (type: UploadButtonProps['type']) => {
+  switch (type) {
+    case 'file':
+      return '.xlsx,.xls,.doc, .docx,.ppt, .pptx,.txt,.pdf'
+    case 'image':
+      return 'image/*'
+    case 'video':
+      return 'video/*'
+    case 'audio':
+      return 'audio/*'
+  }
+}
+
+export default function UploadButton({
+  type,
+  onChange,
+  uploadUrl,
+  onSuccess,
+  styledUpload,
+  loadingState,
+  refetchFn,
+}: UploadButtonProps) {
+  const [loading, setLoading] = useState<boolean>(false)
+
+  const formRef: any = useRef()
+  const fileInputRef: any = useRef()
+  const ref: any = useRef()
+  const handleChange = (e: any) => {
+    if (e.target.files[0]) {
+      const formData = new FormData()
+      formData.append('file', e.target.files[0])
+      setLoading(true)
+      loadingState && loadingState(true)
+      axios
+        .post(uploadUrl, formData)
+        .then((res) => {
+          onChange({
+            url: res.data.url,
+            key: res.data.key,
+            type: type,
+            fileName: res.data?.mediaObject?.originalFileName ?? '',
+            id: res.data?.mediaObject?.id ?? '',
+          })
+          refetchFn()
+          setLoading(false)
+          loadingState && loadingState(false)
+          if (onSuccess) onSuccess()
+          formRef?.current.reset()
+        })
+        .catch((err) => {
+          setLoading(false)
+          loadingState && loadingState(false)
+          toast.error(
+            err?.response?.data?.message ?? 'Server Error While Uploading File',
+          )
+          !styledUpload && formRef?.current.reset()
+        })
+    }
+  }
+
+  return (
+    <>
+      {styledUpload ? (
+        <>
+          <div
+            onClick={() => {
+              ref.current.click()
+            }}
+          >
+            {styledUpload}
+          </div>
+          <input
+            accept={getAccept(type)}
+            type="file"
+            hidden
+            ref={ref}
+            onChange={handleChange}
+          />
+        </>
+      ) : (
+        <>
+          <form ref={formRef}>
+            <input
+              ref={fileInputRef}
+              type="file"
+              style={{ display: 'none' }}
+              accept={getAccept(type)}
+              onChange={handleChange}
+            />
+            <StyledButton
+              fullWidth
+              endIcon={loading ? <CircularProgress size={16} /> : null}
+              variant="outlined"
+              disabled={loading}
+              size={'large'}
+              onClick={() => fileInputRef.current.click()}
+            >
+              {getLabel(type)}
+            </StyledButton>
+          </form>
+        </>
+      )}
+    </>
+  )
+}
+
+const getLabel = (type) => {
+  switch (type) {
+    case 'file':
+      return 'File'
+    case 'image':
+      return 'Image'
+    case 'video':
+      return 'Video'
+    case 'audio':
+      return 'Audio'
+  }
+}
+
+const StyledButton = styled(Button)(({ theme }) => ({}))

package/src/components/UploadButton/index.tsx

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

package/src/components/UploadButton/types.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from "react"
+
+interface Media {
+  type: 'image' | 'video' | 'audio' | 'file'
+  url: string
+  key: string
+  fileName?: string
+  id?: any
+}
+interface UploadButtonProps {
+  type: 'file' | 'image' | 'video' | 'audio'
+  onChange: (res: Media) => void
+  uploadUrl: string
+  onSuccess?: () => void
+  styledUpload?: ReactNode
+  loadingState?: (v) => void
+  refetchFn?: () => void
+}
+export type { Media, UploadButtonProps }

package/src/components/UploadDocument.tsx

@@ -0,0 +1,108 @@
+import { Box, CircularProgress, Stack, styled, Typography } from '@mui/material'
+import { ReactNode, useRef, useState } from 'react'
+import AttachFileIcon from '@mui/icons-material/AttachFile'
+import { toast } from 'react-toastify'
+import axios from '../config/axios'
+
+export default function UploadDocument({
+  accept = '.doc,.docx,.pdf',
+  styledUpload,
+  postUrl,
+  postBody,
+  styleProps,
+  refetchFn,
+  width,
+  height,
+}: {
+  accept?: string
+  styledUpload?: ReactNode
+  postUrl: string
+  postBody?: object
+  refetchFn?: () => void
+  styleProps?: any
+  width?: string
+  height?: string
+}) {
+  const [loading, setLoading] = useState(false)
+  const fileRef = useRef<any>()
+
+  const handleChange = (e) => {
+    if (e.target.files[0]) {
+      const formData = new FormData()
+      formData.append('file', e.target.files[0])
+      if (postBody) {
+        Object?.keys(postBody)?.forEach((key) => {
+          formData?.append(key, postBody[key])
+        })
+      }
+
+      setLoading(true)
+      axios
+        .post(postUrl, formData)
+        .then((res) => {
+          setLoading(false)
+          refetchFn()
+        })
+        .catch((err) => {
+          setLoading(false)
+          toast.error('Server Error While Uploading File')
+        })
+    }
+  }
+
+  return (
+    <>
+      {styledUpload ? (
+        <div
+          onClick={() => {
+            fileRef.current.click()
+          }}
+          style={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            ...styleProps,
+          }}
+        >
+          {loading ? <CircularProgress size={30} /> : styledUpload}
+        </div>
+      ) : (
+        <StyledImageLabel
+          onClick={() => {
+            fileRef.current.click()
+          }}
+        >
+          <AttachFileIcon />
+          <Typography sx={{ opacity: '0.6' }}>
+            {loading ? 'Uploading...' : `Upload File`}
+          </Typography>
+        </StyledImageLabel>
+      )}
+      <input
+        type="file"
+        ref={fileRef}
+        style={{ display: 'none' }}
+        accept={accept}
+        onChange={handleChange}
+      />
+    </>
+  )
+}
+
+export const StyledImageLabel = styled('div')(({ theme }) => ({
+  cursor: 'pointer',
+  borderRadius: '10px',
+  width: '100%',
+  height: '150px',
+  border: '1px dashed #0000001A',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  '&:hover': {
+    backgroundColor: '#EFEFEF',
+  },
+  '& > *': {
+    color: theme.palette.text.disabled,
+  },
+}))

package/src/components/UploadFileDialog/UploadFileDialog.tsx

@@ -0,0 +1,238 @@
+import { Add, Close } from '@mui/icons-material'
+import {
+  alpha,
+  Box,
+  Button,
+  ButtonProps,
+  CircularProgress,
+  Dialog,
+  DialogContent,
+  DialogProps,
+  IconButton,
+  styled,
+  Typography,
+} from '@mui/material'
+import { DeleteButton, EditButton } from '../IconButtons'
+import { ReactNode, useEffect, useRef, useState } from 'react'
+import { toast } from 'react-toastify'
+import axios, { axiosErrorToast } from '../../config/axios'
+const animatedImage = require('./AnimatedUploadFile.gif')
+
+const StyledDialogHeader = styled(Box)(({ theme }) => ({
+  height: '64px',
+  backgroundColor: alpha(theme.palette.text.secondary, 0.1),
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '0.6rem 1rem',
+}))
+const StyledDialogContent = styled(DialogContent)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '1rem',
+  alignItems: 'center',
+  padding: '40px',
+}))
+
+const StyledImage = styled((props: any) => (
+  <Box>
+    <img {...props} />
+  </Box>
+))(({ theme }) => ({
+  height: '90px',
+  width: '90px',
+  '> img': {
+    width: '100%',
+    height: '100%',
+    objectFit: 'contain',
+  },
+}))
+
+const StyledChooseFileButton = styled(Button)(({ theme }) => ({
+  padding: '15px 20px',
+  height: '50px',
+  '> .MuiBox-root': {
+    display: 'flex',
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+}))
+
+const StyledFileLabel = styled(Box)(({ theme }) => ({
+  background: theme.palette.secondary.light,
+  borderRadius: '5px',
+  padding: '16px',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+}))
+
+interface UploadFileDialogProps {
+  buttonProps?: ButtonProps
+  dialogProps?: DialogProps
+  buttonText: string | ReactNode
+  children?: ReactNode
+  dialogTitle: ReactNode | string
+  sampleFileUrl?: string
+  uploadUrl: string
+  successMessage?: string
+  refetchFn: () => void
+  postBody?: { [key: string]: string }
+}
+
+export default function UploadFileDialog({
+  buttonProps,
+  dialogProps,
+  buttonText,
+  dialogTitle,
+  uploadUrl,
+  sampleFileUrl,
+  successMessage,
+  refetchFn,
+  postBody = {},
+}: UploadFileDialogProps) {
+  const inputRef: any = useRef(null)
+  const [loading, setLoading] = useState(false)
+
+  const [file, setFile] = useState(null)
+  const [open, setOpen] = useState(false)
+  const onClose = () => {
+    setOpen(false)
+  }
+
+  const triggerUpload = () => {
+    if (!inputRef.current) return
+    inputRef?.current?.click()
+  }
+
+  const handleImageChange = (e) => {
+    setFile(e.target.files[0])
+  }
+
+  const handleOnUpload = () => {
+    if (!file) return ``
+    const formData = new FormData()
+    formData.append('file', file)
+    if (postBody) {
+      Object.keys(postBody).forEach((key) => {
+        formData.append(key, postBody[key])
+      })
+    }
+    setLoading(true)
+
+    axios
+      .post(uploadUrl, formData)
+      .then((res) => {
+        setLoading(false)
+        refetchFn()
+        setOpen(false)
+        toast.success(successMessage ?? 'Successful')
+        setFile(null)
+      })
+      .catch((err) => {
+        console.log(err)
+        setLoading(false)
+        axiosErrorToast(err)
+      })
+  }
+
+  useEffect(() => {
+    return () => {
+      setFile(null)
+      inputRef.current = null
+    }
+  }, [])
+
+  return (
+    <>
+      <Button
+        onClick={() => {
+          setOpen(true)
+        }}
+        variant="outlined"
+        {...buttonProps}
+      >
+        {buttonText}
+      </Button>
+      <Dialog
+        open={open}
+        onClose={onClose}
+        maxWidth="sm"
+        fullWidth
+        {...dialogProps}
+      >
+        <StyledDialogHeader>
+          <Typography fontWeight={600}>{dialogTitle}</Typography>
+          <IconButton onClick={onClose}>
+            <Close />
+          </IconButton>
+        </StyledDialogHeader>
+        <StyledDialogContent>
+          <StyledImage src={animatedImage} alt="Upload Image" />
+          <Typography variant="h6">{dialogTitle}</Typography>
+          <Typography textAlign={'center'}>
+            Before importing, download Sample CSV File or Sample XLSX file and
+            compare it with your sheet or edit the sample sheet
+          </Typography>
+          <Box sx={{ minWidth: '400px', marginBottom: '20px' }}>
+            {!file ? (
+              <>
+                <input
+                  onChange={handleImageChange}
+                  hidden
+                  type="file"
+                  ref={inputRef}
+                />
+                <StyledChooseFileButton
+                  variant="outlined"
+                  fullWidth
+                  onClick={triggerUpload}
+                >
+                  <Box>
+                    <Typography variant="h6" color="primary">
+                      Choose File
+                    </Typography>
+                    <Add />
+                  </Box>
+                </StyledChooseFileButton>
+              </>
+            ) : (
+              <StyledFileLabel>
+                <Typography variant="body2">{file?.name}</Typography>
+                <Box display={'flex'} gap="16px">
+                  <EditButton
+                    onClick={() => {
+                      triggerUpload()
+                    }}
+                  />
+                  <DeleteButton onClick={() => setFile(null)} />
+                </Box>
+              </StyledFileLabel>
+            )}
+          </Box>
+
+          <Button
+            fullWidth
+            sx={{ maxWidth: '255px' }}
+            onClick={handleOnUpload}
+            endIcon={
+              loading ? (
+                <CircularProgress size={20} sx={{ color: 'white' }} />
+              ) : null
+            }
+          >
+            Upload File
+          </Button>
+          {sampleFileUrl && (
+            <a href={sampleFileUrl} target="_blank" rel="noreferrer">
+              <Button fullWidth sx={{ maxWidth: '255px' }} variant="outlined">
+                Download Sample File
+              </Button>
+            </a>
+          )}
+        </StyledDialogContent>
+      </Dialog>
+    </>
+  )
+}

package/src/components/UploadFileDialog/index.tsx

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