Implement start date handling in CreatePlan component and enhance series details with start date settings. Update tests to cover new functionality.

Author: tenkus47

src/components/routes/create-plan/CreatePlan.tsx

@@ -161,6 +161,14 @@ const Createplan = () => {
     return seriesOptions.some((s) => s.id === planNewFromSeries.seriesId);
   }, [planNewFromSeries, isSeriesLoading, isSeriesError, seriesOptions]);
 
+  const lockStartDateFromSeries = useMemo(
+    () =>
+      isCreateMode &&
+      planNewFromSeries != null &&
+      planNewFromSeries.start_date !== undefined,
+    [isCreateMode, planNewFromSeries],
+  );
+
   const pageHeading = useMemo(() => {
     if (!isCreateMode) return "Plan Edit";
     if (!planNewFromSeries) return "Plan Details";
@@ -213,8 +221,20 @@ const Createplan = () => {
     isSeriesLoading,
     isSeriesError,
     seriesOptions,
+    form,
   ]);
 
+  useEffect(() => {
+    if (!isCreateMode || !planNewFromSeries) return;
+    if (planNewFromSeries.start_date === undefined) return;
+
+    const mode = planNewFromSeries.start_date ? "specific" : "enroll";
+    setStartDateMode(mode);
+    form.setValue("start_date", planNewFromSeries.start_date, {
+      shouldDirty: false,
+    });
+  }, [isCreateMode, planNewFromSeries, form]);
+
   useEffect(() => {
     if (planId && planData) {
       form.reset({
@@ -590,6 +610,7 @@ const Createplan = () => {
                     <Pecha.RadioGroup
                       value={startDateMode}
                       onValueChange={(v) => {
+                        if (lockStartDateFromSeries) return;
                         const mode = v as "enroll" | "specific";
                         setStartDateMode(mode);
                         if (mode === "enroll") {
@@ -604,6 +625,7 @@ const Createplan = () => {
                         <Pecha.RadioGroupItem
                           value="enroll"
                           id="start-date-enroll"
+                          disabled={lockStartDateFromSeries}
                         />
                         <label
                           htmlFor="start-date-enroll"
@@ -616,6 +638,7 @@ const Createplan = () => {
                         <Pecha.RadioGroupItem
                           value="specific"
                           id="start-date-specific"
+                          disabled={lockStartDateFromSeries}
                         />
                         <label
                           htmlFor="start-date-specific"
@@ -633,7 +656,10 @@ const Createplan = () => {
                         <Pecha.Button
                           type="button"
                           variant="outline"
-                          disabled={startDateMode !== "specific"}
+                          disabled={
+                            lockStartDateFromSeries ||
+                            startDateMode !== "specific"
+                          }
                           className="h-12 w-full justify-start gap-2 px-3 font-normal rounded-md"
                         >
                           <IoCalendarClearOutline className="h-4 w-4 text-muted-foreground" />

src/components/routes/create-plan/PlanNewLegacyRedirect.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
-import { getSeries } from "@/components/routes/create-series/api/seriesApi";
+import { getSeries, resolveSeriesGroupId } from "@/components/routes/create-series/api/seriesApi";
 import { parsePlanNewFromSeriesState } from "./planNewFromSeriesState";
 import { ROUTES } from "@/routes/paths";
 
@@ -20,8 +20,9 @@ const PlanNewLegacyRedirect = () => {
     void getSeries(fromSeries.seriesId)
       .then((series) => {
         if (cancelled) return;
-        if (series.group_id) {
-          navigate(ROUTES.groupPlanNew(series.group_id), {
+        const groupId = resolveSeriesGroupId(series);
+        if (groupId) {
+          navigate(ROUTES.groupPlanNew(groupId), {
             replace: true,
             state: location.state,
           });

src/components/routes/create-plan/planNewFromSeriesState.test.ts

@@ -14,6 +14,31 @@ describe("parsePlanNewFromSeriesState", () => {
     ).toEqual({ seriesId: "series-1", language: "BO" });
   });
 
+  it("includes inherited start_date when provided", () => {
+    expect(
+      parsePlanNewFromSeriesState({
+        seriesId: "series-1",
+        language: "BO",
+        start_date: "2026-04-30T00:00:00Z",
+      }),
+    ).toEqual({
+      seriesId: "series-1",
+      language: "BO",
+      start_date: "2026-04-30T00:00:00Z",
+    });
+    expect(
+      parsePlanNewFromSeriesState({
+        seriesId: "series-1",
+        language: "BO",
+        start_date: null,
+      }),
+    ).toEqual({
+      seriesId: "series-1",
+      language: "BO",
+      start_date: null,
+    });
+  });
+
   it("rejects invalid language codes", () => {
     expect(
       parsePlanNewFromSeriesState({ seriesId: "series-1", language: "FR" }),

src/components/routes/create-plan/planNewFromSeriesState.ts

@@ -4,6 +4,8 @@ import type { LanguageCode } from "@/schema/SeriesSchema";
 export type PlanNewFromSeriesState = {
   seriesId: string;
   language: LanguageCode;
+  /** Inherited from the first plan in the series when other plans already exist. */
+  start_date?: string | null;
 };
 
 const VALID_LANGUAGE_CODES = new Set(
@@ -24,8 +26,17 @@ export function parsePlanNewFromSeriesState(
     return null;
   }
 
+  const rawStartDate = (state as Record<string, unknown>).start_date;
+  const start_date =
+    rawStartDate === null
+      ? null
+      : typeof rawStartDate === "string"
+        ? rawStartDate
+        : undefined;
+
   return {
     seriesId: seriesId.trim(),
     language: language as LanguageCode,
+    ...(start_date !== undefined ? { start_date } : {}),
   };
 }

src/components/routes/create-series/api/seriesApi.ts

@@ -27,6 +27,7 @@ export type SeriesPlanDTO = {
   title: string;
   description?: string | null;
   language: string;
+  group_id?: string | null;
   image_url?: string | null;
   plan_image_url?: string | null;
   image_key?: string | null;
@@ -45,6 +46,7 @@ export type SeriesPlanDTO = {
   enrolled_count?: number | null;
   subscription_count?: number | null;
   updated_at?: string | null;
+  start_date?: string | null;
 };
 
 export type SeriesMetadataDTO = {
@@ -65,17 +67,31 @@ export type SeriesDetailDTO = {
   image_key?: string | null;
   author_id?: string;
   group_id?: string | null;
+  group?: { id?: string } | null;
   featured: boolean;
   status: string;
   plans: SeriesPlanDTO[];
   total_days?: number;
 };
 
+export function resolveSeriesGroupId(
+  series: Pick<SeriesDetailDTO, "group_id" | "group" | "plans"> | null | undefined,
+): string | undefined {
+  if (!series) return undefined;
+  if (series.group_id?.trim()) return series.group_id.trim();
+  if (series.group?.id?.trim()) return series.group.id.trim();
+  const fromPlan = series.plans?.find((p) => p.group_id?.trim())?.group_id;
+  return fromPlan?.trim() || undefined;
+}
+
 export const getSeries = async (seriesId: string): Promise<SeriesDetailDTO> => {
   const { data } = await axiosInstance.get<SeriesDetailDTO>(
     `/api/v1/cms/series/${seriesId}`,
   );
-  return data;
+  return {
+    ...data,
+    group_id: resolveSeriesGroupId(data) ?? null,
+  };
 };
 
 export const postSeries = async (body: SeriesPayload) => {

src/components/routes/create-series/hooks/useCreateSeriesController.ts

@@ -12,6 +12,7 @@ import { useSaveSeries } from "@/components/routes/create-series/hooks/useSaveSe
 import {
   getSeries,
   mapSeriesDetailToFormData,
+  resolveSeriesGroupId,
 } from "@/components/routes/create-series/api/seriesApi";
 import { resolveDashboardItemImageUrl } from "@/components/routes/dashboard/dashboardTable";
 
@@ -40,7 +41,7 @@ export const useCreateSeriesController = () => {
   });
   const seriesData = seriesQuery.data;
 
-  const seriesGroupId = groupId ?? seriesData?.group_id ?? undefined;
+  const seriesGroupId = groupId ?? resolveSeriesGroupId(seriesData);
   const seriesStatus = isNew ? "DRAFT" : (seriesData?.status ?? "DRAFT");
   const {
     userInfo,

src/components/routes/series-details/CloneLanguagePlansPanel.tsx

@@ -11,6 +11,7 @@ type CloneLanguagePlansPanelProps = {
   seriesId: string;
   targetLanguage: LanguageCode;
   sourceLanguages: LanguageCode[];
+  embedded?: boolean;
 };
 
 function languageLabel(code: LanguageCode): string {
@@ -21,7 +22,8 @@ export function CloneLanguagePlansPanel({
   seriesId,
   targetLanguage,
   sourceLanguages,
-}: CloneLanguagePlansPanelProps) {
+  embedded = false,
+}: Readonly<CloneLanguagePlansPanelProps>) {
   const queryClient = useQueryClient();
   const [sourceLanguage, setSourceLanguage] = useState<LanguageCode>(
     sourceLanguages[0] ?? "EN",
@@ -59,8 +61,8 @@ export function CloneLanguagePlansPanel({
 
   if (sourceLanguages.length === 0) return null;
 
-  return (
-    <div className="mb-4 flex flex-col items-center justify-center gap-4 rounded-xl border border-dashed border-gray-300 bg-white/80 px-6 py-10 dark:border-input dark:bg-[#1d1d1f]/80">
+  const content = (
+    <>
       <p className="text-center text-sm text-muted-foreground">
         No plans in {languageLabel(targetLanguage)} yet. Clone the full plan
         structure from another language.
@@ -92,6 +94,16 @@ export function CloneLanguagePlansPanel({
           {cloneMutation.isPending ? "Cloning…" : "Clone plans"}
         </Pecha.Button>
       </div>
+    </>
+  );
+
+  if (embedded) {
+    return <div className="flex w-full flex-col items-center gap-4">{content}</div>;
+  }
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-4 rounded-xl border border-dashed border-gray-300 bg-white/80 px-6 py-10 dark:border-input dark:bg-[#1d1d1f]/80">
+      {content}
     </div>
   );
 }

src/components/routes/series-details/SeriesDetailsPage.test.tsx

@@ -15,7 +15,7 @@ vi.mock(
 
 const seriesFixture = {
   id: "series-1",
-  group_id: "group-1",
+  group: { id: "group-1" },
   metadata: [{ id: "m1", title: "Abhidhamma in a year", language: "EN" }],
   featured: false,
   status: "DRAFT",
@@ -35,6 +35,8 @@ const seriesFixture = {
       status: "PUBLISHED",
       total_days: 5,
       featured: true,
+      display_order: 0,
+      start_date: "2026-04-30T00:00:00Z",
     },
   ],
 };
@@ -110,7 +112,11 @@ describe("SeriesDetailsPage", () => {
 
     await waitFor(() => {
       expect(screen.getByTestId("plan-new-location-state")).toHaveTextContent(
-        JSON.stringify({ seriesId: "series-1", language: "ZH" }),
+        JSON.stringify({
+          seriesId: "series-1",
+          language: "ZH",
+          start_date: "2026-04-30T00:00:00Z",
+        }),
       );
       expect(screen.getByTestId("plan-new-pathname")).toHaveTextContent(
         "/groups/group-1/plan/new",