@hed-hog/lms 0.0.304 → 0.0.305

package/hedhog/frontend/app/enterprise/_components/enterprise-courses-tab.tsx.ejs

@@ -0,0 +1,363 @@
+'use client';
+
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { formatDate } from '@/lib/format-date';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { BookOpen, SquareArrowOutUpRight, Trash2 } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { useCallback, useState } from 'react';
+import { toast } from 'sonner';
+import { EnterpriseCourseCreateSheet } from './enterprise-course-create-sheet';
+import {
+  COURSE_STATUS_LABEL,
+  COURSE_STATUS_VARIANT,
+} from './enterprise-detail-constants';
+import { getAvatarColor, getInitials } from './enterprise-detail-utils';
+import { RelatedTabLayout } from './enterprise-related-tab';
+import type {
+  EnterpriseCourse,
+  EnterpriseCourseStatus,
+} from './enterprise-types';
+
+const COURSES_PAGE_SIZE_DEFAULT = 6;
+
+async function loadCourseOptions(
+  request: ReturnType<typeof useApp>['request'],
+  args: { page: number; pageSize: number; search: string }
+) {
+  const params = new URLSearchParams({
+    page: String(args.page),
+    pageSize: String(args.pageSize),
+    search: args.search,
+  });
+  const res = await request<{
+    data: Array<{
+      id: number;
+      title: string;
+      slug: string | null;
+      status: string;
+      level: string | null;
+      offering_type: string | null;
+    }>;
+    page: number;
+    lastPage: number;
+  }>({
+    url: `/lms/courses?${params}`,
+    method: 'GET',
+  });
+  const data = res.data ?? res;
+  return {
+    items: (data.data ?? []).map((c) => ({
+      id: c.id,
+      courseId: c.id,
+      title: c.title ?? '',
+      slug: c.slug ?? null,
+      status: c.status ?? 'draft',
+      level: c.level ?? null,
+      modality: c.offering_type ?? null,
+      contractedAt: null,
+      enrolledCount: 0,
+      completionRate: 0,
+    })) as EnterpriseCourse[],
+    hasMore: data.page < data.lastPage,
+  };
+}
+
+export function CoursesTab({
+  enterpriseId,
+  onMutate,
+}: {
+  enterpriseId: number;
+  onMutate?: () => void;
+}) {
+  const router = useRouter();
+  const { request, getSettingValue, currentLocaleCode } = useApp();
+
+  const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState<
+    'all' | EnterpriseCourseStatus
+  >('all');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(COURSES_PAGE_SIZE_DEFAULT);
+  const [pickerValue, setPickerValue] = useState<string | number | null>(null);
+  const [pickerCourse, setPickerCourse] = useState<EnterpriseCourse | null>(
+    null
+  );
+  const [createSheetOpen, setCreateSheetOpen] = useState(false);
+
+  const loadPickerOptions = useCallback(
+    (args: { page: number; pageSize: number; search: string }) =>
+      loadCourseOptions(request, args),
+    [request]
+  );
+
+  const queryParams = new URLSearchParams({
+    page: String(page),
+    pageSize: String(pageSize),
+    search,
+    ...(statusFilter !== 'all' ? { status: statusFilter } : {}),
+  });
+
+  const { data, refetch } = useQuery({
+    queryKey: [
+      'enterprise-courses',
+      enterpriseId,
+      page,
+      pageSize,
+      search,
+      statusFilter,
+    ],
+    queryFn: async () => {
+      const res = await request<any>({
+        url: `/lms/enterprise/${enterpriseId}/courses?${queryParams}`,
+        method: 'GET',
+      });
+      return (res as any).data ?? res;
+    },
+  });
+
+  const courses: EnterpriseCourse[] = data?.data ?? [];
+  const total: number = data?.total ?? 0;
+
+  async function handleRemove(courseId: number) {
+    try {
+      await request({
+        url: `/lms/enterprise/${enterpriseId}/courses/${courseId}`,
+        method: 'DELETE',
+      });
+      toast.success('Course removed from enterprise.');
+      refetch();
+      onMutate?.();
+    } catch {
+      toast.error('Failed to remove course.');
+    }
+  }
+
+  async function handleAdd() {
+    if (!pickerCourse) return;
+    try {
+      await request({
+        url: `/lms/enterprise/${enterpriseId}/courses`,
+        method: 'POST',
+        data: { course_id: pickerCourse.courseId ?? pickerCourse.id },
+      });
+      setPickerValue(null);
+      setPickerCourse(null);
+      refetch();
+      onMutate?.();
+    } catch {
+      toast.error('Failed to add course.');
+    }
+  }
+
+  return (
+    <>
+      <RelatedTabLayout<EnterpriseCourse>
+        search={search}
+        onSearchChange={(v) => {
+          setSearch(v);
+          setPage(1);
+        }}
+        searchPlaceholder="Search by course name..."
+        filters={
+          <Select
+            value={statusFilter}
+            onValueChange={(v) => {
+              setStatusFilter(v as 'all' | EnterpriseCourseStatus);
+              setPage(1);
+            }}
+          >
+            <SelectTrigger className="w-40">
+              <SelectValue placeholder="All statuses" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All statuses</SelectItem>
+              <SelectItem value="published">Published</SelectItem>
+              <SelectItem value="draft">Draft</SelectItem>
+              <SelectItem value="archived">Archived</SelectItem>
+            </SelectContent>
+          </Select>
+        }
+        pickerPlaceholder="Select a course..."
+        pickerEntityLabel="course"
+        pickerValue={pickerValue}
+        onPickerChange={(value, option) => {
+          setPickerValue(value);
+          setPickerCourse(option);
+        }}
+        loadPickerOptions={loadPickerOptions}
+        getPickerOptionValue={(c) => c.courseId ?? c.id}
+        getPickerOptionLabel={(c) => c.title}
+        getPickerOptionDescription={(c) => c.modality ?? undefined}
+        renderPickerOption={({ option: c }) => (
+          <div className="flex items-center gap-2 min-w-0">
+            <Avatar
+              className={`size-7 shrink-0 rounded-lg ${getAvatarColor(c.title).bg}`}
+            >
+              <AvatarFallback
+                className={`rounded-lg text-xs font-semibold ${getAvatarColor(c.title).bg} ${getAvatarColor(c.title).text}`}
+              >
+                {getInitials(c.title)}
+              </AvatarFallback>
+            </Avatar>
+            <div className="min-w-0">
+              <div className="truncate font-medium">{c.title}</div>
+              {c.modality && (
+                <div className="truncate text-xs text-muted-foreground">
+                  {c.modality}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+        onCreateNew={() => setCreateSheetOpen(true)}
+        createLabel="Create new course"
+        onAdd={handleAdd}
+        addLabel="Add"
+        addDisabled={!pickerCourse}
+        currentPage={page}
+        pageSize={pageSize}
+        totalItems={total}
+        onPageChange={setPage}
+        onPageSizeChange={(s) => {
+          setPageSize(s);
+          setPage(1);
+        }}
+      >
+        {courses.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-16 text-center">
+            <BookOpen className="mb-4 h-10 w-10 text-muted-foreground/30" />
+            <p className="text-sm font-medium text-muted-foreground">
+              No courses found.
+            </p>
+            <p className="mt-1 text-xs text-muted-foreground/60">
+              Adjust the search or status filter to see results.
+            </p>
+          </div>
+        ) : (
+          <div className="rounded-lg border border-border/60">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Course</TableHead>
+                  <TableHead>Modality</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead>Contracted</TableHead>
+                  <TableHead className="w-10" />
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {courses.map((course) => (
+                  <TableRow
+                    key={course.id}
+                    className="cursor-pointer"
+                    onClick={() =>
+                      router.push(
+                        `/lms/courses/${course.courseId ?? course.id}`
+                      )
+                    }
+                  >
+                    <TableCell>
+                      <div className="flex items-center gap-3">
+                        <Avatar
+                          className={`size-8 rounded-lg ${getAvatarColor(course.title).bg}`}
+                        >
+                          <AvatarFallback
+                            className={`rounded-lg text-xs font-semibold ${getAvatarColor(course.title).bg} ${getAvatarColor(course.title).text}`}
+                          >
+                            {getInitials(course.title)}
+                          </AvatarFallback>
+                        </Avatar>
+                        <p className="font-medium">{course.title}</p>
+                      </div>
+                    </TableCell>
+                    <TableCell className="text-sm text-muted-foreground">
+                      {course.modality ?? '—'}
+                    </TableCell>
+                    <TableCell>
+                      <Badge
+                        variant={
+                          COURSE_STATUS_VARIANT[
+                            course.status as EnterpriseCourseStatus
+                          ]
+                        }
+                      >
+                        {COURSE_STATUS_LABEL[
+                          course.status as EnterpriseCourseStatus
+                        ] ?? course.status}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-sm text-muted-foreground">
+                      {course.contractedAt
+                        ? formatDate(
+                            course.contractedAt,
+                            getSettingValue,
+                            currentLocaleCode
+                          )
+                        : '—'}
+                    </TableCell>
+                    <TableCell
+                      className="flex items-center gap-1"
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-8 w-8"
+                        onClick={() =>
+                          router.push(
+                            `/lms/courses/${course.courseId ?? course.id}`
+                          )
+                        }
+                      >
+                        <SquareArrowOutUpRight className="h-4 w-4" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-8 w-8 text-destructive hover:text-destructive"
+                        onClick={() =>
+                          handleRemove(course.courseId ?? (course.id as number))
+                        }
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        )}
+      </RelatedTabLayout>
+
+      <EnterpriseCourseCreateSheet
+        open={createSheetOpen}
+        onOpenChange={setCreateSheetOpen}
+        enterpriseId={enterpriseId}
+        onCreated={() => {
+          setCreateSheetOpen(false);
+          refetch();
+          onMutate?.();
+        }}
+      />
+    </>
+  );
+}

package/hedhog/frontend/app/enterprise/_components/enterprise-detail-constants.ts.ejs

@@ -0,0 +1,88 @@
+import type {
+  EnterpriseClassStatus,
+  EnterpriseCourseStatus,
+  EnterpriseStatus,
+  EnterpriseUserRole,
+  EnterpriseUserStatus,
+} from './enterprise-types';
+
+export const STATUS_VARIANT: Record<
+  EnterpriseStatus,
+  'default' | 'secondary' | 'outline' | 'destructive'
+> = {
+  active: 'default',
+  trial: 'secondary',
+  inactive: 'outline',
+  suspended: 'destructive',
+};
+
+export const STATUS_LABEL: Record<EnterpriseStatus, string> = {
+  active: 'Active',
+  trial: 'Trial',
+  inactive: 'Inactive',
+  suspended: 'Suspended',
+};
+
+export const CLASS_STATUS_VARIANT: Record<
+  EnterpriseClassStatus,
+  'default' | 'secondary' | 'outline' | 'destructive'
+> = {
+  open: 'secondary',
+  ongoing: 'default',
+  completed: 'outline',
+  cancelled: 'destructive',
+};
+
+export const CLASS_STATUS_LABEL: Record<EnterpriseClassStatus, string> = {
+  open: 'Open',
+  ongoing: 'Ongoing',
+  completed: 'Completed',
+  cancelled: 'Cancelled',
+};
+
+export const COURSE_STATUS_VARIANT: Record<
+  EnterpriseCourseStatus,
+  'default' | 'secondary' | 'outline' | 'destructive'
+> = {
+  published: 'default',
+  draft: 'secondary',
+  archived: 'outline',
+};
+
+export const COURSE_STATUS_LABEL: Record<EnterpriseCourseStatus, string> = {
+  published: 'Published',
+  draft: 'Draft',
+  archived: 'Archived',
+};
+
+export const USER_ROLE_VARIANT: Record<
+  EnterpriseUserRole,
+  'default' | 'secondary' | 'outline' | 'destructive'
+> = {
+  enterprise_admin: 'default',
+  hr_manager: 'secondary',
+  viewer: 'outline',
+  student: 'secondary',
+};
+
+export const USER_ROLE_LABEL: Record<EnterpriseUserRole, string> = {
+  enterprise_admin: 'Admin',
+  hr_manager: 'HR / Manager',
+  viewer: 'Viewer',
+  student: 'Student',
+};
+
+export const USER_STATUS_VARIANT: Record<
+  EnterpriseUserStatus,
+  'default' | 'secondary' | 'outline' | 'destructive'
+> = {
+  active: 'default',
+  pending: 'secondary',
+  inactive: 'outline',
+};
+
+export const USER_STATUS_LABEL: Record<EnterpriseUserStatus, string> = {
+  active: 'Active',
+  pending: 'Pending',
+  inactive: 'Inactive',
+};