Stage 1.5: categories, enrollment expiry, access log, bulk grant, user page

src/components/admin/admin-nav.tsx

@@ -6,6 +6,7 @@ import { usePathname } from "next/navigation";
 const links = [
   { href: "/admin/dashboard", label: "Обзор" },
   { href: "/admin/courses", label: "Курсы" },
+  { href: "/admin/categories", label: "Категории" },
   { href: "/admin/users", label: "Пользователи" },
 ];
 

src/components/admin/category-row.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { updateCategory, deleteCategory } from "@/app/admin/categories/actions";
+
+interface Props {
+  category: { id: string; title: string; slug: string };
+  courseCount: number;
+}
+
+export function CategoryRow({ category, courseCount }: Props) {
+  const [editing, setEditing] = useState(false);
+  const [pending, startTransition] = useTransition();
+
+  function handleUpdate(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    const fd = new FormData(e.currentTarget);
+    startTransition(() => updateCategory(category.id, fd));
+    setEditing(false);
+  }
+
+  function handleDelete() {
+    if (courseCount > 0) {
+      alert(`Нельзя удалить: к категории привязано ${courseCount} курсов`);
+      return;
+    }
+    if (!confirm(`Удалить категорию «${category.title}»?`)) return;
+    startTransition(() => deleteCategory(category.id));
+  }
+
+  return (
+    <div className="flex items-center gap-3 px-4 py-3" style={{ border: "2px solid var(--border)", background: "var(--background)" }}>
+      {editing ? (
+        <form onSubmit={handleUpdate} className="flex items-center gap-2 flex-1">
+          <Input name="title" defaultValue={category.title} required className="h-8 text-sm" />
+          <Input name="slug" defaultValue={category.slug} className="h-8 text-sm w-36" />
+          <Button type="submit" size="sm" disabled={pending}>Сохранить</Button>
+          <Button type="button" variant="ghost" size="sm" onClick={() => setEditing(false)}>✕</Button>
+        </form>
+      ) : (
+        <>
+          <span className="flex-1 font-medium" style={{ color: "var(--foreground)" }}>{category.title}</span>
+          <span className="text-xs font-mono" style={{ color: "var(--muted-foreground)" }}>/{category.slug}</span>
+          <span className="text-xs" style={{ color: "var(--muted-foreground)" }}>{courseCount} курсов</span>
+          <button onClick={() => setEditing(true)} className="text-xs underline" style={{ color: "var(--muted-foreground)" }}>
+            Редакт.
+          </button>
+          <button onClick={handleDelete} disabled={pending} className="text-xs" style={{ color: "oklch(0.577 0.245 27.325)" }}>
+            Удалить
+          </button>
+        </>
+      )}
+    </div>
+  );
+}

src/components/admin/course-edit-form.tsx

@@ -14,11 +14,18 @@ interface Course {
   description: string | null;
   coverImage: string | null;
   published: boolean;
+  categoryId: string | null;
 }
 
