@plutonhq/core-frontend 0.1.31 → 0.1.33

package/src/components/Plan/PlanRepair/PlanRepair.tsx

@@ -0,0 +1,243 @@
+import { toast } from 'react-toastify';
+import { usePausePlan, usePerformBackup, useRepairBackupPlan, useResumePlan } from '../../../services';
+import Icon from '../../common/Icon/Icon';
+import SidePanel from '../../common/SidePanel/SidePanel';
+import classes from './PlanRepair.module.scss';
+
+interface PlanRepairProps {
+   planId: string;
+   errorType: string;
+   onClose: () => void;
+   onOpenIntegrity: () => void;
+}
+
+const PlanRepair = ({ planId, errorType, onClose, onOpenIntegrity }: PlanRepairProps) => {
+   const pauseMutation = usePausePlan();
+   const resumeMutation = useResumePlan();
+
+   const performBackupMutation = usePerformBackup();
+   const repairRepoMutation = useRepairBackupPlan();
+
+   const shouldBeInaccessible =
+      pauseMutation.isPending || resumeMutation.isPending || performBackupMutation.isPending || repairRepoMutation.isPending;
+
+   const pausePlan = () => {
+      toast.promise(
+         pauseMutation.mutateAsync(planId),
+         {
+            pending: 'Pausing backup Plan...',
+            success: 'Backup Plan Paused',
+            error: {
+               render({ data }: any) {
+                  return `Failed to Pause Backup Plan. ${data?.message || 'Unknown Error.'}`;
+               },
+            },
+         },
+         { autoClose: 3000 },
+      );
+   };
+
+   const resumePlan = () => {
+      toast.promise(
+         resumeMutation.mutateAsync(planId),
+         {
+            pending: 'Resuming backup Plan...',
+            success: 'Backup Plan Resumed',
+            error: {
+               render({ data }: any) {
+                  return `Failed to Resume Backup Plan. ${data?.message || 'Unknown Error.'}`;
+               },
+            },
+         },
+         { autoClose: 3000 },
+      );
+   };
+
+   const runBackup = () => {
+      toast.promise(performBackupMutation.mutateAsync({ id: planId, runConfig: { ignoreErrors: true, skipPrune: true } }), {
+         pending: 'Running backup...',
+         success: 'Backup Started!',
+         error: {
+            render({ data }: any) {
+               return `Failed to Start Backup. ${data?.message || 'Unknown Error.'}`;
+            },
+         },
+      });
+   };
+
+   const repairRepo = (type: 'index' | 'snapshots' | 'packs') => {
+      toast.promise(repairRepoMutation.mutateAsync({ planId, type }), {
+         pending: `Repairing broken ${type}...`,
+         success: `Successfully repaired broken ${type}.`,
+         error: {
+            render({ data }: any) {
+               return `Failed to repair broken ${type}. ${data?.message || 'Unknown Error.'}`;
+            },
+         },
+      });
+   };
+
+   const renderMissingPackRepairContent = () => {
+      return (
+         <div className={classes.repairContent}>
+            <p className={classes.repairTitle}>Fixing Restic Repo with Damaged or Missing Packs</p>
+            <p>
+               <strong>Step 1: </strong> First,{' '}
+               <button onClick={pausePlan} disabled={shouldBeInaccessible}>
+                  <Icon type="pause" size={12} /> Pause
+               </button>{' '}
+               the backup plan to prevent any new backup runs from starting.
+            </p>
+            <p>
+               <strong>Step 2: </strong> Download/Backup the index and the snapshots directories from the destination storage.
+            </p>
+            <p>
+               <strong>Step 3: </strong> Then{' '}
+               <button onClick={() => repairRepo('index')} disabled={shouldBeInaccessible}>
+                  <Icon type="repair" size={12} /> Repair the Repo Index
+               </button>{' '}
+               to fix missing or damaged pack files.
+            </p>
+            <p>
+               <strong>Step 4: </strong> Then{' '}
+               <button onClick={runBackup} disabled={shouldBeInaccessible}>
+                  <Icon type="backup" size={13} /> Run a Backup
+               </button>{' '}
+               to update the Repo Index after repairing it.
+            </p>
+            <p>
+               <strong>Step 5: </strong> Then{' '}
+               <button onClick={onOpenIntegrity} disabled={shouldBeInaccessible}>
+                  <Icon type="integrity" size={12} /> Check Integrity
+               </button>{' '}
+               again to see if the repo is fixed.
+            </p>
+            <p>
+               <strong>Step 6: </strong> If that did not fix the issue,{' '}
+               <button onClick={() => repairRepo('snapshots')} disabled={shouldBeInaccessible}>
+                  <Icon type="repair" size={12} /> Repair Broken Snapshots
+               </button>{' '}
+               and then{' '}
+               <button onClick={onOpenIntegrity} disabled={shouldBeInaccessible}>
+                  <Icon type="integrity" size={12} /> Check Integrity
+               </button>
+            </p>
+            <p>
+               <strong>Step 7: </strong> If the issue is resolved,{' '}
+               <button onClick={resumePlan} disabled={shouldBeInaccessible}>
+                  <Icon type="play" size={12} /> Resume
+               </button>{' '}
+               the backup plan.
+            </p>
+         </div>
+      );
+   };
+   const renderPackRepairContent = () => {
+      return (
+         <div className={classes.repairContent}>
+            <p className={classes.repairTitle}>Fixing Restic Repo with Damaged Pack files</p>
+            <p>
+               <strong>Step 1: </strong> First,{' '}
+               <button onClick={pausePlan} disabled={shouldBeInaccessible}>
+                  <Icon type="pause" size={12} /> Pause
+               </button>{' '}
+               the backup plan to prevent any new backup runs from starting.
+            </p>
+            <p>
+               <strong>Step 2: </strong> Then{' '}
+               <button onClick={() => repairRepo('packs')} disabled={shouldBeInaccessible}>
+                  <Icon type="repair" size={12} /> Repair the Pack Files
+               </button>{' '}
+               to fix missing or damaged pack files.
+            </p>
+            <p>
+               <strong>Step 3: </strong> Then{' '}
+               <button onClick={() => repairRepo('snapshots')} disabled={shouldBeInaccessible}>
+                  <Icon type="repair" size={12} /> Repair the Snapshots
+               </button>{' '}
+               to fix the snapshots that relied on the broken pack files.
+            </p>
+            <p>
+               <strong>Step 4: </strong> Then{' '}
+               <button onClick={onOpenIntegrity} disabled={shouldBeInaccessible}>
+                  <Icon type="integrity" size={12} /> Check Integrity
+               </button>{' '}
+               again to see if the repo is fixed.
+            </p>
+            <p>
+               <strong>Step 5: </strong> If the issue is resolved,{' '}
+               <button onClick={resumePlan} disabled={shouldBeInaccessible}>
+                  <Icon type="play" size={12} /> Resume
+               </button>{' '}
+               the backup plan.
+            </p>
+         </div>
+      );
+   };
+
+   const renderIndexRepairContent = () => {
+      return (
+         <div className={classes.repairContent}>
+            <p className={classes.repairTitle}>Fixing Restic Repo with Damaged Index</p>
+            <p>
+               <strong>Step 1: </strong> First,{' '}
+               <button onClick={pausePlan} disabled={shouldBeInaccessible}>
+                  <Icon type="pause" size={12} /> Pause
+               </button>{' '}
+               the backup plan to prevent any new backup runs from starting.
+            </p>
+            <p>
+               <strong>Step 2: </strong> Then{' '}
+               <button onClick={() => repairRepo('index')} disabled={shouldBeInaccessible}>
+                  <Icon type="repair" size={12} /> Repair the Index
+               </button>{' '}
+               to fix damaged index files.
+            </p>
+            <p>
+               <strong>Step 3: </strong> Then{' '}
+               <button onClick={onOpenIntegrity} disabled={shouldBeInaccessible}>
+                  <Icon type="integrity" size={12} /> Check Integrity
+               </button>{' '}
+               again to see if the repo is fixed.
+            </p>
+            <p>
+               <strong>Step 4: </strong> If the issue is resolved,{' '}
+               <button onClick={resumePlan} disabled={shouldBeInaccessible}>
+                  <Icon type="play" size={12} /> Resume
+               </button>{' '}
+               the backup plan.
+            </p>
+         </div>
+      );
+   };
+
+   return (
+      <SidePanel
+         title="Check Backup Integrity"
+         icon={'integrity'}
+         // errorMessage={integrityCheckMutation.error?.message}
+         close={() => onClose()}
+         width="800px"
+      >
+         <div className={classes.repairContainer}>
+            {shouldBeInaccessible && (
+               <div className={classes.overlay}>
+                  <Icon type="loading" size={36} />
+               </div>
+            )}
+            {errorType === 'pack_file_error' && renderMissingPackRepairContent()}
+            {errorType === 'repairable_pack_file_error' && renderPackRepairContent()}
+            {errorType === 'index_error' && renderIndexRepairContent()}
+            <small>
+               If performing the above actions does not resolve the issue, please follow this{' '}
+               <a href="https://restic.readthedocs.io/en/stable/077_troubleshooting.html" target="_blank" rel="noopener noreferrer">
+                  Restic Troubleshooting Guide
+               </a>
+               .
+            </small>
+         </div>
+      </SidePanel>
+   );
+};
+
+export default PlanRepair;

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

