From b898f7c3e3af34b8d7e54459f87d1ffed553fdde Mon Sep 17 00:00:00 2001
From: "CHIEFSOFT\\ameye" <ameye@chiefsfot.com>
Date: Sat, 11 Oct 2025 06:18:05 -0400
Subject: [PATCH] added office refreesh

---
 .../subscription_view/SubscriptionViewCom.jsx | 173 +++++++++++-------
 src/services/siteServices.js                  |   8 +
 2 files changed, 116 insertions(+), 65 deletions(-)

diff --git a/src/components/subscription_view/SubscriptionViewCom.jsx b/src/components/subscription_view/SubscriptionViewCom.jsx
index 05c7982..2e40864 100644
--- a/src/components/subscription_view/SubscriptionViewCom.jsx
+++ b/src/components/subscription_view/SubscriptionViewCom.jsx
@@ -1,10 +1,10 @@
 import {useLocation, useNavigate, Link} from 'react-router-dom'
-import { useQuery, useMutation } from '@tanstack/react-query'
-import { FaCaretDown } from "react-icons/fa";
+import {useQuery, useMutation} from '@tanstack/react-query'
+import {FaCaretDown} from "react-icons/fa";
 import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
 import {useEffect, useState} from 'react';
 import RouteLinks from '../../RouteLinks';
-import { getSubscriptionsView, updateTemplate, updateCustomTemplate } from '../../services/siteServices'
+import {getSubscriptionsView, updateTemplate, updateCustomTemplate, rebuildTemplate} from '../../services/siteServices'
 import queryKeys from '../../services/queryKeys'
 import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString';
 
