editting templates

package.json

@@ -40,6 +40,7 @@
     "json-2-csv": "^5.5.7",
     "lucide-react": "^0.428.0",
     "mailgun.js": "^10.3.0",
+    "marked": "^15.0.6",
     "next": "14.2.10",
     "next-themes": "^0.3.0",
     "path": "^0.12.7",

src/app/globals.css

@@ -226,3 +226,25 @@ tbody {
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
+
+/* For Chrome, Safari, and newer versions of Edge */
+.scrollbar {
+  scrollbar-width: thin; /* For Firefox */
+  @apply overflow-x-auto;
+}
+
+.scrollbar::-webkit-scrollbar {
+  @apply h-1.5; /* height for horizontal scrollbar */
+}
+
+.scrollbar::-webkit-scrollbar-track {
+  @apply bg-background-800 rounded-full;
+}
+
+.scrollbar::-webkit-scrollbar-thumb {
+  @apply bg-background-600 rounded-full;
+}
+
+.scrollbar::-webkit-scrollbar-thumb:hover {
+  @apply bg-background-500;
+}

src/app/portal/admin/actions.ts

@@ -1,10 +1,11 @@
 "use server";
 import { db } from "@/db";
 import { FormStep } from "@/lib/types/questions";
-import { FormFields } from "@/app/portal/admin/forms/[id]/submissions/columns";
+import { FormFields } from "@/components/forms/applications/columns";
 import { sendEmail } from "@/lib/utils/forms/email";
 import { MarkdownTemplate } from "@/components/forms/emailTemplates/markdownTemplate";
 import { render } from "@react-email/components";
+import { object } from "zod";
 
 export async function getForms() {
   return db.forms.findMany();
@@ -99,6 +100,7 @@ export async function getAllFormDetails(
   formId: bigint,
 ): Promise<{ rawForm: any; formFields: FormFields; submissions: any[] }> {
   try {
+    console.log("retrieving form details");
     const form = await db.forms.findFirst({
       where: { id: formId },
     });

src/app/portal/admin/forms/[id]/layout.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Suspense } from "react";
 import FormTabView, { Tab } from "@/components/layouts/formTabView";
 import { getAdminMembers, getAllFormDetails } from "@/app/portal/admin/actions";
 
@@ -21,11 +21,15 @@ export default async function Layout({
       label: "Support",
       route: `/portal/admin/forms/${params.id}/support`,
     },
+    {
+      label: "Settings",
+      route: `/portal/admin/forms/${params.id}/settings`,
+    },
   ];
 
   return (
     <FormTabView tabs={tabs} form={formDetails} members={members}>
-      {children}
+      <Suspense fallback={<div>Loading...</div>}>{children}</Suspense>
     </FormTabView>
   );
 }

src/app/portal/admin/forms/[id]/settings/actions.ts

@@ -0,0 +1,55 @@
+"use server";
+import { db } from "@/db";
+
+type EmailTemplate = {
+  title: string;
+  content: string;
+};
+
+export async function updateOrCreateEmailTemplate(
+  formId: number,
+  status: string,
+  template: EmailTemplate,
+) {
+  try {
+    // First get the current form to access existing config
+    const form = await db.forms.findFirst({
+      where: { id: BigInt(formId) },
+    });
+
+    if (!form) {
+      throw new Error(`Form with id ${formId} not found`);
+    }
+
+    // Get existing config or initialize if doesn't exist
+    const currentConfig = (form.config as Record<string, any>) || {};
+
+    // Safely create nested structure if it doesn't exist
+    const updatedConfig = {
+      ...currentConfig,
+      application: {
+        ...currentConfig.application,
+        emails: {
+          ...(currentConfig.application?.emails || {}),
+          status: {
+            ...(currentConfig.application?.emails?.status || {}),
+            [status]: template,
+          },
+        },
+      },
+    };
+
+    // Update only the config field
+    await db.forms.update({
+      where: { id: BigInt(formId) },
+      data: {
+        config: updatedConfig,
+      },
+    });
+
+    return { success: true };
+  } catch (error) {
+    console.error("Error updating email template:", error);
+    throw error;
+  }
+}