testing 101

Signed-off-by: Kenneth Obsequio <k80308392@gmail.com>

src/modules/admin/pages/courses/AddCourse.jsx

@@ -1,20 +1,21 @@
 import { useNavigate } from "react-router-dom";
 import { useEffect, useState } from "react";
-import { useForm, useFieldArray } from "react-hook-form";
+import { useForm, useFieldArray, useWatch } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { ArrowLeft, House, Plus, Trash2 } from "lucide-react";
+import { ArrowLeft, Plus, Trash2, BadgeCheck, Trophy, Check, ChevronsUpDown, X, ImagePlus, Palette } from "lucide-react";
 
 import { useCourses } from "@/contexts/AdminCoursesContext";
 import { useAuth } from "@/contexts/AuthContext";
 import api from "@/utils/api.util";
 import { PageMeta } from "@/contexts/MetadataContext";
-import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { Spinner } from "@/components/ui/spinner";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Select,
   SelectContent,
@@ -22,6 +23,24 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import CourseBadge from "@/modules/admin/components/courses/CourseBadge";
+import { ACHIEVEMENT_REGISTRY } from "@/utils/achievements.data";
+import { TIER_COLOR_OPTIONS } from "@/utils/tierColors";
+import { AssetPickerSheet } from "@/components/generic/AssetPickerSheet";
 
 // ─── Schema ───────────────────────────────────────────────────────────────────
 
@@ -33,6 +52,7 @@ const schema = z.object({
   level: z.enum(["beginner", "intermediate", "advanced"]).optional(),
   subscription: z.string().min(1, "Subscription is required.").default("free"),
   objectives: z.array(z.object({ text: z.string().min(1, "Objective cannot be empty.") })).default([]),
+  achievement_keys: z.array(z.string()).max(3).default([]),
 });
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
@@ -70,12 +90,18 @@ export default function AddCourse() {
       .catch(() => {});
   }, []);
 
+  // ─── Badge config state ─────────────────────────────────────────────────
+  const [badgeColor, setBadgeColor] = useState("purple");
+  const [badgeImageUrl, setBadgeImageUrl] = useState(null);
+  const [badgeAssetId, setBadgeAssetId] = useState(null);
+  const [assetPickerOpen, setAssetPickerOpen] = useState(false);
+  const [achOpen, setAchOpen] = useState(false);
+
   const {
     register,
     handleSubmit,
     control,
     setValue,
-    watch,
     formState: { errors },
   } = useForm({
     resolver: zodResolver(schema),
@@ -87,18 +113,35 @@ export default function AddCourse() {
       level: "beginner",
       subscription: "free",
       objectives: [],
+      achievement_keys: [],
     },
   });
 
   const { fields: objectiveFields, append: appendObjective, remove: removeObjective } =
     useFieldArray({ control, name: "objectives" });
 
