From 50f107dbb21ef09b4ecbc673692f2ad29131e266 Mon Sep 17 00:00:00 2001
From: Aditya Hegde <adityahegderocks@gmail.com>
Date: Mon, 27 Jan 2025 10:32:12 +0530
Subject: [PATCH 1/4] Add monthly report support

---
 .../projects/status/ProjectParseErrors.svelte |  2 +-
 .../BaseScheduledReportForm.svelte            | 17 ++++++--
 .../ScheduledReportDialog.svelte              |  8 +++-
 .../features/scheduled-reports/time-utils.ts  | 40 ++++++++++++++-----
 .../src/features/scheduled-reports/utils.ts   |  9 ++++-
 5 files changed, 61 insertions(+), 15 deletions(-)

diff --git a/web-admin/src/features/projects/status/ProjectParseErrors.svelte b/web-admin/src/features/projects/status/ProjectParseErrors.svelte
index ff32404d884..5038ae8b031 100644
--- a/web-admin/src/features/projects/status/ProjectParseErrors.svelte
+++ b/web-admin/src/features/projects/status/ProjectParseErrors.svelte
@@ -41,7 +41,7 @@
   {:else if isSuccess}
     {#if parseErrors && parseErrors.length > 0}
       <ul class="border rounded-sm">
-        {#each parseErrors as error (error.message)}
+        {#each parseErrors as error, i (i)}
           <li
             class="flex gap-x-5 justify-between py-1 px-9 border-b border-gray-200 bg-red-50 font-mono last:border-b-0"
           >
diff --git a/web-common/src/features/scheduled-reports/BaseScheduledReportForm.svelte b/web-common/src/features/scheduled-reports/BaseScheduledReportForm.svelte
index 347ea7bb1f7..b066819f028 100644
--- a/web-common/src/features/scheduled-reports/BaseScheduledReportForm.svelte
+++ b/web-common/src/features/scheduled-reports/BaseScheduledReportForm.svelte
@@ -11,7 +11,7 @@
   import Input from "../../components/forms/Input.svelte";
   import Select from "../../components/forms/Select.svelte";
   import { runtime } from "../../runtime-client/runtime-store";
-  import { makeTimeZoneOptions } from "./time-utils";
+  import { makeTimeZoneOptions, ReportFrequency } from "./time-utils";
 
   export let formId: string;
   export let data: Readable<ReportValues>;
@@ -49,12 +49,12 @@
       bind:value={$data["frequency"]}
       id="frequency"
       label="Frequency"
-      options={["Daily", "Weekdays", "Weekly"].map((frequency) => ({
+      options={["Daily", "Weekdays", "Weekly", "Monthly"].map((frequency) => ({
         value: frequency,
         label: frequency,
       }))}
     />
-    {#if $data["frequency"] === "Weekly"}
+    {#if $data["frequency"] === ReportFrequency.Weekly}
       <Select
         bind:value={$data["dayOfWeek"]}
         id="dayOfWeek"
@@ -73,6 +73,17 @@
         }))}
       />
     {/if}
+    {#if $data["frequency"] === ReportFrequency.Monthly}
+      <Input
+        bind:value={$data["dayOfMonth"]}
+        errors={$errors["dayOfMonth"]}
+        id="dayOfMonth"
+        label="Day"
+        inputType="number"
+        width="64px"
+        labelGap="2"
+      />
+    {/if}
     <TimePicker bind:value={$data["timeOfDay"]} id="timeOfDay" label="Time" />
     <Select
       bind:value={$data["timeZone"]}
diff --git a/web-common/src/features/scheduled-reports/ScheduledReportDialog.svelte b/web-common/src/features/scheduled-reports/ScheduledReportDialog.svelte
index ccbb7686b33..1d9ff0c6def 100644
--- a/web-common/src/features/scheduled-reports/ScheduledReportDialog.svelte
+++ b/web-common/src/features/scheduled-reports/ScheduledReportDialog.svelte
@@ -11,7 +11,7 @@
     type ReportValues,
   } from "@rilldata/web-common/features/scheduled-reports/utils";
   import { defaults, superForm } from "sveltekit-superforms";
-  import { array, object, string } from "yup";
+  import { array, object, string, number } from "yup";
   import { type ValidationAdapter, yup } from "sveltekit-superforms/adapters";
   import { Button } from "../../components/button";
   import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
@@ -55,6 +55,9 @@
   const schema = yup(
     object({
       title: string().required("Required"),
+      // There isnt enough space so just say "Invalid"
+      // TODO: value of 0 is not being validated
+      dayOfMonth: number().min(1, "Invalid").max(31, "Invalid"),
       emailRecipients: array().of(string().email("Invalid email")),
       slackChannels: array().of(string()),
       slackUsers: array().of(string().email("Invalid email")),
@@ -66,6 +69,7 @@
       values.frequency,
       values.dayOfWeek,
       values.timeOfDay,
+      values.dayOfMonth,
     );
 
     try {
@@ -147,6 +151,8 @@
       invalidateAll: false,
     },
   );
+
+  $: console.log($form);
 </script>
 
 <Dialog.Root bind:open>
diff --git a/web-common/src/features/scheduled-reports/time-utils.ts b/web-common/src/features/scheduled-reports/time-utils.ts
index 0fabc6e1c54..525570cecbb 100644
--- a/web-common/src/features/scheduled-reports/time-utils.ts
+++ b/web-common/src/features/scheduled-reports/time-utils.ts
@@ -5,6 +5,14 @@ import {
   getUTCIANA,
 } from "../../lib/time/timezone";
 
+export enum ReportFrequency {
+  Daily = "Daily",
+  Weekdays = "Weekdays",
+  Weekly = "Weekly",
+  Monthly = "Monthly",
+  Custom = "Custom",
+}
+
 export function getTodaysDayOfWeek(): string {
   return DateTime.now().toLocaleString({ weekday: "long" });
 }
@@ -20,21 +28,22 @@ export function getTimeIn24FormatFromDateTime(dateTime: DateTime): string {
 }
 
 export function convertFormValuesToCronExpression(
-  frequency: string,
+  frequency: ReportFrequency,
   dayOfWeek: string,
   timeOfDay: string,
+  dayOfMonth: number,
 ): string {
   const [hour, minute] = timeOfDay.split(":").map(Number);
   let cronExpr = `${minute} ${hour} `;
 
   switch (frequency) {
-    case "Daily":
+    case ReportFrequency.Daily:
       cronExpr += "* * *";
       break;
-    case "Weekdays":
+    case ReportFrequency.Weekdays:
       cronExpr += "* * 1-5";
       break;
-    case "Weekly": {
+    case ReportFrequency.Weekly: {
       const weekDayMap: Record<string, number> = {
         Sunday: 0,
         Monday: 1,
@@ -47,25 +56,33 @@ export function convertFormValuesToCronExpression(
       cronExpr += `* * ${weekDayMap[dayOfWeek]}`;
       break;
     }
+    case ReportFrequency.Monthly:
+      cronExpr += `${dayOfMonth} * *`;
+      break;
   }
 
   return cronExpr;
 }
 
-export function getFrequencyFromCronExpression(cronExpr: string): string {
+export function getFrequencyFromCronExpression(
+  cronExpr: string,
+): ReportFrequency {
   const [, , dayOfMonth, month, dayOfWeek] = cronExpr.split(" ");
 
   if (dayOfMonth === "*" && month === "*") {
     if (dayOfWeek === "*") {
-      return "Daily";
+      return ReportFrequency.Daily;
     } else if (dayOfWeek === "1-5") {
-      return "Weekdays";
+      return ReportFrequency.Weekdays;
     } else {
-      return "Weekly";
+      return ReportFrequency.Weekly;
     }
   }
+  if (month === "*" && dayOfWeek === "*") {
+    return ReportFrequency.Monthly;
+  }
 
-  return "Custom";
+  return ReportFrequency.Custom;
 }
 
 export function getDayOfWeekFromCronExpression(cronExpr: string): string {
@@ -96,6 +113,11 @@ export function getTimeOfDayFromCronExpression(cronExpr: string): string {
   return `${hour}:${minute === "0" ? "00" : minute}`;
 }
 
+export function getDayOfMonthFromCronExpression(cronExpr: string): number {
+  const [, , dayOfMonth] = cronExpr.split(" ");
+  return Number(dayOfMonth);
+}
+
 export function makeTimeZoneOptions(availableTimeZones: string[] | undefined) {
   const userLocalIANA = getLocalIANA();
   const UTCIana = getUTCIANA();
diff --git a/web-common/src/features/scheduled-reports/utils.ts b/web-common/src/features/scheduled-reports/utils.ts
index 184678ba7de..89aa3b01b4e 100644
--- a/web-common/src/features/scheduled-reports/utils.ts
+++ b/web-common/src/features/scheduled-reports/utils.ts
@@ -1,11 +1,13 @@
 import { getExploreName } from "@rilldata/web-admin/features/dashboards/query-mappers/utils";
 import {
+  getDayOfMonthFromCronExpression,
   getDayOfWeekFromCronExpression,
   getFrequencyFromCronExpression,
   getNextQuarterHour,
   getTimeIn24FormatFromDateTime,
   getTimeOfDayFromCronExpression,
   getTodaysDayOfWeek,
+  ReportFrequency,
 } from "@rilldata/web-common/features/scheduled-reports/time-utils";
 import { getLocalIANA } from "@rilldata/web-common/lib/time/timezone";
 import {
@@ -24,12 +26,17 @@ export function getInitialValues(
       ? getFrequencyFromCronExpression(
           reportSpec.refreshSchedule?.cron as string,
         )
-      : "Weekly",
+      : ReportFrequency.Weekly,
     dayOfWeek: reportSpec
       ? getDayOfWeekFromCronExpression(
           reportSpec.refreshSchedule?.cron as string,
         )
       : getTodaysDayOfWeek(),
+    dayOfMonth: reportSpec
+      ? getDayOfMonthFromCronExpression(
+          reportSpec.refreshSchedule?.cron as string,
+        )
+      : 1,
     timeOfDay: reportSpec
       ? getTimeOfDayFromCronExpression(
           reportSpec.refreshSchedule?.cron as string,

From 1d370066d3ab0abacaa2aab70b3da3d97909a0da Mon Sep 17 00:00:00 2001
From: Aditya Hegde <adityahegderocks@gmail.com>
Date: Mon, 27 Jan 2025 17:08:59 +0530
Subject: [PATCH 2/4] Fix lint and no error on 0 input

---
 web-common/src/components/forms/Input.svelte                  | 4 +++-
 .../features/scheduled-reports/BaseScheduledReportForm.svelte | 2 +-
 .../features/scheduled-reports/ScheduledReportDialog.svelte   | 3 ---
 web-common/src/features/scheduled-reports/time-utils.ts       | 4 ++++
 web-common/src/features/scheduled-reports/utils.ts            | 3 ++-
 5 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/web-common/src/components/forms/Input.svelte b/web-common/src/components/forms/Input.svelte
index 99524a97175..df3aed6f4a0 100644
--- a/web-common/src/components/forms/Input.svelte
+++ b/web-common/src/components/forms/Input.svelte
@@ -72,6 +72,8 @@
 
   $: type = secret && !showPassword ? "password" : inputType;
 
+  $: hasValue = inputType === "number" ? !!value || value === 0 : !!value;
+
   onMount(() => {
     if (claimFocusOnMount) {
       if (inputElement) {
@@ -228,7 +230,7 @@
     />
   {/if}
 
-  {#if errors && (alwaysShowError || (!focus && value))}
+  {#if errors && (alwaysShowError || (!focus && hasValue))}
     {#if typeof errors === "string"}
       <div in:slide={{ duration: 200 }} class="error">
         {errors}
diff --git a/web-common/src/features/scheduled-reports/BaseScheduledReportForm.svelte b/web-common/src/features/scheduled-reports/BaseScheduledReportForm.svelte
index b066819f028..cec1b648aab 100644
--- a/web-common/src/features/scheduled-reports/BaseScheduledReportForm.svelte
+++ b/web-common/src/features/scheduled-reports/BaseScheduledReportForm.svelte
@@ -81,7 +81,7 @@
         label="Day"
         inputType="number"
         width="64px"
-        labelGap="2"
+        labelGap={2}
       />
     {/if}
     <TimePicker bind:value={$data["timeOfDay"]} id="timeOfDay" label="Time" />
diff --git a/web-common/src/features/scheduled-reports/ScheduledReportDialog.svelte b/web-common/src/features/scheduled-reports/ScheduledReportDialog.svelte
index 1d9ff0c6def..2bb1cbf68be 100644
--- a/web-common/src/features/scheduled-reports/ScheduledReportDialog.svelte
+++ b/web-common/src/features/scheduled-reports/ScheduledReportDialog.svelte
@@ -56,7 +56,6 @@
     object({
       title: string().required("Required"),
       // There isnt enough space so just say "Invalid"
-      // TODO: value of 0 is not being validated
       dayOfMonth: number().min(1, "Invalid").max(31, "Invalid"),
       emailRecipients: array().of(string().email("Invalid email")),
       slackChannels: array().of(string()),
@@ -151,8 +150,6 @@
       invalidateAll: false,
     },
   );
-
-  $: console.log($form);
 </script>
 
 <Dialog.Root bind:open>
diff --git a/web-common/src/features/scheduled-reports/time-utils.ts b/web-common/src/features/scheduled-reports/time-utils.ts
index 525570cecbb..1b69815211c 100644
--- a/web-common/src/features/scheduled-reports/time-utils.ts
+++ b/web-common/src/features/scheduled-reports/time-utils.ts
@@ -17,6 +17,10 @@ export function getTodaysDayOfWeek(): string {
   return DateTime.now().toLocaleString({ weekday: "long" });
 }
 
+export function getTodaysDayOfMonth(): number {
+  return DateTime.now().day;
+}
+
 export function getNextQuarterHour(): DateTime {
   const now = DateTime.local();
   const nextQuarter = now.plus({ minutes: 15 - (now.minute % 15) });
diff --git a/web-common/src/features/scheduled-reports/utils.ts b/web-common/src/features/scheduled-reports/utils.ts
index 89aa3b01b4e..51dc2d8978e 100644
--- a/web-common/src/features/scheduled-reports/utils.ts
+++ b/web-common/src/features/scheduled-reports/utils.ts
@@ -6,6 +6,7 @@ import {
   getNextQuarterHour,
   getTimeIn24FormatFromDateTime,
   getTimeOfDayFromCronExpression,
+  getTodaysDayOfMonth,
   getTodaysDayOfWeek,
   ReportFrequency,
 } from "@rilldata/web-common/features/scheduled-reports/time-utils";
@@ -36,7 +37,7 @@ export function getInitialValues(
       ? getDayOfMonthFromCronExpression(
           reportSpec.refreshSchedule?.cron as string,
         )
-      : 1,
+      : getTodaysDayOfMonth(),
     timeOfDay: reportSpec
       ? getTimeOfDayFromCronExpression(
           reportSpec.refreshSchedule?.cron as string,

From f2025d994e28ff6c796fe0755d2b461a08b0e22c Mon Sep 17 00:00:00 2001
From: Aditya Hegde <adityahegderocks@gmail.com>
Date: Mon, 3 Feb 2025 19:58:48 +0530
Subject: [PATCH 3/4] Disable the day of month selection for now

---
 .../metadata/ReportMetadata.svelte            | 20 ++++++--------
 .../scheduled-reports/metadata/utils.ts       | 26 +++++++++++++++++++
 web-common/src/components/forms/Select.svelte |  1 +
 .../components/select/select-trigger.svelte   |  4 ++-
 .../BaseScheduledReportForm.svelte            | 10 +++----
 .../ScheduledReportDialog.svelte              |  4 +--
 6 files changed, 43 insertions(+), 22 deletions(-)

diff --git a/web-admin/src/features/scheduled-reports/metadata/ReportMetadata.svelte b/web-admin/src/features/scheduled-reports/metadata/ReportMetadata.svelte
index 24e5ea7d7c0..c7819e27e8b 100644
--- a/web-admin/src/features/scheduled-reports/metadata/ReportMetadata.svelte
+++ b/web-admin/src/features/scheduled-reports/metadata/ReportMetadata.svelte
@@ -10,7 +10,6 @@
   import { getRuntimeServiceListResourcesQueryKey } from "@rilldata/web-common/runtime-client";
   import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
   import { useQueryClient } from "@tanstack/svelte-query";
-  import cronstrue from "cronstrue";
   import { createAdminServiceDeleteReport } from "../../../client";
   import ProjectAccessControls from "../../projects/ProjectAccessControls.svelte";
   import {
@@ -22,7 +21,11 @@
   import MetadataValue from "./MetadataValue.svelte";
   import ReportOwnerBlock from "./ReportOwnerBlock.svelte";
   import RunNowButton from "./RunNowButton.svelte";
-  import { exportFormatToPrettyString, formatNextRunOn } from "./utils";
+  import {
+    exportFormatToPrettyString,
+    formatNextRunOn,
+    formatRefreshSchedule,
+  } from "./utils";
 
   export let organization: string;
   export let project: string;
@@ -39,18 +42,11 @@
   $: dashboardTitle =
     $dashboard.data?.explore?.displayName || $dashboardName.data;
 
-  // Get human-readable frequency
-  $: humanReadableFrequency =
-    $reportQuery.data &&
-    cronstrue.toString(
-      $reportQuery.data.resource.report.spec.refreshSchedule.cron,
-      {
-        verbose: true,
-      },
-    );
-
   $: reportSpec = $reportQuery.data?.resource?.report?.spec;
 
+  // Get human-readable frequency
+  $: humanReadableFrequency = formatRefreshSchedule(reportSpec);
+
   $: emailNotifier = extractNotifier(reportSpec?.notifiers, "email");
   $: slackNotifier = extractNotifier(reportSpec?.notifiers, "slack");
 
diff --git a/web-admin/src/features/scheduled-reports/metadata/utils.ts b/web-admin/src/features/scheduled-reports/metadata/utils.ts
index a1d685ceedd..37ae247df0e 100644
--- a/web-admin/src/features/scheduled-reports/metadata/utils.ts
+++ b/web-admin/src/features/scheduled-reports/metadata/utils.ts
@@ -1,3 +1,5 @@
+import type { V1ReportSpec } from "@rilldata/web-common/runtime-client";
+import cronstrue from "cronstrue";
 import { DateTime } from "luxon";
 import { V1ExportFormat } from "../../../client";
 
@@ -25,3 +27,27 @@ export function formatNextRunOn(nextRunOn: string, timeZone: string): string {
     .setZone(timeZone)
     .toLocaleString(DateTime.DATETIME_FULL);
 }
+
+const suffixMap = {
+  1: "st",
+  2: "nd",
+  3: "rd",
+};
+export function formatRefreshSchedule(reportSpec: V1ReportSpec) {
+  if (!reportSpec.refreshSchedule?.cron) return "";
+  let formattedRefreshSchedule = cronstrue.toString(
+    reportSpec.refreshSchedule.cron,
+    {
+      verbose: true,
+    },
+  );
+  formattedRefreshSchedule = formattedRefreshSchedule.replace(
+    /on day (\d*) of the month/,
+    (_, day: number) => {
+      const suffix = suffixMap[day % 10] ?? "th";
+      return `on the ${day}${suffix} of each month`;
+    },
+  );
+
+  return formattedRefreshSchedule;
+}
diff --git a/web-common/src/components/forms/Select.svelte b/web-common/src/components/forms/Select.svelte
index aa2111f88d1..0c86301ba88 100644
--- a/web-common/src/components/forms/Select.svelte
+++ b/web-common/src/components/forms/Select.svelte
@@ -85,6 +85,7 @@
   >
     <Select.Trigger
       {id}
+      {disabled}
       {lockable}
       {lockTooltip}
       bind:el={selectElement}
diff --git a/web-common/src/components/select/select-trigger.svelte b/web-common/src/components/select/select-trigger.svelte
index 6705cd12735..83ac51c4e35 100644
--- a/web-common/src/components/select/select-trigger.svelte
+++ b/web-common/src/components/select/select-trigger.svelte
@@ -7,6 +7,7 @@
   import TooltipContent from "../tooltip/TooltipContent.svelte";
 
   type $$Props = SelectPrimitive.TriggerProps & {
+    disabled?: boolean;
     lockable?: boolean;
     lockTooltip?: string;
     // See: https://www.bits-ui.com/docs/components/select#selecttrigger
@@ -18,6 +19,7 @@
   let className: $$Props["class"] = undefined;
 
   export let el: HTMLButtonElement | undefined = undefined;
+  export let disabled = false;
   export let lockable = false;
   export let lockTooltip = "";
   export { className as class };
@@ -27,7 +29,7 @@
 
 <SelectPrimitive.Trigger
   bind:el
-  disabled={locked}
+  disabled={locked || disabled}
   class={cn(
     "flex h-8 w-full items-center relative justify-between rounded-[2px] border border-gray-300 bg-transparent px-2 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:border-primary-400 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-400 [&>span]:line-clamp-1",
     className,
diff --git a/web-common/src/features/scheduled-reports/BaseScheduledReportForm.svelte b/web-common/src/features/scheduled-reports/BaseScheduledReportForm.svelte
index cec1b648aab..fc2257337d7 100644
--- a/web-common/src/features/scheduled-reports/BaseScheduledReportForm.svelte
+++ b/web-common/src/features/scheduled-reports/BaseScheduledReportForm.svelte
@@ -74,14 +74,12 @@
       />
     {/if}
     {#if $data["frequency"] === ReportFrequency.Monthly}
-      <Input
-        bind:value={$data["dayOfMonth"]}
-        errors={$errors["dayOfMonth"]}
+      <Select
+        value={"1"}
         id="dayOfMonth"
         label="Day"
-        inputType="number"
-        width="64px"
-        labelGap={2}
+        options={[{ value: "1", label: "First day" }]}
+        disabled
       />
     {/if}
     <TimePicker bind:value={$data["timeOfDay"]} id="timeOfDay" label="Time" />
diff --git a/web-common/src/features/scheduled-reports/ScheduledReportDialog.svelte b/web-common/src/features/scheduled-reports/ScheduledReportDialog.svelte
index 2bb1cbf68be..42495a87252 100644
--- a/web-common/src/features/scheduled-reports/ScheduledReportDialog.svelte
+++ b/web-common/src/features/scheduled-reports/ScheduledReportDialog.svelte
@@ -11,7 +11,7 @@
     type ReportValues,
   } from "@rilldata/web-common/features/scheduled-reports/utils";
   import { defaults, superForm } from "sveltekit-superforms";
-  import { array, object, string, number } from "yup";
+  import { array, object, string } from "yup";
   import { type ValidationAdapter, yup } from "sveltekit-superforms/adapters";
   import { Button } from "../../components/button";
   import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
@@ -55,8 +55,6 @@
   const schema = yup(
     object({
       title: string().required("Required"),
-      // There isnt enough space so just say "Invalid"
-      dayOfMonth: number().min(1, "Invalid").max(31, "Invalid"),
       emailRecipients: array().of(string().email("Invalid email")),
       slackChannels: array().of(string()),
       slackUsers: array().of(string().email("Invalid email")),

From 867042b121cde4b955e3d13ae70681005c3d6b51 Mon Sep 17 00:00:00 2001
From: Aditya Hegde <adityahegderocks@gmail.com>
Date: Tue, 4 Feb 2025 18:30:55 +0530
Subject: [PATCH 4/4] Fix for 11,12,13 and add tests

---
 .../metadata/ReportMetadata.svelte            |  4 +-
 .../metadata/metadata.spec.ts                 | 60 +++++++++++++++++++
 .../scheduled-reports/metadata/utils.ts       | 24 ++------
 .../features/scheduled-reports/time-utils.ts  | 18 +++---
 web-common/src/lib/ordinal.spec.ts            | 34 +++++++++++
 web-common/src/lib/ordinal.ts                 | 14 +++++
 6 files changed, 126 insertions(+), 28 deletions(-)
 create mode 100644 web-admin/src/features/scheduled-reports/metadata/metadata.spec.ts
 create mode 100644 web-common/src/lib/ordinal.spec.ts
 create mode 100644 web-common/src/lib/ordinal.ts

diff --git a/web-admin/src/features/scheduled-reports/metadata/ReportMetadata.svelte b/web-admin/src/features/scheduled-reports/metadata/ReportMetadata.svelte
index c7819e27e8b..7c25c41b220 100644
--- a/web-admin/src/features/scheduled-reports/metadata/ReportMetadata.svelte
+++ b/web-admin/src/features/scheduled-reports/metadata/ReportMetadata.svelte
@@ -45,7 +45,9 @@
   $: reportSpec = $reportQuery.data?.resource?.report?.spec;
 
   // Get human-readable frequency
-  $: humanReadableFrequency = formatRefreshSchedule(reportSpec);
+  $: humanReadableFrequency = reportSpec?.refreshSchedule?.cron
+    ? formatRefreshSchedule(reportSpec.refreshSchedule.cron)
+    : "";
 
   $: emailNotifier = extractNotifier(reportSpec?.notifiers, "email");
   $: slackNotifier = extractNotifier(reportSpec?.notifiers, "slack");
diff --git a/web-admin/src/features/scheduled-reports/metadata/metadata.spec.ts b/web-admin/src/features/scheduled-reports/metadata/metadata.spec.ts
new file mode 100644
index 00000000000..4566ededcbf
--- /dev/null
+++ b/web-admin/src/features/scheduled-reports/metadata/metadata.spec.ts
@@ -0,0 +1,60 @@
+import { formatRefreshSchedule } from "@rilldata/web-admin/features/scheduled-reports/metadata/utils";
+import {
+  convertFormValuesToCronExpression,
+  getFrequencyFromCronExpression,
+  ReportFrequency,
+} from "@rilldata/web-common/features/scheduled-reports/time-utils";
+import { describe, it, expect } from "vitest";
+
+describe("Reports metadata", () => {
+  describe("formatRefreshSchedule", () => {
+    const TestCase: [string, string][] = [
+      [
+        "* * * 21 * *",
+        "Every second, every minute, every hour, on the 21st of each month",
+      ],
+      // TODO: we need a follow up to better match what is expected.
+      //       perhaps we should replace cronstrue
+      ["0 0 * * 1", "At 12:00 AM, only on Monday"],
+    ];
+    for (const [cron, formattedSchedule] of TestCase) {
+      it(`format(${cron})=${formattedSchedule}`, () => {
+        expect(formatRefreshSchedule(cron)).toEqual(formattedSchedule);
+      });
+    }
+  });
+
+  describe("frequency extraction and conversion", () => {
+    const TestCase: [
+      frequency: ReportFrequency,
+      dayOfWeek: string,
+      timeOfDay: string,
+      dayOfMonth: number,
+      expectedCron: string,
+    ][] = [
+      [ReportFrequency.Daily, "Monday", "11:20", 1, "20 11 * * *"],
+      [ReportFrequency.Weekly, "Tuesday", "11:20", 1, "20 11 * * 2"],
+      [ReportFrequency.Weekdays, "Tuesday", "11:20", 1, "20 11 * * 1-5"],
+      [ReportFrequency.Monthly, "Tuesday", "11:20", 11, "20 11 11 * *"],
+    ];
+
+    for (const [
+      frequency,
+      dayOfWeek,
+      timeOfDay,
+      dayOfMonth,
+      expectedCron,
+    ] of TestCase) {
+      it(expectedCron, () => {
+        const actualCron = convertFormValuesToCronExpression(
+          frequency,
+          dayOfWeek,
+          timeOfDay,
+          dayOfMonth,
+        );
+        expect(actualCron).toEqual(expectedCron);
+        expect(getFrequencyFromCronExpression(actualCron)).toEqual(frequency);
+      });
+    }
+  });
+});
diff --git a/web-admin/src/features/scheduled-reports/metadata/utils.ts b/web-admin/src/features/scheduled-reports/metadata/utils.ts
index 37ae247df0e..aa3ec733d3f 100644
--- a/web-admin/src/features/scheduled-reports/metadata/utils.ts
+++ b/web-admin/src/features/scheduled-reports/metadata/utils.ts
@@ -1,4 +1,4 @@
-import type { V1ReportSpec } from "@rilldata/web-common/runtime-client";
+import { ordinal } from "@rilldata/web-common/lib/ordinal";
 import cronstrue from "cronstrue";
 import { DateTime } from "luxon";
 import { V1ExportFormat } from "../../../client";
@@ -28,25 +28,13 @@ export function formatNextRunOn(nextRunOn: string, timeZone: string): string {
     .toLocaleString(DateTime.DATETIME_FULL);
 }
 
-const suffixMap = {
-  1: "st",
-  2: "nd",
-  3: "rd",
-};
-export function formatRefreshSchedule(reportSpec: V1ReportSpec) {
-  if (!reportSpec.refreshSchedule?.cron) return "";
-  let formattedRefreshSchedule = cronstrue.toString(
-    reportSpec.refreshSchedule.cron,
-    {
-      verbose: true,
-    },
-  );
+export function formatRefreshSchedule(cron: string) {
+  let formattedRefreshSchedule = cronstrue.toString(cron, {
+    verbose: true,
+  });
   formattedRefreshSchedule = formattedRefreshSchedule.replace(
     /on day (\d*) of the month/,
-    (_, day: number) => {
-      const suffix = suffixMap[day % 10] ?? "th";
-      return `on the ${day}${suffix} of each month`;
-    },
+    (_, day: number) => `on the ${ordinal(day)} of each month`,
   );
 
   return formattedRefreshSchedule;
diff --git a/web-common/src/features/scheduled-reports/time-utils.ts b/web-common/src/features/scheduled-reports/time-utils.ts
index 1b69815211c..7a4cbd71a21 100644
--- a/web-common/src/features/scheduled-reports/time-utils.ts
+++ b/web-common/src/features/scheduled-reports/time-utils.ts
@@ -31,6 +31,15 @@ export function getTimeIn24FormatFromDateTime(dateTime: DateTime): string {
   return dateTime.toFormat("HH:mm");
 }
 
+const weekDayMap: Record<string, number> = {
+  Sunday: 0,
+  Monday: 1,
+  Tuesday: 2,
+  Wednesday: 3,
+  Thursday: 4,
+  Friday: 5,
+  Saturday: 6,
+};
 export function convertFormValuesToCronExpression(
   frequency: ReportFrequency,
   dayOfWeek: string,
@@ -48,15 +57,6 @@ export function convertFormValuesToCronExpression(
       cronExpr += "* * 1-5";
       break;
     case ReportFrequency.Weekly: {
-      const weekDayMap: Record<string, number> = {
-        Sunday: 0,
-        Monday: 1,
-        Tuesday: 2,
-        Wednesday: 3,
-        Thursday: 4,
-        Friday: 5,
-        Saturday: 6,
-      };
       cronExpr += `* * ${weekDayMap[dayOfWeek]}`;
       break;
     }
diff --git a/web-common/src/lib/ordinal.spec.ts b/web-common/src/lib/ordinal.spec.ts
new file mode 100644
index 00000000000..a132e43ac15
--- /dev/null
+++ b/web-common/src/lib/ordinal.spec.ts
@@ -0,0 +1,34 @@
+import { ordinal } from "@rilldata/web-common/lib/ordinal";
+import { describe, it, expect } from "vitest";
+
+describe("ordinal", () => {
+  const TestCases: [number, string][] = [
+    [0, "0th"],
+    [1, "1st"],
+    [2, "2nd"],
+    [3, "3rd"],
+    [4, "4th"],
+    [10, "10th"],
+    [11, "11th"],
+    [12, "12th"],
+    [13, "13th"],
+    [20, "20th"],
+    [21, "21st"],
+    [22, "22nd"],
+    [23, "23rd"],
+    [110, "110th"],
+    [111, "111th"],
+    [112, "112th"],
+    [113, "113th"],
+    [120, "120th"],
+    [121, "121st"],
+    [122, "122nd"],
+    [123, "123rd"],
+  ];
+
+  for (const [num, expected] of TestCases) {
+    it(`ordinal(${num})=${expected}`, () => {
+      expect(ordinal(num)).toEqual(expected);
+    });
+  }
+});
diff --git a/web-common/src/lib/ordinal.ts b/web-common/src/lib/ordinal.ts
new file mode 100644
index 00000000000..0a401d84066
--- /dev/null
+++ b/web-common/src/lib/ordinal.ts
@@ -0,0 +1,14 @@
+function indicator(num: number): string {
+  num = Math.abs(num);
+  const cent = num % 100;
+  if (cent >= 10 && cent <= 20) return "th";
+  const dec = num % 10;
+  if (dec === 1) return "st";
+  if (dec === 2) return "nd";
+  if (dec === 3) return "rd";
+  return "th";
+}
+
+export function ordinal(num: number): string {
+  return `${num}${indicator(num)}`;
+}