@visns-studio/visns-components 5.6.8 → 5.6.9

package/src/components/crm/auth/styles/TwoFactorAuth.module.scss

@@ -1,47 +1,176 @@
-// Use the Login styles to maintain consistency
-@use './Login.module.scss' as login;
+.formItem {
+    width: 100%;
+    position: relative;
+    box-sizing: border-box;
+    margin-bottom: 1rem;
 
-// Additional styles specific to the 2FA component
-.instructions {
-    text-align: center;
-    margin: 0.5rem 0 1.5rem;
-    color: var(--paragraph-color);
-    font-size: 0.95rem;
-    line-height: 1.4;
+    .fi__label {
+        position: relative;
+        display: flex;
+        align-items: center;
+    }
+
+    .fi__span {
+        position: absolute;
+        transition: all 200ms;
+        opacity: 0.7;
+        left: 0;
+        transform-origin: top left;
+        cursor: text;
+        padding: 0 1rem;
+        font-size: 0.9rem;
+        color: #6b7280;
+    }
+
+    input[name='verificationCode'] {
+        letter-spacing: 0.25rem;
+        font-size: 1.2rem;
+        text-align: center;
+    }
 }
 
-.login {
-    // Instead of extending, copy the necessary properties
-    width: 35rem;
+.fwItem,
+.fwBuilderItem {
+    grid-column: 1 / -1;
+    width: 100%;
+}
+
+.lastItem .btn {
+    width: 100%;
+}
+
+.loginlogo {
+    display: block;
+    width: 100%;
+    max-width: 150px;
+    height: auto;
+    margin: 0 auto;
+    padding-bottom: 1.5rem;
+}
+
+.logincontainer {
+    width: 100%;
+    min-height: 100vh;
+    display: grid;
+    place-items: center;
     padding: 1rem;
+    background-color: #f9fafb;
+}
+
+.login {
+    width: 28rem;
+    padding: 2rem;
     margin: 0;
     display: grid;
     grid-template-columns: 1fr;
-    gap: 0.5rem;
+    gap: 1rem;
+    background-color: white;
+    border-radius: 0.75rem;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+        0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+    > .formItem {
+        padding: 0;
+
+        small {
+            position: absolute;
+            width: 18px;
+            height: 18px;
+            right: 14px;
+            top: 14px;
+            opacity: 0.4;
+            color: #6b7280;
+        }
+    }
 
     h2 {
         text-align: center;
-        margin: 0;
-        color: var(--heading-color);
+        margin-bottom: 0.5rem;
+        color: #111827;
+        font-weight: 600;
+        font-size: 1.5rem;
+    }
+}
+
+.instructions {
+    text-align: center;
+    margin: 0 0 1.5rem;
+    color: var(--paragraph-color, #6b7280);
+    font-size: 0.95rem;
+    line-height: 1.4;
+}
+
+.forgotten span {
+    display: block;
+    text-align: center;
+    color: #6b7280;
+    padding: 1rem 0;
+    font-size: 0.875rem;
+
+    a {
+        color: var(--primary-color, #4f46e5);
+        text-decoration: none;
         font-weight: 500;
+
+        &:hover {
+            text-decoration: underline;
+        }
     }
 }
 
-// Style for the verification code input
-.formItem {
-    // Instead of extending, copy the necessary properties
-    width: 50%;
+.lcontainer {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #f9fafb;
+}
+
+.lwrap {
+    display: grid;
+    grid-template-columns: 1fr;
+}
+
+.btn {
+    width: max-content;
+    display: inline-block;
     position: relative;
-    box-sizing: border-box;
-    margin-bottom: 0.5rem;
+    padding: 0.75rem 1rem;
+    cursor: pointer;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: white;
+    text-decoration: none;
+    overflow: hidden;
+    background: var(--primary-color, #4f46e5);
+    border: 1px solid var(--primary-color, #4f46e5);
+    border-radius: 0.5rem;
+    outline: none;
+    transition: all 0.2s ease;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 
-    input[name='verificationCode'] {
-        letter-spacing: 0.25rem;
-        font-size: 1.2rem;
-        text-align: center;
+    &:hover {
+        background: #4338ca;
+        border-color: #4338ca;
+    }
+
+    &:focus {
+        box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.25);
     }
 }
 
+input:not(:placeholder-shown) + .fi__span,
+textarea:not(:placeholder-shown) + .fi__span,
+select:not(:placeholder-shown) + .fi__span {
+    transform: translateY(-135%) translateX(10px) scale(0.85);
+    opacity: 1;
+    padding: 0;
+    background: white;
+    font-weight: 500;
+    transition: all 0.3s ease;
+    color: var(--primary-color, #4f46e5) !important;
+}
+
 .rememberMeIndicator {
     display: flex;
     align-items: center;

package/src/components/crm/examples/FilterExample.jsx

@@ -0,0 +1,207 @@
+import React, { useState } from 'react';
+import TableFilter from '../TableFilter';
+
+const FilterExample = () => {
+    // Initial filter structure with parent-child relationships
+    const initialFilters = [
+        {
+            id: "personnelLicensesAndRecords",
+            label: "Personnel Licenses and Records",
+            isParent: true,
+            show: false,
+            class: "",
+            children: [
+                {
+                    id: "completedSiteInduction",
+                    show: false,
+                    label: "Completed Site Induction",
+                    class: ""
+                },
+                {
+                    id: "unapprovedWhiteCard",
+                    show: false,
+                    label: "Unapproved White Card",
+                    class: ""
+                },
+                {
+                    id: "unapprovedLicense",
+                    show: false,
+                    label: "Unapproved License",
+                    class: ""
+                },
+                {
+                    id: "outstandingLicense",
+                    show: false,
+                    label: "Outstanding License",
+                    class: ""
+                },
+                {
+                    id: "unapprovedCovid",
+                    show: false,
+                    label: "Unapproved COVID",
+                    class: ""
+                }
+            ]
+        },
+        {
+            id: "insurance",
+            label: "Insurance",
+            isParent: true,
+            show: false,
+            class: "",
+            children: [
+                {
+                    id: "allInsurance",
+                    show: false,
+                    label: "All Insurance",
+                    class: ""
+                },
+                {
+                    id: "unapprovedInsurance",
+                    show: false,
+                    label: "Unapproved Insurance",
+                    class: ""
+                },
+                {
+                    id: "expiredInsurance",
+                    show: false,
+                    label: "Expired Insurance",
+                    class: ""
+                },
+                {
+                    id: "outstandingInsurance",
+                    show: false,
+                    label: "Outstanding Insurance",
+                    class: ""
+                }
+            ]
+        },
+        {
+            id: "workingHours",
+            label: "Working Hours",
+            isParent: true,
+            show: false,
+            class: "",
+            children: [
+                {
+                    id: "projectTotalHours",
+                    show: false,
+                    label: "Project Total Hours",
+                    class: ""
+                },
+                {
+                    id: "contractorTotalHours",
+                    show: false,
+                    label: "Contractor Total Hours",
+                    class: ""
+                },
+                {
+                    id: "sitePersonnelWorkHours",
+                    show: false,
+                    label: "Site Personnel Work Hours",
+                    class: ""
+                },
+                {
+                    id: "sitePersonnelRecords",
+                    show: false,
+                    label: "Site Personnel Records",
+                    class: ""
+                }
+            ]
+        },
+        {
+            id: "prequalifications",
+            label: "Prequalifications",
+            isParent: true,
+            show: false,
+            class: "",
+            children: [
+                {
+                    id: "prequalificationsUnapproved",
+                    show: false,
+                    label: "Unapproved Prequalifications",
+                    class: ""
+                },
+                {
+                    id: "prequalificationsExpiring",
+                    show: false,
+                    label: "Expiring Prequalifications",
+                    class: ""
+                },
+                {
+                    id: "prequalifiedContractors",
+                    show: false,
+                    label: "Prequalified Contractors",
+                    class: ""
+                }
+            ]
+        }
+    ];
+
+    const [filters, setFilters] = useState(initialFilters);
+    const [settings, setSettings] = useState({
+        ajaxSetting: {
+            where: []
+        }
+    });
+    
+    // Find the active filter to display content
+    const getActiveFilter = () => {
+        let activeFilter = null;
+        
+        // Check each parent filter
+        filters.forEach(parent => {
+            if (parent.children) {
+                // Check if any child is active
+                parent.children.forEach(child => {
+                    if (child.show) {
+                        activeFilter = {
+                            parent: parent.label,
+                            child: child.label,
+                            id: child.id
+                        };
+                    }
+                });
+            }
+        });
+        
+        return activeFilter;
+    };
+    
+    const activeFilter = getActiveFilter();
+
+    return (
+        <div style={{ maxWidth: '800px', margin: '0 auto', padding: '20px' }}>
+            <h1 style={{ marginBottom: '20px' }}>Reports</h1>
+            
+            <div style={{ display: 'flex', gap: '20px' }}>
+                <div style={{ width: '300px' }}>
+                    <TableFilter 
+                        filters={filters}
+                        setFilters={setFilters}
+                        setSettings={setSettings}
+                    />
+                </div>
+                
+                <div style={{ flex: 1, padding: '20px', backgroundColor: '#f9f9f9', borderRadius: '8px', minHeight: '300px' }}>
+                    {activeFilter ? (
+                        <div>
+                            <h2>{activeFilter.child}</h2>
+                            <p>Category: {activeFilter.parent}</p>
+                            <p>Filter ID: {activeFilter.id}</p>
+                            <div style={{ marginTop: '20px', padding: '15px', backgroundColor: '#fff', borderRadius: '4px' }}>
+                                <p>This is the content area that would display data based on the selected filter.</p>
+                            </div>
+                        </div>
+                    ) : (
+                        <div style={{ textAlign: 'center', color: '#666' }}>
+                            <p>Please select a filter option to view content</p>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default FilterExample;

package/src/components/crm/examples/README.md

@@ -0,0 +1,113 @@
+# TableFilter Component with Parent-Child Structure
+
+This document explains how to use the updated TableFilter component with parent-child relationships.
+
+## Structure of Filter Data
+
+The TableFilter component now supports a hierarchical structure with parent categories and child filters. Here's how to structure your filter data:
+
+```javascript
+const filters = [
+  {
+    id: "parentCategoryId",
+    label: "Parent Category Name",
+    isParent: true,  // Important: mark as parent
+    show: false,
+    class: "",
+    children: [
+      {
+        id: "childFilter1",
+        show: false,
+        label: "Child Filter 1",
+        class: ""
+      },
+      {
+        id: "childFilter2",
+        show: false,
+        label: "Child Filter 2",
+        class: ""
+      }
+    ]
+  },
+  // More parent categories...
+];
+```
+
+## Key Features
+
+1. **Collapsible Parent Categories**: Click on a parent category to show/hide its children
+2. **Visual Indicators**: Arrow indicators show whether a parent category is expanded
+3. **Styling**: Distinct styling for parent categories and child filters
+4. **Active States**: Visual indication of active filters
+5. **Mobile Responsive**: Adapts to smaller screens with a toggle menu
+
+## Usage Example
+
+```jsx
+import React, { useState } from 'react';
+import TableFilter from '../TableFilter';
+
+function MyComponent() {
+  const [filters, setFilters] = useState([
+    // Your filter structure here
+  ]);
+  
+  const [settings, setSettings] = useState({
+    ajaxSetting: {
+      where: []
+    }
+  });
+  
+  return (
+    <TableFilter 
+      filters={filters}
+      setFilters={setFilters}
+      setSettings={setSettings}
+    />
+  );
+}
+```
+
+## How It Works
+
+1. **Parent Categories**: When you click on a parent category, it toggles the visibility of its children
+2. **Child Filters**: When you click on a child filter:
+   - It becomes active (highlighted)
+   - The `show` property is set to `true`
+   - The `settings` object is updated with the filter's ID and value
+   - The content area should update based on the selected filter
+
+## Handling Filter Selection
+
+To display content based on the selected filter, check which filter has `show: true`:
+
+```javascript
+// Find the active filter
+const getActiveFilter = () => {
+  let activeFilter = null;
+  
+  filters.forEach(parent => {
+    if (parent.children) {
+      parent.children.forEach(child => {
+        if (child.show) {
+          activeFilter = {
+            parent: parent.label,
+            child: child.label,
+            id: child.id
+          };
+        }
+      });
+    }
+  });
+  
+  return activeFilter;
+};
+
+// Use the active filter to display content
+const activeFilter = getActiveFilter();
+if (activeFilter) {
+  // Display content for the active filter
+}
+```
+
+See the `FilterExample.jsx` file for a complete working example.