@plutonhq/core-frontend 0.1.32 → 0.1.34

package/src/components/Plan/PlanSettings/PlanGeneralSettings.tsx

@@ -1,4 +1,4 @@
-import { NewPlanSettings } from '../../../@types/plans';
+import { NewPlanSettings, PlanAddRunSettings } from '../../../@types/plans';
 import NumberInput from '../../common/form/NumberInput/NumberInput';
 import Toggle from '../../common/form/Toggle/Toggle';
 import classes from './PlanSettings.module.scss';
@@ -7,9 +7,11 @@ interface PlanGeneralSettingsProps {
    settings: NewPlanSettings['settings'];
    onUpdate: (settings: NewPlanSettings['settings']) => void;
    isEditing: boolean;
+   runSettings?: PlanAddRunSettings;
+   setRunSettings?: (runSettings: PlanAddRunSettings) => void;
 }
 
-const PlanGeneralSettings = ({ settings, onUpdate, isEditing }: PlanGeneralSettingsProps) => {
+const PlanGeneralSettings = ({ settings, onUpdate, isEditing, runSettings, setRunSettings }: PlanGeneralSettingsProps) => {
    const { encryption, compression, retries, retryDelay } = settings;
    return (
       <>
@@ -48,6 +50,16 @@ const PlanGeneralSettings = ({ settings, onUpdate, isEditing }: PlanGeneralSetti
                inline={false}
             />
          </div>
+         {!isEditing && setRunSettings && (
+            <div className={`${classes.field} ${classes.runNowField}`}>
+               <label className={classes.label}>Run Backup Now</label>
+               <Toggle
+                  fieldValue={runSettings?.runNow ?? true}
+                  onUpdate={(val: boolean) => setRunSettings && setRunSettings({ ...runSettings, runNow: val })}
+                  description={'Run backup immediately after creating the plan'}
+               />
+            </div>
+         )}
       </>
    );
 };

package/src/components/Plan/PlanSettings/PlanPerformanceSettings.tsx

@@ -34,8 +34,8 @@ const PlanPerformanceSettings = ({ plan, onUpdate }: PlanPerformanceSettingsProp
          <div className={classes.field}>
             <NumberInput
                label="Packet Size (MB)"
-               fieldValue={perfSettings?.packSize ? parseInt(perfSettings.packSize.replace('MiB', ''), 10) : ''}
-               onUpdate={(val) => onUpdate({ ...perfSettings, packSize: val + 'MiB' })}
+               fieldValue={perfSettings?.packSize ? parseInt(perfSettings.packSize, 10) : ''}
+               onUpdate={(val) => onUpdate({ ...perfSettings, packSize: val ? val.toString() : '' })}
                min={0}
                max={4000}
             />

package/src/components/Plan/PlanSettings/PlanSettings.module.scss

@@ -26,6 +26,14 @@
    }
 }
 
+.runNowField {
+   padding: 12px;
+   border: 1px solid var(--primary-color-mid);
+   border-radius: 6px;
+   box-sizing: border-box;
+   background: var(--background-color);
+}
+
 .label {
    font-weight: 600;
    display: block;

package/src/components/Plan/PlanSizeChart/PlanSizeChart.module.scss

@@ -0,0 +1,76 @@
+.chartWrap {
+   position: relative;
+   width: 100%;
+   height: 100%;
+   min-height: 60px;
+}
+
+.chartCanvas {
+   position: absolute;
+   inset: 0;
+}
+
+.rangeSelector {
+   position: absolute;
+   top: -28px;
+   right: 0;
+   z-index: 2;
+}
+
+.rangeBtn {
+   background: var(--content-background-color);
+   color: var(--content-text-color-light);
+   border-radius: 4px;
+   font-size: 0.6875rem;
+   font-weight: 600;
+   padding: 2px 8px;
+   cursor: pointer;
+   line-height: 1.4;
+
+   &:hover {
+      color: var(--primary-color);
+      border-color: var(--primary-color);
+   }
+}
+
+.rangeMenu {
+   position: absolute;
+   top: calc(100% + 4px);
+   right: 0;
+   margin: 0;
+   padding: 4px 0;
+   list-style: none;
+   background: var(--content-background-color);
+   border: 1px solid var(--line-color);
+   border-radius: 4px;
+   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+   min-width: 80px;
+
+   li {
+      padding: 4px 10px;
+      font-size: 0.75rem;
+      cursor: pointer;
+      color: var(--content-text-color);
+
+      &:hover {
+         background: var(--primary-color-light);
+         color: var(--primary-color);
+      }
+
+      &.active {
+         color: var(--primary-color);
+         font-weight: 600;
+      }
+   }
+}
+
+.empty {
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   gap: 6px;
+   height: 100%;
+   font-size: 0.75rem;
+   color: var(--content-text-color-light);
+   opacity: 0.7;
+}

package/src/components/Plan/PlanSizeChart/PlanSizeChart.tsx

@@ -0,0 +1,166 @@
+import { useMemo, useRef, useState, useEffect } from 'react';
+import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Filler, Tooltip, Legend, ChartOptions } from 'chart.js';
+import { Line } from 'react-chartjs-2';
+import Icon from '../../common/Icon/Icon';
+import { Backup } from '../../../@types/backups';
+import { formatBytes, formatNumberToK, isDarkMode } from '../../../utils/helpers';
+import classes from './PlanSizeChart.module.scss';
+
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Filler, Tooltip, Legend);
+
+type RangeKey = '7d' | '14d' | '1m' | '3m' | '6m';
+
+const RANGE_OPTIONS: { key: RangeKey; label: string; labelFull: string; days: number }[] = [
+   { key: '7d', label: '7d', labelFull: '7 days', days: 7 },
+   { key: '14d', label: '14d', labelFull: '14 days', days: 14 },
+   { key: '1m', label: '1m', labelFull: '1 month', days: 30 },
+   { key: '3m', label: '3m', labelFull: '3 months', days: 90 },
+   { key: '6m', label: '6m', labelFull: '6 months', days: 180 },
+];
+
+interface PlanSizeChartProps {
+   backups: Backup[];
+}
+
+const PlanSizeChart = ({ backups }: PlanSizeChartProps) => {
+   const [range, setRange] = useState<RangeKey>('3m');
+   const [open, setOpen] = useState(false);
+   const dropdownRef = useRef<HTMLDivElement>(null);
+
+   useEffect(() => {
+      if (!open) return;
+      const onClick = (e: MouseEvent) => {
+         if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+            setOpen(false);
+         }
+      };
+      document.addEventListener('mousedown', onClick);
+      return () => document.removeEventListener('mousedown', onClick);
+   }, [open]);
+
+   const activeRange = RANGE_OPTIONS.find((r) => r.key === range) || RANGE_OPTIONS[3];
+
+   const filtered = useMemo(() => {
+      const cutoff = Date.now() - activeRange.days * 24 * 60 * 60 * 1000;
+      // if there is only one backup duplicate the first backup to make 2 items
+      // so that the graph is never empty and shows the size even if there is only one backup in the selected range
+      const theBackups = backups && backups.length === 1 ? [backups[0], backups[0]] : backups || [];
+      return [...theBackups]
+         .filter((b) => {
+            const t = new Date(b.started).getTime();
+            return !isNaN(t) && t >= cutoff;
+         })
+         .sort((a, b) => new Date(a.started).getTime() - new Date(b.started).getTime());
+   }, [backups, activeRange.days]);
+
+   const labels = filtered.map((b) => new Date(b.started).toLocaleString());
+   const sizeData = filtered.map((b) => b.totalSize || 0);
+   const filesData = filtered.map((b) => b.totalFiles || 0);
+
+   const data = {
+      labels,
+      datasets: [
+         {
+            label: 'Size',
+            data: sizeData,
+            yAxisID: 'ySize',
+            borderColor: 'transparent',
+            backgroundColor: 'rgba(87, 132, 255, 0.12)',
+            fill: true,
+            tension: 0.4,
+            borderWidth: 1.5,
+            pointRadius: 0,
+            pointHoverRadius: 4,
+            pointHoverBackgroundColor: 'rgba(87, 90, 255, 1)',
+         },
+         {
+            label: 'Files',
+            data: filesData,
+            yAxisID: 'yFiles',
+            borderColor: '#9a9bff',
+            backgroundColor: 'transparent',
+            borderDash: [3, 3],
+            fill: false,
+            tension: 0.4,
+            borderWidth: 1.2,
+            pointRadius: 0,
+            pointHoverRadius: 4,
+            pointHoverBackgroundColor: 'rgba(87, 90, 255, 1)',
+         },
+      ],
+   };
+
+   const options: ChartOptions<'line'> = {
+      responsive: true,
+      animation: false,
+      maintainAspectRatio: false,
+      interaction: { mode: 'index', intersect: false },
+      plugins: {
+         legend: { display: false },
+         tooltip: {
+            displayColors: false,
+            backgroundColor: isDarkMode ? 'rgba(0, 0, 0, 0.9)' : 'rgba(255, 255, 255, 1)',
+            titleColor: isDarkMode ? '#fff' : '#666',
+            bodyColor: isDarkMode ? '#ccc' : '#888',
+            padding: 8,
+            titleFont: { size: 11 },
+            bodyFont: { size: 11 },
+            callbacks: {
+               title: (items) => {
+                  const idx = items[0]?.dataIndex ?? 0;
+                  const b = filtered[idx];
+                  return b ? new Date(b.started).toLocaleString() : '';
+               },
+               label: (ctx) => {
+                  if (ctx.dataset.label === 'Size') return `Size: ${formatBytes(ctx.parsed.y || 0)}`;
+                  return `Files: ${formatNumberToK(ctx.parsed.y || 0)}`;
+               },
+            },
+         },
+      },
+      scales: {
+         x: { display: false },
+         ySize: { display: false, beginAtZero: true },
+         yFiles: { display: false, beginAtZero: true, position: 'right' },
+      },
+   };
+
+   return (
+      <div className={classes.chartWrap}>
+         <div className={classes.rangeSelector} ref={dropdownRef}>
+            <button type="button" className={classes.rangeBtn} onClick={() => setOpen((v) => !v)}>
+               {activeRange.label}
+            </button>
+            {open && (
+               <ul className={classes.rangeMenu}>
+                  {RANGE_OPTIONS.slice()
+                     .reverse()
+                     .map((opt) => (
+                        <li
+                           key={opt.key}
+                           className={opt.key === range ? classes.active : ''}
+                           onClick={() => {
+                              setRange(opt.key);
+                              setOpen(false);
+                           }}
+                        >
+                           {opt.labelFull}
+                        </li>
+                     ))}
+               </ul>
+            )}
+         </div>
+         {filtered.length === 0 ? (
+            <div className={classes.empty}>
+               <Icon type="folders" size={16} /> No data in range
+            </div>
+         ) : (
+            <div className={classes.chartCanvas}>
+               <Line data={data} options={options} />
+            </div>
+         )}
+      </div>
+   );
+};
+
+export default PlanSizeChart;

