ui-soxo-bootstrap-core 2.6.1-dev.3 → 2.6.1-dev.31

package/core/lib/models/process/components/process-dashboard/process-dashboard.js

@@ -14,7 +14,7 @@
  */
 
 
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useState, useEffect, useContext, useRef } from 'react';
 
 import { Timeline, Card, Skeleton, Button, Modal, Typography, Form, Select, message, Tag } from 'antd';
 
@@ -28,7 +28,7 @@ import TaskStatus from './../task-status/task-status';
 
 import DateUtils from '../../../../utils/date/date.utils';
 
-import { ClockCircleOutlined, CopyOutlined, CheckCircleOutlined, LoadingOutlined, EditOutlined, ReloadOutlined } from '@ant-design/icons';
+import { ClockCircleOutlined, CopyOutlined, CheckCircleOutlined, LoadingOutlined, EditOutlined, ReloadOutlined, SoundOutlined, PauseCircleOutlined } from '@ant-design/icons';
 
 import { CopyToClipBoard } from '../../../..';
 
@@ -59,6 +59,340 @@ let stepMaster = {
 
 }
 
+const GEMINI_TTS_MODEL =
+    process.env.GEMINI_TTS_MODEL || process.env.REACT_APP_GEMINI_TTS_MODEL || 'gemini-2.5-flash-preview-tts';
+const GEMINI_TTS_VOICE = process.env.GEMINI_TTS_VOICE || process.env.REACT_APP_GEMINI_TTS_VOICE || 'Kore';
+const GEMINI_TTS_API_BASE_URL =
+    process.env.GEMINI_API_BASE_URL || process.env.REACT_APP_GEMINI_API_BASE_URL || 'https://generativelanguage.googleapis.com/v1beta';
+const ELEVENLABS_TTS_API_BASE_URL =
+    process.env.ELEVENLABS_TTS_API_BASE_URL ||
+    process.env.REACT_APP_ELEVENLABS_TTS_API_BASE_URL ||
+    'https://api.elevenlabs.io/v1/text-to-speech';
+const ELEVENLABS_MODEL_ID =
+    process.env.ELEVENLABS_MODEL_ID || process.env.REACT_APP_ELEVENLABS_MODEL_ID || 'eleven_multilingual_v2';
+const ELEVENLABS_OUTPUT_FORMAT =
+    process.env.ELEVENLABS_OUTPUT_FORMAT || process.env.REACT_APP_ELEVENLABS_OUTPUT_FORMAT || 'mp3_44100_128';
+const DEFAULT_ELEVENLABS_VOICE_ID =
+    process.env.ELEVENLABS_VOICE_ID ||
+    process.env.ELEVEN_LABS_VOICE_ID ||
+    process.env.REACT_APP_ELEVENLABS_VOICE_ID ||
+    '21m00Tcm4TlvDq8ikWAM';
+
+function getFromStorage(storageKey) {
+
+    if (typeof window === 'undefined' || !window.localStorage) {
+        return null;
+    }
+
+    try {
+        return window.localStorage.getItem(storageKey);
+    } catch (error) {
+        return null;
+    }
+}
+
+function getGeminiApiKey() {
+
+    if (process.env.GEMINI_API_KEY) {
+        return process.env.GEMINI_API_KEY;
+    }
+
+    if (process.env.REACT_APP_GEMINI_API_KEY) {
+        return process.env.REACT_APP_GEMINI_API_KEY;
+    }
+
+    if (typeof window !== 'undefined') {
+        try {
+            if (window.localStorage) {
+                return window.localStorage.getItem('gemini_api_key');
+            }
+        } catch (error) {
+            return null;
+        }
+    }
+
+    return null;
+}
+
+function getElevenLabsApiKey() {
+    return (
+        process.env.ELEVEN_LABS_KEY ||
+        process.env.ELEVENLABS_API_KEY ||
+        process.env.REACT_APP_ELEVEN_LABS_KEY ||
+        process.env.REACT_APP_ELEVENLABS_API_KEY ||
+        getFromStorage('eleven_labs_key') ||
+        getFromStorage('elevenlabs_api_key') ||
+        getFromStorage('ELEVEN_LABS_KEY') ||
+        getFromStorage('REACT_APP_ELEVEN_LABS_KEY') ||
+        getFromStorage('REACT_APP_ELEVENLABS_API_KEY')
+    );
+}
+
+function getStepNarration({ step, step_transactions }) {
+
+    if (!step) {
+        return 'Step details are not available.';
+    }
+
+    const chunks = [];
+
+    chunks.push(`Step ${step.name || 'Unnamed step'}.`);
+
+    if (step.description) {
+        chunks.push(step.description);
+    }
+
+    const currentState = step.current_state || 'pending';
+
+    chunks.push(`Current status is ${currentState}.`);
+
+    if (step.roles && step.roles.length) {
+        const roleNames = step.roles.map((role) => role && role.name).filter(Boolean);
+
+        if (roleNames.length) {
+            chunks.push(`Pending with ${roleNames.join(', ')}.`);
+        }
+    }
+
+    if (step_transactions && step_transactions.start_time) {
+        const startTime = DateUtils.displayFirestoreTime(step_transactions.start_time);
+
+        if (startTime) {
+            chunks.push(`Started at ${startTime}.`);
+        }
+    }
+
+    if (step_transactions && step_transactions.completed && step_transactions.end_time) {
+        const endTime = DateUtils.displayFirestoreTime(step_transactions.end_time);
+
+        if (endTime) {
+            chunks.push(`Completed at ${endTime}.`);
+        }
+    }
+
+    return chunks.join(' ');
+}
+
+function extractGeminiAudio(payload) {
+    const candidates = payload && payload.candidates ? payload.candidates : [];
+
+    for (const candidate of candidates) {
+        const parts = candidate && candidate.content && candidate.content.parts ? candidate.content.parts : [];
+
+        for (const part of parts) {
+            const inlineData = part.inlineData || part.inline_data || part.audio;
+
+            if (inlineData && inlineData.data) {
+                return {
+                    mimeType: inlineData.mimeType || inlineData.mime_type || 'audio/wav',
+                    data: inlineData.data
+                };
+            }
+        }
+    }
+
+    return null;
+}
+
+async function synthesizeGeminiAudio(text) {
+
+    const apiKey = getGeminiApiKey();
+
+    if (!apiKey) {
+        throw new Error('Gemini API key is missing');
+    }
+
+    const endpoint = `${GEMINI_TTS_API_BASE_URL}/models/${GEMINI_TTS_MODEL}:generateContent?key=${apiKey}`;
+
+    const response = await fetch(endpoint, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            contents: [{
+                role: 'user',
+                parts: [{ text }]
+            }],
+            generationConfig: {
+                responseModalities: ['AUDIO'],
+                speechConfig: {
+                    voiceConfig: {
+                        prebuiltVoiceConfig: {
+                            voiceName: GEMINI_TTS_VOICE
+                        }
+                    }
+                }
+            }
+        })
+    });
+
+    if (!response.ok) {
+        throw new Error(`Gemini TTS request failed with status ${response.status}`);
+    }
+
+    const payload = await response.json();
+
+    const audio = extractGeminiAudio(payload);
+
+    if (!audio || !audio.data) {
+        throw new Error('Gemini did not return audio data');
+    }
+
+    return `data:${audio.mimeType};base64,${audio.data}`;
+}
+
+async function synthesizeElevenLabsAudio(text) {
+
+    const apiKey = getElevenLabsApiKey();
+
+    if (!apiKey) {
+        throw new Error('ElevenLabs API key is missing');
+    }
+
+    const endpoint = `${ELEVENLABS_TTS_API_BASE_URL}/${encodeURIComponent(DEFAULT_ELEVENLABS_VOICE_ID)}/stream?output_format=${encodeURIComponent(
+        ELEVENLABS_OUTPUT_FORMAT
+    )}`;
+
+    const response = await fetch(endpoint, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            Accept: 'audio/mpeg',
+            'xi-api-key': apiKey
+        },
+        body: JSON.stringify({
+            text,
+            model_id: ELEVENLABS_MODEL_ID
+        })
+    });
+
+    if (!response.ok) {
+        throw new Error(`ElevenLabs TTS request failed with status ${response.status}`);
+    }
+
+    return response.blob();
+}
+
+function playAudioDataUri(dataUri, audioReference) {
+    return new Promise((resolve, reject) => {
+        const audio = new Audio(dataUri);
+
+        audioReference.current = audio;
+
+        const clean = () => {
+            if (audioReference.current === audio) {
+                audioReference.current = null;
+            }
+        };
+
+        audio.onended = () => {
+            clean();
+            resolve();
+        };
+
+        audio.onpause = () => {
+            clean();
+            resolve();
+        };
+
+        audio.onerror = () => {
+            clean();
+            reject(new Error('Audio playback failed'));
+        };
+
+        audio.play().catch((error) => {
+            clean();
+            reject(error);
+        });
+    });
+}
+
+function playAudioBlob(audioBlob, audioReference, audioUrlReference) {
+    return new Promise((resolve, reject) => {
+        if (typeof window === 'undefined' || !window.Audio || !window.URL) {
+            reject(new Error('Audio playback is not available'));
+            return;
+        }
+
+        if (audioUrlReference.current) {
+            window.URL.revokeObjectURL(audioUrlReference.current);
+            audioUrlReference.current = null;
+        }
+
+        const audioUrl = window.URL.createObjectURL(audioBlob);
+        const audio = new Audio(audioUrl);
+
+        audioReference.current = audio;
+        audioUrlReference.current = audioUrl;
+
+        const clean = () => {
+            if (audioReference.current === audio) {
+                audioReference.current = null;
+            }
+
+            if (audioUrlReference.current === audioUrl) {
+                window.URL.revokeObjectURL(audioUrl);
+                audioUrlReference.current = null;
+            }
+        };
+
+        audio.onended = () => {
+            clean();
+            resolve();
+        };
+
+        audio.onpause = () => {
+            clean();
+            resolve();
+        };
+
+        audio.onerror = () => {
+            clean();
+            reject(new Error('Audio playback failed'));
+        };
+
+        audio.play().catch((error) => {
+            clean();
+            reject(error);
+        });
+    });
+}
+
+function speakWithBrowser(text, speechReference) {
+    return new Promise((resolve, reject) => {
+        if (typeof window === 'undefined' || !window.speechSynthesis || !window.SpeechSynthesisUtterance) {
+            reject(new Error('Speech synthesis is not available'));
+            return;
+        }
+
+        const utterance = new window.SpeechSynthesisUtterance(text);
+
+        utterance.lang = process.env.REACT_APP_TTS_LANG || 'en-US';
+
+        speechReference.current = utterance;
+
+        utterance.onend = () => {
+            if (speechReference.current === utterance) {
+                speechReference.current = null;
+            }
+
+            resolve();
+        };
+
+        utterance.onerror = () => {
+            if (speechReference.current === utterance) {
+                speechReference.current = null;
+            }
+
+            reject(new Error('Browser narration failed'));
+        };
+
+        window.speechSynthesis.cancel();
+        window.speechSynthesis.speak(utterance);
+    });
+}
+
 /**
  * 
  */
