From 648e2bb2dde615a06d49795753b0cef643470dbe Mon Sep 17 00:00:00 2001
From: SergeantPanda <chester.cullen@gmail.com>
Date: Sun, 31 Aug 2025 09:50:37 -0500
Subject: [PATCH] Applied our Prettier formatting to all frontend code.

---
 frontend/src/components/Sidebar.jsx           |   96 +-
 .../src/components/forms/ChannelBatch.jsx     |   19 +-
 .../src/components/forms/ChannelGroup.jsx     |    5 +-
 .../src/components/forms/GroupManager.jsx     | 1217 +++++++++--------
 frontend/src/components/forms/M3U.jsx         |    5 +-
 frontend/src/components/forms/M3UProfiles.jsx |    6 +-
 frontend/src/components/forms/User.jsx        |    6 +-
 .../components/tables/ChannelTableStreams.jsx |  145 +-
 .../src/components/tables/ChannelsTable.jsx   |  141 +-
 .../ChannelsTable/ChannelTableHeader.jsx      |    3 +-
 frontend/src/components/tables/EPGsTable.jsx  |   20 +-
 .../src/components/tables/StreamsTable.jsx    |   35 +-
 frontend/src/helpers/index.jsx                |    2 +-
 frontend/src/pages/Channels.jsx               |    9 +-
 frontend/src/pages/ContentSources.jsx         |    3 +-
 frontend/src/pages/Dashboard.jsx              |    4 +-
 frontend/src/pages/Guide.jsx                  |  207 +--
 frontend/src/pages/Home.jsx                   |    4 +-
 frontend/src/pages/Settings.jsx               |   46 +-
 frontend/src/store/channels.jsx               |   17 +-
 frontend/src/store/channelsTable.jsx          |    3 +-
 frontend/src/store/epgs.jsx                   |   26 +-
 frontend/src/store/useVODStore.jsx            |  665 ++++-----
 frontend/src/store/userAgents.jsx             |   12 +-
 frontend/src/store/warnings.jsx               |   40 +-
 25 files changed, 1492 insertions(+), 1244 deletions(-)

