beta keys list filter show only unredeemed checkbox

packages/fakeyou.com/src/components/common/Checkbox/Checkbox.scss

@@ -1,43 +1,57 @@
 @import "scss/colours.scss";
 
 .fy-checkbox-frame {
-  margin-bottom: .5rem;
+  margin-bottom: 0.5rem;
   white-space: nowrap;
   cursor: pointer;
 
   label {
-    margin-left: .5rem;
-  cursor: pointer;
+    margin-left: 0.6rem;
+    cursor: pointer;
   }
 }
 
-.fy-checkbox-primary-unchecked, .fy-checkbox-primary-checked {
+.fy-checkbox-primary-unchecked,
+.fy-checkbox-primary-checked {
   .fy-checkbox {
     background-color: $primary;
   }
-   &:hover {
+  &:hover {
     .fy-checkbox {
       background-color: lighten($primary, 5%);
     }
   }
 }
 
-.fy-checkbox-secondary-unchecked, .fy-checkbox-secondary-checked {
+.fy-checkbox-secondary-unchecked,
+.fy-checkbox-secondary-checked {
   .fy-checkbox {
     background-color: $secondary;
   }
-   &:hover {
+  &:hover {
     .fy-checkbox {
       background-color: $secondary-light;
     }
   }
 }
 
+.fy-checkbox-secondary-checked {
+  .fy-checkbox {
+    background-color: $primary;
+  }
+  &:hover {
+    .fy-checkbox {
+      background-color: lighten($primary, 5%);
+    }
+  }
+}
+
 .fy-checkbox {
-  border-radius: .5rem;
+  border-radius: 0.35rem;
   display: inline-block;
   vertical-align: middle;
-  height: 2rem;
-  width: 2rem;
+  height: 1.5rem;
+  width: 1.5rem;
   stroke: white;
-}
+  transition: 0.2s;
+}

packages/fakeyou.com/src/components/common/Checkbox/Checkbox.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 import { Check } from "components/svg";
 import { useId } from "hooks";
 import makeClass from "resources/makeClass";
@@ -10,18 +10,45 @@ interface Props {
   label?: string;
   name?: string;
   onChange?: any;
-  variant?: "primary" | "secondary"; 
+  variant?: "primary" | "secondary";
 }
 
-export default function Checkbox({ checked, className = "", label = "", name = "", onChange, variant = "secondary" }: Props) {
-  const onClick = ({ target }: any) => onChange({ target: { checked: !checked, name, type: 'checkbox' } });
+export default function Checkbox({
+  checked,
+  className = "",
+  label = "",
+  name = "",
+  onChange,
+  variant = "secondary",
+}: Props) {
+  const onClick = ({ target }: any) =>
+    onChange({ target: { checked: !checked, name, type: "checkbox" } });
   const id = "checkbox-" + useId();
-  return <div {...{
-    ...makeClass(`fy-checkbox-frame fy-checkbox-${ variant }-${ checked ? "checked" : "unchecked" }`,className),
-  }}>
-    <svg {...{ className: `fy-checkbox`, onClick }}>
-      <Check {...{ checked }}/>
-    </svg>
-    { label && <label {...{ className: "form-check-label", htmlFor: id, onClick }}>{ label }</label> } 
-  </div>
-};
+  return (
+    <div
+      {...{
+        ...makeClass(
+          `fy-checkbox-frame fy-checkbox-${variant}-${
+            checked ? "checked" : "unchecked"
+          }`,
+          className
+        ),
+      }}
+    >
+      <svg {...{ className: `fy-checkbox`, onClick }}>
+        <Check {...{ checked }} />
+      </svg>
+      {label && (
+        <label
+          {...{
+            className: "form-check-label fw-medium",
+            htmlFor: id,
+            onClick,
+          }}
+        >
+          {label}
+        </label>
+      )}
+    </div>
+  );
+}

packages/fakeyou.com/src/components/svg/Check/Check.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 import { a, useSpring } from "@react-spring/web";
 
 interface Props {
@@ -7,17 +7,21 @@ interface Props {
 
 export default function Check({ checked }: Props) {
   const style = useSpring({
-    config: { tension: 280, friction: 60 },
-    strokeDasharray: checked ? '28, 0' : '0,28'
+    config: { tension: 280, friction: 20 },
+    strokeDasharray: checked ? "28, 0" : "0,28",
   });
-  return <a.polyline {...{
-    fill: "none",
-    points: "9.5 18 14.5 22 22.5 12",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: "4",
-    strokeDashoffset: 4,
-    // ...rest,
-    style
-  }}/>;
-};
+  return (
+    <a.polyline
+      {...{
+        fill: "none",
+        points: "6,13 10,17 18,7",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "3",
+        strokeDashoffset: 4,
+        // ...rest,
+        style,
+      }}
+    />
+  );
+}

packages/fakeyou.com/src/v2/view/pages/beta_key/BetaKeysListPage.tsx

@@ -10,6 +10,7 @@ import {
 } from "@tanstack/react-table";
 import {
   Button,
+  Checkbox,
   Container,
   Pagination,
   Panel,
@@ -34,6 +35,7 @@ export default function BetaKeysListPage() {
   const urlQueries = new URLSearchParams(search);
   const [list, listSet] = useState<BetaKey[]>([]);
   const [username, usernameSet] = useState("");
+  const [onlyUnredeemed, onlyUnredeemedSet] = useState("false");
 
   const keysList = useListContent({
     addQueries: {
@@ -41,6 +43,7 @@ export default function BetaKeysListPage() {
       ...(username.trim()
         ? prepFilter(username, "maybe_referrer_username")
         : {}),
+      ...prepFilter(onlyUnredeemed, "only_list_remaining"),
     },
     addSetters: { usernameSet },
     debug: "ListBetaKeys",
@@ -170,25 +173,39 @@ export default function BetaKeysListPage() {
     usernameSet(e.target.value);
   };
 
+  const handleShowOnlyUnredeemed = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onlyUnredeemedSet(e.target.checked ? "true" : "false");
+    keysList.reFetch();
+  };
+
   return (
     <Container type="panel-full">
       <PageHeader title="Beta Keys List" subText="List of beta keys created" />
       <Panel padding={true}>
         <div>
           <div className="d-flex flex-column flex-lg-row gap-3">
-            <div className="d-flex gap-1 flex-grow-1">
-              <TempInput
-                placeholder="Search by Referrer Username"
-                value={username}
-                onChange={handleSetUsername}
-                style={{ width: "240px" }}
-                onKeyPress={event => {
-                  if (event.key === "Enter") {
-                    keysList.reFetch();
-                  }
-                }}
+            <div className="d-flex flex-column flex-lg-row align-items-lg-center gap-3 gap-lg-5 flex-grow-1">
+              <div className="d-flex gap-1 align-items-center">
+                <TempInput
+                  placeholder="Search by Referrer Username"
+                  value={username}
+                  onChange={handleSetUsername}
+                  style={{ width: "240px" }}
+                  onKeyPress={event => {
+                    if (event.key === "Enter") {
+                      keysList.reFetch();
+                    }
+                  }}
+                />
+                <Button label="Search" onClick={keysList.reFetch} />
+              </div>
+
+              <Checkbox
+                label="Show only unredeemed"
+                className="mb-0 fs-7"
+                onChange={handleShowOnlyUnredeemed}
+                checked={onlyUnredeemed === "true"}
               />
-              <Button label="Search" onClick={keysList.reFetch} />
             </div>
             <Pagination {...paginationProps} />
           </div>