fix: types

src/backend/routers/user.ts

@@ -1,6 +1,6 @@
 import { hasAuthenticated, hasAdmin, router } from "../trpc";
 import { z } from "zod";
-import { UserType, ROLE_OPTIONS } from "@/types/auth";
+import { UserType, ROLE_OPTIONS, Roles } from "@/types/auth";
 import { TRPCError } from "@trpc/server";
 
 export const sortOrderSchema = z.enum(["asc", "desc"]).default("asc");
@@ -20,9 +20,7 @@ const createUserSchema = z.object({
   first_name: z.string(),
   last_name: z.string(),
   email: z.string().email(),
-  role: z
-    .enum(["ADMIN", "CASE_MANAGER", "PARA"])
-    .transform((role) => role.toLowerCase()),
+  role: z.string().transform((role) => role.toUpperCase() as Roles),
 });
 
 const roleValues = ROLE_OPTIONS.map((r) => r.value) as [string, ...string[]];

src/components/table/types.ts

@@ -1,11 +1,13 @@
+import { Roles } from "@/types/auth";
+
 export type ColumnType = "text" | "number" | "select" | "date";
 
 export interface BaseEntity {
   id?: string | number;
   first_name: string;
   last_name: string;
   email: string;
-  [key: string]: string | number | Date | undefined;
+  role: Roles;
 }
 
 export interface SelectOption {

src/pages/admin/[user_id].tsx

@@ -149,12 +149,11 @@ const ViewUserPage = () => {
                     </Container>
                     <Container className={$CompassModal.editModalContainer}>
                       <Dropdown
-                        itemList={ROLE_OPTIONS}
+                        itemList={[...ROLE_OPTIONS]}
                         selectedOption={selectedRole}
                         setSelectedOption={setSelectedRole}
                         label="Role *"
                         className={$CompassModal.editModalTextfield}
-                        required
                       />
                     </Container>
                   </Stack>

src/pages/admin/index.tsx

@@ -4,14 +4,17 @@ import { Table2 } from "@/components/table/table2";
 import { ColumnDefinition, BaseEntity } from "@/components/table/types";
 import { useRouter } from "next/router";
 import { useState } from "react";
-import { ROLE_OPTIONS } from "@/types/auth";
+import { ROLE_OPTIONS, Roles } from "@/types/auth";
 import { getRoleLabel } from "@/types/auth";
 import { sortBySchema, sortOrderSchema } from "@/backend/routers/user";
 import { z } from "zod";
 
 interface User extends BaseEntity {
   user_id: string;
-  role: string;
+  first_name: string;
+  last_name: string;
+  email: string;
+  role: Roles;
 }
 
 type SortBy = z.infer<typeof sortBySchema>;
@@ -21,15 +24,16 @@ const AdminHome: React.FC = () => {
   const utils = trpc.useContext();
   const router = useRouter();
   const [page, setPage] = useState(1);
-  const [sortBy, setSortBy] = useState<SortBy>("first_name");
+  const [sortBy, setSortBy] =
+    useState<Omit<keyof User, "user_id">>("first_name");
   const [sortOrder, setSortOrder] = useState<SortOrder>("asc");
   const [searchTerm, setSearchTerm] = useState("");
   const pageSize = 10;
 
   const { data, isLoading } = trpc.user.getUsers.useQuery({
     page,
     pageSize,
-    sortBy,
+    sortBy: sortBy as SortBy,
     sortOrder,
     search: searchTerm,
   });
@@ -51,7 +55,7 @@ const AdminHome: React.FC = () => {
     }
   };
 
-  const handleSort = (newSortBy: SortBy, newSortOrder: SortOrder) => {
+  const handleSort = (newSortBy: keyof User, newSortOrder: SortOrder) => {
     setSortBy(newSortBy);
     setSortOrder(newSortOrder);
   };
@@ -85,7 +89,7 @@ const AdminHome: React.FC = () => {
       id: "role",
       label: "Role",
       type: "select",
-      options: ROLE_OPTIONS,
+      options: [...ROLE_OPTIONS],
       customRender: (value) => (value ? getRoleLabel(value as string) : ""),
     },
   ];
@@ -95,14 +99,14 @@ const AdminHome: React.FC = () => {
   return (
     <div>
       <Table2<User>
-        data={data?.users ?? []}
+        data={(data?.users as User[]) ?? []}
         columns={columns}
         type="Users"
         onRowClick={handleRowClick}
         page={page}
         totalPages={data?.totalPages ?? 1}
         onPageChange={setPage}
-        sortBy={sortBy}
+        sortBy={sortBy as SortBy}
         sortOrder={sortOrder}
         onSort={handleSort}
         onSearch={handleSearch}

src/types/auth.ts

@@ -27,11 +27,14 @@ export enum UserType {
 }
 
 export const ROLE_OPTIONS = [
+  { label: "User", value: "USER" },
   { label: "Para", value: "PARA" },
   { label: "Case Manager", value: "CASE_MANAGER" },
   { label: "Admin", value: "ADMIN" },
 ] as const;
 
+export type Roles = (typeof ROLE_OPTIONS)[number]["value"];
+
 export function getRoleLabel(role: string): string {
   const option = ROLE_OPTIONS.find(
     (opt) => opt.value.toLowerCase() === role.toLowerCase()