@@ -257,8 +591,125 @@ function StepTimelineItem({ id, color, Icon, step, step_transactions, callback }
 
     const [loading, setLoading] = useState(false);
 
+    const [narrating, setNarrating] = useState(false);
+
     const { user = { locations: [] } } = useContext(GlobalContext);
 
+    const audioReference = useRef(null);
+
+    const audioUrlReference = useRef(null);
+
+    const speechReference = useRef(null);
+
+    const narrationSessionReference = useRef(0);
+
+    const fallbackNoticeShownReference = useRef(false);
+
+    useEffect(() => {
+        return () => {
+            stopNarration();
+        }
+    }, [])
+
+    /**
+     * Stop active narration audio
+     */
+    function stopNarration() {
+        narrationSessionReference.current += 1;
+
+        if (audioReference.current) {
+            audioReference.current.pause();
+            audioReference.current.src = '';
+            audioReference.current = null;
+        }
+
+        if (audioUrlReference.current && typeof window !== 'undefined' && window.URL) {
+            window.URL.revokeObjectURL(audioUrlReference.current);
+            audioUrlReference.current = null;
+        }
+
+        if (typeof window !== 'undefined' && window.speechSynthesis) {
+            window.speechSynthesis.cancel();
+        }
+
+        speechReference.current = null;
+        setNarrating(false);
+    }
+
+    /**
+     * Narrate the current step with ElevenLabs/Gemini TTS only (no browser fallback).
+     */
+    async function narrateStep() {
+        const narration = getStepNarration({ step, step_transactions });
+
+        if (!narration) {
+            message.warning('Narration text is not available for this step.');
+            return;
+        }
+
+        stopNarration();
+
+        const sessionId = narrationSessionReference.current;
+        const hasElevenLabsKey = Boolean(getElevenLabsApiKey());
+
+        setNarrating(true);
+
+        try {
+            let aiNarrationComplete = false;
+            let aiNarrationError = null;
+
+            if (hasElevenLabsKey) {
+                try {
+                    const audioBlob = await synthesizeElevenLabsAudio(narration);
+
+                    if (sessionId !== narrationSessionReference.current) {
+                        return;
+                    }
+
+                    await playAudioBlob(audioBlob, audioReference, audioUrlReference);
+                    aiNarrationComplete = true;
+                } catch (elevenLabsError) {
+                    aiNarrationError = elevenLabsError;
+                }
+            }
+
+            if (!aiNarrationComplete) {
+                try {
+                    const dataUri = await synthesizeGeminiAudio(narration);
+
+                    if (sessionId !== narrationSessionReference.current) {
+                        return;
+                    }
+
+                    await playAudioDataUri(dataUri, audioReference);
+                    aiNarrationComplete = true;
+                } catch (geminiError) {
+                    aiNarrationError = geminiError;
+                }
+            }
+
+            if (!aiNarrationComplete) {
+                throw aiNarrationError || new Error('AI narration unavailable');
+            }
+
+        } catch (error) {
+            if (sessionId !== narrationSessionReference.current) {
+                return;
+            }
+
+            if (!fallbackNoticeShownReference.current) {
+                message.warning(`${hasElevenLabsKey ? 'ElevenLabs/Gemini' : 'Gemini'} narration unavailable.`);
+                fallbackNoticeShownReference.current = true;
+            }
+
+            message.error(error?.message || 'Unable to play narration for this step.');
+        } finally {
+            if (sessionId === narrationSessionReference.current) {
+                setNarrating(false);
+            }
+        }
+    }
+
     /**
   * Function to open editModal for Step
   * 
@@ -347,6 +798,21 @@ function StepTimelineItem({ id, color, Icon, step, step_transactions, callback }
             {/* Actions for a step */}
             <div className="actions">
 
