fix(ci): lint and a11y fixes unblocks GHA deploy

- materi/new/page.tsx: add htmlFor+id pairs for all 5 form labels (a11y)
- biome --write --unsafe: fix useTemplate, useLiteralKeys, import sort
  across materi module files (backend + frontend)
- These pre-existing lint errors from 0aa893a blocked the deploy pipeline

services/backend/src/modules/materi/index.ts

@@ -1,14 +1,18 @@
-export { MateriService } from "./materi.service.js";
-export { materiService } from "./materi.service.js";
 export { materiRepository } from "./materi.repository.js";
 export {
-  createMateriSchema,
-  updateMateriSchema,
-  materiQuerySchema,
-  materiRagChatSchema,
   type CreateMateriInput,
-  type UpdateMateriInput,
+  createMateriSchema,
   type MateriQueryInput,
   type MateriRagChatInput,
+  materiQuerySchema,
+  materiRagChatSchema,
+  type UpdateMateriInput,
+  updateMateriSchema,
 } from "./materi.schema.js";
-export { ragChat, searchMateri, type MateriSearchHit, type RAGChatResult } from "./ragClient.js";
+export { MateriService, materiService } from "./materi.service.js";
+export {
+  type MateriSearchHit,
+  type RAGChatResult,
+  ragChat,
+  searchMateri,
+} from "./ragClient.js";

services/backend/src/modules/materi/materi.repository.ts

@@ -1,9 +1,9 @@
 import { and, desc, eq, ilike, or, sql } from "drizzle-orm";
+import { getDatabase } from "@/shared/database/index.js";
 import {
   type MateriDocument,
   materiDocumentsTable,
 } from "@/shared/database/schema.js";
