@visns-studio/visns-components 5.4.6 → 5.4.8

package/README.md

@@ -1,67 +1,527 @@
-# Visns Components
-
-A list of components that is used by the Visns Studio team on all their CRM and CMS Projects.
-
-# Modules
-
-There are multiple components that are shared between the CRM and CMS but there are also unique components for both the CRM and CMS
-
-## CRM
-
--   Authentication UI
-    -   Login
-    -   Profile
-    -   Reset
-    -   Verify
--   DataGrid
--   Form
--   Generic Pages
-    -   Detail Page
-    -   Index Page
-    -   Notification Page
-
-## CMS
-
--   DataGrid
--   DropZone
--   Field
--   Form
--   Generic Pages
-    -   Detail Page
-    -   Index Page
-    -   Sorting Page
-
-## Shared
-
--   Asynchronous React Select
--   Autocomplete (Mapbox)
--   Call Popup
--   Download (Axios)
--   Fetch (Axios)
--   Loader
--   Multi React Select
--   Navigation / Header
--   Notification
--   Select
--   Sub Navigati
-
-# Usage
-
-Detail list of the usage for each components.
-
-## CRM
-
-### DataGrid
-
-#### Prop List
-
-| Prop          | Description | Default |
-| ------------- | ----------- | ------- |
-| ajaxSetting   |             |         |
-| columns       |             |         |
-| form          |             |         |
-| gridHeight    |             |         |
-| settings      |             |         |
-| setFilterData |             |         |
-| setConfig     |             |         |
-| style         |             |         |
+# VISNS Components
+
+A comprehensive React component library used by the VISNS Studio team for CRM and CMS projects, featuring authentication, data visualization, form handling, and more.
+
+[![npm version](https://img.shields.io/npm/v/visns-components.svg)](https://www.npmjs.com/package/visns-components)
+[![license](https://img.shields.io/npm/l/visns-components.svg)](https://github.com/yourusername/visns-components/blob/master/LICENSE)
+
+## Overview
+
+VISNS Components is a React-based UI component library that provides a set of reusable, consistent, and customizable components for building web applications. It includes components for authentication, data grids, forms, navigation, and more, designed to work seamlessly together.
+
+## Features
+
+### Authentication System
+
+-   **Login** - Email/password authentication
+-   **Two-Factor Authentication (2FA)** - Additional security layer (optional)
+-   **Password Reset** - Secure password recovery flow
+-   **Profile Management** - User profile editing
+-   **SSO Integration** - Support for Microsoft Azure
+
+### Data Visualization
+
+-   **DataGrid** - Powerful data table with sorting, filtering, and pagination
+-   **Charts** - Various chart types for data visualization
+
+### Form Components
+
+-   **Form Builder** - Dynamic form creation and validation
+-   **Field Components** - Text inputs, selects, checkboxes, etc.
+-   **Multi-select** - Enhanced select with multiple selection support
+-   **Autocomplete** - Mapbox integration for location selection
+-   **Dropzone** - File upload with drag and drop support
+
+### Navigation
+
+-   **Header/Navigation** - Application header with navigation
+-   **Sub Navigation** - Secondary navigation options
+
+### Utility Components
+
+-   **Fetch** - Axios-based data fetching with error handling
+-   **Download** - File download functionality
+-   **Loader** - Loading indicators
+-   **Notification** - Toast notifications
+-   **Call Popup** - Modal dialogs
+
+### Generic Pages
+
+-   **Index Pages** - List view templates
+-   **Detail Pages** - Item detail templates
+-   **Notification Pages** - User notification center
+-   **Sorting Pages** - Content ordering interfaces
+
+## Installation
+
+```bash
+npm install visns-components
+# or
+yarn add visns-components
+```
+
+## Usage
+
+### Basic Setup
+
+```jsx
+import React from 'react';
+import { GenericAuth } from 'visns-components';
+
+const App = () => {
+    return (
+        <GenericAuth
+            logo="/path/to/logo.png"
+            headerLogo="/path/to/header-logo.png"
+            providers={['azure']} // Optional SSO providers
+            themeType="primary"
+            navigation={navigationConfig}
+            routeConfig={routeConfig}
+        />
+    );
+};
+
+export default App;
+```
+
+## Component Documentation
+
+### Authentication Components
+
+#### GenericAuth
+
+The main component that handles authentication and routing.
+
+```jsx
+<GenericAuth
+    layout="full" // 'full' or 'compact'
+    loginBg="/path/to/background.jpg" // Optional login background
+    logo="/path/to/logo.png" // Logo for login/auth screens
+    headerLogo="/path/to/header-logo.png" // Logo for header in main app
+    providers={['azure']} // Optional SSO providers
+    navigation={navigationConfig} // Navigation configuration
+    routeConfig={routeConfig} // Route configuration
+    themeType="primary" // Theme type: 'primary', 'secondary', etc.
+/>
+```
+
+#### Login
+
+Handles user login with email and password.
+
+```jsx
+<Login
+    logo="/path/to/logo.png"
+    providers={['azure']} // Optional SSO providers
+    setSystemAuth={setAuthFunction}
+    setUserProfile={setUserProfileFunction}
+/>
+```
+
+#### TwoFactorAuth
+
+Handles 2FA verification.
+
+```jsx
+<TwoFactorAuth
+    logo="/path/to/logo.png"
+    setSystemAuth={setAuthFunction}
+    setUserProfile={setUserProfileFunction}
+/>
+```
+
+#### Reset
+
+Password reset request form.
+
+```jsx
+<Reset logo="/path/to/logo.png" setSystemAuth={setAuthFunction} />
+```
+
+#### Verify
+
+Password reset verification form.
+
+```jsx
+<Verify logo="/path/to/logo.png" setSystemAuth={setAuthFunction} />
+```
+
+#### Profile
+
+User profile management.
+
+```jsx
+<Profile
+    userProfile={userProfileData}
+    setUserProfile={setUserProfileFunction}
+/>
+```
+
+### DataGrid Component
+
+A powerful data table component with sorting, filtering, and pagination.
+
+```jsx
+<DataGrid
+    ajaxSetting={{
+        url: '/api/data',
+        method: 'GET',
+        params: {},
+    }}
+    columns={[
+        { field: 'id', headerName: 'ID', width: 90 },
+        { field: 'name', headerName: 'Name', width: 150 },
+        // More columns...
+    ]}
+    form={formConfig}
+    gridHeight={500}
+    settings={{
+        pagination: true,
+        pageSize: 25,
+        // More settings...
+    }}
+    setFilterData={setFilterFunction}
+    setConfig={setConfigFunction}
+    style={
+        {
+            /* Custom styles */
+        }
+    }
+/>
+```
+
+#### DataGrid Props
+
+| Prop          | Description                        | Type     | Default |
+| ------------- | ---------------------------------- | -------- | ------- |
+| ajaxSetting   | Configuration for data fetching    | Object   | -       |
+| columns       | Column definitions                 | Array    | -       |
+| form          | Form configuration for editing     | Object   | -       |
+| gridHeight    | Height of the grid                 | Number   | 500     |
+| settings      | Grid settings (pagination, etc.)   | Object   | -       |
+| setFilterData | Callback for filter changes        | Function | -       |
+| setConfig     | Callback for configuration changes | Function | -       |
+| style         | Custom styles                      | Object   | -       |
+
+### Form Components
+
+#### Form
+
+A flexible form component with validation.
+
+```jsx
+<Form
+    fields={[
+        {
+            name: 'firstName',
+            label: 'First Name',
+            type: 'text',
+            required: true,
+        },
+        { name: 'email', label: 'Email', type: 'email', required: true },
+        // More fields...
+    ]}
+    onSubmit={handleSubmit}
+    initialValues={initialData}
+    validationSchema={validationSchema}
+/>
+```
+
+#### AsyncSelect
+
+Asynchronous select component with search functionality.
+
+```jsx
+<AsyncSelect
+    url="/api/options"
+    valueKey="id"
+    labelKey="name"
+    placeholder="Select an option"
+    onChange={handleChange}
+    value={selectedValue}
+/>
+```
+
+#### MultiSelect
+
+Select component with multiple selection support.
+
+```jsx
+<MultiSelect
+    options={options}
+    value={selectedValues}
+    onChange={handleChange}
+    placeholder="Select options"
+/>
+```
+
+#### Autocomplete
+
+Location autocomplete with Mapbox integration.
+
+```jsx
+<Autocomplete
+    apiKey="your-mapbox-api-key"
+    placeholder="Enter a location"
+    onChange={handleLocationChange}
+    value={location}
+/>
+```
+
+#### DropZone
+
+File upload component with drag and drop support.
+
+```jsx
+<DropZone
+    onDrop={handleFileDrop}
+    accept=".jpg,.png,.pdf"
+    maxSize={5242880} // 5MB
+    multiple={true}
+/>
+```
+
+### Utility Components
+
+#### CustomFetch
+
+Data fetching utility with error handling.
+
+```jsx
+CustomFetch(
+    '/api/data',
+    'GET',
+    { param1: 'value1' },
+    (result) => {
+        // Success callback
+        console.log(result);
+    },
+    (error) => {
+        // Error callback
+        console.error(error);
+    }
+);
+```
+
+#### Download
+
+File download utility.
+
+```jsx
+Download('/api/download', { fileId: 123 }, 'filename.pdf');
+```
+
+#### Loader
+
+Loading indicator component.
+
+```jsx
+<Loader />
+```
+
+#### Notification
+
+Toast notification component.
+
+```jsx
+<Notification
+    message="Operation successful"
+    type="success" // 'success', 'error', 'warning', 'info'
+    duration={3000}
+/>
+```
+
+## Two-Factor Authentication (2FA)
+
+### How 2FA Works
+
+1. User enters email and password on the login screen
+2. If credentials are valid and 2FA is required, the backend returns `requires_2fa: true`
+3. The user is redirected to the 2FA verification screen
+4. User enters the verification code
+5. If the code is valid, the user is authenticated and redirected to the main application
+
+### API Integration for 2FA
+
+#### Login Endpoint Response (when 2FA is required)
+
+```json
+{
+    "error": "",
+    "requires_2fa": true,
+    "user": {
+        "id": "user_id",
+        "email": "user@example.com",
+        "name": "User Name"
+    }
+}
+```
+
+#### 2FA Verification Endpoint
+
+Request:
+
+```json
+{
+    "user_id": "user_id",
+    "verification_code": "123456",
+    "previous_url": "/optional-redirect-url"
+}
+```
+
+Response:
+
+```json
+{
+    "error": "",
+    "user": {
+        "id": "user_id",
+        "email": "user@example.com",
+        "name": "User Name",
+        "roles": ["admin"]
+    },
+    "previous": "/optional-redirect-url"
+}
+```
+
+## Customization
+
+### Theming
+
+The components use CSS variables for theming. You can override these variables in your CSS:
+
+```css
+:root {
+    --primary-color: #007bff;
+    --secondary-color: #6c757d;
+    --third-color: #ffffff;
+    --bg-color: #f8f9fa;
+    --paragraph-color: #212529;
+    --paragraph-rgb: 33, 37, 41;
+    --primary-rgb: 0, 123, 255;
+    --secondary-rgb: 108, 117, 125;
+    --radius: 4px;
+    --sidebar-width: 250px;
+}
+```
+
+### Layout Customization
+
+You can customize the layout by providing different configuration options:
+
+```jsx
+<GenericAuth
+    layout="compact" // 'full' or 'compact'
+    // Other props...
+/>
+```
+
+## Navigation Configuration
+
+The navigation system is highly configurable:
+
+```jsx
+const navigationConfig = {
+    main: [
+        {
+            label: 'Dashboard',
+            icon: 'dashboard',
+            path: '/',
+        },
+        {
+            label: 'Users',
+            icon: 'users',
+            path: '/users',
+            children: [
+                {
+                    label: 'List',
+                    path: '/users',
+                },
+                {
+                    label: 'Add New',
+                    path: '/users/new',
+                },
+            ],
+        },
+        // More items...
+    ],
+    secondary: [
+        // Secondary navigation items...
+    ],
+};
+```
+
+## Route Configuration
+
+Define your application routes:
+
+```jsx
+const routeConfig = [
+    {
+        path: '/',
+        component: Dashboard,
+    },
+    {
+        path: '/users',
+        component: UserList,
+    },
+    {
+        path: '/users/new',
+        component: UserForm,
+    },
+    {
+        path: '/users/:id',
+        component: UserDetail,
+    },
+    // More routes...
+];
+```
+
+## Development
+
+### Prerequisites
+
+-   Node.js (v14 or higher)
+-   npm or yarn
+
+### Setup
+
+1. Clone the repository
+2. Install dependencies:
+    ```bash
+    npm install
+    # or
+    yarn
+    ```
+3. Start the development server:
+    ```bash
+    npm run dev
+    # or
+    yarn dev
+    ```
+
+### Building
+
+```bash
+npm run build
+# or
+yarn build
+```
+
+## Contributing
+
+We welcome contributions! Please follow these steps:
+
+1. Fork the repository
+2. Create a feature branch: `git checkout -b feature/my-feature`
+3. Commit your changes: `git commit -m 'Add my feature'`
+4. Push to the branch: `git push origin feature/my-feature`
+5. Submit a pull request
+
+## License
+
+[MIT License](LICENSE)
+
+## Support
+
+For support, please contact the VISNS Studio team or open an issue on GitHub.

package/package.json

@@ -26,6 +26,7 @@
         "motion": "^10.18.0",
         "numeral": "^2.0.6",
         "pluralize": "^8.0.0",
+        "qrcode.react": "^4.2.0",
         "quill-image-uploader": "^1.3.0",
         "react-big-calendar": "^1.18.0",
         "react-color": "^2.19.3",
@@ -78,7 +79,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.4.6",
+    "version": "5.4.8",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/Navigation.jsx

@@ -197,10 +197,25 @@ function Navigation({
     const appNavClasses = styles['app-nav'];
 
     const handleLogout = () => {
-        CustomFetch('/logout', 'GET', {}, () => {
-            setSystemAuth(false);
-            navigate('/login');
-        });
+        // First navigate to login, then set auth state to false
+        // This prevents the race condition with updateAuthStatus
+        CustomFetch(
+            '/logout',
+            'GET',
+            {},
+            // Success callback
+            () => {
+                // Use window.location for a full page refresh to ensure clean state
+                window.location.href = '/login';
+                // No need to call setSystemAuth as the page will refresh
+            },
+            // Error callback
+            (error) => {
+                console.error('Logout error:', error);
+                // Even if there's an error, force a page refresh to login
+                window.location.href = '/login';
+            }
+        );
     };
 
     const renderSetting = (n) => {