Change Columns and Tag to tsx

src/components/Checkbox.tsx

@@ -2,7 +2,7 @@ import { Checkbox as Check } from "./ui/checkbox";
 
 type checkbox = {
   toggle: boolean;
-  text: string;
+  text?: string;
   color?: string;
   onClick?: () => void;
 };

src/components/admin/Tag.tsx

@@ -0,0 +1,31 @@
+import { StatusMapping } from "@/data/Statuses";
+
+type color = {
+  background: string;
+  text: string;
+  hover: string;
+};
+
+type props = {
+  color: color;
+  text: string;
+  onClick?: () => void;
+  classes?: string;
+  statuses?: StatusMapping;
+};
+
+const Tag = ({ color, text, onClick, classes, statuses }: props) => {
+  return (
+    <div
+      data-cy={`${text}-tag`}
+      className={`${classes} ${color.background} ${color.text} ${
+        onClick && `hover:cursor-pointer ${color.hover}`
+      } m-0 w-fit whitespace-nowrap rounded px-2 py-0.5 text-xs md:text-sm`}
+      onClick={onClick}
+    >
+      {isNaN(Number(text)) ? text : statuses?.[text as keyof StatusMapping]}
+    </div>
+  );
+};
+
+export default Tag;

src/data/Statuses.ts

@@ -1,7 +1,9 @@
 type Code = "1" | "0" | "-1";
 type Status = "accepted" | "pending" | "rejected";
 
-export const STATUSES: Record<Code, Status> = {
+export type StatusMapping = Record<Code, Status>;
+
+export const STATUSES: StatusMapping = {
   1: "accepted",
   0: "pending",
   "-1": "rejected",

src/data/admin/Columns.tsx

@@ -0,0 +1,67 @@
+import Tag from "@/components/admin/Tag";
+import { COLORS } from "../Tags";
+import Checkbox from "@/components/Checkbox";
+import { Table, Row } from "@tanstack/react-table";
+
+export const generateSelect = <TData extends object>() => ({
+  id: "select",
+  meta: { width: "w-1/12" },
+  header: ({ table }: { table: Table<TData> }) => (
+    <Checkbox
+      toggle={table.getIsAllRowsSelected()}
+      onClick={() => table.getToggleAllRowsSelectedHandler()}
+    />
+  ),
+  cell: ({ row }: { row: Row<TData> }) => (
+    <Checkbox
+      toggle={row.getIsSelected()}
+      onClick={() => row.getToggleSelectedHandler()}
+    />
+  ),
+});
+
+type cellProp = {
+  getValue: () => string;
+};
+
+type stringRecord = Record<string, string>;
+
+export const generateAffiliation = (affiliations: stringRecord) => ({
+  accessorKey: "affiliation",
+  header: "Affiliation",
+  meta: { width: "w-1/12" },
+  cell: ({ getValue }: cellProp) => (
+    <Tag
+      text={affiliations[getValue().toLowerCase()]}
+      color={COLORS[getValue().toLowerCase() as keyof typeof COLORS]}
+    />
+  ),
+});
+
+export const generateStatus = (statuses: stringRecord) => ({
+  accessorKey: "status",
+  header: "Status",
+  meta: { width: "w-[10%]" },
+  enableColumnFilter: true,
+  filterFn: (row: any, col: any, filter: string[]) => {
+    const status = row.getValue(col);
+    return filter.includes(status);
+  },
+  cell: ({ getValue }: cellProp) => (
+    <Tag
+      text={statuses[getValue()]}
+      color={COLORS[getValue() as keyof typeof COLORS]}
+    />
+  ),
+});
+export const generateTiers = (tiers: stringRecord) => ({
+  accessorKey: "tier",
+  header: "Tier",
+  meta: { width: "w-1/12" },
+  cell: ({ getValue }: cellProp) => (
+    <Tag
+      text={tiers[getValue()]}
+      color={COLORS[getValue() as keyof typeof COLORS]}
+    />
+  ),
+});