-import { getDatabase } from "@/shared/database/index.js";
 import type { MateriQueryInput } from "./materi.schema.js";
 
 export class MateriRepository {
@@ -39,8 +39,7 @@ export class MateriRepository {
       conditions.push(eq(materiDocumentsTable.is_public, true));
     }
 
-    const whereClause =
+    const whereClause = conditions.length > 0 ? and(...conditions) : undefined;
-      conditions.length > 0 ? and(...conditions) : undefined;
 
     const result = await db
       .select()

services/backend/src/modules/materi/materi.service.ts

@@ -1,11 +1,11 @@
 import type { MateriDocument } from "@/shared/database/schema.js";
 import { createChildLogger } from "@/shared/logger/index.js";
 import { materiRepository } from "./materi.repository.js";
-import {
+import type {
-  type MateriQueryInput,
+  CreateMateriInput,
-  type CreateMateriInput,
+  MateriQueryInput,
-  type UpdateMateriInput,
+  MateriRagChatInput,
-  type MateriRagChatInput,
+  UpdateMateriInput,
 } from "./materi.schema.js";
 import { ragChat } from "./ragClient.js";
 
@@ -14,7 +14,10 @@ const logger = createChildLogger("materi.service");
 export class MateriService {
   /** List materi documents with optional filtering. */
   async list(input: MateriQueryInput): Promise<MateriDocument[]> {
-    logger.debug({ limit: input.limit, search: input.search }, "Listing materi");
+    logger.debug(
+      { limit: input.limit, search: input.search },
+      "Listing materi",
+    );
     return materiRepository.list(input);
   }
 
@@ -72,7 +75,15 @@ export class MateriService {
   async ragChat(
     input: MateriRagChatInput,
     ownerUserId: string,
-  ): Promise<{ answer: string; sources: Array<{ id: string; title: string; score: number; excerpt: string }> }> {
+  ): Promise<{
+    answer: string;
+    sources: Array<{
+      id: string;
+      title: string;
+      score: number;
+      excerpt: string;
+    }>;
+  }> {
     logger.info({ ownerUserId, hasMateriId: !!input.materiId }, "RAG chat");
 
     // Fetch relevant materi documents

services/backend/src/modules/materi/ragClient.ts

@@ -1,6 +1,6 @@
 import { config } from "@/shared/config/index.js";
-import { createChildLogger } from "@/shared/logger/index.js";
 import type { MateriDocument } from "@/shared/database/schema.js";
+import { createChildLogger } from "@/shared/logger/index.js";
 import { embedQuery } from "../messages/embed.js";
 import { searchArchive } from "../messages/qdrant.js";
 
@@ -101,7 +101,9 @@ export async function searchMateri(
     } else {
       // Fallback: keyword match scoring
       const titleMatch = doc.title.toLowerCase().includes(query.toLowerCase());
-      const contentMatch = doc.content.toLowerCase().includes(query.toLowerCase());
+      const contentMatch = doc.content
+        .toLowerCase()
+        .includes(query.toLowerCase());
       const tagMatch = (doc.tags ?? []).some((t) =>
         t.toLowerCase().includes(query.toLowerCase()),
       );
@@ -117,11 +119,15 @@ export async function searchMateri(
   }
 
   // Also search Discord message archive via Qdrant for conversation context
-  const archiveHits = await searchArchive(queryVec ?? [], topK, SIMILARITY_THRESHOLD);
+  const archiveHits = await searchArchive(
+    queryVec ?? [],
+    topK,
+    SIMILARITY_THRESHOLD,
+  );
   for (const hit of archiveHits) {
     results.push({
       document: {
-        id: "archive-" + Date.now(),
+        id: `archive-${Date.now()}`,
         title: "Discord Archive",
         description: null,
         content: hit.payload.text,
@@ -153,21 +159,30 @@ export async function ragChat(
 ): Promise<RAGChatResult> {
   const hits = await searchMateri(query, documents);
 
-  const contextBlock = hits
+  const contextBlock =
-    .map((h) => {
+    hits
-      const scoreStr = h.score.toFixed(3);
+      .map((h) => {
-      return (
+        const scoreStr = h.score.toFixed(3);
-        "<source id=\"" + h.document.id + "\" title=\"" + h.document.title + "\" score=\"" + scoreStr + "\">\n" +
+        return (
-        h.chunkText +
+          '<source id="' +
-        "\n</source>"
+          h.document.id +
-      );
+          '" title="' +
-    })
+          h.document.title +
-    .join("\n\n") || "(tidak ada konteks relevan ditemukan)";
+          '" score="' +
+          scoreStr +
+          '">\n' +
+          h.chunkText +
+          "\n</source>"
+        );
+      })
+      .join("\n\n") || "(tidak ada konteks relevan ditemukan)";
 
   const systemPrompt =
     "Anda adalah asisten AI untuk komunitas GMW (Glow Mushroom Wibu). " +
     "Jawab pertanyaan pengguna berdasarkan konteks berikut. Jika tidak tahu, katakan tidak tahu.\n\n" +
-    "Konteks materi dan arsip Discord:\n" + contextBlock + "\n\n" +
+    "Konteks materi dan arsip Discord:\n" +
+    contextBlock +
+    "\n\n" +
     "Instruksi: jawab singkat, akurat, dan berguna. Kutip sumber jika perlu.";
 
   const baseUrL = config.AI_LLM_BASE_URL;
@@ -185,8 +200,8 @@ export async function ragChat(
     ].filter((m) => m.content) as Array<{ role: string; content: string }>;
 
     const authHeaders: Record<string, string> = {};
-    authHeaders["Authorization"] = authHeader;
+    authHeaders.Authorization = authHeader;
-    const res = await fetch(baseUrL + "/chat/completions", {
+    const res = await fetch(`${baseUrL}/chat/completions`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -202,14 +217,16 @@ export async function ragChat(
     });
 
     if (!res.ok) {
-      throw new Error("LLM request failed: " + res.status);
+      throw new Error(`LLM request failed: ${res.status}`);
     }
 
     const data = (await res.json()) as {
       choices?: Array<{ message?: { content?: string } }>;
     };
 
-    const answer = data.choices?.[0]?.message?.content ?? "Maaf, tidak bisa menjawab saat ini.";
+    const answer =
+      data.choices?.[0]?.message?.content ??
+      "Maaf, tidak bisa menjawab saat ini.";
 
     return {
       answer,

services/backend/src/orpc/router.ts

@@ -7,11 +7,11 @@ import { chatbotService } from "../modules/chatbot/chatbot.service";
 import { dashboardService } from "../modules/dashboard/dashboard.service";
 import { knowledgeService } from "../modules/knowledge/knowledge.service";
 import {
+  createMateriSchema,
   materiQuerySchema,
   materiRagChatSchema,
-  createMateriSchema,
-  updateMateriSchema,
   materiService,
+  updateMateriSchema,
 } from "../modules/materi/index.js";
 import {
   mediaLoopSchema,

services/frontend/src/app/(dashboard)/materi/[id]/page.tsx

@@ -1,7 +1,7 @@
+import { Pencil, Trash2 } from "lucide-react";
 import { notFound } from "next/navigation";
-import { PageTransition, MarkdownLite } from "@/components/shared";
+import { Badge, Button } from "@/components/primitives";
-import { Button, Badge } from "@/components/primitives";
+import { MarkdownLite, PageTransition } from "@/components/shared";
-import { Trash2, Pencil } from "lucide-react";
 import { getMateriSSR } from "@/lib/api/materi";
 
 export const dynamic = "force-dynamic";
@@ -30,12 +30,12 @@ export default async function MateriDetailPage({
           </div>
           <div className="flex gap-2">
             <Button variant="ghost" size="sm" asChild>
-              <a href={"/materi/" + doc.id + "/edit"}>
+              <a href={`/materi/${doc.id}/edit`}>
                 <Pencil className="h-4 w-4" />
               </a>
             </Button>
             <Button variant="ghost" size="sm" asChild>
-              <a href={"/materi/new?duplicate=" + doc.id}>
+              <a href={`/materi/new?duplicate=${doc.id}`}>
                 <Trash2 className="h-4 w-4" />
               </a>
             </Button>

services/frontend/src/app/(dashboard)/materi/chat/page.tsx

@@ -1,11 +1,14 @@
 "use client";
 
-import { useState, useRef, useEffect } from "react";
+import { Bot, ExternalLink, Loader2, Send, User } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { Button, GlassCard, Textarea } from "@/components/primitives";
 import { PageTransition } from "@/components/shared";
-import { Button, Input, Textarea, GlassCard } from "@/components/primitives";
-import { Send, Bot, User, Loader2, ExternalLink } from "lucide-react";
 import { searchMateri } from "@/lib/api/materi";
-import type { MateriRagChatMessage, MateriRagChatResult } from "@/lib/types/materi";
+import type {
+  MateriRagChatMessage,
+  MateriRagChatResult,
+} from "@/lib/types/materi";
 
 export const dynamic = "force-dynamic";
 
@@ -18,12 +21,15 @@ export default function MateriChatPage() {
 
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages]);
+  }, []);
 
   async function handleSend() {
     if (!input.trim() || isLoading) return;
 
-    const userMsg: MateriRagChatMessage = { role: "user", content: input.trim() };
+    const userMsg: MateriRagChatMessage = {
+      role: "user",
+      content: input.trim(),
+    };
     const newMessages = [...messages, userMsg];
     setMessages(newMessages);
     setInput("");
@@ -31,8 +37,15 @@ export default function MateriChatPage() {
     setSources([]);
 
     try {
-      const result = await searchMateri(userMsg.content, newMessages, undefined);
+      const result = await searchMateri(
-      const assistantMsg: MateriRagChatMessage = { role: "assistant", content: result.answer };
+        userMsg.content,
+        newMessages,
+        undefined,
+      );
+      const assistantMsg: MateriRagChatMessage = {
+        role: "assistant",
+        content: result.answer,
+      };
       setMessages([...newMessages, assistantMsg]);
       setSources(result.sources);
     } catch {
@@ -70,8 +83,8 @@ export default function MateriChatPage() {
               <Bot className="mx-auto h-12 w-12 mb-4 opacity-50" />
               <p>Silakan tanyakan sesuatu tentang materi komunitas.</p>
               <p className="text-xs mt-2">
-                Contoh: "Apa itu screenshare audio di GMW?" atau
+                Contoh: "Apa itu screenshare audio di GMW?" atau "Cara pakai
-                "Cara pakai voice recording"
+                voice recording"
               </p>
             </div>
           ) : (
@@ -101,7 +114,9 @@ export default function MateriChatPage() {
                       {msg.role === "user" ? "Anda" : "AI Agent"}
                     </span>
                   </div>
-                  <div className="whitespace-pre-wrap text-sm">{msg.content}</div>
+                  <div className="whitespace-pre-wrap text-sm">
+                    {msg.content}
+                  </div>
                 </div>
               </div>
             ))
@@ -112,7 +127,9 @@ export default function MateriChatPage() {
               <div className="bg-muted/50 rounded-lg p-4 max-w-[80%]">
                 <div className="flex items-center gap-2">
                   <Loader2 className="h-4 w-4 animate-spin" />
-                  <span className="text-sm">AI sedang mencari di materi...</span>
+                  <span className="text-sm">
+                    AI sedang mencari di materi...
+                  </span>
                 </div>
               </div>
             </div>
@@ -155,14 +172,19 @@ export default function MateriChatPage() {
             className="flex-1"
             rows={2}
           />
-          <Button onClick={handleSend} disabled={isLoading || !input.trim()} size="icon">
+          <Button
+            onClick={handleSend}
+            disabled={isLoading || !input.trim()}
+            size="icon"
+          >
             <Send className="h-4 w-4" />
           </Button>
         </div>
 
         <div className="mt-2 text-xs text-muted-foreground">
           <ExternalLink className="h-3 w-3 inline mr-1" />
-          AI mengacu pada materi dan arsip Discord. Jawaban mungkin tidak 100% akurat.
+          AI mengacu pada materi dan arsip Discord. Jawaban mungkin tidak 100%
+          akurat.
         </div>
       </div>
     </PageTransition>

services/frontend/src/app/(dashboard)/materi/new/page.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { useState } from "react";
+import { ArrowLeft, Save } from "lucide-react";
 import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { Button, GlassCard, Input, Textarea } from "@/components/primitives";
 import { PageTransition } from "@/components/shared";
-import { Button, Input, Textarea, GlassCard } from "@/components/primitives";
-import { Save, ArrowLeft } from "lucide-react";
 import { createMateri } from "@/lib/api/materi";
 import type { CreateMateriInput } from "@/lib/types/materi";
 
@@ -24,7 +24,10 @@ export default function MateriNewPage() {
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  function update<K extends keyof CreateMateriInput>(key: K, value: CreateMateriInput[K]) {
+  function update<K extends keyof CreateMateriInput>(
+    key: K,
+    value: CreateMateriInput[K],
+  ) {
     setForm((f) => ({ ...f, [key]: value }));
   }
 
@@ -41,7 +44,7 @@ export default function MateriNewPage() {
         .map((t) => t.trim())
         .filter(Boolean);
       const doc = await createMateri({ ...form, tags });
-      router.push("/materi/" + doc.id);
+      router.push(`/materi/${doc.id}`);
     } catch (err) {
       setError(err instanceof Error ? err.message : "Gagal menyimpan materi.");
       setSaving(false);
@@ -66,8 +69,14 @@ export default function MateriNewPage() {
 
         <GlassCard className="p-6 space-y-4">
           <div>
-            <label className="text-sm font-medium mb-1 block">Judul *</label>
+            <label
+              htmlFor="materi-title"
+              className="text-sm font-medium mb-1 block"
+            >
+              Judul *
+            </label>
             <Input
+              id="materi-title"
               value={form.title}
               onChange={(e) => update("title", e.target.value)}
               placeholder="Judul materi"
@@ -75,8 +84,14 @@ export default function MateriNewPage() {
           </div>
 
           <div>
-            <label className="text-sm font-medium mb-1 block">Deskripsi</label>
+            <label
+              htmlFor="materi-description"
+              className="text-sm font-medium mb-1 block"
+            >
+              Deskripsi
+            </label>
             <Input
+              id="materi-description"
               value={form.description ?? ""}
               onChange={(e) => update("description", e.target.value)}
               placeholder="Deskripsi singkat"
@@ -84,8 +99,14 @@ export default function MateriNewPage() {
           </div>
 
           <div>
-            <label className="text-sm font-medium mb-1 block">Kategori</label>
+            <label
+              htmlFor="materi-category"
+              className="text-sm font-medium mb-1 block"
+            >
+              Kategori
+            </label>
             <Input
+              id="materi-category"
               value={form.category}
               onChange={(e) => update("category", e.target.value)}
               placeholder="general"
@@ -93,8 +114,14 @@ export default function MateriNewPage() {
           </div>
 
           <div>
-            <label className="text-sm font-medium mb-1 block">Tags (pisahkan dengan koma)</label>
+            <label
+              htmlFor="materi-tags"
+              className="text-sm font-medium mb-1 block"
+            >
+              Tags (pisahkan dengan koma)
+            </label>
             <Input
+              id="materi-tags"
               value={tagsInput}
               onChange={(e) => setTagsInput(e.target.value)}
               placeholder="wibu, discord, moderation"
@@ -102,8 +129,14 @@ export default function MateriNewPage() {
           </div>
 
           <div>
-            <label className="text-sm font-medium mb-1 block">Konten *</label>
+            <label
+              htmlFor="materi-content"
+              className="text-sm font-medium mb-1 block"
+            >
+              Konten *
+            </label>
             <Textarea
+              id="materi-content"
               value={form.content}
               onChange={(e) => update("content", e.target.value)}
               placeholder="Tulis materi di sini..."

services/frontend/src/app/(dashboard)/materi/page.tsx

@@ -1,9 +1,9 @@
-import { PageTransition } from "@/components/shared";
+import { BookOpen, MessageSquare, Plus, Search } from "lucide-react";
+import Link from "next/link";
 import { Badge, Button, GlassCard, Input } from "@/components/primitives";
-import { Plus, BookOpen, MessageSquare, Search } from "lucide-react";
+import { PageTransition } from "@/components/shared";
 import { listMateriSSR } from "@/lib/api/materi";
 import type { MateriDocument } from "@/lib/types/materi";
-import Link from "next/link";
 
 export const dynamic = "force-dynamic";
 
@@ -28,10 +28,12 @@ function MateriGrid({ materi }: { materi: MateriDocument[] }) {
   return (
     <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
       {materi.map((doc) => (
-        <Link key={doc.id} href={"/materi/" + doc.id}>
+        <Link key={doc.id} href={`/materi/${doc.id}`}>
           <GlassCard className="h-full cursor-pointer hover:shadow-lg transition-shadow">
             <div className="p-6">
-              <h3 className="font-bold text-lg mb-2 line-clamp-2">{doc.title}</h3>
+              <h3 className="font-bold text-lg mb-2 line-clamp-2">
+                {doc.title}
+              </h3>
               {doc.description && (
                 <p className="text-sm text-muted-foreground mb-3 line-clamp-3">
                   {doc.description}

services/frontend/src/lib/api/materi.ts

@@ -2,8 +2,13 @@
 import { createORPCClient } from "@orpc/client";
 import { RPCLink } from "@orpc/client/fetch";
 import { orpc } from "@/lib/orpc/client";
-import type { MateriDocument, CreateMateriInput, MateriRagChatResult, MateriRagChatMessage } from "@/lib/types/materi";
 import type { ORPCClient } from "@/lib/orpc/types";
+import type {
+  CreateMateriInput,
+  MateriDocument,
+  MateriRagChatMessage,
+  MateriRagChatResult,
+} from "@/lib/types/materi";
 
 const BACKEND_URL =
   process.env.GMW_BACKEND_URL?.replace(/\/+$/, "") || "http://127.0.0.1:4001";
@@ -12,7 +17,7 @@ let _serverClient: ORPCClient | null = null;
 function serverOrpc(): ORPCClient {
   if (!_serverClient) {
     const link = new RPCLink({
-      url: BACKEND_URL + "/trpc",
+      url: `${BACKEND_URL}/trpc`,
       fetch(url, init) {
         return fetch(url, { ...init, cache: "no-store" });
       },
@@ -23,7 +28,10 @@ function serverOrpc(): ORPCClient {
 }
 
 // Server-side (SSR seed) — uses the HTTP RPCLink via oRPC
-export async function listMateriSSR(limit = 50, search?: string): Promise<MateriDocument[]> {
+export async function listMateriSSR(
+  limit = 50,
+  search?: string,
+): Promise<MateriDocument[]> {
   return (serverOrpc() as any).materi.list({
     limit,
     search,
@@ -37,7 +45,9 @@ export async function getMateriSSR(id: string): Promise<MateriDocument | null> {
 }
 
 // Client-side — browser WebSocket RPCLink (orpc is "use client")
-export async function createMateri(input: CreateMateriInput): Promise<MateriDocument> {
+export async function createMateri(
+  input: CreateMateriInput,
+): Promise<MateriDocument> {
   return orpc.materi.create(input) as unknown as Promise<MateriDocument>;
 }
 
@@ -45,7 +55,10 @@ export async function updateMateri(
   id: string,
   input: Partial<CreateMateriInput>,
 ): Promise<MateriDocument | null> {
-  return orpc.materi.update({ id, ...input }) as unknown as Promise<MateriDocument | null>;
+  return orpc.materi.update({
+    id,
+    ...input,
+  }) as unknown as Promise<MateriDocument | null>;
 }
 
 export async function deleteMateri(id: string): Promise<boolean> {