strapi-content-sync-pro 1.0.5 → 1.0.7

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 Ejaz Husain Arain
+Copyright (c) 2024–2025 Ejaz Hussain Arain. All rights reserved.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -320,4 +320,5 @@ MIT License - see [LICENSE](LICENSE) for details.
 
 **Ejaz Husain Arain**
 - GitHub: [@eharain](https://github.com/eharain)
+- LinkedIn: [Ejaz Husain Arain](https://www.linkedin.com/in/eharain/)
 - Email: eharain@yahoo.com

package/admin/src/components/BulkTransferTab.jsx

@@ -8,6 +8,7 @@ import {
   Checkbox,
   SingleSelect,
   SingleSelectOption,
+  TextInput,
   Field,
   Table,
   Thead,
@@ -18,6 +19,7 @@ import {
   Badge,
   Loader,
 } from '@strapi/design-system';
+import { CaretUp, CaretDown } from '@strapi/icons';
 import { useFetchClient } from '@strapi/strapi/admin';
 
 const PLUGIN_ID = 'strapi-content-sync-pro';
@@ -66,6 +68,18 @@ const BulkTransferTab = ({ syncMode = 'paired' }) => {
   // 'history' shows the persisted previous-runs table.
   const [subTab, setSubTab] = useState('run');
 
+  // Chunk table filters + sort
+  const [chunkSearch, setChunkSearch] = useState('');
+  const [chunkKindFilter, setChunkKindFilter] = useState('');
+  const [chunkStatusFilter, setChunkStatusFilter] = useState('');
+  const [chunkSortField, setChunkSortField] = useState('');
+  const [chunkSortDir, setChunkSortDir] = useState('asc');
+
+  // History table filters + sort
+  const [historySearch, setHistorySearch] = useState('');
+  const [historySortField, setHistorySortField] = useState('');
+  const [historySortDir, setHistorySortDir] = useState('asc');
+
   const pollRef = useRef(null);
 
   const scopeCount = Object.values(scopes).filter(Boolean).length;
@@ -354,6 +368,77 @@ const BulkTransferTab = ({ syncMode = 'paired' }) => {
   const isActive = isRunning || isPaused;
   const isTerminal = job && ['success', 'partial', 'cancelled', 'error'].includes(job.status);
 
+  // Derived chunk list (filter + sort)
+  const displayedChunks = useMemo(() => {
+    let result = [...chunkRows];
+    if (chunkSearch.trim()) {
+      const q = chunkSearch.trim().toLowerCase();
+      result = result.filter(
+        (c) => (c.label || '').toLowerCase().includes(q) || (c.kind || '').toLowerCase().includes(q)
+      );
+    }
+    if (chunkKindFilter) {
+      result = result.filter((c) => (c.kind || '') === chunkKindFilter);
+    }
+    if (chunkStatusFilter) {
+      result = result.filter((c) => (c.status || '') === chunkStatusFilter);
+    }
+    if (chunkSortField) {
+      result.sort((a, b) => {
+        const aVal = a[chunkSortField] ?? '';
+        const bVal = b[chunkSortField] ?? '';
+        if (typeof aVal === 'string') {
+          return chunkSortDir === 'asc' ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
+        }
+        return chunkSortDir === 'asc' ? aVal - bVal : bVal - aVal;
+      });
+    }
+    return result;
+  }, [chunkRows, chunkSearch, chunkKindFilter, chunkStatusFilter, chunkSortField, chunkSortDir]);
+
+  // Derived history list (filter + sort)
+  const displayedHistory = useMemo(() => {
+    let result = [...history];
+    if (historySearch.trim()) {
+      const q = historySearch.trim().toLowerCase();
+      result = result.filter((h) => (h.direction || '').toLowerCase().includes(q) || (h.status || '').toLowerCase().includes(q));
+    }
+    if (historySortField) {
+      result.sort((a, b) => {
+        const aVal = a[historySortField] ?? '';
+        const bVal = b[historySortField] ?? '';
+        if (typeof aVal === 'string') {
+          return historySortDir === 'asc' ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
+        }
+        return historySortDir === 'asc' ? aVal - bVal : bVal - aVal;
+      });
+    }
+    return result;
+  }, [history, historySearch, historySortField, historySortDir]);
+
+  const handleChunkSort = (field) => {
+    if (chunkSortField === field) setChunkSortDir((d) => (d === 'asc' ? 'desc' : 'asc'));
+    else { setChunkSortField(field); setChunkSortDir('asc'); }
+  };
+
+  const handleHistorySort = (field) => {
+    if (historySortField === field) setHistorySortDir((d) => (d === 'asc' ? 'desc' : 'asc'));
+    else { setHistorySortField(field); setHistorySortDir('asc'); }
+  };
+
+  const SortableTh = ({ field, onSort, sortF, sortD, style, children }) => (
+    <Th onClick={() => onSort(field)} style={{ cursor: 'pointer', userSelect: 'none', ...style }}>
+      <Flex alignItems="center" gap={1}>
+        <Typography variant="sigma">{children}</Typography>
+        {sortF === field && (sortD === 'asc' ? <CaretUp /> : <CaretDown />)}
+      </Flex>
+    </Th>
+  );
+
+  // Chunk kind options from current rows
+  const chunkKindOptions = useMemo(() => [...new Set(chunkRows.map((c) => c.kind).filter(Boolean))], [chunkRows]);
+  const chunkStatusOptions = useMemo(() => [...new Set(chunkRows.map((c) => c.status).filter(Boolean))], [chunkRows]);
+
   const jobStats = useMemo(() => {
     if (!job) return null;
     const totals = (job.chunks || []).reduce(
@@ -605,6 +690,56 @@ const BulkTransferTab = ({ syncMode = 'paired' }) => {
             {job ? `Chunks (${job.cursor}/${job.total})` : `Planned Chunks (${preview?.total || chunkRows.length})`}
           </Typography>
           <Box paddingTop={2}>
+            {/* Chunk filter bar */}
+            <Flex gap={2} wrap="wrap" marginBottom={2} alignItems="flex-end">
+              <Box style={{ flex: '1 1 180px', minWidth: 150 }}>
+                <TextInput
+                  placeholder="Search target or kind…"
+                  value={chunkSearch}
+                  onChange={(e) => setChunkSearch(e.target.value)}
+                  label="Search"
+                  size="S"
+                />
+              </Box>
+              {chunkKindOptions.length > 1 && (
+                <Box style={{ minWidth: 130 }}>
+                  <SingleSelect
+                    placeholder="All kinds"
+                    value={chunkKindFilter}
+                    onChange={setChunkKindFilter}
+                    onClear={() => setChunkKindFilter('')}
+                    size="S"
+                    label="Kind"
+                  >
+                    {chunkKindOptions.map((k) => (
+                      <SingleSelectOption key={k} value={k}>{k}</SingleSelectOption>
+                    ))}
+                  </SingleSelect>
+                </Box>
+              )}
+              {job && chunkStatusOptions.length > 1 && (
+                <Box style={{ minWidth: 130 }}>
+                  <SingleSelect
+                    placeholder="All statuses"
+                    value={chunkStatusFilter}
+                    onChange={setChunkStatusFilter}
+                    onClear={() => setChunkStatusFilter('')}
+                    size="S"
+                    label="Status"
+                  >
+                    {chunkStatusOptions.map((s) => (
+                      <SingleSelectOption key={s} value={s}>{s}</SingleSelectOption>
+                    ))}
+                  </SingleSelect>
+                </Box>
+              )}
+              {(chunkSearch || chunkKindFilter || chunkStatusFilter) && (
+                <Button variant="tertiary" size="S" onClick={() => { setChunkSearch(''); setChunkKindFilter(''); setChunkStatusFilter(''); }}>
+                  Clear
+                </Button>
+              )}
+            </Flex>
+
             <Table>
               <Thead>
                 <Tr>
@@ -618,17 +753,23 @@ const BulkTransferTab = ({ syncMode = 'paired' }) => {
                       <Typography variant="sigma">Run</Typography>
                     )}
                   </Th>
-                  <Th style={{ width: 60 }}><Typography variant="sigma">#</Typography></Th>
-                  <Th><Typography variant="sigma">Kind</Typography></Th>
-                  <Th><Typography variant="sigma">Target</Typography></Th>
-                  <Th><Typography variant="sigma">Status</Typography></Th>
+                  <SortableTh field="index" onSort={handleChunkSort} sortF={chunkSortField} sortD={chunkSortDir} style={{ width: 60 }}>#</SortableTh>
+                  <SortableTh field="kind" onSort={handleChunkSort} sortF={chunkSortField} sortD={chunkSortDir}>Kind</SortableTh>
+                  <SortableTh field="label" onSort={handleChunkSort} sortF={chunkSortField} sortD={chunkSortDir}>Target</SortableTh>
+                  <SortableTh field="status" onSort={handleChunkSort} sortF={chunkSortField} sortD={chunkSortDir}>Status</SortableTh>
                   <Th><Typography variant="sigma">Page</Typography></Th>
                   <Th><Typography variant="sigma">Pushed / Pulled</Typography></Th>
                   <Th><Typography variant="sigma">Notes</Typography></Th>
                 </Tr>
               </Thead>
               <Tbody>
-                {chunkRows.map((c) => {
+                {displayedChunks.length === 0 ? (
+                  <Tr>
+                    <Td colSpan={8}>
+                      <Typography textColor="neutral500">No chunks match the current filters.</Typography>
+                    </Td>
+                  </Tr>
+                ) : displayedChunks.map((c) => {
                   const pageLabel = c.pagesTotal
                     ? `${c.page || 0}/${c.pagesTotal}`
                     : c.page
@@ -666,17 +807,17 @@ const BulkTransferTab = ({ syncMode = 'paired' }) => {
                       <Td><Typography variant="pi">{pageLabel}</Typography></Td>
                       <Td><Typography variant="pi">{pushPullLabel}</Typography></Td>
                       <Td>
-                        {c.error && <Typography textColor="danger600" variant="pi">{c.error}</Typography>}
-                        {!c.error && c.warning && <Typography textColor="warning600" variant="pi">{c.warning}</Typography>}
-                      </Td>
-                    </Tr>
-                  );
-                })}
-              </Tbody>
-            </Table>
-          </Box>
-        </Box>
-      )}
+                                        {c.error && <Typography textColor="danger600" variant="pi">{c.error}</Typography>}
+                                          {!c.error && c.warning && <Typography textColor="warning600" variant="pi">{c.warning}</Typography>}
+                                        </Td>
+                                      </Tr>
+                                    );
+                                  })}
+                                </Tbody>
+                              </Table>
+                            </Box>
+                          </Box>
+                        )}
 
       {job && job.status && job.status !== 'running' && (
         <Box paddingTop={4}>
@@ -707,6 +848,24 @@ const BulkTransferTab = ({ syncMode = 'paired' }) => {
           Paused, cancelled, and completed runs are preserved here. Restart a run from scratch
           using the same chunk selection, or load its selection into the Run Transfer tab to tweak.
         </Typography>
+
+        {history.length > 0 && (
+          <Flex gap={2} wrap="wrap" marginTop={3} marginBottom={2} alignItems="flex-end">
+            <Box style={{ flex: '1 1 180px', minWidth: 150 }}>
+              <TextInput
+                placeholder="Search direction or status…"
+                value={historySearch}
+                onChange={(e) => setHistorySearch(e.target.value)}
+                label="Search"
+                size="S"
+              />
+            </Box>
+            {historySearch && (
+              <Button variant="tertiary" size="S" onClick={() => setHistorySearch('')}>Clear</Button>
+            )}
+          </Flex>
+        )}
+
         <Box paddingTop={2}>
           {history.length === 0 ? (
             <Typography variant="pi" textColor="neutral500">No previous runs yet.</Typography>
@@ -714,15 +873,21 @@ const BulkTransferTab = ({ syncMode = 'paired' }) => {
             <Table>
               <Thead>
                 <Tr>
-                  <Th><Typography variant="sigma">When</Typography></Th>
-                  <Th><Typography variant="sigma">Direction</Typography></Th>
-                  <Th><Typography variant="sigma">Status</Typography></Th>
+                  <SortableTh field="startedAt" onSort={handleHistorySort} sortF={historySortField} sortD={historySortDir}>When</SortableTh>
+                  <SortableTh field="direction" onSort={handleHistorySort} sortF={historySortField} sortD={historySortDir}>Direction</SortableTh>
+                  <SortableTh field="status" onSort={handleHistorySort} sortF={historySortField} sortD={historySortDir}>Status</SortableTh>
                   <Th><Typography variant="sigma">Chunks</Typography></Th>
                   <Th><Typography variant="sigma">Actions</Typography></Th>
                 </Tr>
               </Thead>
               <Tbody>
-                {history.map((h) => {
+                {displayedHistory.length === 0 ? (
+                  <Tr>
+                    <Td colSpan={5}>
+                      <Typography textColor="neutral500">No runs match the search.</Typography>
+                    </Td>
+                  </Tr>
+                ) : displayedHistory.map((h) => {
                   const selCount = (h.chunks || []).filter((c) => c.selected !== false).length;
                   const doneCount = (h.chunks || []).filter(
                     (c) => c.status === 'success' || c.status === 'partial'

package/admin/src/components/ContentTypesTab.jsx

@@ -7,6 +7,7 @@ import {
   Alert,
   Switch,
   Badge,
+  TextInput,
 } from '@strapi/design-system';
 import { useFetchClient } from '@strapi/strapi/admin';
 
@@ -20,6 +21,7 @@ const ContentTypesTab = () => {
   const [profiles, setProfiles] = useState([]);
   const [loading, setLoading] = useState(true);
   const [message, setMessage] = useState(null);
+  const [search, setSearch] = useState('');
 
   useEffect(() => {
     loadData();
@@ -110,8 +112,25 @@ const ContentTypesTab = () => {
         </Box>
       )}
 
+      <Box paddingBottom={4}>
+        <TextInput
+          placeholder="Search by name or UID…"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          label="Search"
+          size="S"
+          style={{ maxWidth: 320 }}
+        />
+      </Box>
+
       <Box>
-        {contentTypes.map((ct) => {
+        {contentTypes
+          .filter((ct) => {
+            if (!search.trim()) return true;
+            const q = search.trim().toLowerCase();
+            return (ct.displayName || '').toLowerCase().includes(q) || ct.uid.toLowerCase().includes(q);
+          })
+          .map((ct) => {
           const enabled = isEnabled(ct.uid);
           const activeProfile = getActiveProfile(ct.uid);
           const profileCount = getProfileCount(ct.uid);
@@ -151,6 +170,14 @@ const ContentTypesTab = () => {
             </Box>
           );
         })}
+        {contentTypes.length > 0 && search.trim() && contentTypes.filter((ct) => {
+          const q = search.trim().toLowerCase();
+          return (ct.displayName || '').toLowerCase().includes(q) || ct.uid.toLowerCase().includes(q);
+        }).length === 0 && (
+          <Box padding={4} background="neutral0" hasRadius>
+            <Typography textColor="neutral500">No content types match the search.</Typography>
+          </Box>
+        )}
       </Box>
     </Box>
   );

package/admin/src/components/LogsTab.jsx

@@ -6,6 +6,7 @@ import {
   Button,
   SingleSelect,
   SingleSelectOption,
+  TextInput,
   Table,
   Thead,
   Tbody,
@@ -13,6 +14,7 @@ import {
   Td,
   Th,
 } from '@strapi/design-system';
+import { CaretUp, CaretDown } from '@strapi/icons';
 import { useFetchClient } from '@strapi/strapi/admin';
 
 const PLUGIN_ID = 'strapi-content-sync-pro';
@@ -24,6 +26,9 @@ const LogsTab = () => {
   const [meta, setMeta] = useState(null);
   const [page, setPage] = useState(1);
   const [statusFilter, setStatusFilter] = useState('');
+  const [search, setSearch] = useState('');
+  const [sortField, setSortField] = useState('');
+  const [sortDir, setSortDir] = useState('asc');
   const [loading, setLoading] = useState(true);
 
   const fetchLogs = useCallback(async () => {
@@ -46,6 +51,48 @@ const LogsTab = () => {
     fetchLogs();
   }, [fetchLogs]);
 
+  const handleSort = (field) => {
+    if (sortField === field) {
+      setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'));
+    } else {
+      setSortField(field);
+      setSortDir('asc');
+    }
+  };
+
+  const displayedLogs = (() => {
+    let result = [...logs];
+    if (search.trim()) {
+      const q = search.trim().toLowerCase();
+      result = result.filter(
+        (l) =>
+          (l.action || '').toLowerCase().includes(q) ||
+          (l.contentType || '').toLowerCase().includes(q) ||
+          (l.message || '').toLowerCase().includes(q)
+      );
+    }
+    if (sortField) {
+      result.sort((a, b) => {
+        const aVal = a[sortField] ?? '';
+        const bVal = b[sortField] ?? '';
+        if (typeof aVal === 'string') {
+          return sortDir === 'asc' ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
+        }
+        return sortDir === 'asc' ? aVal - bVal : bVal - aVal;
+      });
+    }
+    return result;
+  })();
+
+  const SortableTh = ({ field, children }) => (
+    <Th onClick={() => handleSort(field)} style={{ cursor: 'pointer', userSelect: 'none' }}>
+      <Flex alignItems="center" gap={1}>
+        <Typography variant="sigma">{children}</Typography>
+        {sortField === field && (sortDir === 'asc' ? <CaretUp /> : <CaretDown />)}
+      </Flex>
+    </Th>
+  );
+
   return (
     <Box>
       <Flex justifyContent="space-between" alignItems="center">
@@ -65,19 +112,30 @@ const LogsTab = () => {
         </Flex>
       </Flex>
 
-      <Box paddingTop={4}>
+      <Box paddingTop={3} paddingBottom={2}>
+        <TextInput
+          placeholder="Search action, content type, message…"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          label="Search"
+          size="S"
+          style={{ maxWidth: 340 }}
+        />
+      </Box>
+
+      <Box paddingTop={2}>
         <Table>
           <Thead>
             <Tr>
-              <Th><Typography variant="sigma">Time</Typography></Th>
-              <Th><Typography variant="sigma">Action</Typography></Th>
-              <Th><Typography variant="sigma">Content Type</Typography></Th>
-              <Th><Typography variant="sigma">Status</Typography></Th>
+              <SortableTh field="createdAt">Time</SortableTh>
+              <SortableTh field="action">Action</SortableTh>
+              <SortableTh field="contentType">Content Type</SortableTh>
+              <SortableTh field="status">Status</SortableTh>
               <Th><Typography variant="sigma">Message</Typography></Th>
             </Tr>
           </Thead>
           <Tbody>
-            {logs.map((log, i) => (
+            {displayedLogs.map((log, i) => (
               <Tr key={log.id || i}>
                 <Td><Typography>{new Date(log.createdAt).toLocaleString()}</Typography></Td>
                 <Td><Typography>{log.action}</Typography></Td>
@@ -96,11 +154,11 @@ const LogsTab = () => {
                 <Td><Typography>{log.message}</Typography></Td>
               </Tr>
             ))}
-            {logs.length === 0 && (
+            {displayedLogs.length === 0 && (
               <Tr>
                 <Td colSpan={5}>
                   <Typography textColor="neutral500">
-                    {loading ? 'Loading…' : 'No logs found'}
+                    {loading ? 'Loading…' : search ? 'No logs match the search.' : 'No logs found'}
                   </Typography>
                 </Td>
               </Tr>

package/admin/src/components/MediaTab.jsx

@@ -19,7 +19,7 @@ import {
   Dialog,
   IconButton,
 } from '@strapi/design-system';
-import { Pencil, Trash, Play, Check, Stop } from '@strapi/icons';
+import { Pencil, Trash, Play, Check, Stop, CaretUp, CaretDown } from '@strapi/icons';
 import { useFetchClient } from '@strapi/strapi/admin';
 
 const PLUGIN_ID = 'strapi-content-sync-pro';
@@ -103,6 +103,13 @@ const MediaTab = () => {
   const [editProfile, setEditProfile] = useState(null);
   const [editMode, setEditMode] = useState(null); // 'create' | 'edit'
 
+  // Profile list filter + sort
+  const [profileSearch, setProfileSearch] = useState('');
+  const [profileStrategyFilter, setProfileStrategyFilter] = useState('');
+  const [profileDirectionFilter, setProfileDirectionFilter] = useState('');
+  const [profileSortField, setProfileSortField] = useState('name');
+  const [profileSortDir, setProfileSortDir] = useState('asc');
+
   const reload = async () => {
     try {
       const [pRes, gRes, sRes, dRes] = await Promise.all([
@@ -275,6 +282,51 @@ const MediaTab = () => {
   const ep = editProfile || {};
   const updateEp = (patch) => setEditProfile((p) => ({ ...p, ...patch }));
 
+  const handleProfileSort = (field) => {
+    if (profileSortField === field) {
+      setProfileSortDir((d) => (d === 'asc' ? 'desc' : 'asc'));
+    } else {
+      setProfileSortField(field);
+      setProfileSortDir('asc');
+    }
+  };
+
+  const displayedProfiles = (() => {
+    let result = [...profiles];
+    if (profileSearch.trim()) {
+      const q = profileSearch.trim().toLowerCase();
+      result = result.filter((p) => (p.name || '').toLowerCase().includes(q));
+    }
+    if (profileStrategyFilter) {
+      result = result.filter((p) => p.strategy === profileStrategyFilter);
+    }
+    if (profileDirectionFilter) {
+      result = result.filter((p) => p.direction === profileDirectionFilter);
+    }
+    result.sort((a, b) => {
+      let aVal = a[profileSortField] ?? '';
+      let bVal = b[profileSortField] ?? '';
+      if (typeof aVal === 'boolean') { aVal = aVal ? 1 : 0; bVal = bVal ? 1 : 0; }
+      if (typeof aVal === 'string') {
+        return profileSortDir === 'asc' ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
+      }
+      return profileSortDir === 'asc' ? aVal - bVal : bVal - aVal;
+    });
+    return result;
+  })();
+
+  const SortableCol = ({ field, style, children }) => (
+    <Box
+      style={{ ...style, cursor: 'pointer', userSelect: 'none' }}
+      onClick={() => handleProfileSort(field)}
+    >
+      <Flex alignItems="center" gap={1}>
+        <Typography variant="sigma">{children}</Typography>
+        {profileSortField === field && (profileSortDir === 'asc' ? <CaretUp /> : <CaretDown />)}
+      </Flex>
+    </Box>
+  );
+
   return (
     <Box padding={4}>
       <Box paddingBottom={4}>
@@ -317,17 +369,71 @@ const MediaTab = () => {
               </Box>
             ) : (
               <Box>
+                {/* Filter bar */}
+                <Flex gap={3} wrap="wrap" marginBottom={3} alignItems="flex-end">
+                  <Box style={{ flex: '1 1 180px', minWidth: 160 }}>
+                    <TextInput
+                      placeholder="Search by name…"
+                      value={profileSearch}
+                      onChange={(e) => setProfileSearch(e.target.value)}
+                      label="Search"
+                      size="S"
+                    />
+                  </Box>
+                  <Box style={{ minWidth: 160 }}>
+                    <SingleSelect
+                      placeholder="All strategies"
+                      value={profileStrategyFilter}
+                      onChange={setProfileStrategyFilter}
+                      onClear={() => setProfileStrategyFilter('')}
+                      size="S"
+                      label="Strategy"
+                    >
+                      <SingleSelectOption value="url">URL</SingleSelectOption>
+                      <SingleSelectOption value="rsync">rsync</SingleSelectOption>
+                      <SingleSelectOption value="disabled">Disabled</SingleSelectOption>
+                    </SingleSelect>
+                  </Box>
+                  <Box style={{ minWidth: 160 }}>
+                    <SingleSelect
+                      placeholder="All directions"
+                      value={profileDirectionFilter}
+                      onChange={setProfileDirectionFilter}
+                      onClear={() => setProfileDirectionFilter('')}
+                      size="S"
+                      label="Direction"
+                    >
+                      <SingleSelectOption value="push">Push</SingleSelectOption>
+                      <SingleSelectOption value="pull">Pull</SingleSelectOption>
+                      <SingleSelectOption value="both">Both</SingleSelectOption>
+                    </SingleSelect>
+                  </Box>
+                  {(profileSearch || profileStrategyFilter || profileDirectionFilter) && (
+                    <Button
+                      variant="tertiary"
+                      size="S"
+                      onClick={() => { setProfileSearch(''); setProfileStrategyFilter(''); setProfileDirectionFilter(''); }}
+                    >
+                      Clear filters
+                    </Button>
+                  )}
+                </Flex>
+
                 {/* Header */}
                 <Flex background="neutral100" padding={3} hasRadius style={{ fontWeight: 600 }}>
-                  <Box style={{ flex: 2 }}><Typography variant="sigma">Name</Typography></Box>
-                  <Box style={{ flex: 1 }}><Typography variant="sigma">Strategy</Typography></Box>
-                  <Box style={{ flex: 1 }}><Typography variant="sigma">Direction</Typography></Box>
-                  <Box style={{ flex: 1 }}><Typography variant="sigma">Conflict</Typography></Box>
-                  <Box style={{ flex: 1 }}><Typography variant="sigma">Execution</Typography></Box>
+                  <SortableCol field="name" style={{ flex: 2 }}>Name</SortableCol>
+                  <SortableCol field="strategy" style={{ flex: 1 }}>Strategy</SortableCol>
+                  <SortableCol field="direction" style={{ flex: 1 }}>Direction</SortableCol>
+                  <SortableCol field="conflictStrategy" style={{ flex: 1 }}>Conflict</SortableCol>
+                  <SortableCol field="executionMode" style={{ flex: 1 }}>Execution</SortableCol>
                   <Box style={{ flex: 1 }}><Typography variant="sigma">Sync Scope</Typography></Box>
                   <Box style={{ width: 180 }}><Typography variant="sigma">Actions</Typography></Box>
                 </Flex>
-                {profiles.map((p) => (
+                {displayedProfiles.length === 0 ? (
+                  <Box padding={4}>
+                    <Typography textColor="neutral500">No profiles match the current filters.</Typography>
+                  </Box>
+                ) : displayedProfiles.map((p) => (
                   <Flex key={p.id} padding={3} borderColor="neutral150" style={{ borderBottom: '1px solid #eee' }} alignItems="center">
                     <Box style={{ flex: 2 }}>
                       <Flex gap={2} alignItems="center">