@visns-studio/visns-components 5.11.21 → 5.11.22

package/package.json

@@ -14,8 +14,8 @@
         "@tinymce/miniature": "^6.0.0",
         "@tinymce/tinymce-react": "^6.2.1",
         "@uiw/react-color": "^2.6.0",
-        "@visns-studio/visns-datagrid-community": "^1.0.14",
-        "@visns-studio/visns-datagrid-enterprise": "^1.0.14",
+        "@visns-studio/visns-datagrid-community": "^1.0.23",
+        "@visns-studio/visns-datagrid-enterprise": "^1.0.23",
         "@vitejs/plugin-react": "^4.6.0",
         "add": "^2.0.6",
         "array-move": "^4.0.0",
@@ -24,13 +24,13 @@
         "dayjs": "^1.11.13",
         "fabric": "^6.7.0",
         "file-saver": "^2.0.5",
-        "framer-motion": "^12.19.1",
+        "framer-motion": "^12.19.2",
         "html-react-parser": "^5.2.5",
         "lodash": "^4.17.21",
         "lodash.debounce": "^4.0.8",
         "lucide-react": "^0.518.0",
         "moment": "^2.30.1",
-        "motion": "^12.19.1",
+        "motion": "^12.19.2",
         "numeral": "^2.0.6",
         "pluralize": "^8.0.0",
         "qrcode.react": "^4.2.0",
@@ -87,7 +87,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.11.21",
+    "version": "5.11.22",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/{crm/Autocomplete.jsx → Autocomplete.jsx}

@@ -2,7 +2,7 @@ import { useState, useEffect, useCallback, useMemo, memo, useRef } from 'react';
 import AwesomeDebouncePromise from 'awesome-debounce-promise';
 import { ToggleLeft, ToggleRight, Search } from 'lucide-react';
 import styles from './styles/Autocomplete.module.scss';
-import fetchUtil from '../../utils/fetchUtil';
+import fetchUtil from '../utils/fetchUtil';
 
 // Create the debounced function outside the component to prevent recreation
 const createDebouncedSearch = (fn) =>

package/src/components/{crm/BusinessCardOcr.jsx → BusinessCardOcr.jsx}

@@ -1,4 +1,4 @@
-import '../styles/global.css';
+import './styles/global.css';
 
 import { useState, useRef, useCallback, useEffect } from 'react';
 import { motion } from 'framer-motion';

package/src/components/{crm/DataGrid.jsx → DataGrid.jsx}

