@plutonhq/core-frontend 0.1.13 → 0.1.15

package/src/components/Settings/GeneralSettings/GeneralSettings.tsx

@@ -1,6 +1,10 @@
+import { useState } from 'react';
+import { ActionModal } from '../..';
 import { useTheme } from '../../../context/ThemeContext';
 import Input from '../../common/form/Input/Input';
+import Toggle from '../../common/form/Toggle/Toggle';
 import Tristate from '../../common/form/Tristate/Tristate';
+import TwoFactorSetup from '../TwoFactorSetup/TwoFactorSetup';
 import classes from './GeneralSettings.module.scss';
 
 interface GeneralSettingsProps {
@@ -9,8 +13,22 @@ interface GeneralSettingsProps {
    onUpdate: (settings: Record<string, any>) => void;
 }
 
-const GeneralSettings = ({ settings, onUpdate }: GeneralSettingsProps) => {
+const GeneralSettings = ({ settings, settingsID, onUpdate }: GeneralSettingsProps) => {
    const { setTheme } = useTheme();
+   const [show2FASetupConfirm, setShow2FASetupConfirm] = useState(false);
+   const [show2FASetup, setShow2FASetup] = useState(false);
+
+   const { totp } = settings || {};
+   const is2FASetupComplete = totp?.secret;
+
+   const update2FASetting = (enabled: boolean) => {
+      if (enabled === true && !is2FASetupComplete) {
+         setShow2FASetupConfirm(true);
+         return;
+      } else {
+         onUpdate({ ...settings, totp: { ...totp, enabled } });
+      }
+   };
 
    const handleThemeChange = (newThemeValue: 'auto' | 'light' | 'dark') => {
       setTheme(newThemeValue);
@@ -55,9 +73,27 @@ const GeneralSettings = ({ settings, onUpdate }: GeneralSettingsProps) => {
                   { label: 'Light', value: 'light' },
                ]}
                onUpdate={(val: string) => handleThemeChange(val as 'auto' | 'light' | 'dark')}
-               inline={true}
+               inline={false}
             />
          </div>
+         <div className={classes.field}>
+            <Toggle label="Enable 2FA" fieldValue={settings?.totp?.enabled || false} onUpdate={(val) => update2FASetting(val)} inline={true} />
+         </div>
+         {show2FASetupConfirm && (
+            <ActionModal
+               title={`Enable Two-Factor Authentication (2FA)`}
+               message={`Are you sure you want to enable Two-Factor Authentication (2FA) to secure Pluton Login? You will be required to use an authenticator app to login if you enable this feature.`}
+               closeModal={() => setShow2FASetupConfirm(false)}
+               width="420px"
+               primaryAction={{
+                  title: `Yes, Enable 2FA`,
+                  type: 'default',
+                  isPending: false,
+                  action: () => setShow2FASetup(true),
+               }}
+            />
+         )}
+         {show2FASetup && <TwoFactorSetup id={settingsID} close={() => setShow2FASetup(false)} />}
       </div>
    );
 };

package/src/components/Settings/IntegrationSettings/IntegrationSettings.tsx

@@ -19,12 +19,19 @@ const IntegrationSettings = ({ settingsID, settings, onUpdate }: IntegrationSett
 
    const validationMutation = useValidateIntegration();
 
-   console.log('smtp :', smtp);
+   const onIntegrationUpdate = (key: string, intSettings: Record<string, any>) => {
+      console.log('onIntegrationUpdate :', key, intSettings);
+      onUpdate({ ...integrationSettings, [key]: { ...integrationSettings[key], ...intSettings } });
+   };
 
    return (
       <div className={classes.integrations}>
          <div>
-            <SMTPSettings settings={smtp} onUpdate={onUpdate} showTestModal={setShowEmailTestModal} />
+            <SMTPSettings
+               settings={smtp}
+               onUpdate={(iSettings) => onIntegrationUpdate('smtp', iSettings)}
+               showTestModal={(type) => setShowEmailTestModal(type)}
+            />
          </div>
          {showEmailTestModal && (
             <ActionModal

package/src/components/Settings/TwoFactorSetup/TwoFactorSetup.module.scss

@@ -0,0 +1,62 @@
+.setupContainer {
+   .errorMsg {
+      background-color: var(--error-bg-color);
+      color: var(--error-text-color);
+      padding: 6px 12px;
+      border-radius: 6px;
+   }
+   .instructions {
+      ol {
+         margin: 0;
+         padding: 12px 20px;
+         padding-top: 0;
+      }
+   }
+   .qrSection {
+      .qrCode {
+         background-color: var(--background-color);
+         padding: 12px;
+         text-align: center;
+         border-radius: 6px 6px 0 0;
+      }
+      .setupKey {
+         padding: 6px;
+         margin-bottom: 12px;
+         background: var(--primary-color-light);
+         text-align: center;
+         border-radius: 0 0 6px 6px;
+      }
+      .verifySection {
+         display: flex;
+         & > div:nth-child(1) {
+            width: calc(100% - 140px);
+         }
+         & > button {
+            margin-left: 12px;
+         }
+      }
+   }
+}
+
+.successMessage {
+   .successMsg {
+      background-color: var(--success-bg-color);
+      color: var(--success-text-color);
+      padding: 6px 12px;
+      border-radius: 6px;
+      font-weight: 600;
+   }
+   strong {
+      font-weight: 600;
+   }
+   code {
+      background-color: var(--line-color);
+      width: 100%;
+      display: block;
+      padding: 12px;
+      box-sizing: border-box;
+      border-radius: 6px;
+      white-space: pre;
+      font-size: 14px;
+   }
+}

package/src/components/Settings/TwoFactorSetup/TwoFactorSetup.tsx

@@ -0,0 +1,102 @@
+import { useEffect, useState } from 'react';
+import { useSetupTwoFactorAuth, useVerifyTwoFactorAuth } from '../../../services';
+import Icon from '../../common/Icon/Icon';
+import Modal from '../../common/Modal/Modal';
+import Input from '../../common/form/Input/Input';
+import Button from '../../common/Button/Button';
+import classes from './TwoFactorSetup.module.scss';
+
+interface TwoFactorSetupProps {
+   id: number;
+   close: () => void;
+}
+
+const TwoFactorSetup = ({ close, id = 1 }: TwoFactorSetupProps) => {
+   const [verificationCode, setVerificationCode] = useState('');
+   const setupMutation = useSetupTwoFactorAuth();
+   const verifyMutation = useVerifyTwoFactorAuth();
+   const isLoading = setupMutation.isPending || verifyMutation.isPending;
+
+   const qrCodeUrl: string = setupMutation.data?.result?.qrCodeDataUrl || '';
+   const setupKey: string = setupMutation.data?.result?.setupKey || '';
+   const recoveryCodes: string[] = verifyMutation.data?.result?.recoveryCodes || [];
+
+   useEffect(() => {
+      setupMutation.mutate(id);
+   }, []);
+
+   const verify2FA = () => {
+      verifyMutation.mutate({ code: verificationCode, id });
+   };
+
+   return (
+      <>
+         {!verifyMutation.isSuccess && (
+            <Modal title="Two-Factor Authentication (2FA) Setup" closeModal={() => !isLoading && close()} width="500px" disableBackdropClick={true}>
+               <div className={classes.twoFactorSetup}>
+                  {setupMutation.isPending && (
+                     <p>
+                        <Icon type="loading" /> Setting up 2FA...
+                     </p>
+                  )}
+                  {setupMutation.isError && <p className={classes.error}>Error setting up 2FA. Please try again.</p>}
+                  {setupMutation.isSuccess && (
+                     <div className={classes.setupContainer}>
+                        <div className={classes.instructions}>
+                           <h4>Setup Instructions</h4>
+                           <ol>
+                              <li>
+                                 Download and install an authenticator app on your mobile device (e.g., Google Authenticator, Authy, Microsoft
+                                 Authenticator).
+                              </li>
+                              <li>Open the authenticator app and choose to add a new account.</li>
+                              <li>Scan the QR code below using the authenticator app or manually enter the setup key provided.</li>
+                              <li>Once added, the app will generate a 6-digit verification code that refreshes every 30 seconds.</li>
+                              <li>Enter the current 6-digit code from the authenticator app into the field below to complete the setup.</li>
+                           </ol>
+                        </div>
+                        <div className={classes.qrSection}>
+                           <div className={classes.qrCode}>{qrCodeUrl && <img src={qrCodeUrl} alt="2FA QR Code" />}</div>
+                           <div className={classes.setupKey}>Setup Key: {setupKey}</div>
+                           {verifyMutation.isError && <p className={classes.errorMsg}>{verifyMutation.error?.message}</p>}
+                           <div className={classes.verifySection}>
+                              <Input
+                                 type="text"
+                                 placeholder="Enter 6-digit code"
+                                 fieldValue={verificationCode}
+                                 onUpdate={(val) => setVerificationCode(val)}
+                                 full={true}
+                              />
+                              <Button text="Verify & Enable 2FA" onClick={() => verify2FA()} variant="primary" size="sm" />
+                           </div>
+                        </div>
+                     </div>
+                  )}
+               </div>
+            </Modal>
+         )}
+
+         {verifyMutation.isSuccess && (
+            <Modal
+               title="Two-Factor Authentication (2FA) Setup"
+               closeModal={() => !isLoading && location.reload()}
+               width="500px"
+               disableBackdropClick={true}
+            >
+               <div className={classes.successMessage}>
+                  <p className={classes.successMsg}>Two-Factor Authentication (2FA) has been successfully enabled.</p>
+                  <p>
+                     <strong>
+                        Save these backup codes in a secure place. They will be required to access your account if you lose your device. They won't be
+                        shown again.
+                     </strong>
+                  </p>
+                  <code className={classes.recoveryCodes}>{recoveryCodes.join('\n')}</code>
+               </div>
+            </Modal>
+         )}
+      </>
+   );
+};
+
+export default TwoFactorSetup;

package/src/components/common/Icon/Icon.tsx

@@ -125,7 +125,16 @@ const Icon = ({ type, color = 'currentColor', size = 16, title = '', classes = '
                </g>
             </IconWrapper>
          )}
-
+         {type === 'mirrors' && (
+            <IconWrapper size={size} viewBox="0 0 24 24">
+               <path
+                  fill={color}
+                  d="M21.53 5.15a.99.99 0 0 0-.97-.04l-10 5a1 1 0 0 0-.55.89v10a1 1 0 0 0 1 1c.15 0 .31-.04.45-.11l10-5a1 1 0 0 0 .55-.89V6c0-.35-.18-.67-.47-.85ZM20 15.38l-8 4v-7.76l8-4z"
+               />
+               <path fill={color} d="m16.55 3.11l-10 5A1 1 0 0 0 6 9v10h2V9.62l9.45-4.72l-.89-1.79Z" />
+               <path fill={color} d="m12.55 1.11l-10 5A1 1 0 0 0 2 7v10h2V7.62l9.45-4.73l-.89-1.79Z" />
+            </IconWrapper>
+         )}
          {type === 'devices' && (
             <IconWrapper size={size} viewBox="0 0 24 24">
                <path

package/src/components/common/PageHeader/PageHeader.module.scss

@@ -56,6 +56,9 @@
 }
 
 @media only screen and (max-width: 768px) {
+   .header {
+      max-height: none;
+   }
    .headerTitle {
       font-size: 1rem;
    }

package/src/components/index.ts

@@ -88,6 +88,13 @@ export { default as PlanStrategySettings } from './Plan/PlanSettings/PlanStrateg
 export { default as PlanTypeSettings } from './Plan/PlanSettings/PlanTypeSettings';
 export { default as PlanStats } from './Plan/PlanStats/PlanStats';
 export { default as PlanUnlockModal } from './Plan/PlanUnlockModal/PlanUnlockModal';
+export { default as PlanIntegrity } from './Plan/PlanIntegrity/PlanIntegrity';
+
+// Mirror/Replication components
+export { default as MirrorStatusBadge } from './Plan/Mirrors/MirrorStatusBadge';
+export { default as MirrorStorageSelector } from './Plan/Mirrors/MirrorStorageSelector';
+export { default as MirrorStorageSelectorModal } from './Plan/Mirrors/MirrorStorageSelectorModal';
+export { default as PlanReplicationSettings } from './Plan/PlanSettings/PlanReplicationSettings';
 
 // Restore components
 export { default as PlanRestores } from './Plan/Restores/Restores';
@@ -105,6 +112,7 @@ export { default as AppLogs } from './Settings/AppLogs/AppLogs';
 export { default as GeneralSettings } from './Settings/GeneralSettings/GeneralSettings';
 export { default as IntegrationSettings } from './Settings/IntegrationSettings/IntegrationSettings';
 export { default as SMTPSettings } from './Settings/IntegrationSettings/SMTPSettings';
+export { default as TwoFactorSetup } from './Settings/TwoFactorSetup/TwoFactorSetup';
 
 // Skeleton components
 export { default as SkeletonItems } from './Skeleton/SkeletonItems';

package/src/hooks/usePwaAutoUpdate.ts

@@ -1,9 +1,20 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { useRegisterSW } from 'virtual:pwa-register/react';
 
+const VERSION_STORAGE_KEY = 'pluton_app_version';
+
 /**
- * This hook handles the PWA auto-update logic in the background.
- * It's completely silent and requires no user interaction.
+ * Handles two PWA update scenarios:
+ *
+ * 1. **Workbox precache update** — When a new frontend build is deployed, Workbox detects
+ *    that the precache manifest changed and sets `needRefresh`. We immediately activate
+ *    the new service worker so the page reloads with fresh assets.
+ *
+ * 2. **Backend version mismatch** — Compares the server's `X-App-Version` header
+ *    (stored on `window.plutonVersion` by `validateAuth`) against the last known version
+ *    in localStorage. On mismatch (e.g. docker/binary upgrade), unregisters all service
+ *    workers, clears all caches, and hard-reloads. This catches cases where the SW update
+ *    check hasn't fired yet (long-lived tabs, cached sw.js, etc.).
  */
 export function usePwaAutoUpdate() {
    const {
@@ -12,22 +23,51 @@ export function usePwaAutoUpdate() {
       updateServiceWorker,
    } = useRegisterSW();
 
+   const versionCheckedRef = useRef(false);
+
+   // Workbox detected a new service worker with updated assets
    useEffect(() => {
-      // This effect triggers when a new service worker is ready to take over.
       if (needRefresh) {
-         // This immediately tells the new service worker to take control,
-         // which will force a hard reload of the page.
          updateServiceWorker(true);
       }
-
-      // This effect triggers when the app's assets are fully cached and ready for offline use.
-      // We won't show a toast, but we'll log it for debugging purposes.
       if (offlineReady) {
          console.log('PWA is ready for offline use.');
-         // Reset the state to prevent this log from firing on every render.
          setOfflineReady(false);
       }
    }, [needRefresh, offlineReady, setOfflineReady, updateServiceWorker]);
 
-   // This hook doesn't need to return anything as it performs its job in the background.
+   // Backend version mismatch check
+   useEffect(() => {
+      if (versionCheckedRef.current) return;
+
+      const serverVersion = (window as any).plutonVersion;
+      if (!serverVersion || serverVersion === 'unknown') return;
+
+      const storedVersion = localStorage.getItem(VERSION_STORAGE_KEY);
+
+      if (storedVersion && storedVersion !== serverVersion) {
+         versionCheckedRef.current = true;
+         clearCachesAndReload(serverVersion);
+      } else if (!storedVersion) {
+         localStorage.setItem(VERSION_STORAGE_KEY, serverVersion);
+      }
+   });
+}
+
+async function clearCachesAndReload(newVersion: string) {
+   try {
+      if ('serviceWorker' in navigator) {
+         const registrations = await navigator.serviceWorker.getRegistrations();
+         await Promise.all(registrations.map((r) => r.unregister()));
+      }
+      if ('caches' in window) {
+         const cacheNames = await caches.keys();
+         await Promise.all(cacheNames.map((name) => caches.delete(name)));
+      }
+   } catch (e) {
+      console.error('Failed to clear caches:', e);
+   }
+
+   localStorage.setItem(VERSION_STORAGE_KEY, newVersion);
+   window.location.reload();
 }

package/src/router.tsx

@@ -3,7 +3,6 @@ import Plans from './routes/Plans/Plans';
 import Login from './routes/Login/Login';
 import Setup from './routes/Setup/Setup';
 import { useAuth } from './services/users';
-import { useSetupStatus } from './services/settings';
 import App from './components/App/App/App';
 import Settings from './routes/Settings/Settings';
 import Storages from './routes/Storages/Storages';
@@ -14,14 +13,10 @@ import Footer from './components/App/Footer/Footer';
 import NotFoundRoute from './routes/NotFoundRoute/NotFoundRoute';
 import Icon from './components/common/Icon/Icon';
 
-function ProtectedLayout() {
-   // Check setup status FIRST - this endpoint doesn't require auth
-   // and tells us if we're in binary mode and if setup is pending
-   const { data: setupStatus, isLoading: setupLoading } = useSetupStatus();
-   const { data: authData, isError: authError, isLoading: authLoading } = useAuth();
+function PublicRoute({ children }: { children: React.ReactNode }) {
+   const { data: authData, isLoading: authLoading } = useAuth();
 
-   // Show loading spinner while checking setup status
-   if (setupLoading) {
+   if (authLoading) {
       return (
          <div className="loadingScreen">
             <Icon size={60} type="loading" />
@@ -29,16 +24,16 @@ function ProtectedLayout() {
       );
    }
 
-   // If setup status check failed, we can still proceed with auth check
-   // (might be a network issue or old backend without setup endpoint)
-
-   // For binary installations with pending setup, redirect to setup page
-   // This check happens BEFORE auth check so unauthenticated users can access setup
-   if (setupStatus?.data?.isBinary && setupStatus?.data?.setupPending) {
-      return <Navigate to="/setup" replace />;
+   if (authData) {
+      return <Navigate to="/" replace />;
    }
 
-   // Now check auth (setup is either complete or not a binary installation)
+   return <>{children}</>;
+}
+
+function ProtectedLayout() {
+   const { data: authData, isError: authError, isLoading: authLoading } = useAuth();
+
    if (authLoading) {
       return (
          <div className="loadingScreen">
@@ -47,6 +42,13 @@ function ProtectedLayout() {
       );
    }
 
+   // Check setup-pending from auth response headers (set by versionMiddleware on all responses)
+   const installType = (window as any).plutonInstallType;
+   const setupPending = (window as any).plutonSetupPending;
+   if (installType === 'binary' && setupPending) {
+      return <Navigate to="/setup" replace />;
+   }
+
    // If auth failed, redirect to login
    if (authError) {
       return <Navigate to="/login" replace />;
@@ -74,7 +76,14 @@ export function AppRoutes() {
             <Route path={'plan/:id'} element={<PlanSingle />} />
             <Route path="*" element={<NotFoundRoute />} />
          </Route>
-         <Route path="login" element={<Login />} />
+         <Route
+            path="login"
+            element={
+               <PublicRoute>
+                  <Login />
+               </PublicRoute>
+            }
+         />
          <Route path="setup" element={<Setup />} />
       </Routes>
    );

package/src/routes/DeviceSingle/DeviceSingle.tsx

@@ -6,10 +6,9 @@ import { useGetDevice, useGetSystemMetrics } from '../../services/devices';
 import DeviceInfo from '../../components/Device/DeviceInfo/DeviceInfo';
 import EditDevice from '../../components/Device/EditDevice/EditDevice';
 import classes from './DeviceSingle.module.scss';
-// import { compareVersions } from '../../utils/helpers';
 import NotFound from '../../components/common/NotFound/NotFound';
 import DeviceBackups from '../../components/Device/DeviceBackups/DeviceBackups';
-import { DevicePlan } from '../../@types/devices';
+import { DevicePlan, DeviceStorage } from '../../@types/devices';
 
 const DeviceSingle = () => {
    const { id } = useParams();
@@ -27,6 +26,7 @@ const DeviceSingle = () => {
    const device = data?.result?.device;
    const metrics = metricsData?.result && metricsData?.result?.system ? metricsData.result : device?.metrics;
    const devicePlans: DevicePlan[] = data?.result?.plans || [];
+   const deviceStorages: DeviceStorage[] = data?.result?.storages || [];
    const deviceName = device?.name;
    const isPending = device?.status && device?.status === 'pending';
 
@@ -73,7 +73,7 @@ const DeviceSingle = () => {
                </div>
             ) : (
                <>
-                  <DeviceBackups plans={devicePlans} />
+                  <DeviceBackups plans={devicePlans} storages={deviceStorages} />
                   {metrics?.system && <DeviceInfo metrics={metrics} isRefetching={false} />}
                </>
             )}

package/src/routes/PlanSingle/PlanSingle.tsx

@@ -14,9 +14,11 @@ import PlanUnlockModal from '../../components/Plan/PlanUnlockModal/PlanUnlockMod
 import PlanRemoveModal from '../../components/Plan/PlanRemoveModal/PlanRemoveModal';
 import PlanProgress from '../../components/Plan/PlanProgress/PlanProgress';
 import PlanBackups from '../../components/Plan/PlanBackups/PlanBackups';
+import PlanIntegrity from '../../components/Plan/PlanIntegrity/PlanIntegrity';
 
 const PlanSingle = () => {
    const [showMoreOptions, setShowMoreOptions] = useState(false);
+   const [showIntegrityModal, setShowIntegrityModal] = useState(false);
    const { id } = useParams();
 
    const EditPlanModal = useComponentOverride('EditPlan', EditPlan);
@@ -126,6 +128,15 @@ const PlanSingle = () => {
                                     <Icon size={14} type="unlock" /> Unlock
                                  </li>
                               )}
+                              <li
+                                 className={classes.actionBtn}
+                                 onClick={() => {
+                                    setShowIntegrityModal(true);
+                                    setShowMoreOptions(false);
+                                 }}
+                              >
+                                 <Icon size={14} type="integrity" /> Check Integrity
+                              </li>
                               <li
                                  className={classes.actionBtn}
                                  onClick={() => {
@@ -174,6 +185,16 @@ const PlanSingle = () => {
                   close={() => setShowPruneModal(false)}
                />
             )}
+            {showIntegrityModal && !isSync && (
+               <PlanIntegrity
+                  planId={plan.id}
+                  taskPending={taskPending}
+                  verificationData={plan.verified}
+                  storage={plan.storage}
+                  replicationStorages={plan.settings.replication?.enabled ? plan.settings.replication.storages : []}
+                  onClose={() => setShowIntegrityModal(false)}
+               />
+            )}
             {showDeleteModal && (
                <PlanRemoveModal planId={id} taskPending={taskPending} actionInProgress={actionInProgress} close={() => setShowDeleteModal(false)} />
             )}

package/src/services/backups.ts

@@ -5,14 +5,12 @@ import { API_URL } from '../utils/constants';
 const notifiedBackupProgress = new Set<string>();
 
 // Generate Download
-export async function generateBackupDownload({ backupId }: { backupId: string; planId: string }) {
-   // const header = new Headers({ 'Content-Type': 'application/json', Accept: 'application/json' });
-   const res = await fetch(`${API_URL}/backups/${backupId}/action/download`, {
+export async function generateBackupDownload({ backupId, replicationId }: { backupId: string; planId: string; replicationId?: string }) {
+   const url = `${API_URL}/backups/${backupId}/action/download?${replicationId ? `replicationId=${replicationId}` : ''}`;
+   const res = await fetch(url, {
       method: 'POST',
       credentials: 'include',
-      // headers: header,
    });
-   // Check if response is ok
    const data = await res.json();
    if (!data.success) {
       throw new Error(data.error);
@@ -241,13 +239,12 @@ export function useUpdateBackup() {
 }
 
 // Get Snapshot Files
-export async function getSnapshotFiles({ backupId }: { backupId: string }) {
-   const res = await fetch(`${API_URL}/backups/${backupId}/files`, {
+export async function getSnapshotFiles({ backupId, replicationId }: { backupId: string; replicationId?: string }) {
+   const url = replicationId ? `${API_URL}/backups/${backupId}/files?replicationId=${replicationId}` : `${API_URL}/backups/${backupId}/files`;
+   const res = await fetch(url, {
       method: 'GET',
       credentials: 'include',
-      // headers: header,
    });
-   // Check if response is ok
    const data = await res.json();
    if (!data.success) {
       throw new Error(data.error);
@@ -263,3 +260,29 @@ export function useGetSnapshotFiles(payload: { backupId: string }) {
       retry: false,
    });
 }
+
+// Retry Failed Replications
+export async function retryFailedReplications({ backupId, replicationId }: { backupId: string; planId: string; replicationId: string }) {
+   const header = new Headers({ 'Content-Type': 'application/json', Accept: 'application/json' });
+   const res = await fetch(`${API_URL}/backups/${backupId}/action/replication-retry?replicationId=${replicationId}`, {
+      method: 'POST',
+      credentials: 'include',
+      headers: header,
+   });
+   const data = await res.json();
+   if (!data.success) {
+      throw new Error(data.error);
+   }
+   return data;
+}
+
+export function useRetryFailedReplications() {
+   const queryClient = useQueryClient();
+   return useMutation({
+      mutationFn: retryFailedReplications,
+      onSuccess: (res, payload) => {
+         console.log('res :', payload, res);
+         queryClient.invalidateQueries({ queryKey: ['plan', payload.planId] });
+      },
+   });
+}