ui-soxo-bootstrap-core 2.6.59 → 2.6.62-dev.1

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

@@ -1,1068 +1,1068 @@
-/**
- * 
- * A Single Dashboard that should be able to manage any process in a business
- * according to configred by system . 
- * 
- * A process of different steps , each step linked to different roles of users and has a form/page to complete
- * that particular step is part of this module . 
- * 
- * 
- * 
- * @description Component for updating each process 
- * @author Ashique
- * 
- */
-
-
-import React, { useState, useEffect, useContext, useRef } from 'react';
-
-import { Timeline, Card, Skeleton, Button, Modal, Typography, Form, Select, message, Tag } from 'antd';
-
-import { Process, ProcessTransactions, Steps } from '../../../';
-
-import TaskForm from './../task-form/task-form';
-
-import './process-dashboard.scss';
-
-import TaskStatus from './../task-status/task-status';
-
-import DateUtils from '../../../../utils/date/date.utils';
-
-import { ClockCircleOutlined, CopyOutlined, CheckCircleOutlined, LoadingOutlined, EditOutlined, ReloadOutlined, SoundOutlined, PauseCircleOutlined } from '@ant-design/icons';
-
-import { CopyToClipBoard } from '../../../..';
-
-import { GlobalContext } from './../../../../Store';
-
-const { Title } = Typography;
-
-const { Option } = Select;
-
-let stepMaster = {
-    ongoing: {
-        icon: LoadingOutlined,
-        color: 'blue'
-    },
-    pending: {
-        icon: ClockCircleOutlined,
-        color: 'orange'
-    },
-    completed: {
-        icon: CheckCircleOutlined,
-        color: 'green'
-    },
-
-    waiting: {
-        icon: ClockCircleOutlined,
-        color: 'red'
-    },
-
-}
-
-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);
-    });
-}
-
-/**
- * 
- */
-export default function ProcessDashboard({ id, identifier, callback = () => { } }) {
-
-    const { user = { locations: [] } } = useContext(GlobalContext);
-
-    const [loading, setLoading] = useState(false);
-
-    const [process, setProcess] = useState([]);
-
-    const [transactionmodal, setTransactionmodal] = useState(false);
-
-    useEffect(() => {
-
-        // We have to load the process for the identified received as a property
-
-        // The process / steps are recorded specific to a an id which can be of any model . 
-        getProcess();
-
-        return () => {
-
-        }
-
-    }, [])
-
-    /**
-     * Get the process of an identifier 
-     * 
-     * @returns 
-     */
-    function getProcess() {
-
-        setLoading(true);
-
-        var queries = [{
-            field: 'modelIdentifier',
-            value: identifier
-        }]
-
-        // Get the process with the current status of an id passed . 
-        return Process.getProcessTimeline({ identifier, id }).then((result) => {
-
-            setProcess(result);
-
-            console.log(result);
-
-            setLoading(false);
-
-        });
-    }
-
-
-    /**
-     * Revert the modal
-     */
-    function openRevertModal() {
-
-        setTransactionmodal(true);
-    }
-
-
-    /**
-     * Close the revert modal 
-     */
-    function closeRevertModal() {
-        setTransactionmodal(false);
-
-    }
-
-    return (<div className="process-dashboard card">
-
-        {/* 
-        <div className="page-header">
-
-            <Title level={5}>
-                Process Dashboard
-            </Title>
-
-            <div className="actions">
-
-                {
-                    user.isAdmin
-                    &&
-                    <Button size={'small'} onClick={() => { openRevertModal() }}>
-                        <ReloadOutlined />
-                        Revert
-                    </Button>
-                }
-
-            </div>
-        </div> */}
-
-        {
-            loading
-                ?
-                <>
-
-                    <strong className="process-title">
-                        Loading content ,
-                    </strong>
-
-                    <Skeleton />
-                </>
-
-                :
-                <>
-
-                    {
-                        process.map((records) => {
-
-                            // If there is a process transaction record this process has started 
-                            let { process_transactions = [] } = records;
-
-                            return (<>
-
-                                <div className='page-header'>
-                                    <div>
-
-                                        <strong className="process-title">
-                                            {records.name}
-                                        </strong>
-
-                                        <p className="process-description">
-                                            <small>
-                                                {records.description}
-                                            </small>
-                                        </p>
-                                    </div>
-
-                                    <div className='actions'>
-
-                                        <CopyToClipBoard id={records.id} record={records} />
-
-
-                                        {
-                                            user.isAdmin
-                                            &&
-                                            <Button size={'small'} onClick={() => { openRevertModal() }}>
-                                                <ReloadOutlined />
-                                                Revert
-                                            </Button>
-                                        }
-
-                                    </div>
-
-                                </div>
-
-                                {
-                                    process_transactions.length
-                                        ?
-                                        <small className='timeline'>
-                                            {/* {DateUtils.displayFirestoreTime(process_transactions[0].start_time)} -  {process_transactions[0].completed ? DateUtils.displayFirestoreTime(process_transactions[0].end_time) : 'Pending'} */}
-                                        </small>
-                                        :
-                                        null
-                                }
-
-                                <Timeline className="process-timeline">
-
-                                    {/* Steps List */}
-                                    <StepsList id={id} steps={records.steps} callback={getProcess} />
-                                    {/* Steps List Ends */}
-
-                                </Timeline>
-                            </>)
-                        })
-                    }
-
-                    {/* Add Modal */}
-                    <Modal destroyOnClose confirmLoading={loading} title="Revert" visible={transactionmodal} onCancel={() => { closeRevertModal() }} footer={null}>
-
-                        <RevertProcessTransaction id={id} process={process} callback={() => {
-
-                            closeRevertModal()
-                        }} />
-
-                    </Modal>
-                    {/* Add Modal Ends */}
-
-                </>
-        }
-
-    </div >)
-
-}
-
-/**
- * The Timeline item that displays a step
- */
-function StepTimelineItem({ id, color, Icon, step, step_transactions, callback }) {
-
-    const [body, setBody] = useState({});
-
-    const [visible, setVisible] = useState(false);
-
-    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
-  * 
-  * @param {*} step 
-  */
-    function openEditModal(step) {
-
-        setVisible(true);
-
-        setBody(step)
-
-    }
-
-    /**
-     * 
-     * @param {*} step 
-     */
-    async function startStep(step) {
-
-        // Batch 
-        let app = Process.getFireStoreApp();
-
-        // Starting a batched write
-        let batch = app.batch();
-
-        let body = {
-            record_id: id,
-            model_identifer: 'Candidates'
-        }
-
-        await Process.startStepBatch({ batch, step, body });
-
-        await batch.commit();
-
-        message.success("Step Started");
-    }
-
-    /**
-     * 
-     * @param {*} step 
-     */
-    async function completeStep(step) {
-
-        // Batch 
-        let app = Process.getFireStoreApp();
-
-        // Starting a batched write
-        let batch = app.batch();
-
-        let body = {
-            record_id: id,
-            model_identifer: 'Candidates'
-        }
-
-        await Process.stopStepBatch({ batch, step, body });
-
-        message.success("Step Ended");
-
-    }
-
-    /**
-     * 
-     * @param {*} step 
-     */
-    function closeModal() {
-
-        setVisible(false);
-    }
-
-
-    return (<Timeline.Item color={color} dot={<Icon />} >
-
-        {/* Timeline Step Template */}
-        <div className="timeline-content">
-
-            <p className={'timeline-title'}>
-                {step.name}
-
-                <p className={'timeline-description'}>
-                    <small>
-                        {step.description}
-                    </small>
-                </p>
-            </p>
-
-            {/* 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} />
-
-                    <Button size={'small'} onClick={() => { openEditModal(step) }}>
-
-                        <EditOutlined />
-
-                        Edit
-
-                    </Button>
-
-                    <Button size={'small'} onClick={() => { startStep(step) }}>
-
-                        Start
-
-                    </Button>
-
-                    <Button size={'small'} onClick={() => { completeStep(step) }}>
-
-                        Complete
-
-                    </Button>
-
-                </>}
-
-            </div>
-            {/* Actions for a step Ends */}
-
-        </div>
-        {/* Timeline Step Template Ends */}
-
-        {/* Summary of Step Activity */}
-        <TaskStatus id={id} color={color} step={step} step_transactions={step_transactions} />
-        {/* Summary of Step Activity Ends */}
-
-        {/* Form for the Step */}
-        {step.formEnabled && <Card className="task-form-card">
-
-            <h1>
-                Form Enabled Value {step.formEnabled} - {step.name}
-
-            </h1>
-
-            <TaskForm
-                record_id={id}
-                step={step}
-
-                callback={callback}
-
-            />
-
-        </Card>}
-        {/* Form for the Step Ends */}
-
-
-        {
-            step.sub_steps.length ?
-                <>
-                    <Timeline className="process-timeline">
-
-                        <StepsList id={id} steps={step.sub_steps} />
-
-                    </Timeline>
-                </>
-                :
-                null
-        }
-
-
-        {/* Add Modal */}
-        <Modal destroyOnClose confirmLoading={loading} title="Edit Step" visible={visible} onCancel={() => { closeModal() }} footer={null}>
-            <Steps.ModalAddComponent
-                // match={match}
-                model={Steps}
-                additional_queries={[]}
-                formContent={body}
-
-                callback={() => {
-                    closeModal(true);
-                }}
-            />
-        </Modal>
-        {/* Add Modal Ends */}
-
-        {/* </>
-        } */}
-
-    </Timeline.Item>)
-
-}
-
-
-/**
- * List of Steps inside a Timline
- */
-function StepsList({ id, steps = [], callback }) {
-
-    return (<>
-
-        {
-            steps.map((step) => {
-
-                let color = stepMaster[step.current_state].color;
-
-                let Icon = stepMaster[step.current_state].icon;
-
-                let step_transactions = false;
-
-                if (step.step_transactions && step.step_transactions.length) {
-
-                    step_transactions = step.step_transactions[0];
-
-                }
-
-                return (<>
-
-                    {/* Details of the step */}
-                    <StepTimelineItem
-                        id={id}
-                        color={color}
-                        Icon={Icon}
-                        step={step}
-                        step_transactions={step_transactions}
-
-                        callback={callback}
-                    />
-                    {/* Details of the step Ends */}
-
-
-                    {/* Form for the Step */}
-                    {/* {step.formEnabled && <Card className="task-form-card">
-
-                        <h1>
-                            Form Enabled Value {step.formEnabled} - {step.name}
-
-                        </h1>
-
-                        <TaskForm
-                            record_id={id}
-                            step={step}
-
-                        // callback={callback}
-
-                        />
-
-                    </Card>} */}
-                    {/* Form for the Step Ends */}
-
-                </>)
-            })
-        }
-
-    </>)
-
-}
-
-
-
-
-/**
- * 
- * 
- * @returns 
- */
-function RevertProcessTransaction({ id, process = [], callback }) {
-
-    // const form = useRef(null)
-
-    const [loading, setLoading] = useState(false);
-
-    const [processtransactions, setProcesstransactions] = useState([])
-
-    useEffect(() => {
-
-        getProcessTransaction();
-
-        return () => {
-        }
-    }, [])
-
-    /**
-     * 
-     * @returns 
-     */
-    function getProcessTransaction() {
-
-        var queries = [{ field: 'record_id', value: id }];
-
-        return ProcessTransactions.get(queries).then(({ process_transactions }) => {
-
-            setProcesstransactions(process_transactions);
-
-            console.log(process_transactions);
-
-        })
-    }
-
-    /**
-     * On Submit of form , Change the process transaction to specific step
-     */
-    function onSubmit(values) {
-
-        // Batch 
-        let app = Process.getFireStoreApp();
-
-        // Starting a batched write
-        let batch = app.batch();
-
-        setLoading(true);
-
-        console.log(values);
-
-        Process.triggerProcessBatch(batch, values.process_id, {}, processtransactions[0].id).then(() => {
-
-            message.success("Reverted case to ", values.process_id);
-
-            setLoading(false);
-
-            callback();
-
-        })
-    }
-
-    return (<>
-
-        <Title level={4}>
-            Revert Step
-        </Title>
-
-        <Form
-            // form={form}
-            layout="vertical"
-            onFinish={onSubmit}>
-
-            <Form.Item label="Process" name="process_id" required>
-                <Select style={{ width: '100%' }}>
-
-                    {process.map((staff) => <Option value={staff.id}>{staff.name}</Option>)}
-
-                </Select>
-            </Form.Item>
-
-            <Form.Item >
-                <Button loading={loading} type="primary" htmlType="submit">
-                    Submit
-                </Button>
-            </Form.Item>
-
-        </Form>
-    </>)
-
-}
+/**
+ * 
+ * A Single Dashboard that should be able to manage any process in a business
+ * according to configred by system . 
+ * 
+ * A process of different steps , each step linked to different roles of users and has a form/page to complete
+ * that particular step is part of this module . 
+ * 
+ * 
+ * 
+ * @description Component for updating each process 
+ * @author Ashique
+ * 
+ */
+
+
+import React, { useState, useEffect, useContext, useRef } from 'react';
+
+import { Timeline, Card, Skeleton, Button, Modal, Typography, Form, Select, message, Tag } from 'antd';
+
+import { Process, ProcessTransactions, Steps } from '../../../';
+
+import TaskForm from './../task-form/task-form';
+
+import './process-dashboard.scss';
+
+import TaskStatus from './../task-status/task-status';
+
+import DateUtils from '../../../../utils/date/date.utils';
+
+import { ClockCircleOutlined, CopyOutlined, CheckCircleOutlined, LoadingOutlined, EditOutlined, ReloadOutlined, SoundOutlined, PauseCircleOutlined } from '@ant-design/icons';
+
+import { CopyToClipBoard } from '../../../..';
+
+import { GlobalContext } from './../../../../Store';
+
+const { Title } = Typography;
+
+const { Option } = Select;
+
+let stepMaster = {
+    ongoing: {
+        icon: LoadingOutlined,
+        color: 'blue'
+    },
+    pending: {
+        icon: ClockCircleOutlined,
+        color: 'orange'
+    },
+    completed: {
+        icon: CheckCircleOutlined,
+        color: 'green'
+    },
+
+    waiting: {
+        icon: ClockCircleOutlined,
+        color: 'red'
+    },
+
+}
+
+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);
+    });
+}
+
+/**
+ * 
+ */
+export default function ProcessDashboard({ id, identifier, callback = () => { } }) {
+
+    const { user = { locations: [] } } = useContext(GlobalContext);
+
+    const [loading, setLoading] = useState(false);
+
+    const [process, setProcess] = useState([]);
+
+    const [transactionmodal, setTransactionmodal] = useState(false);
+
+    useEffect(() => {
+
+        // We have to load the process for the identified received as a property
+
+        // The process / steps are recorded specific to a an id which can be of any model . 
+        getProcess();
+
+        return () => {
+
+        }
+
+    }, [])
+
+    /**
+     * Get the process of an identifier 
+     * 
+     * @returns 
+     */
+    function getProcess() {
+
+        setLoading(true);
+
+        var queries = [{
+            field: 'modelIdentifier',
+            value: identifier
+        }]
+
+        // Get the process with the current status of an id passed . 
+        return Process.getProcessTimeline({ identifier, id }).then((result) => {
+
+            setProcess(result);
+
+            console.log(result);
+
+            setLoading(false);
+
+        });
+    }
+
+
+    /**
+     * Revert the modal
+     */
+    function openRevertModal() {
+
+        setTransactionmodal(true);
+    }
+
+
+    /**
+     * Close the revert modal 
+     */
+    function closeRevertModal() {
+        setTransactionmodal(false);
+
+    }
+
+    return (<div className="process-dashboard card">
+
+        {/* 
+        <div className="page-header">
+
+            <Title level={5}>
+                Process Dashboard
+            </Title>
+
+            <div className="actions">
+
+                {
+                    user.isAdmin
+                    &&
+                    <Button size={'small'} onClick={() => { openRevertModal() }}>
+                        <ReloadOutlined />
+                        Revert
+                    </Button>
+                }
+
+            </div>
+        </div> */}
+
+        {
+            loading
+                ?
+                <>
+
+                    <strong className="process-title">
+                        Loading content ,
+                    </strong>
+
+                    <Skeleton />
+                </>
+
+                :
+                <>
+
+                    {
+                        process.map((records) => {
+
+                            // If there is a process transaction record this process has started 
+                            let { process_transactions = [] } = records;
+
+                            return (<>
+
+                                <div className='page-header'>
+                                    <div>
+
+                                        <strong className="process-title">
+                                            {records.name}
+                                        </strong>
+
+                                        <p className="process-description">
+                                            <small>
+                                                {records.description}
+                                            </small>
+                                        </p>
+                                    </div>
+
+                                    <div className='actions'>
+
+                                        <CopyToClipBoard id={records.id} record={records} />
+
+
+                                        {
+                                            user.isAdmin
+                                            &&
+                                            <Button size={'small'} onClick={() => { openRevertModal() }}>
+                                                <ReloadOutlined />
+                                                Revert
+                                            </Button>
+                                        }
+
+                                    </div>
+
+                                </div>
+
+                                {
+                                    process_transactions.length
+                                        ?
+                                        <small className='timeline'>
+                                            {/* {DateUtils.displayFirestoreTime(process_transactions[0].start_time)} -  {process_transactions[0].completed ? DateUtils.displayFirestoreTime(process_transactions[0].end_time) : 'Pending'} */}
+                                        </small>
+                                        :
+                                        null
+                                }
+
+                                <Timeline className="process-timeline">
+
+                                    {/* Steps List */}
+                                    <StepsList id={id} steps={records.steps} callback={getProcess} />
+                                    {/* Steps List Ends */}
+
+                                </Timeline>
+                            </>)
+                        })
+                    }
+
+                    {/* Add Modal */}
+                    <Modal destroyOnClose confirmLoading={loading} title="Revert" visible={transactionmodal} onCancel={() => { closeRevertModal() }} footer={null}>
+
+                        <RevertProcessTransaction id={id} process={process} callback={() => {
+
+                            closeRevertModal()
+                        }} />
+
+                    </Modal>
+                    {/* Add Modal Ends */}
+
+                </>
+        }
+
+    </div >)
+
+}
+
+/**
+ * The Timeline item that displays a step
+ */
+function StepTimelineItem({ id, color, Icon, step, step_transactions, callback }) {
+
+    const [body, setBody] = useState({});
+
+    const [visible, setVisible] = useState(false);
+
+    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
+  * 
+  * @param {*} step 
+  */
+    function openEditModal(step) {
+
+        setVisible(true);
+
+        setBody(step)
+
+    }
+
+    /**
+     * 
+     * @param {*} step 
+     */
+    async function startStep(step) {
+
+        // Batch 
+        let app = Process.getFireStoreApp();
+
+        // Starting a batched write
+        let batch = app.batch();
+
+        let body = {
+            record_id: id,
+            model_identifer: 'Candidates'
+        }
+
+        await Process.startStepBatch({ batch, step, body });
+
+        await batch.commit();
+
+        message.success("Step Started");
+    }
+
+    /**
+     * 
+     * @param {*} step 
+     */
+    async function completeStep(step) {
+
+        // Batch 
+        let app = Process.getFireStoreApp();
+
+        // Starting a batched write
+        let batch = app.batch();
+
+        let body = {
+            record_id: id,
+            model_identifer: 'Candidates'
+        }
+
+        await Process.stopStepBatch({ batch, step, body });
+
+        message.success("Step Ended");
+
+    }
+
+    /**
+     * 
+     * @param {*} step 
+     */
+    function closeModal() {
+
+        setVisible(false);
+    }
+
+
+    return (<Timeline.Item color={color} dot={<Icon />} >
+
+        {/* Timeline Step Template */}
+        <div className="timeline-content">
+
+            <p className={'timeline-title'}>
+                {step.name}
+
+                <p className={'timeline-description'}>
+                    <small>
+                        {step.description}
+                    </small>
+                </p>
+            </p>
+
+            {/* 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} />
+
+                    <Button size={'small'} onClick={() => { openEditModal(step) }}>
+
+                        <EditOutlined />
+
+                        Edit
+
+                    </Button>
+
+                    <Button size={'small'} onClick={() => { startStep(step) }}>
+
+                        Start
+
+                    </Button>
+
+                    <Button size={'small'} onClick={() => { completeStep(step) }}>
+
+                        Complete
+
+                    </Button>
+
+                </>}
+
+            </div>
+            {/* Actions for a step Ends */}
+
+        </div>
+        {/* Timeline Step Template Ends */}
+
+        {/* Summary of Step Activity */}
+        <TaskStatus id={id} color={color} step={step} step_transactions={step_transactions} />
+        {/* Summary of Step Activity Ends */}
+
+        {/* Form for the Step */}
+        {step.formEnabled && <Card className="task-form-card">
+
+            <h1>
+                Form Enabled Value {step.formEnabled} - {step.name}
+
+            </h1>
+
+            <TaskForm
+                record_id={id}
+                step={step}
+
+                callback={callback}
+
+            />
+
+        </Card>}
+        {/* Form for the Step Ends */}
+
+
+        {
+            step.sub_steps.length ?
+                <>
+                    <Timeline className="process-timeline">
+
+                        <StepsList id={id} steps={step.sub_steps} />
+
+                    </Timeline>
+                </>
+                :
+                null
+        }
+
+
+        {/* Add Modal */}
+        <Modal destroyOnClose confirmLoading={loading} title="Edit Step" visible={visible} onCancel={() => { closeModal() }} footer={null}>
+            <Steps.ModalAddComponent
+                // match={match}
+                model={Steps}
+                additional_queries={[]}
+                formContent={body}
+
+                callback={() => {
+                    closeModal(true);
+                }}
+            />
+        </Modal>
+        {/* Add Modal Ends */}
+
+        {/* </>
+        } */}
+
+    </Timeline.Item>)
+
+}
+
+
+/**
+ * List of Steps inside a Timline
+ */
+function StepsList({ id, steps = [], callback }) {
+
+    return (<>
+
+        {
+            steps.map((step) => {
+
+                let color = stepMaster[step.current_state].color;
+
+                let Icon = stepMaster[step.current_state].icon;
+
+                let step_transactions = false;
+
+                if (step.step_transactions && step.step_transactions.length) {
+
+                    step_transactions = step.step_transactions[0];
+
+                }
+
+                return (<>
+
+                    {/* Details of the step */}
+                    <StepTimelineItem
+                        id={id}
+                        color={color}
+                        Icon={Icon}
+                        step={step}
+                        step_transactions={step_transactions}
+
+                        callback={callback}
+                    />
+                    {/* Details of the step Ends */}
+
+
+                    {/* Form for the Step */}
+                    {/* {step.formEnabled && <Card className="task-form-card">
+
+                        <h1>
+                            Form Enabled Value {step.formEnabled} - {step.name}
+
+                        </h1>
+
+                        <TaskForm
+                            record_id={id}
+                            step={step}
+
+                        // callback={callback}
+
+                        />
+
+                    </Card>} */}
+                    {/* Form for the Step Ends */}
+
+                </>)
+            })
+        }
+
+    </>)
+
+}
+
+
+
+
+/**
+ * 
+ * 
+ * @returns 
+ */
+function RevertProcessTransaction({ id, process = [], callback }) {
+
+    // const form = useRef(null)
+
+    const [loading, setLoading] = useState(false);
+
+    const [processtransactions, setProcesstransactions] = useState([])
+
+    useEffect(() => {
+
+        getProcessTransaction();
+
+        return () => {
+        }
+    }, [])
+
+    /**
+     * 
+     * @returns 
+     */
+    function getProcessTransaction() {
+
+        var queries = [{ field: 'record_id', value: id }];
+
+        return ProcessTransactions.get(queries).then(({ process_transactions }) => {
+
+            setProcesstransactions(process_transactions);
+
+            console.log(process_transactions);
+
+        })
+    }
+
+    /**
+     * On Submit of form , Change the process transaction to specific step
+     */
+    function onSubmit(values) {
+
+        // Batch 
+        let app = Process.getFireStoreApp();
+
+        // Starting a batched write
+        let batch = app.batch();
+
+        setLoading(true);
+
+        console.log(values);
+
+        Process.triggerProcessBatch(batch, values.process_id, {}, processtransactions[0].id).then(() => {
+
+            message.success("Reverted case to ", values.process_id);
+
+            setLoading(false);
+
+            callback();
+
+        })
+    }
+
+    return (<>
+
+        <Title level={4}>
+            Revert Step
+        </Title>
+
+        <Form
+            // form={form}
+            layout="vertical"
+            onFinish={onSubmit}>
+
+            <Form.Item label="Process" name="process_id" required>
+                <Select style={{ width: '100%' }}>
+
+                    {process.map((staff) => <Option value={staff.id}>{staff.name}</Option>)}
+
+                </Select>
+            </Form.Item>
+
+            <Form.Item >
+                <Button loading={loading} type="primary" htmlType="submit">
+                    Submit
+                </Button>
+            </Form.Item>
+
+        </Form>
+    </>)
+
+}