@campxdev/react-blueprint 1.7.10 → 1.7.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "1.7.10",
+  "version": "1.7.12",
   "main": "./export.ts",
   "dependencies": {
     "@emotion/react": "^11.13.3",

package/src/App.tsx

@@ -1,7 +1,8 @@
-import { LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
+import { Button } from '@mui/material';
+import { useForm } from 'react-hook-form';
+
 import './App.css';
-import { ActivityLogView } from './components/export';
+import { FileUpload, FormControlWrapper } from './components/export';
 
 interface RowType {
   lastName: string;
@@ -10,82 +11,25 @@ interface RowType {
 }
 
 function App() {
+  const { control, watch, handleSubmit } = useForm({});
+
+  const onSubmit = (formData: any) => {
+    console.log(formData);
+  };
+
   return (
     <div
       style={{
         display: 'flex',
         justifyContent: 'flex-start',
         paddingLeft: '16px',
+        flexDirection: 'column',
       }}
     >
-      <LocalizationProvider dateAdapter={AdapterDateFns}>
-        <ActivityLogView
-          activitiesData={[
-            {
-              userName: 'ss',
-              action: 'create',
-              message: 's',
-              timestamp: new Date().toISOString(),
-            },
-            {
-              userName: 'ss',
-              action: 'update',
-              message: 's',
-              timestamp: new Date().toISOString(),
-            },
-            {
-              userName: 'ss',
-              action: 'update',
-              message: 's',
-              timestamp: new Date().toISOString(),
-            },
-            {
-              userName: 'ss',
-              action: 'update',
-              message: 's',
-              timestamp: new Date().toISOString(),
-            },
-            {
-              userName: 'ss',
-              action: 'update',
-              message: 's',
-              timestamp: new Date().toISOString(),
-            },
-            {
-              userName: 'ss',
-              action: 'delete',
-              message: 's',
-              timestamp: new Date().toISOString(),
-            },
-            {
-              userName: 'ss',
-              action: 'update',
-              message: 's',
-              timestamp: new Date().toISOString(),
-            },
-            {
-              userName: 'ss',
-              action: 'update',
-              message: 's',
-              timestamp: new Date().toISOString(),
-            },
-          ]}
-          isFetchingNextPage={false}
-          fetchNextPage={function (): void {
-            // throw new Error('Function not implemented.');
-          }}
-          hasNextPage={undefined}
-          fromDate={null}
-          toDate={null}
-          setFromDate={function (date: Date | null): void {
-            // throw new Error('Function not implemented.');
-          }}
-          setToDate={function (date: Date | null): void {
-            // throw new Error('Function not implemented.');
-          }}
-          isLoading={false}
-        />
-      </LocalizationProvider>
+      <FormControlWrapper control={control}>
+        <FileUpload label={'Files'} name="daaku" files={watch().daaku} />
+      </FormControlWrapper>
+      <Button onClick={handleSubmit(onSubmit)}>Submit</Button>
     </div>
   );
 }

package/src/components/Assets/Icons/IconComponents/ScholarshipIcon.tsx

@@ -0,0 +1,55 @@
+import { useTheme } from '@mui/material';
+
+const ScholarshipIcon = ({
+  color,
+  size = 16,
+}: {
+  color?: string;
+  size?: number;
+}) => {
+  const theme = useTheme();
+  color = color ?? theme.palette.text.black;
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 30 30"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clip-path="url(#clip0_4286_29361)">
+        <path
+          d="M15.0001 28.4369C14.614 28.4398 14.2313 28.365 13.8748 28.2168C13.5183 28.0686 13.1953 27.8501 12.9251 27.5744L11.0251 25.6744C10.8107 25.4997 10.5501 25.3911 10.2751 25.3619H7.57508C7.18919 25.3624 6.80698 25.2868 6.45037 25.1393C6.09375 24.9919 5.76973 24.7755 5.49686 24.5026C5.22398 24.2298 5.00763 23.9057 4.86018 23.5491C4.71273 23.1925 4.63709 22.8103 4.63758 22.4244V19.7244C4.6084 19.4494 4.49982 19.1888 4.32508 18.9744L2.42508 17.0744C2.15151 16.8026 1.93446 16.4793 1.78643 16.1231C1.6384 15.767 1.56232 15.3851 1.56258 14.9994C1.55966 14.6133 1.63452 14.2307 1.78271 13.8742C1.93089 13.5177 2.14936 13.1946 2.42508 12.9244L4.32508 11.0244C4.49982 10.81 4.6084 10.5494 4.63758 10.2744V7.57441C4.63709 7.18851 4.71273 6.80631 4.86018 6.44969C5.00763 6.09308 5.22398 5.76905 5.49686 5.49618C5.76973 5.22331 6.09375 5.00696 6.45037 4.85951C6.80698 4.71206 7.18919 4.63642 7.57508 4.63691H10.2751C10.5501 4.60773 10.8107 4.49915 11.0251 4.32441L12.9251 2.42441C13.4861 1.8947 14.2285 1.59961 15.0001 1.59961C15.7717 1.59961 16.514 1.8947 17.0751 2.42441L18.9751 4.32441C19.1895 4.49915 19.4501 4.60773 19.7251 4.63691H22.4251C22.811 4.63642 23.1932 4.71206 23.5498 4.85951C23.9064 5.00696 24.2304 5.22331 24.5033 5.49618C24.7762 5.76905 24.9925 6.09308 25.14 6.44969C25.2874 6.80631 25.3631 7.18851 25.3626 7.57441V10.2744C25.3918 10.5494 25.5003 10.81 25.6751 11.0244L27.5751 12.9244C27.8487 13.1963 28.0657 13.5196 28.2137 13.8757C28.3618 14.2318 28.4378 14.6137 28.4376 14.9994C28.4405 15.3855 28.3656 15.7682 28.2175 16.1247C28.0693 16.4812 27.8508 16.8042 27.5751 17.0744L25.6751 18.9744C25.5003 19.1888 25.3918 19.4494 25.3626 19.7244V22.4244C25.3631 22.8103 25.2874 23.1925 25.14 23.5491C24.9925 23.9057 24.7762 24.2298 24.5033 24.5026C24.2304 24.7755 23.9064 24.9919 23.5498 25.1393C23.1932 25.2868 22.811 25.3624 22.4251 25.3619H19.7251C19.4501 25.3911 19.1895 25.4997 18.9751 25.6744L17.0751 27.5744C16.8048 27.8501 16.4818 28.0686 16.1253 28.2168C15.7688 28.365 15.3861 28.4398 15.0001 28.4369ZM5.65008 17.6494C6.17686 18.2154 6.48292 18.9518 6.51258 19.7244V22.4244C6.51242 22.564 6.53979 22.7022 6.59313 22.8312C6.64646 22.9602 6.72472 23.0774 6.82341 23.1761C6.92211 23.2748 7.0393 23.353 7.16829 23.4064C7.29727 23.4597 7.43551 23.4871 7.57508 23.4869H10.2751C11.0478 23.5165 11.7841 23.8225 12.3501 24.3494L14.2501 26.2494C14.4523 26.442 14.7208 26.5494 15.0001 26.5494C15.2793 26.5494 15.5479 26.442 15.7501 26.2494L17.6501 24.3494C18.216 23.8225 18.9524 23.5165 19.7251 23.4869H22.4251C22.5647 23.4871 22.7029 23.4597 22.8319 23.4064C22.9609 23.353 23.0781 23.2748 23.1768 23.1761C23.2754 23.0774 23.3537 22.9602 23.407 22.8312C23.4604 22.7022 23.4877 22.564 23.4876 22.4244V19.7244C23.5172 18.9518 23.8233 18.2154 24.3501 17.6494L26.2501 15.7494C26.3491 15.6512 26.4277 15.5344 26.4813 15.4057C26.535 15.2769 26.5626 15.1389 26.5626 14.9994C26.5626 14.86 26.535 14.7219 26.4813 14.5932C26.4277 14.4644 26.3491 14.3476 26.2501 14.2494L24.3501 12.3494C23.8233 11.7834 23.5172 11.0471 23.4876 10.2744V7.57441C23.4877 7.43483 23.4604 7.2966 23.407 7.16761C23.3537 7.03863 23.2754 6.92144 23.1768 6.82274C23.0781 6.72405 22.9609 6.64579 22.8319 6.59245C22.7029 6.53912 22.5647 6.51175 22.4251 6.51191H19.7251C18.9524 6.48236 18.216 6.17628 17.6501 5.64941L15.7501 3.74941C15.5479 3.55683 15.2793 3.44941 15.0001 3.44941C14.7208 3.44941 14.4523 3.55683 14.2501 3.74941L12.3501 5.64941C11.7841 6.17628 11.0478 6.48236 10.2751 6.51191H7.57508C7.43551 6.51175 7.29727 6.53912 7.16829 6.59245C7.0393 6.64579 6.92211 6.72405 6.82341 6.82274C6.72472 6.92144 6.64646 7.03863 6.59313 7.16761C6.53979 7.2966 6.51242 7.43483 6.51258 7.57441V10.2744C6.48292 11.0471 6.17686 11.7834 5.65008 12.3494L3.75008 14.2494C3.65106 14.3476 3.57247 14.4644 3.51883 14.5932C3.4652 14.7219 3.43758 14.86 3.43758 14.9994C3.43758 15.1389 3.4652 15.2769 3.51883 15.4057C3.57247 15.5344 3.65106 15.6512 3.75008 15.7494L5.65008 17.6494Z"
+          fill={color}
+          stroke={color}
+          strokeWidth="0.4"
+        />
+        <path
+          d="M18.7508 19.9999C18.503 20.0024 18.2601 19.9312 18.0529 19.7954C17.8457 19.6595 17.6836 19.4652 17.5871 19.237C17.4905 19.0088 17.464 18.7571 17.5108 18.5138C17.5576 18.2705 17.6757 18.0466 17.85 17.8706C18.0243 17.6945 18.247 17.5742 18.4898 17.5249C18.7326 17.4757 18.9846 17.4997 19.2137 17.5939C19.4428 17.6882 19.6388 17.8484 19.7767 18.0542C19.9146 18.26 19.9883 18.5022 19.9883 18.7499C19.9893 18.9133 19.958 19.0753 19.8963 19.2266C19.8347 19.3779 19.7437 19.5155 19.6288 19.6316C19.5138 19.7477 19.3771 19.84 19.2265 19.9032C19.0758 19.9664 18.9142 19.9993 18.7508 19.9999Z"
+          fill={color}
+          stroke={color}
+          strokeWidth="0.4"
+        />
+        <path
+          d="M11.2625 12.4999C11.0148 12.5024 10.7719 12.4312 10.5647 12.2954C10.3575 12.1595 10.1953 11.9652 10.0988 11.737C10.0022 11.5088 9.9757 11.2571 10.0225 11.0138C10.0693 10.7705 10.1874 10.5466 10.3617 10.3706C10.536 10.1945 10.7587 10.0742 11.0015 10.0249C11.2443 9.9757 11.4963 9.99971 11.7254 10.0939C11.9546 10.1882 12.1505 10.3484 12.2884 10.5542C12.4264 10.76 12.5 11.0022 12.5 11.2499C12.501 11.4133 12.4697 11.5753 12.4081 11.7266C12.3464 11.8779 12.2555 12.0155 12.1405 12.1316C12.0256 12.2477 11.8888 12.34 11.7382 12.4032C11.5875 12.4664 11.4259 12.4993 11.2625 12.4999Z"
+          fill={color}
+          stroke={color}
+          strokeWidth="0.4"
+        />
+        <path
+          d="M11.2486 19.6905C11.1254 19.6909 11.0034 19.6668 10.8897 19.6196C10.7759 19.5724 10.6727 19.503 10.5861 19.4155C10.412 19.2389 10.3145 19.0009 10.3145 18.753C10.3145 18.505 10.412 18.2671 10.5861 18.0905L18.0861 10.5905C18.2638 10.4249 18.4989 10.3347 18.7417 10.339C18.9846 10.3433 19.2163 10.4417 19.3881 10.6135C19.5599 10.7852 19.6583 11.017 19.6625 11.2598C19.6668 11.5027 19.5767 11.7378 19.4111 11.9155L11.9111 19.4155C11.8244 19.503 11.7212 19.5724 11.6075 19.6196C11.4937 19.6668 11.3717 19.6909 11.2486 19.6905Z"
+          fill={color}
+          stroke={color}
+          strokeWidth="0.4"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_4286_29361">
+          <rect width={size} height={size} fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default ScholarshipIcon;

package/src/components/Assets/Icons/IconComponents/ThreeDotsMenuIcon.tsx

@@ -0,0 +1,45 @@
+import { useTheme } from '@mui/material';
+
+export const ThreeDotsMenuIcon = ({
+  size = 16,
+  color,
+  backgroundColor,
+}: {
+  size?: number;
+  color?: string;
+  backgroundColor?: string;
+}) => {
+  const theme = useTheme();
+  const fill = color ?? theme.palette.primary.main;
+  const background = backgroundColor || theme.palette.secondary.main;
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clip-path="url(#clip0_462_9729)">
+        <rect width="24" height="24" rx="4" fill={background} />
+        <path
+          d="M16 11.9999C16 12.8836 16.7163 13.5999 17.6 13.5999C18.4836 13.5999 19.2 12.8836 19.2 11.9999C19.2 11.1162 18.4836 10.3999 17.6 10.3999C16.7163 10.3999 16 11.1162 16 11.9999Z"
+          fill={fill}
+        />
+        <path
+          d="M10.4 11.9999C10.4 12.8836 11.1163 13.5999 12 13.5999C12.8836 13.5999 13.6 12.8836 13.6 11.9999C13.6 11.1162 12.8836 10.3999 12 10.3999C11.1163 10.3999 10.4 11.1162 10.4 11.9999Z"
+          fill={fill}
+        />
+        <path
+          d="M4.8 11.9999C4.8 12.8836 5.51634 13.5999 6.4 13.5999C7.28366 13.5999 8 12.8836 8 11.9999C8 11.1162 7.28366 10.3999 6.4 10.3999C5.51634 10.3999 4.8 11.1162 4.8 11.9999Z"
+          fill={fill}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_462_9729">
+          <rect width="24" height="24" rx="4" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

package/src/components/Assets/Icons/Icons.tsx

@@ -100,6 +100,7 @@ import { ResourcesIcon } from './IconComponents/ResourcesIcon';
 import { RightIcon } from './IconComponents/RightIcon';
 import { RouteIcon } from './IconComponents/RoutesIcon';
 import { SaveIcon } from './IconComponents/SaveIcon';
+import ScholarshipIcon from './IconComponents/ScholarshipIcon';
 import { SearchIcon } from './IconComponents/SearchIcon';
 import { SettlementsIcon } from './IconComponents/SettlementsIcon';
 import { ShareIcon } from './IconComponents/ShareIcon';
@@ -110,6 +111,7 @@ import { StudentsIcon } from './IconComponents/StudentsIcon';
 import { SuccessFilledIcon } from './IconComponents/SuccessFilledIcon';
 import { TasksIcon } from './IconComponents/TasksIcon';
 import { TextLocalIcon } from './IconComponents/TextLocalIcon';
+import { ThreeDotsMenuIcon } from './IconComponents/ThreeDotsMenuIcon';
 import { TicketSystemIcon } from './IconComponents/TicketingSystemIcon';
 import { TicketsIcon } from './IconComponents/TicketsIcon';
 import { TimeTableIcon } from './IconComponents/TimeTableIcon';
@@ -133,6 +135,7 @@ export const Icons = {
   RedoIcon,
   WhatsappIcon,
   AssignmentIcon,
+  ThreeDotsMenuIcon,
   ReportIssueIcon,
   SmsIcon,
   EmailIcon,
@@ -145,6 +148,7 @@ export const Icons = {
   AddSquare,
   DoneSquare,
   ExpandIcon,
+  ScholarshipIcon,
   AppsIcon,
   CareerIcon,
   ClogWheelIcon,

package/src/components/DataDisplay/Card/styles.tsx

@@ -24,7 +24,7 @@ export const StyledButton = styled(Button)(({ theme }) => ({
 
 export const StyledImage = styled('img')(({ theme }) => ({
   height: '216px',
-  width: '385px',
+  width: '400px',
   objectFit: 'cover',
 }));
 

package/src/components/Input/DateTimePicker/DateTimePicker.tsx

@@ -0,0 +1,95 @@
+import { StackProps } from '@mui/material';
+import {
+  DateTimePicker as MuiDateTimePicker,
+  DateTimePickerProps as MuiDateTimePickerProps,
+  PickersShortcutsItem,
+  PickerValidDate,
+} from '@mui/x-date-pickers';
+import { format as DateFnsFormat } from 'date-fns';
+
+import { Icons } from '../../export';
+import { LabelWrapper } from '../LabelWrapper/LabelWrapper';
+
+type DateTimePickerProps<
+  TDate extends PickerValidDate,
+  TEnableAccessibleFieldDOMStructure extends boolean = false,
+> = {
+  format?:
+    | 'yyyy'
+    | 'MMMM yyyy'
+    | 'MMM yyyy'
+    | 'dd MMMM yyyy'
+    | 'dd/MM/yyyy'
+    | 'MM/dd/yyyy'
+    | 'yyyy-MM-dd'
+    | 'yyyy-MM-dd hh:mm a'
+    | 'yyyy-MM-dd HH:mm'
+    | 'dd MMM yyyy HH:mm'
+    | 'dd MMM yyyy hh:mm a'
+    | 'dd/MM/yyyy hh:mm a'
+    | 'dd/MM/yyyy HH:mm'
+    | 'hh:mm a'
+    | 'HH:mm'
+    | 'hh:mm:ss a'
+    | 'HH:mm:ss'
+    | 'MMM dd, yyyy hh:mm a'
+    | 'MMMM dd, yyyy HH:mm'
+    | 'EEE, MMM dd yyyy'
+    | 'EEEE, MMMM dd, yyyy';
+  views?: ('year' | 'month' | 'day' | 'hours' | 'minutes' | 'seconds')[];
+  helperText?: string;
+  placeholder?: string;
+  shortcutsItems?: PickersShortcutsItem<any>[];
+  required?: boolean;
+  containerProps?: StackProps;
+  openPickerIcon?: React.ElementType;
+} & MuiDateTimePickerProps<TDate, TEnableAccessibleFieldDOMStructure>;
+
+export const DateTimePicker = <
+  TDate extends PickerValidDate,
+  TEnableAccessibleFieldDOMStructure extends boolean = false,
+>({
+  label,
+  name,
+  required = false,
+  format = 'dd MMM yyyy hh:mm a',
+  views = ['year', 'month', 'day', 'hours', 'minutes', 'seconds'],
+  helperText,
+  placeholder = '',
+  shortcutsItems = [],
+  openPickerIcon: Icon = Icons.NoteIcon,
+  containerProps,
+  value,
+  ...rest
+}: DateTimePickerProps<TDate, TEnableAccessibleFieldDOMStructure>) => {
+  return (
+    <LabelWrapper
+      label={label}
+      required={required}
+      name={name}
+      containerProps={containerProps}
+    >
+      <MuiDateTimePicker
+        format={format}
+        views={views}
+        defaultValue={value}
+        slotProps={{
+          textField: {
+            helperText,
+            placeholder,
+          },
+          shortcuts: {
+            items: shortcutsItems,
+          },
+        }}
+        slots={{
+          openPickerIcon: Icon,
+        }}
+        dayOfWeekFormatter={(day: any) => {
+          return `${DateFnsFormat(day, 'EEEE').slice(0, 2)}.`;
+        }}
+        {...rest}
+      />
+    </LabelWrapper>
+  );
+};

package/src/components/Input/FileUpload/FileUpload.tsx

@@ -0,0 +1,215 @@
+import {
+  Box,
+  FormLabel,
+  Stack,
+  styled,
+  SxProps,
+  useTheme,
+} from '@mui/material';
+import { IconButtons, Icons, PreviewFiles, Typography } from '../../export';
+
+export type FileUploadProps = {
+  label: string;
+  name: string;
+  disabled?: boolean;
+  files?: File[];
+  onChange?: (files: File[]) => void;
+  handleRemove?: (index: number) => void;
+  accept?: 'image/*' | '.pdf' | '.docx' | '.txt' | '*';
+  onInvalidFile?: (file: File) => void;
+  inputText?: string;
+  multiple?: boolean;
+  hideDeleteButton?: boolean;
+  errorText?: string;
+  sx?: SxProps;
+  showImage?: boolean;
+  previewSx?: SxProps;
+};
+
+export const FileUpload = ({
+  label,
+  name = 'file-input',
+  disabled = false,
+  onChange,
+  handleRemove,
+  files = [],
+  accept = '*',
+  inputText,
+  onInvalidFile,
+  hideDeleteButton = false,
+  multiple = true,
+  errorText,
+  showImage,
+  previewSx,
+  sx,
+}: FileUploadProps) => {
+  const theme = useTheme();
+
+  if (!onChange) {
+    return <Typography>onChange Missing</Typography>;
+  }
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files) {
+      const newFiles = Array.from(event.target.files);
+      const validFiles: File[] = [];
+      const invalidFiles: File[] = [];
+
+      newFiles.forEach((file) => {
+        if (
+          accept === '*' ||
+          file.type.match(accept) ||
+          file.name.match(accept)
+        ) {
+          validFiles.push(file);
+        } else {
+          invalidFiles.push(file);
+        }
+      });
+
+      invalidFiles.forEach((file) => onInvalidFile?.(file));
+
+      if (validFiles.length > 0) {
+        if (multiple) {
+          onChange([...files, ...validFiles]);
+        } else {
+          onChange([validFiles[0]]);
+        }
+      }
+    }
+  };
+
+  return (
+    <Stack sx={sx}>
+      <Typography variant="label1">{label}</Typography>
+      <input
+        accept={accept}
+        style={{ display: 'none' }}
+        id={name}
+        name={name}
+        type="file"
+        multiple={multiple}
+        disabled={disabled}
+        onChange={handleFileChange}
+      />
+
+      <FormLabel htmlFor={name}>
+        <StyledFileSelectorContainer>
+          <Stack display={'flex'} alignItems={'center'}>
+            <Icons.ExportIcon size={20} />
+            <Typography
+              color={
+                disabled
+                  ? theme.palette.secondary.dark
+                  : theme.palette.primary.main
+              }
+              variant="label2"
+            >
+              {inputText ?? 'Upload Files'}
+            </Typography>
+          </Stack>
+        </StyledFileSelectorContainer>
+        {errorText && (
+          <Typography
+            sx={{
+              display: 'flex',
+              alignItems: 'flex-end',
+              justifyContent: 'flex-end',
+              color: theme.palette.highlight.highlightRed,
+            }}
+            variant="caption"
+          >
+            {errorText}
+          </Typography>
+        )}
+      </FormLabel>
+
+      <Box display="flex" gap="12px" flexWrap="wrap">
+        {showImage ? (
+          files.map((file, index) => (
+            <StyledSelectedFileContainer key={index}>
+              <Box
+                sx={{
+                  height: '120px',
+                  display: 'flex',
+                  overflow: 'hidden',
+                  borderRadius: '8px',
+                }}
+              >
+                <img
+                  src={URL.createObjectURL(file)}
+                  style={{
+                    height: '100%',
+                    width: '100%',
+                    objectFit: 'cover',
+                  }}
+                  alt={`Preview ${index}`}
+                />
+              </Box>
+
+              {!disabled && !hideDeleteButton && (
+                <IconButtons.DeleteButton
+                  onClick={() => {
+                    const updatedFiles = [...files];
+                    updatedFiles.splice(index, 1);
+                    onChange(updatedFiles);
+                  }}
+                  size="small"
+                />
+              )}
+            </StyledSelectedFileContainer>
+          ))
+        ) : (
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              padding: '8px',
+              overflow: 'hidden',
+              backgroundColor: theme.palette.background.default,
+              borderRadius: '8px',
+            }}
+          >
+            <PreviewFiles
+              sx={previewSx}
+              files={files}
+              onChange={(newFiles) => onChange?.(newFiles)}
+            />
+          </Box>
+        )}
+      </Box>
+    </Stack>
+  );
+};
+
+const StyledSelectedFileContainer = styled(Box)(({ theme }) => ({
+  borderRadius: '10px',
+  position: 'relative',
+  flex: '1 1 auto',
+  textAlign: 'center',
+  marginTop: '5px',
+  minWidth: '400px',
+  '& > button': {
+    position: 'absolute',
+    right: '-4%',
+    top: '-10%',
+  },
+}));
+
+const StyledFileSelectorContainer = styled(Box)(({ theme }) => ({
+  border: '1.5px dotted',
+  height: '120px',
+  display: 'flex',
+  width: '100%',
+  borderRadius: '5px',
+  borderColor: theme.palette.primary.main,
+  justifyContent: 'center',
+  alignItems: 'center',
+  '&:hover': {
+    borderColor: theme.palette.primary.light,
+    backgroundColor: theme.palette.secondary.light,
+    transition:
+      'border-color 0.2s ease-in-out, background-color 0.2s ease-in-out',
+  },
+}));

package/src/components/Input/FormActions/FormActions.tsx

@@ -2,8 +2,8 @@ import { Stack, StackProps, useTheme } from '@mui/material';
 import { Button, ButtonProps } from '../export';
 
 export interface ButtonConfig extends ButtonProps {
-  title: string;
   show?: boolean;
+  title?: string;
   onClick?: () => void;
 }
 
@@ -21,36 +21,40 @@ function FormActions({
   showTopBorder = false,
 }: FormActionsProps) {
   const theme = useTheme();
+
   const defaultSubmitProps: ButtonConfig = {
-    title: 'Submit',
     show: true,
+    title: 'Submit',
     variant: 'contained',
     ...submitButtonProps,
   };
 
   const defaultCancelProps: ButtonConfig = {
-    title: 'Cancel',
     show: true,
+    title: 'Cancel',
     variant: 'text',
     disableRipple: true,
     ...cancelButtonProps,
   };
 
+  const buttons = [defaultSubmitProps, defaultCancelProps].filter(
+    (button) => button.show,
+  );
+
   return (
     <Stack
       direction="row"
       borderTop={
         showTopBorder ? `1px solid ${theme.palette.border.primary}` : 'none'
       }
-      sx={{ p: '12px 16px' }}
+      sx={{ p: '12px 16px', gap: '12px' }}
       {...stackProps}
     >
-      {defaultSubmitProps.show && (
-        <Button {...defaultSubmitProps}>{defaultSubmitProps.title}</Button>
-      )}
-      {defaultCancelProps.show && (
-        <Button {...defaultCancelProps}>{defaultCancelProps.title}</Button>
-      )}
+      {buttons.map((button, index) => (
+        <Button key={index} {...button}>
+          {button.title}
+        </Button>
+      ))}
     </Stack>
   );
 }

package/src/components/Input/FormControlWrapper/FormControlWrapper.tsx

@@ -2,6 +2,7 @@ import { Stack, SxProps } from '@mui/material';
 import { TextFieldProps } from '@mui/material/TextField';
 import React, { ReactElement, ReactNode, isValidElement } from 'react';
 import { Control, Controller, FieldValues, Path } from 'react-hook-form';
+import { FileUpload, FileUploadProps } from '../export';
 import FormActions, { FormActionsProps } from '../FormActions/FormActions';
 
 interface FormControlWrapperProps<T extends FieldValues = FieldValues> {
@@ -21,6 +22,8 @@ type ControlledElementProps<T extends FieldValues = FieldValues> = {
   error?: boolean;
   helperText?: ReactNode;
   children?: ReactNode;
+  files?: File[];
+  onChange?: (files: File[]) => void;
   [key: string]: any;
 } & TextFieldProps;
 
@@ -47,10 +50,19 @@ export function FormControlWrapper<T extends FieldValues = FieldValues>({
           name={name}
           control={control}
           render={({ field, fieldState: { error } }) => {
+            if (element.type === FileUpload) {
+              return React.cloneElement(element, {
+                ...(restProps as Partial<FileUploadProps>),
+                files: field.value || [],
+                ...field,
+                errorText: error ? error.message : undefined,
+              } as FileUploadProps);
+            }
             const additionalProps =
               element.type === 'input' && restProps.type === 'checkbox'
                 ? { checked: field.value }
                 : { value: field.value };
+            console.log(error);
             return React.cloneElement(element, {
               ...restProps,
               ...field,

package/src/components/Input/export.ts

@@ -1,5 +1,7 @@
 export * from './Button/Button';
 export * from './DatePicker/DatePicker';
+export * from './DateTimePicker/DateTimePicker';
+export * from './FileUpload/FileUpload';
 export * from './FormActions/FormActions';
 export * from './FormControlWrapper/FormControlWrapper';
 export * from './FormWrapper/FormWrapper';

package/src/components/Layout/AppHeader/AppHeader.tsx

@@ -1,4 +1,10 @@
-import { IconButton, Stack, useMediaQuery, useTheme } from '@mui/material';
+import {
+  IconButton,
+  Stack,
+  SxProps,
+  useMediaQuery,
+  useTheme,
+} from '@mui/material';
 import { ReactNode } from 'react';
 import { ReportIssueIcon } from '../../Assets/Icons/IconComponents/ReportIssueIcon';
 import { Typography } from '../../DataDisplay/Typography/Typography';
@@ -18,6 +24,7 @@ export interface AppHeaderProps {
   profileSx?: any;
   onLogoutClick?: any;
   showActiveDevices?: boolean;
+  headerSx?: SxProps;
 }
 
 export const AppHeader = ({
@@ -31,6 +38,7 @@ export const AppHeader = ({
   collapsed,
   institutionsData,
   showActiveDevices = true,
+  headerSx,
 }: AppHeaderProps) => {
   const theme = useTheme();
   const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
@@ -39,7 +47,11 @@ export const AppHeader = ({
     window.open('https://helpdesk.campx.in/helpdesk/my-tickets', '_blank');
   };
   return (
-    <StyledHeader collapsed={collapsed} className="appHeader">
+    <StyledHeader
+      collapsed={collapsed}
+      className="appHeader"
+      headerSx={headerSx}
+    >
       <Typography variant={isSmallScreen ? 'subtitle3' : 'subtitle2'}>
         {clientName}
       </Typography>

package/src/components/Layout/AppHeader/styles/styles.tsx

@@ -2,7 +2,14 @@ import { Box, Divider, styled } from '@mui/material';
 import { Link } from 'react-router-dom';
 
 export const StyledHeader = styled('header')(
-  ({ theme }: { theme?: any; collapsed: boolean }) => ({
+  ({
+    theme,
+    headerSx,
+  }: {
+    theme?: any;
+    collapsed: boolean;
+    headerSx?: any;
+  }) => ({
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
@@ -17,10 +24,11 @@ export const StyledHeader = styled('header')(
     [theme.breakpoints.down('md')]: {
       height: '50px',
       minHeight: '50px',
-      width: 'calc(100% - 84px)',
+      width: headerSx?.width?.sm ? headerSx?.width?.sm : 'calc(100% - 84px)',
       marginTop: '12px',
       padding: '0 12px',
     },
+    ...headerSx,
   }),
 );
 

package/src/components/Layout/PageContent/PageContent.tsx

@@ -1,5 +1,9 @@
 import { Box, BoxProps, styled } from '@mui/material';
 
+export type PageContentProps = {
+  variant?: 'stepper' | 'standard';
+} & BoxProps;
+
 const PageContentContainer = styled(Box)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
@@ -11,8 +15,21 @@ const PageContentContainer = styled(Box)(({ theme }) => ({
   borderRadius: '8px',
 }));
 
-export const PageContent = (props: BoxProps) => {
-  return (
+const PageStepperContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  flexDirection: 'column',
+  justifyContent: 'flex-start',
+  gap: '10px',
+}));
+
+export const PageContent = ({
+  variant = 'standard',
+  ...props
+}: PageContentProps) => {
+  return variant == 'stepper' ? (
+    <PageStepperContainer {...props}>{props.children}</PageStepperContainer>
+  ) : (
     <PageContentContainer gap="12px" {...props}>
       {props.children}
     </PageContentContainer>

package/src/components/Layout/StepperTitle/StepperTitle.tsx

@@ -0,0 +1,39 @@
+import { Box, BoxProps, styled } from '@mui/material';
+import { ReactNode } from 'react';
+import { Typography } from '../../export';
+
+export type StepperTitleProps = {
+  title?: string;
+  isShowTitle?: boolean;
+  content: ReactNode;
+  contentProps?: BoxProps;
+  titleProps?: BoxProps;
+};
+
+const StepperTitleContainer = styled(Box)(({ theme }) => ({
+  borderRadius: '8px',
+  minHeight: '100px',
+  minWidth: '60%',
+  backgroundColor: theme.palette.surface.paperBackground,
+}));
+
+const TitleContainer = styled(Box)(({ theme }) => ({
+  backgroundColor: theme.palette.surface.grey,
+  height: '45px',
+  display: 'flex',
+  alignItems: 'center',
+  paddingLeft: '16px',
+}));
+
+export const StepperTitle = (props: StepperTitleProps) => {
+  return (
+    <StepperTitleContainer {...props.contentProps}>
+      {props.isShowTitle && (
+        <TitleContainer {...props.titleProps}>
+          <Typography variant="subtitle3">{props.title}</Typography>
+        </TitleContainer>
+      )}
+      {props.content}
+    </StepperTitleContainer>
+  );
+};

package/src/components/Layout/export.ts

@@ -2,4 +2,5 @@ export * from './AppHeader/AppHeader';
 export * from './PageContent/PageContent';
 export * from './PageHeader/components/DensitySelector/DensitySelector';
 export * from './PageHeader/PageHeader';
+export * from './StepperTitle/StepperTitle';
 export * from './TabsLayout/TabsLayout';

package/src/components/Navigation/PreviewFiles/PreviewFiles.tsx

@@ -4,6 +4,7 @@ import {
   IconButton,
   Stack,
   styled,
+  SxProps,
   Typography,
   useTheme,
 } from '@mui/material';
@@ -15,6 +16,7 @@ export type PreviewFilesProps = {
   label?: string;
   onChange?: (newFiles: File[], deletedFile: File) => void;
   showDownload?: boolean;
+  sx?: SxProps;
 } & Omit<BoxProps, 'onChange'>;
 
 export const PreviewFiles = ({
@@ -22,6 +24,7 @@ export const PreviewFiles = ({
   label,
   onChange,
   showDownload,
+  sx,
   ...props
 }: PreviewFilesProps) => {
   const theme = useTheme(),
@@ -86,7 +89,7 @@ export const PreviewFiles = ({
   if (resolvedFiles.length === 0) return <></>;
 
   return (
-    <Box {...props}>
+    <Box sx={sx} {...props}>
       {label && (
         <Typography
           marginBottom={'8px'}
@@ -103,12 +106,16 @@ export const PreviewFiles = ({
             direction={'row'}
             sx={{ display: 'flex', alignItems: 'center', gap: '12px' }}
           >
-            {getFileIcon(file)}
+            <Box width={'30px'} height={'30px'}>
+              {getFileIcon(file)}
+            </Box>
+
             <Stack direction={'column'} marginLeft={'8px'}>
               <Typography
                 fontSize={'14px'}
                 color={theme.palette.primary.main}
                 variant="label2"
+                sx={{ wordBreak: 'break-all' }}
               >
                 {file.name}
               </Typography>
@@ -149,7 +156,7 @@ export const PreviewFiles = ({
 
 const PreviewContainer = styled(Box)(({ theme }) => ({
   width: '100%',
-  height: '60px',
+  minHeight: '60px',
   cursor: 'pointer',
   backgroundColor: theme.palette.secondary.light,
   padding: '16px 8px',

package/src/stories/Input/DateTimePicker.stories.tsx

@@ -0,0 +1,124 @@
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
+import { Meta, StoryObj } from '@storybook/react';
+import { add } from 'date-fns';
+import { DateTimePicker, Icons } from '../../components/export';
+
+const meta: Meta<typeof DateTimePicker> = {
+  title: 'Input/DateTimePicker',
+  component: DateTimePicker,
+  decorators: [
+    (Story) => (
+      <LocalizationProvider dateAdapter={AdapterDateFns}>
+        <Story />
+      </LocalizationProvider>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DateTimePicker>;
+
+const shortcutsItems = [
+  { label: 'Now', getValue: () => new Date() },
+  { label: '1 Hour Later', getValue: () => add(new Date(), { hours: 1 }) },
+  { label: '1 Hour Ago', getValue: () => add(new Date(), { hours: -1 }) },
+  {
+    label: 'New Year',
+    getValue: () => new Date(new Date().getFullYear(), 0, 1, 0, 0),
+  },
+];
+
+export const Primary: Story = {
+  args: {
+    label: 'Date Time Picker',
+    name: 'date-time-picker',
+    placeholder: 'Select Date and Time',
+    required: true,
+  },
+};
+
+export const WithShortcuts: Story = {
+  args: {
+    ...Primary.args,
+    label: 'With Shortcuts',
+    shortcutsItems,
+  },
+};
+
+export const CustomFormat: Story = {
+  args: {
+    ...Primary.args,
+    label: 'Custom Format',
+    format: 'MMM dd, yyyy hh:mm a',
+  },
+};
+
+export const ViewsYearMonth: Story = {
+  args: {
+    ...Primary.args,
+    label: 'Year and Month Views',
+    views: ['year', 'month'],
+  },
+};
+
+export const WithHelperText: Story = {
+  args: {
+    ...Primary.args,
+    label: 'With Helper Text',
+    helperText: 'Please select a valid date and time',
+  },
+};
+
+export const MinMaxDates: Story = {
+  args: {
+    ...Primary.args,
+    label: 'With Min and Max Dates',
+    minDate: new Date('2024-01-01'),
+    maxDate: new Date('2024-12-31'),
+  },
+};
+
+export const CustomIcon: Story = {
+  args: {
+    ...Primary.args,
+    label: 'With Custom Icon',
+    openPickerIcon: Icons.CareerIcon,
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    ...Primary.args,
+    label: 'Read Only',
+    required: false,
+    disabled: true,
+    value: new Date('2024-09-15 14:30'),
+  },
+};
+
+export const DisableFutureDates: Story = {
+  args: {
+    ...Primary.args,
+    label: 'Disable Future Dates',
+    disableFuture: true,
+  },
+};
+
+export const DisablePastDates: Story = {
+  args: {
+    ...Primary.args,
+    label: 'Disable Past Dates',
+    disablePast: true,
+  },
+};
+
+export const DisableSpecificDates: Story = {
+  args: {
+    ...Primary.args,
+    label: 'Disable Weekends',
+    shouldDisableDate: (date: Date) =>
+      date.getDay() === 0 || date.getDay() === 6,
+  },
+};

package/src/themes/commonTheme.ts

@@ -334,6 +334,10 @@ export const getCommonTheme = (mode: Theme) => {
             fontSize: '14px ',
             fontFamily: 'Poppins',
             fontWeight: 600,
+            '@media (max-width:959.95px)': {
+              fontSize: '12px',
+              padding: '6px 12px ',
+            },
             '&:hover': {
               boxShadow: 'none ',
               '@media (hover: none )': {
@@ -558,6 +562,9 @@ export const getCommonTheme = (mode: Theme) => {
             minHeight: '50px',
             paddingBottom: '0px',
             justifyContent: 'flex-start',
+            '@media (max-width:959.95px)': {
+              fontSize: '12px',
+            },
             '&.Mui-selected': {
               color: ColorTokens.text.primary,
             },