Add GroupAccumulatorsPanel to GroupFormPage for enhanced group management

Author: tenkus47

src/components/routes/groups/GroupFormPage.tsx

@@ -34,6 +34,7 @@ import {
 import GroupFormAssociationsPanel from "./components/GroupFormAssociationsPanel";
 import GroupImageField from "./components/GroupImageField";
 import { GroupPageShell } from "./components/GroupPageShell";
+import GroupAccumulatorsPanel from "./components/GroupAccumulatorsPanel";
 import GroupMembersPanel from "./components/GroupMembersPanel";
 import { useUserInfo } from "@/hooks/useUserInfo";
 import {
@@ -620,7 +621,8 @@ const GroupFormPage = () => {
       </div>
 
       {!isNew && groupData && (
-        <div className="border-t border-dashed border-gray-300 dark:border-input p-4 sm:p-8 pb-12">
+        <div className="border-t border-dashed border-gray-300 dark:border-input p-4 sm:p-8 pb-12 space-y-10">
+          <GroupAccumulatorsPanel groupId={groupData.id} groupRole={myRole} />
           <GroupMembersPanel
             groupId={groupData.id}
             members={groupData.members ?? []}

src/components/routes/groups/api/accumulatorPresetSearchApi.ts

@@ -0,0 +1,70 @@
+import axiosInstance from "@/config/axios-config";
+import type { FkOption } from "../components/FkMultiSearchSelector";
+
+interface PresetMantraDTO {
+  id: string;
+  mantra: string;
+  title?: string | null;
+  pronunciation?: string | null;
+}
+
+interface PublicAccumulatorDTO {
+  id: string;
+  target_count?: number | null;
+  mantra?: PresetMantraDTO | null;
+  metadata?: { language: string; name: string }[];
+}
+
+interface PublicAccumulatorsResponse {
+  accumulators: PublicAccumulatorDTO[];
+  total: number;
+  skip: number;
+  limit: number;
+}
+
+function presetLabel(preset: PublicAccumulatorDTO): string {
+  const mantraTitle = preset.mantra?.title?.trim();
+  if (mantraTitle) return mantraTitle;
+  const metaName = preset.metadata?.[0]?.name?.trim();
+  if (metaName) return metaName;
+  const mantraText = preset.mantra?.mantra?.trim();
+  if (mantraText) {
+    return mantraText.length > 60 ? `${mantraText.slice(0, 57)}…` : mantraText;
+  }
+  return "Untitled preset";
+}
+
+export async function searchAccumulatorPresets(params: {
+  search?: string;
+  skip?: number;
+  limit?: number;
+}): Promise<{
+  items: FkOption[];
+  skip: number;
+  limit: number;
+  total: number;
+}> {
+  const skip = params.skip ?? 0;
+  const limit = params.limit ?? 20;
+  const { data } = await axiosInstance.get<PublicAccumulatorsResponse>(
+    `/api/v1/accumulators/presets`,
+    {
+      params: {
+        skip,
+        limit,
+        ...(params.search?.trim() && { search: params.search.trim() }),
+      },
+    },
+  );
+
+  return {
+    items: data.accumulators.map((preset) => ({
+      id: preset.id,
+      title: presetLabel(preset),
+      image_url: undefined,
+    })),
+    skip: data.skip,
+    limit: data.limit,
+    total: data.total,
+  };
+}

src/components/routes/groups/api/groupAccumulatorsApi.ts

@@ -0,0 +1,103 @@
+import axiosInstance from "@/config/axios-config";
+
+export interface GroupAccumulatorImage {
+  thumbnail: string;
+  medium: string;
+  original: string;
+}
+
+export interface GroupAccumulatorDTO {
+  id: string;
+  accumulator_id: string | null;
+  group_id: string;
+  title: string | null;
+  image: GroupAccumulatorImage | null;
+  image_key: string | null;
+  target_count: number | null;
+  start_date: string | null;
+  end_date: string | null;
+  created_at: string;
+  updated_at: string | null;
+}
+
+export interface GroupAccumulatorsResponse {
+  accumulators: GroupAccumulatorDTO[];
+  total: number;
+  skip: number;
+  limit: number;
+}
+
+export interface CreateGroupAccumulatorRequest {
+  accumulator_id?: string | null;
+  title?: string | null;
+  image_key?: string | null;
+  target_count?: number | null;
+  start_date?: string | null;
+  end_date?: string | null;
+}
+
+export type UpdateGroupAccumulatorRequest = CreateGroupAccumulatorRequest;
+
+const getAuthHeaders = () => ({
+  Authorization: `Bearer ${sessionStorage.getItem("accessToken")}`,
+});
+
+export function resolveGroupAccumulatorImageUrl(
+  accumulator: Pick<GroupAccumulatorDTO, "image">,
+): string | null {
+  const image = accumulator.image;
+  if (!image) return null;
+  return image.medium || image.thumbnail || image.original || null;
+}
+
+export const fetchGroupAccumulators = async (
+  groupId: string,
+  params?: { skip?: number; limit?: number },
+): Promise<GroupAccumulatorsResponse> => {
+  const { data } = await axiosInstance.get<GroupAccumulatorsResponse>(
+    `/api/v1/cms/groups/${groupId}/accumulators`,
+    {
+      headers: getAuthHeaders(),
+      params: {
+        skip: params?.skip ?? 0,
+        limit: params?.limit ?? 100,
+      },
+    },
+  );
+  return data;
+};
+
+export const createGroupAccumulator = async (
+  groupId: string,
+  payload: CreateGroupAccumulatorRequest,
+): Promise<GroupAccumulatorDTO> => {
+  const { data } = await axiosInstance.post<GroupAccumulatorDTO>(
+    `/api/v1/cms/groups/${groupId}/accumulators`,
+    payload,
+    { headers: getAuthHeaders() },
+  );
+  return data;
+};
+
+export const updateGroupAccumulator = async (
+  groupId: string,
+  groupAccumulatorId: string,
+  payload: UpdateGroupAccumulatorRequest,
+): Promise<GroupAccumulatorDTO> => {
+  const { data } = await axiosInstance.put<GroupAccumulatorDTO>(
+    `/api/v1/cms/groups/${groupId}/accumulators/${groupAccumulatorId}`,
+    payload,
+    { headers: getAuthHeaders() },
+  );
+  return data;
+};
+
+export const deleteGroupAccumulator = async (
+  groupId: string,
+  groupAccumulatorId: string,
+): Promise<void> => {
+  await axiosInstance.delete(
+    `/api/v1/cms/groups/${groupId}/accumulators/${groupAccumulatorId}`,
+    { headers: getAuthHeaders() },
+  );
+};