-export function CourseEditForm({ course }: { course: Course }) {
+interface Category {
+  id: string;
+  title: string;
+}
+
+export function CourseEditForm({ course, categories = [] }: { course: Course; categories?: Category[] }) {
   const [published, setPublished] = useState(course.published);
   const [coverImage, setCoverImage] = useState(course.coverImage ?? "");
+  const [categoryId, setCategoryId] = useState(course.categoryId ?? "");
   const [uploading, setUploading] = useState(false);
   const [pending, startTransition] = useTransition();
 
@@ -39,6 +46,7 @@ export function CourseEditForm({ course }: { course: Course }) {
     const fd = new FormData(e.currentTarget);
     fd.set("published", String(published));
     fd.set("coverImage", coverImage);
+    fd.set("categoryId", categoryId);
     startTransition(() => updateCourse(course.id, fd));
   }
 
@@ -63,6 +71,23 @@ export function CourseEditForm({ course }: { course: Course }) {
         <Label htmlFor="description">Описание</Label>
         <Textarea id="description" name="description" defaultValue={course.description ?? ""} rows={3} />
       </div>
+      {categories.length > 0 && (
+        <div className="space-y-1.5">
+          <Label htmlFor="categoryId">Категория</Label>
+          <select
+            id="categoryId"
+            value={categoryId}
+            onChange={(e) => setCategoryId(e.target.value)}
+            className="w-full px-3 py-2 text-sm bg-transparent"
+            style={{ border: "2px solid var(--border)", color: "var(--foreground)", fontFamily: "var(--font-sans)" }}
+          >
+            <option value="">Без категории</option>
+            {categories.map((c) => (
+              <option key={c.id} value={c.id}>{c.title}</option>
+            ))}
+          </select>
+        </div>
+      )}
       <div className="space-y-1.5">
         <Label>Обложка</Label>
         <div className="flex items-center gap-3">

src/components/admin/enrollment-manager.tsx

@@ -3,7 +3,6 @@
 import { useState, useTransition } from "react";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
 import { grantAccess, revokeAccess } from "@/app/admin/courses/[courseId]/actions";
 
 interface Student {
@@ -12,15 +11,35 @@ interface Student {
   email: string;
 }
 
+interface Enrollment {
+  userId: string;
+  expiresAt: Date | null;
+}
+
+interface LogEntry {
+  id: string;
+  action: string;
+  createdAt: Date;
+  note: string | null;
+  user: { name: string };
+  grantedBy: { name: string } | null;
+}
+
 interface Props {
   courseId: string;
   allStudents: Student[];
-  enrolledIds: string[];
+  enrollments: Enrollment[];
+  accessLogs: LogEntry[];
 }
 
-export function EnrollmentManager({ courseId, allStudents, enrolledIds }: Props) {
-  const [enrolled, setEnrolled] = useState(new Set(enrolledIds));
+export function EnrollmentManager({ courseId, allStudents, enrollments, accessLogs }: Props) {
+  const [enrolledMap, setEnrolledMap] = useState<Map<string, Date | null>>(
+    () => new Map(enrollments.map((e) => [e.userId, e.expiresAt]))
+  );
   const [search, setSearch] = useState("");
+  const [expiryDate, setExpiryDate] = useState("");
+  const [note, setNote] = useState("");
+  const [showLog, setShowLog] = useState(false);
   const [pending, startTransition] = useTransition();
 
   const filtered = allStudents.filter(
@@ -29,70 +48,143 @@ export function EnrollmentManager({ courseId, allStudents, enrolledIds }: Props)
       s.email.toLowerCase().includes(search.toLowerCase())
   );
 
-  function toggle(userId: string) {
-    if (enrolled.has(userId)) {
-      setEnrolled((prev) => { const s = new Set(prev); s.delete(userId); return s; });
-      startTransition(() => revokeAccess(courseId, userId));
-    } else {
-      setEnrolled((prev) => new Set(prev).add(userId));
-      startTransition(() => grantAccess(courseId, userId));
-    }
+  function handleGrant(userId: string) {
+    const newMap = new Map(enrolledMap);
+    newMap.set(userId, expiryDate ? new Date(expiryDate) : null);
+    setEnrolledMap(newMap);
+    startTransition(() => grantAccess(courseId, userId, expiryDate || null, note || undefined));
   }
 
-  const enrolledStudents = allStudents.filter((s) => enrolled.has(s.id));
+  function handleRevoke(userId: string) {
+    const newMap = new Map(enrolledMap);
+    newMap.delete(userId);
+    setEnrolledMap(newMap);
+    startTransition(() => revokeAccess(courseId, userId, note || undefined));
+  }
+
+  const enrolledStudents = allStudents.filter((s) => enrolledMap.has(s.id));
+
+  function formatExpiry(date: Date | null) {
+    if (!date) return "Бессрочно";
+    const d = new Date(date);
+    const now = new Date();
+    const expired = d < now;
+    return (
+      <span style={{ color: expired ? "oklch(0.577 0.245 27.325)" : "var(--foreground)" }}>
+        {expired ? "Истёк " : "До "}
+        {d.toLocaleDateString("ru-RU")}
+      </span>
+    );
+  }
 
   return (
-    <div className="space-y-4">
+    <div className="space-y-5">
+      {/* Enrolled list */}
       {enrolledStudents.length > 0 && (
         <div>
-          <p className="text-sm text-slate-500 mb-2">Доступ открыт ({enrolledStudents.length}):</p>
-          <div className="flex flex-wrap gap-2">
+          <p className="text-xs font-bold uppercase tracking-widest mb-3" style={{ color: "var(--muted-foreground)" }}>
+            Доступ открыт — {enrolledStudents.length}
+          </p>
+          <div className="space-y-1.5">
             {enrolledStudents.map((s) => (
-              <Badge key={s.id} variant="secondary" className="gap-1.5 py-1 pr-1">
-                {s.name}
-                <button
-                  onClick={() => toggle(s.id)}
-                  disabled={pending}
-                  className="ml-1 text-slate-400 hover:text-red-500"
-                >
-                  ✕
-                </button>
-              </Badge>
+              <div key={s.id} className="flex items-center justify-between px-3 py-2" style={{ border: "2px solid var(--border)", background: "var(--color-surface)" }}>
+                <div>
+                  <p className="text-sm font-medium">{s.name}</p>
+                  <p className="text-xs" style={{ color: "var(--muted-foreground)" }}>{s.email}</p>
+                </div>
+                <div className="flex items-center gap-3">
+                  <span className="text-xs">{formatExpiry(enrolledMap.get(s.id) ?? null)}</span>
+                  <button onClick={() => handleRevoke(s.id)} disabled={pending} className="text-xs underline" style={{ color: "oklch(0.577 0.245 27.325)" }}>
+                    Отозвать
+                  </button>
+                </div>
+              </div>
             ))}
           </div>
         </div>
       )}
 
+      {/* Grant form */}
       <div>
-        <p className="text-sm text-slate-500 mb-2">Добавить ученика:</p>
-        <Input
-          placeholder="Поиск по имени или email..."
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-          className="max-w-sm mb-3"
-        />
-        <div className="space-y-1.5 max-h-48 overflow-y-auto">
-          {filtered.map((student) => (
-            <div key={student.id} className="flex items-center justify-between px-3 py-2 rounded-lg border border-slate-100 bg-slate-50">
-              <div>
-                <p className="text-sm font-medium text-slate-700">{student.name}</p>
-                <p className="text-xs text-slate-400">{student.email}</p>
+        <p className="text-xs font-bold uppercase tracking-widest mb-3" style={{ color: "var(--muted-foreground)" }}>
+          Добавить ученика
+        </p>
+        <div className="flex gap-3 mb-3 flex-wrap">
+          <div className="flex-1 min-w-48">
+            <label className="text-xs uppercase tracking-wider mb-1 block" style={{ color: "var(--muted-foreground)" }}>Поиск</label>
+            <Input placeholder="Имя или email..." value={search} onChange={(e) => setSearch(e.target.value)} />
+          </div>
+          <div>
+            <label className="text-xs uppercase tracking-wider mb-1 block" style={{ color: "var(--muted-foreground)" }}>
+              Срок доступа
+            </label>
+            <Input type="date" value={expiryDate} onChange={(e) => setExpiryDate(e.target.value)} className="w-44" />
+          </div>
+          <div className="flex-1 min-w-40">
+            <label className="text-xs uppercase tracking-wider mb-1 block" style={{ color: "var(--muted-foreground)" }}>
+              Примечание
+            </label>
+            <Input placeholder="Оплата, договор..." value={note} onChange={(e) => setNote(e.target.value)} />
+          </div>
+        </div>
+        <div className="space-y-1.5 max-h-52 overflow-y-auto">
+          {filtered.map((student) => {
+            const enrolled = enrolledMap.has(student.id);
+            return (
+              <div key={student.id} className="flex items-center justify-between px-3 py-2" style={{ border: "2px solid var(--border)", background: "var(--background)" }}>
+                <div>
+                  <p className="text-sm font-medium">{student.name}</p>
+                  <p className="text-xs" style={{ color: "var(--muted-foreground)" }}>{student.email}</p>
+                </div>
+                {enrolled ? (
+                  <button onClick={() => handleRevoke(student.id)} disabled={pending} className="text-xs px-3 py-1.5" style={{ border: "2px solid oklch(0.577 0.245 27.325)", color: "oklch(0.577 0.245 27.325)" }}>
+                    Отозвать
+                  </button>
+                ) : (
+                  <button onClick={() => handleGrant(student.id)} disabled={pending} className="btn-aubade text-xs py-1.5 px-3">
+                    Дать доступ
+                  </button>
+                )}
               </div>
-              <Button
-                size="sm"
-                variant={enrolled.has(student.id) ? "destructive" : "outline"}
-                onClick={() => toggle(student.id)}
-                disabled={pending}
-              >
-                {enrolled.has(student.id) ? "Убрать" : "Дать доступ"}
-              </Button>
-            </div>
-          ))}
+            );
+          })}
           {filtered.length === 0 && (
-            <p className="text-sm text-slate-400 py-2">Студентов не найдено</p>
+            <p className="text-sm py-2" style={{ color: "var(--muted-foreground)" }}>Студентов не найдено</p>
           )}
         </div>
       </div>
+
+      {/* Access log */}
+      {accessLogs.length > 0 && (
+        <div>
+          <button
+            onClick={() => setShowLog(!showLog)}
+            className="text-xs font-bold uppercase tracking-widest underline"
+            style={{ color: "var(--muted-foreground)" }}
+          >
+            История доступа ({accessLogs.length}) {showLog ? "▲" : "▼"}
+          </button>
+          {showLog && (
+            <div className="mt-3 space-y-1.5 max-h-64 overflow-y-auto">
+              {accessLogs.map((log) => (
+                <div key={log.id} className="flex items-start gap-3 px-3 py-2 text-xs" style={{ border: "2px solid var(--border)", background: "var(--background)" }}>
+                  <span style={{ color: log.action === "granted" ? "#3A6A3A" : "oklch(0.577 0.245 27.325)", fontWeight: 700 }}>
+                    {log.action === "granted" ? "▲ Выдан" : "▼ Отозван"}
+                  </span>
+                  <span className="flex-1">{log.user.name}</span>
+                  <span style={{ color: "var(--muted-foreground)" }}>
+                    {log.grantedBy?.name ?? "—"}
+                  </span>
+                  {log.note && <span style={{ color: "var(--muted-foreground)" }}>{log.note}</span>}
+                  <span style={{ color: "var(--muted-foreground)" }}>
+                    {new Date(log.createdAt).toLocaleString("ru-RU", { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" })}
+                  </span>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
     </div>
   );
 }

src/components/admin/user-enrollment-manager.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { bulkGrantAccess, revokeUserAccess } from "@/app/admin/users/[userId]/actions";
+
+interface Course {
+  id: string;
+  title: string;
+  published: boolean;
+}
+
+interface Enrollment {
+  courseId: string;
+  expiresAt: Date | null;
+  courseTitle: string;
+}
+
+interface Props {
+  userId: string;
+  allCourses: Course[];
+  enrollments: Enrollment[];
+}
+
+export function UserEnrollmentManager({ userId, allCourses, enrollments }: Props) {
+  const [enrolledMap, setEnrolledMap] = useState<Map<string, Date | null>>(
+    () => new Map(enrollments.map((e) => [e.courseId, e.expiresAt]))
+  );
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [expiryDate, setExpiryDate] = useState("");
+  const [pending, startTransition] = useTransition();
+
+  const unenrolled = allCourses.filter((c) => !enrolledMap.has(c.id));
+
+  function toggleSelect(courseId: string) {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      next.has(courseId) ? next.delete(courseId) : next.add(courseId);
+      return next;
+    });
+  }
+
+  function handleBulkGrant() {
+    if (selected.size === 0) return;
+    const ids = [...selected];
+    const expiry = expiryDate || null;
+    const newMap = new Map(enrolledMap);
+    ids.forEach((id) => newMap.set(id, expiry ? new Date(expiry) : null));
+    setEnrolledMap(newMap);
+    setSelected(new Set());
+    startTransition(() => bulkGrantAccess(userId, ids, expiry));
+  }
+
+  function handleRevoke(courseId: string) {
+    const newMap = new Map(enrolledMap);
+    newMap.delete(courseId);
+    setEnrolledMap(newMap);
+    startTransition(() => revokeUserAccess(userId, courseId));
+  }
+
+  function formatExpiry(date: Date | null) {
+    if (!date) return "Бессрочно";
+    const d = new Date(date);
+    const expired = d < new Date();
+    return (
+      <span style={{ color: expired ? "oklch(0.577 0.245 27.325)" : "inherit" }}>
+        {expired ? "Истёк " : "До "}{d.toLocaleDateString("ru-RU")}
+      </span>
+    );
+  }
+
+  const enrolledCourses = allCourses.filter((c) => enrolledMap.has(c.id));
+
+  return (
+    <div className="space-y-5">
+      {/* Current enrollments */}
+      {enrolledCourses.length > 0 ? (
+        <div className="space-y-1.5">
+          {enrolledCourses.map((c) => (
+            <div key={c.id} className="flex items-center justify-between px-3 py-2.5 text-sm" style={{ border: "2px solid var(--border)", background: "var(--color-surface)" }}>
+              <span className="font-medium">{c.title}</span>
+              <div className="flex items-center gap-4">
+                <span className="text-xs">{formatExpiry(enrolledMap.get(c.id) ?? null)}</span>
+                <button onClick={() => handleRevoke(c.id)} disabled={pending} className="text-xs underline" style={{ color: "oklch(0.577 0.245 27.325)" }}>
+                  Отозвать
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <p className="text-sm" style={{ color: "var(--muted-foreground)" }}>Доступа к курсам нет</p>
+      )}
+
+      {/* Bulk grant */}
+      {unenrolled.length > 0 && (
+        <div>
+          <p className="text-xs font-bold uppercase tracking-widest mb-3" style={{ color: "var(--muted-foreground)" }}>
+            Добавить курсы
+          </p>
+          <div className="space-y-1.5 max-h-48 overflow-y-auto mb-3">
+            {unenrolled.map((c) => (
+              <label key={c.id} className="flex items-center gap-3 px-3 py-2 cursor-pointer text-sm" style={{ border: "2px solid var(--border)", background: selected.has(c.id) ? "var(--color-highlight)" : "var(--background)" }}>
+                <input
+                  type="checkbox"
+                  checked={selected.has(c.id)}
+                  onChange={() => toggleSelect(c.id)}
+                  className="accent-current"
+                />
+                <span>{c.title}</span>
+                {!c.published && (
+                  <span className="text-xs ml-auto" style={{ color: "var(--muted-foreground)" }}>черновик</span>
+                )}
+              </label>
+            ))}
+          </div>
+          {selected.size > 0 && (
+            <div className="flex items-center gap-3">
+              <div>
+                <label className="text-xs uppercase tracking-wider block mb-1" style={{ color: "var(--muted-foreground)" }}>
+                  Срок доступа
+                </label>
+                <Input type="date" value={expiryDate} onChange={(e) => setExpiryDate(e.target.value)} className="w-44" />
+              </div>
+              <div className="pt-5">
+                <button onClick={handleBulkGrant} disabled={pending} className="btn-aubade btn-aubade-accent">
+                  Дать доступ к {selected.size} курсам
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}