@@ -1,4 +1,4 @@
-import '../styles/global.css';
+import './styles/global.css';
 import './styles/global-datagrid.css';
 
 /**
@@ -39,10 +39,10 @@ import SelectFilter from '@visns-studio/visns-datagrid-enterprise/SelectFilter';
 import DateFilter from '@visns-studio/visns-datagrid-enterprise/DateFilter';
 import ReactDataGrid from '@visns-studio/visns-datagrid-enterprise';
 import { toast } from 'react-toastify';
-import fetchUtil from '../../utils/fetchUtil';
+import fetchUtil from '../utils/fetchUtil';
 import { confirmDialog } from '../utils/ConfirmDialog';
-import { DEFAULT_INTELLIGENT_SORTING_CONFIG } from '../../utils/relationshipSortingUtils';
-import { extractColumnsMetadata, isColumnSortable } from '../../utils/columnsMetadataUtils';
+import { DEFAULT_INTELLIGENT_SORTING_CONFIG } from '../utils/relationshipSortingUtils';
+import { extractColumnsMetadata, isColumnSortable } from '../utils/columnsMetadataUtils';
 import {
     AlarmClock,
     RotateCcw,
@@ -2449,7 +2449,21 @@ const DataGrid = forwardRef(
                                             ? column.filter.placeholder
                                             : 'All Options',
                                         dataSource: selectedDataSource,
+                                        searchable: column.filter.searchable !== false,
+                                        // Enable clear functionality even when searchable is false
+                                        allowClearWhenNotSearchable: column.filter.searchable === false,
+                                        // Explicitly enable clear icon
+                                        clearIcon: true,
                                     };
+                                    
+                                    // Debug: Check if fix is applied
+                                    if (column.filter.searchable === false) {
+                                        console.log('Filter Debug - searchable=false:', {
+                                            columnName: column.name || 'unknown',
+                                            props: filterEditorProps,
+                                            visnsDataGridVersion: 'v1.0.18'
+                                        });
+                                    }
                                     break;
                                 default:
                                     filterEditor = null;

package/src/components/{crm/Download.jsx → Download.jsx}

@@ -2,7 +2,7 @@ import React from 'react';
 import { trackPromise } from 'react-promise-tracker';
 import { toast } from 'react-toastify';
 import parse from 'html-react-parser';
-import fetchUtil from '../../utils/fetchUtil';
+import fetchUtil from '../utils/fetchUtil';
 
 const CustomDownload = (
     url,

package/src/components/{cms/DropZone.jsx → DropZone.jsx}

@@ -8,7 +8,7 @@ import Popup from 'reactjs-popup';
 import imageCompression from 'browser-image-compression';
 
 import { confirmDialog } from '../utils/ConfirmDialog';
-import CustomFetch from '../crm/Fetch';
+import CustomFetch from './Fetch';
 import Gallery from './Gallery';
 import styles from './styles/DropZone.module.css';
 

package/src/components/{crm/Field.jsx → Field.jsx}

@@ -1,4 +1,4 @@
-import '../styles/global.css';
+import './styles/global.css';
 
 import React, { useEffect, useRef, useState, useMemo } from 'react';
 import DatePicker from 'react-datepicker';
@@ -36,7 +36,7 @@ import SketchField from './sketch/SketchField';
 import Tools from './sketch/tools';
 import VisnsAsyncSelect from './AsyncSelect';
 import VisnsAutocomplete from './Autocomplete';
-import VisnsDropZone from '../cms/DropZone';
+import VisnsDropZone from './DropZone';
 
 import 'react-toggle/style.css';
 import 'react-datepicker/dist/react-datepicker.css';

package/src/components/{crm/Form.jsx → Form.jsx}

@@ -1,4 +1,4 @@
-import '../styles/global.css';
+import './styles/global.css';
 
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';

package/src/components/{crm/auth → auth}/ClientLogin.jsx

@@ -1,4 +1,4 @@
-import '../../styles/global.css';
+import '../styles/global.css';
 
 import React, { useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
@@ -7,7 +7,7 @@ import { User } from 'lucide-react';
 
 import CustomFetch from '../Fetch';
 
-import styles from './styles/ClientAuth.module.scss';
+import styles from '../styles/ClientAuth.module.scss';
 
 const ClientLogin = ({ logo, setSystemAuth, urls = {} }) => {
     const location = useLocation();

package/src/components/{crm/auth → auth}/ClientOTPVerify.jsx

@@ -1,4 +1,4 @@
-import '../../styles/global.css';
+import '../styles/global.css';
 
 import React, { useState, useEffect } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
@@ -7,7 +7,7 @@ import { Lock, ArrowLeft } from 'lucide-react';
 
 import CustomFetch from '../Fetch';
 
-import styles from './styles/ClientAuth.module.scss';
+import styles from '../styles/ClientAuth.module.scss';
 
 const ClientOTPVerify = ({
     logo,

package/src/components/{crm/auth → auth}/Login.jsx

@@ -1,4 +1,4 @@
-import '../../styles/global.css';
+import '../styles/global.css';
 
 import React, { useState } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
@@ -8,7 +8,7 @@ import { User, Lock } from 'lucide-react';
 
 import CustomFetch from '../Fetch';
 
-import styles from './styles/Login.module.scss';
+import styles from '../styles/Login.module.scss';
 
 const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
     const location = useLocation();

package/src/components/{crm/auth → auth}/Profile.jsx

@@ -1,5 +1,5 @@
-// src/components/crm/auth/Profile.jsx
-import '../../styles/global.css';
+// src/components/auth/Profile.jsx
+import '../styles/global.css';
 
 import React, { useState, useEffect, useRef, useCallback, memo } from 'react';
 import { useLocation } from 'react-router-dom';
@@ -9,7 +9,7 @@ import SignaturePad from 'react-signature-pad-wrapper';
 import Swal from 'sweetalert2';
 import CustomFetch from '../Fetch';
 import TableFilter from '../TableFilter';
-import styles from './styles/Profile.module.scss';
+import styles from '../styles/Profile.module.scss';
 
 // Form field component to reduce repetition
 const FormField = memo(

package/src/components/{crm/auth → auth}/Reset.jsx

@@ -1,4 +1,4 @@
-import '../../styles/global.css';
+import '../styles/global.css';
 
 import React, { useState } from 'react';
 import Reveal from 'react-reveal/Reveal';
@@ -8,7 +8,7 @@ import { User } from 'lucide-react';
 
 import CustomFetch from '../Fetch';
 
-import styles from './styles/Reset.module.scss';
+import styles from '../styles/Reset.module.scss';
 
 const Reset = ({ logo }) => {
     const [email, setEmail] = useState('');

package/src/components/{crm/auth → auth}/TwoFactorAuth.jsx

@@ -1,4 +1,4 @@
-import '../../styles/global.css';
+import '../styles/global.css';
 
 import React, { useState, useEffect } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
@@ -8,7 +8,7 @@ import { Lock } from 'lucide-react';
 
 import CustomFetch from '../Fetch';
 
-import styles from './styles/TwoFactorAuth.module.scss';
+import styles from '../styles/TwoFactorAuth.module.scss';
 
 const TwoFactorAuth = ({ logo, setSystemAuth, setUserProfile }) => {
     const navigate = useNavigate();

package/src/components/{crm/auth → auth}/Verify.jsx

@@ -1,4 +1,4 @@
-import '../../styles/global.css';
+import '../styles/global.css';
 
 import React, { useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
@@ -9,7 +9,7 @@ import Reveal from 'react-reveal/Reveal';
 
 import CustomFetch from '../Fetch';
 
-import styles from './styles/Verify.module.scss';
+import styles from '../styles/Verify.module.scss';
 
 const Verify = ({ logo }) => {
     const navigate = useNavigate();

package/src/components/{crm/client → client}/ClientDashboard.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import styles from './styles/ClientDashboard.module.scss';
+import styles from '../styles/ClientDashboard.module.scss';
 
 /**
  * ClientDashboard - Example dashboard component for client portal

package/src/components/{crm/client → client}/ClientPortal.jsx

@@ -4,7 +4,7 @@ import { toast } from 'react-toastify';
 
 import CustomFetch from '../Fetch';
 
-import styles from './styles/ClientPortal.module.scss';
+import styles from '../styles/ClientPortal.module.scss';
 
 const ClientPortal = ({
     clientProfile,

package/src/components/{crm/columns → columns}/ColumnRenderers.jsx

@@ -8,7 +8,7 @@ import {
     isRelationshipColumnSortable,
     getRelationshipPath,
     DEFAULT_INTELLIGENT_SORTING_CONFIG,
-} from '../../../utils/relationshipSortingUtils';
+} from '../../utils/relationshipSortingUtils';
 
 // Boolean Column Renderer
 export const renderBooleanColumn = ({
@@ -135,11 +135,11 @@ export const renderDateTimeColumn = ({
                 moment(data[column.id]).format('YYYY-MM-DD') !== '1970-01-01'
             ) {
                 let dateValue = moment(data[column.id]);
-                
+
                 // Apply modifier if present
                 if (column.modifier) {
                     const { operator, value, unit } = column.modifier;
-                    
+
                     if (operator === '+') {
                         dateValue = dateValue.add(value, unit);
                     } else if (operator === '-') {
@@ -1453,16 +1453,22 @@ export const renderGalleryColumn = ({
                 : data[column.id];
 
             // Check if we have valid image data
-            if (!imagesArray || !Array.isArray(imagesArray) || imagesArray.length === 0) {
+            if (
+                !imagesArray ||
+                !Array.isArray(imagesArray) ||
+                imagesArray.length === 0
+            ) {
                 return (
-                    <div style={{ 
-                        display: 'flex', 
-                        alignItems: 'center', 
-                        justifyContent: 'center',
-                        height: '40px',
-                        color: '#999',
-                        fontSize: '12px'
-                    }}>
+                    <div
+                        style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            height: '40px',
+                            color: '#999',
+                            fontSize: '12px',
+                        }}
+                    >
                         No images
                     </div>
                 );
@@ -1486,13 +1492,13 @@ export const renderGalleryColumn = ({
 
                 // Set gallery data and current item
                 setGalleryData(galleryData);
-                setCurrentItem({ 
-                    data: data, 
+                setCurrentItem({
+                    data: data,
                     settings: {
                         relation: column.relation,
                         key: column.key,
-                        captionKey: column.captionKey || 'file_name'
-                    }
+                        captionKey: column.captionKey || 'file_name',
+                    },
                 });
 
                 // Open the gallery modal
@@ -1533,7 +1539,7 @@ export const renderGalleryColumn = ({
                         {displayImages.map((image, index) => {
                             const imageUrl = image[column.key];
                             if (!imageUrl) return null;
-                            
+
                             return (
                                 <div
                                     key={index}
@@ -1548,7 +1554,11 @@ export const renderGalleryColumn = ({
                                 >
                                     <img
                                         src={imageUrl}
-                                        alt={image[column.captionKey || 'file_name'] || `Image ${index + 1}`}
+                                        alt={
+                                            image[
+                                                column.captionKey || 'file_name'
+                                            ] || `Image ${index + 1}`
+                                        }
                                         style={{
                                             width: '100%',
                                             height: '100%',
@@ -1562,7 +1572,7 @@ export const renderGalleryColumn = ({
                             );
                         })}
                     </div>
-                    
+
                     {/* Count badge */}
                     <div
                         style={{
@@ -1572,7 +1582,8 @@ export const renderGalleryColumn = ({
                             lineHeight: '1.2',
                         }}
                     >
-                        {imagesArray.length} {imagesArray.length === 1 ? 'image' : 'images'}
+                        {imagesArray.length}{' '}
+                        {imagesArray.length === 1 ? 'image' : 'images'}
                         {remainingCount > 0 && ` (+${remainingCount})`}
                     </div>
                 </div>

package/src/components/{crm/generic → generic}/ActionButtons.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './styles/ActionButtons.module.scss';
+import styles from '../styles/ActionButtons.module.scss';
 
 function ActionButtons({ actions, onActionClick }) {
     return (

package/src/components/{crm/generic → generic}/AlternativeActionModal.jsx

@@ -1,6 +1,6 @@
 import Swal from 'sweetalert2';
-import './styles/SweetAlert.module.css';
-import './styles/AlternativeActionModal.css';
+import '../styles/SweetAlert.module.css';
+import '../styles/AlternativeActionModal.css';
 
 /**
  * Show an alternative action modal for choosing between different workflows

package/src/components/{crm/generic → generic}/AuditLog.jsx

@@ -3,7 +3,7 @@ import { useParams } from 'react-router-dom';
 import dayjs from 'dayjs';
 import Breadcrumb from '../Breadcrumb';
 import CustomFetch from '../Fetch';
-import styles from './styles/AuditLog.module.scss';
+import styles from '../styles/AuditLog.module.scss';
 
 const AuditLog = ({ userProfile }) => {
     const routeParams = useParams();

package/src/components/{crm/generic → generic}/AuditLogs.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Table from '../DataGrid';
-import styles from './styles/AuditLogs.module.scss';
+import styles from '../styles/AuditLogs.module.scss';
 
 const AuditLogs = ({ layout }) => {
     const setting = {

package/src/components/{cms/generic → generic}/CmsDetail.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useParams, useNavigate, useLocation } from 'react-router-dom';
 import Reveal from 'react-reveal/Reveal';
 import { ToastContainer } from 'react-toastify';
-import CmsForm from '../Form';
+import Form from '../Form';
 
 function CmsDetail({ setting }) {
     const { dataId } = useParams();
@@ -14,7 +14,7 @@ function CmsDetail({ setting }) {
             <div className="grid">
                 <div className="grid__row">
                     <div className="grid__full">
-                        <CmsForm
+                        <Form
                             dataId={dataId}
                             navigate={navigate}
                             form={form}

package/src/components/{cms/generic → generic}/CmsSort.jsx

@@ -3,7 +3,7 @@ import { useLocation } from 'react-router-dom';
 import Reveal from 'react-reveal/Reveal';
 import { arrayMoveImmutable } from 'array-move';
 import { toast } from 'react-toastify';
-import CustomFetch from '../../crm/Fetch';
+import CustomFetch from '../Fetch';
 import SortableList from '../sorting/List';
 
 const ChildSort = ({ item, url }) => {

package/src/components/{crm/generic → generic}/ConfirmationDialog.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Swal from 'sweetalert2';
-import './styles/SweetAlert.module.css';
+import '../styles/SweetAlert.module.css';
 
 /**
  * A utility function that uses SweetAlert2 for confirmation dialogs

package/src/components/{crm/generic → generic}/ContactSelectorModal.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import Swal from 'sweetalert2';
-import './styles/SweetAlert.module.css';
-import './styles/ContactSelectorModal.css';
+import '../styles/SweetAlert.module.css';
+import '../styles/ContactSelectorModal.css';
 import CustomFetch from '../Fetch';
 
 /**

package/src/components/{crm/generic → generic}/DatePickerDialog.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Swal from 'sweetalert2';
-import './styles/SweetAlert.module.css';
-import './styles/DatePickerDialog.css';
+import '../styles/SweetAlert.module.css';
+import '../styles/DatePickerDialog.css';
 import moment from 'moment';
 
 /**

package/src/components/{crm/generic → generic}/DateRangeSelectorModal.jsx

@@ -1,7 +1,7 @@
 import Swal from 'sweetalert2';
 import moment from 'moment';
-import './styles/SweetAlert.module.css';
-import './styles/DateRangeSelectorModal.css';
+import '../styles/SweetAlert.module.css';
+import '../styles/DateRangeSelectorModal.css';
 
 /**
  * Show a date range selector modal for selecting start and end dates

package/src/components/{crm/generic → generic}/GenericClientPortal.jsx

@@ -5,7 +5,7 @@ import { LogOut as SignOut } from 'lucide-react';
 
 import CustomFetch from '../Fetch';
 
-import styles from './styles/GenericClientPortal.module.scss';
+import styles from '../styles/GenericClientPortal.module.scss';
 
 /**
  * GenericClientPortal - A wrapper component for client portal content

package/src/components/{crm/generic → generic}/GenericDashboard.jsx

@@ -1,4 +1,4 @@
-import '../../styles/global.css';
+import '../styles/global.css';
 import React, { useState, useEffect, useRef } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { ResponsiveBar } from '@nivo/bar';
@@ -11,10 +11,10 @@ import { createSwapy } from 'swapy';
 import { X, Minus, Plus, Star, Trash2 } from 'lucide-react';
 import { confirmDialog } from '../../utils/ConfirmDialog';
 
-import CustomFetch from '../../crm/Fetch';
-import MultiSelect from '../../crm/MultiSelect';
+import CustomFetch from '../Fetch';
+import MultiSelect from '../MultiSelect';
 
-import styles from './styles/GenericDashboard.module.scss';
+import styles from '../styles/GenericDashboard.module.scss';
 
 const toSnakeCase = (str) => str.replace(/[\s-]+/g, '_').toLowerCase();
 

package/src/components/{crm/generic → generic}/GenericDetail.jsx

@@ -1,4 +1,4 @@
-import '../../styles/global.css';
+import '../styles/global.css';
 
 /**
  * GenericDetail Component
@@ -47,7 +47,7 @@ import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { saveAs } from 'file-saver';
 import { toast } from 'react-toastify';
 import imageCompression from 'browser-image-compression';
-import fetchUtil from '../../../utils/fetchUtil';
+import fetchUtil from '../../utils/fetchUtil';
 import {
     CheckCircle as CircleCheck,
     Copy,
@@ -75,10 +75,10 @@ import Table from '../DataGrid';
 import TableFilter from '../TableFilter';
 
 // Proposal components
-import ProposalTemplateSectionManager from '../../proposal/ProposalTemplateSectionManager';
-import ProposalTemplatePreview from '../../proposal/ProposalTemplatePreview';
+import ProposalTemplateSectionManager from '../proposal/ProposalTemplateSectionManager';
+import ProposalTemplatePreview from '../proposal/ProposalTemplatePreview';
 
-import styles from './styles/GenericDetail.module.scss';
+import styles from '../styles/GenericDetail.module.scss';
 
 const localizer = momentLocalizer(moment);
 const DnDCalendar = withDragAndDrop(Calendar);

package/src/components/{crm/generic → generic}/GenericDynamic.jsx

@@ -9,7 +9,7 @@ import { confirmDialog } from '../../utils/ConfirmDialog';
 import CustomFetch from '../Fetch';
 import Download from '../Download';
 import Field from '../Field';
-import styles from './styles/GenericDynamic.module.scss';
+import styles from '../styles/GenericDynamic.module.scss';
 
 const updateField = (fields, name, value) => {
     if (Array.isArray(fields)) {

package/src/components/{crm/generic → generic}/GenericEditableTable.jsx

@@ -8,7 +8,7 @@ import { confirmDialog } from '../../utils/ConfirmDialog';
 
 import CustomFetch from '../Fetch';
 import MultiSelect from '../MultiSelect';
-import styles from './styles/GenericEditableTable.module.scss';
+import styles from '../styles/GenericEditableTable.module.scss';
 
 // Updated ColourPicker with an expanded pastel palette
 const ColourPicker = ({ value, columnId, keyCounter, onChange }) => {

package/src/components/{crm/generic → generic}/GenericFormBuilder.jsx

@@ -1,4 +1,4 @@
-import '../../styles/global.css';
+import '../styles/global.css';
 
 import React, { useEffect, useRef, useState } from 'react';
 import { useParams } from 'react-router-dom';
@@ -43,7 +43,7 @@ import Breadcrumb from '../Breadcrumb';
 import CustomFetch from '../Fetch';
 import SketchConfig from '../sketch/json/config.json';
 
-import styles from './styles/GenericFormBuilder.module.scss'; // Import the CSS module
+import styles from '../styles/GenericFormBuilder.module.scss'; // Import the CSS module
 
 function GenericFormBuilder({ setting, urlParam, userProfile }) {
     const editorRef = useRef(null);

package/src/components/{crm/generic → generic}/GenericGrid.jsx

@@ -13,8 +13,8 @@ import { showContactSelectorModal } from './ContactSelectorModal';
 import { showDateRangeSelectorModal } from './DateRangeSelectorModal';
 import { showAlternativeActionModal } from './AlternativeActionModal';
 import { showReasonCollectorModal } from './ReasonCollectorModal';
-import { processGridHeaders, getColumnHeaderClasses, getColumnHeaderStyles, getColumnHeaderTooltip, getColumnCellClasses, getColumnCellStyles } from '../../../utils/columnsMetadataUtils';
-import styles from './styles/GenericIndex.module.scss';
+import { processGridHeaders, getColumnHeaderClasses, getColumnHeaderStyles, getColumnHeaderTooltip, getColumnCellClasses, getColumnCellStyles } from '../../utils/columnsMetadataUtils';
+import styles from '../styles/GenericIndex.module.scss';
 
 // ContactTooltip component for enhanced contact display
 const ContactTooltip = ({ contacts, children }) => {

package/src/components/{crm/generic → generic}/GenericIndex.jsx

@@ -1,4 +1,4 @@
-import '../../styles/global.css';
+import '../styles/global.css';
 
 import React, {
     useCallback,
@@ -22,7 +22,7 @@ import TableFilter from '../TableFilter';
 import GenericGrid from './GenericGrid';
 import GenericReportForm from './GenericReportForm';
 
-import styles from './styles/GenericIndex.module.scss';
+import styles from '../styles/GenericIndex.module.scss';
 
 function useWindowHeight() {
     const [windowHeight, setWindowHeight] = useState(window.innerHeight);

package/src/components/{crm/generic → generic}/GenericMain.jsx

@@ -1,4 +1,4 @@
-import '../../styles/global.css';
+import '../styles/global.css';
 
 import React, { useState, useEffect, useCallback } from 'react';
 import {
@@ -15,7 +15,7 @@ import Loader from '../Loader';
 import Navigation from '../Navigation';
 import QuickAction from '../QuickAction';
 
-import styles from './styles/GenericMain.module.scss';
+import styles from '../styles/GenericMain.module.scss';
 
 const GenericMain = ({
     layout = 'full',