updated some of things

src/modules/admin/components/courses/CourseReadingProgressList.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState, useMemo } from 'react';
 import {
-    CheckCircle2, Circle, BookOpen, Users, Search, ChevronLeft, ChevronRight, RefreshCcw
+    CheckCircle2, Circle, BookOpen, Users, Search, ChevronLeft, ChevronRight, RefreshCcw, AlertTriangle
 } from 'lucide-react';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
@@ -47,6 +47,27 @@ function ProgressBar({ value, total, className = '' }) {
     );
 }
 
+// Only relevant once reading is fully done but the course still isn't 'completed' —
+// i.e. a still-unpassed unit quiz and/or course assessment is what's blocking it.
+function PendingNotice({ entry }) {
+    const readingDone = entry.lessons_total > 0 && entry.lessons_completed === entry.lessons_total;
+    if (!readingDone || entry.course_status === 'completed') return null;
+    if (!entry.quizzes_pending && !entry.assessment_pending) return null;
+
+    const parts = [];
+    if (entry.quizzes_pending > 0) {
+        parts.push(`${entry.quizzes_pending} quiz${entry.quizzes_pending === 1 ? '' : 'zes'} needed`);
+    }
+    if (entry.assessment_pending) parts.push('Assessment needed');
+
+    return (
+        <p className="flex items-center gap-1.5 text-xs text-amber-700 dark:text-amber-400">
+            <AlertTriangle className="size-3.5 shrink-0" />
+            {parts.join(' · ')}
+        </p>
+    );
+}
+
 function UserAvatar({ name, email, avatarUrl }) {
     const initials = name
         ? name.split(' ').map((n) => n[0]).slice(0, 2).join('').toUpperCase()
@@ -102,6 +123,8 @@ function UserDetailDialog({ open, onOpenChange, entry, courseId }) {
                     </div>
                 )}
 
+                {entry && <PendingNotice entry={entry} />}
+
                 {/* ── Progress bar ── */}
                 {entry && (
                     <ProgressBar value={entry.lessons_completed} total={entry.lessons_total} />
@@ -197,6 +220,7 @@ function UserCard({ entry, onOpen }) {
                     <StatusBadge status={entry.course_status} />
                 </div>
                 <p className="text-xs text-muted-foreground truncate">{entry.user.email}</p>
+                <PendingNotice entry={entry} />
                 <ProgressBar value={entry.lessons_completed} total={entry.lessons_total} />
                 <p className="text-xs">Last seen {lastSeen}</p>
             </div>
@@ -266,7 +290,8 @@ function PaginationControls({ page, totalPages, onPage }) {
 export default function CourseReadingProgressList({ courseId }) {
     const { progressList, listLoading, fetchCourseReadingProgress } = useAdminCourseReadingProgress();
 
-    const [search, setSearch] = useState('');
+    const [searchInput, setSearchInput] = useState('');
+    const [query, setQuery] = useState('');
     const [page, setPage] = useState(1);
     const [dialogEntry, setDialogEntry] = useState(null);
 
@@ -274,18 +299,21 @@ export default function CourseReadingProgressList({ courseId }) {
         fetchCourseReadingProgress(courseId);
     }, [courseId]);
 
-    // Reset to page 1 when search changes
-    useEffect(() => { setPage(1); }, [search]);
+    const handleSearchSubmit = (e) => {
+        e.preventDefault();
+        setQuery(searchInput.trim());
+        setPage(1);
+    };
 
     // ── Filter ────────────────────────────────────────────────────────────────
     const filtered = useMemo(() => {
-        const q = search.trim().toLowerCase();
+        const q = query.trim().toLowerCase();
         if (!q) return progressList;
         return progressList.filter((e) =>
             e.user.full_name?.toLowerCase().includes(q) ||
             e.user.email?.toLowerCase().includes(q)
         );
-    }, [progressList, search]);
+    }, [progressList, query]);
 
     // ── Paginate ──────────────────────────────────────────────────────────────
     const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
@@ -343,23 +371,29 @@ export default function CourseReadingProgressList({ courseId }) {
             </div>
 
             {/* ── Search ── */}
-            <div className="relative">
-                <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground pointer-events-none" />
-                <Input
-                    placeholder="Search by name or email…"
-                    value={search}
-                    onChange={(e) => setSearch(e.target.value.slice(0, 50))}
-                    maxLength={50}
-                    className="bg-background pl-9 pr-16"
-                />
-                <span className={`absolute right-3 top-1/2 -translate-y-1/2 text-xs tabular-nums pointer-events-none ${search.length >= 50 ? 'text-destructive' : 'text-muted-foreground'}`}>
-                    {search.length}/50
-                </span>
-            </div>
+            <form onSubmit={handleSearchSubmit} className="flex items-center gap-2">
+                <div className="relative flex-1">
+                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground pointer-events-none" />
+                    <Input
+                        placeholder="Search by name or email…"
+                        value={searchInput}
+                        onChange={(e) => setSearchInput(e.target.value.slice(0, 50))}
+                        maxLength={50}
+                        className="bg-background pl-9 pr-16"
+                    />
+                    <span className={`absolute right-3 top-1/2 -translate-y-1/2 text-xs tabular-nums pointer-events-none ${searchInput.length >= 50 ? 'text-destructive' : 'text-muted-foreground'}`}>
+                        {searchInput.length}/50
+                    </span>
+                </div>
+                <Button type="submit" variant="outline" className="shrink-0">
+                    <Search className="size-4" />
+                    Search
+                </Button>
+            </form>
 
             {/* ── List ── */}
             {filtered.length === 0 ? (
-                <p className="text-sm text-muted-foreground text-center py-6">No results for "{search}".</p>
+                <p className="text-sm text-muted-foreground text-center py-6">No results for "{query}".</p>
             ) : (
                 <div className="space-y-2">
                     {paginated.map((entry) => (