package/src/components/Plan/PlanStats/PlanStats.module.scss

@@ -16,6 +16,15 @@
       span {
          color: var(--icon-color);
       }
+      .widgetSubTitle {
+         margin-left: 4px;
+         i {
+            font-style: normal;
+            font-family: sans-serif;
+            font-size: 9px;
+            padding: 0 2px;
+         }
+      }
    }
 
    .sources,
@@ -83,12 +92,17 @@
    }
    .snapshots {
       width: 24%;
+      padding: 20px 0 0 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
       .snapshotsContent {
          display: flex;
          justify-content: space-around;
          align-items: center;
-         height: 100%;
-         margin-top: 8px;
+         height: 70px;
+         margin-top: 16px;
+         position: relative;
 
          & > div {
             text-align: center;

package/src/components/Plan/PlanStats/PlanStats.tsx

@@ -1,9 +1,11 @@
 import Icon from '../../common/Icon/Icon';
 import { Plan } from '../../../@types/plans';
-import { formatBytes, formatNumberToK, formatIntervalDisplay } from '../../../utils/helpers';
+import { formatIntervalDisplay } from '../../../utils/helpers';
 import PlanHistory from '../PlanHistory/PlanHistory';
+import PlanSizeChart from '../PlanSizeChart/PlanSizeChart';
 import classes from './PlanStats.module.scss';
 import PlanStorageInfo from '../PlanStorageInfo/PlanStorageInfo';
+import { formatBytes, formatNumberToK } from '../../../utils/helpers';
 
 interface PlanStatsProps {
    plan: Plan;
@@ -61,18 +63,13 @@ const PlanStats = ({ plan, isSync, lastBackupItem }: PlanStatsProps) => {
          </div>
          <div className={classes.snapshots}>
             <div className={classes.widgetTitle}>
-               <Icon type="folders" size={12} /> Source Stats
+               <Icon type="folders" size={12} /> Stats{' '}
+               <span className={classes.widgetSubTitle}>
+                  {formatNumberToK(totalFiles)} files <i>|</i> {formatBytes(totalSize)}
+               </span>
             </div>
             <div className={classes.snapshotsContent}>
-               <div>
-                  <span>{totalFiles ? formatNumberToK(totalFiles) : 0}</span>
-                  <span>Files</span>
-               </div>
-               <div></div>
-               <div>
-                  <span>{totalSize ? formatBytes(totalSize) : '0.00B'}</span>
-                  <span>Size</span>
-               </div>
+               <PlanSizeChart backups={plan.backups} />
             </div>
          </div>
          <div className={classes.health}>

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

@@ -163,6 +163,13 @@
    max-width: 70px;
 }
 
+.fileDate {
+   max-width: 150px;
+   white-space: nowrap;
+   overflow: hidden;
+   text-overflow: ellipsis;
+}
+
 .selected {
    background: #e6f7ff;
 }

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

@@ -978,6 +978,18 @@ const Icon = ({ type, color = 'currentColor', size = 16, title = '', classes = '
                ></path>
             </IconWrapper>
          )}
+         {type === 'repair' && (
+            <IconWrapper size={size} viewBox="0 0 24 24">
+               <g fill="none" fillRule="evenodd">
+                  <path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"></path>
+                  <path
+                     fill={color}
+                     d="M7.527 2.657a7.001 7.001 0 0 1 8.26 9.347l4.599 3.893a3.3 3.3 0 1 1-4.651 4.65l-3.891-4.597a7.001 7.001 0 0 1-9.35-8.26a1.01 1.01 0 0 1 1.72-.432l3.045 3.307l2.297-.845l.847-2.3l-3.309-3.04a1.01 1.01 0 0 1 .433-1.723"
+                  ></path>
+               </g>
+            </IconWrapper>
+         )}
+
          {type === 'dots-vertical' && (
             <IconWrapper size={size} viewBox="0 0 24 24">
                <path
@@ -1151,6 +1163,15 @@ const Icon = ({ type, color = 'currentColor', size = 16, title = '', classes = '
                ></path>
             </IconWrapper>
          )}
+         {type === 'filter' && (
+            <IconWrapper size={size} viewBox="0 0 24 24">
+               <path
+                  fill={color}
+                  d="M15 19.88c.04.3-.06.62-.29.83a.996.996 0 0 1-1.41 0L9.29 16.7a.99.99 0 0 1-.29-.83v-5.12L4.21 4.62a1 1 0 0 1 .17-1.4c.19-.14.4-.22.62-.22h14c.22 0 .43.08.62.22a1 1 0 0 1 .17 1.4L15 10.75zM7.04 5L11 10.06v5.52l2 2v-7.53L16.96 5z"
+               ></path>
+            </IconWrapper>
+         )}
+
          {type === 'notification' && (
             <IconWrapper size={size} viewBox="0 0 24 24">
                <g fill="none" stroke={color} strokeWidth={1.5}>

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

@@ -7,6 +7,7 @@
    span {
       opacity: 1;
       color: inherit;
+      font-weight: 600;
    }
 }
 
@@ -18,11 +19,11 @@
    background: var(--field-bg);
    width: calc(100% - 2px);
    border-radius: 0 0 4px 4px;
-   max-height: 200px;
    overflow: auto;
    font-size: 0.75rem;
    right: 0;
-   width: 200px;
+   width: 210px;
+   max-height: 320px;
    border-radius: 6px;
    ul {
       margin: 0;

package/src/components/common/SortItems/SortItems.tsx

@@ -2,18 +2,19 @@ import { useState } from 'react';
 import Icon from '../Icon/Icon';
 import classes from './SortItems.module.scss';
 type SortItemsProps = {
+   id: string;
    onSort: (s: string) => void;
    options: { label: string; value: string }[];
 };
 
-const SortItems = ({ options, onSort }: SortItemsProps) => {
+const SortItems = ({ id, options, onSort }: SortItemsProps) => {
    const [showDropDown, setshowDropDown] = useState(false);
-   const [selected, setsSelected] = useState('');
+   const [selected, setsSelected] = useState(localStorage.getItem(id) || '');
    const selectedLabel = options.find((item) => item.value === selected);
    return (
       <div className={classes.sortItems}>
          <button
-            className={selected ? classes.sortActive : ''}
+            className={selected || showDropDown ? classes.sortActive : ''}
             onClick={() => setshowDropDown(!showDropDown)}
             data-tooltip-id="appTooltip"
             data-tooltip-content="Sort"
@@ -34,6 +35,7 @@ const SortItems = ({ options, onSort }: SortItemsProps) => {
                               onClick={() => {
                                  setsSelected(item.value);
                                  onSort(item.value);
+                                 localStorage.setItem(id, item.value);
                                  setshowDropDown(false);
                               }}
                               className={`${selected && item.value === selected ? classes.selectedItem : ''}`}
@@ -46,6 +48,7 @@ const SortItems = ({ options, onSort }: SortItemsProps) => {
                      onClick={() => {
                         setsSelected('');
                         onSort('');
+                        localStorage.removeItem(id);
                         setshowDropDown(false);
                      }}
                   >

package/src/components/common/form/MultiSelect/MultiSelect.module.scss

@@ -73,6 +73,7 @@
          .dropBtn {
             background: transparent;
             color: var(--icon-color);
+            padding: 0;
          }
       }
 

package/src/components/index.ts

@@ -27,6 +27,7 @@ export { default as PathPicker } from './common/PathPicker/PathPicker';
 export { default as SearchItems } from './common/SearchItems/SearchItems';
 export { default as SidePanel } from './common/SidePanel/SidePanel';
 export { default as SortItems } from './common/SortItems/SortItems';
+export { default as FilterPlans } from './Plan/FilterPlans/FilterPlans';
 export { default as StatusLabel } from './common/StatusLabel/StatusLabel';
 export { default as Tabs, TabList, TabPanel, Tab } from './common/Tabs/Tabs';
 export { default as TagsFilter } from './common/TagsFilter/TagsFilter';
@@ -90,6 +91,7 @@ export { default as PlanTypeSettings } from './Plan/PlanSettings/PlanTypeSetting
 export { default as PlanStats } from './Plan/PlanStats/PlanStats';
 export { default as PlanUnlockModal } from './Plan/PlanUnlockModal/PlanUnlockModal';
 export { default as PlanIntegrity } from './Plan/PlanIntegrity/PlanIntegrity';
+export { default as PlanRepair } from './Plan/PlanRepair/PlanRepair';
 export { default as SnapshotViewer } from './Plan/SnapshotViewer/SnapshotViewer';
 export { default as SnapshotViewerFile } from './Plan/SnapshotViewer/SnapshotViewerFile';
 

package/src/hooks/usePlanSingleActions.tsx

@@ -97,30 +97,33 @@ export const usePlanSingleActions = (): {
 
       const toastId = toast.loading(`Starting ${isSync ? 'Sync' : 'Backup'}...`);
 
-      performBackupMutation.mutate(plan.id, {
-         onSuccess: (data) => {
-            const msg = data?.message || `${isSync ? 'Sync' : 'Backup'} initiated successfully!  🚀`;
-            const notStarted = !isSync && data?.message && data?.message.includes('reached the concurrency limit');
-            toast.update(toastId, {
-               render: isSync ? msg : notStarted ? data?.message : 'Backup initiated successfully!',
-               type: 'success',
-               isLoading: false,
-               autoClose: 3000,
-            });
-            if (!isSync && !notStarted) {
-               navigate(`/plan/${plan.id}?pendingbackup=1`);
-            }
-         },
-         onError: (error: any) => {
-            toast.update(toastId, {
-               render: `${isSync ? 'Sync' : 'Backup'} failed to start. ${error?.message || 'Unknown Error.'}`,
-               type: 'error',
-               isLoading: false,
-               autoClose: false,
-               closeButton: true,
-            });
+      performBackupMutation.mutate(
+         { id: plan.id },
+         {
+            onSuccess: (data) => {
+               const msg = data?.message || `${isSync ? 'Sync' : 'Backup'} initiated successfully!  🚀`;
+               const notStarted = !isSync && data?.message && data?.message.includes('reached the concurrency limit');
+               toast.update(toastId, {
+                  render: isSync ? msg : notStarted ? data?.message : 'Backup initiated successfully!',
+                  type: 'success',
+                  isLoading: false,
+                  autoClose: 3000,
+               });
+               if (!isSync && !notStarted) {
+                  navigate(`/plan/${plan.id}?pendingbackup=1`);
+               }
+            },
+            onError: (error: any) => {
+               toast.update(toastId, {
+                  render: `${isSync ? 'Sync' : 'Backup'} failed to start. ${error?.message || 'Unknown Error.'}`,
+                  type: 'error',
+                  isLoading: false,
+                  autoClose: false,
+                  closeButton: true,
+               });
+            },
          },
-      });
+      );
    };
 
    return {

package/src/routes/Login/Login.tsx

@@ -65,7 +65,13 @@ const Login = () => {
             </h3>
          </div>
          <div className={classes.container}>
-            <div className="loginForm">
+            <form
+               className="loginForm"
+               onSubmit={(e) => {
+                  e.preventDefault();
+                  handleLogin();
+               }}
+            >
                <div className={classes.loginInput}>
                   <Icon type="user" classes={classes.loginInputIcon} />
                   <input
@@ -90,7 +96,7 @@ const Login = () => {
                   {loginMutation.isPending ? 'Logging in...' : 'Login'}
                </button>
                {error && error.msg && <div className={classes.loginErrorMsg}>{error.msg}</div>}
-            </div>
+            </form>
          </div>
       </div>
    );

package/src/routes/PlanSingle/PlanSingle.tsx

@@ -15,10 +15,13 @@ import PlanRemoveModal from '../../components/Plan/PlanRemoveModal/PlanRemoveMod
 import PlanProgress from '../../components/Plan/PlanProgress/PlanProgress';
 import PlanBackups from '../../components/Plan/PlanBackups/PlanBackups';
 import PlanIntegrity from '../../components/Plan/PlanIntegrity/PlanIntegrity';
+import PlanRepair from '../../components/Plan/PlanRepair/PlanRepair';
+import { PlanVerifiedResult } from '../..';
 
 const PlanSingle = () => {
    const [showMoreOptions, setShowMoreOptions] = useState(false);
    const [showIntegrityModal, setShowIntegrityModal] = useState(false);
+   const [showRepoRepair, setShowRepoRepair] = useState('');
    const { id } = useParams();
 
    const EditPlanModal = useComponentOverride('EditPlan', EditPlan);
@@ -198,6 +201,20 @@ const PlanSingle = () => {
                   storage={plan.storage}
                   replicationStorages={plan.settings.replication?.enabled ? plan.settings.replication.storages : []}
                   onClose={() => setShowIntegrityModal(false)}
+                  onRepairOpen={(replicationId) => {
+                     setShowIntegrityModal(false);
+                     setShowRepoRepair(replicationId);
+                  }}
+               />
+            )}
+            {showRepoRepair && !isSync && (
+               <PlanRepair
+                  planId={id}
+                  errorType={
+                     (plan.verified?.result[showRepoRepair as keyof typeof plan.verified.result] as PlanVerifiedResult)?.errorType || 'unknown'
+                  }
+                  onClose={() => setShowRepoRepair('')}
+                  onOpenIntegrity={() => setShowIntegrityModal(true)}
                />
             )}
             {showDeleteModal && (