Add filter to contacts to hide NPCs

frontend/frontend/src/Pages/Char/Contacts.tsx

@@ -2,11 +2,14 @@ import TableWrapper from "../../Components/Tables/BaseTable/TableWrapper";
 import { components } from "../../api/CtApi";
 import { getCharacterContacts } from "../../api/character";
 import { createColumnHelper } from "@tanstack/react-table";
+import { useState } from "react";
+import { Badge, Card, Form, FormCheck } from "react-bootstrap";
 import { useQuery } from "react-query";
 import { useParams } from "react-router-dom";
 
 const CharacterContacts = () => {
   const { characterID } = useParams();
+  const [showNPC, setShowNPC] = useState(true);
 
   const { data, isFetching } = useQuery({
     queryKey: ["contacts", characterID],
@@ -21,6 +24,13 @@ const CharacterContacts = () => {
     }),
     columnHelper.accessor("contact.name", {
       header: "Contact",
+      cell: (cell) => {
+        return (
+          <>
+            {cell.getValue()} {cell.row.original.contact.id <= 4000000 && <Badge>NPC</Badge>}
+          </>
+        );
+      },
     }),
     columnHelper.accessor("blocked", {
       header: "Blocked",
@@ -36,9 +46,31 @@ const CharacterContacts = () => {
     }),
   ];
 
+  const data_filtered = data?.filter((row: any) => {
+    if (!showNPC) {
+      return row.contact.id > 4000000;
+    } else {
+      return true;
+    }
+  });
+
   return (
     <>
-      <TableWrapper {...{ data, isFetching, columns }} />
+      <Card.Header className="text-end">
+        <div className="d-flex justify-content-end">
+          <Form.Check // prettier-ignore
+            type="switch"
+            id="custom-switch"
+            label="Show NPC Contacts"
+            onChange={(event) => {
+              setShowNPC(event.target.checked);
+            }}
+            defaultChecked={showNPC}
+          />
+        </div>
+      </Card.Header>
+      <FormCheck></FormCheck>
+      <TableWrapper data={data_filtered} {...{ isFetching, columns }} />
     </>
   );
 };