Merge pull request #2697 from bluewave-labs/develop-saas

Merge develop-saas into master-saas (15 Nov)

Author: HarshP4585

Clients/.dockerignore

@@ -0,0 +1,20 @@
+node_modules
+dist
+.git
+.gitignore
+.env
+.env.local
+.env.*.local
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+coverage
+.DS_Store
+.vscode
+.idea
+*.md
+!README.md
+.dockerignore
+Dockerfile*
+docker-compose*.yml

Clients/Dockerfile

@@ -1,14 +1,19 @@
 # Step 1: Use a Node.js base image
 FROM node:20-alpine AS build
 
+# Increase Node.js memory limit for the build
+ENV NODE_OPTIONS="--max_old_space_size=4096"
+
 # Step 2: Set the working directory
 WORKDIR /app
 
 # Step 3: Copy package.json and package-lock.json
 COPY package.json package-lock.json ./
 
-# Step 4: Install dependencies
-RUN npm install
+# Step 4: Install dependencies with optimizations for cross-platform builds
+RUN npm config set fetch-timeout 600000 && \
+    npm config set fetch-retries 5 && \
+    npm ci --prefer-offline --no-audit --legacy-peer-deps || npm install --legacy-peer-deps
 
 # Step 5: Copy the rest of the application files
 COPY . .

Clients/Dockerfile.optimized

@@ -0,0 +1,47 @@
+# Step 1: Use a Node.js base image with more memory
+FROM node:20-alpine AS build
+
+# Increase Node.js memory limit for the build
+ENV NODE_OPTIONS="--max_old_space_size=4096"
+
+# Step 2: Set the working directory
+WORKDIR /app
+
+# Step 3: Copy package files
+COPY package.json package-lock.json ./
+
+# Step 4: Install dependencies with optimizations
+RUN npm config set fetch-timeout 600000 && \
+    npm config set fetch-retries 5 && \
+    npm ci --prefer-offline --no-audit --legacy-peer-deps || npm install --legacy-peer-deps
+
+# Step 5: Copy the rest of the application files
+COPY . .
+
+# Step 6: Accept env variables for Vite
+ARG VITE_GOOGLE_CLIENT_ID
+ENV VITE_GOOGLE_CLIENT_ID=$VITE_GOOGLE_CLIENT_ID
+
+ARG VITE_SLACK_CLIENT_ID
+ENV VITE_SLACK_CLIENT_ID=$VITE_SLACK_CLIENT_ID
+
+ARG VITE_APP_VERSION
+ENV VITE_APP_VERSION=$VITE_APP_VERSION
+
+# Step 7: Build the application
+RUN npm run build
+
+# Step 8: Use a lightweight web server for production
+FROM nginx:1.25-alpine
+
+# Step 9: Copy the build output to NGINX's default public directory
+COPY --from=build /app/dist /usr/share/nginx/html
+
+# Step 10: Copy the custom NGINX configuration
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# Step 11: Expose port 80
+EXPOSE 80
+
+# Step 12: Start NGINX server
+CMD ["nginx", "-g", "daemon off;"]

Clients/src/presentation/components/EmptyState/index.tsx

@@ -34,7 +34,6 @@ const EmptyState: React.FC<EmptyStateProps> = ({
   showHalo = false,
   showBorder = false,
 }) => {
-
   return (
     <Stack
       alignItems="center"
@@ -44,20 +43,22 @@ const EmptyState: React.FC<EmptyStateProps> = ({
           borderRadius: "4px",
           backgroundColor: "#FFFFFF",
         }),
-        pt: '75px',
+        pt: "75px",
         pb: 16,
       }}
       role="img"
       aria-label={imageAlt}
     >
-      <Box sx={{ mb: '20px' }}>
+      <Box sx={{ mb: "20px" }}>
         <SkeletonCard showHalo={showHalo} />
       </Box>
-      <Typography sx={{ fontSize: 13, color: "#9CA3AF", fontWeight: 400 }}>
+      <Typography
+        sx={{ fontSize: 13, color: "#9CA3AF", fontWeight: 400, paddingX: 10 }}
+      >
         {message}
       </Typography>
     </Stack>
   );
 };
 
-export default EmptyState;
+export default EmptyState;

Clients/src/presentation/components/Inputs/Datepicker/index.tsx