+                <Button size={'small'} onClick={() => {
+                    if (narrating) {
+                        stopNarration();
+                        return;
+                    }
+
+                    narrateStep();
+                }}>
+
+                    {narrating ? <PauseCircleOutlined /> : <SoundOutlined />}
+
+                    {narrating ? 'Stop Narration' : 'Narrate'}
+
+                </Button>
+
                 {user.isAdmin && <>
 
                     <CopyToClipBoard record={step} id={step.id} />
@@ -599,4 +1065,4 @@ function RevertProcessTransaction({ id, process = [], callback }) {
         </Form>
     </>)
 
-}
+}

package/core/lib/models/process/components/process-dashboard/process-dashboard.scss

@@ -42,6 +42,10 @@
                 }
 
                 .actions {
+                    display: flex;
+                    gap: 6px;
+                    align-items: center;
+                    flex-wrap: wrap;
                 }
             }
 

package/core/lib/modules/generic/generic-list/ExportReactCSV.js

@@ -10,6 +10,8 @@
 import React from 'react';
 // Import XLSX library to handle Excel file creation
 import * as XLSX from 'xlsx';
+// import * as XLSX from 'xlsx-js-style';
+// import * as XLSX from 'xlsx-js-style';
 // Import saveAs from file-saver to trigger file download in browser
 import { saveAs } from 'file-saver';
 import { Button } from 'antd';