+  const currentAchKeys     = useWatch({ control, name: "achievement_keys" });
+  const watchedTitle       = useWatch({ control, name: "title" });
+  const watchedLevel       = useWatch({ control, name: "level" });
+  const watchedSubscr      = useWatch({ control, name: "subscription" });
+
+  const toggleAchievement = (key) => {
+    if (currentAchKeys.includes(key)) {
+      setValue("achievement_keys", currentAchKeys.filter((k) => k !== key), { shouldDirty: true });
+    } else if (currentAchKeys.length < 3) {
+      setValue("achievement_keys", [...currentAchKeys, key], { shouldDirty: true });
+    }
+  };
+
   const onSubmit = async (values) => {
     const payload = {
       ...values,
       objectives: values.objectives.map((o) => o.text),
       level: values.level || null,
       course_code: values.course_code || null,
+      badge_color: badgeColor,
+      badge_asset_id: badgeAssetId ?? null,
+      badge_image_url: badgeImageUrl ?? null,
       createdBy: user?.user_id ?? null,
     };
 
@@ -118,8 +161,8 @@ export default function AddCourse() {
               <ArrowLeft className="h-4 w-4" />
             </Button>
             <div>
-              <h1 className="text-xl font-semibold">Course Details</h1>
-              <p className="text-sm text-muted-foreground">View course information.</p>
+              <h1 className="text-xl font-semibold">Add Course</h1>
+              <p className="text-sm text-muted-foreground">Create a new training course.</p>
             </div>
           </div>
 
@@ -127,7 +170,6 @@ export default function AddCourse() {
 
             {/* ── Basic Info ── */}
             <SectionCard title="Basic Information">
-
               <div className="space-y-1.5">
                 <Label htmlFor="title">Title <span className="text-destructive">*</span></Label>
                 <Input id="title" placeholder="e.g. Introduction to Real Estate" {...register("title")} />
@@ -151,18 +193,15 @@ export default function AddCourse() {
                   <FieldError message={errors.order_index?.message} />
                 </div>
               </div>
-
             </SectionCard>
 
             {/* ── Settings ── */}
             <SectionCard title="Settings">
-
               <div className="grid grid-cols-2 gap-4">
-
                 <div className="space-y-1.5">
                   <Label>Level</Label>
                   <Select
-                    value={watch("level") ?? ""}
+                    value={watchedLevel ?? ""}
                     onValueChange={(val) => setValue("level", val, { shouldDirty: true })}
                   >
                     <SelectTrigger>
@@ -180,7 +219,7 @@ export default function AddCourse() {
                 <div className="space-y-1.5">
                   <Label>Subscription</Label>
                   <Select
-                    value={watch("subscription") ?? "free"}
+                    value={watchedSubscr ?? "free"}
                     onValueChange={(val) => setValue("subscription", val, { shouldDirty: true })}
                   >
                     <SelectTrigger>
@@ -196,9 +235,7 @@ export default function AddCourse() {
                   </Select>
                   <FieldError message={errors.subscription?.message} />
                 </div>
-
               </div>
-
             </SectionCard>
 
             {/* ── Objectives ── */}
@@ -241,6 +278,195 @@ export default function AddCourse() {
               </div>
             </SectionCard>
 
+            {/* ── Rewards ── */}
+            <SectionCard
+              title="Rewards"
+              description="Badge and achievements awarded to learners who complete this course."
+            >
+              {/* ── Completion Badge ── */}
+              <div>
+                <p className="text-xs font-medium mb-3 text-muted-foreground uppercase tracking-wide">Completion Badge</p>
+                <div className="flex items-start gap-4">
+                  <CourseBadge
+                    title={watchedTitle || "Course Title"}
+                    level={watchedLevel}
+                    color={badgeColor}
+                    imageUrl={badgeImageUrl}
+                  />
+                  <div className="flex-1 flex flex-col gap-3">
+                    {/* Metadata */}
+                    <div className="flex flex-col gap-1 text-xs text-muted-foreground">
+                      <div className="flex items-center gap-1.5">
+                        <span className="font-medium text-foreground">Label:</span> Course Completion
+                      </div>
+                      <div className="flex items-center gap-1.5">
+                        <span className="font-medium text-foreground">Trigger:</span> Pass course assessment
+                      </div>
+                      <div className="flex items-center gap-1.5 pb-0.5">
+                        <span className="font-medium text-foreground">Type:</span> Milestone achievement
+                      </div>
+                      <Badge className="self-start bg-green-100 text-green-700 border-green-400 dark:bg-green-900/40 dark:text-green-400 dark:border-green-700 gap-1 text-xs">
+                        <BadgeCheck className="size-3" /> Mandatory
+                      </Badge>
+                    </div>
+
+                    {/* Color picker */}
+                    <div className="space-y-1.5">
+                      <p className="text-[10px] font-medium text-muted-foreground uppercase tracking-wide flex items-center gap-1">
+                        <Palette className="h-3 w-3" /> Color
+                      </p>
+                      <div className="flex flex-wrap gap-1.5">
+                        {TIER_COLOR_OPTIONS.map((opt) => (
+                          <button
+                            key={opt.key}
+                            type="button"
+                            title={opt.label}
+                            onClick={() => setBadgeColor(opt.key)}
+                            className={[
+                              "w-5 h-5 rounded-full border-2 transition-all",
+                              badgeColor === opt.key
+                                ? "border-foreground scale-110 shadow-sm"
+                                : "border-transparent hover:border-muted-foreground/50",
+                            ].join(" ")}
+                            style={{ backgroundColor: opt.swatch }}
+                          />
+                        ))}
+                      </div>
+                    </div>
+
+                    {/* Image picker */}
+                    <div className="space-y-1.5">
+                      <p className="text-[10px] font-medium text-muted-foreground uppercase tracking-wide flex items-center gap-1">
+                        <ImagePlus className="h-3 w-3" /> Image <span className="normal-case font-normal">(optional)</span>
+                      </p>
+                      <div className="flex items-center gap-2">
+                        {badgeImageUrl && (
+                          <div className="w-8 h-8 rounded-md border bg-muted flex items-center justify-center overflow-hidden shrink-0">
+                            <img src={badgeImageUrl} alt="" className="w-6 h-6 object-contain" />
+                          </div>
+                        )}
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="sm"
+                          onClick={() => setAssetPickerOpen(true)}
+                          className="h-7 text-xs"
+                        >
+                          <ImagePlus className="h-3 w-3 mr-1" />
+                          {badgeImageUrl ? "Change" : "Pick from assets"}
+                        </Button>
+                        {badgeImageUrl && (
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            className="h-7 text-xs text-destructive hover:text-destructive"
+                            onClick={() => { setBadgeImageUrl(null); setBadgeAssetId(null); }}
+                          >
+                            <X className="h-3 w-3 mr-1" /> Remove
+                          </Button>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* ── Achievements ── */}
+              <div className="border-t pt-4">
+                <div className="flex items-center justify-between mb-2">
+                  <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Achievements</p>
+                  <span className="text-[10px] text-muted-foreground">{currentAchKeys.length}/3 selected</span>
+                </div>
+
+                {/* Selected badges */}
+                {currentAchKeys.length > 0 && (
+                  <div className="flex flex-wrap gap-1.5 mb-2">
+                    {currentAchKeys.map((key) => {
+                      const ach = ACHIEVEMENT_REGISTRY.find((a) => a.key === key);
+                      return (
+                        <Badge key={key} variant="secondary" className="gap-1 pr-1">
+                          {ach?.label ?? key}
+                          <button
+                            type="button"
+                            className="ml-0.5 rounded-full hover:bg-muted"
+                            onClick={() => toggleAchievement(key)}
+                          >
+                            <X className="h-3 w-3" />
+                          </button>
+                        </Badge>
+                      );
+                    })}
+                  </div>
+                )}
+
+                {/* Popover picker */}
+                <Popover open={achOpen} onOpenChange={setAchOpen}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      className="w-full justify-between"
+                      disabled={currentAchKeys.length >= 3}
+                    >
+                      <span className="flex items-center gap-1.5">
+                        <Trophy className="h-3.5 w-3.5" />
+                        {currentAchKeys.length > 0
+                          ? `${currentAchKeys.length} selected — add more`
+                          : "Select achievements"}
+                      </span>
+                      <ChevronsUpDown className="h-3 w-3 text-muted-foreground" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0" align="start">
+                    <Command>
+                      <CommandInput placeholder="Search achievements…" />
+                      <CommandList className="max-h-none">
+                        <CommandEmpty>No achievements found.</CommandEmpty>
+                        <CommandGroup>
+                          <ScrollArea className="h-64">
+                            {ACHIEVEMENT_REGISTRY.map((ach) => {
+                              const checked = currentAchKeys.includes(ach.key);
+                              const disabled = !checked && currentAchKeys.length >= 3;
+                              return (
+                                <CommandItem
+                                  key={ach.key}
+                                  value={ach.label}
+                                  disabled={disabled}
+                                  onSelect={() => !disabled && toggleAchievement(ach.key)}
+                                  className="gap-2 items-start py-2"
+                                >
+                                  <Checkbox
+                                    checked={checked}
+                                    className="pointer-events-none mt-0.5 shrink-0"
+                                  />
+                                  <div className="flex-1 min-w-0">
+                                    <div className="flex items-center gap-1.5 flex-wrap">
+                                      <span className="text-xs font-medium">{ach.label}</span>
+                                      <Badge variant="outline" className="text-[9px] px-1 py-0 gap-0.5 capitalize">
+                                        {ach.type === "badge"
+                                          ? <Trophy className="h-2.5 w-2.5" />
+                                          : <BadgeCheck className="h-2.5 w-2.5" />
+                                        }
+                                        {ach.type}
+                                      </Badge>
+                                    </div>
+                                    <p className="text-[10px] text-muted-foreground leading-snug mt-0.5">{ach.description}</p>
+                                  </div>
+                                  {checked && <Check className="h-3.5 w-3.5 text-primary shrink-0 mt-0.5" />}
+                                </CommandItem>
+                              );
+                            })}
+                          </ScrollArea>
+                        </CommandGroup>
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </div>
+            </SectionCard>
+
             {/* ── Actions ── */}
             <div className="flex justify-end gap-3 pt-1">
               <Button
@@ -260,6 +486,17 @@ export default function AddCourse() {
           </form>
         </div>
       </div>
+
+      {/* Asset picker for badge image */}
+      <AssetPickerSheet
+        open={assetPickerOpen}
+        onOpenChange={setAssetPickerOpen}
+        fileType="image"
+        onSelect={(asset, resolvedUrl) => {
+          setBadgeImageUrl(resolvedUrl ?? null);
+          setBadgeAssetId(asset.asset_id);
+        }}
+      />
     </section>
   );
-}
+}