diff --git a/apps/web/src/app/_components/candidate/candidate-action.tsx b/apps/web/src/app/_components/candidate/candidate-action.tsx
index 15236759..e5c9c834 100644
--- a/apps/web/src/app/_components/candidate/candidate-action.tsx
+++ b/apps/web/src/app/_components/candidate/candidate-action.tsx
@@ -28,7 +28,7 @@ interface IProps {
   dialogOpen: boolean;
   openSetter: React.Dispatch<React.SetStateAction<boolean>>;
   name: string;
-  id: string;
+  id: number;
 }
 
 export function EditCandidate(props: IProps) {
@@ -80,6 +80,7 @@ export function EditCandidate(props: IProps) {
       return;
     }
 
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const file = values.image.item(0)!;
     const image = await toBase64(file);
 
@@ -170,6 +171,7 @@ export function EditCandidate(props: IProps) {
             <Button
               type="submit"
               className="md:w-fit"
+              // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
               disabled={stillTheSameValue || candidateEditMutation.isPending}
             >
               Edit
diff --git a/apps/web/src/app/_components/candidate/data-table.tsx b/apps/web/src/app/_components/candidate/data-table.tsx
index 4161b99c..a3266625 100644
--- a/apps/web/src/app/_components/candidate/data-table.tsx
+++ b/apps/web/src/app/_components/candidate/data-table.tsx
@@ -1,19 +1,8 @@
 "use client";
 
 import type { RouterOutputs } from "@sora-vp/api";
-import type {
-  ColumnDef,
-  ColumnFiltersState,
-  SortingState,
-  VisibilityState,
-} from "@tanstack/react-table";
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
+import type { ColumnDef, VisibilityState } from "@tanstack/react-table";
+import { createContext, useContext, useEffect, useState } from "react";
 import {
   flexRender,
   getCoreRowModel,
@@ -28,7 +17,6 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@sora-vp/ui/dropdown-menu";
 import { Skeleton } from "@sora-vp/ui/skeleton";
@@ -40,13 +28,12 @@ import {
   TableHeader,
   TableRow,
 } from "@sora-vp/ui/table";
-import { toast } from "@sora-vp/ui/toast";
 
 import { api } from "~/trpc/react";
 import { DeleteCandidate, EditCandidate } from "./candidate-action";
 import { NewCandidate } from "./new-candidate";
 
-type CandidateList = RouterOutputs["candidate"]["candidateList"][number];
+type CandidateList = RouterOutputs["candidate"]["candidateQuery"][number];
 
 export const GlobalSystemAllowance = createContext(true);
 
@@ -59,17 +46,20 @@ const columns: ColumnDef<CandidateList>[] = [
     accessorKey: "counter",
     header: "Jumlah Pemilih",
     cell: ({ row }) => (
-      <span>{row.getValue("counter").toLocaleString("id-ID")} Orang</span>
+      <span>{row.original.counter.toLocaleString("id-ID")} Orang</span>
     ),
   },
   {
     accessorKey: "image",
     header: "Gambar Kandidat",
     cell: ({ row }) => (
-      <img
-        className="w-60 rounded border"
-        src={`/api/uploads/${row.getValue("image")}`}
-      />
+      <>
+        {/*  eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          className="w-60 rounded border"
+          src={`/api/uploads/${row.original.image}`}
+        />
+      </>
     ),
   },
   {
@@ -245,7 +235,7 @@ export function DataTable() {
                 </TableRow>
               ) : null}
 
-              {candidateQuery.isLoading && !candidateQuery.isError ? (
+              {candidateQuery.isLoading ? (
                 <>
                   {Array.from({ length: 10 }).map((_, idx) => (
                     <TableRow key={idx}>
@@ -257,7 +247,7 @@ export function DataTable() {
                 </>
               ) : null}
 
-              {table.getRowModel().rows?.length ? (
+              {table.getRowModel().rows.length > 0 ? (
                 table.getRowModel().rows.map((row) => (
                   <TableRow
                     key={row.id}
diff --git a/apps/web/src/app/_components/candidate/new-candidate.tsx b/apps/web/src/app/_components/candidate/new-candidate.tsx
index 8630234f..1ee88e60 100644
--- a/apps/web/src/app/_components/candidate/new-candidate.tsx
+++ b/apps/web/src/app/_components/candidate/new-candidate.tsx
@@ -26,16 +26,20 @@ import { GlobalSystemAllowance } from "./data-table";
 
 export interface FormSchema {
   name: string;
-  image: File;
+  image: FileList;
 }
 
-export const toBase64 = (file: File) =>
+export const toBase64 = (file: File): Promise<string> =>
   new Promise((resolve, reject) => {
     const reader = new FileReader();
     reader.readAsDataURL(file);
     reader.onload = () => {
-      const splitted = reader.result!.split(",");
-      resolve(splitted.at(1) as string);
+      const outputResult = reader.result as string;
+
+      const splitted = outputResult.split(",");
+
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      resolve(splitted.at(1)!);
     };
     reader.onerror = reject;
   });
@@ -80,6 +84,7 @@ export function NewCandidate() {
   }, [candidateMutation.isPending]);
 
   async function onSubmit(values: FormSchema) {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const file = values.image.item(0)!;
     const image = await toBase64(file);
 
diff --git a/apps/web/src/app/_components/nav/resizeable-nav.tsx b/apps/web/src/app/_components/nav/resizeable-nav.tsx
index 4b70a904..dfe84db1 100644
--- a/apps/web/src/app/_components/nav/resizeable-nav.tsx
+++ b/apps/web/src/app/_components/nav/resizeable-nav.tsx
@@ -18,7 +18,7 @@ import { NavItems } from "./nav-items";
 import { TopNavbar } from "./top-navbar";
 
 interface Props {
-  children: React.ReacNode;
+  children: React.ReactNode;
   role: "admin" | "comittee";
   defaultLayout: number[] | undefined;
   defaultCollapsed?: boolean;
diff --git a/apps/web/src/app/_components/participant/data-table.tsx b/apps/web/src/app/_components/participant/data-table.tsx
index 19890628..0000aadc 100644
--- a/apps/web/src/app/_components/participant/data-table.tsx
+++ b/apps/web/src/app/_components/participant/data-table.tsx
@@ -7,13 +7,7 @@ import type {
   SortingState,
   VisibilityState,
 } from "@tanstack/react-table";
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
+import { createContext, useContext, useEffect, useState } from "react";
 import { Space_Mono } from "next/font/google";
 import {
   flexRender,
@@ -32,8 +26,6 @@ import {
   ChevronRightIcon,
   ChevronsLeft,
   ChevronsRight,
-  FileJson,
-  FileSpreadsheet,
   MoreHorizontal,
   PencilLine,
   Trash2,
@@ -46,7 +38,6 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@sora-vp/ui/dropdown-menu";
 import { Input } from "@sora-vp/ui/input";
@@ -116,8 +107,8 @@ const columns: ColumnDef<ParticipantList>[] = [
     cell: ({ row }) => (
       <Tooltip>
         <TooltipTrigger
-          onClick={() => {
-            navigator.clipboard.writeText(row.getValue("qrId"));
+          onClick={async () => {
+            await navigator.clipboard.writeText(row.getValue("qrId"));
             toast.success("Berhasil menyalin QR ID!");
           }}
         >
@@ -142,7 +133,7 @@ const columns: ColumnDef<ParticipantList>[] = [
           </TooltipTrigger>
           <TooltipContent>
             <p>
-              {row.getValue("alreadyAttended")
+              {row.original.attendedAt
                 ? format(
                     row.original.attendedAt,
                     "EEEE, dd MMMM yyy, kk.mm.ss",
@@ -170,7 +161,7 @@ const columns: ColumnDef<ParticipantList>[] = [
           </TooltipTrigger>
           <TooltipContent>
             <p>
-              {row.getValue("alreadyChoosing")
+              {row.original.choosingAt
                 ? format(
                     row.original.choosingAt,
                     "EEEE, dd MMMM yyy, kk.mm.ss",
@@ -194,8 +185,11 @@ const columns: ColumnDef<ParticipantList>[] = [
           <span>
             {formatDuration(
               intervalToDuration({
-                start: row.original.attendedAt,
-                end: row.original.choosingAt,
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                start: row.original.attendedAt!,
+
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                end: row.original.choosingAt!,
               }),
               { locale: id },
             )}
@@ -271,14 +265,16 @@ const columns: ColumnDef<ParticipantList>[] = [
             dialogOpen={openEdit}
             openSetter={setOpenEdit}
             name={participant.name}
-            qrId={participant.qrId}
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            qrId={participant.qrId!}
             subpart={participant.subpart}
           />
           <DeleteParticipant
             dialogOpen={openDelete}
             openSetter={setOpenDelete}
             name={participant.name}
-            qrId={participant.qrId}
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            qrId={participant.qrId!}
           />
         </>
       );
@@ -346,9 +342,7 @@ export function DataTable() {
             <Input
               placeholder="Cari berdasarkan nama peserta..."
               value={
-                (table
-                  .getColumn("participantName")
-                  ?.getFilterValue() as string) ?? ""
+                table.getColumn("participantName")?.getFilterValue() as string
               }
               onChange={(event) =>
                 table
@@ -417,7 +411,7 @@ export function DataTable() {
                   </TableRow>
                 ) : null}
 
-                {participantQuery.isLoading && !participantQuery.isError ? (
+                {participantQuery.isLoading ? (
                   <>
                     {Array.from({ length: 10 }).map((_, idx) => (
                       <TableRow key={idx}>
@@ -430,7 +424,7 @@ export function DataTable() {
                 ) : null}
 
                 <TooltipProvider>
-                  {table.getRowModel().rows?.length ? (
+                  {table.getRowModel().rows.length ? (
                     table.getRowModel().rows.map((row) => (
                       <TableRow
                         key={row.id}
diff --git a/apps/web/src/app/_components/participant/export.tsx b/apps/web/src/app/_components/participant/export.tsx
index bd5fdbe0..b39bac1f 100644
--- a/apps/web/src/app/_components/participant/export.tsx
+++ b/apps/web/src/app/_components/participant/export.tsx
@@ -139,11 +139,11 @@ export function ExportXLSX() {
             };
           }
 
-          worksheet.alignment = {
+          firstRow.alignment = {
             vertical: "middle",
             horizontal: "center",
           };
-          worksheet.font = {
+          firstRow.font = {
             bold: true,
           };
 
diff --git a/apps/web/src/app/_components/participant/new-participant.tsx b/apps/web/src/app/_components/participant/new-participant.tsx
index 427f37c5..00639711 100644
--- a/apps/web/src/app/_components/participant/new-participant.tsx
+++ b/apps/web/src/app/_components/participant/new-participant.tsx
@@ -1,11 +1,11 @@
 "use client";
 
-import { memo, useCallback, useEffect, useState } from "react";
+import type { z } from "zod";
+import { memo, useCallback, useState } from "react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { parse as parseCSV } from "csv-parse";
 import { FileText, UserPlus } from "lucide-react";
 import { useForm } from "react-hook-form";
-import { z } from "zod";
 
 import { Button } from "@sora-vp/ui/button";
 import {
@@ -13,7 +13,6 @@ import {
   DialogClose,
   DialogContent,
   DialogDescription,
-  DialogFooter,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
@@ -34,7 +33,9 @@ import { participant } from "@sora-vp/validators";
 import { api } from "~/trpc/react";
 
 type SingleFormSchema = z.infer<typeof participant.SharedAddParticipant>;
-type UploadFormSchema = { csv: FileList };
+interface UploadFormSchema {
+  csv: FileList;
+}
 
 export const ReusableDialog = memo(function MemoizedReusable({
   dialogOpen,
@@ -182,7 +183,7 @@ export function SingleNewParticipant() {
   );
 }
 
-export function UploadNewParticipant(params: type) {
+export function UploadNewParticipant() {
   const [isOpen, setDialogOpen] = useState(false);
   const [readLock, setReadLock] = useState(false);
 
@@ -193,7 +194,7 @@ export function UploadNewParticipant(params: type) {
   });
 
   const insertManyMutation = api.participant.insertManyParticipant.useMutation({
-    onSuccess(result) {
+    onSuccess() {
       toast.success("Berhasil mengunggah file csv!", {
         description: "Seluruh peserta yang terdaftar berhasil ditambahkan!",
       });
@@ -217,6 +218,7 @@ export function UploadNewParticipant(params: type) {
   async function onSubmit(values: UploadFormSchema) {
     setReadLock(true);
 
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const file = values.csv.item(0)!;
     const text = await file.text();
 
diff --git a/apps/web/src/app/_components/participant/participant-action.tsx b/apps/web/src/app/_components/participant/participant-action.tsx
index 9636fe49..32020863 100644
--- a/apps/web/src/app/_components/participant/participant-action.tsx
+++ b/apps/web/src/app/_components/participant/participant-action.tsx
@@ -1,10 +1,9 @@
 "use client";
 
+import type { z } from "zod";
 import { useMemo, useState } from "react";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { FileText, UserPlus } from "lucide-react";
 import { useForm, useWatch } from "react-hook-form";
-import { z } from "zod";
 
 import { Button } from "@sora-vp/ui/button";
 import { DialogClose, DialogDescription } from "@sora-vp/ui/dialog";
@@ -41,6 +40,7 @@ export function EditParticipant(props: IProps) {
     resolver: zodResolver(participant.SharedAddParticipant),
     defaultValues: {
       name: props.name,
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       subpart: props.subpart!,
     },
   });
@@ -79,7 +79,7 @@ export function EditParticipant(props: IProps) {
     <ReusableDialog
       dialogOpen={props.dialogOpen || participantEditMutation.isPending}
       setOpen={() => {
-        if (!participant.isPending)
+        if (!participantEditMutation.isPending)
           props.openSetter((prev) => {
             const newValue = !prev;
 
diff --git a/apps/web/src/app/_components/settings/duration.tsx b/apps/web/src/app/_components/settings/duration.tsx
index 531e24b4..ff7bf935 100644
--- a/apps/web/src/app/_components/settings/duration.tsx
+++ b/apps/web/src/app/_components/settings/duration.tsx
@@ -1,10 +1,10 @@
 "use client";
 
+import type { z } from "zod";
 import { useEffect } from "react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { format, startOfDay } from "date-fns";
 import { useForm } from "react-hook-form";
-import { z } from "zod";
 
 import { Button } from "@sora-vp/ui/button";
 import {
@@ -53,9 +53,13 @@ export function Duration() {
 
   useEffect(() => {
     if (settingsQuery.data && !changeDuration.isPending) {
-      form.setValue("startTime", settingsQuery.data.startTime);
-      form.setValue("endTime", settingsQuery.data.endTime);
+      if (settingsQuery.data.startTime)
+        form.setValue("startTime", settingsQuery.data.startTime);
+      if (settingsQuery.data.endTime)
+        form.setValue("endTime", settingsQuery.data.endTime);
     }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [settingsQuery.data, changeDuration.isPending]);
 
   return (
@@ -79,6 +83,7 @@ export function Duration() {
                     type="datetime-local"
                     min={format(startOfDay(new Date()), "yyyy-MM-dd'T'HH:mm")}
                     value={
+                      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                       field.value
                         ? format(field.value, "yyyy-MM-dd'T'HH:mm")
                         : ""
@@ -113,14 +118,16 @@ export function Duration() {
                   <Input
                     type="datetime-local"
                     min={
-                      form.getValues("startedAt")
+                      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                      form.getValues("startTime")
                         ? format(
-                            form.getValues("startedAt"),
+                            form.getValues("startTime"),
                             "yyyy-MM-dd'T'HH:mm",
                           )
                         : ""
                     }
                     value={
+                      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                       field.value
                         ? format(field.value, "yyyy-MM-dd'T'HH:mm")
                         : ""
diff --git a/apps/web/src/app/_components/statistic/essential.tsx b/apps/web/src/app/_components/statistic/essential.tsx
index 1b0c671b..e6631cda 100644
--- a/apps/web/src/app/_components/statistic/essential.tsx
+++ b/apps/web/src/app/_components/statistic/essential.tsx
@@ -1,14 +1,7 @@
 "use client";
 
 import { cn } from "@sora-vp/ui";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@sora-vp/ui/card";
+import { Card, CardContent, CardHeader, CardTitle } from "@sora-vp/ui/card";
 import { Skeleton } from "@sora-vp/ui/skeleton";
 
 import { api } from "~/trpc/react";
@@ -29,16 +22,16 @@ export default function Essential() {
         </>
       ) : (
         <>
-          <CandidateAccumulation count={essentialQuery.data.candidates} />
-          <ParticipantAccumulation count={essentialQuery.data.participants} />
-          <IsDataMatch isMatch={essentialQuery.data.isMatch} />
+          <CandidateAccumulation count={essentialQuery.data?.candidates} />
+          <ParticipantAccumulation count={essentialQuery.data?.participants} />
+          <IsDataMatch isMatch={essentialQuery.data?.isMatch} />
         </>
       )}
     </>
   );
 }
 
-function CandidateAccumulation(props: { count: number | null }) {
+function CandidateAccumulation(props: { count?: number | null }) {
   return (
     <Card>
       <CardHeader>
@@ -66,7 +59,7 @@ function CandidateAccumulation(props: { count: number | null }) {
   );
 }
 
-function ParticipantAccumulation(props: { count: number | null }) {
+function ParticipantAccumulation(props: { count?: number | null }) {
   return (
     <Card>
       <CardHeader>
@@ -94,7 +87,7 @@ function ParticipantAccumulation(props: { count: number | null }) {
   );
 }
 
-function IsDataMatch(props: { isMatch: boolean | null }) {
+function IsDataMatch(props: { isMatch?: boolean | null }) {
   return (
     <Card>
       <CardHeader>
diff --git a/apps/web/src/app/_components/statistic/graphic.tsx b/apps/web/src/app/_components/statistic/graphic.tsx
index 6c54be9d..84d85609 100644
--- a/apps/web/src/app/_components/statistic/graphic.tsx
+++ b/apps/web/src/app/_components/statistic/graphic.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useMemo } from "react";
-import { FileBarChart } from "lucide-react";
+// import { FileBarChart } from "lucide-react";
 import { useTheme } from "next-themes";
 import {
   Bar,
@@ -29,7 +29,7 @@ export function Graphic() {
   );
 
   const percentageData = useMemo(() => {
-    if (!graphicalDataQuery.data || graphicalDataQuery.data?.length < 1)
+    if (!graphicalDataQuery.data || graphicalDataQuery.data.length < 1)
       return null;
 
     const allCounter = graphicalDataQuery.data.map((d) => d.counter);
@@ -52,7 +52,7 @@ export function Graphic() {
         <Skeleton className="h-[350px] w-full" />
       ) : (
         <>
-          {graphicalDataQuery.data.length < 1 ? (
+          {graphicalDataQuery.data && graphicalDataQuery.data.length < 1 ? (
             <div className="flex h-[350px] items-center justify-center">
               <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
                 N/A
diff --git a/apps/web/src/app/api/uploads/[filename]/route.ts b/apps/web/src/app/api/uploads/[filename]/route.ts
index 8bfe5c67..09ad2bb3 100644
--- a/apps/web/src/app/api/uploads/[filename]/route.ts
+++ b/apps/web/src/app/api/uploads/[filename]/route.ts
@@ -19,5 +19,7 @@ export function GET(
   const image = fs.readFileSync(filePath);
   const contentType = mime.lookup(filePath);
 
-  return new Response(image, { headers: { "content-type": contentType } });
+  return new Response(image, {
+    headers: { "Content-Type": contentType as string },
+  });
 }
diff --git a/packages/api/src/router/candidate.ts b/packages/api/src/router/candidate.ts
index 4e67e148..418a482b 100644
--- a/packages/api/src/router/candidate.ts
+++ b/packages/api/src/router/candidate.ts
@@ -139,4 +139,4 @@ export const candidateRouter = {
           .where(eq(schema.candidates.id, input.id));
       }),
     ),
-} as TRPCRouterRecord;
+} satisfies TRPCRouterRecord;
diff --git a/packages/api/src/router/statistic.ts b/packages/api/src/router/statistic.ts
index 7b5e1cfb..42340ed2 100644
--- a/packages/api/src/router/statistic.ts
+++ b/packages/api/src/router/statistic.ts
@@ -43,4 +43,4 @@ export const statisticRouter = {
       success: true,
     };
   }),
-} as TRPCRouterRecord;
+} satisfies TRPCRouterRecord;