@@ -21,9 +21,25 @@ const DatePicker = ({
 }: DatePickerProps) => {
   const theme = useTheme();
 
+  // Extract width, flexGrow, minWidth, maxWidth from sx prop to apply to wrapper Stack
+  const extractedLayoutProps = sx && typeof sx === 'object' && !Array.isArray(sx)
+    ? {
+        width: (sx as any).width,
+        flexGrow: (sx as any).flexGrow,
+        minWidth: (sx as any).minWidth,
+        maxWidth: (sx as any).maxWidth,
+      }
+    : {};
+
+  // Create a copy of sx without layout props to pass to MuiDatePicker
+  const sxWithoutLayoutProps = sx && typeof sx === 'object' && !Array.isArray(sx)
+    ? Object.fromEntries(Object.entries(sx).filter(([key]) => !['width', 'flexGrow', 'minWidth', 'maxWidth'].includes(key)))
+    : sx;
+
   return (
     <Stack
       gap={theme.spacing(2)}
+      sx={extractedLayoutProps}
     >
       {label && (
         <Typography
@@ -70,7 +86,7 @@ const DatePicker = ({
             '& .MuiInputBase-root': {
               cursor: 'pointer',
             },
-            ...sx,
+            ...sxWithoutLayoutProps,
           }}
           value={date ? dayjs(date) : null}
           onChange={(value) => handleDateChange(value)}

Clients/src/presentation/components/Inputs/Dropdowns/index.tsx

@@ -122,15 +122,15 @@ const DropDowns: React.FC<DropDownsProps> = ({
     <Stack
       id={elementId}
       style={{
-        gap: theme.spacing(8),
+        gap: theme.spacing(6),
       }}
     >
       <Stack
         display="flex"
         flexDirection="row"
         justifyContent="space-between"
-        alignItems="center"
-        gap={theme.spacing(15)}
+        alignItems="flex-end"
+        gap={theme.spacing(4)}
       >
         <Select
           id="status"
@@ -182,8 +182,8 @@ const DropDowns: React.FC<DropDownsProps> = ({
         display="flex"
         flexDirection="row"
         justifyContent="space-between"
-        alignItems="center"
-        gap={theme.spacing(15)}
+        alignItems="flex-end"
+        gap={theme.spacing(4)}
       >
         <Select
           id="Owner"

Clients/src/presentation/components/Inputs/Dropdowns/style.ts

@@ -1,6 +1,5 @@
 export const inputStyles = {
-  minWidth: 200,
-  maxWidth: 400,
-  flexGrow: 1,
+  width: "calc((100% - 64px) / 3)", // Account for gap between 3 fields
+  flexShrink: 0,
   height: 34,
 };

Clients/src/presentation/components/Inputs/Select/index.tsx

@@ -50,14 +50,19 @@ const Select: React.FC<SelectProps> = ({
     margin: theme.spacing(2),
   };
 
-  // Extract width from sx prop to apply to wrapper Stack
-  const extractedWidth = sx && typeof sx === 'object' && !Array.isArray(sx)
-    ? (sx as any).width
-    : undefined;
+  // Extract width, flexGrow, minWidth, maxWidth from sx prop to apply to wrapper Stack
+  const extractedLayoutProps = sx && typeof sx === 'object' && !Array.isArray(sx)
+    ? {
+        width: (sx as any).width,
+        flexGrow: (sx as any).flexGrow,
+        minWidth: (sx as any).minWidth,
+        maxWidth: (sx as any).maxWidth,
+      }
+    : {};
 
-  // Create a copy of sx without width to pass to MuiSelect
-  const sxWithoutWidth = sx && typeof sx === 'object' && !Array.isArray(sx)
-    ? Object.fromEntries(Object.entries(sx).filter(([key]) => key !== 'width'))
+  // Create a copy of sx without layout props to pass to MuiSelect
+  const sxWithoutLayoutProps = sx && typeof sx === 'object' && !Array.isArray(sx)
+    ? Object.fromEntries(Object.entries(sx).filter(([key]) => !['width', 'flexGrow', 'minWidth', 'maxWidth'].includes(key)))
     : sx;
 
   const renderValue = (value: unknown) => {
@@ -96,9 +101,7 @@ const Select: React.FC<SelectProps> = ({
     <Stack
       gap={theme.spacing(2)}
       className="select-wrapper"
-      sx={{
-        width: extractedWidth,
-      }}
+      sx={extractedLayoutProps}
     >
       {label && (
         <Typography
@@ -181,7 +184,7 @@ const Select: React.FC<SelectProps> = ({
           position: "relative",
           cursor: "pointer",
           ...getSelectStyles(theme, { hasError: !!error }),
-          ...sxWithoutWidth,
+          ...sxWithoutLayoutProps,
         }}
       >
         {items.map(