create-mithaq 0.1.1 → 0.2.0

package/template/templates/{asas/src → features/courses}/courses/courses.ts

@@ -1,57 +1,36 @@
-import { defaultFields, draftFields, folderOf, invalid, versionOperations, type Ctx, type ReadTools, type WriteTools, defaultOperations } from 'mithaq'
+import { defaultFields, draftFields, folderOf, invalid, type Ctx, type ReadTools, type WriteTools } from 'mithaq'
 import { z } from 'zod'
-import { defineKayan, organization } from '../mithaq.ts'
-import { activity, appPage, danger, platformList, platformRecord, topPage } from '../pages.ts'
-import { readsPast } from '../tenant-access.ts'
+import { defineKayan, organization } from '@asas/mithaq'
+import { activity, activityTab, appPage, danger, backofficeList, backofficeRecord } from '@asas/mithaq/mithaq/pages.ts'
+import { readsPast } from '@asas/mithaq/roles/tenant-access.ts'
 import { sessions } from '../sessions/sessions.ts'
-import { media } from '../media/media.ts'
-import { onOffer } from './ui/on-offer.ts'
-import { expectedUpdatedAt } from '../steps/expected-updated-at.ts'
+import { seatsTaken } from '../sessions/seats.ts'
+import { expectedUpdatedAt } from '@asas/mithaq/steps/expected-updated-at.ts'
+import { archivedRow, marks, notArchived, reason, reasonInput, unarchived } from '../domain/archive.ts'
 
 /**
  * Page pieces only this kayan draws with. What both screens share is reached
  * through `ui`, `dashboardUi` and `portalUi` from `../mithaq.ts`.
  */
 const ui = folderOf(new URL('./ui/', import.meta.url))
+/** The portal's pages, which the courses feature draws for its students. */
+const portalUi = folderOf(new URL('../portal/ui/', import.meta.url))
 /** What a fee column draws on every screen. */
 const feeCell = ui('fee-cell.tsx#FeeCell')
 /** What the list's Status column draws. */
 const statusCell = ui('status-cell.tsx#StatusCell')
 
-/**
- * What `archive` parses. The error messages are this project's own copy keys: a
- * refusal's message is the key the form resolves. Without them the form draws what zod
- * wrote, in English.
- */
-const archiveInput = z.object({
-  id: z.guid(),
-  reason: z
-    .string({ error: 'courses.operations.archive.reason.required' })
-    .max(200, { error: 'courses.operations.archive.reason.maxLength' }),
-})
-
-/** The box `archive`'s dialog asks for on every screen that draws its button. */
-const reason = {
-  kind: 'text',
-  label: { en: 'Reason', ar: 'السبب' },
-  rules: { required: true, maxLength: 200 },
-} as const
-
-/**
- * The one step `archive` adds: it turns the operation's `reason` into the two
- * columns the kayan has, so `reason` never has to be a field.
- */
-const markArchived = (ctx: Ctx<z.infer<typeof archiveInput>>): Ctx => {
-  const { reason } = ctx.data
-  // Spread `ctx.data` to keep what the runner filled before this step, such as
-  // `updatedAt`. `reason` reaches no column: the store step writes the kayan's own fields alone.
-  return { ...ctx, data: { ...ctx.data, archived: true, archiveReason: reason } }
-}
-
 /** When the access code is drawn: while the form holds a live delivery, redrawn as the delivery changes. */
 const live = { delivery: { equals: 'live' } }
