feat: update package dependencies and enhance routing for email verification and password recovery. Add nodemailer and related types for email handling, and implement new routes for verify-email and forgot-password in the application. Improve sign-in and sign-up forms to support email verification flow.

apps/server/package.json

@@ -20,11 +20,13 @@
     "better-auth": "catalog:",
     "dotenv": "catalog:",
     "hono": "catalog:",
+    "nodemailer": "^8.0.7",
     "zod": "catalog:"
   },
   "devDependencies": {
     "@labas/config": "workspace:*",
     "@types/bun": "catalog:",
+    "@types/nodemailer": "^8.0.0",
     "tsdown": "^0.21.9",
     "typescript": "catalog:"
   }

apps/web/src/components/attempt/OptionDisplay.tsx

@@ -0,0 +1,166 @@
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+
+const MCQ_FORMATS = [
+  "multiple_choice", "synonym", "grammar_in_context", "sentence_completion",
+  "reference", "kanji_reading", "particle_choice", "article_case",
+  "matching_headings", "matching_information", "summary_completion", "cloze",
+  "error_recognition", "text_insertion",
+];
+
+interface OptionDisplayProps {
+  format: string;
+  options: any[];
+  correctAnswer: string;
+  userAnswer: string;
+}
+
+export function OptionDisplay({ format, options, correctAnswer, userAnswer }: OptionDisplayProps) {
+  if (!options || options.length === 0) return null;
+
+  if (format === "matching_pairs") {
+    return <MatchingPairsOptions options={options} correctAnswer={correctAnswer} userAnswer={userAnswer} />;
+  }
+
+  if (format === "true_false_not_given") {
+    return <TriStateOptions choices={["TRUE", "FALSE", "NOT_GIVEN"]} labels={{ TRUE: "True", FALSE: "False", NOT_GIVEN: "Not Given" }} correctAnswer={correctAnswer} userAnswer={userAnswer} />;
+  }
+
+  if (format === "author_view") {
+    return <TriStateOptions choices={["YES", "NO", "NOT_GIVEN"]} labels={{ YES: "Yes", NO: "No", NOT_GIVEN: "Not Given" }} correctAnswer={correctAnswer} userAnswer={userAnswer} />;
+  }
+
+  if (MCQ_FORMATS.includes(format)) {
+    return <McqOptions options={options} correctAnswer={correctAnswer} userAnswer={userAnswer} />;
+  }
+
+  return null;
+}
+
+function McqOptions({ options, correctAnswer, userAnswer }: { options: { key: string; text: string }[]; correctAnswer: string; userAnswer: string }) {
+  const normUser = userAnswer?.trim().toUpperCase() || "";
+  const normCorrect = correctAnswer?.trim().toUpperCase() || "";
+  const hasAnswer = !!userAnswer && userAnswer !== "Tidak dijawab";
+
+  return (
+    <div className="space-y-2">
+      {options.map((opt) => {
+        const key = opt.key.trim().toUpperCase();
+        const isCorrectOption = key === normCorrect;
+        const isChosen = key === normUser && hasAnswer;
+        const isWrongChoice = isChosen && !isCorrectOption;
+
+        let bg = "bg-[var(--oat-light)]";
+        let keyBg = "bg-[var(--oat-light)] text-[var(--clay-black)]";
+        let border = "border-[var(--oat-border)]";
+        let icon = null;
+
+        if (isWrongChoice) {
+          bg = "bg-[var(--pomegranate-100)]";
+          keyBg = "bg-[var(--pomegranate-400)] text-[var(--pure-white)]";
+          border = "border-[var(--pomegranate-400)]";
+          icon = <MaterialIcon name="cancel" className="text-sm text-[var(--pomegranate-400)] shrink-0" />;
+        } else if (isCorrectOption) {
+          bg = "bg-[var(--matcha-300)]/20";
+          keyBg = "bg-[var(--matcha-600)] text-[var(--pure-white)]";
+          border = "border-[var(--matcha-400)]";
+          icon = <MaterialIcon name="check_circle" className="text-sm text-[var(--matcha-600)] shrink-0" />;
+        }
+
+        return (
+          <div key={opt.key} className={`flex items-center gap-3 p-3 rounded-[var(--radius-lg)] border-2 ${border} ${bg}`}>
+            <span className={`w-8 h-8 min-w-[2rem] min-h-[2rem] rounded-full text-sm font-bold flex items-center justify-center shrink-0 ${keyBg}`}>
+              {key || "?"}
+            </span>
+            <span className="flex-1 text-sm text-[var(--clay-black)]">{opt.text}</span>
+            {icon}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function TriStateOptions({ choices, labels, correctAnswer, userAnswer }: { choices: string[]; labels: Record<string, string>; correctAnswer: string; userAnswer: string }) {
+  const normUser = userAnswer?.trim().toUpperCase().replace(/\s+/g, "_") || "";
+  const normCorrect = correctAnswer?.trim().toUpperCase() || "";
+  const hasAnswer = !!userAnswer && userAnswer !== "Tidak dijawab";
+
+  return (
+    <div className="space-y-2">
+      {choices.map((c) => {
+        const isCorrectOption = c === normCorrect;
+        const isChosen = c === normUser && hasAnswer;
+        const isWrongChoice = isChosen && !isCorrectOption;
+
+        let bg = "bg-[var(--oat-light)]";
+        let dot = "border-[var(--oat-border)]";
+        let textColor = "text-[var(--warm-charcoal)]";
+
+        if (isWrongChoice) {
+          bg = "bg-[var(--pomegranate-100)]";
+          dot = "border-[var(--pomegranate-400)] bg-[var(--pomegranate-400)]";
+          textColor = "text-[var(--pomegranate-600)]";
+        } else if (isCorrectOption) {
+          bg = "bg-[var(--matcha-300)]/20";
+          dot = "border-[var(--matcha-600)] bg-[var(--matcha-600)]";
+          textColor = "text-[var(--matcha-800)]";
+        }
+
+        return (
+          <div key={c} className={`flex items-center gap-3 p-3 rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] ${bg}`}>
+            <span className={`w-5 h-5 rounded-full border-2 ${dot} flex items-center justify-center shrink-0`}>
+              {isChosen || isCorrectOption ? <span className="w-2 h-2 rounded-full bg-white" /> : null}
+            </span>
+            <span className={`text-sm font-semibold ${textColor}`}>{labels[c]}</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function MatchingPairsOptions({ options, correctAnswer, userAnswer }: { options: { left: string; right?: string }[]; correctAnswer: string; userAnswer: string }) {
+  const parseMapping = (s: string): Map<string, string> => {
+    const map = new Map();
+    if (!s) return map;
+    s.split(",").forEach((pair) => {
+      const [k, v] = pair.split(":").map((x) => x.trim());
+      if (k && v) map.set(k, v);
+    });
+    return map;
+  };
+
+  const correctMap = parseMapping(correctAnswer);
+  const userMap = parseMapping(userAnswer);
+
+  return (
+    <div className="space-y-2">
+      {options.map((opt) => {
+        const matchedCorrect = correctMap.get(opt.left) || "";
+        const matchedUser = userMap.get(opt.left) || "";
+        const isMatchCorrect = matchedUser === matchedCorrect;
+        const hasUserAnswer = !!matchedUser;
+
+        return (
+          <div key={opt.left} className="flex items-center gap-3 p-3 rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--oat-light)]">
+            <span className="w-8 h-8 rounded-full text-sm font-bold flex items-center justify-center shrink-0 bg-[var(--oat-light)] text-[var(--clay-black)] border-2 border-[var(--oat-border)]">
+              {opt.left.charAt(0).toUpperCase()}
+            </span>
+            <span className="flex-1 text-sm text-[var(--clay-black)]">{opt.left}</span>
+            <span className="text-[var(--warm-silver)]">→</span>
+            {hasUserAnswer && (
+              <span className={`text-sm font-medium px-3 py-1.5 rounded-[var(--radius-md)] ${isMatchCorrect ? "bg-[var(--matcha-300)]/20 text-[var(--matcha-700)]" : "bg-[var(--pomegranate-100)] text-[var(--pomegranate-600)] line-through"}`}>
+                {matchedUser}
+              </span>
+            )}
+            {!isMatchCorrect && matchedCorrect && (
+              <span className="text-sm font-medium px-3 py-1.5 rounded-[var(--radius-md)] bg-[var(--matcha-300)]/20 text-[var(--matcha-700)]">
+                {matchedCorrect}
+              </span>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

apps/web/src/components/attempt/QuestionReviewCard.tsx

@@ -0,0 +1,282 @@
+import { useState } from "react";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { trpc } from "@/utils/trpc";
+import { Button } from "@labas/ui/components/button";
+import { Input } from "@labas/ui/components/input";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import { formatTime } from "@/lib/time";
+import { OptionDisplay } from "./OptionDisplay";
+
+interface QuestionReviewCardProps {
+  q: any;
+  secIdx: number;
+  qIdx: number;
+  ans: any;
+  userId?: string;
+  isExpanded: boolean;
+  onToggleExpand: () => void;
+}
+
+export function QuestionReviewCard({
+  q,
+  secIdx,
+  qIdx,
+  ans,
+  userId,
+  isExpanded,
+  onToggleExpand,
+}: QuestionReviewCardProps) {
+  const isCorrect = ans?.isCorrect;
+  const userAnswer = ans?.userAnswer ?? "Tidak dijawab";
+  const isOwner = q.creatorUserId === userId;
+  const hasOptions = Array.isArray(q.options) && q.options.length > 0;
+
+  const [isEditing, setIsEditing] = useState(false);
+  const [editPassage, setEditPassage] = useState(q.passageText ?? "");
+  const [editCorrectAnswer, setEditCorrectAnswer] = useState(q.correctAnswer ?? "");
+  const [editExplanation, setEditExplanation] = useState(q.explanation ?? "");
+
+  const feedbackQuery = useQuery(
+    trpc.feedback.getQuestionFeedback.queryOptions(
+      { questionId: q.id },
+      { enabled: !!q.id },
+    ),
+  );
+
+  const voteMutation = useMutation({
+    ...trpc.feedback.voteQuestion.mutationOptions(),
+    onSuccess: () => feedbackQuery.refetch(),
+  });
+
+  const updateQuestionMutation = useMutation({
+    ...trpc.question.update.mutationOptions(),
+    onSuccess: () => {
+      setIsEditing(false);
+      window.location.reload();
+    },
+  });
+
+  const handleSaveEdit = () => {
+    updateQuestionMutation.mutate({
+      id: q.id,
+      passageText: editPassage,
+      correctAnswer: editCorrectAnswer,
+      explanation: editExplanation,
+    });
+  };
+
+  return (
+    <div
+      className={`bg-[var(--pure-white)] border-2 rounded-[var(--radius-xl)] clay-shadow transition-all ${
+        isCorrect === true
+          ? "border-[var(--matcha-400)]"
+          : isCorrect === false
+            ? "border-[var(--pomegranate-400)]"
+            : "border-[var(--oat-border)]"
+      }`}
+    >
+      {/* Header — always visible, clickable to expand */}
+      <button
+        onClick={onToggleExpand}
+        className="w-full text-left p-4 flex items-start gap-3 cursor-pointer"
+      >
+        <span
+          className={`w-8 h-8 rounded-full text-xs flex items-center justify-center font-bold shrink-0 ${
+            isCorrect === true
+              ? "bg-[var(--matcha-600)] text-[var(--pure-white)]"
+              : isCorrect === false
+                ? "bg-[var(--pomegranate-400)] text-[var(--pure-white)]"
+                : "bg-[var(--oat-light)] text-[var(--warm-charcoal)]"
+          }`}
+        >
+          {secIdx + 1}.{qIdx + 1}
+        </span>
+        <div className="flex-1 min-w-0">
+          <p className="text-sm font-medium text-[var(--clay-black)] truncate">
+            {q.questionText}
+          </p>
+          <div className="flex items-center gap-2 mt-1">
+            <span className="text-[10px] px-1.5 py-0.5 rounded bg-[var(--oat-light)] text-[var(--warm-charcoal)]">
+              {q.format.replace(/_/g, " ")}
+            </span>
+            {ans?.timeSpentSec != null && (
+              <span className="text-[10px] text-[var(--warm-silver)] flex items-center gap-0.5">
+                <MaterialIcon name="timer" className="text-[10px]" />
+                {formatTime(ans.timeSpentSec)}
+              </span>
+            )}
+          </div>
+        </div>
+        <span className="shrink-0 flex items-center gap-1.5 text-xs text-[var(--warm-silver)]">
+          {isCorrect === true && (
+            <MaterialIcon name="check_circle" className="text-sm text-[var(--matcha-600)]" />
+          )}
+          {isCorrect === false && (
+            <MaterialIcon name="cancel" className="text-sm text-[var(--pomegranate-400)]" />
+          )}
+          <MaterialIcon
+            name={isExpanded ? "expand_less" : "expand_more"}
+            className="text-sm"
+          />
+        </span>
+      </button>
+
+      {/* Expanded content */}
+      {isExpanded && (
+        <div className="px-4 pb-4 pl-11 space-y-3">
+          {/* Passage Text */}
+          {q.passageText && (
+            <div className="bg-[var(--oat-light)] rounded-[var(--radius-lg)] p-3 text-sm text-[var(--warm-charcoal)] whitespace-pre-wrap leading-relaxed">
+              <span className="font-semibold text-[var(--clay-black)] block mb-1">Teks Bacaan:</span>
+              {q.passageText}
+            </div>
+          )}
+
+          {/* Interactive Option Display */}
+          {hasOptions && (
+            <OptionDisplay
+              format={q.format}
+              options={q.options}
+              correctAnswer={q.correctAnswer}
+              userAnswer={userAnswer}
+            />
+          )}
+
+          {/* Owner Inline Edit Form */}
+          {isEditing && isOwner && (
+            <div className="space-y-3 bg-[var(--badge-blue-bg)] rounded-[var(--radius-lg)] p-4 border-2 border-[var(--badge-blue-bg)]">
+              <p className="text-sm font-semibold text-[var(--badge-blue-text)] flex items-center gap-2">
+                <MaterialIcon name="edit_note" className="text-sm" />
+                Koreksi Soal
+              </p>
+              <div>
+                <label className="text-xs font-medium text-[var(--warm-charcoal)] mb-1 block">Teks Bacaan</label>
+                <textarea
+                  value={editPassage}
+                  onChange={(e) => setEditPassage(e.target.value)}
+                  className="w-full min-h-[80px] p-2 rounded-[var(--radius-md)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] text-sm text-[var(--clay-black)] resize-y"
+                />
+              </div>
+              <div>
+                <label className="text-xs font-medium text-[var(--warm-charcoal)] mb-1 block">Jawaban Benar</label>
+                <Input
+                  value={editCorrectAnswer}
+                  onChange={(e) => setEditCorrectAnswer(e.target.value)}
+                  className="h-9 text-sm"
+                />
+              </div>
+              <div>
+                <label className="text-xs font-medium text-[var(--warm-charcoal)] mb-1 block">Penjelasan</label>
+                <textarea
+                  value={editExplanation}
+                  onChange={(e) => setEditExplanation(e.target.value)}
+                  className="w-full min-h-[60px] p-2 rounded-[var(--radius-md)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] text-sm text-[var(--clay-black)] resize-y"
+                />
+              </div>
+              <div className="flex gap-2">
+                <Button
+                  onClick={handleSaveEdit}
+                  disabled={updateQuestionMutation.isPending}
+                  className="h-9 text-sm bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] rounded-[var(--radius-lg)]"
+                >
+                  <MaterialIcon name="save" className="text-sm mr-1" />
+                  Simpan
+                </Button>
+                <Button
+                  variant="outline"
+                  onClick={() => setIsEditing(false)}
+                  className="h-9 text-sm rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)]"
+                >
+                  Batal
+                </Button>
+              </div>
+            </div>
+          )}
+
+          {/* Answer Comparison */}
+          <div className="flex flex-wrap gap-4 text-sm">
+            <div>
+              <span className="text-[var(--warm-silver)]">Jawaban Anda:</span>{" "}
+              <span
+                className={`font-semibold ${
+                  isCorrect === true
+                    ? "text-[var(--matcha-700)]"
+                    : isCorrect === false
+                      ? "text-[var(--pomegranate-600)]"
+                      : "text-[var(--warm-charcoal)]"
+                }`}
+              >
+                {userAnswer}
+              </span>
+            </div>
+            {ans?.partialScore != null && ans?.partialScore < 100 && (
+              <div>
+                <span className="text-[var(--warm-silver)]">Skor Parsial:</span>{" "}
+                <span className="font-semibold text-[var(--lemon-700)]">
+                  {ans.partialScore}%
+                </span>
+              </div>
+            )}
+            {(isCorrect === false || isCorrect === null) && (
+              <div>
+                <span className="text-[var(--warm-silver)]">Jawaban Benar:</span>{" "}
+                <span className="font-semibold text-[var(--matcha-700)]">
+                  {q.correctAnswer}
+                </span>
+              </div>
+            )}
+            {ans?.timeSpentSec != null && (
+              <div className="flex items-center gap-1 text-[var(--warm-silver)]">
+                <MaterialIcon name="timer" className="text-xs" />
+                <span>{formatTime(ans.timeSpentSec)}</span>
+              </div>
+            )}
+          </div>
+
+          {/* Explanation */}
+          {q.explanation && !isEditing && (
+            <div className="bg-[var(--oat-light)] rounded-[var(--radius-lg)] p-3 text-sm text-[var(--warm-charcoal)]">
+              <span className="font-semibold text-[var(--clay-black)]">Penjelasan:</span>{" "}
+              {q.explanation}
+            </div>
+          )}
+
+          {/* Thumbs Feedback */}
+          <div className="flex items-center gap-3 pt-1">
+            <button
+              onClick={() => voteMutation.mutate({ questionId: q.id, type: "up" })}
+              className={`flex items-center gap-1 px-3 py-1.5 rounded-full text-xs font-medium transition-all ${
+                feedbackQuery.data?.myFeedback === "up"
+                  ? "bg-[var(--matcha-300)] text-[var(--matcha-800)]"
+                  : "bg-[var(--oat-light)] text-[var(--warm-charcoal)] hover:bg-[var(--matcha-300)] hover:text-[var(--matcha-800)]"
+              }`}
+            >
+              <MaterialIcon name="thumb_up" className="text-sm" />
+              <span>{feedbackQuery.data?.up ?? 0}</span>
+            </button>
+            <button
+              onClick={() => voteMutation.mutate({ questionId: q.id, type: "down" })}
+              className={`flex items-center gap-1 px-3 py-1.5 rounded-full text-xs font-medium transition-all ${
+                feedbackQuery.data?.myFeedback === "down"
+                  ? "bg-[var(--pomegranate-100)] text-[var(--pomegranate-600)]"
+                  : "bg-[var(--oat-light)] text-[var(--warm-charcoal)] hover:bg-[var(--pomegranate-100)] hover:text-[var(--pomegranate-600)]"
+              }`}
+            >
+              <MaterialIcon name="thumb_down" className="text-sm" />
+              <span>{feedbackQuery.data?.down ?? 0}</span>
+            </button>
+            {isOwner && (
+              <button
+                onClick={() => setIsEditing(true)}
+                className="ml-auto flex items-center gap-1 px-3 py-1.5 rounded-full text-xs font-medium bg-[var(--oat-light)] text-[var(--warm-charcoal)] hover:bg-[var(--badge-blue-bg)] hover:text-[var(--badge-blue-text)] transition-all"
+              >
+                <MaterialIcon name="edit" className="text-sm" />
+                Koreksi
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

apps/web/src/components/attempt/ReviewFilterBar.tsx

@@ -0,0 +1,119 @@
+import { useMemo } from "react";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+
+type FilterStatus = "all" | "wrong" | "correct" | "marked";
+
+interface ReviewFilterBarProps {
+  filterStatus: FilterStatus;
+  setFilterStatus: (v: FilterStatus) => void;
+  filterSkills: string[];
+  setFilterSkills: (v: string[]) => void;
+  questions: Array<{ skillTags: string[]; isCorrect: boolean | null }>;
+  markedCount: number;
+  allExpanded: boolean;
+  onToggleAllExpanded: () => void;
+}
+
+export function ReviewFilterBar({
+  filterStatus,
+  setFilterStatus,
+  filterSkills,
+  setFilterSkills,
+  questions,
+  markedCount,
+  allExpanded,
+  onToggleAllExpanded,
+}: ReviewFilterBarProps) {
+  const counts = useMemo(() => {
+    const total = questions.length;
+    const wrong = questions.filter((q) => q.isCorrect === false).length;
+    const correct = questions.filter((q) => q.isCorrect === true).length;
+    return { total, wrong, correct, marked: markedCount };
+  }, [questions, markedCount]);
+
+  const allSkillTags = useMemo(() => {
+    const tags = new Set<string>();
+    for (const q of questions) {
+      if (q.skillTags) q.skillTags.forEach((t) => tags.add(t));
+    }
+    return Array.from(tags);
+  }, [questions]);
+
+  const statusFilters: { id: FilterStatus; label: string; count: number; icon: string }[] = [
+    { id: "all", label: "Semua", count: counts.total, icon: "list" },
+    { id: "wrong", label: "Salah", count: counts.wrong, icon: "cancel" },
+    { id: "correct", label: "Benar", count: counts.correct, icon: "check_circle" },
+    { id: "marked", label: "Parsial", count: counts.marked, icon: "pending" },
+  ];
+
+  const toggleSkill = (skill: string) => {
+    setFilterSkills(
+      filterSkills.includes(skill)
+        ? filterSkills.filter((s) => s !== skill)
+        : [...filterSkills, skill],
+    );
+  };
+
+  return (
+    <div className="sticky top-0 z-10 bg-[var(--warm-cream)] pb-4 pt-2 space-y-3">
+      {/* Status filter chips */}
+      <div className="flex flex-wrap gap-2">
+        {statusFilters.map(({ id, label, count, icon }) => (
+          <button
+            key={id}
+            onClick={() => setFilterStatus(id)}
+            className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-all ${
+              filterStatus === id
+                ? "bg-[var(--clay-black)] text-[var(--pure-white)]"
+                : "bg-[var(--pure-white)] text-[var(--warm-charcoal)] border-2 border-[var(--oat-border)] hover:bg-[var(--oat-light)]"
+            }`}
+          >
+            <MaterialIcon name={icon} className="text-xs" />
+            {label}
+            <span className={`text-[10px] px-1.5 py-0.5 rounded-full ${
+              filterStatus === id ? "bg-white/20" : "bg-[var(--oat-light)]"
+            }`}>
+              {count}
+            </span>
+          </button>
+        ))}
+      </div>
+
+      {/* Skill tag filters */}
+      {allSkillTags.length > 0 && (
+        <div className="flex flex-wrap gap-1.5">
+          {allSkillTags.map((tag) => {
+            const isActive = filterSkills.includes(tag);
+            return (
+              <button
+                key={tag}
+                onClick={() => toggleSkill(tag)}
+                className={`rounded-full text-[10px] font-medium transition-all ${
+                  isActive
+                    ? "bg-[var(--matcha-300)] text-[var(--matcha-800)] px-3 py-1.5"
+                    : "bg-[var(--oat-light)] text-[var(--warm-charcoal)] hover:bg-[var(--matcha-300)] px-2.5 py-1"
+                }`}
+              >
+                <span className="inline-flex items-center gap-1">
+                  {tag}
+                  {isActive && <MaterialIcon name="close" className="text-[10px]" />}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      )}
+
+      {/* Expand/Collapse All */}
+      <div className="flex justify-end">
+        <button
+          onClick={onToggleAllExpanded}
+          className="flex items-center gap-1 text-xs font-medium text-[var(--matcha-600)] hover:text-[var(--matcha-800)] transition-colors"
+        >
+          <MaterialIcon name={allExpanded ? "unfold_less" : "unfold_more"} className="text-xs" />
+          {allExpanded ? "Tutup Semua" : "Buka Semua"}
+        </button>
+      </div>
+    </div>
+  );
+}

apps/web/src/components/attempt/SkillBreakdown.tsx

@@ -0,0 +1,72 @@
+import { useMemo } from "react";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+
+interface SkillBreakdownProps {
+  questions: Array<{
+    skillTags: string[];
+    isCorrect: boolean | null;
+  }>;
+  onSkillClick: (skill: string) => void;
+  activeSkills: string[];
+}
+
+export function SkillBreakdown({ questions, onSkillClick, activeSkills }: SkillBreakdownProps) {
+  const skillStats = useMemo(() => {
+    const stats = new Map<string, { total: number; correct: number }>();
+    for (const q of questions) {
+      if (!q.skillTags) continue;
+      for (const tag of q.skillTags) {
+        const prev = stats.get(tag) ?? { total: 0, correct: 0 };
+        prev.total++;
+        if (q.isCorrect) prev.correct++;
+        stats.set(tag, prev);
+      }
+    }
+    return Array.from(stats.entries())
+      .map(([skill, { total, correct }]) => ({
+        skill,
+        total,
+        correct,
+        pct: total > 0 ? Math.round((correct / total) * 100) : 0,
+      }))
+      .sort((a, b) => a.pct - b.pct);
+  }, [questions]);
+
+  if (skillStats.length === 0) return null;
+
+  return (
+    <div className="space-y-3">
+      {skillStats.map(({ skill, total, correct, pct }) => {
+        const isActive = activeSkills.includes(skill);
+        const barColor = pct >= 80 ? "bg-[var(--matcha-600)]" : pct >= 50 ? "bg-[var(--lemon-500)]" : "bg-[var(--pomegranate-400)]";
+
+        return (
+          <button
+            key={skill}
+            onClick={() => onSkillClick(skill)}
+            className={`w-full text-left transition-all rounded-[var(--radius-lg)] p-3 ${
+              isActive ? "bg-[var(--matcha-300)]/10 ring-2 ring-[var(--matcha-600)]" : "hover:bg-[var(--oat-light)]"
+            }`}
+          >
+            <div className="flex items-center justify-between mb-1.5">
+              <span className="text-sm font-semibold text-[var(--clay-black)] flex items-center gap-1.5">
+                {skill}
+                {isActive && <MaterialIcon name="filter_alt" className="text-xs text-[var(--matcha-600)]" />}
+              </span>
+              <span className="text-xs font-medium text-[var(--warm-charcoal)]">{correct}/{total}</span>
+            </div>
+            <div className="w-full h-3 bg-[var(--oat-light)] rounded-full overflow-hidden">
+              <div
+                className={`h-full rounded-full transition-all duration-500 ${barColor}`}
+                style={{ width: `${pct}%` }}
+              />
+            </div>
+            <div className="flex justify-between mt-0.5">
+              <span className="text-[10px] text-[var(--warm-silver)]">{pct}% benar</span>
+            </div>
+          </button>
+        );
+      })}
+    </div>
+  );
+}

apps/web/src/components/bank/QuestionCard.tsx

@@ -55,10 +55,10 @@ export function QuestionCard({
                 {selected ? "Terpilih" : "Pilih"}
               </span>
             )}
-            <span className="px-2.5 py-1 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-xs font-semibold">
+            <span className="inline-flex items-center px-2.5 py-1 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-xs font-semibold leading-none whitespace-nowrap">
               {q.examTypeName}
             </span>
-            <span className="px-2.5 py-1 rounded-full bg-[var(--slushie-500)]/20 text-[var(--slushie-800)] text-xs font-semibold">
+            <span className="inline-flex items-center px-2.5 py-1 rounded-full bg-[var(--slushie-500)]/20 text-[var(--slushie-800)] text-xs font-semibold leading-none whitespace-nowrap">
               {q.sectionTypeName}
             </span>
             {disabled && (

apps/web/src/components/generate/TestBlueprintCard.tsx

@@ -17,6 +17,7 @@ interface TestBlueprintCardProps {
   hasKey: boolean;
   error: string | null;
   onGenerate: () => void;
+  disableQuick?: boolean;
 }
 
 export function TestBlueprintCard({
@@ -34,6 +35,7 @@ export function TestBlueprintCard({
   error,
   onGenerate,
   onDismissError,
+  disableQuick,
 }: TestBlueprintCardProps & { onDismissError?: () => void }) {
   const sectionNames = selectedSections
     .map((id) => SECTIONS.find((s) => s.id === id)?.name)
@@ -105,11 +107,14 @@ export function TestBlueprintCard({
           {/* Mode Toggle */}
           <div className="flex gap-1 p-1 rounded-[var(--radius-lg)] bg-[var(--oat-light)]">
             <button
-              onClick={() => setMode("quick")}
+              onClick={() => !disableQuick && setMode("quick")}
+              disabled={disableQuick}
               className={`flex-1 py-2.5 px-3 rounded-[var(--radius-md)] text-sm font-semibold transition-all flex items-center justify-center gap-2 min-h-[44px] ${
-                mode === "quick"
-                  ? "bg-[var(--pure-white)] text-[var(--clay-black)] clay-shadow"
-                  : "text-[var(--warm-charcoal)] hover:text-[var(--clay-black)]"
+                disableQuick
+                  ? "bg-[var(--oat-light)] text-[var(--warm-silver)] cursor-not-allowed opacity-50"
+                  : mode === "quick"
+                    ? "bg-[var(--pure-white)] text-[var(--clay-black)] clay-shadow"
+                    : "text-[var(--warm-charcoal)] hover:text-[var(--clay-black)]"
               }`}
             >
               <MaterialIcon name="flash_on" className="text-sm" />
@@ -127,6 +132,12 @@ export function TestBlueprintCard({
               Agentic
             </button>
           </div>
+          {disableQuick && (
+            <p className="text-xs text-[var(--warm-charcoal)] flex items-center gap-1">
+              <MaterialIcon name="info" className="text-xs shrink-0" />
+              Reading/Writing membutuhkan Agentic mode (min 20 soal)
+            </p>
+          )}
 
           {mode === "agentic" && (
             <div className="p-3 rounded-[var(--radius-md)] bg-[var(--badge-blue-bg)] border-2 border-[var(--badge-blue-bg)] text-xs text-[var(--badge-blue-text)]">

apps/web/src/components/settings/AccountSettings.tsx

@@ -0,0 +1,161 @@
+import { useState } from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@labas/ui/components/card";
+import { Input } from "@labas/ui/components/input";
+import { Label } from "@labas/ui/components/label";
+import { Button } from "@labas/ui/components/button";
+import { toast } from "sonner";
+import { authClient } from "@/lib/auth-client";
+
+export function AccountSettings() {
+  const { data: session } = authClient.useSession();
+  const user = session?.user;
+
+  const [currentPassword, setCurrentPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [isChangingPassword, setIsChangingPassword] = useState(false);
+
+  const [newEmail, setNewEmail] = useState("");
+  const [isChangingEmail, setIsChangingEmail] = useState(false);
+
+  const handleChangePassword = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (newPassword.length < 8) {
+      toast.error("Password minimal 8 karakter");
+      return;
+    }
+    if (newPassword !== confirmPassword) {
+      toast.error("Password baru tidak cocok");
+      return;
+    }
+    setIsChangingPassword(true);
+    try {
+      await authClient.changePassword({
+        currentPassword,
+        newPassword,
+        revokeOtherSessions: true,
+      });
+      toast.success("Password berhasil diubah");
+      setCurrentPassword("");
+      setNewPassword("");
+      setConfirmPassword("");
+    } catch (err: any) {
+      toast.error(err?.message || "Gagal mengubah password");
+    } finally {
+      setIsChangingPassword(false);
+    }
+  };
+
+  const handleChangeEmail = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newEmail) return;
+    setIsChangingEmail(true);
+    try {
+      await authClient.changeEmail({ newEmail });
+      toast.success("Email berhasil diubah. Cek email baru Anda untuk verifikasi.");
+      setNewEmail("");
+    } catch (err: any) {
+      toast.error(err?.message || "Gagal mengubah email");
+    } finally {
+      setIsChangingEmail(false);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+        <CardHeader>
+          <CardTitle className="font-headline text-[var(--clay-black)]">Informasi Akun</CardTitle>
+          <CardDescription className="text-[var(--warm-charcoal)]">
+            Detail akun Anda saat ini
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <div>
+            <Label className="text-sm text-[var(--warm-charcoal)]">Nama</Label>
+            <p className="font-medium text-[var(--clay-black)]">{user?.name}</p>
+          </div>
+          <div>
+            <Label className="text-sm text-[var(--warm-charcoal)]">Email</Label>
+            <p className="font-medium text-[var(--clay-black)]">{user?.email}</p>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+        <CardHeader>
+          <CardTitle className="font-headline text-[var(--clay-black)]">Ubah Password</CardTitle>
+          <CardDescription className="text-[var(--warm-charcoal)]">
+            Gunakan password yang kuat dan unik
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleChangePassword} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="currentPassword">Password Saat Ini</Label>
+              <Input
+                id="currentPassword"
+                type="password"
+                value={currentPassword}
+                onChange={(e) => setCurrentPassword(e.target.value)}
+                placeholder="Masukkan password saat ini"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="newPassword">Password Baru</Label>
+              <Input
+                id="newPassword"
+                type="password"
+                value={newPassword}
+                onChange={(e) => setNewPassword(e.target.value)}
+                placeholder="Minimal 8 karakter"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="confirmPassword">Konfirmasi Password Baru</Label>
+              <Input
+                id="confirmPassword"
+                type="password"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                placeholder="Ulangi password baru"
+              />
+            </div>
+            <Button
+              type="submit"
+              disabled={isChangingPassword || !currentPassword || !newPassword || !confirmPassword}
+            >
+              {isChangingPassword ? "Menyimpan..." : "Ubah Password"}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+
+      <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+        <CardHeader>
+          <CardTitle className="font-headline text-[var(--clay-black)]">Ubah Email</CardTitle>
+          <CardDescription className="text-[var(--warm-charcoal)]">
+            Masukkan alamat email baru Anda
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleChangeEmail} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="newEmail">Email Baru</Label>
+              <Input
+                id="newEmail"
+                type="email"
+                value={newEmail}
+                onChange={(e) => setNewEmail(e.target.value)}
+                placeholder="nama@email.com"
+              />
+            </div>
+            <Button type="submit" disabled={isChangingEmail || !newEmail}>
+              {isChangingEmail ? "Menyimpan..." : "Ubah Email"}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

apps/web/src/components/sign-in-form.tsx

@@ -3,7 +3,7 @@ import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }
 import { Input } from "@labas/ui/components/input";
 import { Label } from "@labas/ui/components/label";
 import { useForm } from "@tanstack/react-form";
-import { useNavigate } from "@tanstack/react-router";
+import { Link, useNavigate } from "@tanstack/react-router";
 import { toast } from "sonner";
 import z from "zod";
 
@@ -30,13 +30,17 @@ export default function SignInForm({ onSwitchToSignUp }: { onSwitchToSignUp: ()
         },
         {
           onSuccess: () => {
-            navigate({
-              to: "/",
-            });
+            navigate({ to: "/" });
             toast.success("Sign in successful");
           },
           onError: (error) => {
-            toast.error(error.error.message || error.error.statusText);
+            const msg = error.error.message || error.error.statusText;
+            if (msg?.toLowerCase().includes("verify")) {
+              navigate({ to: "/verify-email", search: { email: value.email } });
+              toast.error("Silakan verifikasi email Anda terlebih dahulu");
+            } else {
+              toast.error(msg);
+            }
           },
         },
       );
@@ -95,7 +99,15 @@ export default function SignInForm({ onSwitchToSignUp }: { onSwitchToSignUp: ()
             <form.Field name="password">
               {(field) => (
                 <div className="space-y-2">
-                  <Label htmlFor={field.name}>Password</Label>
+                  <div className="flex items-center justify-between">
+                    <Label htmlFor={field.name}>Password</Label>
+                    <Link
+                      to="/forgot-password"
+                      className="text-xs text-muted-foreground hover:text-primary"
+                    >
+                      Lupa password?
+                    </Link>
+                  </div>
                   <Input
                     id={field.name}
                     name={field.name}

apps/web/src/components/sign-up-form.tsx

@@ -3,11 +3,13 @@ import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }
 import { Input } from "@labas/ui/components/input";
 import { Label } from "@labas/ui/components/label";
 import { useForm } from "@tanstack/react-form";
+import { useMutation } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
 import { toast } from "sonner";
 import z from "zod";
 
 import { authClient } from "@/lib/auth-client";
+import { trpc } from "@/utils/trpc";
 
 import Loader from "./loader";
 
@@ -16,6 +18,7 @@ export default function SignUpForm({ onSwitchToSignIn }: { onSwitchToSignIn: ()
     from: "/",
   });
   const { isPending } = authClient.useSession();
+  const sendOtpMutation = useMutation(trpc.verification.sendVerificationOtp.mutationOptions());
 
   const form = useForm({
     defaultValues: {
@@ -31,11 +34,15 @@ export default function SignUpForm({ onSwitchToSignIn }: { onSwitchToSignIn: ()
           name: value.name,
         },
         {
-          onSuccess: () => {
+          onSuccess: async () => {
+            try {
+              await sendOtpMutation.mutateAsync({ email: value.email });
+            } catch {}
             navigate({
-              to: "/",
+              to: "/verify-email",
+              search: { email: value.email },
             });
-            toast.success("Sign up successful");
+            toast.success("Akun berhasil dibuat! Cek email Anda untuk kode verifikasi.");
           },
           onError: (error) => {
             toast.error(error.error.message || error.error.statusText);

apps/web/src/components/test/AttemptTestView.tsx

@@ -317,7 +317,7 @@ export function AttemptTestView({
             <Button
               onClick={() => setShowFinishDialog(true)}
               disabled={isFinished}
-              className="bg-[var(--pomegranate-500)] text-[var(--pure-white)] hover:bg-[var(--pomegranate-600)] px-4 py-2 rounded-xl text-sm font-bold transition-opacity"
+              className="bg-[var(--pomegranate-400)] text-[var(--pure-white)] hover:bg-[var(--pomegranate-600)] px-4 py-2 rounded-xl text-sm font-bold transition-opacity"
             >
               Selesai Test
             </Button>
@@ -495,7 +495,7 @@ export function AttemptTestView({
           <div className="bg-[var(--warm-cream)] w-full max-w-md rounded-[var(--radius-xl)] border-2 border-[var(--oat-border)] shadow-xl p-6 md:p-8">
             <div className="flex items-center gap-3 mb-4">
               <div className="w-10 h-10 rounded-full bg-[var(--pomegranate-400)]/20 flex items-center justify-center">
-                <MaterialIcon name="help" className="text-[var(--pomegranate-500)]" />
+                <MaterialIcon name="help" className="text-[var(--pomegranate-400)]" />
               </div>
               <h2 className="text-xl font-headline font-bold text-[var(--clay-black)]">
                 Selesaikan Latihan?
@@ -550,7 +550,7 @@ export function AttemptTestView({
           <div className="bg-[var(--warm-cream)] w-full max-w-md rounded-[var(--radius-xl)] border-2 border-[var(--oat-border)] shadow-xl p-6 md:p-8">
             <div className="flex items-center gap-3 mb-4">
               <div className="w-10 h-10 rounded-full bg-[var(--pomegranate-400)]/20 flex items-center justify-center">
-                <MaterialIcon name="warning" className="text-[var(--pomegranate-500)]" />
+                <MaterialIcon name="warning" className="text-[var(--pomegranate-400)]" />
               </div>
               <h2 className="text-xl font-headline font-bold text-[var(--clay-black)]">
                 Keluar dari Latihan?
@@ -576,7 +576,7 @@ export function AttemptTestView({
                   setShowAbandonDialog(false);
                   onAbandon();
                 }}
-                className="flex-1 bg-[var(--pomegranate-500)] text-[var(--pure-white)] hover:bg-[var(--pomegranate-600)] rounded-[var(--radius-lg)]"
+                className="flex-1 bg-[var(--pomegranate-400)] text-[var(--pure-white)] hover:bg-[var(--pomegranate-600)] rounded-[var(--radius-lg)]"
               >
                 Keluar
               </Button>

apps/web/src/hooks/use-generation-jobs.ts

@@ -6,6 +6,7 @@ import { authClient } from "@/lib/auth-client";
 
 const STORAGE_KEY = "labas_active_jobs";
 const RESULTS_KEY = "labas_completed_results";
+const CLEARED_JOBS_KEY = "labas_cleared_jobs";
 const MAX_PARALLEL = 3;
 
 export interface ActiveJob {
@@ -80,6 +81,23 @@ function writeStoredResults(results: CompletedResult[]) {
   }
 }
 
+function readClearedJobIds(): string[] {
+  try {
+    const raw = sessionStorage.getItem(CLEARED_JOBS_KEY);
+    return raw ? (JSON.parse(raw) as string[]) : [];
+  } catch {
+    return [];
+  }
+}
+
+function writeClearedJobIds(ids: string[]) {
+  if (ids.length === 0) {
+    sessionStorage.removeItem(CLEARED_JOBS_KEY);
+  } else {
+    sessionStorage.setItem(CLEARED_JOBS_KEY, JSON.stringify(ids));
+  }
+}
+
 function broadcastJobs(ids: string[]) {
   window.dispatchEvent(
     new CustomEvent("labas:jobs-change", { detail: { ids } }),
@@ -135,8 +153,11 @@ export function useGenerationJobs() {
   const resetAll = useCallback(() => {
     setError(null);
     setCompletedResults([]);
-    setJobIds([]);
-    removedJobIdsRef.current.clear();
+    setJobIds((prev) => {
+      writeClearedJobIds(prev);
+      removedJobIdsRef.current.clear();
+      return [];
+    });
     processedJobStates.current = {};
     sessionStorage.removeItem(RESULTS_KEY);
   }, [setJobIds]);
@@ -147,6 +168,11 @@ export function useGenerationJobs() {
     if (saved.length > 0) setJobIdsState(saved);
     const savedResults = readStoredResults();
     if (savedResults.length > 0) setCompletedResults(savedResults);
+
+    const clearedIds = readClearedJobIds();
+    for (const id of clearedIds) {
+      removedJobIdsRef.current.add(id);
+    }
   }, []);
 
   // Persist completedResults to sessionStorage
@@ -173,11 +199,15 @@ export function useGenerationJobs() {
 
   useEffect(() => {
     if (!myJobsQuery.data) return;
+
+    const clearedIds = readClearedJobIds();
+
     const activeIds = myJobsQuery.data
       .filter(
         (j) =>
           ACTIVE_STATUSES.has(j.status) &&
-          !removedJobIdsRef.current.has(j.id),
+          !removedJobIdsRef.current.has(j.id) &&
+          !clearedIds.includes(j.id),
       )
       .map((j) => j.id);
     if (activeIds.length === 0) return;

apps/web/src/routeTree.gen.ts

@@ -9,6 +9,7 @@
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
 import { Route as rootRouteImport } from './routes/__root'
+import { Route as VerifyEmailRouteImport } from './routes/verify-email'
 import { Route as SetupAvatarRouteImport } from './routes/setup-avatar'
 import { Route as SettingsRouteImport } from './routes/settings'
 import { Route as PackagesRouteImport } from './routes/packages'
@@ -19,6 +20,7 @@ import { Route as LandingRouteImport } from './routes/landing'
 import { Route as JobsRouteImport } from './routes/jobs'
 import { Route as HistoryRouteImport } from './routes/history'
 import { Route as GenerateRouteImport } from './routes/generate'
+import { Route as ForgotPasswordRouteImport } from './routes/forgot-password'
 import { Route as BankRouteImport } from './routes/bank'
 import { Route as AnalyticsRouteImport } from './routes/analytics'
 import { Route as IndexRouteImport } from './routes/index'
@@ -29,6 +31,11 @@ import { Route as PackageIdIndexRouteImport } from './routes/package.$id.index'
 import { Route as PackageIdTakeRouteImport } from './routes/package.$id.take'
 import { Route as PackageIdAttemptAttemptIdRouteImport } from './routes/package.$id.attempt.$attemptId'
 
+const VerifyEmailRoute = VerifyEmailRouteImport.update({
+  id: '/verify-email',
+  path: '/verify-email',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const SetupAvatarRoute = SetupAvatarRouteImport.update({
   id: '/setup-avatar',
   path: '/setup-avatar',
@@ -79,6 +86,11 @@ const GenerateRoute = GenerateRouteImport.update({
   path: '/generate',
   getParentRoute: () => rootRouteImport,
 } as any)
+const ForgotPasswordRoute = ForgotPasswordRouteImport.update({
+  id: '/forgot-password',
+  path: '/forgot-password',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const BankRoute = BankRouteImport.update({
   id: '/bank',
   path: '/bank',
@@ -130,6 +142,7 @@ export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/analytics': typeof AnalyticsRoute
   '/bank': typeof BankRoute
+  '/forgot-password': typeof ForgotPasswordRoute
   '/generate': typeof GenerateRoute
   '/history': typeof HistoryRoute
   '/jobs': typeof JobsRoute
@@ -140,6 +153,7 @@ export interface FileRoutesByFullPath {
   '/packages': typeof PackagesRoute
   '/settings': typeof SettingsRoute
   '/setup-avatar': typeof SetupAvatarRoute
+  '/verify-email': typeof VerifyEmailRoute
   '/attempt/$id': typeof AttemptIdRoute
   '/package/$id': typeof PackageIdRouteWithChildren
   '/profile/$userId': typeof ProfileUserIdRoute
@@ -151,6 +165,7 @@ export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/analytics': typeof AnalyticsRoute
   '/bank': typeof BankRoute
+  '/forgot-password': typeof ForgotPasswordRoute
   '/generate': typeof GenerateRoute
   '/history': typeof HistoryRoute
   '/jobs': typeof JobsRoute
@@ -161,6 +176,7 @@ export interface FileRoutesByTo {
   '/packages': typeof PackagesRoute
   '/settings': typeof SettingsRoute
   '/setup-avatar': typeof SetupAvatarRoute
+  '/verify-email': typeof VerifyEmailRoute
   '/attempt/$id': typeof AttemptIdRoute
   '/profile/$userId': typeof ProfileUserIdRoute
   '/package/$id/take': typeof PackageIdTakeRoute
@@ -172,6 +188,7 @@ export interface FileRoutesById {
   '/': typeof IndexRoute
   '/analytics': typeof AnalyticsRoute
   '/bank': typeof BankRoute
+  '/forgot-password': typeof ForgotPasswordRoute
   '/generate': typeof GenerateRoute
   '/history': typeof HistoryRoute
   '/jobs': typeof JobsRoute
@@ -182,6 +199,7 @@ export interface FileRoutesById {
   '/packages': typeof PackagesRoute
   '/settings': typeof SettingsRoute
   '/setup-avatar': typeof SetupAvatarRoute
+  '/verify-email': typeof VerifyEmailRoute
   '/attempt/$id': typeof AttemptIdRoute
   '/package/$id': typeof PackageIdRouteWithChildren
   '/profile/$userId': typeof ProfileUserIdRoute
@@ -195,6 +213,7 @@ export interface FileRouteTypes {
     | '/'
     | '/analytics'
     | '/bank'
+    | '/forgot-password'
     | '/generate'
     | '/history'
     | '/jobs'
@@ -205,6 +224,7 @@ export interface FileRouteTypes {
     | '/packages'
     | '/settings'
     | '/setup-avatar'
+    | '/verify-email'
     | '/attempt/$id'
     | '/package/$id'
     | '/profile/$userId'
@@ -216,6 +236,7 @@ export interface FileRouteTypes {
     | '/'
     | '/analytics'
     | '/bank'
+    | '/forgot-password'
     | '/generate'
     | '/history'
     | '/jobs'
@@ -226,6 +247,7 @@ export interface FileRouteTypes {
     | '/packages'
     | '/settings'
     | '/setup-avatar'
+    | '/verify-email'
     | '/attempt/$id'
     | '/profile/$userId'
     | '/package/$id/take'
@@ -236,6 +258,7 @@ export interface FileRouteTypes {
     | '/'
     | '/analytics'
     | '/bank'
+    | '/forgot-password'
     | '/generate'
     | '/history'
     | '/jobs'
@@ -246,6 +269,7 @@ export interface FileRouteTypes {
     | '/packages'
     | '/settings'
     | '/setup-avatar'
+    | '/verify-email'
     | '/attempt/$id'
     | '/package/$id'
     | '/profile/$userId'
@@ -258,6 +282,7 @@ export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   AnalyticsRoute: typeof AnalyticsRoute
   BankRoute: typeof BankRoute
+  ForgotPasswordRoute: typeof ForgotPasswordRoute
   GenerateRoute: typeof GenerateRoute
   HistoryRoute: typeof HistoryRoute
   JobsRoute: typeof JobsRoute
@@ -268,6 +293,7 @@ export interface RootRouteChildren {
   PackagesRoute: typeof PackagesRoute
   SettingsRoute: typeof SettingsRoute
   SetupAvatarRoute: typeof SetupAvatarRoute
+  VerifyEmailRoute: typeof VerifyEmailRoute
   AttemptIdRoute: typeof AttemptIdRoute
   PackageIdRoute: typeof PackageIdRouteWithChildren
   ProfileUserIdRoute: typeof ProfileUserIdRoute
@@ -275,6 +301,13 @@ export interface RootRouteChildren {
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
+    '/verify-email': {
+      id: '/verify-email'
+      path: '/verify-email'
+      fullPath: '/verify-email'
+      preLoaderRoute: typeof VerifyEmailRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/setup-avatar': {
       id: '/setup-avatar'
       path: '/setup-avatar'
@@ -345,6 +378,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof GenerateRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/forgot-password': {
+      id: '/forgot-password'
+      path: '/forgot-password'
+      fullPath: '/forgot-password'
+      preLoaderRoute: typeof ForgotPasswordRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/bank': {
       id: '/bank'
       path: '/bank'
@@ -431,6 +471,7 @@ const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   AnalyticsRoute: AnalyticsRoute,
   BankRoute: BankRoute,
+  ForgotPasswordRoute: ForgotPasswordRoute,
   GenerateRoute: GenerateRoute,
   HistoryRoute: HistoryRoute,
   JobsRoute: JobsRoute,
@@ -441,6 +482,7 @@ const rootRouteChildren: RootRouteChildren = {
   PackagesRoute: PackagesRoute,
   SettingsRoute: SettingsRoute,
   SetupAvatarRoute: SetupAvatarRoute,
+  VerifyEmailRoute: VerifyEmailRoute,
   AttemptIdRoute: AttemptIdRoute,
   PackageIdRoute: PackageIdRouteWithChildren,
   ProfileUserIdRoute: ProfileUserIdRoute,

apps/web/src/routes/__root.tsx

@@ -40,7 +40,9 @@ function RootComponent() {
       m.routeId === "/package/$id/take" ||
       m.routeId === "/package/$id/attempt/$attemptId" ||
       m.routeId === "/login" ||
-      m.routeId === "/setup-avatar",
+      m.routeId === "/setup-avatar" ||
+      m.routeId === "/verify-email" ||
+      m.routeId === "/forgot-password",
   );
   const isLanding = matches.some((m) => m.routeId === "/landing");
 

apps/web/src/routes/attempt.$id.tsx

@@ -1,13 +1,17 @@
-import { useState } from "react";
+import { useState, useMemo } from "react";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { createFileRoute, redirect, Link } from "@tanstack/react-router";
 import { authClient } from "@/lib/auth-client";
 import { trpc } from "@/utils/trpc";
 import { Button } from "@labas/ui/components/button";
 import { Card, CardContent } from "@labas/ui/components/card";
-import { Input } from "@labas/ui/components/input";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 import { formatTime } from "@/lib/time";
+import { QuestionReviewCard } from "@/components/attempt/QuestionReviewCard";
+import { ReviewFilterBar } from "@/components/attempt/ReviewFilterBar";
+import { SkillBreakdown } from "@/components/attempt/SkillBreakdown";
+
+type FilterStatus = "all" | "wrong" | "correct" | "marked";
 
 export const Route = createFileRoute("/attempt/$id")({
   component: AttemptResultComponent,
@@ -47,6 +51,75 @@ function AttemptResultComponent() {
     ? Math.round((new Date(attempt.finishedAt).getTime() - new Date(attempt.startedAt).getTime()) / 1000)
     : 0;
 
+  // ── Filter state ──
+  const [filterStatus, setFilterStatus] = useState<FilterStatus>("all");
+  const [filterSkills, setFilterSkills] = useState<string[]>([]);
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
+  const [allExpanded, setAllExpanded] = useState(false);
+
+  // ── Flatten all questions with section context ──
+  const allQuestions = useMemo(() => {
+    if (!attempt?.sections) return [];
+    return attempt.sections.flatMap((sec: any, secIdx: number) =>
+      sec.questions.map((q: any, qIdx: number) => ({
+        q,
+        secIdx,
+        qIdx,
+        ans: sec.answers.find((a: any) => a.questionId === q.id) ?? null,
+      })),
+    );
+  }, [attempt]);
+
+  // ── Filtered questions ──
+  const partialCount = useMemo(
+    () => allQuestions.filter(({ ans }: any) => ans?.partialScore != null && ans?.partialScore < 100).length,
+    [allQuestions],
+  );
+
+  const filteredQuestions = useMemo(() => {
+    return allQuestions.filter(({ q, ans }: any) => {
+      if (filterStatus === "wrong" && ans?.isCorrect !== false) return false;
+      if (filterStatus === "correct" && ans?.isCorrect !== true) return false;
+      if (filterStatus === "marked") {
+        const hasPartial = ans?.partialScore != null && ans?.partialScore < 100;
+        if (!hasPartial) return false;
+      }
+      if (filterSkills.length > 0) {
+        const tags: string[] = q.skillTags ?? [];
+        if (!filterSkills.some((s) => tags.includes(s))) return false;
+      }
+      return true;
+    });
+  }, [allQuestions, filterStatus, filterSkills]);
+
+  // ── Expand/collapse ──
+  const toggleAllExpanded = () => {
+    const next = !allExpanded;
+    setAllExpanded(next);
+    if (next) {
+      setExpandedIds(new Set(filteredQuestions.map(({ q }: any) => q.id)));
+    } else {
+      setExpandedIds(new Set());
+    }
+  };
+
+  const toggleExpand = (id: string) => {
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+    setAllExpanded(false);
+  };
+
+  const toggleSkill = (skill: string) => {
+    setFilterSkills((prev) =>
+      prev.includes(skill) ? prev.filter((s) => s !== skill) : [skill],
+    );
+    setFilterStatus("all");
+  };
+
   if (attemptQuery.isLoading) {
     return (
       <div className="min-h-screen pt-8 pb-32 px-6 md:px-12 lg:px-16 max-w-4xl mx-auto bg-[var(--warm-cream)]">
@@ -124,7 +197,7 @@ function AttemptResultComponent() {
                     {attempt.totalScore ?? 0} benar
                   </span>
                   <span className="flex items-center gap-1">
-                    <MaterialIcon name="cancel" className="text-sm text-[var(--pomegranate-500)]" />
+                    <MaterialIcon name="cancel" className="text-sm text-[var(--pomegranate-400)]" />
                     {(attempt.maxScore ?? 0) - (attempt.totalScore ?? 0)} salah
                   </span>
                 </div>
@@ -175,7 +248,7 @@ function AttemptResultComponent() {
                       <p className="text-sm text-[var(--warm-charcoal)]">
                         {sec.score ?? 0}/{sec.maxScore ?? 0} benar
                       </p>
-                      {sec.timeSpentSec !== null && sec.timeSpentSec !== undefined && (
+                      {sec.timeSpentSec != null && (
                         <p className="text-xs text-[var(--warm-silver)] mt-1 flex items-center gap-1">
                           <MaterialIcon name="timer" className="text-xs" />
                           {formatTime(sec.timeSpentSec)}
@@ -193,21 +266,71 @@ function AttemptResultComponent() {
         </div>
       </div>
 
+      {/* Skill Breakdown */}
+      <div className="mb-8">
+        <h2 className="text-xl font-headline font-bold text-[var(--clay-black)] mb-4">
+          Kemampuan per Topik
+          <span className="ml-2 text-sm font-normal text-[var(--warm-charcoal)]">Klik topik untuk filter soal</span>
+        </h2>
+        <SkillBreakdown
+          questions={allQuestions.map(({ q, ans }: any) => ({
+            skillTags: q.skillTags,
+            isCorrect: ans?.isCorrect,
+          }))}
+          onSkillClick={toggleSkill}
+          activeSkills={filterSkills}
+        />
+      </div>
+
       {/* Question Review */}
       <div className="mb-8">
-        <h2 className="text-xl font-headline font-bold text-[var(--clay-black)] mb-4">Pembahasan Soal</h2>
-        <div className="space-y-4">
-          {attempt.sections.map((sec: any, secIdx: number) =>
-            sec.questions.map((q: any, qIdx: number) => (
-              <QuestionReviewCard
-                key={q.id}
-                q={q}
-                secIdx={secIdx}
-                qIdx={qIdx}
-                ans={sec.answers.find((a: any) => a.questionId === q.id)}
-                userId={session?.user.id}
-              />
-            )),
+        <h2 className="text-xl font-headline font-bold text-[var(--clay-black)] mb-4">
+          Pembahasan Soal
+          {filterStatus !== "all" && (
+            <span className="ml-2 text-sm font-normal text-[var(--warm-charcoal)]">
+              ({filteredQuestions.length} soal)
+            </span>
+          )}
+        </h2>
+
+        <ReviewFilterBar
+          filterStatus={filterStatus}
+          setFilterStatus={setFilterStatus}
+          filterSkills={filterSkills}
+          setFilterSkills={setFilterSkills}
+          questions={allQuestions.map(({ q, ans }: any) => ({
+            skillTags: q.skillTags ?? [],
+            isCorrect: ans?.isCorrect,
+          }))}
+          markedCount={partialCount}
+          allExpanded={allExpanded}
+          onToggleAllExpanded={toggleAllExpanded}
+        />
+
+        <div className="space-y-3">
+          {filteredQuestions.map(({ q, secIdx, qIdx, ans }: any) => (
+            <QuestionReviewCard
+              key={q.id}
+              q={q}
+              secIdx={secIdx}
+              qIdx={qIdx}
+              ans={ans}
+              userId={session?.user.id}
+              isExpanded={expandedIds.has(q.id)}
+              onToggleExpand={() => toggleExpand(q.id)}
+            />
+          ))}
+          {filteredQuestions.length === 0 && (
+            <div className="text-center py-12">
+              <MaterialIcon name="search_off" className="text-4xl text-[var(--warm-silver)] mx-auto mb-3" />
+              <p className="text-sm text-[var(--warm-charcoal)]">Tidak ada soal yang sesuai filter.</p>
+              <button
+                onClick={() => { setFilterStatus("all"); setFilterSkills([]); }}
+                className="text-sm text-[var(--matcha-600)] font-semibold mt-2 hover:underline"
+              >
+                Reset filter
+              </button>
+            </div>
           )}
         </div>
       </div>
@@ -233,243 +356,3 @@ function AttemptResultComponent() {
     </div>
   );
 }
-
-function QuestionReviewCard({
-  q,
-  secIdx,
-  qIdx,
-  ans,
-  userId,
-}: {
-  q: any;
-  secIdx: number;
-  qIdx: number;
-  ans: any;
-  userId?: string;
-}) {
-  const isCorrect = ans?.isCorrect;
-  const userAnswer = ans?.userAnswer ?? "Tidak dijawab";
-  const isOwner = q.creatorUserId === userId;
-
-  const [isEditing, setIsEditing] = useState(false);
-  const [editPassage, setEditPassage] = useState(q.passageText ?? "");
-  const [editCorrectAnswer, setEditCorrectAnswer] = useState(q.correctAnswer ?? "");
-  const [editExplanation, setEditExplanation] = useState(q.explanation ?? "");
-
-  const feedbackQuery = useQuery(
-    trpc.feedback.getQuestionFeedback.queryOptions(
-      { questionId: q.id },
-      { enabled: !!q.id },
-    ),
-  );
-
-  const voteMutation = useMutation({
-    ...trpc.feedback.voteQuestion.mutationOptions(),
-    onSuccess: () => feedbackQuery.refetch(),
-  });
-
-  const updateQuestionMutation = useMutation({
-    ...trpc.question.update.mutationOptions(),
-    onSuccess: () => {
-      setIsEditing(false);
-      // Ideally refetch attempt data here
-      window.location.reload();
-    },
-  });
-
-  const handleSaveEdit = () => {
-    updateQuestionMutation.mutate({
-      id: q.id,
-      passageText: editPassage,
-      correctAnswer: editCorrectAnswer,
-      explanation: editExplanation,
-    });
-  };
-
-  return (
-    <Card
-      className={`clay-shadow bg-[var(--pure-white)] border-2 rounded-[var(--radius-xl)] ${
-        isCorrect === true
-          ? "border-[var(--matcha-400)]"
-          : isCorrect === false
-            ? "border-[var(--pomegranate-400)]"
-            : "border-[var(--oat-border)]"
-      }`}
-    >
-      <CardContent className="p-5">
-        <div className="flex items-start gap-3 mb-3">
-          <span
-            className={`w-8 h-8 rounded-full text-xs flex items-center justify-center font-bold shrink-0 ${
-              isCorrect === true
-                ? "bg-[var(--matcha-600)] text-[var(--pure-white)]"
-                : isCorrect === false
-                  ? "bg-[var(--pomegranate-500)] text-[var(--pure-white)]"
-                  : "bg-[var(--oat-light)] text-[var(--warm-charcoal)]"
-            }`}
-          >
-            {secIdx + 1}.{qIdx + 1}
-          </span>
-          <div className="flex-1">
-            <p className="text-[var(--clay-black)] font-medium">{q.questionText}</p>
-            <div className="flex gap-2 mt-1 flex-wrap">
-              <span className="text-xs px-2 py-0.5 rounded bg-[var(--oat-light)] text-[var(--warm-charcoal)]">
-                {q.format.replace(/_/g, " ")}
-              </span>
-            </div>
-          </div>
-          {isOwner && !isEditing && (
-            <button
-              onClick={() => setIsEditing(true)}
-              className="p-1.5 rounded-md hover:bg-[var(--oat-light)] transition-colors text-[var(--warm-charcoal)]"
-              title="Koreksi soal"
-            >
-              <MaterialIcon name="edit" className="text-sm" />
-            </button>
-          )}
-          {isEditing && (
-            <button
-              onClick={() => setIsEditing(false)}
-              className="p-1.5 rounded-md hover:bg-[var(--oat-light)] transition-colors text-[var(--warm-charcoal)]"
-              title="Batal"
-            >
-              <MaterialIcon name="close" className="text-sm" />
-            </button>
-          )}
-        </div>
-
-        <div className="pl-11 space-y-3">
-          {/* Passage Text */}
-          {q.passageText && (
-            <div className="bg-[var(--oat-light)] rounded-[var(--radius-lg)] p-3 text-sm text-[var(--warm-charcoal)] whitespace-pre-wrap leading-relaxed">
-              <span className="font-semibold text-[var(--clay-black)] block mb-1">Teks Bacaan:</span>
-              {q.passageText}
-            </div>
-          )}
-
-          {/* Owner Inline Edit Form */}
-          {isEditing && isOwner && (
-            <div className="space-y-3 bg-[var(--badge-blue-bg)] rounded-[var(--radius-lg)] p-4 border-2 border-[var(--badge-blue-bg)]">
-              <p className="text-sm font-semibold text-[var(--badge-blue-text)] flex items-center gap-2">
-                <MaterialIcon name="edit_note" className="text-sm" />
-                Koreksi Soal
-              </p>
-              <div>
-                <label className="text-xs font-medium text-[var(--warm-charcoal)] mb-1 block">Teks Bacaan</label>
-                <textarea
-                  value={editPassage}
-                  onChange={(e) => setEditPassage(e.target.value)}
-                  className="w-full min-h-[80px] p-2 rounded-[var(--radius-md)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] text-sm text-[var(--clay-black)] resize-y"
-                />
-              </div>
-              <div>
-                <label className="text-xs font-medium text-[var(--warm-charcoal)] mb-1 block">Jawaban Benar</label>
-                <Input
-                  value={editCorrectAnswer}
-                  onChange={(e) => setEditCorrectAnswer(e.target.value)}
-                  className="h-9 text-sm"
-                />
-              </div>
-              <div>
-                <label className="text-xs font-medium text-[var(--warm-charcoal)] mb-1 block">Penjelasan</label>
-                <textarea
-                  value={editExplanation}
-                  onChange={(e) => setEditExplanation(e.target.value)}
-                  className="w-full min-h-[60px] p-2 rounded-[var(--radius-md)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] text-sm text-[var(--clay-black)] resize-y"
-                />
-              </div>
-              <div className="flex gap-2">
-                <Button
-                  onClick={handleSaveEdit}
-                  disabled={updateQuestionMutation.isPending}
-                  className="h-9 text-sm bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] rounded-[var(--radius-lg)]"
-                >
-                  <MaterialIcon name="save" className="text-sm mr-1" />
-                  Simpan
-                </Button>
-                <Button
-                  variant="outline"
-                  onClick={() => setIsEditing(false)}
-                  className="h-9 text-sm rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)]"
-                >
-                  Batal
-                </Button>
-              </div>
-            </div>
-          )}
-
-          <div className="flex flex-wrap gap-4 text-sm">
-            <div>
-              <span className="text-[var(--warm-silver)]">Jawaban Anda:</span>{" "}
-              <span
-                className={`font-semibold ${
-                  isCorrect === true
-                    ? "text-[var(--matcha-700)]"
-                    : isCorrect === false
-                      ? "text-[var(--pomegranate-600)]"
-                      : "text-[var(--warm-charcoal)]"
-                }`}
-              >
-                {userAnswer}
-              </span>
-            </div>
-            {ans?.partialScore != null && ans?.partialScore < 100 && (
-              <div>
-                <span className="text-[var(--warm-silver)]">Skor Parsial:</span>{" "}
-                <span className="font-semibold text-[var(--lemon-700)]">
-                  {ans.partialScore}%
-                </span>
-              </div>
-            )}
-            {(isCorrect === false || isCorrect === null) && (
-              <div>
-                <span className="text-[var(--warm-silver)]">Jawaban Benar:</span>{" "}
-                <span className="font-semibold text-[var(--matcha-700)]">
-                  {q.correctAnswer}
-                </span>
-              </div>
-            )}
-            {ans?.timeSpentSec !== null && ans?.timeSpentSec !== undefined && (
-              <div className="flex items-center gap-1 text-[var(--warm-silver)]">
-                <MaterialIcon name="timer" className="text-xs" />
-                <span>{formatTime(ans.timeSpentSec)}</span>
-              </div>
-            )}
-          </div>
-
-          {q.explanation && !isEditing && (
-            <div className="bg-[var(--oat-light)] rounded-[var(--radius-lg)] p-3 text-sm text-[var(--warm-charcoal)]">
-              <span className="font-semibold text-[var(--clay-black)]">Penjelasan:</span>{" "}
-              {q.explanation}
-            </div>
-          )}
-
-          {/* Thumbs Feedback */}
-          <div className="flex items-center gap-3 pt-1">
-            <button
-              onClick={() => voteMutation.mutate({ questionId: q.id, type: "up" })}
-              className={`flex items-center gap-1 px-3 py-1.5 rounded-full text-xs font-medium transition-all ${
-                feedbackQuery.data?.myFeedback === "up"
-                  ? "bg-[var(--matcha-300)] text-[var(--matcha-800)]"
-                  : "bg-[var(--oat-light)] text-[var(--warm-charcoal)] hover:bg-[var(--matcha-300)] hover:text-[var(--matcha-800)]"
-              }`}
-            >
-              <MaterialIcon name="thumb_up" className="text-sm" />
-              <span>{feedbackQuery.data?.up ?? 0}</span>
-            </button>
-            <button
-              onClick={() => voteMutation.mutate({ questionId: q.id, type: "down" })}
-              className={`flex items-center gap-1 px-3 py-1.5 rounded-full text-xs font-medium transition-all ${
-                feedbackQuery.data?.myFeedback === "down"
-                  ? "bg-[var(--pomegranate-100)] text-[var(--pomegranate-600)]"
-                  : "bg-[var(--oat-light)] text-[var(--warm-charcoal)] hover:bg-[var(--pomegranate-100)] hover:text-[var(--pomegranate-600)]"
-              }`}
-            >
-              <MaterialIcon name="thumb_down" className="text-sm" />
-              <span>{feedbackQuery.data?.down ?? 0}</span>
-            </button>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  );
-}

apps/web/src/routes/forgot-password.tsx

@@ -0,0 +1,253 @@
+import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
+import { useState, useEffect, useRef } from "react";
+import { useMutation } from "@tanstack/react-query";
+import { Button } from "@labas/ui/components/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@labas/ui/components/card";
+import { Input } from "@labas/ui/components/input";
+import { Label } from "@labas/ui/components/label";
+import { toast } from "sonner";
+import { trpc } from "@/utils/trpc";
+
+export const Route = createFileRoute("/forgot-password")({
+  component: RouteComponent,
+});
+
+function StepEmail({ onNext }: { onNext: (email: string) => void }) {
+  const [email, setEmail] = useState("");
+  const sendMutation = useMutation(trpc.verification.sendPasswordResetOtp.mutationOptions());
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!email) return;
+    try {
+      await sendMutation.mutateAsync({ email });
+      toast.success("Kode OTP telah dikirim ke email Anda");
+      onNext(email);
+    } catch (err: any) {
+      toast.error(err.message || "Gagal mengirim OTP");
+    }
+  };
+
+  return (
+    <Card className="mx-auto w-full max-w-md shadow-lg border-muted rounded-xl">
+      <CardHeader className="space-y-1 text-center">
+        <CardTitle className="text-3xl font-bold tracking-tight">Lupa Password</CardTitle>
+        <CardDescription>
+          Masukkan email Anda untuk menerima kode reset password
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="nama@email.com"
+              required
+            />
+          </div>
+
+          <Button type="submit" className="w-full" disabled={sendMutation.isPending || !email}>
+            {sendMutation.isPending ? "Mengirim..." : "Kirim Kode"}
+          </Button>
+        </form>
+
+        <div className="text-center">
+          <Link to="/login" className="text-sm text-muted-foreground hover:text-primary">
+            Kembali ke halaman masuk
+          </Link>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function StepReset({ email }: { email: string }) {
+  const navigate = useNavigate();
+  const [otp, setOtp] = useState(["", "", "", "", "", ""]);
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [countdown, setCountdown] = useState(60);
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
+
+  const resetMutation = useMutation(trpc.verification.resetPassword.mutationOptions());
+  const resendMutation = useMutation(trpc.verification.sendPasswordResetOtp.mutationOptions());
+
+  useEffect(() => {
+    inputRefs.current[0]?.focus();
+  }, []);
+
+  useEffect(() => {
+    if (countdown > 0) {
+      const timer = setTimeout(() => setCountdown(countdown - 1), 1000);
+      return () => clearTimeout(timer);
+    }
+  }, [countdown]);
+
+  const handleOtpChange = (index: number, value: string) => {
+    if (!/^\d?$/.test(value)) return;
+    const newOtp = [...otp];
+    newOtp[index] = value;
+    setOtp(newOtp);
+    if (value && index < 5) {
+      inputRefs.current[index + 1]?.focus();
+    }
+  };
+
+  const handleKeyDown = (index: number, e: React.KeyboardEvent) => {
+    if (e.key === "Backspace" && !otp[index] && index > 0) {
+      inputRefs.current[index - 1]?.focus();
+    }
+  };
+
+  const handlePaste = (e: React.ClipboardEvent) => {
+    e.preventDefault();
+    const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, 6);
+    const newOtp = [...otp];
+    for (let i = 0; i < pasted.length; i++) {
+      newOtp[i] = pasted[i];
+    }
+    setOtp(newOtp);
+    const nextIndex = Math.min(pasted.length, 5);
+    inputRefs.current[nextIndex]?.focus();
+  };
+
+  const handleResend = async () => {
+    try {
+      await resendMutation.mutateAsync({ email });
+      toast.success("Kode OTP telah dikirim ulang");
+      setCountdown(60);
+    } catch (err: any) {
+      toast.error(err.message || "Gagal mengirim ulang OTP");
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const code = otp.join("");
+
+    if (code.length !== 6) {
+      toast.error("Masukkan 6 digit kode OTP");
+      return;
+    }
+    if (newPassword.length < 8) {
+      toast.error("Password minimal 8 karakter");
+      return;
+    }
+    if (newPassword !== confirmPassword) {
+      toast.error("Password tidak cocok");
+      return;
+    }
+
+    try {
+      await resetMutation.mutateAsync({ email, otp: code, newPassword });
+      toast.success("Password berhasil direset! Silakan masuk.");
+      navigate({ to: "/login" });
+    } catch (err: any) {
+      toast.error(err.message || "Gagal mereset password");
+      setOtp(["", "", "", "", "", ""]);
+      inputRefs.current[0]?.focus();
+    }
+  };
+
+  const isMutating = resetMutation.isPending || resendMutation.isPending;
+
+  return (
+    <Card className="mx-auto w-full max-w-md shadow-lg border-muted rounded-xl">
+      <CardHeader className="space-y-1 text-center">
+        <CardTitle className="text-3xl font-bold tracking-tight">Reset Password</CardTitle>
+        <CardDescription>
+          Masukkan kode dari email dan password baru Anda
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label>Kode OTP</Label>
+            <div className="flex justify-center gap-2" onPaste={handlePaste}>
+              {otp.map((digit, i) => (
+                <Input
+                  key={i}
+                  ref={(el) => { inputRefs.current[i] = el; }}
+                  type="text"
+                  inputMode="numeric"
+                  maxLength={1}
+                  value={digit}
+                  onChange={(e) => handleOtpChange(i, e.target.value)}
+                  onKeyDown={(e) => handleKeyDown(i, e)}
+                  className="w-12 h-14 text-center text-xl font-bold"
+                />
+              ))}
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="newPassword">Password Baru</Label>
+            <Input
+              id="newPassword"
+              type="password"
+              value={newPassword}
+              onChange={(e) => setNewPassword(e.target.value)}
+              placeholder="Minimal 8 karakter"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="confirmPassword">Konfirmasi Password Baru</Label>
+            <Input
+              id="confirmPassword"
+              type="password"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              placeholder="Ulangi password baru"
+            />
+          </div>
+
+          <Button
+            type="submit"
+            className="w-full"
+            disabled={isMutating || otp.join("").length !== 6 || !newPassword || !confirmPassword}
+          >
+            {resetMutation.isPending ? "Menyimpan..." : "Reset Password"}
+          </Button>
+
+          <div className="text-center text-sm text-muted-foreground">
+            Tidak menerima kode?{" "}
+            <Button
+              type="button"
+              variant="link"
+              className="p-0 h-auto font-semibold"
+              disabled={resendMutation.isPending || countdown > 0}
+              onClick={handleResend}
+            >
+              {countdown > 0 ? `Kirim ulang (${countdown}s)` : "Kirim Ulang"}
+            </Button>
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}
+
+function RouteComponent() {
+  const [email, setEmail] = useState<string | null>(null);
+
+  if (!email) {
+    return (
+      <div className="flex h-screen w-full items-center justify-center bg-muted/30">
+        <img src="/logo.png" alt="Labas Logo" className="h-20 w-auto mb-8 absolute top-8" />
+        <StepEmail onNext={setEmail} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-screen w-full items-center justify-center bg-muted/30">
+      <img src="/logo.png" alt="Labas Logo" className="h-20 w-auto mb-8 absolute top-8" />
+      <StepReset email={email} />
+    </div>
+  );
+}

apps/web/src/routes/generate.tsx

@@ -107,6 +107,8 @@ function RouteComponent() {
   const [weaknessAlign, setWeaknessAlign] = useState(75);
   const [mode, setMode] = useState<"quick" | "agentic">("quick");
 
+  const isReadingAndWriting = selectedSections.includes("READING") && selectedSections.includes("WRITING");
+
   useEffect(() => {
     setSelectedFormats((prev) => {
       const valid = prev.filter((f) =>
@@ -119,6 +121,13 @@ function RouteComponent() {
     });
   }, [examType]);
 
+  useEffect(() => {
+    if (isReadingAndWriting) {
+      if (questionCount < 20) setQuestionCount(20);
+      if (mode === "quick") setMode("agentic");
+    }
+  }, [isReadingAndWriting]);
+
   const generate = useMutation({
     ...trpc.ai.generate.mutationOptions(),
     onSuccess: (data) => {
@@ -257,6 +266,7 @@ function RouteComponent() {
             <Link to="/settings">
               <Button
                 variant="outline"
+                size="xl"
                 className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover"
               >
                 <MaterialIcon name="settings" className="mr-1" />
@@ -337,26 +347,32 @@ function RouteComponent() {
               <span className="ml-2 text-sm font-normal text-[var(--warm-charcoal)]">{questionCount} soal</span>
             </label>
             <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
-              {QUESTION_COUNT_PRESETS.map((p) => (
+              {QUESTION_COUNT_PRESETS.map((p) => {
+                const isDisabled = isReadingAndWriting && (p.value === 5 || p.value === 10);
+                return (
                 <button
                   key={p.value}
                   onClick={() => setQuestionCount(p.value)}
+                  disabled={isDisabled}
                   className={`py-4 px-2 rounded-[var(--radius-lg)] text-sm font-semibold transition-all clay-hover flex flex-col items-center gap-1 min-h-[72px] ${
-                    questionCount === p.value
-                      ? "bg-[var(--clay-black)] text-[var(--pure-white)] clay-shadow"
-                      : "bg-[var(--pure-white)] text-[var(--warm-charcoal)] hover:bg-[var(--oat-light)] border-2 border-[var(--oat-border)]"
+                    isDisabled
+                      ? "bg-[var(--oat-light)] text-[var(--warm-silver)] cursor-not-allowed opacity-50 border-2 border-[var(--oat-border)]"
+                      : questionCount === p.value
+                        ? "bg-[var(--clay-black)] text-[var(--pure-white)] clay-shadow"
+                        : "bg-[var(--pure-white)] text-[var(--warm-charcoal)] hover:bg-[var(--oat-light)] border-2 border-[var(--oat-border)]"
                   }`}
                 >
                   <span>{p.label}</span>
                   <span className={`text-xs ${questionCount === p.value ? "text-[var(--pure-white)]/70" : "text-[var(--warm-charcoal)]/70"}`}>{p.desc}</span>
                 </button>
-              ))}
+              );
+              })}
             </div>
             <div className="flex items-center gap-3 mt-1">
               <span className="text-xs font-medium text-[var(--warm-charcoal)] whitespace-nowrap">Custom:</span>
               <input
                 type="range"
-                min={1}
+                min={isReadingAndWriting ? 20 : 1}
                 max={40}
                 value={questionCount}
                 onChange={(e) => setQuestionCount(Number(e.target.value))}
@@ -514,6 +530,7 @@ function RouteComponent() {
             error={error}
             onGenerate={handleGenerate}
             onDismissError={() => setError(null)}
+            disableQuick={isReadingAndWriting}
           />
         </div>
       </div>

apps/web/src/routes/index.tsx

@@ -13,6 +13,9 @@ export const Route = createFileRoute("/")({
     if (!session.data) {
       throw redirect({ to: "/landing" });
     }
+    if (!session.data.user.emailVerified) {
+      throw redirect({ to: "/verify-email", search: { email: session.data.user.email } });
+    }
     if (!session.data.user.image) {
       throw redirect({ to: "/setup-avatar" });
     }

apps/web/src/routes/packages.tsx

@@ -1,3 +1,4 @@
+import { useState, useEffect } from "react";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { createFileRoute, redirect, Link, useNavigate } from "@tanstack/react-router";
 import { z } from "zod";
@@ -101,6 +102,38 @@ function PackagesComponent() {
     updateMutation.mutate({ id: pkgId, isPublic: !current });
   };
 
+  const bulkPublish = useMutation({
+    ...trpc.package.bulkPublish.mutationOptions(),
+    onSuccess: (data) => {
+      query.refetch();
+      setBulkMode(false);
+      setSelectedIds(new Set());
+      toast.success(`${data.updated} paket berhasil dipublikasikan`);
+    },
+    onError: (err: any) => toast.error("Gagal mempublikasikan", { description: err.message }),
+  });
+
+  // ── Bulk select ──
+  const [bulkMode, setBulkMode] = useState(false);
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+
+  const toggleSelect = (id: string) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  const clearSelection = () => setSelectedIds(new Set());
+  const selectAll = () => setSelectedIds(new Set(packages.map((p: any) => p.id)));
+
+  useEffect(() => {
+    setBulkMode(false);
+    setSelectedIds(new Set());
+  }, [tab, searchText, examType]);
+
   const setTab = (newTab: Tab) => {
     navigate({ search: { tab: newTab, search: "", examType: "", page: 1 } });
   };
@@ -194,6 +227,60 @@ function PackagesComponent() {
         </Select>
       </div>
 
+      {/* Bulk toolbar */}
+      {tab === "mine" && (
+        <div className="flex items-center justify-between mb-4 p-3 rounded-[var(--radius-lg)] bg-[var(--oat-light)] border-2 border-[var(--oat-border)]">
+          {bulkMode ? (
+            <>
+              <div className="flex items-center gap-3">
+                <button
+                  onClick={clearSelection}
+                  className="text-xs font-semibold text-[var(--warm-charcoal)] hover:text-[var(--clay-black)] transition-colors flex items-center gap-1"
+                >
+                  <MaterialIcon name="close" className="text-xs" />
+                  Batalkan ({selectedIds.size})
+                </button>
+                <button
+                  onClick={selectAll}
+                  className="text-xs font-semibold text-[var(--matcha-600)] hover:text-[var(--matcha-800)] transition-colors flex items-center gap-1"
+                >
+                  <MaterialIcon name="select_all" className="text-xs" />
+                  Pilih Semua
+                </button>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button
+                  size="lg"
+                  disabled={selectedIds.size === 0 || bulkPublish.isPending}
+                  onClick={() => bulkPublish.mutate({ ids: Array.from(selectedIds) })}
+                  className="rounded-[var(--radius-md)] bg-[var(--matcha-600)] text-[var(--pure-white)] hover:bg-[var(--matcha-800)]"
+                >
+                  <MaterialIcon name="public" className="text-xs mr-1" />
+                  {bulkPublish.isPending ? "Mempublikasikan..." : `Jadikan Publik (${selectedIds.size})`}
+                </Button>
+                <button
+                  onClick={() => { setBulkMode(false); setSelectedIds(new Set()); }}
+                  className="text-xs font-semibold text-[var(--warm-charcoal)] hover:text-[var(--clay-black)] transition-colors"
+                >
+                  Selesai
+                </button>
+              </div>
+            </>
+          ) : (
+            <>
+              <span className="text-sm text-[var(--warm-charcoal)]">{packages.length} paket</span>
+              <button
+                onClick={() => setBulkMode(true)}
+                className="text-xs font-semibold text-[var(--matcha-600)] hover:text-[var(--matcha-800)] transition-colors flex items-center gap-1"
+              >
+                <MaterialIcon name="select_all" className="text-sm" />
+                Pilih Banyak
+              </button>
+            </>
+          )}
+        </div>
+      )}
+
       {/* Results */}
       {query.isLoading ? (
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -230,16 +317,42 @@ function PackagesComponent() {
           <div data-tour="packages-list" className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
             {packages.map((pkg) => {
               const isOwner = pkg.creatorUserId === userId;
+              const isSelected = selectedIds.has(pkg.id);
               return (
-                <Card key={pkg.id} className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] h-full flex flex-col">
+                <Card
+                  key={pkg.id}
+                  className={`clay-shadow clay-hover bg-[var(--pure-white)] border-2 rounded-[var(--radius-xl)] h-full flex flex-col ${
+                    bulkMode && isSelected
+                      ? "border-[var(--matcha-600)] ring-2 ring-[var(--matcha-400)]"
+                      : "border-[var(--oat-border)]"
+                  }`}
+                >
                   <CardContent className="p-5 flex flex-col h-full">
-                    <Link to="/package/$id" params={{ id: pkg.id }} className="block flex-1">
+                    <div
+                      className="block flex-1 cursor-pointer"
+                      onClick={bulkMode ? () => toggleSelect(pkg.id) : undefined}
+                    >
+                      <Link
+                        to="/package/$id"
+                        params={{ id: pkg.id }}
+                        className={bulkMode ? "pointer-events-none" : ""}
+                      >
                       <div className="flex items-start justify-between mb-3">
                         <div className="flex gap-2 flex-wrap">
-                          <span className="px-2.5 py-1 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-xs font-semibold">
+                          {bulkMode && (
+                            <span className={`px-2 py-1 rounded-full text-[10px] font-semibold flex items-center gap-1 ${
+                              isSelected
+                                ? "bg-[var(--matcha-600)] text-[var(--pure-white)]"
+                                : "bg-[var(--oat-light)] text-[var(--warm-charcoal)]"
+                            }`}>
+                              <MaterialIcon name={isSelected ? "check_circle" : "radio_button_unchecked"} className="text-xs" />
+                              {isSelected ? "Terpilih" : "Pilih"}
+                            </span>
+                          )}
+                          <span className="inline-flex items-center px-2.5 py-1 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-xs font-semibold leading-none whitespace-nowrap">
                             {pkg.examTypeName}
                           </span>
-                          {isOwner && (
+                          {isOwner && !bulkMode && (
                             <span
                               className={`px-2 py-1 rounded-full text-[10px] font-semibold ${
                                 pkg.isPublic
@@ -268,6 +381,7 @@ function PackagesComponent() {
                           {pkg.description}
                         </p>
                       )}
+                      </Link>
 
                       <div className="flex items-center justify-between mt-auto pt-3 border-t border-[var(--oat-border)]">
                         <div className="flex gap-3 text-xs text-[var(--warm-charcoal)]">
@@ -290,10 +404,10 @@ function PackagesComponent() {
                           {pkg.usageCount}x digunakan
                         </span>
                       </div>
-                    </Link>
+                    </div>
 
                     {/* Owner actions */}
-                    {isOwner && (
+                    {isOwner && !bulkMode && (
                       <div className="mt-3 pt-3 border-t border-[var(--oat-border)] flex items-center justify-between">
                         <button
                           onClick={() => togglePublic(pkg.id, pkg.isPublic)}
@@ -322,15 +436,18 @@ function PackagesComponent() {
                       </div>
                     )}
 
-                    <div className="mt-3 pt-3 border-t border-[var(--oat-border)]">
-                      <Button
-                        className="w-full bg-[var(--matcha-600)] text-[var(--pure-white)] hover:bg-[var(--matcha-800)] clay-hover rounded-[var(--radius-lg)]"
-                        onClick={() => routerNavigate({ to: '/package/$id/take', params: { id: pkg.id } })}
-                      >
-                        <MaterialIcon name="play_arrow" className="mr-2" />
-                        Mulai Latihan
-                      </Button>
-                    </div>
+                    {!bulkMode && (
+                      <div className="mt-3 pt-3 border-t border-[var(--oat-border)]">
+                        <Button
+                          className="w-full bg-[var(--matcha-600)] text-[var(--pure-white)] hover:bg-[var(--matcha-800)] clay-hover rounded-[var(--radius-lg)]"
+                          onClick={() => routerNavigate({ to: '/package/$id/take', params: { id: pkg.id } })}
+                          size="xl"
+                        >
+                          <MaterialIcon name="play_arrow" className="mr-2" />
+                          Mulai Latihan
+                        </Button>
+                      </div>
+                    )}
                   </CardContent>
                 </Card>
               );

apps/web/src/routes/settings.tsx

@@ -17,12 +17,13 @@ import { ApiKeyList } from "@/components/settings/ApiKeyList";
 import { ApiKeyForm } from "@/components/settings/ApiKeyForm";
 import { TipsCard } from "@/components/settings/TipsCard";
 import { SecurityInfo } from "@/components/settings/SecurityInfo";
+import { AccountSettings } from "@/components/settings/AccountSettings";
 import { z } from "zod";
 
 export const Route = createFileRoute("/settings")({
   component: RouteComponent,
   validateSearch: z.object({
-    tab: z.enum(["api-keys", "token-usage", "security"]).optional(),
+    tab: z.enum(["api-keys", "token-usage", "security", "account"]).optional(),
   }).parse,
   beforeLoad: async () => {
     const session = await authClient.getSession();
@@ -52,7 +53,7 @@ function defaultConfig(): Omit<ApiKeyConfig, "id" | "apiKey"> {
   };
 }
 
-type Tab = "api-keys" | "token-usage" | "security";
+type Tab = "api-keys" | "token-usage" | "security" | "account";
 
 function TokenUsageSection() {
   const { data, isLoading } = useQuery(trpc.ai.tokenUsageToday.queryOptions());
@@ -296,6 +297,7 @@ function RouteComponent() {
         <TabsList variant="line" className="mb-6">
           <TabsTrigger value="api-keys">API Keys</TabsTrigger>
           <TabsTrigger value="token-usage">Token Usage</TabsTrigger>
+          <TabsTrigger value="account">Akun</TabsTrigger>
           <TabsTrigger value="security">Keamanan</TabsTrigger>
         </TabsList>
 
@@ -337,6 +339,10 @@ function RouteComponent() {
           <TokenUsageSection />
         </TabsContent>
 
+        <TabsContent value="account">
+          <AccountSettings />
+        </TabsContent>
+
         <TabsContent value="security">
           <SecurityInfo />
         </TabsContent>

apps/web/src/routes/verify-email.tsx

@@ -0,0 +1,193 @@
+import { createFileRoute, Link, useNavigate, redirect } from "@tanstack/react-router";
+import { useState, useEffect, useRef } from "react";
+import { useMutation } from "@tanstack/react-query";
+import { Button } from "@labas/ui/components/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@labas/ui/components/card";
+import { Input } from "@labas/ui/components/input";
+import { toast } from "sonner";
+import { authClient } from "@/lib/auth-client";
+import { trpc } from "@/utils/trpc";
+import { z } from "zod";
+
+const searchSchema = z.object({
+  email: z.string().optional(),
+});
+
+export const Route = createFileRoute("/verify-email")({
+  component: RouteComponent,
+  validateSearch: searchSchema,
+  beforeLoad: async ({ search }) => {
+    if (!search.email) {
+      const session = await authClient.getSession();
+      if (!session.data) {
+        redirect({ to: "/login", throw: true });
+      }
+    }
+  },
+});
+
+function RouteComponent() {
+  const navigate = useNavigate();
+  const { email: searchEmail } = Route.useSearch();
+  const [sessionEmail, setSessionEmail] = useState<string | null>(null);
+  const email = searchEmail || sessionEmail || "";
+  const [otp, setOtp] = useState(["", "", "", "", "", ""]);
+  const [countdown, setCountdown] = useState(0);
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
+
+  const sendMutation = useMutation(trpc.verification.sendVerificationOtp.mutationOptions());
+  const verifyMutation = useMutation(trpc.verification.verifyEmailOtp.mutationOptions());
+
+  useEffect(() => {
+    if (!searchEmail) {
+      authClient.getSession().then((s) => {
+        if (s.data?.user.email) setSessionEmail(s.data.user.email);
+      });
+    }
+  }, [searchEmail]);
+
+  useEffect(() => {
+    if (countdown > 0) {
+      const timer = setTimeout(() => setCountdown(countdown - 1), 1000);
+      return () => clearTimeout(timer);
+    }
+  }, [countdown]);
+
+  useEffect(() => {
+    if (email) {
+      handleSendOtp();
+    }
+  }, [email]);
+
+  useEffect(() => {
+    inputRefs.current[0]?.focus();
+  }, []);
+
+  const handleSendOtp = async () => {
+    if (!email) return;
+    try {
+      await sendMutation.mutateAsync({ email });
+      toast.success("Kode OTP telah dikirim ke email Anda");
+      setCountdown(60);
+    } catch (err: any) {
+      toast.error(err.message || "Gagal mengirim OTP");
+    }
+  };
+
+  const handleOtpChange = (index: number, value: string) => {
+    if (!/^\d?$/.test(value)) return;
+    const newOtp = [...otp];
+    newOtp[index] = value;
+    setOtp(newOtp);
+    if (value && index < 5) {
+      inputRefs.current[index + 1]?.focus();
+    }
+  };
+
+  const handleKeyDown = (index: number, e: React.KeyboardEvent) => {
+    if (e.key === "Backspace" && !otp[index] && index > 0) {
+      inputRefs.current[index - 1]?.focus();
+    }
+  };
+
+  const handleVerify = async () => {
+    const code = otp.join("");
+    if (code.length !== 6) {
+      toast.error("Masukkan 6 digit kode OTP");
+      return;
+    }
+    try {
+      await verifyMutation.mutateAsync({ email, otp: code });
+      toast.success("Email berhasil diverifikasi!");
+      const session = await authClient.getSession();
+      if (session.data) {
+        navigate({ to: "/" });
+      } else {
+        navigate({ to: "/login" });
+      }
+    } catch (err: any) {
+      toast.error(err.message || "Kode OTP tidak valid");
+      setOtp(["", "", "", "", "", ""]);
+      inputRefs.current[0]?.focus();
+    }
+  };
+
+  const handlePaste = (e: React.ClipboardEvent) => {
+    e.preventDefault();
+    const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, 6);
+    const newOtp = [...otp];
+    for (let i = 0; i < pasted.length; i++) {
+      newOtp[i] = pasted[i];
+    }
+    setOtp(newOtp);
+    const nextIndex = Math.min(pasted.length, 5);
+    inputRefs.current[nextIndex]?.focus();
+  };
+
+  if (!email) {
+    return (
+      <div className="flex h-screen w-full items-center justify-center bg-muted/30">
+        <p className="text-muted-foreground">Memuat...</p>
+      </div>
+    );
+  }
+
+  const isMutating = sendMutation.isPending || verifyMutation.isPending;
+
+  return (
+    <div className="flex h-screen w-full items-center justify-center bg-muted/30">
+      <Card className="mx-auto w-full max-w-md shadow-lg border-muted rounded-xl">
+        <CardHeader className="space-y-1 text-center">
+          <CardTitle className="text-3xl font-bold tracking-tight">Verifikasi Email</CardTitle>
+          <CardDescription>
+            Masukkan kode 6 digit yang dikirim ke <strong>{email}</strong>
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="flex justify-center gap-2" onPaste={handlePaste}>
+            {otp.map((digit, i) => (
+              <Input
+                key={i}
+                ref={(el) => { inputRefs.current[i] = el; }}
+                type="text"
+                inputMode="numeric"
+                maxLength={1}
+                value={digit}
+                onChange={(e) => handleOtpChange(i, e.target.value)}
+                onKeyDown={(e) => handleKeyDown(i, e)}
+                className="w-12 h-14 text-center text-xl font-bold"
+              />
+            ))}
+          </div>
+
+          <Button
+            type="button"
+            className="w-full"
+            onClick={handleVerify}
+            disabled={isMutating || otp.join("").length !== 6}
+          >
+            {verifyMutation.isPending ? "Memverifikasi..." : "Verifikasi Email"}
+          </Button>
+
+          <div className="text-center text-sm text-muted-foreground">
+            Tidak menerima kode?{" "}
+            <Button
+              variant="link"
+              className="p-0 h-auto font-semibold"
+              disabled={sendMutation.isPending || countdown > 0}
+              onClick={handleSendOtp}
+            >
+              {countdown > 0 ? `Kirim ulang (${countdown}s)` : "Kirim Ulang"}
+            </Button>
+          </div>
+
+          <div className="text-center">
+            <Link to="/login" className="text-sm text-muted-foreground hover:text-primary">
+              Kembali ke halaman masuk
+            </Link>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

bun.lock

@@ -29,11 +29,13 @@
         "better-auth": "catalog:",
         "dotenv": "catalog:",
         "hono": "catalog:",
+        "nodemailer": "^8.0.7",
         "zod": "catalog:",
       },
       "devDependencies": {
         "@labas/config": "workspace:*",
         "@types/bun": "catalog:",
+        "@types/nodemailer": "^8.0.0",
         "tsdown": "^0.21.9",
         "typescript": "catalog:",
       },
@@ -62,6 +64,7 @@
         "next-themes": "catalog:",
         "react": "^19.2.5",
         "react-dom": "^19.2.5",
+        "react-joyride": "^3.1.0",
         "recharts": "^3.8.1",
         "sonner": "^2.0.7",
         "vite-plugin-pwa": "^1.2.0",
@@ -103,15 +106,19 @@
         "@labas/env": "workspace:*",
         "@trpc/client": "catalog:",
         "@trpc/server": "catalog:",
+        "bcryptjs": "^3.0.3",
         "bullmq": "^5.76.2",
         "dotenv": "catalog:",
         "drizzle-orm": "^0.45.1",
         "ioredis": "^5.10.1",
+        "nodemailer": "^8.0.7",
         "winston": "^3.19.0",
         "zod": "catalog:",
       },
       "devDependencies": {
         "@labas/config": "workspace:*",
+        "@types/bcryptjs": "^3.0.0",
+        "@types/nodemailer": "^8.0.0",
         "hono": "catalog:",
         "typescript": "catalog:",
       },
@@ -780,6 +787,8 @@
 
     "@tybys/wasm-util": ["@tybys/wasm-util@0.10.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg=="],
 
+    "@types/bcryptjs": ["@types/bcryptjs@3.0.0", "", { "dependencies": { "bcryptjs": "*" } }, "sha512-WRZOuCuaz8UcZZE4R5HXTco2goQSI2XxjGY3hbM/xDvwmqFWd4ivooImsMx65OKM6CtNKbnZ5YL+YwAwK7c1dg=="],
+
     "@types/bun": ["@types/bun@1.3.13", "", { "dependencies": { "bun-types": "1.3.13" } }, "sha512-9fqXWk5YIHGGnUau9TEi+qdlTYDAnOj+xLCmSTwXfAIqXr2x4tytJb43E9uCvt09zJURKXwAtkoH4nLQfzeTXw=="],
 
     "@types/d3-array": ["@types/d3-array@3.2.2", "", {}, "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw=="],
@@ -806,6 +815,8 @@
 
     "@types/node": ["@types/node@22.19.17", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-wGdMcf+vPYM6jikpS/qhg6WiqSV/OhG+jeeHT/KlVqxYfD40iYJf9/AE1uQxVWFvU7MipKRkRv8NSHiCGgPr8Q=="],
 
+    "@types/nodemailer": ["@types/nodemailer@8.0.0", "", { "dependencies": { "@types/node": "*" } }, "sha512-fyf8jWULsCo0d0BuoQ75i6IeoHs47qcqxWc7yUdUcV0pOZGjUTTOvwdG1PRXUDqN/8A64yQdQdnA2pZgcdi+cA=="],
+
     "@types/pg": ["@types/pg@8.20.0", "", { "dependencies": { "@types/node": "*", "pg-protocol": "*", "pg-types": "^2.2.0" } }, "sha512-bEPFOaMAHTEP1EzpvHTbmwR8UsFyHSKsRisLIHVMXnpNefSbGA1bD6CVy+qKjGSqmZqNqBDV2azOBo8TgkcVow=="],
 
     "@types/react": ["@types/react@19.2.14", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w=="],
@@ -882,6 +893,8 @@
 
     "baseline-browser-mapping": ["baseline-browser-mapping@2.10.21", "", { "bin": { "baseline-browser-mapping": "dist/cli.cjs" } }, "sha512-Q+rUQ7Uz8AHM7DEaNdwvfFCTq7a43lNTzuS94eiWqwyxfV/wJv+oUivef51T91mmRY4d4A1u9rcSvkeufCVXlA=="],
 
+    "bcryptjs": ["bcryptjs@3.0.3", "", { "bin": { "bcrypt": "bin/bcrypt" } }, "sha512-GlF5wPWnSa/X5LKM1o0wz0suXIINz1iHRLvTS+sLyi7XPbe5ycmYI3DlZqVGZZtDgl4DmasFg7gOB3JYbphV5g=="],
+
     "better-auth": ["better-auth@1.5.5", "", { "dependencies": { "@better-auth/core": "1.5.5", "@better-auth/drizzle-adapter": "1.5.5", "@better-auth/kysely-adapter": "1.5.5", "@better-auth/memory-adapter": "1.5.5", "@better-auth/mongo-adapter": "1.5.5", "@better-auth/prisma-adapter": "1.5.5", "@better-auth/telemetry": "1.5.5", "@better-auth/utils": "0.3.1", "@better-fetch/fetch": "1.1.21", "@noble/ciphers": "^2.1.1", "@noble/hashes": "^2.0.1", "better-call": "1.3.2", "defu": "^6.1.4", "jose": "^6.1.3", "kysely": "^0.28.11", "nanostores": "^1.1.1", "zod": "^4.3.6" }, "peerDependencies": { "@lynx-js/react": "*", "@prisma/client": "^5.0.0 || ^6.0.0 || ^7.0.0", "@sveltejs/kit": "^2.0.0", "@tanstack/react-start": "^1.0.0", "@tanstack/solid-start": "^1.0.0", "better-sqlite3": "^12.0.0", "drizzle-kit": ">=0.31.4", "drizzle-orm": ">=0.41.0", "mongodb": "^6.0.0 || ^7.0.0", "mysql2": "^3.0.0", "next": "^14.0.0 || ^15.0.0 || ^16.0.0", "pg": "^8.0.0", "prisma": "^5.0.0 || ^6.0.0 || ^7.0.0", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0", "solid-js": "^1.0.0", "svelte": "^4.0.0 || ^5.0.0", "vitest": "^2.0.0 || ^3.0.0 || ^4.0.0", "vue": "^3.0.0" }, "optionalPeers": ["@lynx-js/react", "@prisma/client", "@sveltejs/kit", "@tanstack/react-start", "@tanstack/solid-start", "better-sqlite3", "drizzle-kit", "drizzle-orm", "mongodb", "mysql2", "next", "pg", "prisma", "react", "react-dom", "solid-js", "svelte", "vitest", "vue"] }, "sha512-GpVPaV1eqr3mOovKfghJXXk6QvlcVeFbS3z+n+FPDid5rK/2PchnDtiaVCzWyXA9jH2KkirOfl+JhAUvnja0Eg=="],
 
     "better-call": ["better-call@1.3.2", "", { "dependencies": { "@better-auth/utils": "^0.3.1", "@better-fetch/fetch": "^1.1.21", "rou3": "^0.7.12", "set-cookie-parser": "^3.0.1" }, "peerDependencies": { "zod": "^4.0.0" }, "optionalPeers": ["zod"] }, "sha512-4cZIfrerDsNTn3cm+MhLbUePN0gdwkhSXEuG7r/zuQ8c/H7iU0/jSK5TD3FW7U0MgKHce/8jGpPYNO4Ve+4NBw=="],
@@ -1496,6 +1509,8 @@
 
     "node-releases": ["node-releases@2.0.38", "", {}, "sha512-3qT/88Y3FbH/Kx4szpQQ4HzUbVrHPKTLVpVocKiLfoYvw9XSGOX2FmD2d6DrXbVYyAQTF2HeF6My8jmzx7/CRw=="],
 
+    "nodemailer": ["nodemailer@8.0.7", "", {}, "sha512-pkjE4mkBzQjdJT4/UmlKl3pX0rC9fZmjh7c6C9o7lv66Ac6w9WCnzPzhbPNxwZAzlF4mdq4CSWB5+FbK6FWCow=="],
+
     "normalize-path": ["normalize-path@3.0.0", "", {}, "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="],
 
     "npm-run-path": ["npm-run-path@6.0.0", "", { "dependencies": { "path-key": "^4.0.0", "unicorn-magic": "^0.3.0" } }, "sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA=="],

packages/api/package.json

@@ -18,15 +18,19 @@
     "@labas/env": "workspace:*",
     "@trpc/client": "catalog:",
     "@trpc/server": "catalog:",
+    "bcryptjs": "^3.0.3",
     "bullmq": "^5.76.2",
     "dotenv": "catalog:",
     "drizzle-orm": "^0.45.1",
     "ioredis": "^5.10.1",
+    "nodemailer": "^8.0.7",
     "winston": "^3.19.0",
     "zod": "catalog:"
   },
   "devDependencies": {
     "@labas/config": "workspace:*",
+    "@types/bcryptjs": "^3.0.0",
+    "@types/nodemailer": "^8.0.0",
     "hono": "catalog:",
     "typescript": "catalog:"
   }

packages/api/src/lib/email.ts

@@ -0,0 +1,50 @@
+import { env } from "@labas/env/server";
+import nodemailer from "nodemailer";
+
+const smtpPort = Number(env.SMTP_PORT) || 587;
+const transporter = nodemailer.createTransport({
+  host: env.SMTP_HOST,
+  port: smtpPort,
+  secure: smtpPort === 465,
+  auth: {
+    user: env.SMTP_USER,
+    pass: env.SMTP_PASS,
+  },
+});
+
+const subjects: Record<string, string> = {
+  "email-verification": "Verifikasi Email Labas",
+  "forget-password": "Reset Password Labas",
+};
+
+const messages: Record<string, string> = {
+  "email-verification": "Gunakan kode berikut untuk memverifikasi email Anda:",
+  "forget-password": "Gunakan kode berikut untuk mereset password Anda:",
+};
+
+type SendOtpEmailProps = {
+  to: string;
+  otp: string;
+  type: "email-verification" | "forget-password";
+};
+
+export async function sendOtpEmail({ to, otp, type }: SendOtpEmailProps) {
+  const subject = subjects[type] || "Kode Verifikasi Labas";
+  const message = messages[type] || "Kode verifikasi Anda:";
+
+  await transporter.sendMail({
+    from: env.SMTP_FROM,
+    to,
+    subject,
+    html: `
+      <div style="font-family: sans-serif; max-width: 400px; margin: 0 auto; padding: 20px;">
+        <h2 style="color: #16a34a;">Labas</h2>
+        <p>${message}</p>
+        <div style="background: #f3f4f6; padding: 20px; border-radius: 8px; text-align: center; margin: 20px 0;">
+          <span style="font-size: 32px; font-weight: bold; letter-spacing: 8px; color: #111827;">${otp}</span>
+        </div>
+        <p style="color: #6b7280; font-size: 14px;">Kode berlaku selama 5 menit. Jangan bagikan kode ini kepada siapapun.</p>
+      </div>
+    `,
+  });
+}

packages/api/src/routers/attempt.ts

@@ -184,7 +184,9 @@ export const attemptRouter = router({
         .where(eq(testPackage.id, input.packageId))
         .limit(1);
 
-      assertOwnership(pkg, userId, "Package");
+      if (!pkg?.isPublic) {
+        assertOwnership(pkg, userId, "Package");
+      }
 
       const sections = await db
         .select({

packages/api/src/routers/index.ts

@@ -10,6 +10,7 @@ import { ratingRouter } from "./rating";
 import { settingsRouter } from "./settings";
 import { leaderboardRouter } from "./leaderboard";
 import { statsRouter } from "./stats";
+import { verificationRouter } from "./verification";
 
 export const appRouter = router({
   healthCheck: publicProcedure.query(() => {
@@ -32,6 +33,7 @@ export const appRouter = router({
   settings: settingsRouter,
   stats: statsRouter,
   leaderboard: leaderboardRouter,
+  verification: verificationRouter,
 });
 
 export type AppRouter = typeof appRouter;

packages/api/src/routers/package.ts

@@ -303,6 +303,26 @@ export const packageRouter = router({
       return { success: true };
     }),
 
+  bulkPublish: protectedProcedure
+    .input(z.object({ ids: z.array(z.string().uuid()).min(1) }))
+    .mutation(async ({ ctx, input }) => {
+      const rows = await db
+        .select({ id: testPackage.id, creatorUserId: testPackage.creatorUserId, isPublic: testPackage.isPublic })
+        .from(testPackage)
+        .where(inArray(testPackage.id, input.ids));
+
+      for (const row of rows) {
+        assertOwnership(row, ctx.session.user.id, "Package");
+      }
+
+      await db
+        .update(testPackage)
+        .set({ isPublic: true })
+        .where(inArray(testPackage.id, input.ids));
+
+      return { success: true, updated: rows.length };
+    }),
+
   // ── Section Management ───────────────────────────────────
 
   addSection: protectedProcedure

packages/api/src/routers/verification.ts

@@ -0,0 +1,171 @@
+import { createDb } from "@labas/db";
+import { verification, user, account } from "@labas/db/schema/auth";
+import { TRPCError } from "@trpc/server";
+import bcrypt from "bcryptjs";
+import crypto from "node:crypto";
+import { eq, and, gt, sql } from "drizzle-orm";
+import { z } from "zod";
+
+import { sendOtpEmail } from "../lib/email";
+import { publicProcedure, router } from "../index";
+
+const OTP_LENGTH = 6;
+const OTP_EXPIRY_MS = 5 * 60 * 1000;
+
+function generateOtp(): string {
+  return crypto.randomInt(10 ** (OTP_LENGTH - 1), 10 ** OTP_LENGTH - 1).toString();
+}
+
+export const verificationRouter = router({
+  sendVerificationOtp: publicProcedure
+    .input(z.object({ email: z.string().email() }))
+    .mutation(async ({ input }) => {
+      const db = createDb();
+
+      const [existingUser] = await db
+        .select({ id: user.id, emailVerified: user.emailVerified })
+        .from(user)
+        .where(eq(user.email, input.email))
+        .limit(1);
+
+      if (!existingUser) {
+        throw new TRPCError({ code: "NOT_FOUND", message: "Email not found" });
+      }
+
+      if (existingUser.emailVerified) {
+        throw new TRPCError({ code: "BAD_REQUEST", message: "Email already verified" });
+      }
+
+      const otp = generateOtp();
+      const identifier = `email-verification:${input.email}`;
+
+      await db.delete(verification).where(eq(verification.identifier, identifier));
+
+      await db.insert(verification).values({
+        id: crypto.randomUUID(),
+        identifier,
+        value: otp,
+        expiresAt: new Date(Date.now() + OTP_EXPIRY_MS),
+      });
+
+      await sendOtpEmail({ to: input.email, otp, type: "email-verification" });
+
+      return { success: true };
+    }),
+
+  verifyEmailOtp: publicProcedure
+    .input(z.object({ email: z.string().email(), otp: z.string().length(6) }))
+    .mutation(async ({ input }) => {
+      const db = createDb();
+
+      const identifier = `email-verification:${input.email}`;
+      const [record] = await db
+        .select()
+        .from(verification)
+        .where(
+          and(
+            eq(verification.identifier, identifier),
+            eq(verification.value, input.otp),
+            gt(verification.expiresAt, sql`now()`),
+          ),
+        )
+        .limit(1);
+
+      if (!record) {
+        throw new TRPCError({ code: "BAD_REQUEST", message: "Invalid or expired OTP" });
+      }
+
+      await db
+        .update(user)
+        .set({ emailVerified: true })
+        .where(eq(user.email, input.email));
+
+      await db.delete(verification).where(eq(verification.id, record.id));
+
+      return { success: true };
+    }),
+
+  sendPasswordResetOtp: publicProcedure
+    .input(z.object({ email: z.string().email() }))
+    .mutation(async ({ input }) => {
+      const db = createDb();
+
+      const [existingUser] = await db
+        .select({ id: user.id })
+        .from(user)
+        .where(eq(user.email, input.email))
+        .limit(1);
+
+      if (!existingUser) {
+        throw new TRPCError({ code: "NOT_FOUND", message: "Email not found" });
+      }
+
+      const otp = generateOtp();
+      const identifier = `forget-password:${input.email}`;
+
+      await db.delete(verification).where(eq(verification.identifier, identifier));
+
+      await db.insert(verification).values({
+        id: crypto.randomUUID(),
+        identifier,
+        value: otp,
+        expiresAt: new Date(Date.now() + OTP_EXPIRY_MS),
+      });
+
+      await sendOtpEmail({ to: input.email, otp, type: "forget-password" });
+
+      return { success: true };
+    }),
+
+  resetPassword: publicProcedure
+    .input(
+      z.object({
+        email: z.string().email(),
+        otp: z.string().length(6),
+        newPassword: z.string().min(8),
+      }),
+    )
+    .mutation(async ({ input }) => {
+      const db = createDb();
+
+      const identifier = `forget-password:${input.email}`;
+      const [record] = await db
+        .select()
+        .from(verification)
+        .where(
+          and(
+            eq(verification.identifier, identifier),
+            eq(verification.value, input.otp),
+            gt(verification.expiresAt, sql`now()`),
+          ),
+        )
+        .limit(1);
+
+      if (!record) {
+        throw new TRPCError({ code: "BAD_REQUEST", message: "Invalid or expired OTP" });
+      }
+
+      const passwordHash = await bcrypt.hash(input.newPassword, 10);
+
+      const [userRecord] = await db
+        .select({ id: user.id, name: user.name })
+        .from(user)
+        .where(eq(user.email, input.email))
+        .limit(1);
+
+      if (!userRecord) {
+        throw new TRPCError({ code: "NOT_FOUND", message: "User not found" });
+      }
+
+      await db
+        .update(account)
+        .set({ password: passwordHash })
+        .where(
+          and(eq(account.providerId, "credential"), eq(account.userId, userRecord.id)),
+        );
+
+      await db.delete(verification).where(eq(verification.id, record.id));
+
+      return { success: true };
+    }),
+});

packages/auth/src/index.ts

@@ -17,6 +17,11 @@ export function createAuth() {
     emailAndPassword: {
       enabled: true,
     },
+    user: {
+      changeEmail: {
+        enabled: true,
+      },
+    },
     secret: env.BETTER_AUTH_SECRET,
     baseURL: env.BETTER_AUTH_URL,
     advanced: {

packages/env/src/server.ts

@@ -10,6 +10,11 @@ export const env = createEnv({
     BETTER_AUTH_URL: z.url(),
     CORS_ORIGIN: z.url(),
     NODE_ENV: z.enum(["development", "production", "test"]).default("development"),
+    SMTP_HOST: z.string().min(1),
+    SMTP_PORT: z.coerce.number().positive().default(587),
+    SMTP_USER: z.string().min(1),
+    SMTP_PASS: z.string().min(1),
+    SMTP_FROM: z.string().min(1),
   },
   runtimeEnv: process.env,
   emptyStringAsUndefined: true,

packages/ui/src/components/button.tsx

@@ -24,7 +24,9 @@ const buttonVariants = cva(
           "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
         xs: "h-6 gap-1 rounded-none px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
         sm: "h-7 gap-1 rounded-none px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        md: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
         lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xl: "h-11 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
         icon: "size-8",
         "icon-xs": "size-6 rounded-none [&_svg:not([class*='size-'])]:size-3",
         "icon-sm": "size-7 rounded-none",