@@ -18,12 +18,12 @@ export default function SubscriptionViewCom() {
 
     const [values, setValues] = useState({custom_id: '', template_uid: ''})
 
-    const handleValueChange = ({target:{name, value}}) => {
-        if(name == 'custom_template'){
+    const handleValueChange = ({target: {name, value}}) => {
+        if (name == 'custom_template') {
             setValues(prev => ({...prev, custom_id: value}))
-        }else if (name == 'template') {
+        } else if (name == 'template') {
             setValues(prev => ({...prev, template_uid: value}))
-        }else{
+        } else {
             setValues(prev => ({...prev}))
         }
     }
@@ -34,7 +34,7 @@ export default function SubscriptionViewCom() {
         }
     }, [])
 
-        const {data, isFetching, isError, error} = useQuery({
+    const {data, isFetching, isError, error} = useQuery({
         queryKey: queryKeys.subscriptions_view,
         queryFn: () => {
             // const filterData = filter?.type ? {[filter?.type]: filter.id} : {}
@@ -63,6 +63,16 @@ export default function SubscriptionViewCom() {
     //     }
     // },[data])
 
+    const templateRebuild = useMutation({
+        mutationFn: (fields) => {
+            return rebuildTemplate(fields)
+        },
+        onSettled: () => {
+            setTimeout(() => {
+                templateRebuild.reset()
+            }, 3000)
+        }
+    })
 
     const templateUpdate = useMutation({
         mutationFn: (fields) => {
@@ -73,7 +83,7 @@ export default function SubscriptionViewCom() {
         // onSuccess: (res) => {
         // },
         onSettled: () => {
-            setTimeout(()=>{
+            setTimeout(() => {
                 templateUpdate.reset()
             }, 3000)
         }
@@ -88,7 +98,7 @@ export default function SubscriptionViewCom() {
         // onSuccess: (res) => {
         // },
         onSettled: () => {
-            setTimeout(()=>{
+            setTimeout(() => {
                 customTemplateUpdate.reset()
             }, 3000)
         }
@@ -102,6 +112,13 @@ export default function SubscriptionViewCom() {
         templateUpdate.mutate(reqData)
     }
 
+    const handleRebuildTemplate = () => {
+        const reqData = {
+            subscription_uid: state?.subscriptionUID,
+        }
+        templateRebuild.mutate(reqData)
+    }
+
     const handleUpdateCustomTemplate = () => {
         const reqData = {
             subscrtiption_uid: state?.subscriptionUID,
@@ -113,88 +130,114 @@ export default function SubscriptionViewCom() {
 
     return (
         <div className='w-full flex flex-col gap-8'>
-            <BreadcrumbCom title={`Subscription View [${state?.subscriptionUID}]`} paths={['Dashboard', 'Subscription View']}/>
+            <BreadcrumbCom title={`Subscription View [${state?.subscriptionUID}]`}
+                           paths={['Dashboard', 'Subscription View']}/>
 
-            {isFetching ? 
-            <>
-                <p className='text-slate-800'>Loading...</p>
-            </>
-            : isError ?
-                <p className='text-red-500'>{error.message}</p>
-            :
+            {isFetching ?
                 <>
-                    <div className='w-full box bg-white dark:bg-black-box text-black-body dark:text-white-body overflow-x-auto'>
-                        <table className="py-2 w-full text-sm bg-[aliceblue] dark:bg-transparent rounded-[10px]">
-                            <tbody>
+                    <p className='text-slate-800'>Loading...</p>
+                </>
+                : isError ?
+                    <p className='text-red-500'>{error.message}</p>
+                    :
+                    <>
+                        <div
+                            className='w-full box bg-white dark:bg-black-box text-black-body dark:text-white-body overflow-x-auto'>
+                            <table className="py-2 w-full text-sm bg-[aliceblue] dark:bg-transparent rounded-[10px]">
+                                <tbody>
                                 <tr className="py-2 border-t border-dashed border-slate-300">
                                     <td className="px-2 py-2">
                                         <div className="text-left">
-                                            <div className="text-base font-semibold">{getDateTimeFromDateString(selectedSubscription?.added)}</div>
+                                            <div
+                                                className="text-base font-semibold">{getDateTimeFromDateString(selectedSubscription?.added)}</div>
                                         </div>
                                     </td>
                                     <td className="px-2">
                                         <div className="text-left">
-                                            <div className="text-base font-semibold">{selectedSubscription?.product_id}</div>
+                                            <div
+                                                className="text-base font-semibold">{selectedSubscription?.product_id}</div>
                                         </div>
                                     </td>
                                     <td className="px-2">
                                         <div className="text-left">
-                                            <div className="text-base font-semibold">{selectedSubscription?.internal_url}
-                                            <br /><span>Template :</span> {selectedSubscription?.product_template}
-                                            <br /><span>Custom :</span> {selectedSubscription?.custom_template}
+                                            <div
+                                                className="text-base font-semibold">{selectedSubscription?.internal_url}
+                                                <br/><span>Template :</span> {selectedSubscription?.product_template}
+                                                <br/><span>Custom :</span> {selectedSubscription?.custom_template}
                                             </div>
                                         </div>
                                     </td>
                                     <td className="px-2">
                                         <div className="text-right">
-                                            <div className="text-base font-semibold">{selectedSubscription?.status}</div>
+                                            <div
+                                                className="text-base font-semibold">{selectedSubscription?.status}</div>
+                                        </div>
+                                    </td>
+                                    <td className="px-2">
+                                        <div className="text-right">
+                                            <button name='template' onClick={handleRebuildTemplate}
+                                                    className={`rounded-md p-2 bg-primary text-white text-center`}>
+                                                Rebuild
+                                            </button>
                                         </div>
                                     </td>
                                 </tr>
-                            </tbody>
-                        </table>
-                    </div>
-
-                    <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
-
-                        <div className='w-full'>
-                            <label className='font-medium'>Assign Template</label>
-                            <div className='flex flex-col xs:flex-row md:items-center gap-2'>
-                                <div className='w-full h-10 relative overflow-hidden rounded-md'>
-                                    <select name='template' value={currentTemplate || values.template_uid} onChange={handleValueChange} className='w-full h-full p-2 appearance-none dark:bg-transparent border-0 dark:border-1 border-white ring-0 outline-none'>
-                                        <option value=''>None</option>
-                                        {availableTemplates && availableTemplates.map(item => (
-                                            <option key={item?.template_uid} value={item?.template_uid}>{`${item?.product_id}-${item?.provision_name}`}</option>
-                                        ))}
-                                    </select>
-                                    <FaCaretDown className='text-base absolute top-1/2 -translate-y-1/2 right-2' />
-                                </div>
-                                <button name='template' onClick={handleUpdateTemplate} disabled={(templateUpdate.isPending || !values.template_uid)} className={`rounded-md p-2 bg-primary text-white text-center ${(templateUpdate.isPending || !values.template_uid) && 'opacity-50'}`}>Update</button>
-                            </div>
-                            <p className={`p-2 mt-4 ${templateUpdate.isSuccess ? 'text-emerald-500' : 'text-red-500'}`}>{templateUpdate.isSuccess ? 'Template updated' : templateUpdate.isSuccess ? 'Unable to complete request, try again' : ''}</p>
+                                </tbody>
+                            </table>
                         </div>
-                    </div>
 
-                    <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+                        <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
 
-                        <div className='w-full'>
-                            <label className='font-medium'>Assign Custom Template</label>
-                            <div className='flex flex-col xs:flex-row md:items-center gap-2'>
-                                <div className='w-full h-10 relative overflow-hidden rounded-md'>
-                                    <select name='custom_template' value={currentCustomTem || values.custom_id} onChange={handleValueChange} className='w-full h-full p-2 appearance-none dark:bg-transparent border-0 dark:border-1 border-white ring-0 outline-none'>
-                                        <option value=''>None</option>
-                                        {customTemplates && customTemplates.map(item => (
-                                            <option key={item?.custom_id} value={item?.custom_id}>{`${item?.custom_id}-${item?.provision_name}`}</option>
-                                        ))}
-                                    </select>
-                                    <FaCaretDown className='text-base absolute top-1/2 -translate-y-1/2 right-2' />
+                            <div className='w-full'>
+                                <label className='font-medium'>Assign Template</label>
+                                <div className='flex flex-col xs:flex-row md:items-center gap-2'>
+                                    <div className='w-full h-10 relative overflow-hidden rounded-md'>
+                                        <select name='template' value={currentTemplate || values.template_uid}
+                                                onChange={handleValueChange}
+                                                className='w-full h-full p-2 appearance-none dark:bg-transparent border-0 dark:border-1 border-white ring-0 outline-none'>
+                                            <option value=''>None</option>
+                                            {availableTemplates && availableTemplates.map(item => (
+                                                <option key={item?.template_uid}
+                                                        value={item?.template_uid}>{`${item?.product_id}-${item?.provision_name}`}</option>
+                                            ))}
+                                        </select>
+                                        <FaCaretDown className='text-base absolute top-1/2 -translate-y-1/2 right-2'/>
+                                    </div>
+                                    <button name='template' onClick={handleUpdateTemplate}
+                                            disabled={(templateUpdate.isPending || !values.template_uid)}
+                                            className={`rounded-md p-2 bg-primary text-white text-center ${(templateUpdate.isPending || !values.template_uid) && 'opacity-50'}`}>Update
+                                    </button>
                                 </div>
-                                <button name='custom_template' onClick={handleUpdateCustomTemplate} disabled={(customTemplateUpdate.isPending || !values.custom_id)} className={`rounded-md p-2 bg-primary text-white text-center ${(customTemplateUpdate.isPending || !values.custom_id) && 'opacity-50'}`}>Update</button>
+                                <p className={`p-2 mt-4 ${templateUpdate.isSuccess ? 'text-emerald-500' : 'text-red-500'}`}>{templateUpdate.isSuccess ? 'Template updated' : templateUpdate.isSuccess ? 'Unable to complete request, try again' : ''}</p>
                             </div>
-                            <p className={`p-2 mt-4 ${customTemplateUpdate.isSuccess ? 'text-emerald-500' : 'text-red-500'}`}>{customTemplateUpdate.isSuccess ? 'Custom Template updated' : customTemplateUpdate.isSuccess ? 'Unable to complete request, try again' : ''}</p>
                         </div>
-                    </div>
-                </>
+
+                        <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+
+                            <div className='w-full'>
+                                <label className='font-medium'>Assign Custom Template</label>
+                                <div className='flex flex-col xs:flex-row md:items-center gap-2'>
+                                    <div className='w-full h-10 relative overflow-hidden rounded-md'>
+                                        <select name='custom_template' value={currentCustomTem || values.custom_id}
+                                                onChange={handleValueChange}
+                                                className='w-full h-full p-2 appearance-none dark:bg-transparent border-0 dark:border-1 border-white ring-0 outline-none'>
+                                            <option value=''>None</option>
+                                            {customTemplates && customTemplates.map(item => (
+                                                <option key={item?.custom_id}
+                                                        value={item?.custom_id}>{`${item?.custom_id}-${item?.provision_name}`}</option>
+                                            ))}
+                                        </select>
+                                        <FaCaretDown className='text-base absolute top-1/2 -translate-y-1/2 right-2'/>
+                                    </div>
+                                    <button name='custom_template' onClick={handleUpdateCustomTemplate}
+                                            disabled={(customTemplateUpdate.isPending || !values.custom_id)}
+                                            className={`rounded-md p-2 bg-primary text-white text-center ${(customTemplateUpdate.isPending || !values.custom_id) && 'opacity-50'}`}>Update
+                                    </button>
+                                </div>
+                                <p className={`p-2 mt-4 ${customTemplateUpdate.isSuccess ? 'text-emerald-500' : 'text-red-500'}`}>{customTemplateUpdate.isSuccess ? 'Custom Template updated' : customTemplateUpdate.isSuccess ? 'Unable to complete request, try again' : ''}</p>
+                            </div>
+                        </div>
+                    </>
             }
         </div>
     )
diff --git a/src/services/siteServices.js b/src/services/siteServices.js
index 958f536..3a11744 100644
--- a/src/services/siteServices.js
+++ b/src/services/siteServices.js
@@ -124,6 +124,14 @@ export const getProductsTemplate = (reqData) => {
     return getAuxEnd(`/products-templates`, postData)
 }
 
+// FUNCTION TO INITIATE TEMPLATE REBUILD
+export const rebuildTemplate = (reqData) => {
+    let postData = {
+        ...reqData
+    }
+    return postAuxEnd('/rebuild-template', postData, false)
+}
+
 // FUNCTION TO UPDATE TEMPLATE
 export const updateTemplate = (reqData) => {
     let postData = {