1 files changed, 46 insertions, 40 deletions

diff --git a/frontend/src/pages/Series/index.tsx b/frontend/src/pages/Series/index.tsx
index 66921347c..229082444 100644
--- a/frontend/src/pages/Series/index.tsx
+++ b/frontend/src/pages/Series/index.tsx
@@ -1,61 +1,68 @@
+import { FunctionComponent, useMemo } from "react";
+import { Link } from "react-router-dom";
+import { Anchor, Container, Progress } from "@mantine/core";
+import { useDocumentTitle } from "@mantine/hooks";
+import { faBookmark as farBookmark } from "@fortawesome/free-regular-svg-icons";
+import { faBookmark, faWrench } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ColumnDef } from "@tanstack/react-table";
 import { useSeriesModification, useSeriesPagination } from "@/apis/hooks";
 import { Action } from "@/components";
 import LanguageProfileName from "@/components/bazarr/LanguageProfile";
 import { ItemEditModal } from "@/components/forms/ItemEditForm";
 import { useModals } from "@/modules/modals";
 import ItemView from "@/pages/views/ItemView";
-import { useTableStyles } from "@/styles";
-import { faBookmark as farBookmark } from "@fortawesome/free-regular-svg-icons";
-import { faBookmark, faWrench } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Anchor, Container, Progress } from "@mantine/core";
-import { useDocumentTitle } from "@mantine/hooks";
-import { FunctionComponent, useMemo } from "react";
-import { Link } from "react-router-dom";
-import { Column } from "react-table";
 
 const SeriesView: FunctionComponent = () => {
   const mutation = useSeriesModification();
 
   const query = useSeriesPagination();
 
-  const columns: Column<Item.Series>[] = useMemo<Column<Item.Series>[]>(
+  const modals = useModals();
+
+  const columns = useMemo<ColumnDef<Item.Series>[]>(
     () => [
       {
-        accessor: "monitored",
-        Cell: ({ value }) => (
+        id: "monitored",
+        cell: ({
+          row: {
+            original: { monitored },
+          },
+        }) => (
           <FontAwesomeIcon
-            title={value ? "monitored" : "unmonitored"}
-            icon={value ? faBookmark : farBookmark}
+            title={monitored ? "monitored" : "unmonitored"}
+            icon={monitored ? faBookmark : farBookmark}
           ></FontAwesomeIcon>
         ),
       },
       {
-        Header: "Name",
-        accessor: "title",
-        Cell: ({ row, value }) => {
-          const { classes } = useTableStyles();
-          const target = `/series/${row.original.sonarrSeriesId}`;
+        header: "Name",
+        accessorKey: "title",
+        cell: ({ row: { original } }) => {
+          const target = `/series/${original.sonarrSeriesId}`;
           return (
-            <Anchor className={classes.primary} component={Link} to={target}>
-              {value}
+            <Anchor className="table-primary" component={Link} to={target}>
+              {original.title}
             </Anchor>
           );
         },
       },
       {
-        Header: "Languages Profile",
-        accessor: "profileId",
-        Cell: ({ value }) => {
+        header: "Languages Profile",
+        accessorKey: "profileId",
+        cell: ({ row: { original } }) => {
           return (
-            <LanguageProfileName index={value} empty=""></LanguageProfileName>
+            <LanguageProfileName
+              index={original.profileId}
+              empty=""
+            ></LanguageProfileName>
           );
         },
       },
       {
-        Header: "Episodes",
-        accessor: "episodeFileCount",
-        Cell: (row) => {
+        header: "Episodes",
+        accessorKey: "episodeFileCount",
+        cell: (row) => {
           const { episodeFileCount, episodeMissingCount, profileId, title } =
             row.row.original;
           let progress = 0;
@@ -70,25 +77,24 @@ const SeriesView: FunctionComponent = () => {
           }
 
           return (
-            <Progress
-              key={title}
-              size="xl"
-              color={episodeMissingCount === 0 ? "brand" : "yellow"}
-              value={progress}
-              label={label}
-            ></Progress>
+            <Progress.Root key={title} size="xl">
+              <Progress.Section
+                value={progress}
+                color={episodeMissingCount === 0 ? "brand" : "yellow"}
+              >
+                <Progress.Label>{label}</Progress.Label>
+              </Progress.Section>
+            </Progress.Root>
           );
         },
       },
       {
-        accessor: "sonarrSeriesId",
-        Cell: ({ row: { original } }) => {
-          const modals = useModals();
+        id: "sonarrSeriesId",
+        cell: ({ row: { original } }) => {
           return (
             <Action
               label="Edit Series"
               tooltip={{ position: "left" }}
-              variant="light"
               onClick={() =>
                 modals.openContextModal(
                   ItemEditModal,
@@ -107,7 +113,7 @@ const SeriesView: FunctionComponent = () => {
         },
       },
     ],
-    [mutation],
+    [mutation, modals],
   );
 
   useDocumentTitle("Series - Bazarr");