diff --git a/frontend/src/components/Sidebar.jsx b/frontend/src/components/Sidebar.jsx
index 998bc768..6f854d2b 100644
--- a/frontend/src/components/Sidebar.jsx
+++ b/frontend/src/components/Sidebar.jsx
@@ -93,55 +93,55 @@ const Sidebar = ({ collapsed, toggleDrawer, drawerWidth, miniDrawerWidth }) => {
   const navItems =
     authUser && authUser.user_level == USER_LEVELS.ADMIN
       ? [
-        {
-          label: 'Channels',
-          icon: <ListOrdered size={20} />,
-          path: '/channels',
-          badge: `(${Object.keys(channels).length})`,
-        },
-        {
-          label: 'VODs',
-          path: '/vods',
-          icon: <Video size={20} />,
-        },
-        {
-          label: 'M3U & EPG Manager',
-          icon: <Play size={20} />,
-          path: '/sources',
-        },
-        { label: 'TV Guide', icon: <LayoutGrid size={20} />, path: '/guide' },
-        { label: 'DVR', icon: <Database size={20} />, path: '/dvr' },
-        { label: 'Stats', icon: <ChartLine size={20} />, path: '/stats' },
-        {
-          label: 'Users',
-          icon: <User size={20} />,
-          path: '/users',
-        },
-        {
-          label: 'Logo Manager',
-          icon: <FileImage size={20} />,
-          path: '/logos',
-        },
-        {
-          label: 'Settings',
-          icon: <LucideSettings size={20} />,
-          path: '/settings',
-        },
-      ]
+          {
+            label: 'Channels',
+            icon: <ListOrdered size={20} />,
+            path: '/channels',
+            badge: `(${Object.keys(channels).length})`,
+          },
+          {
+            label: 'VODs',
+            path: '/vods',
+            icon: <Video size={20} />,
+          },
+          {
+            label: 'M3U & EPG Manager',
+            icon: <Play size={20} />,
+            path: '/sources',
+          },
+          { label: 'TV Guide', icon: <LayoutGrid size={20} />, path: '/guide' },
+          { label: 'DVR', icon: <Database size={20} />, path: '/dvr' },
+          { label: 'Stats', icon: <ChartLine size={20} />, path: '/stats' },
+          {
+            label: 'Users',
+            icon: <User size={20} />,
+            path: '/users',
+          },
+          {
+            label: 'Logo Manager',
+            icon: <FileImage size={20} />,
+            path: '/logos',
+          },
+          {
+            label: 'Settings',
+            icon: <LucideSettings size={20} />,
+            path: '/settings',
+          },
+        ]
       : [
-        {
-          label: 'Channels',
-          icon: <ListOrdered size={20} />,
-          path: '/channels',
-          badge: `(${Object.keys(channels).length})`,
-        },
-        { label: 'TV Guide', icon: <LayoutGrid size={20} />, path: '/guide' },
-        {
-          label: 'Settings',
-          icon: <LucideSettings size={20} />,
-          path: '/settings',
-        },
-      ];
+          {
+            label: 'Channels',
+            icon: <ListOrdered size={20} />,
+            path: '/channels',
+            badge: `(${Object.keys(channels).length})`,
+          },
+          { label: 'TV Guide', icon: <LayoutGrid size={20} />, path: '/guide' },
+          {
+            label: 'Settings',
+            icon: <LucideSettings size={20} />,
+            path: '/settings',
+          },
+        ];
 
   // Fetch environment settings including version on component mount
   useEffect(() => {
diff --git a/frontend/src/components/forms/ChannelBatch.jsx b/frontend/src/components/forms/ChannelBatch.jsx
index 693ebb11..0e13a6b7 100644
--- a/frontend/src/components/forms/ChannelBatch.jsx
+++ b/frontend/src/components/forms/ChannelBatch.jsx
@@ -58,7 +58,7 @@ const ChannelBatchForm = ({ channelIds, isOpen, onClose }) => {
 
     const values = {
       ...form.getValues(),
-    };    // Handle channel group ID - convert to integer if it exists
+    }; // Handle channel group ID - convert to integer if it exists
     if (selectedChannelGroup && selectedChannelGroup !== '-1') {
       values.channel_group_id = parseInt(selectedChannelGroup);
     } else {
@@ -68,7 +68,10 @@ const ChannelBatchForm = ({ channelIds, isOpen, onClose }) => {
     // Handle stream profile ID - convert special values
     if (!values.stream_profile_id || values.stream_profile_id === '-1') {
       delete values.stream_profile_id;
-    } else if (values.stream_profile_id === '0' || values.stream_profile_id === 0) {
+    } else if (
+      values.stream_profile_id === '0' ||
+      values.stream_profile_id === 0
+    ) {
       values.stream_profile_id = null; // Convert "use default" to null
     }
 
@@ -84,7 +87,7 @@ const ChannelBatchForm = ({ channelIds, isOpen, onClose }) => {
       // Refresh both the channels table data and the main channels store
       await Promise.all([
         API.requeryChannels(),
-        useChannelsStore.getState().fetchChannels()
+        useChannelsStore.getState().fetchChannels(),
       ]);
       onClose();
     } catch (error) {
@@ -131,7 +134,7 @@ const ChannelBatchForm = ({ channelIds, isOpen, onClose }) => {
     { id: '-1', name: '(no change)' },
     ...groupOptions.filter((group) =>
       group.name.toLowerCase().includes(groupFilter.toLowerCase())
-    )
+    ),
   ];
 
   if (!isOpen) {
@@ -172,8 +175,10 @@ const ChannelBatchForm = ({ channelIds, isOpen, onClose }) => {
                       key={form.key('channel_group')}
                       onClick={() => setGroupPopoverOpened(true)}
                       size="xs"
-                      style={{ flex: 1 }} rightSection={
-                        form.getValues().channel_group && form.getValues().channel_group !== '(no change)' && (
+                      style={{ flex: 1 }}
+                      rightSection={
+                        form.getValues().channel_group &&
+                        form.getValues().channel_group !== '(no change)' && (
                           <ActionIcon
                             size="xs"
                             variant="subtle"
@@ -282,7 +287,7 @@ const ChannelBatchForm = ({ channelIds, isOpen, onClose }) => {
                 key={form.key('stream_profile_id')}
                 data={[
                   { value: '-1', label: '(no change)' },
-                  { value: '0', label: '(use default)' }
+                  { value: '0', label: '(use default)' },
                 ].concat(
                   streamProfiles.map((option) => ({
                     value: `${option.id}`,
diff --git a/frontend/src/components/forms/ChannelGroup.jsx b/frontend/src/components/forms/ChannelGroup.jsx
index 46641fb1..af7e992d 100644
--- a/frontend/src/components/forms/ChannelGroup.jsx
+++ b/frontend/src/components/forms/ChannelGroup.jsx
@@ -38,7 +38,10 @@ const ChannelGroup = ({ channelGroup = null, isOpen, onClose }) => {
     let newGroup;
 
     if (channelGroup) {
-      newGroup = await API.updateChannelGroup({ id: channelGroup.id, ...values });
+      newGroup = await API.updateChannelGroup({
+        id: channelGroup.id,
+        ...values,
+      });
     } else {
       newGroup = await API.addChannelGroup(values);
     }
diff --git a/frontend/src/components/forms/GroupManager.jsx b/frontend/src/components/forms/GroupManager.jsx
index 1e52d2c8..adcd55d3 100644
--- a/frontend/src/components/forms/GroupManager.jsx
+++ b/frontend/src/components/forms/GroupManager.jsx
@@ -1,32 +1,32 @@
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import {
-    Modal,
-    Stack,
-    Group,
-    Text,
-    TextInput,
-    Button,
-    ActionIcon,
-    Flex,
-    Badge,
-    Alert,
-    Divider,
-    ScrollArea,
-    useMantineTheme,
-    Chip,
-    Box,
+  Modal,
+  Stack,
+  Group,
+  Text,
+  TextInput,
+  Button,
+  ActionIcon,
+  Flex,
+  Badge,
+  Alert,
+  Divider,
+  ScrollArea,
+  useMantineTheme,
+  Chip,
+  Box,
 } from '@mantine/core';
 import {
-    SquarePlus,
-    SquarePen,
-    SquareMinus,
-    Check,
-    X,
-    AlertCircle,
-    Database,
-    Tv,
-    Trash,
-    Filter
+  SquarePlus,
+  SquarePen,
+  SquareMinus,
+  Check,
+  X,
+  AlertCircle,
+  Database,
+  Tv,
+  Trash,
+  Filter,
 } from 'lucide-react';
 import { notifications } from '@mantine/notifications';
 import useChannelsStore from '../../store/channels';
@@ -35,7 +35,8 @@ import ConfirmationDialog from '../ConfirmationDialog';
 import API from '../../api';
 
 // Move GroupItem outside to prevent recreation on every render
-const GroupItem = React.memo(({
+const GroupItem = React.memo(
+  ({
     group,
     editingGroup,
     editName,
@@ -46,626 +47,684 @@ const GroupItem = React.memo(({
     onDelete,
     groupUsage,
     canEditGroup,
-    canDeleteGroup
-}) => {
+    canDeleteGroup,
+  }) => {
     const theme = useMantineTheme();
 
     const getGroupBadges = (group) => {
-        const usage = groupUsage[group.id];
-        const badges = [];
+      const usage = groupUsage[group.id];
+      const badges = [];
 
-        if (usage?.hasChannels) {
-            badges.push(
-                <Badge key="channels" size="xs" color="blue" leftSection={<Tv size={10} />}>
-                    Channels
-                </Badge>
-            );
-        }
+      if (usage?.hasChannels) {
+        badges.push(
+          <Badge
+            key="channels"
+            size="xs"
+            color="blue"
+            leftSection={<Tv size={10} />}
+          >
+            Channels
+          </Badge>
+        );
+      }
 
-        if (usage?.hasM3UAccounts) {
-            badges.push(
-                <Badge key="m3u" size="xs" color="purple" leftSection={<Database size={10} />}>
-                    M3U
-                </Badge>
-            );
-        }
+      if (usage?.hasM3UAccounts) {
+        badges.push(
+          <Badge
+            key="m3u"
+            size="xs"
+            color="purple"
+            leftSection={<Database size={10} />}
+          >
+            M3U
+          </Badge>
+        );
+      }
 
-        return badges;
+      return badges;
     };
 
     return (
-        <Box
-            style={{
-                border: '1px solid #444',
-                borderRadius: '8px',
-                backgroundColor: editingGroup === group.id ? '#3f3f46' : (group.enabled ? '#2A2A2E' : '#1E1E22'),
-                padding: '8px',
-                marginBottom: '2px',
-            }}
-        >
-            <Group justify="space-between" gap="xs" align="flex-start">
-                <Stack gap={4} style={{ flex: 1 }}>
-                    {editingGroup === group.id ? (
-                        <TextInput
-                            value={editName}
-                            onChange={onEditNameChange}
-                            size="sm"
-                            onKeyPress={(e) => e.key === 'Enter' && onSaveEdit()}
-                            autoFocus
-                        />
-                    ) : (
-                        <>
-                            <Text size="sm" fw={500}>{group.name}</Text>
-                            <Group gap={4}>
-                                {getGroupBadges(group)}
-                            </Group>
-                        </>
-                    )}
-                </Stack>
+      <Box
+        style={{
+          border: '1px solid #444',
+          borderRadius: '8px',
+          backgroundColor:
+            editingGroup === group.id
+              ? '#3f3f46'
+              : group.enabled
+                ? '#2A2A2E'
+                : '#1E1E22',
+          padding: '8px',
+          marginBottom: '2px',
+        }}
+      >
+        <Group justify="space-between" gap="xs" align="flex-start">
+          <Stack gap={4} style={{ flex: 1 }}>
+            {editingGroup === group.id ? (
+              <TextInput
+                value={editName}
+                onChange={onEditNameChange}
+                size="sm"
+                onKeyPress={(e) => e.key === 'Enter' && onSaveEdit()}
+                autoFocus
+              />
+            ) : (
+              <>
+                <Text size="sm" fw={500}>
+                  {group.name}
+                </Text>
+                <Group gap={4}>{getGroupBadges(group)}</Group>
+              </>
+            )}
+          </Stack>
 
-                <Group gap="xs">
-                    {editingGroup === group.id ? (
-                        <>
-                            <ActionIcon color="green" size="sm" onClick={onSaveEdit}>
-                                <Check size={14} />
-                            </ActionIcon>
-                            <ActionIcon color="gray" size="sm" onClick={onCancelEdit}>
-                                <X size={14} />
-                            </ActionIcon>
-                        </>
-                    ) : (
-                        <>
-                            <ActionIcon
-                                variant="transparent"
-                                color={theme.tailwind.yellow[3]}
-                                size="sm"
-                                onClick={() => onEdit(group)}
-                                disabled={!canEditGroup(group)}
-                            >
-                                <SquarePen size={18} />
-                            </ActionIcon>
-                            <ActionIcon
-                                variant="transparent"
-                                color={theme.tailwind.red[6]}
-                                size="sm"
-                                onClick={() => onDelete(group)}
-                                disabled={!canDeleteGroup(group)}
-                            >
-                                <SquareMinus size="18" />
-                            </ActionIcon>
-                        </>
-                    )}
-                </Group>
-            </Group>
-        </Box>
+          <Group gap="xs">
+            {editingGroup === group.id ? (
+              <>
+                <ActionIcon color="green" size="sm" onClick={onSaveEdit}>
+                  <Check size={14} />
+                </ActionIcon>
+                <ActionIcon color="gray" size="sm" onClick={onCancelEdit}>
+                  <X size={14} />
+                </ActionIcon>
+              </>
+            ) : (
+              <>
+                <ActionIcon
+                  variant="transparent"
+                  color={theme.tailwind.yellow[3]}
+                  size="sm"
+                  onClick={() => onEdit(group)}
+                  disabled={!canEditGroup(group)}
+                >
+                  <SquarePen size={18} />
+                </ActionIcon>
+                <ActionIcon
+                  variant="transparent"
+                  color={theme.tailwind.red[6]}
+                  size="sm"
+                  onClick={() => onDelete(group)}
+                  disabled={!canDeleteGroup(group)}
+                >
+                  <SquareMinus size="18" />
+                </ActionIcon>
+              </>
+            )}
+          </Group>
+        </Group>
+      </Box>
     );
-});
+  }
+);
 
 const GroupManager = React.memo(({ isOpen, onClose }) => {
-    const channelGroups = useChannelsStore((s) => s.channelGroups);
-    const canEditChannelGroup = useChannelsStore((s) => s.canEditChannelGroup);
-    const canDeleteChannelGroup = useChannelsStore((s) => s.canDeleteChannelGroup);
-    const isWarningSuppressed = useWarningsStore((s) => s.isWarningSuppressed);
-    const suppressWarning = useWarningsStore((s) => s.suppressWarning);
+  const channelGroups = useChannelsStore((s) => s.channelGroups);
+  const canEditChannelGroup = useChannelsStore((s) => s.canEditChannelGroup);
+  const canDeleteChannelGroup = useChannelsStore(
+    (s) => s.canDeleteChannelGroup
+  );
+  const isWarningSuppressed = useWarningsStore((s) => s.isWarningSuppressed);
+  const suppressWarning = useWarningsStore((s) => s.suppressWarning);
 
-    const [editingGroup, setEditingGroup] = useState(null);
-    const [editName, setEditName] = useState('');
-    const [newGroupName, setNewGroupName] = useState('');
-    const [isCreating, setIsCreating] = useState(false);
-    const [groupUsage, setGroupUsage] = useState({});
-    const [loading, setLoading] = useState(false);
-    const [searchTerm, setSearchTerm] = useState('');
-    const [isCleaningUp, setIsCleaningUp] = useState(false);
-    const [showChannelGroups, setShowChannelGroups] = useState(true);
-    const [showM3UGroups, setShowM3UGroups] = useState(true);
-    const [showUnusedGroups, setShowUnusedGroups] = useState(true);
+  const [editingGroup, setEditingGroup] = useState(null);
+  const [editName, setEditName] = useState('');
+  const [newGroupName, setNewGroupName] = useState('');
+  const [isCreating, setIsCreating] = useState(false);
+  const [groupUsage, setGroupUsage] = useState({});
+  const [loading, setLoading] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [isCleaningUp, setIsCleaningUp] = useState(false);
+  const [showChannelGroups, setShowChannelGroups] = useState(true);
+  const [showM3UGroups, setShowM3UGroups] = useState(true);
+  const [showUnusedGroups, setShowUnusedGroups] = useState(true);
 
-    // Confirmation dialog states
-    const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
-    const [groupToDelete, setGroupToDelete] = useState(null);
-    const [confirmCleanupOpen, setConfirmCleanupOpen] = useState(false);
+  // Confirmation dialog states
+  const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
+  const [groupToDelete, setGroupToDelete] = useState(null);
+  const [confirmCleanupOpen, setConfirmCleanupOpen] = useState(false);
 
-    // Memoize the channel groups array to prevent unnecessary re-renders
-    const channelGroupsArray = useMemo(() =>
-        Object.values(channelGroups),
-        [channelGroups]
-    );
+  // Memoize the channel groups array to prevent unnecessary re-renders
+  const channelGroupsArray = useMemo(
+    () => Object.values(channelGroups),
+    [channelGroups]
+  );
 
-    // Memoize sorted groups to prevent re-sorting on every render
-    const sortedGroups = useMemo(() =>
-        channelGroupsArray.sort((a, b) => a.name.localeCompare(b.name)),
-        [channelGroupsArray]
-    );
+  // Memoize sorted groups to prevent re-sorting on every render
+  const sortedGroups = useMemo(
+    () => channelGroupsArray.sort((a, b) => a.name.localeCompare(b.name)),
+    [channelGroupsArray]
+  );
 
-    // Filter groups based on search term and chip filters
-    const filteredGroups = useMemo(() => {
-        let filtered = sortedGroups;
+  // Filter groups based on search term and chip filters
+  const filteredGroups = useMemo(() => {
+    let filtered = sortedGroups;
 
-        // Apply search filter
-        if (searchTerm.trim()) {
-            filtered = filtered.filter(group =>
-                group.name.toLowerCase().includes(searchTerm.toLowerCase())
-            );
+    // Apply search filter
+    if (searchTerm.trim()) {
+      filtered = filtered.filter((group) =>
+        group.name.toLowerCase().includes(searchTerm.toLowerCase())
+      );
+    }
+
+    // Apply chip filters
+    filtered = filtered.filter((group) => {
+      const usage = groupUsage[group.id];
+      if (!usage) return false;
+
+      const hasChannels = usage.hasChannels;
+      const hasM3U = usage.hasM3UAccounts;
+      const isUnused = !hasChannels && !hasM3U;
+
+      // If group is unused, only show if unused groups are enabled
+      if (isUnused) {
+        return showUnusedGroups;
+      }
+
+      // For groups with channels and/or M3U, show if either filter is enabled
+      let shouldShow = false;
+      if (hasChannels && showChannelGroups) shouldShow = true;
+      if (hasM3U && showM3UGroups) shouldShow = true;
+
+      return shouldShow;
+    });
+
+    return filtered;
+  }, [
+    sortedGroups,
+    searchTerm,
+    showChannelGroups,
+    showM3UGroups,
+    showUnusedGroups,
+    groupUsage,
+  ]);
+
+  // Calculate filter counts
+  const filterCounts = useMemo(() => {
+    const counts = {
+      channels: 0,
+      m3u: 0,
+      unused: 0,
+    };
+
+    sortedGroups.forEach((group) => {
+      const usage = groupUsage[group.id];
+      if (usage) {
+        const hasChannels = usage.hasChannels;
+        const hasM3U = usage.hasM3UAccounts;
+
+        // Count groups with channels (including those with both)
+        if (hasChannels) {
+          counts.channels++;
         }
 
-        // Apply chip filters
-        filtered = filtered.filter(group => {
-            const usage = groupUsage[group.id];
-            if (!usage) return false;
+        // Count groups with M3U (including those with both)
+        if (hasM3U) {
+          counts.m3u++;
+        }
 
-            const hasChannels = usage.hasChannels;
-            const hasM3U = usage.hasM3UAccounts;
-            const isUnused = !hasChannels && !hasM3U;
+        // Count truly unused groups
+        if (!hasChannels && !hasM3U) {
+          counts.unused++;
+        }
+      }
+    });
 
-            // If group is unused, only show if unused groups are enabled
-            if (isUnused) {
-                return showUnusedGroups;
-            }
+    return counts;
+  }, [sortedGroups, groupUsage]);
 
-            // For groups with channels and/or M3U, show if either filter is enabled
-            let shouldShow = false;
-            if (hasChannels && showChannelGroups) shouldShow = true;
-            if (hasM3U && showM3UGroups) shouldShow = true;
+  const fetchGroupUsage = useCallback(async () => {
+    setLoading(true);
+    try {
+      // Use the actual channel group data that already has the flags
+      const usage = {};
 
-            return shouldShow;
-        });
-
-        return filtered;
-    }, [sortedGroups, searchTerm, showChannelGroups, showM3UGroups, showUnusedGroups, groupUsage]);
-
-    // Calculate filter counts
-    const filterCounts = useMemo(() => {
-        const counts = {
-            channels: 0,
-            m3u: 0,
-            unused: 0
+      Object.values(channelGroups).forEach((group) => {
+        usage[group.id] = {
+          hasChannels: group.hasChannels ?? false,
+          hasM3UAccounts: group.hasM3UAccounts ?? false,
+          canEdit: group.canEdit ?? true,
+          canDelete: group.canDelete ?? true,
         };
+      });
 
-        sortedGroups.forEach(group => {
-            const usage = groupUsage[group.id];
-            if (usage) {
-                const hasChannels = usage.hasChannels;
-                const hasM3U = usage.hasM3UAccounts;
+      setGroupUsage(usage);
+    } catch (error) {
+      console.error('Error fetching group usage:', error);
+    } finally {
+      setLoading(false);
+    }
+  }, [channelGroups]);
 
-                // Count groups with channels (including those with both)
-                if (hasChannels) {
-                    counts.channels++;
-                }
+  // Fetch group usage information when modal opens
+  useEffect(() => {
+    if (isOpen) {
+      fetchGroupUsage();
+    }
+  }, [isOpen, fetchGroupUsage]);
 
-                // Count groups with M3U (including those with both)
-                if (hasM3U) {
-                    counts.m3u++;
-                }
+  const handleEdit = useCallback((group) => {
+    setEditingGroup(group.id);
+    setEditName(group.name);
+  }, []);
 
-                // Count truly unused groups
-                if (!hasChannels && !hasM3U) {
-                    counts.unused++;
-                }
-            }
+  const handleSaveEdit = useCallback(async () => {
+    if (!editName.trim()) {
+      notifications.show({
+        title: 'Error',
+        message: 'Group name cannot be empty',
+        color: 'red',
+      });
+      return;
+    }
+
+    try {
+      await API.updateChannelGroup({
+        id: editingGroup,
+        name: editName.trim(),
+      });
+
+      notifications.show({
+        title: 'Success',
+        message: 'Group updated successfully',
+        color: 'green',
+      });
+
+      setEditingGroup(null);
+      setEditName('');
+      await fetchGroupUsage(); // Refresh usage data
+    } catch (error) {
+      notifications.show({
+        title: 'Error',
+        message: 'Failed to update group',
+        color: 'red',
+      });
+    }
+  }, [editName, editingGroup, fetchGroupUsage]);
+
+  const handleCancelEdit = useCallback(() => {
+    setEditingGroup(null);
+    setEditName('');
+  }, []);
+
+  const handleCreate = useCallback(async () => {
+    if (!newGroupName.trim()) {
+      notifications.show({
+        title: 'Error',
+        message: 'Group name cannot be empty',
+        color: 'red',
+      });
+      return;
+    }
+
+    try {
+      await API.addChannelGroup({
+        name: newGroupName.trim(),
+      });
+
+      notifications.show({
+        title: 'Success',
+        message: 'Group created successfully',
+        color: 'green',
+      });
+
+      setNewGroupName('');
+      setIsCreating(false);
+      await fetchGroupUsage(); // Refresh usage data
+    } catch (error) {
+      notifications.show({
+        title: 'Error',
+        message: 'Failed to create group',
+        color: 'red',
+      });
+    }
+  }, [newGroupName, fetchGroupUsage]);
+
+  const executeDeleteGroup = useCallback(
+    async (group) => {
+      try {
+        await API.deleteChannelGroup(group.id);
+
+        notifications.show({
+          title: 'Success',
+          message: 'Group deleted successfully',
+          color: 'green',
         });
 
-        return counts;
-    }, [sortedGroups, groupUsage]);
+        await fetchGroupUsage(); // Refresh usage data
+        setConfirmDeleteOpen(false);
+      } catch (error) {
+        notifications.show({
+          title: 'Error',
+          message: 'Failed to delete group',
+          color: 'red',
+        });
+        setConfirmDeleteOpen(false);
+      }
+    },
+    [fetchGroupUsage]
+  );
 
-    const fetchGroupUsage = useCallback(async () => {
-        setLoading(true);
-        try {
-            // Use the actual channel group data that already has the flags
-            const usage = {};
+  const handleDelete = useCallback(
+    async (group) => {
+      const usage = groupUsage[group.id];
 
-            Object.values(channelGroups).forEach(group => {
-                usage[group.id] = {
-                    hasChannels: group.hasChannels ?? false,
-                    hasM3UAccounts: group.hasM3UAccounts ?? false,
-                    canEdit: group.canEdit ?? true,
-                    canDelete: group.canDelete ?? true
-                };
-            });
+      if (
+        usage &&
+        (!usage.canDelete || usage.hasChannels || usage.hasM3UAccounts)
+      ) {
+        notifications.show({
+          title: 'Cannot Delete',
+          message:
+            'This group is associated with channels or M3U accounts and cannot be deleted',
+          color: 'orange',
+        });
+        return;
+      }
 
-            setGroupUsage(usage);
-        } catch (error) {
-            console.error('Error fetching group usage:', error);
-        } finally {
-            setLoading(false);
-        }
-    }, [channelGroups]);
+      // Store group for confirmation dialog
+      setGroupToDelete(group);
 
-    // Fetch group usage information when modal opens
-    useEffect(() => {
-        if (isOpen) {
-            fetchGroupUsage();
-        }
-    }, [isOpen, fetchGroupUsage]);
+      // Skip warning if it's been suppressed
+      if (isWarningSuppressed('delete-group')) {
+        return executeDeleteGroup(group);
+      }
 
-    const handleEdit = useCallback((group) => {
-        setEditingGroup(group.id);
-        setEditName(group.name);
-    }, []);
+      setConfirmDeleteOpen(true);
+    },
+    [groupUsage, isWarningSuppressed, executeDeleteGroup]
+  );
 
-    const handleSaveEdit = useCallback(async () => {
-        if (!editName.trim()) {
-            notifications.show({
-                title: 'Error',
-                message: 'Group name cannot be empty',
-                color: 'red',
-            });
-            return;
-        }
+  const executeCleanup = useCallback(async () => {
+    setIsCleaningUp(true);
+    try {
+      const result = await API.cleanupUnusedChannelGroups();
 
-        try {
-            await API.updateChannelGroup({
-                id: editingGroup,
-                name: editName.trim(),
-            });
+      notifications.show({
+        title: 'Cleanup Complete',
+        message: `Successfully deleted ${result.deleted_count} unused groups`,
+        color: 'green',
+      });
 
-            notifications.show({
-                title: 'Success',
-                message: 'Group updated successfully',
-                color: 'green',
-            });
+      await fetchGroupUsage(); // Refresh usage data
+      setConfirmCleanupOpen(false);
+    } catch (error) {
+      notifications.show({
+        title: 'Cleanup Failed',
+        message: 'Failed to cleanup unused groups',
+        color: 'red',
+      });
+      setConfirmCleanupOpen(false);
+    } finally {
+      setIsCleaningUp(false);
+    }
+  }, [fetchGroupUsage]);
 
-            setEditingGroup(null);
-            setEditName('');
-            await fetchGroupUsage(); // Refresh usage data
-        } catch (error) {
-            notifications.show({
-                title: 'Error',
-                message: 'Failed to update group',
-                color: 'red',
-            });
-        }
-    }, [editName, editingGroup, fetchGroupUsage]);
+  const handleCleanup = useCallback(async () => {
+    // Skip warning if it's been suppressed
+    if (isWarningSuppressed('cleanup-groups')) {
+      return executeCleanup();
+    }
 
-    const handleCancelEdit = useCallback(() => {
-        setEditingGroup(null);
-        setEditName('');
-    }, []);
+    setConfirmCleanupOpen(true);
+  }, [isWarningSuppressed, executeCleanup]);
 
-    const handleCreate = useCallback(async () => {
-        if (!newGroupName.trim()) {
-            notifications.show({
-                title: 'Error',
-                message: 'Group name cannot be empty',
-                color: 'red',
-            });
-            return;
-        }
+  const handleNewGroupNameChange = useCallback((e) => {
+    setNewGroupName(e.target.value);
+  }, []);
 
-        try {
-            await API.addChannelGroup({
-                name: newGroupName.trim(),
-            });
+  const handleEditNameChange = useCallback((e) => {
+    setEditName(e.target.value);
+  }, []);
 
-            notifications.show({
-                title: 'Success',
-                message: 'Group created successfully',
-                color: 'green',
-            });
+  const handleSearchChange = useCallback((e) => {
+    setSearchTerm(e.target.value);
+  }, []);
 
-            setNewGroupName('');
-            setIsCreating(false);
-            await fetchGroupUsage(); // Refresh usage data
-        } catch (error) {
-            notifications.show({
-                title: 'Error',
-                message: 'Failed to create group',
-                color: 'red',
-            });
-        }
-    }, [newGroupName, fetchGroupUsage]);
+  if (!isOpen) return null;
 
-    const executeDeleteGroup = useCallback(async (group) => {
-        try {
-            await API.deleteChannelGroup(group.id);
+  return (
+    <>
+      <Modal
+        opened={isOpen}
+        onClose={onClose}
+        title="Group Manager"
+        size="lg"
+        scrollAreaComponent={ScrollArea.Autosize}
+        zIndex={2000}
+      >
+        <Stack>
+          <Alert icon={<AlertCircle size={16} />} color="blue" variant="light">
+            Manage channel groups. Groups associated with M3U accounts or
+            containing channels cannot be deleted.
+          </Alert>
 
-            notifications.show({
-                title: 'Success',
-                message: 'Group deleted successfully',
-                color: 'green',
-            });
+          {/* Create new group section */}
+          <Group justify="space-between">
+            {isCreating ? (
+              <Group style={{ flex: 1 }}>
+                <TextInput
+                  placeholder="Enter group name"
+                  value={newGroupName}
+                  onChange={handleNewGroupNameChange}
+                  style={{ flex: 1 }}
+                  onKeyPress={(e) => e.key === 'Enter' && handleCreate()}
+                  autoFocus
+                />
+                <ActionIcon color="green" onClick={handleCreate}>
+                  <Check size={16} />
+                </ActionIcon>
+                <ActionIcon
+                  color="gray"
+                  onClick={() => {
+                    setIsCreating(false);
+                    setNewGroupName('');
+                  }}
+                >
+                  <X size={16} />
+                </ActionIcon>
+              </Group>
+            ) : (
+              <Button
+                leftSection={<SquarePlus size={16} />}
+                variant="light"
+                size="sm"
+                onClick={() => setIsCreating(true)}
+              >
+                Add Group
+              </Button>
+            )}
 
-            await fetchGroupUsage(); // Refresh usage data
-            setConfirmDeleteOpen(false);
-        } catch (error) {
-            notifications.show({
-                title: 'Error',
-                message: 'Failed to delete group',
-                color: 'red',
-            });
-            setConfirmDeleteOpen(false);
-        }
-    }, [fetchGroupUsage]);
+            {!isCreating && (
+              <Button
+                leftSection={<Trash size={16} />}
+                variant="light"
+                size="sm"
+                color="orange"
+                onClick={handleCleanup}
+                loading={isCleaningUp}
+              >
+                Cleanup Unused
+              </Button>
+            )}
+          </Group>
 
-    const handleDelete = useCallback(async (group) => {
-        const usage = groupUsage[group.id];
+          <Divider />
 
-        if (usage && (!usage.canDelete || usage.hasChannels || usage.hasM3UAccounts)) {
-            notifications.show({
-                title: 'Cannot Delete',
-                message: 'This group is associated with channels or M3U accounts and cannot be deleted',
-                color: 'orange',
-            });
-            return;
-        }
+          {/* Filter Controls */}
+          <Stack gap="sm">
+            <Group justify="space-between" align="center">
+              <Group align="center" gap="sm">
+                <Filter size={16} />
+                <Text size="sm" fw={600}>
+                  Filter Groups
+                </Text>
+              </Group>
+              <TextInput
+                placeholder="Search groups..."
+                value={searchTerm}
+                onChange={handleSearchChange}
+                size="sm"
+                style={{ width: '200px' }}
+                rightSection={
+                  searchTerm && (
+                    <ActionIcon
+                      size="sm"
+                      variant="subtle"
+                      onClick={() => setSearchTerm('')}
+                    >
+                      <X size={14} />
+                    </ActionIcon>
+                  )
+                }
+              />
+            </Group>
 
-        // Store group for confirmation dialog
-        setGroupToDelete(group);
+            <Group gap="xs" align="center">
+              <Text size="xs" c="dimmed">
+                Show:
+              </Text>
+              <Chip
+                checked={showChannelGroups}
+                onChange={setShowChannelGroups}
+                size="sm"
+                color="blue"
+              >
+                <Group gap={4}>
+                  <Tv size={10} />
+                  Channel Groups ({filterCounts.channels})
+                </Group>
+              </Chip>
+              <Chip
+                checked={showM3UGroups}
+                onChange={setShowM3UGroups}
+                size="sm"
+                color="purple"
+              >
+                <Group gap={4}>
+                  <Database size={10} />
+                  M3U Groups ({filterCounts.m3u})
+                </Group>
+              </Chip>
+              <Chip
+                checked={showUnusedGroups}
+                onChange={setShowUnusedGroups}
+                size="sm"
+                color="gray"
+              >
+                Unused Groups ({filterCounts.unused})
+              </Chip>
+            </Group>
+          </Stack>
 
-        // Skip warning if it's been suppressed
-        if (isWarningSuppressed('delete-group')) {
-            return executeDeleteGroup(group);
-        }
+          <Divider />
 
-        setConfirmDeleteOpen(true);
-    }, [groupUsage, isWarningSuppressed, executeDeleteGroup]);
+          {/* Existing groups */}
+          <Stack>
+            <Text size="sm" fw={600}>
+              Groups ({filteredGroups.length}
+              {(searchTerm ||
+                !showChannelGroups ||
+                !showM3UGroups ||
+                !showUnusedGroups) &&
+                ` of ${sortedGroups.length}`}
+              )
+            </Text>
 
-    const executeCleanup = useCallback(async () => {
-        setIsCleaningUp(true);
-        try {
-            const result = await API.cleanupUnusedChannelGroups();
+            {loading ? (
+              <Text size="sm" c="dimmed">
+                Loading group information...
+              </Text>
+            ) : filteredGroups.length === 0 ? (
+              <Text size="sm" c="dimmed">
+                {searchTerm ||
+                !showChannelGroups ||
+                !showM3UGroups ||
+                !showUnusedGroups
+                  ? 'No groups found matching your filters'
+                  : 'No groups found'}
+              </Text>
+            ) : (
+              <Stack gap="xs">
+                {filteredGroups.map((group) => (
+                  <GroupItem
+                    key={group.id}
+                    group={group}
+                    editingGroup={editingGroup}
+                    editName={editName}
+                    onEditNameChange={handleEditNameChange}
+                    onSaveEdit={handleSaveEdit}
+                    onCancelEdit={handleCancelEdit}
+                    onEdit={handleEdit}
+                    onDelete={handleDelete}
+                    groupUsage={groupUsage}
+                    canEditGroup={canEditChannelGroup}
+                    canDeleteGroup={canDeleteChannelGroup}
+                  />
+                ))}
+              </Stack>
+            )}
+          </Stack>
 
-            notifications.show({
-                title: 'Cleanup Complete',
-                message: `Successfully deleted ${result.deleted_count} unused groups`,
-                color: 'green',
-            });
+          <Divider />
 
-            await fetchGroupUsage(); // Refresh usage data
-            setConfirmCleanupOpen(false);
-        } catch (error) {
-            notifications.show({
-                title: 'Cleanup Failed',
-                message: 'Failed to cleanup unused groups',
-                color: 'red',
-            });
-            setConfirmCleanupOpen(false);
-        } finally {
-            setIsCleaningUp(false);
-        }
-    }, [fetchGroupUsage]);
+          <Flex justify="flex-end">
+            <Button variant="default" onClick={onClose}>
+              Close
+            </Button>
+          </Flex>
+        </Stack>
+      </Modal>
 
-    const handleCleanup = useCallback(async () => {
-        // Skip warning if it's been suppressed
-        if (isWarningSuppressed('cleanup-groups')) {
-            return executeCleanup();
-        }
-
-        setConfirmCleanupOpen(true);
-    }, [isWarningSuppressed, executeCleanup]);
-
-    const handleNewGroupNameChange = useCallback((e) => {
-        setNewGroupName(e.target.value);
-    }, []);
-
-    const handleEditNameChange = useCallback((e) => {
-        setEditName(e.target.value);
-    }, []);
-
-    const handleSearchChange = useCallback((e) => {
-        setSearchTerm(e.target.value);
-    }, []);
-
-    if (!isOpen) return null;
-
-    return (
-        <>
-            <Modal
-                opened={isOpen}
-                onClose={onClose}
-                title="Group Manager"
-                size="lg"
-                scrollAreaComponent={ScrollArea.Autosize}
-                zIndex={2000}
-            >
-                <Stack>
-                    <Alert icon={<AlertCircle size={16} />} color="blue" variant="light">
-                        Manage channel groups. Groups associated with M3U accounts or containing channels cannot be deleted.
-                    </Alert>
-
-                    {/* Create new group section */}
-                    <Group justify="space-between">
-                        {isCreating ? (
-                            <Group style={{ flex: 1 }}>
-                                <TextInput
-                                    placeholder="Enter group name"
-                                    value={newGroupName}
-                                    onChange={handleNewGroupNameChange}
-                                    style={{ flex: 1 }}
-                                    onKeyPress={(e) => e.key === 'Enter' && handleCreate()}
-                                    autoFocus
-                                />
-                                <ActionIcon color="green" onClick={handleCreate}>
-                                    <Check size={16} />
-                                </ActionIcon>
-                                <ActionIcon color="gray" onClick={() => {
-                                    setIsCreating(false);
-                                    setNewGroupName('');
-                                }}>
-                                    <X size={16} />
-                                </ActionIcon>
-                            </Group>
-                        ) : (
-                            <Button
-                                leftSection={<SquarePlus size={16} />}
-                                variant="light"
-                                size="sm"
-                                onClick={() => setIsCreating(true)}
-                            >
-                                Add Group
-                            </Button>
-                        )}
-
-                        {!isCreating && (
-                            <Button
-                                leftSection={<Trash size={16} />}
-                                variant="light"
-                                size="sm"
-                                color="orange"
-                                onClick={handleCleanup}
-                                loading={isCleaningUp}
-                            >
-                                Cleanup Unused
-                            </Button>
-                        )}
-                    </Group>
-
-                    <Divider />
-
-                    {/* Filter Controls */}
-                    <Stack gap="sm">
-                        <Group justify="space-between" align="center">
-                            <Group align="center" gap="sm">
-                                <Filter size={16} />
-                                <Text size="sm" fw={600}>Filter Groups</Text>
-                            </Group>
-                            <TextInput
-                                placeholder="Search groups..."
-                                value={searchTerm}
-                                onChange={handleSearchChange}
-                                size="sm"
-                                style={{ width: '200px' }}
-                                rightSection={searchTerm && (
-                                    <ActionIcon
-                                        size="sm"
-                                        variant="subtle"
-                                        onClick={() => setSearchTerm('')}
-                                    >
-                                        <X size={14} />
-                                    </ActionIcon>
-                                )}
-                            />
-                        </Group>
-
-                        <Group gap="xs" align="center">
-                            <Text size="xs" c="dimmed">Show:</Text>
-                            <Chip
-                                checked={showChannelGroups}
-                                onChange={setShowChannelGroups}
-                                size="sm"
-                                color="blue"
-                            >
-                                <Group gap={4}>
-                                    <Tv size={10} />
-                                    Channel Groups ({filterCounts.channels})
-                                </Group>
-                            </Chip>
-                            <Chip
-                                checked={showM3UGroups}
-                                onChange={setShowM3UGroups}
-                                size="sm"
-                                color="purple"
-                            >
-                                <Group gap={4}>
-                                    <Database size={10} />
-                                    M3U Groups ({filterCounts.m3u})
-                                </Group>
-                            </Chip>
-                            <Chip
-                                checked={showUnusedGroups}
-                                onChange={setShowUnusedGroups}
-                                size="sm"
-                                color="gray"
-                            >
-                                Unused Groups ({filterCounts.unused})
-                            </Chip>
-                        </Group>
-                    </Stack>
-
-                    <Divider />
-
-                    {/* Existing groups */}
-                    <Stack>
-                        <Text size="sm" fw={600}>
-                            Groups ({filteredGroups.length}{(searchTerm || !showChannelGroups || !showM3UGroups || !showUnusedGroups) && ` of ${sortedGroups.length}`})
-                        </Text>
-
-                        {loading ? (
-                            <Text size="sm" c="dimmed">Loading group information...</Text>
-                        ) : filteredGroups.length === 0 ? (
-                            <Text size="sm" c="dimmed">
-                                {searchTerm || !showChannelGroups || !showM3UGroups || !showUnusedGroups ? 'No groups found matching your filters' : 'No groups found'}
-                            </Text>
-                        ) : (
-                            <Stack gap="xs">
-                                {filteredGroups.map((group) => (
-                                    <GroupItem
-                                        key={group.id}
-                                        group={group}
-                                        editingGroup={editingGroup}
-                                        editName={editName}
-                                        onEditNameChange={handleEditNameChange}
-                                        onSaveEdit={handleSaveEdit}
-                                        onCancelEdit={handleCancelEdit}
-                                        onEdit={handleEdit}
-                                        onDelete={handleDelete}
-                                        groupUsage={groupUsage}
-                                        canEditGroup={canEditChannelGroup}
-                                        canDeleteGroup={canDeleteChannelGroup}
-                                    />
-                                ))}
-                            </Stack>
-                        )}
-                    </Stack>
-
-                    <Divider />
-
-                    <Flex justify="flex-end">
-                        <Button variant="default" onClick={onClose}>
-                            Close
-                        </Button>
-                    </Flex>
-                </Stack>
-            </Modal>
-
-            <ConfirmationDialog
-                opened={confirmDeleteOpen}
-                onClose={() => setConfirmDeleteOpen(false)}
-                onConfirm={() => groupToDelete && executeDeleteGroup(groupToDelete)}
-                title="Confirm Group Deletion"
-                message={
-                    groupToDelete ? (
-                        <div style={{ whiteSpace: 'pre-line' }}>
-                            {`Are you sure you want to delete the following group?
+      <ConfirmationDialog
+        opened={confirmDeleteOpen}
+        onClose={() => setConfirmDeleteOpen(false)}
+        onConfirm={() => groupToDelete && executeDeleteGroup(groupToDelete)}
+        title="Confirm Group Deletion"
+        message={
+          groupToDelete ? (
+            <div style={{ whiteSpace: 'pre-line' }}>
+              {`Are you sure you want to delete the following group?
 
 Name: ${groupToDelete.name}
 
 This action cannot be undone.`}
-                        </div>
-                    ) : (
-                        'Are you sure you want to delete this group? This action cannot be undone.'
-                    )
-                }
-                confirmLabel="Delete"
-                cancelLabel="Cancel"
-                actionKey="delete-group"
-                onSuppressChange={suppressWarning}
-                size="md"
-                zIndex={2100}
-            />
+            </div>
+          ) : (
+            'Are you sure you want to delete this group? This action cannot be undone.'
+          )
+        }
+        confirmLabel="Delete"
+        cancelLabel="Cancel"
+        actionKey="delete-group"
+        onSuppressChange={suppressWarning}
+        size="md"
+        zIndex={2100}
+      />
 
-            <ConfirmationDialog
-                opened={confirmCleanupOpen}
-                onClose={() => setConfirmCleanupOpen(false)}
-                onConfirm={executeCleanup}
-                title="Confirm Group Cleanup"
-                message={
-                    <div style={{ whiteSpace: 'pre-line' }}>
-                        {`Are you sure you want to cleanup all unused groups?
+      <ConfirmationDialog
+        opened={confirmCleanupOpen}
+        onClose={() => setConfirmCleanupOpen(false)}
+        onConfirm={executeCleanup}
+        title="Confirm Group Cleanup"
+        message={
+          <div style={{ whiteSpace: 'pre-line' }}>
+            {`Are you sure you want to cleanup all unused groups?
 
 This will permanently delete all groups that are not associated with any channels or M3U accounts.
 
 This action cannot be undone.`}
-                    </div>
-                }
-                confirmLabel="Cleanup"
-                cancelLabel="Cancel"
-                actionKey="cleanup-groups"
-                onSuppressChange={suppressWarning}
-                size="md"
-                zIndex={2100}
-            />
-        </>
-    );
+          </div>
+        }
+        confirmLabel="Cleanup"
+        cancelLabel="Cancel"
+        actionKey="cleanup-groups"
+        onSuppressChange={suppressWarning}
+        size="md"
+        zIndex={2100}
+      />
+    </>
+  );
 });
 
 export default GroupManager;
diff --git a/frontend/src/components/forms/M3U.jsx b/frontend/src/components/forms/M3U.jsx
index 8bd245b6..33c0aab9 100644
--- a/frontend/src/components/forms/M3U.jsx
+++ b/frontend/src/components/forms/M3U.jsx
@@ -413,7 +413,10 @@ const M3U = ({
                   size="sm"
                   onClick={() => {
                     // If this is an XC account with VOD enabled, fetch VOD categories
-                    if (m3uAccount?.account_type === 'XC' && m3uAccount?.enable_vod) {
+                    if (
+                      m3uAccount?.account_type === 'XC' &&
+                      m3uAccount?.enable_vod
+                    ) {
                       fetchCategories();
                     }
                     setGroupFilterModalOpen(true);
diff --git a/frontend/src/components/forms/M3UProfiles.jsx b/frontend/src/components/forms/M3UProfiles.jsx
index 163f981b..455be473 100644
--- a/frontend/src/components/forms/M3UProfiles.jsx
+++ b/frontend/src/components/forms/M3UProfiles.jsx
@@ -61,7 +61,7 @@ const M3UProfiles = ({ playlist = null, isOpen, onClose }) => {
     if (!playlist || !playlist.id) return;
 
     // Get profile details for the confirmation dialog
-    const profileObj = profiles.find(p => p.id === id);
+    const profileObj = profiles.find((p) => p.id === id);
     setProfileToDelete(profileObj);
     setDeleteTarget(id);
 
@@ -195,13 +195,13 @@ const M3UProfiles = ({ playlist = null, isOpen, onClose }) => {
             New
           </Button>
         </Flex>
-      </Modal>      <M3UProfile
+      </Modal>{' '}
+      <M3UProfile
         m3u={playlist}
         profile={profile}
         isOpen={profileEditorOpen}
         onClose={closeEditor}
       />
-
       <ConfirmationDialog
         opened={confirmDeleteOpen}
         onClose={() => setConfirmDeleteOpen(false)}
diff --git a/frontend/src/components/forms/User.jsx b/frontend/src/components/forms/User.jsx
index 6ca9eaa1..ecc21091 100644
--- a/frontend/src/components/forms/User.jsx
+++ b/frontend/src/components/forms/User.jsx
@@ -44,7 +44,7 @@ const User = ({ user = null, isOpen, onClose }) => {
       username: !values.username
         ? 'Username is required'
         : values.user_level == USER_LEVELS.STREAMER &&
-          !values.username.match(/^[a-z0-9]+$/i)
+            !values.username.match(/^[a-z0-9]+$/i)
           ? 'Streamer username must be alphanumeric'
           : null,
       password:
@@ -74,9 +74,7 @@ const User = ({ user = null, isOpen, onClose }) => {
   const onSubmit = async () => {
     const values = form.getValues();
 
-    const { ...customProps } = JSON.parse(
-      user?.custom_properties || '{}'
-    );
+    const { ...customProps } = JSON.parse(user?.custom_properties || '{}');
 
     // Always save xc_password, even if it's empty (to allow clearing)
     customProps.xc_password = values.xc_password || '';
diff --git a/frontend/src/components/tables/ChannelTableStreams.jsx b/frontend/src/components/tables/ChannelTableStreams.jsx
index 991b7074..947320dc 100644
--- a/frontend/src/components/tables/ChannelTableStreams.jsx
+++ b/frontend/src/components/tables/ChannelTableStreams.jsx
@@ -1,7 +1,13 @@
 import React, { useMemo, useState, useEffect } from 'react';
 import API from '../../api';
 import { copyToClipboard } from '../../utils';
-import { GripHorizontal, SquareMinus, ChevronDown, ChevronRight, Eye } from 'lucide-react';
+import {
+  GripHorizontal,
+  SquareMinus,
+  ChevronDown,
+  ChevronRight,
+  Eye,
+} from 'lucide-react';
 import {
   Box,
   ActionIcon,
@@ -14,7 +20,6 @@ import {
   Tooltip,
   Collapse,
   Button,
-
 } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 import {
@@ -178,23 +183,49 @@ const ChannelStreams = ({ channel, isExpanded }) => {
 
   // Helper function to categorize stream stats
   const categorizeStreamStats = (stats) => {
-    if (!stats) return { basic: {}, video: {}, audio: {}, technical: {}, other: {} };
+    if (!stats)
+      return { basic: {}, video: {}, audio: {}, technical: {}, other: {} };
 
     const categories = {
       basic: {},
       video: {},
       audio: {},
       technical: {},
-      other: {}
+      other: {},
     };
 
     // Define which stats go in which category
     const categoryMapping = {
-      basic: ['resolution', 'video_codec', 'source_fps', 'audio_codec', 'audio_channels'],
-      video: ['video_bitrate', 'pixel_format', 'width', 'height', 'aspect_ratio', 'frame_rate'],
-      audio: ['audio_bitrate', 'sample_rate', 'audio_format', 'audio_channels_layout'],
-      technical: ['stream_type', 'container_format', 'duration', 'file_size', 'ffmpeg_output_bitrate', 'input_bitrate'],
-      other: [] // Will catch anything not categorized above
+      basic: [
+        'resolution',
+        'video_codec',
+        'source_fps',
+        'audio_codec',
+        'audio_channels',
+      ],
+      video: [
+        'video_bitrate',
+        'pixel_format',
+        'width',
+        'height',
+        'aspect_ratio',
+        'frame_rate',
+      ],
+      audio: [
+        'audio_bitrate',
+        'sample_rate',
+        'audio_format',
+        'audio_channels_layout',
+      ],
+      technical: [
+        'stream_type',
+        'container_format',
+        'duration',
+        'file_size',
+        'ffmpeg_output_bitrate',
+        'input_bitrate',
+      ],
+      other: [], // Will catch anything not categorized above
     };
 
     // Categorize each stat
@@ -238,7 +269,8 @@ const ChannelStreams = ({ channel, isExpanded }) => {
         if (typeof value === 'number') {
           if (value < 1024) return `${value} B`;
           if (value < 1024 * 1024) return `${(value / 1024).toFixed(2)} KB`;
-          if (value < 1024 * 1024 * 1024) return `${(value / (1024 * 1024)).toFixed(2)} MB`;
+          if (value < 1024 * 1024 * 1024)
+            return `${(value / (1024 * 1024)).toFixed(2)} MB`;
           return `${(value / (1024 * 1024 * 1024)).toFixed(2)} GB`;
         }
         return value;
@@ -269,7 +301,10 @@ const ChannelStreams = ({ channel, isExpanded }) => {
           {Object.entries(stats).map(([key, value]) => (
             <Tooltip key={key} label={`${key}: ${formatStatValue(key, value)}`}>
               <Badge size="xs" variant="light" color="gray">
-                {key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}: {formatStatValue(key, value)}
+                {key
+                  .replace(/_/g, ' ')
+                  .replace(/\b\w/g, (l) => l.toUpperCase())}
+                : {formatStatValue(key, value)}
               </Badge>
             </Tooltip>
           ))}
@@ -304,19 +339,23 @@ const ChannelStreams = ({ channel, isExpanded }) => {
           accessorKey: 'name',
           cell: ({ row }) => {
             const stream = row.original;
-            const playlistName = playlists[stream.m3u_account]?.name || 'Unknown';
-            const accountName = m3uAccountsMap[stream.m3u_account] || playlistName;
+            const playlistName =
+              playlists[stream.m3u_account]?.name || 'Unknown';
+            const accountName =
+              m3uAccountsMap[stream.m3u_account] || playlistName;
 
             // Categorize stream stats
             const categorizedStats = categorizeStreamStats(stream.stream_stats);
-            const hasAdvancedStats = Object.values(categorizedStats).some(category =>
-              Object.keys(category).length > 0
+            const hasAdvancedStats = Object.values(categorizedStats).some(
+              (category) => Object.keys(category).length > 0
             );
 
             return (
               <Box>
                 <Group gap="xs" align="center">
-                  <Text fw={500} size="sm">{stream.name}</Text>
+                  <Text fw={500} size="sm">
+                    {stream.name}
+                  </Text>
                   <Badge size="xs" variant="light" color="teal">
                     {accountName}
                   </Badge>
@@ -338,7 +377,9 @@ const ChannelStreams = ({ channel, isExpanded }) => {
                             const success = await copyToClipboard(stream.url);
                             notifications.show({
                               title: success ? 'URL Copied' : 'Copy Failed',
-                              message: success ? 'Stream URL copied to clipboard' : 'Failed to copy URL to clipboard',
+                              message: success
+                                ? 'Stream URL copied to clipboard'
+                                : 'Failed to copy URL to clipboard',
                               color: success ? 'green' : 'red',
                             });
                           }}
@@ -351,7 +392,9 @@ const ChannelStreams = ({ channel, isExpanded }) => {
                           size="xs"
                           color="blue"
                           variant="light"
-                          onClick={() => handleWatchStream(stream.stream_hash || stream.id)}
+                          onClick={() =>
+                            handleWatchStream(stream.stream_hash || stream.id)
+                          }
                           style={{ marginLeft: 2 }}
                         >
                           <Eye size={16} />
@@ -365,16 +408,26 @@ const ChannelStreams = ({ channel, isExpanded }) => {
                 {stream.stream_stats && (
                   <Group gap="xs" mt={4} align="center">
                     {/* Video Information */}
-                    {(stream.stream_stats.video_codec || stream.stream_stats.resolution || stream.stream_stats.video_bitrate || stream.stream_stats.source_fps) && (
+                    {(stream.stream_stats.video_codec ||
+                      stream.stream_stats.resolution ||
+                      stream.stream_stats.video_bitrate ||
+                      stream.stream_stats.source_fps) && (
                       <>
-                        <Text size="xs" c="dimmed" fw={500}>Video:</Text>
+                        <Text size="xs" c="dimmed" fw={500}>
+                          Video:
+                        </Text>
                         {stream.stream_stats.resolution && (
                           <Badge size="xs" variant="light" color="red">
                             {stream.stream_stats.resolution}
                           </Badge>
                         )}
                         {stream.stream_stats.video_bitrate && (
-                          <Badge size="xs" variant="light" color="orange" style={{ textTransform: 'none' }}>
+                          <Badge
+                            size="xs"
+                            variant="light"
+                            color="orange"
+                            style={{ textTransform: 'none' }}
+                          >
                             {stream.stream_stats.video_bitrate} kbps
                           </Badge>
                         )}
@@ -392,9 +445,12 @@ const ChannelStreams = ({ channel, isExpanded }) => {
                     )}
 
                     {/* Audio Information */}
-                    {(stream.stream_stats.audio_codec || stream.stream_stats.audio_channels) && (
+                    {(stream.stream_stats.audio_codec ||
+                      stream.stream_stats.audio_channels) && (
                       <>
-                        <Text size="xs" c="dimmed" fw={500}>Audio:</Text>
+                        <Text size="xs" c="dimmed" fw={500}>
+                          Audio:
+                        </Text>
                         {stream.stream_stats.audio_channels && (
                           <Badge size="xs" variant="light" color="pink">
                             {stream.stream_stats.audio_channels}
@@ -409,11 +465,18 @@ const ChannelStreams = ({ channel, isExpanded }) => {
                     )}
 
                     {/* Output Bitrate */}
-                    {(stream.stream_stats.ffmpeg_output_bitrate) && (
+                    {stream.stream_stats.ffmpeg_output_bitrate && (
                       <>
-                        <Text size="xs" c="dimmed" fw={500}>Output Bitrate:</Text>
+                        <Text size="xs" c="dimmed" fw={500}>
+                          Output Bitrate:
+                        </Text>
                         {stream.stream_stats.ffmpeg_output_bitrate && (
-                          <Badge size="xs" variant="light" color="orange" style={{ textTransform: 'none' }}>
+                          <Badge
+                            size="xs"
+                            variant="light"
+                            color="orange"
+                            style={{ textTransform: 'none' }}
+                          >
                             {stream.stream_stats.ffmpeg_output_bitrate} kbps
                           </Badge>
                         )}
@@ -428,27 +491,47 @@ const ChannelStreams = ({ channel, isExpanded }) => {
                     <Button
                       variant="subtle"
                       size="xs"
-                      leftSection={expandedAdvancedStats.has(stream.id) ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
+                      leftSection={
+                        expandedAdvancedStats.has(stream.id) ? (
+                          <ChevronDown size={12} />
+                        ) : (
+                          <ChevronRight size={12} />
+                        )
+                      }
                       onClick={() => toggleAdvancedStats(stream.id)}
                       c="dimmed"
                     >
-                      {expandedAdvancedStats.has(stream.id) ? 'Hide' : 'Show'} Advanced Stats
+                      {expandedAdvancedStats.has(stream.id) ? 'Hide' : 'Show'}{' '}
+                      Advanced Stats
                     </Button>
                   </Group>
                 )}
 
                 {/* Advanced Stats (expandable) */}
                 <Collapse in={expandedAdvancedStats.has(stream.id)}>
-                  <Box mt="sm" p="xs" style={{ backgroundColor: 'rgba(0,0,0,0.1)', borderRadius: '4px' }}>
+                  <Box
+                    mt="sm"
+                    p="xs"
+                    style={{
+                      backgroundColor: 'rgba(0,0,0,0.1)',
+                      borderRadius: '4px',
+                    }}
+                  >
                     {renderStatsCategory('Video', categorizedStats.video)}
                     {renderStatsCategory('Audio', categorizedStats.audio)}
-                    {renderStatsCategory('Technical', categorizedStats.technical)}
+                    {renderStatsCategory(
+                      'Technical',
+                      categorizedStats.technical
+                    )}
                     {renderStatsCategory('Other', categorizedStats.other)}
 
                     {/* Show when stats were last updated */}
                     {stream.stream_stats_updated_at && (
                       <Text size="xs" c="dimmed" mt="xs">
-                        Last updated: {new Date(stream.stream_stats_updated_at).toLocaleString()}
+                        Last updated:{' '}
+                        {new Date(
+                          stream.stream_stats_updated_at
+                        ).toLocaleString()}
                       </Text>
                     )}
                   </Box>
diff --git a/frontend/src/components/tables/ChannelsTable.jsx b/frontend/src/components/tables/ChannelsTable.jsx
index 2601520e..a3593ddc 100644
--- a/frontend/src/components/tables/ChannelsTable.jsx
+++ b/frontend/src/components/tables/ChannelsTable.jsx
@@ -216,11 +216,13 @@ const ChannelRowActions = React.memo(
   }
 );
 
-const ChannelsTable = ({ }) => {
+const ChannelsTable = ({}) => {
   const theme = useMantineTheme();
   const channelGroups = useChannelsStore((s) => s.channelGroups);
   const canEditChannelGroup = useChannelsStore((s) => s.canEditChannelGroup);
-  const canDeleteChannelGroup = useChannelsStore((s) => s.canDeleteChannelGroup);
+  const canDeleteChannelGroup = useChannelsStore(
+    (s) => s.canDeleteChannelGroup
+  );
 
   /**
    * STORES
@@ -302,12 +304,12 @@ const ChannelsTable = ({ }) => {
   const [m3uParams, setM3uParams] = useState({
     cachedlogos: true,
     direct: false,
-    tvg_id_source: 'channel_number'
+    tvg_id_source: 'channel_number',
   });
   const [epgParams, setEpgParams] = useState({
     cachedlogos: true,
     tvg_id_source: 'channel_number',
-    days: 0
+    days: 0,
   });
 
   /**
@@ -382,7 +384,11 @@ const ChannelsTable = ({ }) => {
   const editChannel = async (ch = null) => {
     // Use table's selected state instead of store state to avoid stale selections
     const currentSelection = table ? table.selectedTableIds : [];
-    console.log('editChannel called with:', { ch, currentSelection, tableExists: !!table });
+    console.log('editChannel called with:', {
+      ch,
+      currentSelection,
+      tableExists: !!table,
+    });
 
     if (currentSelection.length > 1) {
       setChannelBatchModalOpen(true);
@@ -393,7 +399,7 @@ const ChannelsTable = ({ }) => {
         const selectedId = currentSelection[0];
 
         // Use table data since that's what's currently displayed
-        channelToEdit = data.find(d => d.id === selectedId);
+        channelToEdit = data.find((d) => d.id === selectedId);
       }
       setChannel(channelToEdit);
       setChannelModalOpen(true);
@@ -538,7 +544,8 @@ const ChannelsTable = ({ }) => {
     const params = new URLSearchParams();
     if (!m3uParams.cachedlogos) params.append('cachedlogos', 'false');
     if (m3uParams.direct) params.append('direct', 'true');
-    if (m3uParams.tvg_id_source !== 'channel_number') params.append('tvg_id_source', m3uParams.tvg_id_source);
+    if (m3uParams.tvg_id_source !== 'channel_number')
+      params.append('tvg_id_source', m3uParams.tvg_id_source);
 
     const baseUrl = m3uUrl;
     return params.toString() ? `${baseUrl}?${params.toString()}` : baseUrl;
@@ -547,7 +554,8 @@ const ChannelsTable = ({ }) => {
   const buildEPGUrl = () => {
     const params = new URLSearchParams();
     if (!epgParams.cachedlogos) params.append('cachedlogos', 'false');
-    if (epgParams.tvg_id_source !== 'channel_number') params.append('tvg_id_source', epgParams.tvg_id_source);
+    if (epgParams.tvg_id_source !== 'channel_number')
+      params.append('tvg_id_source', epgParams.tvg_id_source);
     if (epgParams.days > 0) params.append('days', epgParams.days.toString());
 
     const baseUrl = epgUrl;
@@ -558,7 +566,9 @@ const ChannelsTable = ({ }) => {
     const success = await copyToClipboard(buildM3UUrl());
     notifications.show({
       title: success ? 'M3U URL Copied!' : 'Copy Failed',
-      message: success ? 'The M3U URL has been copied to your clipboard.' : 'Failed to copy M3U URL to clipboard',
+      message: success
+        ? 'The M3U URL has been copied to your clipboard.'
+        : 'Failed to copy M3U URL to clipboard',
       color: success ? 'green' : 'red',
     });
   };
@@ -567,7 +577,9 @@ const ChannelsTable = ({ }) => {
     const success = await copyToClipboard(buildEPGUrl());
     notifications.show({
       title: success ? 'EPG URL Copied!' : 'Copy Failed',
-      message: success ? 'The EPG URL has been copied to your clipboard.' : 'Failed to copy EPG URL to clipboard',
+      message: success
+        ? 'The EPG URL has been copied to your clipboard.'
+        : 'Failed to copy EPG URL to clipboard',
       color: success ? 'green' : 'red',
     });
   };
@@ -576,7 +588,9 @@ const ChannelsTable = ({ }) => {
     const success = await copyToClipboard(hdhrUrl);
     notifications.show({
       title: success ? 'HDHR URL Copied!' : 'Copy Failed',
-      message: success ? 'The HDHR URL has been copied to your clipboard.' : 'Failed to copy HDHR URL to clipboard',
+      message: success
+        ? 'The HDHR URL has been copied to your clipboard.'
+        : 'Failed to copy HDHR URL to clipboard',
       color: success ? 'green' : 'red',
     });
   };
@@ -860,8 +874,8 @@ const ChannelsTable = ({ }) => {
       return hasStreams
         ? {} // Default style for channels with streams
         : {
-          className: 'no-streams-row', // Add a class instead of background color
-        };
+            className: 'no-streams-row', // Add a class instead of background color
+          };
     },
   });
 
@@ -909,7 +923,13 @@ const ChannelsTable = ({ }) => {
               Links:
             </Text>
             <Group gap={5} style={{ paddingLeft: 10 }}>
-              <Popover withArrow shadow="md" zIndex={1000} position="bottom-start" withinPortal>
+              <Popover
+                withArrow
+                shadow="md"
+                zIndex={1000}
+                position="bottom-start"
+                withinPortal
+              >
                 <Popover.Target>
                   <Button
                     leftSection={<Tv2 size={18} />}
@@ -931,7 +951,7 @@ const ChannelsTable = ({ }) => {
                     style={{
                       minWidth: 250,
                       maxWidth: 'min(400px, 80vw)',
-                      width: 'max-content'
+                      width: 'max-content',
                     }}
                   >
                     <TextInput value={hdhrUrl} size="small" readOnly />
@@ -946,7 +966,13 @@ const ChannelsTable = ({ }) => {
                   </Group>
                 </Popover.Dropdown>
               </Popover>
-              <Popover withArrow shadow="md" zIndex={1000} position="bottom-start" withinPortal>
+              <Popover
+                withArrow
+                shadow="md"
+                zIndex={1000}
+                position="bottom-start"
+                withinPortal
+              >
                 <Popover.Target>
                   <Button
                     leftSection={<ScreenShare size={18} />}
@@ -967,7 +993,7 @@ const ChannelsTable = ({ }) => {
                     style={{
                       minWidth: 300,
                       maxWidth: 'min(500px, 90vw)',
-                      width: 'max-content'
+                      width: 'max-content',
                     }}
                     onClick={stopPropagation}
                     onMouseDown={stopPropagation}
@@ -987,47 +1013,60 @@ const ChannelsTable = ({ }) => {
                           <Copy size="16" />
                         </ActionIcon>
                       }
-                    /><Group justify="space-between">
+                    />
+                    <Group justify="space-between">
                       <Text size="sm">Use cached logos</Text>
                       <Switch
                         size="sm"
                         checked={m3uParams.cachedlogos}
-                        onChange={(event) => setM3uParams(prev => ({
-                          ...prev,
-                          cachedlogos: event.target.checked
-                        }))}
+                        onChange={(event) =>
+                          setM3uParams((prev) => ({
+                            ...prev,
+                            cachedlogos: event.target.checked,
+                          }))
+                        }
                       />
                     </Group>
-
                     <Group justify="space-between">
                       <Text size="sm">Direct stream URLs</Text>
                       <Switch
                         size="sm"
                         checked={m3uParams.direct}
-                        onChange={(event) => setM3uParams(prev => ({
-                          ...prev,
-                          direct: event.target.checked
-                        }))}
+                        onChange={(event) =>
+                          setM3uParams((prev) => ({
+                            ...prev,
+                            direct: event.target.checked,
+                          }))
+                        }
                       />
-                    </Group>                    <Select
+                    </Group>{' '}
+                    <Select
                       label="TVG-ID Source"
                       size="xs"
                       value={m3uParams.tvg_id_source}
-                      onChange={(value) => setM3uParams(prev => ({
-                        ...prev,
-                        tvg_id_source: value
-                      }))}
+                      onChange={(value) =>
+                        setM3uParams((prev) => ({
+                          ...prev,
+                          tvg_id_source: value,
+                        }))
+                      }
                       comboboxProps={{ withinPortal: false }}
                       data={[
                         { value: 'channel_number', label: 'Channel Number' },
                         { value: 'tvg_id', label: 'TVG-ID' },
-                        { value: 'gracenote', label: 'Gracenote Station ID' }
+                        { value: 'gracenote', label: 'Gracenote Station ID' },
                       ]}
                     />
                   </Stack>
                 </Popover.Dropdown>
               </Popover>
-              <Popover withArrow shadow="md" zIndex={1000} position="bottom-start" withinPortal>
+              <Popover
+                withArrow
+                shadow="md"
+                zIndex={1000}
+                position="bottom-start"
+                withinPortal
+              >
                 <Popover.Target>
                   <Button
                     leftSection={<Scroll size={18} />}
@@ -1049,7 +1088,7 @@ const ChannelsTable = ({ }) => {
                     style={{
                       minWidth: 300,
                       maxWidth: 'min(450px, 85vw)',
-                      width: 'max-content'
+                      width: 'max-content',
                     }}
                     onClick={stopPropagation}
                     onMouseDown={stopPropagation}
@@ -1075,25 +1114,29 @@ const ChannelsTable = ({ }) => {
                       <Switch
                         size="sm"
                         checked={epgParams.cachedlogos}
-                        onChange={(event) => setEpgParams(prev => ({
-                          ...prev,
-                          cachedlogos: event.target.checked
-                        }))}
+                        onChange={(event) =>
+                          setEpgParams((prev) => ({
+                            ...prev,
+                            cachedlogos: event.target.checked,
+                          }))
+                        }
                       />
                     </Group>
                     <Select
                       label="TVG-ID Source"
                       size="xs"
                       value={epgParams.tvg_id_source}
-                      onChange={(value) => setEpgParams(prev => ({
-                        ...prev,
-                        tvg_id_source: value
-                      }))}
+                      onChange={(value) =>
+                        setEpgParams((prev) => ({
+                          ...prev,
+                          tvg_id_source: value,
+                        }))
+                      }
                       comboboxProps={{ withinPortal: false }}
                       data={[
                         { value: 'channel_number', label: 'Channel Number' },
                         { value: 'tvg_id', label: 'TVG-ID' },
-                        { value: 'gracenote', label: 'Gracenote Station ID' }
+                        { value: 'gracenote', label: 'Gracenote Station ID' },
                       ]}
                     />
                     <NumberInput
@@ -1102,10 +1145,12 @@ const ChannelsTable = ({ }) => {
                       min={0}
                       max={365}
                       value={epgParams.days}
-                      onChange={(value) => setEpgParams(prev => ({
-                        ...prev,
-                        days: value || 0
-                      }))}
+                      onChange={(value) =>
+                        setEpgParams((prev) => ({
+                          ...prev,
+                          days: value || 0,
+                        }))
+                      }
                     />
                   </Stack>
                 </Popover.Dropdown>
diff --git a/frontend/src/components/tables/ChannelsTable/ChannelTableHeader.jsx b/frontend/src/components/tables/ChannelsTable/ChannelTableHeader.jsx
index 72372cc7..c2d2cb51 100644
--- a/frontend/src/components/tables/ChannelsTable/ChannelTableHeader.jsx
+++ b/frontend/src/components/tables/ChannelsTable/ChannelTableHeader.jsx
@@ -108,7 +108,8 @@ const ChannelTableHeader = ({
   const [channelNumAssignmentStart, setChannelNumAssignmentStart] = useState(1);
   const [assignNumbersModalOpen, setAssignNumbersModalOpen] = useState(false);
   const [groupManagerOpen, setGroupManagerOpen] = useState(false);
-  const [confirmDeleteProfileOpen, setConfirmDeleteProfileOpen] = useState(false);
+  const [confirmDeleteProfileOpen, setConfirmDeleteProfileOpen] =
+    useState(false);
   const [profileToDelete, setProfileToDelete] = useState(null);
 
   const profiles = useChannelsStore((s) => s.profiles);
diff --git a/frontend/src/components/tables/EPGsTable.jsx b/frontend/src/components/tables/EPGsTable.jsx
index 2101a12f..9c40a14a 100644
--- a/frontend/src/components/tables/EPGsTable.jsx
+++ b/frontend/src/components/tables/EPGsTable.jsx
@@ -552,8 +552,7 @@ const EPGsTable = () => {
             padding: 0,
             // gap: 1,
           }}
-        >
-        </Box>
+        ></Box>
       </Paper>
 
       <Box
@@ -590,14 +589,15 @@ const EPGsTable = () => {
 
 Name: ${epgToDelete.name}
 Source Type: ${epgToDelete.source_type}
-${epgToDelete.url
-                  ? `URL: ${epgToDelete.url}`
-                  : epgToDelete.api_key
-                    ? `API Key: ${epgToDelete.api_key}`
-                    : epgToDelete.file_path
-                      ? `File Path: ${epgToDelete.file_path}`
-                      : ''
-                }
+${
+  epgToDelete.url
+    ? `URL: ${epgToDelete.url}`
+    : epgToDelete.api_key
+      ? `API Key: ${epgToDelete.api_key}`
+      : epgToDelete.file_path
+        ? `File Path: ${epgToDelete.file_path}`
+        : ''
+}
 
 This will remove all related program information and channel associations.
 This action cannot be undone.`}
diff --git a/frontend/src/components/tables/StreamsTable.jsx b/frontend/src/components/tables/StreamsTable.jsx
index c4dea34a..95d44bee 100644
--- a/frontend/src/components/tables/StreamsTable.jsx
+++ b/frontend/src/components/tables/StreamsTable.jsx
@@ -63,14 +63,17 @@ const StreamRowActions = ({
   const fetchLogos = useLogosStore((s) => s.fetchLogos);
 
   const createChannelFromStream = async () => {
-    const selectedChannelProfileId = useChannelsStore.getState().selectedProfileId;
+    const selectedChannelProfileId =
+      useChannelsStore.getState().selectedProfileId;
 
     await API.createChannelFromStream({
       name: row.original.name,
       channel_number: null,
       stream_id: row.original.id,
       // Only pass channel_profile_ids if a specific profile is selected (not "All")
-      ...(selectedChannelProfileId !== '0' && { channel_profile_ids: selectedChannelProfileId }),
+      ...(selectedChannelProfileId !== '0' && {
+        channel_profile_ids: selectedChannelProfileId,
+      }),
     });
     await API.requeryChannels();
     fetchLogos();
@@ -103,7 +106,7 @@ const StreamRowActions = ({
       'ID:',
       row.original.id,
       'Hash:',
-      row.original.stream_hash,
+      row.original.stream_hash
     );
     handleWatchStream(row.original.stream_hash);
   }, [row.original, handleWatchStream]); // Add proper dependencies to ensure correct stream
@@ -175,7 +178,7 @@ const StreamRowActions = ({
   );
 };
 
-const StreamsTable = ({ }) => {
+const StreamsTable = ({}) => {
   const theme = useMantineTheme();
 
   /**
@@ -196,7 +199,10 @@ const StreamsTable = ({ }) => {
   // const [allRowsSelected, setAllRowsSelected] = useState(false);
 
   // Add local storage for page size
-  const [storedPageSize, setStoredPageSize] = useLocalStorage('streams-page-size', 50);
+  const [storedPageSize, setStoredPageSize] = useLocalStorage(
+    'streams-page-size',
+    50
+  );
   const [pagination, setPagination] = useState({
     pageIndex: 0,
     pageSize: storedPageSize,
@@ -409,7 +415,8 @@ const StreamsTable = ({ }) => {
   const createChannelsFromStreams = async () => {
     setIsLoading(true);
     try {
-      const selectedChannelProfileId = useChannelsStore.getState().selectedProfileId;
+      const selectedChannelProfileId =
+        useChannelsStore.getState().selectedProfileId;
 
       // Try to fetch the actual stream data for selected streams
       let streamsData = [];
@@ -419,12 +426,14 @@ const StreamsTable = ({ }) => {
         console.warn('Could not fetch stream details, using IDs only:', error);
       }
 
-      const streamData = selectedStreamIds.map(streamId => {
-        const stream = streamsData.find(s => s.id === streamId);
+      const streamData = selectedStreamIds.map((streamId) => {
+        const stream = streamsData.find((s) => s.id === streamId);
         return {
           stream_id: streamId,
           name: stream?.name || `Stream ${streamId}`,
-          ...(selectedChannelProfileId !== '0' && { channel_profile_ids: selectedChannelProfileId }),
+          ...(selectedChannelProfileId !== '0' && {
+            channel_profile_ids: selectedChannelProfileId,
+          }),
         };
       });
 
@@ -716,10 +725,10 @@ const StreamsTable = ({ }) => {
               style={
                 selectedStreamIds.length > 0 && selectedChannelIds.length === 1
                   ? {
-                    borderWidth: '1px',
-                    borderColor: theme.tailwind.green[5],
-                    color: 'white',
-                  }
+                      borderWidth: '1px',
+                      borderColor: theme.tailwind.green[5],
+                      color: 'white',
+                    }
                   : undefined
               }
               disabled={
diff --git a/frontend/src/helpers/index.jsx b/frontend/src/helpers/index.jsx
index 7ec0abb7..d751c4d4 100644
--- a/frontend/src/helpers/index.jsx
+++ b/frontend/src/helpers/index.jsx
@@ -1,3 +1,3 @@
-import table from "./table";
+import table from './table';
 
 export const TableHelper = table;
diff --git a/frontend/src/pages/Channels.jsx b/frontend/src/pages/Channels.jsx
index 93300f1b..c265e3ef 100644
--- a/frontend/src/pages/Channels.jsx
+++ b/frontend/src/pages/Channels.jsx
@@ -21,7 +21,14 @@ const ChannelsPage = () => {
   }
 
   return (
-    <div style={{ height: '100vh', width: '100%', display: 'flex', overflowX: 'auto' }}>
+    <div
+      style={{
+        height: '100vh',
+        width: '100%',
+        display: 'flex',
+        overflowX: 'auto',
+      }}
+    >
       <Allotment
         defaultSizes={[50, 50]}
         style={{ height: '100%', width: '100%', minWidth: '600px' }}
diff --git a/frontend/src/pages/ContentSources.jsx b/frontend/src/pages/ContentSources.jsx
index 79ec53f2..2966ba9e 100644
--- a/frontend/src/pages/ContentSources.jsx
+++ b/frontend/src/pages/ContentSources.jsx
@@ -8,7 +8,8 @@ const M3UPage = () => {
   const isLoading = useUserAgentsStore((state) => state.isLoading);
   const error = useUserAgentsStore((state) => state.error);
   if (isLoading) return <div>Loading...</div>;
-  if (error) return <div>Error: {error}</div>; return (
+  if (error) return <div>Error: {error}</div>;
+  return (
     <Stack
       style={{
         padding: 10,
diff --git a/frontend/src/pages/Dashboard.jsx b/frontend/src/pages/Dashboard.jsx
index af2104e1..c3c0fb61 100644
--- a/frontend/src/pages/Dashboard.jsx
+++ b/frontend/src/pages/Dashboard.jsx
@@ -1,8 +1,8 @@
 // src/components/Dashboard.js
-import React, { useState } from "react";
+import React, { useState } from 'react';
 
 const Dashboard = () => {
-  const [newStream, setNewStream] = useState("");
+  const [newStream, setNewStream] = useState('');
 
   return (
     <div>
diff --git a/frontend/src/pages/Guide.jsx b/frontend/src/pages/Guide.jsx
index d35bb7a3..af959fb7 100644
--- a/frontend/src/pages/Guide.jsx
+++ b/frontend/src/pages/Guide.jsx
@@ -81,8 +81,10 @@ export default function TVChannelGuide({ startDate, endDate }) {
       console.log(`Received ${fetched.length} programs`);
 
       // Include ALL channels, sorted by channel number - don't filter by EPG data
-      const sortedChannels = Object.values(channels)
-        .sort((a, b) => (a.channel_number || Infinity) - (b.channel_number || Infinity));
+      const sortedChannels = Object.values(channels).sort(
+        (a, b) =>
+          (a.channel_number || Infinity) - (b.channel_number || Infinity)
+      );
 
       console.log(`Using all ${sortedChannels.length} available channels`);
 
@@ -523,7 +525,7 @@ export default function TVChannelGuide({ startDate, endDate }) {
     const isLive = now.isAfter(programStart) && now.isBefore(programEnd);
 
     // Determine if the program has ended
-    const isPast = now.isAfter(programEnd);    // Check if this program is expanded
+    const isPast = now.isAfter(programEnd); // Check if this program is expanded
     const isExpanded = expandedProgramId === program.id;
 
     // Set the height based on expanded state
@@ -638,9 +640,11 @@ export default function TVChannelGuide({ startDate, endDate }) {
                 overflow: 'hidden',
               }}
             >
-              {programStart.format(timeFormat)} - {programEnd.format(timeFormat)}
+              {programStart.format(timeFormat)} -{' '}
+              {programEnd.format(timeFormat)}
             </Text>
-          </Box>          {/* Description is always shown but expands when row is expanded */}
+          </Box>{' '}
+          {/* Description is always shown but expands when row is expanded */}
           {program.description && (
             <Box
               style={{
@@ -663,7 +667,6 @@ export default function TVChannelGuide({ startDate, endDate }) {
               </Text>
             </Box>
           )}
-
           {/* Expanded content */}
           {isExpanded && (
             <Box style={{ marginTop: 'auto' }}>
@@ -771,8 +774,8 @@ export default function TVChannelGuide({ startDate, endDate }) {
   // Handle date-time formats
   const [timeFormatSetting] = useLocalStorage('time-format', '12h');
   const [dateFormatSetting] = useLocalStorage('date-format', 'mdy');
-  const timeFormat = timeFormatSetting === '12h' ? "h:mm A" : "HH:mm";
-  const dateFormat = dateFormatSetting === 'mdy' ? "MMMM D" : "D MMMM";
+  const timeFormat = timeFormatSetting === '12h' ? 'h:mm A' : 'HH:mm';
+  const dateFormat = dateFormatSetting === 'mdy' ? 'MMMM D' : 'D MMMM';
 
   return (
     <Box
@@ -805,7 +808,9 @@ export default function TVChannelGuide({ startDate, endDate }) {
             TV Guide
           </Title>
           <Flex align="center" gap="md">
-            <Text>{now.format(`dddd, ${dateFormat}, YYYY • ${timeFormat}`)}</Text>
+            <Text>
+              {now.format(`dddd, ${dateFormat}, YYYY • ${timeFormat}`)}
+            </Text>
             <Tooltip label="Jump to current time">
               <ActionIcon
                 onClick={scrollToNow}
@@ -863,10 +868,10 @@ export default function TVChannelGuide({ startDate, endDate }) {
           {(searchQuery !== '' ||
             selectedGroupId !== 'all' ||
             selectedProfileId !== 'all') && (
-              <Button variant="subtle" onClick={clearFilters} size="sm">
-                Clear Filters
-              </Button>
-            )}
+            <Button variant="subtle" onClick={clearFilters} size="sm">
+              Clear Filters
+            </Button>
+          )}
 
           <Text size="sm" color="dimmed">
             {filteredChannels.length}{' '}
@@ -933,100 +938,102 @@ export default function TVChannelGuide({ startDate, endDate }) {
                   borderBottom: '1px solid #27272A',
                   width: hourTimeline.length * HOUR_WIDTH,
                 }}
-              >                {hourTimeline.map((hourData) => {
-                const { time, isNewDay } = hourData;
+              >
+                {' '}
+                {hourTimeline.map((hourData) => {
+                  const { time, isNewDay } = hourData;
 
-                return (
-                  <Box
-                    key={time.format()}
-                    style={{
-                      width: HOUR_WIDTH,
-                      height: '40px',
-                      position: 'relative',
-                      color: '#a0aec0',
-                      borderRight: '1px solid #8DAFAA',
-                      cursor: 'pointer',
-                      borderLeft: isNewDay ? '2px solid #3BA882' : 'none', // Highlight day boundaries
-                      backgroundColor: isNewDay ? '#1E2A27' : '#1B2421', // Subtle background for new days
-                    }}
-                    onClick={(e) => handleTimeClick(time, e)}
-                  >
-                    {/* Remove the special day label for new days since we'll show day for all hours */}
-
-                    {/* Position time label at the left border of each hour block */}
-                    <Text
-                      size="sm"
+                  return (
+                    <Box
+                      key={time.format()}
                       style={{
-                        position: 'absolute',
-                        top: '8px', // Consistent positioning for all hours
-                        left: '4px',
-                        transform: 'none',
-                        borderRadius: '2px',
-                        lineHeight: 1.2,
-                        textAlign: 'left',
+                        width: HOUR_WIDTH,
+                        height: '40px',
+                        position: 'relative',
+                        color: '#a0aec0',
+                        borderRight: '1px solid #8DAFAA',
+                        cursor: 'pointer',
+                        borderLeft: isNewDay ? '2px solid #3BA882' : 'none', // Highlight day boundaries
+                        backgroundColor: isNewDay ? '#1E2A27' : '#1B2421', // Subtle background for new days
                       }}
+                      onClick={(e) => handleTimeClick(time, e)}
                     >
-                      {/* Show day above time for every hour using the same format */}
+                      {/* Remove the special day label for new days since we'll show day for all hours */}
+
+                      {/* Position time label at the left border of each hour block */}
                       <Text
-                        span
-                        size="xs"
+                        size="sm"
                         style={{
-                          display: 'block',
-                          opacity: 0.7,
-                          fontWeight: isNewDay ? 600 : 400, // Still emphasize day transitions
-                          color: isNewDay ? '#3BA882' : undefined,
+                          position: 'absolute',
+                          top: '8px', // Consistent positioning for all hours
+                          left: '4px',
+                          transform: 'none',
+                          borderRadius: '2px',
+                          lineHeight: 1.2,
+                          textAlign: 'left',
                         }}
                       >
-                        {formatDayLabel(time)}{' '}
-                        {/* Use same formatDayLabel function for all hours */}
-                      </Text>
-                      {time.format(timeFormat)}
-                      <Text span size="xs" ml={1} opacity={0.7}>
-                        {/*time.format('A')*/}
-                      </Text>
-                    </Text>
-
-                    {/* Hour boundary marker - more visible */}
-                    <Box
-                      style={{
-                        position: 'absolute',
-                        left: 0,
-                        top: 0,
-                        bottom: 0,
-                        width: '1px',
-                        backgroundColor: '#27272A',
-                        zIndex: 10,
-                      }}
-                    />
-
-                    {/* Quarter hour tick marks */}
-                    <Box
-                      style={{
-                        position: 'absolute',
-                        bottom: 0,
-                        width: '100%',
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        padding: '0 1px',
-                      }}
-                    >
-                      {[15, 30, 45].map((minute) => (
-                        <Box
-                          key={minute}
+                        {/* Show day above time for every hour using the same format */}
+                        <Text
+                          span
+                          size="xs"
                           style={{
-                            width: '1px',
-                            height: '8px',
-                            backgroundColor: '#718096',
-                            position: 'absolute',
-                            bottom: 0,
-                            left: `${(minute / 60) * 100}%`,
+                            display: 'block',
+                            opacity: 0.7,
+                            fontWeight: isNewDay ? 600 : 400, // Still emphasize day transitions
+                            color: isNewDay ? '#3BA882' : undefined,
                           }}
-                        />
-                      ))}
+                        >
+                          {formatDayLabel(time)}{' '}
+                          {/* Use same formatDayLabel function for all hours */}
+                        </Text>
+                        {time.format(timeFormat)}
+                        <Text span size="xs" ml={1} opacity={0.7}>
+                          {/*time.format('A')*/}
+                        </Text>
+                      </Text>
+
+                      {/* Hour boundary marker - more visible */}
+                      <Box
+                        style={{
+                          position: 'absolute',
+                          left: 0,
+                          top: 0,
+                          bottom: 0,
+                          width: '1px',
+                          backgroundColor: '#27272A',
+                          zIndex: 10,
+                        }}
+                      />
+
+                      {/* Quarter hour tick marks */}
+                      <Box
+                        style={{
+                          position: 'absolute',
+                          bottom: 0,
+                          width: '100%',
+                          display: 'flex',
+                          justifyContent: 'space-between',
+                          padding: '0 1px',
+                        }}
+                      >
+                        {[15, 30, 45].map((minute) => (
+                          <Box
+                            key={minute}
+                            style={{
+                              width: '1px',
+                              height: '8px',
+                              backgroundColor: '#718096',
+                              position: 'absolute',
+                              bottom: 0,
+                              left: `${(minute / 60) * 100}%`,
+                            }}
+                          />
+                        ))}
+                      </Box>
                     </Box>
-                  </Box>
-                );
-              })}
+                  );
+                })}
               </Box>
             </Box>
           </Box>
@@ -1222,7 +1229,9 @@ export default function TVChannelGuide({ startDate, endDate }) {
                     >
                       {channelPrograms.length > 0 ? (
                         channelPrograms.map((program) => (
-                          <div key={`${channel.id}-${program.id}-${program.start_time}`}>
+                          <div
+                            key={`${channel.id}-${program.id}-${program.start_time}`}
+                          >
                             {renderProgram(program, start)}
                           </div>
                         ))
@@ -1230,7 +1239,9 @@ export default function TVChannelGuide({ startDate, endDate }) {
                         // Simple placeholder for channels with no program data - 2 hour blocks
                         <>
                           {/* Generate repeating placeholder blocks every 2 hours across the timeline */}
-                          {Array.from({ length: Math.ceil(hourTimeline.length / 2) }).map((_, index) => (
+                          {Array.from({
+                            length: Math.ceil(hourTimeline.length / 2),
+                          }).map((_, index) => (
                             <Box
                               key={`placeholder-${channel.id}-${index}`}
                               style={{
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
index ac971332..e9751d8d 100644
--- a/frontend/src/pages/Home.jsx
+++ b/frontend/src/pages/Home.jsx
@@ -1,8 +1,8 @@
 // src/components/Home.js
-import React, { useState } from "react";
+import React, { useState } from 'react';
 
 const Home = () => {
-  const [newChannel, setNewChannel] = useState("");
+  const [newChannel, setNewChannel] = useState('');
 
   return (
     <div>
diff --git a/frontend/src/pages/Settings.jsx b/frontend/src/pages/Settings.jsx
index c940601e..f1b4419a 100644
--- a/frontend/src/pages/Settings.jsx
+++ b/frontend/src/pages/Settings.jsx
@@ -454,16 +454,13 @@ const SettingsPage = () => {
                       {...form.getInputProps('preferred-region')}
                       key={form.key('preferred-region')}
                       id={
-                        settings['preferred-region']?.id ||
-                        'preferred-region'
+                        settings['preferred-region']?.id || 'preferred-region'
                       }
                       name={
-                        settings['preferred-region']?.key ||
-                        'preferred-region'
+                        settings['preferred-region']?.key || 'preferred-region'
                       }
                       label={
-                        settings['preferred-region']?.name ||
-                        'Preferred Region'
+                        settings['preferred-region']?.name || 'Preferred Region'
                       }
                       data={regionChoices.map((r) => ({
                         label: r.label,
@@ -471,10 +468,7 @@ const SettingsPage = () => {
                       }))}
                     />
 
-                    <Group
-                      justify="space-between"
-                      style={{ paddingTop: 5 }}
-                    >
+                    <Group justify="space-between" style={{ paddingTop: 5 }}>
                       <Text size="sm" fw={500}>
                         Auto-Import Mapped Files
                       </Text>
@@ -571,9 +565,7 @@ const SettingsPage = () => {
                 </Accordion.Control>
                 <Accordion.Panel>
                   <form
-                    onSubmit={networkAccessForm.onSubmit(
-                      onNetworkAccessSubmit
-                    )}
+                    onSubmit={networkAccessForm.onSubmit(onNetworkAccessSubmit)}
                   >
                     <Stack gap="sm">
                       {networkAccessSaved && (
@@ -628,9 +620,7 @@ const SettingsPage = () => {
                 </Accordion.Control>
                 <Accordion.Panel>
                   <form
-                    onSubmit={proxySettingsForm.onSubmit(
-                      onProxySettingsSubmit
-                    )}
+                    onSubmit={proxySettingsForm.onSubmit(onProxySettingsSubmit)}
                   >
                     <Stack gap="sm">
                       {proxySettingsSaved && (
@@ -647,7 +637,7 @@ const SettingsPage = () => {
                             'buffering_timeout',
                             'redis_chunk_ttl',
                             'channel_shutdown_delay',
-                            'channel_init_grace_period'
+                            'channel_init_grace_period',
                           ].includes(key);
 
                           const isFloatField = key === 'buffering_speed';
@@ -660,9 +650,15 @@ const SettingsPage = () => {
                                 {...proxySettingsForm.getInputProps(key)}
                                 description={config.description || null}
                                 min={0}
-                                max={key === 'buffering_timeout' ? 300 :
-                                  key === 'redis_chunk_ttl' ? 3600 :
-                                    key === 'channel_shutdown_delay' ? 300 : 60}
+                                max={
+                                  key === 'buffering_timeout'
+                                    ? 300
+                                    : key === 'redis_chunk_ttl'
+                                      ? 3600
+                                      : key === 'channel_shutdown_delay'
+                                        ? 300
+                                        : 60
+                                }
                               />
                             );
                           } else if (isFloatField) {
@@ -728,7 +724,11 @@ const SettingsPage = () => {
           setRehashDialogType(null);
         }}
         onConfirm={handleRehashConfirm}
-        title={rehashDialogType === 'save' ? 'Save Settings and Rehash Streams' : 'Confirm Stream Rehash'}
+        title={
+          rehashDialogType === 'save'
+            ? 'Save Settings and Rehash Streams'
+            : 'Confirm Stream Rehash'
+        }
         message={
           <div style={{ whiteSpace: 'pre-line' }}>
             {`Are you sure you want to rehash all streams?
@@ -740,7 +740,9 @@ M3U refreshes will be blocked until this process finishes.
 Please ensure you have time to let this complete before proceeding.`}
           </div>
         }
-        confirmLabel={rehashDialogType === 'save' ? 'Save and Rehash' : 'Start Rehash'}
+        confirmLabel={
+          rehashDialogType === 'save' ? 'Save and Rehash' : 'Start Rehash'
+        }
         cancelLabel="Cancel"
         actionKey="rehash-streams"
         onSuppressChange={suppressWarning}
diff --git a/frontend/src/store/channels.jsx b/frontend/src/store/channels.jsx
index ca2d0af9..451e74a6 100644
--- a/frontend/src/store/channels.jsx
+++ b/frontend/src/store/channels.jsx
@@ -54,7 +54,7 @@ const useChannelsStore = create((set, get) => ({
           hasChannels: group.channel_count > 0,
           hasM3UAccounts: group.m3u_account_count > 0,
           canEdit: group.m3u_account_count === 0,
-          canDelete: group.channel_count === 0 && group.m3u_account_count === 0
+          canDelete: group.channel_count === 0 && group.m3u_account_count === 0,
         };
         return acc;
       }, {});
@@ -152,9 +152,14 @@ const useChannelsStore = create((set, get) => ({
   updateChannels: (channels) => {
     // Ensure channels is an array
     if (!Array.isArray(channels)) {
-      console.error('updateChannels expects an array, received:', typeof channels, channels);
+      console.error(
+        'updateChannels expects an array, received:',
+        typeof channels,
+        channels
+      );
       return;
-    } const channelsByUUID = {};
+    }
+    const channelsByUUID = {};
     const updatedChannels = channels.reduce((acc, chan) => {
       channelsByUUID[chan.uuid] = chan.id;
       acc[chan.id] = chan;
@@ -405,12 +410,14 @@ const useChannelsStore = create((set, get) => ({
 
   // Add helper methods for validation
   canEditChannelGroup: (groupIdOrGroup) => {
-    const groupId = typeof groupIdOrGroup === 'object' ? groupIdOrGroup.id : groupIdOrGroup;
+    const groupId =
+      typeof groupIdOrGroup === 'object' ? groupIdOrGroup.id : groupIdOrGroup;
     return get().channelGroups[groupId]?.canEdit ?? true;
   },
 
   canDeleteChannelGroup: (groupIdOrGroup) => {
-    const groupId = typeof groupIdOrGroup === 'object' ? groupIdOrGroup.id : groupIdOrGroup;
+    const groupId =
+      typeof groupIdOrGroup === 'object' ? groupIdOrGroup.id : groupIdOrGroup;
     return get().channelGroups[groupId]?.canDelete ?? true;
   },
 }));
diff --git a/frontend/src/store/channelsTable.jsx b/frontend/src/store/channelsTable.jsx
index cdfb71c6..75e14c63 100644
--- a/frontend/src/store/channelsTable.jsx
+++ b/frontend/src/store/channelsTable.jsx
@@ -10,7 +10,8 @@ const useChannelsTableStore = create((set, get) => ({
   sorting: [{ id: 'channel_number', desc: false }],
   pagination: {
     pageIndex: 0,
-    pageSize: JSON.parse(localStorage.getItem('channel-table-prefs'))?.pageSize || 50,
+    pageSize:
+      JSON.parse(localStorage.getItem('channel-table-prefs'))?.pageSize || 50,
   },
   selectedChannelIds: [],
   allQueryIds: [],
diff --git a/frontend/src/store/epgs.jsx b/frontend/src/store/epgs.jsx
index 0fa07e1c..6b3ffa81 100644
--- a/frontend/src/store/epgs.jsx
+++ b/frontend/src/store/epgs.jsx
@@ -80,16 +80,21 @@ const useEPGsStore = create((set) => ({
           speed: data.speed,
           elapsed_time: data.elapsed_time,
           time_remaining: data.time_remaining,
-          status: data.status || 'in_progress'
-        }
+          status: data.status || 'in_progress',
+        },
       };
 
       // Set the EPG source status based on the update
       // First prioritize explicit status values from the backend
-      const sourceStatus = data.status ? data.status // Use explicit status if provided
-        : data.action === "downloading" ? "fetching"
-          : data.action === "parsing_channels" || data.action === "parsing_programs" ? "parsing"
-            : data.progress === 100 ? "success" // Mark as success when progress is 100%
+      const sourceStatus = data.status
+        ? data.status // Use explicit status if provided
+        : data.action === 'downloading'
+          ? 'fetching'
+          : data.action === 'parsing_channels' ||
+              data.action === 'parsing_programs'
+            ? 'parsing'
+            : data.progress === 100
+              ? 'success' // Mark as success when progress is 100%
               : state.epgs[data.source]?.status || 'idle';
 
       // Create a new epgs object with the updated source status
@@ -98,13 +103,16 @@ const useEPGsStore = create((set) => ({
         [data.source]: {
           ...state.epgs[data.source],
           status: sourceStatus,
-          last_message: data.status === 'error' ? (data.error || 'Unknown error') : state.epgs[data.source]?.last_message
-        }
+          last_message:
+            data.status === 'error'
+              ? data.error || 'Unknown error'
+              : state.epgs[data.source]?.last_message,
+        },
       };
 
       return {
         refreshProgress: newRefreshProgress,
-        epgs: newEpgs
+        epgs: newEpgs,
       };
     }),
 }));
diff --git a/frontend/src/store/useVODStore.jsx b/frontend/src/store/useVODStore.jsx
index 8acbedf0..a8030204 100644
--- a/frontend/src/store/useVODStore.jsx
+++ b/frontend/src/store/useVODStore.jsx
@@ -2,380 +2,385 @@ import { create } from 'zustand';
 import api from '../api';
 
 const useVODStore = create((set, get) => ({
-    movies: {},
-    series: {},
-    episodes: {},
-    categories: {},
-    loading: false,
-    error: null,
-    filters: {
-        type: 'all', // 'all', 'movies', 'series'
-        search: '',
-        category: '',
-    },
-    currentPage: 1,
-    totalCount: 0,
-    pageSize: 20,
+  movies: {},
+  series: {},
+  episodes: {},
+  categories: {},
+  loading: false,
+  error: null,
+  filters: {
+    type: 'all', // 'all', 'movies', 'series'
+    search: '',
+    category: '',
+  },
+  currentPage: 1,
+  totalCount: 0,
+  pageSize: 20,
 
-    setFilters: (newFilters) =>
-        set((state) => ({
-            filters: { ...state.filters, ...newFilters },
-            currentPage: 1, // Reset to first page when filters change
-        })),
+  setFilters: (newFilters) =>
+    set((state) => ({
+      filters: { ...state.filters, ...newFilters },
+      currentPage: 1, // Reset to first page when filters change
+    })),
 
-    setPage: (page) =>
-        set(() => ({
-            currentPage: page,
-        })),
+  setPage: (page) =>
+    set(() => ({
+      currentPage: page,
+    })),
 
-    fetchMovies: async () => {
-        try {
-            set({ loading: true, error: null });
-            const state = get();
-            const params = new URLSearchParams();
+  fetchMovies: async () => {
+    try {
+      set({ loading: true, error: null });
+      const state = get();
+      const params = new URLSearchParams();
 
-            params.append('page', state.currentPage);
-            params.append('page_size', state.pageSize);
+      params.append('page', state.currentPage);
+      params.append('page_size', state.pageSize);
 
-            if (state.filters.search) {
-                params.append('search', state.filters.search);
-            }
+      if (state.filters.search) {
+        params.append('search', state.filters.search);
+      }
 
-            if (state.filters.category) {
-                params.append('category', state.filters.category);
-            }
+      if (state.filters.category) {
+        params.append('category', state.filters.category);
+      }
 
-            const response = await api.getMovies(params);
+      const response = await api.getMovies(params);
 
-            // Handle both paginated and non-paginated responses
-            const results = response.results || response;
-            const count = response.count || results.length;
+      // Handle both paginated and non-paginated responses
+      const results = response.results || response;
+      const count = response.count || results.length;
 
-            set({
-                movies: results.reduce((acc, movie) => {
-                    acc[movie.id] = movie;
-                    return acc;
-                }, {}),
-                totalCount: count,
-                loading: false,
-            });
-        } catch (error) {
-            console.error('Failed to fetch movies:', error);
-            set({ error: 'Failed to load movies.', loading: false });
-        }
-    },
+      set({
+        movies: results.reduce((acc, movie) => {
+          acc[movie.id] = movie;
+          return acc;
+        }, {}),
+        totalCount: count,
+        loading: false,
+      });
+    } catch (error) {
+      console.error('Failed to fetch movies:', error);
+      set({ error: 'Failed to load movies.', loading: false });
+    }
+  },
 
-    fetchSeries: async () => {
-        set({ loading: true, error: null });
-        try {
-            const state = get();
-            const params = new URLSearchParams();
+  fetchSeries: async () => {
+    set({ loading: true, error: null });
+    try {
+      const state = get();
+      const params = new URLSearchParams();
 
-            params.append('page', state.currentPage);
-            params.append('page_size', state.pageSize);
+      params.append('page', state.currentPage);
+      params.append('page_size', state.pageSize);
 
-            if (state.filters.search) {
-                params.append('search', state.filters.search);
-            }
+      if (state.filters.search) {
+        params.append('search', state.filters.search);
+      }
 
-            if (state.filters.category) {
-                params.append('category', state.filters.category);
-            }
+      if (state.filters.category) {
+        params.append('category', state.filters.category);
+      }
 
-            const response = await api.getSeries(params);
+      const response = await api.getSeries(params);
 
-            // Handle both paginated and non-paginated responses
-            const results = response.results || response;
-            const count = response.count || results.length;
+      // Handle both paginated and non-paginated responses
+      const results = response.results || response;
+      const count = response.count || results.length;
 
-            set({
-                series: results.reduce((acc, series) => {
-                    acc[series.id] = series;
-                    return acc;
-                }, {}),
-                totalCount: count,
-                loading: false,
-            });
-        } catch (error) {
-            console.error('Failed to fetch series:', error);
-            set({ error: 'Failed to load series.', loading: false });
-        }
-    },
+      set({
+        series: results.reduce((acc, series) => {
+          acc[series.id] = series;
+          return acc;
+        }, {}),
+        totalCount: count,
+        loading: false,
+      });
+    } catch (error) {
+      console.error('Failed to fetch series:', error);
+      set({ error: 'Failed to load series.', loading: false });
+    }
+  },
 
-    fetchSeriesEpisodes: async (seriesId) => {
-        set({ loading: true, error: null });
-        try {
-            const response = await api.getSeriesEpisodes(seriesId);
+  fetchSeriesEpisodes: async (seriesId) => {
+    set({ loading: true, error: null });
+    try {
+      const response = await api.getSeriesEpisodes(seriesId);
 
-            set((state) => ({
-                episodes: {
-                    ...state.episodes,
-                    ...response.reduce((acc, episode) => {
-                        acc[episode.id] = episode;
-                        return acc;
-                    }, {}),
-                },
-                loading: false,
-            }));
+      set((state) => ({
+        episodes: {
+          ...state.episodes,
+          ...response.reduce((acc, episode) => {
+            acc[episode.id] = episode;
+            return acc;
+          }, {}),
+        },
+        loading: false,
+      }));
 
-            return response;
-        } catch (error) {
-            console.error('Failed to fetch series episodes:', error);
-            set({ error: 'Failed to load episodes.', loading: false });
-            throw error; // Re-throw to allow calling component to handle
-        }
-    },
+      return response;
+    } catch (error) {
+      console.error('Failed to fetch series episodes:', error);
+      set({ error: 'Failed to load episodes.', loading: false });
+      throw error; // Re-throw to allow calling component to handle
+    }
+  },
 
-    fetchMovieDetails: async (movieId) => {
-        set({ loading: true, error: null });
-        try {
-            const response = await api.getMovieDetails(movieId);
+  fetchMovieDetails: async (movieId) => {
+    set({ loading: true, error: null });
+    try {
+      const response = await api.getMovieDetails(movieId);
 
-            // Transform the response data to match our expected format
-            const movieDetails = {
-                id: response.id || movieId,
-                name: response.name || '',
-                description: response.description || '',
-                year: response.year || null,
-                genre: response.genre || '',
-                rating: response.rating || '',
-                duration_secs: response.duration_secs || null,
-                stream_url: response.url || '',
-                logo: response.logo_url || null,
-                type: 'movie',
-                director: response.director || '',
-                actors: response.actors || '',
-                country: response.country || '',
-                tmdb_id: response.tmdb_id || '',
-                imdb_id: response.imdb_id || '',
-                m3u_account: response.m3u_account || '',
-            };
-            console.log('Fetched Movie Details:', movieDetails);
-            set((state) => ({
-                movies: {
-                    ...state.movies,
-                    [movieDetails.id]: movieDetails,
-                },
-                loading: false,
-            }));
+      // Transform the response data to match our expected format
+      const movieDetails = {
+        id: response.id || movieId,
+        name: response.name || '',
+        description: response.description || '',
+        year: response.year || null,
+        genre: response.genre || '',
+        rating: response.rating || '',
+        duration_secs: response.duration_secs || null,
+        stream_url: response.url || '',
+        logo: response.logo_url || null,
+        type: 'movie',
+        director: response.director || '',
+        actors: response.actors || '',
+        country: response.country || '',
+        tmdb_id: response.tmdb_id || '',
+        imdb_id: response.imdb_id || '',
+        m3u_account: response.m3u_account || '',
+      };
+      console.log('Fetched Movie Details:', movieDetails);
+      set((state) => ({
+        movies: {
+          ...state.movies,
+          [movieDetails.id]: movieDetails,
+        },
+        loading: false,
+      }));
 
-            return movieDetails;
-        } catch (error) {
-            console.error('Failed to fetch movie details:', error);
-            set({ error: 'Failed to load movie details.', loading: false });
-            throw error;
-        }
-    },
+      return movieDetails;
+    } catch (error) {
+      console.error('Failed to fetch movie details:', error);
+      set({ error: 'Failed to load movie details.', loading: false });
+      throw error;
+    }
+  },
 
-    fetchMovieDetailsFromProvider: async (movieId) => {
-        set({ loading: true, error: null });
-        try {
-            const response = await api.getMovieProviderInfo(movieId);
+  fetchMovieDetailsFromProvider: async (movieId) => {
+    set({ loading: true, error: null });
+    try {
+      const response = await api.getMovieProviderInfo(movieId);
 
-            // Transform the response data to match our expected format
-            const movieDetails = {
-                id: response.id || movieId,
-                name: response.name || '',
-                description: response.description || response.plot || '',
-                year: response.year || null,
-                genre: response.genre || '',
-                rating: response.rating || '',
-                duration_secs: response.duration_secs || null,
-                stream_url: response.stream_url || '',
-                logo: response.logo || response.cover || null,
-                type: 'movie',
-                director: response.director || '',
-                actors: response.actors || response.cast || '',
-                country: response.country || '',
-                tmdb_id: response.tmdb_id || '',
-                youtube_trailer: response.youtube_trailer || '',
-                // Additional provider fields
-                backdrop_path: response.backdrop_path || [],
-                release_date: response.release_date || response.releasedate || '',
-                movie_image: response.movie_image || null,
-                o_name: response.o_name || '',
-                age: response.age || '',
-                episode_run_time: response.episode_run_time || null,
-                bitrate: response.bitrate || 0,
-                video: response.video || {},
-                audio: response.audio || {},
-            };
+      // Transform the response data to match our expected format
+      const movieDetails = {
+        id: response.id || movieId,
+        name: response.name || '',
+        description: response.description || response.plot || '',
+        year: response.year || null,
+        genre: response.genre || '',
+        rating: response.rating || '',
+        duration_secs: response.duration_secs || null,
+        stream_url: response.stream_url || '',
+        logo: response.logo || response.cover || null,
+        type: 'movie',
+        director: response.director || '',
+        actors: response.actors || response.cast || '',
+        country: response.country || '',
+        tmdb_id: response.tmdb_id || '',
+        youtube_trailer: response.youtube_trailer || '',
+        // Additional provider fields
+        backdrop_path: response.backdrop_path || [],
+        release_date: response.release_date || response.releasedate || '',
+        movie_image: response.movie_image || null,
+        o_name: response.o_name || '',
+        age: response.age || '',
+        episode_run_time: response.episode_run_time || null,
+        bitrate: response.bitrate || 0,
+        video: response.video || {},
+        audio: response.audio || {},
+      };
 
-            set({ loading: false }); // Only update loading state
+      set({ loading: false }); // Only update loading state
 
-            // Do NOT merge or overwrite the store entry
-            return movieDetails;
-        } catch (error) {
-            console.error('Failed to fetch movie details from provider:', error);
-            set({ error: 'Failed to load movie details from provider.', loading: false });
-            throw error;
-        }
-    },
+      // Do NOT merge or overwrite the store entry
+      return movieDetails;
+    } catch (error) {
+      console.error('Failed to fetch movie details from provider:', error);
+      set({
+        error: 'Failed to load movie details from provider.',
+        loading: false,
+      });
+      throw error;
+    }
+  },
 
-    fetchMovieProviders: async (movieId) => {
-        try {
-            const response = await api.getMovieProviders(movieId);
-            return response || [];
-        } catch (error) {
-            console.error('Failed to fetch movie providers:', error);
-            throw error;
-        }
-    },
+  fetchMovieProviders: async (movieId) => {
+    try {
+      const response = await api.getMovieProviders(movieId);
+      return response || [];
+    } catch (error) {
+      console.error('Failed to fetch movie providers:', error);
+      throw error;
+    }
+  },
 
-    fetchSeriesProviders: async (seriesId) => {
-        try {
-            const response = await api.getSeriesProviders(seriesId);
-            return response || [];
-        } catch (error) {
-            console.error('Failed to fetch series providers:', error);
-            throw error;
-        }
-    },
+  fetchSeriesProviders: async (seriesId) => {
+    try {
+      const response = await api.getSeriesProviders(seriesId);
+      return response || [];
+    } catch (error) {
+      console.error('Failed to fetch series providers:', error);
+      throw error;
+    }
+  },
 
-    fetchCategories: async () => {
-        try {
-            const response = await api.getVODCategories();
-            // Handle both array and paginated responses
-            const results = response.results || response;
+  fetchCategories: async () => {
+    try {
+      const response = await api.getVODCategories();
+      // Handle both array and paginated responses
+      const results = response.results || response;
 
-            set({
-                categories: results.reduce((acc, category) => {
-                    acc[category.id] = category;
-                    return acc;
-                }, {}),
-            });
-        } catch (error) {
-            console.error('Failed to fetch VOD categories:', error);
-            set({ error: 'Failed to load categories.' });
-        }
-    },
+      set({
+        categories: results.reduce((acc, category) => {
+          acc[category.id] = category;
+          return acc;
+        }, {}),
+      });
+    } catch (error) {
+      console.error('Failed to fetch VOD categories:', error);
+      set({ error: 'Failed to load categories.' });
+    }
+  },
 
-    addMovie: (movie) =>
-        set((state) => ({
-            movies: { ...state.movies, [movie.id]: movie },
-        })),
+  addMovie: (movie) =>
+    set((state) => ({
+      movies: { ...state.movies, [movie.id]: movie },
+    })),
 
-    updateMovie: (movie) =>
-        set((state) => ({
-            movies: { ...state.movies, [movie.id]: movie },
-        })),
+  updateMovie: (movie) =>
+    set((state) => ({
+      movies: { ...state.movies, [movie.id]: movie },
+    })),
 
-    removeMovie: (movieId) =>
-        set((state) => {
-            const updatedMovies = { ...state.movies };
-            delete updatedMovies[movieId];
-            return { movies: updatedMovies };
-        }),
+  removeMovie: (movieId) =>
+    set((state) => {
+      const updatedMovies = { ...state.movies };
+      delete updatedMovies[movieId];
+      return { movies: updatedMovies };
+    }),
 
-    addSeries: (series) =>
-        set((state) => ({
-            series: { ...state.series, [series.id]: series },
-        })),
+  addSeries: (series) =>
+    set((state) => ({
+      series: { ...state.series, [series.id]: series },
+    })),
 
-    updateSeries: (series) =>
-        set((state) => ({
-            series: { ...state.series, [series.id]: series },
-        })),
+  updateSeries: (series) =>
+    set((state) => ({
+      series: { ...state.series, [series.id]: series },
+    })),
 
-    removeSeries: (seriesId) =>
-        set((state) => {
-            const updatedSeries = { ...state.series };
-            delete updatedSeries[seriesId];
-            return { series: updatedSeries };
-        }),
+  removeSeries: (seriesId) =>
+    set((state) => {
+      const updatedSeries = { ...state.series };
+      delete updatedSeries[seriesId];
+      return { series: updatedSeries };
+    }),
 
-    fetchSeriesInfo: async (seriesId) => {
-        set({ loading: true, error: null });
-        try {
-            const response = await api.getSeriesInfo(seriesId);
+  fetchSeriesInfo: async (seriesId) => {
+    set({ loading: true, error: null });
+    try {
+      const response = await api.getSeriesInfo(seriesId);
 
-            // Transform the response data to match our expected format
-            const seriesInfo = {
-                id: response.id || seriesId,
-                name: response.name || '',
-                description: response.description || response.custom_properties?.plot || '',
-                year: response.year || null,
-                genre: response.genre || '',
-                rating: response.rating || '',
-                logo: response.cover || null,
-                type: 'series',
-                director: response.custom_properties?.director || '',
-                cast: response.custom_properties?.cast || '',
-                country: response.country || '',
-                tmdb_id: response.tmdb_id || '',
-                imdb_id: response.imdb_id || '',
-                episode_count: response.episode_count || 0,
-                // Additional provider fields
-                backdrop_path: response.custom_properties?.backdrop_path || [],
-                release_date: response.release_date || '',
-                series_image: response.series_image || null,
-                o_name: response.o_name || '',
-                age: response.age || '',
-                m3u_account: response.m3u_account || '',
-                youtube_trailer: response.custom_properties?.youtube_trailer || '',
-            };
+      // Transform the response data to match our expected format
+      const seriesInfo = {
+        id: response.id || seriesId,
+        name: response.name || '',
+        description:
+          response.description || response.custom_properties?.plot || '',
+        year: response.year || null,
+        genre: response.genre || '',
+        rating: response.rating || '',
+        logo: response.cover || null,
+        type: 'series',
+        director: response.custom_properties?.director || '',
+        cast: response.custom_properties?.cast || '',
+        country: response.country || '',
+        tmdb_id: response.tmdb_id || '',
+        imdb_id: response.imdb_id || '',
+        episode_count: response.episode_count || 0,
+        // Additional provider fields
+        backdrop_path: response.custom_properties?.backdrop_path || [],
+        release_date: response.release_date || '',
+        series_image: response.series_image || null,
+        o_name: response.o_name || '',
+        age: response.age || '',
+        m3u_account: response.m3u_account || '',
+        youtube_trailer: response.custom_properties?.youtube_trailer || '',
+      };
 
-            let episodesData = {};
+      let episodesData = {};
 
-            // Handle episodes - check if they're in the response
-            if (response.episodes) {
-                Object.entries(response.episodes).forEach(([seasonNumber, seasonEpisodes]) => {
-                    seasonEpisodes.forEach((episode) => {
-                        const episodeData = {
-                            id: episode.id,
-                            stream_id: episode.id,
-                            name: episode.title || '',
-                            description: episode.plot || '',
-                            season_number: parseInt(seasonNumber) || 0,
-                            episode_number: episode.episode_number || 0,
-                            duration_secs: episode.duration_secs || null,
-                            rating: episode.rating || '',
-                            container_extension: episode.container_extension || '',
-                            series: {
-                                id: seriesInfo.id,
-                                name: seriesInfo.name
-                            },
-                            type: 'episode',
-                            uuid: episode.id, // Use the stream ID as UUID for playback
-                            logo: episode.movie_image ? { url: episode.movie_image } : null,
-                            air_date: episode.air_date || null,
-                            movie_image: episode.movie_image || null,
-                            tmdb_id: episode.tmdb_id || '',
-                            imdb_id: episode.imdb_id || '',
-                        };
-                        episodesData[episode.id] = episodeData;
-                    });
-                });
-
-                // Update episodes in the store
-                set((state) => ({
-                    episodes: {
-                        ...state.episodes,
-                        ...episodesData,
-                    },
-                }));
-            }
-
-            set((state) => ({
+      // Handle episodes - check if they're in the response
+      if (response.episodes) {
+        Object.entries(response.episodes).forEach(
+          ([seasonNumber, seasonEpisodes]) => {
+            seasonEpisodes.forEach((episode) => {
+              const episodeData = {
+                id: episode.id,
+                stream_id: episode.id,
+                name: episode.title || '',
+                description: episode.plot || '',
+                season_number: parseInt(seasonNumber) || 0,
+                episode_number: episode.episode_number || 0,
+                duration_secs: episode.duration_secs || null,
+                rating: episode.rating || '',
+                container_extension: episode.container_extension || '',
                 series: {
-                    ...state.series,
-                    [seriesInfo.id]: seriesInfo,
+                  id: seriesInfo.id,
+                  name: seriesInfo.name,
                 },
-                loading: false,
-            }));
+                type: 'episode',
+                uuid: episode.id, // Use the stream ID as UUID for playback
+                logo: episode.movie_image ? { url: episode.movie_image } : null,
+                air_date: episode.air_date || null,
+                movie_image: episode.movie_image || null,
+                tmdb_id: episode.tmdb_id || '',
+                imdb_id: episode.imdb_id || '',
+              };
+              episodesData[episode.id] = episodeData;
+            });
+          }
+        );
 
-            // Return series info with episodes array for easy access
-            return {
-                ...seriesInfo,
-                episodesList: Object.values(episodesData)
-            };
-        } catch (error) {
-            console.error('Failed to fetch series info:', error);
-            set({ error: 'Failed to load series details.', loading: false });
-            throw error;
-        }
-    },
+        // Update episodes in the store
+        set((state) => ({
+          episodes: {
+            ...state.episodes,
+            ...episodesData,
+          },
+        }));
+      }
 
+      set((state) => ({
+        series: {
+          ...state.series,
+          [seriesInfo.id]: seriesInfo,
+        },
+        loading: false,
+      }));
+
+      // Return series info with episodes array for easy access
+      return {
+        ...seriesInfo,
+        episodesList: Object.values(episodesData),
+      };
+    } catch (error) {
+      console.error('Failed to fetch series info:', error);
+      set({ error: 'Failed to load series details.', loading: false });
+      throw error;
+    }
+  },
 }));
 
 export default useVODStore;
diff --git a/frontend/src/store/userAgents.jsx b/frontend/src/store/userAgents.jsx
index 6693e830..2254118a 100644
--- a/frontend/src/store/userAgents.jsx
+++ b/frontend/src/store/userAgents.jsx
@@ -1,5 +1,5 @@
-import { create } from "zustand";
-import api from "../api";
+import { create } from 'zustand';
+import api from '../api';
 
 const useUserAgentsStore = create((set) => ({
   userAgents: [],
@@ -12,8 +12,8 @@ const useUserAgentsStore = create((set) => ({
       const userAgents = await api.getUserAgents();
       set({ userAgents: userAgents, isLoading: false });
     } catch (error) {
-      console.error("Failed to fetch userAgents:", error);
-      set({ error: "Failed to load userAgents.", isLoading: false });
+      console.error('Failed to fetch userAgents:', error);
+      set({ error: 'Failed to load userAgents.', isLoading: false });
     }
   },
 
@@ -25,14 +25,14 @@ const useUserAgentsStore = create((set) => ({
   updateUserAgent: (userAgent) =>
     set((state) => ({
       userAgents: state.userAgents.map((ua) =>
-        ua.id === userAgent.id ? userAgent : ua,
+        ua.id === userAgent.id ? userAgent : ua
       ),
     })),
 
   removeUserAgents: (userAgentIds) =>
     set((state) => ({
       userAgents: state.userAgents.filter(
-        (userAgent) => !userAgentIds.includes(userAgent.id),
+        (userAgent) => !userAgentIds.includes(userAgent.id)
       ),
     })),
 }));
diff --git a/frontend/src/store/warnings.jsx b/frontend/src/store/warnings.jsx
index 3a57b21f..59f5f157 100644
--- a/frontend/src/store/warnings.jsx
+++ b/frontend/src/store/warnings.jsx
@@ -1,29 +1,29 @@
 import { create } from 'zustand';
 
 const useWarningsStore = create((set) => ({
-    // Map of action keys to whether they're suppressed
-    suppressedWarnings: {},
+  // Map of action keys to whether they're suppressed
+  suppressedWarnings: {},
 
-    // Function to check if a warning is suppressed
-    isWarningSuppressed: (actionKey) => {
-        const state = useWarningsStore.getState();
-        return state.suppressedWarnings[actionKey] === true;
-    },
+  // Function to check if a warning is suppressed
+  isWarningSuppressed: (actionKey) => {
+    const state = useWarningsStore.getState();
+    return state.suppressedWarnings[actionKey] === true;
+  },
 
-    // Function to suppress a warning
-    suppressWarning: (actionKey, suppressed = true) => {
-        set((state) => ({
-            suppressedWarnings: {
-                ...state.suppressedWarnings,
-                [actionKey]: suppressed
-            }
-        }));
-    },
+  // Function to suppress a warning
+  suppressWarning: (actionKey, suppressed = true) => {
+    set((state) => ({
+      suppressedWarnings: {
+        ...state.suppressedWarnings,
+        [actionKey]: suppressed,
+      },
+    }));
+  },
 
-    // Function to reset all suppressions
-    resetSuppressions: () => {
-        set({ suppressedWarnings: {} });
-    }
+  // Function to reset all suppressions
+  resetSuppressions: () => {
+    set({ suppressedWarnings: {} });
+  },
 }));
 
 export default useWarningsStore;