@@ -3,7 +3,7 @@ import Icon from '../../common/Icon/Icon';
 import classes from './PlanSettings.module.scss';
 import PlanNotificationSettings from './PlanNotificationSettings';
 import PlanPerformanceSettings from './PlanPerformanceSettings';
-import { NewPlanSettings } from '../../../@types/plans';
+import { NewPlanSettings, PlanAddRunSettings } from '../../../@types/plans';
 import TagsInput from '../../common/form/TagsInput/TagsInput';
 import PlanGeneralSettings from './PlanGeneralSettings';
 import { isMobile } from '../../../utils/helpers';
@@ -17,9 +17,11 @@ interface PlanAdvancedSettingsProps {
    device: Device;
    onUpdate: (notificationSettings: NewPlanSettings) => void;
    isEditing: boolean;
+   runSettings?: PlanAddRunSettings;
+   setRunSettings?: (runSettings: PlanAddRunSettings) => void;
 }
 
-const PlanAdvancedSettings = ({ plan, appSettings, device, onUpdate, isEditing }: PlanAdvancedSettingsProps) => {
+const PlanAdvancedSettings = ({ plan, appSettings, device, onUpdate, isEditing, runSettings, setRunSettings }: PlanAdvancedSettingsProps) => {
    const [advancedTab, setAdvancedTab] = useState('General');
    const settings = plan.settings;
    const integrationTypes = useMemo(() => {
@@ -80,6 +82,8 @@ const PlanAdvancedSettings = ({ plan, appSettings, device, onUpdate, isEditing }
                   settings={settings}
                   onUpdate={(newSettings) => onUpdate({ ...plan, settings: newSettings })}
                   isEditing={isEditing}
+                  runSettings={runSettings}
+                  setRunSettings={setRunSettings}
                />
             )}
             {advancedTab === 'Notification' && (

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/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: 70px;
+
+   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,163 @@
+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; days: number }[] = [
+   { key: '7d', label: '7d', days: 7 },
+   { key: '14d', label: '14d', days: 14 },
+   { key: '1m', label: '1m', days: 30 },
+   { key: '3m', label: '3m', days: 90 },
+   { key: '6m', label: '6m', 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;
+      return [...(backups || [])]
+         .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.label}
+                        </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/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}>