@@ -30,7 +32,27 @@ export const ExportReactCSV = ({ csvData, headers, fileName,title }) => {
       // Extract label names for the header row
       const headerLabels = headers.map((h) => h.label);
       // Map data rows according to the headers' key order
-      const rows = csvData.map((row) => headers.map((h) => row[h.key]));
+      const rows = csvData.map((row) =>
+        headers.map((h, hIndex) => {
+          let value = row[h.key];
+          // If it's a summary row, return a cell object with bold styling
+          if (row.isSummaryRow) {
+            // Remove the index value (typically the first column) for the summary row
+            if (hIndex === 0) value = "";
+
+            return {
+              v: value,
+              s: {
+                font: { bold: true },
+                // "Thick" visual indicator via border
+                // Visual indicator via border
+                border: { bottom: { style: "thick", color: { rgb: "000000" } } }
+              }
+            };
+          }
+          return value;
+        })
+      );
       // Create a worksheet from an array of arrays (header + rows)
       const data = [[title || "Report"], [], headerLabels, ...rows];
       // worksheet = XLSX.utils.aoa_to_sheet([headerLabels, ...rows]);
@@ -44,7 +66,11 @@ export const ExportReactCSV = ({ csvData, headers, fileName,title }) => {
     // Append the worksheet to the workbook with the name 'Sheet1'
     XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
     // Write workbook to a buffer as an array
-    const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
+    const excelBuffer = XLSX.write(workbook, {
+      bookType: 'xlsx',
+      type: 'array',
+      cellStyles: true, // Required to export styles
+    });
     // Create a Blob object from the buffer with correct MIME type
     const blob = new Blob([excelBuffer], {
       type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',

package/core/lib/pages/change-password/change-password.js

@@ -39,7 +39,7 @@ function ChangePassword({ history }) {
 
 	const [loading, setLoading] = useState(false);
 
-	console.log(user);
+
 
 	const onFinish = (values) => {
 
@@ -55,34 +55,27 @@ function ChangePassword({ history }) {
 					confirm_password: values.conpassword
 				}
 
-				ApiUtils.post({
-					url: `users/change-password`,
-					formBody,
-					hideError: true
-				}).then((result) => {
-
-					var msg = Object.values(result)
-
-					if (msg[0] === 'INCORRECT PASSWORD') {
-						//If current Password is entered wrong
-						message.error('Incorrect Password')
-						setLoading(false);
-						return false
-					}
-					else {
+        ApiUtils.post({
+          url: `users/change-password`,
+		  headers: {
+			 db_ptr: 'nuraho'
+		  },
+          formBody,
+          hideError: true
+        })
+          .then((result) => {          
 
 						setLoading(false);
 
 						history.goBack();
 
-						// Update successful.
-						message.success('Your password has been updated!')
-					}
-
-				}).catch(function (error) {
-
-					// An error happened.
-					message.error(error.result || error.message)
+              // Update successful.
+              message.success(result.result || 'Your password has been updated!');
+          
+            }).catch(function (error) {
+			
+				// An error happened.
+            	message.warning(error.result || error.message);
 
 					setLoading(false);