-/** When an archive button is drawn: over a row not archived yet, on every page that draws one. */
-const unarchived = { or: [{ 'record.archived': { exists: false } }, { 'record.archived': { equals: false } }] }
+/** The edit page's header pill for an archived course, beside its title and draft status. */
+const archivedBadge = { component: ui('archived-badge.tsx#ArchivedBadge'), when: archivedRow }
+/** Active, Drafts, Archived and All: Active is what a list opens on, so an archived course is out of the way. */
+const stateTabs = [
+  { tab: 'active', label: { en: 'Active', ar: 'النشطة' }, where: notArchived },
+  { tab: 'drafts', label: { en: 'Drafts', ar: 'المسودات' }, where: { and: [notArchived, { _status: { equals: 'draft' } }] } },
+  { tab: 'archived', label: { en: 'Archived', ar: 'المؤرشفة' }, where: { archived: { equals: true } } },
+  { tab: 'all', label: { en: 'All', ar: 'الكل' } },
+] as const
 
 /** Whether the actor runs the catalogue and so reads every course and every session. */
 export const runsCatalogue = (user: unknown): boolean => readsPast(user, 'courses.archive') || readsPast(user, 'screen.dashboard')
@@ -73,7 +52,7 @@ const archivedToArchivers = ({ user }: { user: unknown }) =>
 const details = [
   { section: 'about', label: { en: 'About the course', ar: 'عن الدورة' }, fields: ['title', 'summary', 'cover', 'details'] },
   { section: 'pricing', label: { en: 'Pricing', ar: 'التسعير' }, fields: [{ row: ['fee', 'currency'] }] },
-  { section: 'teaching', label: { en: 'Teaching', ar: 'التدريس' }, fields: ['delivery', { field: 'accessCode', when: live }, 'notifications'] },
+  { section: 'teaching', label: { en: 'Teaching', ar: 'التدريس' }, fields: ['delivery', { field: 'accessCode', when: live }, 'notifications', { field: 'selfEnroll', component: 'switch' }] },
 ] as const
 const catalogue = { section: 'catalogue', label: { en: 'Catalogue', ar: 'الدليل' }, fields: ['tags'] } as const
 /**
@@ -119,11 +98,19 @@ const createSessions = async (
   return ctx
 }
 
-/** What `findWithSessions` puts on the course, one entry per session it may read. */
+/**
+ * What `findWithSessions` puts on the course, one entry per session it may
+ * read, with the seats it has left: `null` where it holds any number. A reader
+ * who sees only its own seats, a student, could not count the others'.
+ */
 const sessionRow = z.object({
   id: z.guid(),
   startsAt: z.date(),
   capacity: z.number().nullable(),
+  venue: z.string().nullish(),
+  format: z.string().nullish(),
+  archived: z.boolean().nullish(),
+  seatsLeft: z.number().nullable(),
 })
 
 /**
@@ -141,7 +128,13 @@ const attachSessions = async (ctx: Ctx, tools: ReadTools): Promise<Ctx> => {
     where: { course: { equals: course.id } },
     limit: 0,
   })
-  return { ...ctx, data: { ...course, sessions: found.docs } }
+  // Each session was read under the reader's access, so only the seats of a session it may read are counted.
+  // ponytail: one count per session, a grouped count when a course holds many sessions.
+  const counted = await Promise.all(found.docs.map(async (one) => ({
+    ...one,
+    seatsLeft: typeof one.capacity === 'number' ? Math.max(0, one.capacity - (await seatsTaken({ session: one.id }))) : null,
+  })))
+  return { ...ctx, data: { ...course, sessions: counted } }
 }
 
 export const courses = defineKayan({
@@ -166,18 +159,18 @@ export const courses = defineKayan({
     },
   },
   targets: {
-    /** Every organization's rows on the platform, read-only, with each row's record page and its sessions. */
-    platform: {
+    /** Every organization's rows on the backoffice, read-only, with each row's record page and its sessions. */
+    backoffice: {
       useAsTitle: 'title',
       pages: {
-        ...platformList('/courses', { columns: ['title', 'organization', 'fee', 'archived', 'createdAt'], filters: ['organization', 'title', 'fee', 'archived'], search: ['title'], sort: '-createdAt' }),
-        ...platformRecord({
+        ...backofficeList('/courses', { columns: ['title', 'organization', 'fee', 'archived', 'createdAt'], filters: ['organization', 'title', 'fee', 'archived'], search: ['title'], sort: '-createdAt' }),
+        ...backofficeRecord({
           path: '/courses/:id',
           main: [{ tabs: [
             { tab: 'details', label: { en: 'Details', ar: 'التفاصيل' }, fields: [
               { section: 'about', label: { en: 'About the course', ar: 'عن الدورة' }, fields: ['title', 'summary', 'details'] },
               { section: 'pricing', label: { en: 'Pricing', ar: 'التسعير' }, fields: [{ row: ['fee', 'currency'] }, 'audience', 'topics'] },
-              { section: 'teaching', label: { en: 'Teaching', ar: 'التدريس' }, fields: ['delivery', 'accessCode', 'level', 'opensOn'] },
+              { section: 'teaching', label: { en: 'Teaching', ar: 'التدريس' }, fields: ['delivery', 'accessCode', 'level', 'opensOn', 'selfEnroll'] },
               { section: 'notes', label: { en: 'Notes', ar: 'ملاحظات' }, fields: ['archiveReason'] },
             ] },
             { tab: 'sessions', label: { en: 'Sessions', ar: 'الجلسات' }, fields: [{ list: {
@@ -204,10 +197,9 @@ export const courses = defineKayan({
      * through are the service target's own.
      */
     service: {
-      operations: {
-        ...defaultOperations,
-        // A course keeps its versions, so it answers the three that read and restore them.
-        ...versionOperations,
+      // The defaults hold versions' three operations too, since a course keeps its versions.
+      operations: ({ defaults }) => ({
+        ...defaults,
         /**
          * The shipped create list with one step added and one shape widened:
          * `sessions` is part of the create signature without being a column, since
@@ -254,13 +246,26 @@ export const courses = defineKayan({
           // What a screen's button asks for beyond the row's id, said as fields: the
           // dialog draws `reason` through the control every text field uses and keys
           // its label `courses.operations.archive.reason`. `buildAsas` refuses a
-          // field it names no key for. The portal declares the same box, because a
-          // screen that declares none has no dialog, sends no reason and is refused.
-          targets: { dashboard: { fields: { reason } }, portal: { fields: { reason } } },
-          // The schema is named at the top of the file beside the step that reads it,
-          // so one shape types both the parse and `ctx.data`.
-          input: () => archiveInput,
-          steps: ({ steps }) => [markArchived, steps.update],
+          // field it names no key for. A screen that declares none has no dialog.
+          targets: { dashboard: { fields: { reason } } },
+          input: () => reasonInput('courses.operations.archive'),
+          steps: ({ steps }) => [marks(true), steps.update],
+        },
+        /** Brings an archived course back into the catalogue, with the reason, which the activity keeps. */
+        unarchive: {
+          targets: { dashboard: { fields: { reason } } },
+          input: () => reasonInput('courses.operations.unarchive'),
+          steps: ({ steps }) => [marks(false), steps.update],
+        },
+        /**
+         * Payload's Unpublish: the course goes back to a draft, kept as it is and
+         * read by draft readers alone until it is published again. The caller
+         * sends the status it asks for, since an operation of its own keeps the
+         * row's status unless the call names one.
+         */
+        unpublish: {
+          input: ({ id }) => id.extend({ _status: z.literal('draft') }),
+          steps: ({ steps }) => [steps.update],
         },
         /**
          * A read list with one step of its own and an `output` written the way
@@ -273,13 +278,15 @@ export const courses = defineKayan({
           // puts that refusal back.
           input: ({ row }) => row.pick({ id: true }).strict(),
           steps: ({ steps }) => [steps.findOne, attachSessions],
-          output: ({ row }) => row.extend({ sessions: z.array(sessionRow) }),
+          // Every column optional but the id: the output is read after the reader's projection, which leaves out a
+          // column the reader holds no key for, as a student's leaves out the access code.
+          output: ({ row }) => row.partial().required({ id: true }).extend({ sessions: z.array(sessionRow) }),
         },
-      },
+      }),
     },
     dashboard: {
       // What this kayan is for, drawn under the list heading and the form title.
-      // One string per declared locale, keyed `courses.description`.
+      // One string per declared locale, keyed `courses.page.description`.
       description: {
         en: 'Everything on offer in the catalogue, and what a seat on each costs.',
         ar: 'كل ما هو معروض في الدليل، وما يكلفه مقعد في كل منها.',
@@ -297,12 +304,12 @@ export const courses = defineKayan({
           page: appPage([{ layout: 'table', main: [{ list: {
             // `_status` says whether each row is a draft or published, since this
             // list reads every row's latest draft.
-            columns: ['title', 'fee', 'archived', 'opensOn', '_status', 'details', 'cover'],
+            columns: ['title', 'fee', 'opensOn', '_status', 'details', 'cover'],
             filters: ['title', 'fee', 'archived'],
             // `details` is searched because this list names it: a rich text field
             // offers itself to no search box on its own.
             search: ['title', 'summary', 'details'],
-            empty: 'noCourses',
+            empty: ui('no-courses.tsx#NoCourses'),
             // Over the ticked rows: a delete behind its question, and one dialog that
             // writes the fields it names over every one of them.
             bulk: [
@@ -314,16 +321,15 @@ export const courses = defineKayan({
                   body: { en: 'This cannot be undone.', ar: 'لا يمكن التراجع عن هذا.' },
                 },
               },
-              { button: 'updateMany', label: { en: 'Update', ar: 'تحديث' }, fields: ['fee', 'archived'] },
+              // Archived is not among them: a course leaves and comes back through its own operations.
+              { button: 'updateMany', label: { en: 'Update', ar: 'تحديث' }, fields: ['fee', 'notifications'] },
+            ],
+            // On each row, the edit page's own archive or unarchive, asking for its reason.
+            row: [
+              { button: 'archive', when: unarchived, label: { en: 'Archive', ar: 'أرشفة' }, fields: ['reason'] },
+              { button: 'unarchive', when: archivedRow, label: { en: 'Unarchive', ar: 'إلغاء الأرشفة' }, fields: ['reason'] },
             ],
-            // On each row not archived yet, the edit page's own archive,
-            // asking for its reason.
-            row: [{
-              button: 'archive',
-              when: unarchived,
-              label: { en: 'Archive', ar: 'أرشفة' },
-              fields: ['reason'],
-            }],
+            tabs: stateTabs,
           } }] }]),
         },
         // The edit page's Details and Catalogue, and nothing that needs a row yet:
@@ -339,16 +345,27 @@ export const courses = defineKayan({
         // field it draws, and no id, tenant or timestamp.
         edit: {
           path: '/courses/:id',
-          page: appPage([{ tabs: [
+          page: { ...appPage([{ tabs: [
             { tab: 'details', label: { en: 'Details', ar: 'التفاصيل' }, fields: [{
               layout: 'record',
               main: [{ form: details }],
               // Beside the form, what was done to this row, by whom and when.
               side: [archivedCatalogue, activity],
-              // Where a button sits is where it is drawn: the archive in the record
-              // layout's danger zone, asking before it runs and only over a row not
-              // archived yet, before the delete every edit page ends its danger zone with.
+              // Where a button sits is where it is drawn: in the record layout's danger
+              // zone, Unpublish over a published course, Archive over one not archived and
+              // Unarchive over one that is, each asking before it runs, before the delete
+              // every edit page ends its danger zone with.
               danger: danger({
+                button: 'unpublish',
+                when: { 'record._status': { equals: 'published' } },
+                label: { en: 'Unpublish', ar: 'إلغاء النشر' },
+                component: ui('unpublish-button.tsx#UnpublishButton'),
+                reload: true,
+                confirm: {
+                  title: { en: 'Unpublish this course?', ar: 'إلغاء نشر هذه الدورة؟' },
+                  body: { en: 'It goes back to a draft that no student sees, until it is published again.', ar: 'تعود مسودة لا يراها أي طالب حتى تُنشر مجددا.' },
+                },
+              }, {
                 button: 'archive',
                 when: unarchived,
                 label: { en: 'Archive', ar: 'أرشفة' },
@@ -358,6 +375,16 @@ export const courses = defineKayan({
                   title: { en: 'Archive this course?', ar: 'أرشفة هذه الدورة؟' },
                   body: { en: 'It leaves the catalogue for every student.', ar: 'تخرج من الدليل لكل الطلاب.' },
                 },
+              }, {
+                button: 'unarchive',
+                when: archivedRow,
+                label: { en: 'Unarchive', ar: 'إلغاء الأرشفة' },
+                fields: ['reason'],
+                reload: true,
+                confirm: {
+                  title: { en: 'Unarchive this course?', ar: 'إلغاء أرشفة هذه الدورة؟' },
+                  body: { en: 'It is back in the catalogue as it was.', ar: 'تعود إلى الدليل كما كانت.' },
+                },
               }),
             }] },
             // The sessions are rows of another kayan pointing at this one: a list of
@@ -386,7 +413,9 @@ export const courses = defineKayan({
             { tab: 'versions', label: { en: 'Versions', ar: 'الإصدارات' }, fields: [
               { component: 'versions', when: { '$user.collections.courses.operations.findVersions': { equals: true } } },
             ] },
-          ] }]),
+            // Beside them, the row's whole activity, searched and filtered; the side column keeps the last few.
+            activityTab,
+          ] }]), header: [{ title: {} }, archivedBadge, { controls: {} }] },
         },
         board: {
           path: '/courses/board',
@@ -395,62 +424,16 @@ export const courses = defineKayan({
       },
     },
     /**
-     * A shorter list and form than the dashboard's: `currency` as `radio` where
-     * the dashboard draws `select`, and `audience` as a row of buttons, from the
-     * one declaration of each field. Its row archive asks for a reason as the
-     * dashboard's does, and its edit page's archive is a component of the
-     * portal's own. It lists the courses on offer alone: an archived course is
-     * left out of its list and its home's count, and its page opens for no
-     * student or instructor.
+     * The students' own pages, each drawn whole by the courses feature's portal: the catalogue of what is on
+     * offer, and a course's page with its sessions and, where the course lets students enroll themselves, the
+     * seats they take. Both read the courses that are published and not archived alone.
      */
     portal: {
       useAsTitle: 'title',
-      baseFilter: onOffer,
       description: { en: 'The courses on offer.', ar: 'الدورات المعروضة.' },
       pages: {
-        list: {
-          path: '/courses',
-          // Opens by title and 25 to a page, which the URL overrides, with
-          // the same archive on each row not archived yet.
-          page: topPage([{ layout: 'page', main: [{ list: {
-            columns: ['title', 'fee'],
-            filters: ['title'],
-            search: ['title'],
-            empty: ui('no-courses-on-offer.tsx#NoCourses'),
-            sort: 'title',
-            limit: 25,
-            row: [{
-              button: 'archive',
-              when: unarchived,
-              label: { en: 'Archive', ar: 'أرشفة' },
-              fields: ['reason'],
-            }],
-          } }] }]),
-        },
-        // The dashboard's record layout: the form's fields in sections, and the
-        // archive in the danger zone under it, only over a row not archived yet,
-        // drawn by the portal's own button, which writes the reason in the viewer's locale.
-        edit: {
-          path: '/courses/:id',
-          page: topPage([{
-            layout: 'record',
-            main: [{ form: [
-              { section: 'about', label: { en: 'About the course', ar: 'عن الدورة' }, fields: ['title', 'summary', 'cover', 'details'] },
-              { section: 'pricing', label: { en: 'Pricing', ar: 'التسعير' }, fields: [{ row: ['fee', 'currency'] }, { field: 'audience', component: 'buttonGroup' }] },
-              { section: 'teaching', label: { en: 'Teaching', ar: 'التدريس' }, fields: ['delivery', { field: 'accessCode', when: live }, 'opensOn'] },
-            ] }],
-            // Drawn only for a viewer who may archive, so a danger zone with
-            // nothing in it is not drawn at all.
-            danger: [{
-              button: 'archive',
-              when: { and: [unarchived, { '$user.collections.courses.operations.archive': { equals: true } }] },
-              label: { en: 'Archive', ar: 'أرشفة' },
-              reload: true,
-              component: 'archive',
-              confirm: { title: { en: 'Archive this course?', ar: 'أرشفة هذه الدورة؟' }, body: { en: 'Students stop seeing it.', ar: 'يتوقف الطلاب عن رؤيتها.' } },
-            }],
-          }]),
-        },
+        list: { path: '/courses', component: portalUi('catalogue.tsx#Catalogue') },
+        view: { path: '/courses/:id', component: portalUi('course.tsx#Course') },
       },
     },
   },
@@ -513,7 +496,7 @@ export const courses = defineKayan({
         zod: z.number({ error: 'courses.fee.invalid' }).nonnegative({ error: 'courses.fee.min' }).nullish(),
         dashboard: { filter: true, cell: feeCell },
         portal: { cell: feeCell },
-        platform: { cell: feeCell },
+        backoffice: { cell: feeCell },
       },
     },
     currency: {
@@ -558,7 +541,9 @@ export const courses = defineKayan({
       kind: 'text', label: { en: 'Access code', ar: 'رمز الدخول' }, rules: { maxLength: 6 },
       targets: { dashboard: { component: 'otp' } },
     },
-    archived: { kind: 'checkbox', label: { en: 'Archived', ar: 'مؤرشف' }, targets: { dashboard: { filter: true } } },
+    // Written by `archive` and `unarchive` alone, which record why: no create or
+    // plain update names it, so no key past theirs archives a course.
+    archived: { kind: 'checkbox', label: { en: 'Archived', ar: 'مؤرشف' }, rules: { providedBy: { create: 'never', update: 'application' } }, targets: { dashboard: { filter: true } } },
     // What a course covers, several at once out of a closed list. A course names
     // at most two, so a third box ticked is refused before the save. No floor: an
     // optional list left empty passes any `minRows`, and a list that is there
@@ -574,12 +559,12 @@ export const courses = defineKayan({
       ],
     },
     // The day enrolment opens, a calendar day with no time of its own, which
-    // the portal draws as the platform's own day picker.
+    // the portal draws as the backoffice's own day picker.
     opensOn: { kind: 'date', label: { en: 'Opens on', ar: 'يفتح في' } },
     archiveReason: {
       kind: 'text',
       label: { en: 'Archive reason', ar: 'سبب الأرشفة' },
-      rules: { maxLength: 200 },
+      rules: { maxLength: 200, providedBy: { create: 'never', update: 'application' } },
     },
     // The many-to-many: no column on this table at all, and a join table
     // `courses_tags` the store writes in the same transaction the course is
@@ -607,6 +592,10 @@ export const courses = defineKayan({
     // The course's cover, one of the organization's images. Its row cannot be
     // deleted while a course points at it, since an upload restricts. Declared
     // last, for the same column order.
-    cover: { kind: 'upload', relationTo: () => media, label: { en: 'Cover image', ar: 'صورة الغلاف' } },
+    cover: { kind: 'upload', relationTo: 'media', label: { en: 'Cover image', ar: 'صورة الغلاف' } },
+    // Whether a student takes a seat in this course's sessions from the portal: only where it is true, so a course
+    // that never says is one whose staff enroll each student. No default, which every create would then write, and
+    // a role without the column's key would be refused. Declared last, for the same column order.
+    selfEnroll: { kind: 'checkbox', label: { en: 'Students may enroll themselves', ar: 'يسجّل الطلاب أنفسهم' } },
   },
 })

package/template/templates/features/courses/courses/cover-reads.ts

@@ -0,0 +1,33 @@
+import { actorPermissions, type Where } from 'mithaq'
+import { serverTargets } from '@asas/mithaq'
+import { currentOrganization } from '@asas/mithaq/roles/tenant-access.ts'
+import { courses } from './courses.ts'
+
+/**
+ * The images an actor reads as covers: the cover of a published course it
+ * reads, of the organization its session has active, under the courses kayan's
+ * own read access for this actor. So a student or an instructor reads no image
+ * of a draft, of an archived course or of none. The media feature asks it of
+ * an actor that holds no `media.create`, and holds no import of this file.
+ *
+ * The organization is read off the trusted snapshot and named here, since the
+ * courses are read straight through the store, past the runner's scope. An
+ * image has no field that points at a course, so a row filter cannot reach
+ * one, and the covers are read first and named by id.
+ */
+export const coverReads = async ({ user }: { user: unknown }): Promise<Where | false> => {
+  const held = actorPermissions(user)
+  if (held !== true && !held?.has('courses.find')) return false
+  const active = currentOrganization(user)
+  const readable = active && (await courses.access!.read!({ user }))
+  if (!readable) return false
+  const published: Where = { and: [{ organization: { equals: active } }, { _status: { equals: 'published' } }] }
+  const found = await serverTargets.drizzle.find({ kayan: 'courses', args: {
+    limit: 0,
+    page: 1,
+    sort: { field: 'id', direction: 'asc' },
+    where: readable === true ? published : { and: [readable, published] },
+  } })
+  const ids = [...new Set(found.docs.map((row) => row.cover).filter((id): id is string => typeof id === 'string'))]
+  return ids.length ? { id: { in: ids } } : false
+}

package/template/templates/features/courses/courses/ui/archived-badge.tsx

@@ -0,0 +1,9 @@
+// The edit page's header pill for an archived course, beside the title and the
+// draft status, so a course out of the catalogue says so on every tab.
+import { useLocale } from 'mithaq/admin/react'
+import { Badge } from '@/components/ui/badge'
+
+export function ArchivedBadge() {
+  const { t } = useLocale()
+  return <Badge data-status="archived" className="bg-destructive/10 text-destructive">{t('version.archived', 'Archived')}</Badge>
+}

package/template/templates/{asas/src → features/courses}/courses/ui/fee-cell.tsx

@@ -3,7 +3,7 @@
 // the dot of "ر.س." on the wrong side.
 import type { CellProps } from 'mithaq/admin'
 import { useLocale } from 'mithaq/admin/react'
-import { noValue } from '@/components/mithaq/controls.tsx'
+import { noValue } from 'mithaq-admin/format.tsx'
 
 const amount = (text: string) => <bdi dir="ltr">{text}</bdi>
 

package/template/templates/{asas/src → features/courses}/courses/ui/status-cell.tsx

@@ -1,20 +1,21 @@
 // The list reads each row's latest draft, so a published course whose newest version is a draft
 // and a never-published course both arrive as `draft`. The plain read finds only courses with a
-// published copy, which tells the two apart.
+// published copy, which tells the two apart. An archived course says so over any of the three.
 import { use } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import type { CellProps, Row } from 'mithaq/admin'
 import { ListContext, useClient, useLocale, useScreen } from 'mithaq/admin/react'
 import { Badge } from '@/components/ui/badge'
-import { noValue } from '@/components/mithaq/controls.tsx'
+import { noValue } from 'mithaq-admin/format.tsx'
 import { coursesOf } from '../../enrollments/ui/session-cell.tsx'
 
 const pills = {
   draft: 'bg-muted text-muted-foreground',
   published: 'bg-emerald-500/15 text-emerald-700 dark:text-emerald-400',
   changed: 'bg-amber-500/15 text-amber-700 dark:text-amber-400',
+  archived: 'bg-destructive/10 text-destructive',
 }
-const words = { draft: 'Draft', published: 'Published', changed: 'Changed' }
+const words = { draft: 'Draft', published: 'Published', changed: 'Changed', archived: 'Archived' }
 
 export function StatusCell({ value, row }: CellProps) {
   const client = useClient()
@@ -24,6 +25,7 @@ export function StatusCell({ value, row }: CellProps) {
   const ids = [...new Set((use(ListContext)?.page.docs ?? [row]).flatMap((one: Row) => (one._status === 'draft' ? [String(one.id)] : [])))].sort()
   const { data: published, isError } = useQuery({ queryKey: ['status-cell', ids], queryFn: () => coursesOf({ client, ids, maxLimit }), enabled: ids.length > 0, staleTime: 30_000 })
   if (value !== 'draft' && value !== 'published') return noValue
+  if (row.archived === true) return <Badge data-status="archived" className={pills.archived}>{t('version.archived', words.archived)}</Badge>
   // Loading until the read answers, and a draft where it failed, which is what the row itself holds.
   if (value === 'draft' && !published && !isError) return t('admin.loading', 'Loading…')
   const status = value === 'draft' && published?.has(String(row.id)) ? 'changed' : value

package/template/templates/features/courses/courses/ui/unpublish-button.tsx

@@ -0,0 +1,15 @@
+// The danger zone's Unpublish: one click, behind the page's confirm, sending the
+// draft status `unpublish` takes, as Payload's Unpublish does. The course stays
+// as it is, read by draft readers alone, until it is published again.
+import type { ButtonProps } from 'mithaq/admin'
+import { useLocale } from 'mithaq/admin/react'
+import { Button } from '@/components/ui/button'
+
+export function UnpublishButton({ busy, operation, run }: ButtonProps) {
+  const { t } = useLocale()
+  return (
+    <Button type="button" variant="outline" data-button={operation} disabled={busy} onClick={() => void run({ _status: 'draft' })}>
+      {t('courses.operations.unpublish', 'Unpublish')}
+    </Button>
+  )
+}

package/template/templates/features/courses/domain/archive.ts

@@ -0,0 +1,39 @@
+import { z } from 'zod'
+import type { Ctx } from 'mithaq'
+
+/** The box an archive's or an unarchive's dialog asks for on every screen that draws its button. */
+export const reason = {
+  kind: 'text',
+  label: { en: 'Reason', ar: 'السبب' },
+  rules: { required: true, maxLength: 200 },
+} as const
+
+/**
+ * What `archive` and `unarchive` parse: the row and why. The error messages are
+ * the kayan's own copy keys, which the form resolves; without them it draws
+ * what zod wrote, in English.
+ */
+export const reasonInput = (key: `${string}.operations.${'archive' | 'unarchive'}`) => z.object({
+  id: z.guid(),
+  reason: z
+    .string({ error: `${key}.reason.required` })
+    .max(200, { error: `${key}.reason.maxLength` }),
+})
+
+/**
+ * The one step each adds: it turns the operation's `reason` into the two
+ * columns the kayan has, so `reason` never has to be a field. `ctx.data` is
+ * spread to keep what the runner filled before it, such as `updatedAt`, and
+ * `reason` reaches no column: the store step writes the kayan's own fields alone.
+ * An empty reason, which a bulk archive sends, keeps none.
+ */
+export const marks = (archived: boolean) => (ctx: Ctx<{ reason: string }>): Ctx => ({ ...ctx, data: { ...ctx.data, archived, archiveReason: ctx.data.reason || null } })
+
+/** Over a row not archived yet, where an archive button is drawn. Both arms, since a row from before the column holds `null`. */
+export const unarchived = { or: [{ 'record.archived': { exists: false } }, { 'record.archived': { equals: false } }] } as const
+
+/** Over an archived row, where an unarchive button and the Archived badge are drawn. */
+export const archivedRow = { 'record.archived': { equals: true } } as const
+
+/** A list's tabs over the same column: what is running, what was archived, and everything. */
+export const notArchived = { or: [{ archived: { exists: false } }, { archived: { equals: false } }] } as const

package/template/templates/features/courses/domain/on-offer.ts

@@ -0,0 +1,6 @@
+// The courses the portal offers: every course not archived, of those a plain
+// read answers, which are the published ones. The portal's catalogue, its home
+// and its course page read these alone. Plain data in a file of its own, so a
+// page reads it without the kayan's declaration. A course with no `archived`
+// value is not archived either.
+export const onOffer = { or: [{ archived: { exists: false } }, { archived: { equals: false } }] }