From a584df2de98c3e030f11d72b8fb2e01531c31841 Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Mon, 1 Jul 2024 14:44:04 +0700
Subject: [PATCH 01/23] prevent reformatting the import code with space in
 bracket

---
 .vscode/settings.json                                    | 9 ++++++---
 .../content/[documentTypeId]/[documentId]/page.tsx       | 1 +
 .../app/(protected)/content/[documentTypeId]/page.tsx    | 5 +++--
 .../{article => articlesssss}/[documentId]/page.tsx      | 0
 .../content/{article => articlesssss}/page.tsx           | 0
 .../components/DocumentType/DocumentTypeGenericList.tsx  | 2 ++
 6 files changed, 12 insertions(+), 5 deletions(-)
 rename hosting/src/app/(protected)/content/{article => articlesssss}/[documentId]/page.tsx (100%)
 rename hosting/src/app/(protected)/content/{article => articlesssss}/page.tsx (100%)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 962d1d9b..91552d06 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,7 +1,10 @@
 {
-  "editor.codeActionsOnSave": {
-    "source.organizeImports": "always"
-  },
+  // This config make my local change the import path with space in bracket eg: { foo, bar },
+  // You need to run `npm run codecheck` to reformatting the code.
+  // So I comment this stuff to prevent reformatting the import code with space in bracket
+  // "editor.codeActionsOnSave": {
+  //   "source.organizeImports": "always"
+  // },
   "javascript.preferences.quoteStyle": "single",
   "typescript.preferences.quoteStyle": "single",
   "html.format.indentInnerHtml": true,
diff --git a/hosting/src/app/(protected)/content/[documentTypeId]/[documentId]/page.tsx b/hosting/src/app/(protected)/content/[documentTypeId]/[documentId]/page.tsx
index e838aa60..a16f0fce 100644
--- a/hosting/src/app/(protected)/content/[documentTypeId]/[documentId]/page.tsx
+++ b/hosting/src/app/(protected)/content/[documentTypeId]/[documentId]/page.tsx
@@ -103,6 +103,7 @@ const DocumentDetailsPage = () => {
 
   return (
     <>
+      dynamic idsss
       <Suspense fallback={<Loader />}>
         {documentType ? <PageHeader pageName={documentType.titleSingular.translated} /> : <Loader />}
       </Suspense>
diff --git a/hosting/src/app/(protected)/content/[documentTypeId]/page.tsx b/hosting/src/app/(protected)/content/[documentTypeId]/page.tsx
index 0cb670a8..b41d4fac 100644
--- a/hosting/src/app/(protected)/content/[documentTypeId]/page.tsx
+++ b/hosting/src/app/(protected)/content/[documentTypeId]/page.tsx
@@ -5,9 +5,9 @@ import Notification from "@/components/common/Notification";
 import PageHeader from "@/components/common/PageHeader";
 import {useTanamDocumentType} from "@/hooks/useTanamDocumentTypes";
 import {useTanamDocuments} from "@/hooks/useTanamDocuments";
-import {Suspense, useEffect, useState} from "react";
-import {useParams} from "next/navigation";
 import {UserNotification} from "@/models/UserNotification";
+import {useParams} from "next/navigation";
+import {Suspense, useEffect, useState} from "react";
 
 export default function DocumentTypeDocumentsPage() {
   const {documentTypeId} = useParams<{documentTypeId: string}>() ?? {};
@@ -21,6 +21,7 @@ export default function DocumentTypeDocumentsPage() {
 
   return (
     <>
+      dynamic
       <Suspense fallback={<Loader />}>
         {documentType ? <PageHeader pageName={documentType.titlePlural.translated} /> : <Loader />}
       </Suspense>
diff --git a/hosting/src/app/(protected)/content/article/[documentId]/page.tsx b/hosting/src/app/(protected)/content/articlesssss/[documentId]/page.tsx
similarity index 100%
rename from hosting/src/app/(protected)/content/article/[documentId]/page.tsx
rename to hosting/src/app/(protected)/content/articlesssss/[documentId]/page.tsx
diff --git a/hosting/src/app/(protected)/content/article/page.tsx b/hosting/src/app/(protected)/content/articlesssss/page.tsx
similarity index 100%
rename from hosting/src/app/(protected)/content/article/page.tsx
rename to hosting/src/app/(protected)/content/articlesssss/page.tsx
diff --git a/hosting/src/components/DocumentType/DocumentTypeGenericList.tsx b/hosting/src/components/DocumentType/DocumentTypeGenericList.tsx
index 667cb3a7..dd865483 100644
--- a/hosting/src/components/DocumentType/DocumentTypeGenericList.tsx
+++ b/hosting/src/components/DocumentType/DocumentTypeGenericList.tsx
@@ -11,12 +11,14 @@ interface TableOverviewGenericProps {
 export function DocumentTypeGenericList({documents, documentType}: TableOverviewGenericProps) {
   return (
     <>
+      documents :: {JSON.stringify(documents)}
       <Table
         headers={["Title", "Created", "Status"]}
         rows={documents.map((document, key) => [
           <Link key={`${key}-${document.id}-id`} href={`/content/${document.documentType}/${document.id}`}>
             <p className="font-medium text-black dark:text-white">{document.data[documentType.titleField] as string}</p>
           </Link>,
+
           <p key={`${key}-${document.id}-date`} className="text-black dark:text-white">
             {document.createdAt.toDate().toUTCString()}
           </p>,

From 2dde76f0be633da52b8ec8b97451d34530358cc8 Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Mon, 1 Jul 2024 14:44:31 +0700
Subject: [PATCH 02/23] remove unused

---
 .../articlesssss/[documentId]/page.tsx        | 49 -------------------
 .../(protected)/content/articlesssss/page.tsx | 34 -------------
 2 files changed, 83 deletions(-)
 delete mode 100644 hosting/src/app/(protected)/content/articlesssss/[documentId]/page.tsx
 delete mode 100644 hosting/src/app/(protected)/content/articlesssss/page.tsx

diff --git a/hosting/src/app/(protected)/content/articlesssss/[documentId]/page.tsx b/hosting/src/app/(protected)/content/articlesssss/[documentId]/page.tsx
deleted file mode 100644
index a7fc1533..00000000
--- a/hosting/src/app/(protected)/content/articlesssss/[documentId]/page.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-"use client";
-import TiptapEditor from "@/components/Tiptap/TiptapEditor";
-import Loader from "@/components/common/Loader";
-import Notification from "@/components/common/Notification";
-import PageHeader from "@/components/common/PageHeader";
-import {useCrudTanamDocument, useTanamDocument} from "@/hooks/useTanamDocuments";
-import {UserNotification} from "@/models/UserNotification";
-import {useParams, useRouter} from "next/navigation";
-import {Suspense, useEffect, useState} from "react";
-
-export default function DocumentDetailsPage() {
-  const router = useRouter();
-  const {documentId} = useParams<{documentId: string}>() ?? {};
-  const {data: document, error: documentError} = useTanamDocument(documentId);
-  const {update, error: writeError} = useCrudTanamDocument(documentId);
-  const [readonlyMode] = useState<boolean>(false);
-  const [notification, setNotification] = useState<UserNotification | null>(null);
-  if (!!document?.documentType && document?.documentType !== "article") {
-    router.push(`/content/${document?.documentType}/${document?.id}`);
-    return <Loader />;
-  }
-
-  useEffect(() => {
-    setNotification(documentError || writeError);
-  }, [documentError, writeError]);
-
-  async function onDocumentContentChange(content: string) {
-    console.log("[onDocumentContentChange]", content);
-    await update({data: {content}});
-  }
-
-  return (
-    <>
-      <Suspense fallback={<Loader />}>
-        {document ? <PageHeader pageName={document.data.title as string} /> : <Loader />}
-      </Suspense>
-      {notification && (
-        <Notification type={notification.type} title={notification.title} message={notification.message} />
-      )}
-
-      <TiptapEditor
-        key={"article-content"}
-        value={document?.data.content as string}
-        disabled={readonlyMode}
-        onChange={onDocumentContentChange}
-      />
-    </>
-  );
-}
diff --git a/hosting/src/app/(protected)/content/articlesssss/page.tsx b/hosting/src/app/(protected)/content/articlesssss/page.tsx
deleted file mode 100644
index b850db2a..00000000
--- a/hosting/src/app/(protected)/content/articlesssss/page.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-"use client";
-import {DocumentTypeGenericList} from "@/components/DocumentType/DocumentTypeGenericList";
-import Loader from "@/components/common/Loader";
-import Notification from "@/components/common/Notification";
-import PageHeader from "@/components/common/PageHeader";
-import {useTanamDocumentType} from "@/hooks/useTanamDocumentTypes";
-import {useTanamDocuments} from "@/hooks/useTanamDocuments";
-import {UserNotification} from "@/models/UserNotification";
-import {Suspense, useEffect, useState} from "react";
-
-export default function DocumentTypeDocumentsPage() {
-  const {data: documentType} = useTanamDocumentType("article");
-  const {data: documents, error: docsError} = useTanamDocuments("article");
-  const [notification, setNotification] = useState<UserNotification | null>(null);
-
-  useEffect(() => {
-    setNotification(docsError);
-  }, [docsError]);
-
-  return (
-    <>
-      <Suspense fallback={<Loader />}>
-        {documentType ? <PageHeader pageName={documentType.titlePlural.translated} /> : <Loader />}
-      </Suspense>
-      {notification && (
-        <Notification type={notification.type} title={notification.title} message={notification.message} />
-      )}
-
-      <Suspense fallback={<Loader />}>
-        {documentType ? <DocumentTypeGenericList documents={documents} documentType={documentType} /> : <Loader />}
-      </Suspense>
-    </>
-  );
-}

From 00525744851b4b4eb8fe357ce8b68c89a363c318 Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Mon, 1 Jul 2024 15:17:06 +0700
Subject: [PATCH 03/23] error handler when user type wrong documenttypeid

---
 .../content/[documentTypeId]/page.tsx         | 25 +++++++++++--------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/hosting/src/app/(protected)/content/[documentTypeId]/page.tsx b/hosting/src/app/(protected)/content/[documentTypeId]/page.tsx
index b41d4fac..9c4b3cbb 100644
--- a/hosting/src/app/(protected)/content/[documentTypeId]/page.tsx
+++ b/hosting/src/app/(protected)/content/[documentTypeId]/page.tsx
@@ -5,19 +5,26 @@ import Notification from "@/components/common/Notification";
 import PageHeader from "@/components/common/PageHeader";
 import {useTanamDocumentType} from "@/hooks/useTanamDocumentTypes";
 import {useTanamDocuments} from "@/hooks/useTanamDocuments";
-import {UserNotification} from "@/models/UserNotification";
 import {useParams} from "next/navigation";
-import {Suspense, useEffect, useState} from "react";
+import {Suspense} from "react";
 
 export default function DocumentTypeDocumentsPage() {
   const {documentTypeId} = useParams<{documentTypeId: string}>() ?? {};
   const {data: documents, error: docsError} = useTanamDocuments(documentTypeId);
-  const {data: documentType} = useTanamDocumentType(documentTypeId);
-  const [notification, setNotification] = useState<UserNotification | null>(null);
+  const {data: documentType, error: typesError} = useTanamDocumentType(documentTypeId);
 
-  useEffect(() => {
-    setNotification(docsError);
-  }, [docsError]);
+  if (docsError || typesError) {
+    return (
+      <>
+        <PageHeader pageName={documentType?.titleSingular.translated ?? "Document details"} />
+        <Notification
+          type="error"
+          title="Error loading document"
+          message={docsError?.message || typesError?.message || "Unknown error"}
+        />
+      </>
+    );
+  }
 
   return (
     <>
@@ -25,10 +32,6 @@ export default function DocumentTypeDocumentsPage() {
       <Suspense fallback={<Loader />}>
         {documentType ? <PageHeader pageName={documentType.titlePlural.translated} /> : <Loader />}
       </Suspense>
-      {notification && (
-        <Notification type={notification.type} title={notification.title} message={notification.message} />
-      )}
-      {docsError && <Notification type="error" title="Error fetching documents" message={docsError.message} />}
       <Suspense fallback={<Loader />}>
         {documentType ? <DocumentTypeGenericList documents={documents} documentType={documentType} /> : <Loader />}
       </Suspense>

From 4082c396eefb530da5a20dac66804800ebb23f28 Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Mon, 1 Jul 2024 15:37:08 +0700
Subject: [PATCH 04/23] add errorpage component handler

---
 .../[documentTypeId]/[documentId]/page.tsx    | 13 +++++++++++
 .../content/[documentTypeId]/page.tsx         | 12 +++++-----
 hosting/src/components/Error/ErrorPage.tsx    | 22 +++++++++++++++++++
 3 files changed, 41 insertions(+), 6 deletions(-)
 create mode 100644 hosting/src/components/Error/ErrorPage.tsx

diff --git a/hosting/src/app/(protected)/content/[documentTypeId]/[documentId]/page.tsx b/hosting/src/app/(protected)/content/[documentTypeId]/[documentId]/page.tsx
index a16f0fce..3c5233f3 100644
--- a/hosting/src/app/(protected)/content/[documentTypeId]/[documentId]/page.tsx
+++ b/hosting/src/app/(protected)/content/[documentTypeId]/[documentId]/page.tsx
@@ -101,6 +101,19 @@ const DocumentDetailsPage = () => {
     }
   };
 
+  if (documentError || typeError || fieldsError) {
+    return (
+      <>
+        <PageHeader pageName={documentType?.titleSingular.translated ?? "Document details"} />
+        <Notification
+          type="error"
+          title="Error loading document"
+          message={documentError?.message || typeError?.message || "Unknown error"}
+        />
+      </>
+    );
+  }
+
   return (
     <>
       dynamic idsss
diff --git a/hosting/src/app/(protected)/content/[documentTypeId]/page.tsx b/hosting/src/app/(protected)/content/[documentTypeId]/page.tsx
index 9c4b3cbb..8e141f45 100644
--- a/hosting/src/app/(protected)/content/[documentTypeId]/page.tsx
+++ b/hosting/src/app/(protected)/content/[documentTypeId]/page.tsx
@@ -1,8 +1,8 @@
 "use client";
 import {DocumentTypeGenericList} from "@/components/DocumentType/DocumentTypeGenericList";
 import Loader from "@/components/common/Loader";
-import Notification from "@/components/common/Notification";
 import PageHeader from "@/components/common/PageHeader";
+import {ErrorPage} from '@/components/Error/ErrorPage';
 import {useTanamDocumentType} from "@/hooks/useTanamDocumentTypes";
 import {useTanamDocuments} from "@/hooks/useTanamDocuments";
 import {useParams} from "next/navigation";
@@ -16,11 +16,11 @@ export default function DocumentTypeDocumentsPage() {
   if (docsError || typesError) {
     return (
       <>
-        <PageHeader pageName={documentType?.titleSingular.translated ?? "Document details"} />
-        <Notification
-          type="error"
-          title="Error loading document"
-          message={docsError?.message || typesError?.message || "Unknown error"}
+        <ErrorPage 
+          pageName={documentType?.titleSingular.translated ?? "Document details"}
+          notificationType="error"
+          notificationTitle="Error loading document"
+          notificationMessage={docsError?.message || typesError?.message || "Unknown error"}
         />
       </>
     );
diff --git a/hosting/src/components/Error/ErrorPage.tsx b/hosting/src/components/Error/ErrorPage.tsx
new file mode 100644
index 00000000..1a257bb7
--- /dev/null
+++ b/hosting/src/components/Error/ErrorPage.tsx
@@ -0,0 +1,22 @@
+import Notification from "@/components/common/Notification";
+import PageHeader from "@/components/common/PageHeader";
+
+interface ErrorPageProps {
+  pageName: string;
+  notificationType: "warning" | "success" | "error";
+  notificationTitle: string;
+  notificationMessage: string;
+}
+
+export function ErrorPage({pageName, notificationType, notificationTitle, notificationMessage}: ErrorPageProps) {
+  return (
+    <>
+      <PageHeader pageName={pageName ?? "Error"} />
+      <Notification
+        type={notificationType ?? "error"}
+        title={notificationTitle ?? "Error"}
+        message={notificationMessage ?? "Unknown error"}
+      />
+    </>
+  );
+};
\ No newline at end of file

From 4eb49e8ae45ee52169e573ff28a1756917c20926 Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Mon, 1 Jul 2024 15:40:06 +0700
Subject: [PATCH 05/23] implement errorpage componnent in document details

---
 .../[documentTypeId]/[documentId]/page.tsx    | 23 ++++++-------------
 1 file changed, 7 insertions(+), 16 deletions(-)

diff --git a/hosting/src/app/(protected)/content/[documentTypeId]/[documentId]/page.tsx b/hosting/src/app/(protected)/content/[documentTypeId]/[documentId]/page.tsx
index 3c5233f3..3e670eef 100644
--- a/hosting/src/app/(protected)/content/[documentTypeId]/[documentId]/page.tsx
+++ b/hosting/src/app/(protected)/content/[documentTypeId]/[documentId]/page.tsx
@@ -12,16 +12,15 @@ import {
   TextArea,
 } from "@/components/Form";
 import Loader from "@/components/common/Loader";
-import Notification from "@/components/common/Notification";
 import PageHeader from "@/components/common/PageHeader";
+import {ErrorPage} from '@/components/Error/ErrorPage';
 import {useTanamDocumentFields} from "@/hooks/useTanamDocumentFields";
 import {useTanamDocumentType} from "@/hooks/useTanamDocumentTypes";
 import {useTanamDocument} from "@/hooks/useTanamDocuments";
-import {UserNotification} from "@/models/UserNotification";
 import {TanamDocumentField} from "@functions/models/TanamDocumentField";
 import {Timestamp} from "firebase/firestore";
 import {useParams, useRouter} from "next/navigation";
-import {Suspense, useEffect, useState} from "react";
+import {Suspense, useState} from "react";
 
 const DocumentDetailsPage = () => {
   const router = useRouter();
@@ -31,17 +30,12 @@ const DocumentDetailsPage = () => {
   const {data: documentFields, error: fieldsError} = useTanamDocumentFields(documentTypeId);
 
   const [readonlyMode] = useState<boolean>(true);
-  const [notification, setNotification] = useState<UserNotification | null>(null);
 
   if (!!document?.documentType && document?.documentType !== documentTypeId) {
     router.push(`/content/${document?.documentType}/${document?.id}`);
     return <Loader />;
   }
 
-  useEffect(() => {
-    setNotification(documentError ?? typeError ?? fieldsError);
-  }, [documentError]);
-
   const renderFormElement = (field: TanamDocumentField, value: any) => {
     const formgroupKey = `formgroup-${field.id}`;
     const inputKey = `input-${field.id}`;
@@ -104,11 +98,11 @@ const DocumentDetailsPage = () => {
   if (documentError || typeError || fieldsError) {
     return (
       <>
-        <PageHeader pageName={documentType?.titleSingular.translated ?? "Document details"} />
-        <Notification
-          type="error"
-          title="Error loading document"
-          message={documentError?.message || typeError?.message || "Unknown error"}
+        <ErrorPage 
+          pageName={documentType?.titleSingular.translated ?? "Document details"}
+          notificationType="error"
+          notificationTitle="Error loading document"
+          notificationMessage={documentError?.message || typeError?.message || fieldsError?.message || "Unknown error"}
         />
       </>
     );
@@ -120,9 +114,6 @@ const DocumentDetailsPage = () => {
       <Suspense fallback={<Loader />}>
         {documentType ? <PageHeader pageName={documentType.titleSingular.translated} /> : <Loader />}
       </Suspense>
-      {notification && (
-        <Notification type={notification.type} title={notification.title} message={notification.message} />
-      )}
       {documentType && document && (
         <div className="grid grid-cols-1 gap-9">
           <ContentCard key={document.id} title={document.data[documentType.titleField] as string}>

From 3ab6dfed06176e7fc8d41757a3444cb598131b9a Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Mon, 1 Jul 2024 16:22:33 +0700
Subject: [PATCH 06/23] add create document page

---
 .../[documentTypeId]/[documentId]/page.tsx    |   1 -
 .../content/[documentTypeId]/create/page.tsx  | 123 ++++++++++++++++++
 .../content/[documentTypeId]/page.tsx         |  15 ++-
 .../DocumentType/DocumentTypeGenericList.tsx  |   1 -
 hosting/src/hooks/useTanamDocumentTypes.tsx   |   2 +
 5 files changed, 137 insertions(+), 5 deletions(-)
 create mode 100644 hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx

diff --git a/hosting/src/app/(protected)/content/[documentTypeId]/[documentId]/page.tsx b/hosting/src/app/(protected)/content/[documentTypeId]/[documentId]/page.tsx
index 3e670eef..911912e9 100644
--- a/hosting/src/app/(protected)/content/[documentTypeId]/[documentId]/page.tsx
+++ b/hosting/src/app/(protected)/content/[documentTypeId]/[documentId]/page.tsx
@@ -110,7 +110,6 @@ const DocumentDetailsPage = () => {
 
   return (
     <>
-      dynamic idsss
       <Suspense fallback={<Loader />}>
         {documentType ? <PageHeader pageName={documentType.titleSingular.translated} /> : <Loader />}
       </Suspense>
diff --git a/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx b/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx
new file mode 100644
index 00000000..a467695d
--- /dev/null
+++ b/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx
@@ -0,0 +1,123 @@
+"use client";
+import ContentCard from "@/components/Containers/ContentCard";
+import {
+  Checkbox,
+  DatePicker,
+  Dropdown,
+  FileUpload,
+  FormGroup,
+  Input,
+  RadioButton,
+  Switcher,
+  TextArea,
+} from "@/components/Form";
+import Loader from "@/components/common/Loader";
+import PageHeader from "@/components/common/PageHeader";
+import {ErrorPage} from '@/components/Error/ErrorPage';
+import {useTanamDocumentFields} from "@/hooks/useTanamDocumentFields";
+import {useTanamDocumentType} from "@/hooks/useTanamDocumentTypes";
+import {TanamDocumentField} from "@functions/models/TanamDocumentField";
+import {Timestamp} from "firebase/firestore";
+import {useParams} from "next/navigation";
+import {Suspense, useState} from "react";
+
+const DocumentCreatePage = () => {
+  const {documentTypeId} = useParams<{documentTypeId: string;}>() ?? {};
+  const {data: documentType, error: typeError} = useTanamDocumentType(documentTypeId);
+  const {data: documentFields, error: fieldsError} = useTanamDocumentFields(documentTypeId);
+
+  console.info('documentTypeId :: ', documentTypeId)
+
+  const [readonlyMode] = useState<boolean>(false);
+
+  const renderFormElement = (field: TanamDocumentField, value: any) => {
+    const formgroupKey = `formgroup-${field.id}`;
+    const inputKey = `input-${field.id}`;
+    switch (field.type) {
+      case "input-text":
+      case "text-line":
+        return (
+          <FormGroup key={formgroupKey} label={field.title.translated} disabled={readonlyMode}>
+            <Input
+              key={inputKey}
+              type="text"
+              disabled={readonlyMode}
+              placeholder={field.title.translated}
+              value={value || ""}
+            />
+          </FormGroup>
+        );
+      case "html":
+      case "textbox-rich":
+      case "text-rich":
+        return (
+          <FormGroup key={`formgroup-${field.id}`} disabled={readonlyMode} label={field.title.translated}>
+            <TextArea
+              key={inputKey}
+              disabled={readonlyMode}
+              rows={6}
+              placeholder={field.title.translated}
+              value={value || ""}
+            />
+          </FormGroup>
+        );
+      case "datepicker":
+      case "date":
+        return (
+          <DatePicker
+            key={inputKey}
+            disabled={readonlyMode}
+            label={field.title.translated}
+            placeholder="mm/dd/yyyy"
+            defaultValue={(value as Timestamp).toDate()}
+          />
+        );
+      case "file-upload":
+        return <FileUpload key={inputKey} disabled={readonlyMode} label={field.title.translated} />;
+      case "switcher":
+        return <Switcher key={inputKey} disabled={readonlyMode} defaultChecked={value} />;
+      case "radio":
+        return <RadioButton key={inputKey} disabled={readonlyMode} label={field.title.translated} />;
+      case "checkbox":
+        return <Checkbox key={inputKey} />;
+      case "dropdown":
+        return (
+          <Dropdown key={inputKey} disabled={readonlyMode} options={[]} placeholder={field.title.translated} id={""} />
+        );
+      default:
+        return null;
+    }
+  };
+
+  if (typeError || fieldsError) {
+    return (
+      <>
+        <ErrorPage 
+          pageName={documentType?.titleSingular.translated ?? "Document details"}
+          notificationType="error"
+          notificationTitle="Error loading document"
+          notificationMessage={typeError?.message || fieldsError?.message || "Unknown error"}
+        />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Suspense fallback={<Loader />}>
+        {documentType ? <PageHeader pageName={documentType.titleSingular.translated} /> : <Loader />}
+      </Suspense>
+      {documentType && (
+        <div className="grid grid-cols-1 gap-9">
+          <ContentCard title={`Create New ${documentType.titleField}`}>
+            <Suspense fallback={<Loader />}>
+              {documentFields.map((field) => renderFormElement(field, ""))}
+            </Suspense>
+          </ContentCard>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default DocumentCreatePage;
diff --git a/hosting/src/app/(protected)/content/[documentTypeId]/page.tsx b/hosting/src/app/(protected)/content/[documentTypeId]/page.tsx
index 8e141f45..541608d1 100644
--- a/hosting/src/app/(protected)/content/[documentTypeId]/page.tsx
+++ b/hosting/src/app/(protected)/content/[documentTypeId]/page.tsx
@@ -1,18 +1,28 @@
 "use client";
 import {DocumentTypeGenericList} from "@/components/DocumentType/DocumentTypeGenericList";
+import {Button} from "@/components/Button";
 import Loader from "@/components/common/Loader";
 import PageHeader from "@/components/common/PageHeader";
 import {ErrorPage} from '@/components/Error/ErrorPage';
 import {useTanamDocumentType} from "@/hooks/useTanamDocumentTypes";
 import {useTanamDocuments} from "@/hooks/useTanamDocuments";
-import {useParams} from "next/navigation";
+import {useParams, useRouter} from "next/navigation";
 import {Suspense} from "react";
 
 export default function DocumentTypeDocumentsPage() {
+  const router = useRouter();
   const {documentTypeId} = useParams<{documentTypeId: string}>() ?? {};
   const {data: documents, error: docsError} = useTanamDocuments(documentTypeId);
   const {data: documentType, error: typesError} = useTanamDocumentType(documentTypeId);
 
+  const handleCreateNewDocumentType = () => {
+    router.push(`/content/${documentTypeId}/create`);
+  };
+
+  const pageActions = [
+    <Button key="createNewDocument" onClick={handleCreateNewDocumentType} title={`Create New ${documentType?.titleSingular.translated ?? "Document"}`} />
+  ]
+
   if (docsError || typesError) {
     return (
       <>
@@ -28,9 +38,8 @@ export default function DocumentTypeDocumentsPage() {
 
   return (
     <>
-      dynamic
       <Suspense fallback={<Loader />}>
-        {documentType ? <PageHeader pageName={documentType.titlePlural.translated} /> : <Loader />}
+        {documentType ? <PageHeader pageName={documentType.titlePlural.translated} pageActions={pageActions} /> : <Loader />}
       </Suspense>
       <Suspense fallback={<Loader />}>
         {documentType ? <DocumentTypeGenericList documents={documents} documentType={documentType} /> : <Loader />}
diff --git a/hosting/src/components/DocumentType/DocumentTypeGenericList.tsx b/hosting/src/components/DocumentType/DocumentTypeGenericList.tsx
index dd865483..a81a41be 100644
--- a/hosting/src/components/DocumentType/DocumentTypeGenericList.tsx
+++ b/hosting/src/components/DocumentType/DocumentTypeGenericList.tsx
@@ -11,7 +11,6 @@ interface TableOverviewGenericProps {
 export function DocumentTypeGenericList({documents, documentType}: TableOverviewGenericProps) {
   return (
     <>
-      documents :: {JSON.stringify(documents)}
       <Table
         headers={["Title", "Created", "Status"]}
         rows={documents.map((document, key) => [
diff --git a/hosting/src/hooks/useTanamDocumentTypes.tsx b/hosting/src/hooks/useTanamDocumentTypes.tsx
index c5a61d98..008b6f70 100644
--- a/hosting/src/hooks/useTanamDocumentTypes.tsx
+++ b/hosting/src/hooks/useTanamDocumentTypes.tsx
@@ -70,8 +70,10 @@ export function useTanamDocumentType(documentTypeId?: string): SingleTanamDocume
     const unsubscribe = onSnapshot(
       docRef,
       (doc) => {
+        console.info('typeId :: ', typeId)
         if (doc.exists()) {
           setData(TanamDocumentTypeClient.fromFirestore(doc));
+          console.info('doc :: ', doc.data())
         } else {
           setError(new UserNotification("error", "Error fetching data", "Document type not found"));
         }

From 986526a894733a51b63d06e876fa845335fa8584 Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Tue, 2 Jul 2024 15:47:00 +0700
Subject: [PATCH 07/23] add dynamic form

---
 functions/src/definitions/FieldType.ts      | 16 ++++
 hosting/package-lock.json                   | 20 +++++
 hosting/package.json                        |  2 +
 hosting/src/components/Form/Dropdown.tsx    |  4 +-
 hosting/src/components/Form/DynamicForm.tsx | 81 +++++++++++++++++++++
 5 files changed, 121 insertions(+), 2 deletions(-)
 create mode 100644 functions/src/definitions/FieldType.ts
 create mode 100644 hosting/src/components/Form/DynamicForm.tsx

diff --git a/functions/src/definitions/FieldType.ts b/functions/src/definitions/FieldType.ts
new file mode 100644
index 00000000..90741b56
--- /dev/null
+++ b/functions/src/definitions/FieldType.ts
@@ -0,0 +1,16 @@
+/**
+ * Field type enum
+ */
+export enum FieldType {
+  InputText = "input-text",
+  TextLine = "text-line",
+  TextboxRich = "textbox-rich",
+  TextRich = "text-rich",
+  DatePicker = "datepicker",
+  Date = "date",
+  FileUpload = "file-upload",
+  Switcher = "switcher",
+  Radio = "radio",
+  Checkbox = "checkbox",
+  Dropdown = "dropdown"
+}
\ No newline at end of file
diff --git a/hosting/package-lock.json b/hosting/package-lock.json
index 97c04e60..e41c8fd4 100644
--- a/hosting/package-lock.json
+++ b/hosting/package-lock.json
@@ -22,6 +22,7 @@
         "react": "^18.3.1",
         "react-apexcharts": "^1.4.1",
         "react-dom": "^18.3.1",
+        "uuid": "^10.0.0",
         "zod": "^3.23.8"
       },
       "devDependencies": {
@@ -33,6 +34,7 @@
         "@types/node": "^18.19.33",
         "@types/react": "^18.3.2",
         "@types/react-dom": "^18.3.0",
+        "@types/uuid": "^10.0.0",
         "@typescript-eslint/eslint-plugin": "^7.10.0",
         "@typescript-eslint/parser": "^7.10.0",
         "autoprefixer": "^10.0.1",
@@ -1640,6 +1642,12 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/uuid": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==",
+      "dev": true
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "7.10.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.10.0.tgz",
@@ -7070,6 +7078,18 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
+    "node_modules/uuid": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/w3c-keyname": {
       "version": "2.2.8",
       "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
diff --git a/hosting/package.json b/hosting/package.json
index 9b31a75d..87c4c91e 100644
--- a/hosting/package.json
+++ b/hosting/package.json
@@ -26,6 +26,7 @@
     "react": "^18.3.1",
     "react-apexcharts": "^1.4.1",
     "react-dom": "^18.3.1",
+    "uuid": "^10.0.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {
@@ -37,6 +38,7 @@
     "@types/node": "^18.19.33",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
+    "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^7.10.0",
     "@typescript-eslint/parser": "^7.10.0",
     "autoprefixer": "^10.0.1",
diff --git a/hosting/src/components/Form/Dropdown.tsx b/hosting/src/components/Form/Dropdown.tsx
index d8593a6f..72da4d04 100644
--- a/hosting/src/components/Form/Dropdown.tsx
+++ b/hosting/src/components/Form/Dropdown.tsx
@@ -2,13 +2,13 @@
 import React, {useState, useEffect, useRef} from "react";
 import {clsx} from "clsx";
 
-interface Option {
+export interface Option {
   value: string;
   text: string;
   selected?: boolean;
 }
 
-interface DropdownProps {
+export interface DropdownProps {
   id: string;
   options: Option[];
   disabled?: boolean;
diff --git a/hosting/src/components/Form/DynamicForm.tsx b/hosting/src/components/Form/DynamicForm.tsx
new file mode 100644
index 00000000..b3aada5f
--- /dev/null
+++ b/hosting/src/components/Form/DynamicForm.tsx
@@ -0,0 +1,81 @@
+import React from "react";
+import {
+  Checkbox,
+  DatePicker,
+  Dropdown,
+  FileUpload,
+  FormGroup,
+  Input,
+  RadioButton,
+  Switcher,
+  TextArea,
+} from "@/components/Form";
+import {FieldType} from "@functions/definitions/FieldType";
+import {v4 as uuidv4} from "uuid";
+import {Timestamp} from 'firebase/firestore';
+import {Option} from '@/components/Form/Dropdown';
+
+export interface DynamicFormField {
+  fieldType: FieldType | string;
+  inputType?: string;
+  label: string;
+  placeholder: string;
+  disabled?: boolean;
+  value?: any;
+  dropdownOptions?: Option[];
+  onChange?: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | Date | boolean) => void;
+}
+
+export interface DynamicFormProps {
+  readonlyMode: boolean;
+  fields: DynamicFormField[];
+}
+
+export function DynamicForm(props: DynamicFormProps) {
+  const renderFormElement = (field: DynamicFormField) => {
+    const formId = uuidv4();
+    const formgroupKey = `formgroup-${formId}`;
+    const inputKey = `input-${formId}`;
+
+    switch (field.fieldType) {
+      case FieldType.InputText:
+      case FieldType.TextLine:
+        return (
+          <FormGroup key={formgroupKey} label={field.label} disabled={field.disabled}>
+            <Input key={inputKey} type={field.inputType || "text"} disabled={field.disabled} placeholder={field.placeholder} value={field.value} onChange={field.onChange} />
+          </FormGroup>
+        );
+      case FieldType.TextboxRich:
+      case FieldType.TextRich:
+        return (
+          <FormGroup key={formgroupKey} label={field.label} disabled={field.disabled}>
+            <TextArea key={inputKey} rows={6} disabled={field.disabled} placeholder={field.placeholder} value={field.value} onChange={field.onChange} />
+          </FormGroup>
+        );
+      case FieldType.DatePicker:
+      case FieldType.Date:
+        return (
+          <DatePicker
+            key={inputKey}
+            label={field.label}
+            disabled={field.disabled}
+            placeholder={field.placeholder || "mm/dd/yyyy"}
+            onChange={field.onChange}
+            defaultValue={(field.value as Timestamp).toDate()}
+          />
+        );
+      case FieldType.FileUpload:
+        return <FileUpload key={inputKey} label={field.label} disabled={field.disabled} onChange={field.onChange} />;
+      case FieldType.Switcher:
+        return <Switcher key={inputKey} disabled={field.disabled} defaultChecked={field.value} onChange={field.onChange} />;
+      case FieldType.Radio:
+        return <RadioButton key={inputKey} disabled={field.disabled} label={field.label} defaultChecked={field.value} />;
+      case FieldType.Checkbox:
+        return <Checkbox key={inputKey} />;
+      case FieldType.Dropdown:
+        return <Dropdown key={inputKey} disabled={field.disabled} options={field.dropdownOptions || []} placeholder={field.placeholder} id={""} />;
+      default:
+        return null;
+    }
+  };
+}
\ No newline at end of file

From cf1d552577dc10ba792185d298c8933e2b367cfa Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Tue, 2 Jul 2024 15:51:32 +0700
Subject: [PATCH 08/23] missing render form element

---
 hosting/src/components/Form/DynamicForm.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/hosting/src/components/Form/DynamicForm.tsx b/hosting/src/components/Form/DynamicForm.tsx
index b3aada5f..d8e7b9cb 100644
--- a/hosting/src/components/Form/DynamicForm.tsx
+++ b/hosting/src/components/Form/DynamicForm.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, {Suspense} from "react";
 import {
   Checkbox,
   DatePicker,
@@ -10,6 +10,7 @@ import {
   Switcher,
   TextArea,
 } from "@/components/Form";
+import Loader from "@/components/common/Loader";
 import {FieldType} from "@functions/definitions/FieldType";
 import {v4 as uuidv4} from "uuid";
 import {Timestamp} from 'firebase/firestore';
@@ -78,4 +79,12 @@ export function DynamicForm(props: DynamicFormProps) {
         return null;
     }
   };
+
+  return (
+    <>
+      <Suspense fallback={<Loader />}>
+        {props.fields.map((field) => renderFormElement(field))}
+      </Suspense>
+    </>
+  )
 }
\ No newline at end of file

From f07282223a267d28cee5cd8e67ee6c0d5dc0f4ed Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Wed, 3 Jul 2024 08:59:04 +0700
Subject: [PATCH 09/23] add fieldType

---
 functions/src/models/TanamDocumentField.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/functions/src/models/TanamDocumentField.ts b/functions/src/models/TanamDocumentField.ts
index b84b21d5..64623153 100644
--- a/functions/src/models/TanamDocumentField.ts
+++ b/functions/src/models/TanamDocumentField.ts
@@ -1,3 +1,4 @@
+import {FieldType} from './../definitions/FieldType';
 import {LocalizedString} from "./LocalizedString";
 
 export interface ITanamDocumentField {
@@ -5,6 +6,7 @@ export interface ITanamDocumentField {
   title: LocalizedString;
   description: LocalizedString;
   type: string;
+  fieldType: FieldType
   validators: string[] | null;
 }
 
@@ -24,12 +26,14 @@ export class TanamDocumentField {
     this.title = json.title;
     this.description = json.description;
     this.type = json.type;
+    this.fieldType = json.fieldType;
     this.validators = json.validators;
   }
 
   public id: string;
   public weight: number;
   public title: LocalizedString;
+  public fieldType: FieldType;
   public description: LocalizedString;
   public readonly type: string;
   public readonly validators: string[] | null;
@@ -43,6 +47,7 @@ export class TanamDocumentField {
     return {
       weight: this.weight,
       title: this.title.toJson(),
+      fieldType: this.fieldType,
       description: this.description.toJson(),
       type: this.type,
       validators: this.validators,

From 456f78a62f1948f5f0a9cfe75feda4b5263ca2f3 Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Wed, 3 Jul 2024 08:59:22 +0700
Subject: [PATCH 10/23] fix infinite loop

---
 .../content/[documentTypeId]/create/page.tsx  | 27 ++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx b/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx
index a467695d..8e556584 100644
--- a/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx
+++ b/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx
@@ -19,7 +19,8 @@ import {useTanamDocumentType} from "@/hooks/useTanamDocumentTypes";
 import {TanamDocumentField} from "@functions/models/TanamDocumentField";
 import {Timestamp} from "firebase/firestore";
 import {useParams} from "next/navigation";
-import {Suspense, useState} from "react";
+import {Suspense, useState, useEffect} from "react";
+import {DynamicFormProps} from '@/components/Form/DynamicForm';
 
 const DocumentCreatePage = () => {
   const {documentTypeId} = useParams<{documentTypeId: string;}>() ?? {};
@@ -29,6 +30,29 @@ const DocumentCreatePage = () => {
   console.info('documentTypeId :: ', documentTypeId)
 
   const [readonlyMode] = useState<boolean>(false);
+  const [entry, setEntry] = useState<DynamicFormProps>({
+    readonlyMode: false,
+    fields: []
+  });
+
+  useEffect(() => {
+    console.info('documentFields :: ', documentFields)
+
+    if (documentFields) {
+      setEntry({
+        ...entry,
+        fields: documentFields.map((field) => 
+          ({
+            label: field.title.translated,
+            placeholder: field.title.translated,
+            fieldType: field.type
+          })
+        )
+      })
+    }
+
+    console.info('entry :: ', entry)
+  }, [documentFields])
 
   const renderFormElement = (field: TanamDocumentField, value: any) => {
     const formgroupKey = `formgroup-${field.id}`;
@@ -104,6 +128,7 @@ const DocumentCreatePage = () => {
 
   return (
     <>
+      entry :: {JSON.stringify(entry)}
       <Suspense fallback={<Loader />}>
         {documentType ? <PageHeader pageName={documentType.titleSingular.translated} /> : <Loader />}
       </Suspense>

From 88981d5794f45c7c43f6916bf32f040a90690bdd Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Wed, 3 Jul 2024 09:08:11 +0700
Subject: [PATCH 11/23] fix title as LocalizedString

---
 functions/src/models/TanamDocumentField.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/functions/src/models/TanamDocumentField.ts b/functions/src/models/TanamDocumentField.ts
index 64623153..2a87860c 100644
--- a/functions/src/models/TanamDocumentField.ts
+++ b/functions/src/models/TanamDocumentField.ts
@@ -1,5 +1,5 @@
 import {FieldType} from './../definitions/FieldType';
-import {LocalizedString} from "./LocalizedString";
+import {LocalizedString, Translations} from "./LocalizedString";
 
 export interface ITanamDocumentField {
   weight: number;
@@ -23,7 +23,7 @@ export class TanamDocumentField {
   constructor(id: string, json: ITanamDocumentField) {
     this.id = id;
     this.weight = json.weight;
-    this.title = json.title;
+    this.title = new LocalizedString(json.title as Translations) ?? json.title;
     this.description = json.description;
     this.type = json.type;
     this.fieldType = json.fieldType;

From 0b1231b46ac68e707b981be9274c894967a202be Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Wed, 3 Jul 2024 09:43:04 +0700
Subject: [PATCH 12/23] fix cant render dynamic form

---
 .../content/[documentTypeId]/create/page.tsx  | 92 +++----------------
 hosting/src/components/Form/DynamicForm.tsx   | 31 ++++---
 hosting/src/components/Form/index.tsx         |  1 +
 3 files changed, 32 insertions(+), 92 deletions(-)

diff --git a/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx b/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx
index 8e556584..7ddb5ca4 100644
--- a/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx
+++ b/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx
@@ -1,26 +1,16 @@
 "use client";
 import ContentCard from "@/components/Containers/ContentCard";
 import {
-  Checkbox,
-  DatePicker,
-  Dropdown,
-  FileUpload,
-  FormGroup,
-  Input,
-  RadioButton,
-  Switcher,
-  TextArea,
+  DynamicForm,
+  DynamicFormProps
 } from "@/components/Form";
 import Loader from "@/components/common/Loader";
 import PageHeader from "@/components/common/PageHeader";
 import {ErrorPage} from '@/components/Error/ErrorPage';
 import {useTanamDocumentFields} from "@/hooks/useTanamDocumentFields";
 import {useTanamDocumentType} from "@/hooks/useTanamDocumentTypes";
-import {TanamDocumentField} from "@functions/models/TanamDocumentField";
-import {Timestamp} from "firebase/firestore";
 import {useParams} from "next/navigation";
 import {Suspense, useState, useEffect} from "react";
-import {DynamicFormProps} from '@/components/Form/DynamicForm';
 
 const DocumentCreatePage = () => {
   const {documentTypeId} = useParams<{documentTypeId: string;}>() ?? {};
@@ -29,7 +19,6 @@ const DocumentCreatePage = () => {
 
   console.info('documentTypeId :: ', documentTypeId)
 
-  const [readonlyMode] = useState<boolean>(false);
   const [entry, setEntry] = useState<DynamicFormProps>({
     readonlyMode: false,
     fields: []
@@ -41,77 +30,20 @@ const DocumentCreatePage = () => {
     if (documentFields) {
       setEntry({
         ...entry,
-        fields: documentFields.map((field) => 
-          ({
+        fields: documentFields.map((field) => {
+          console.info('field :: ', field)
+          return {
             label: field.title.translated,
             placeholder: field.title.translated,
-            fieldType: field.type
-          })
-        )
+            fieldType: "input-text"
+          }
+        })
       })
+      console.info('entry if :: ', entry)
     }
 
     console.info('entry :: ', entry)
-  }, [documentFields])
-
-  const renderFormElement = (field: TanamDocumentField, value: any) => {
-    const formgroupKey = `formgroup-${field.id}`;
-    const inputKey = `input-${field.id}`;
-    switch (field.type) {
-      case "input-text":
-      case "text-line":
-        return (
-          <FormGroup key={formgroupKey} label={field.title.translated} disabled={readonlyMode}>
-            <Input
-              key={inputKey}
-              type="text"
-              disabled={readonlyMode}
-              placeholder={field.title.translated}
-              value={value || ""}
-            />
-          </FormGroup>
-        );
-      case "html":
-      case "textbox-rich":
-      case "text-rich":
-        return (
-          <FormGroup key={`formgroup-${field.id}`} disabled={readonlyMode} label={field.title.translated}>
-            <TextArea
-              key={inputKey}
-              disabled={readonlyMode}
-              rows={6}
-              placeholder={field.title.translated}
-              value={value || ""}
-            />
-          </FormGroup>
-        );
-      case "datepicker":
-      case "date":
-        return (
-          <DatePicker
-            key={inputKey}
-            disabled={readonlyMode}
-            label={field.title.translated}
-            placeholder="mm/dd/yyyy"
-            defaultValue={(value as Timestamp).toDate()}
-          />
-        );
-      case "file-upload":
-        return <FileUpload key={inputKey} disabled={readonlyMode} label={field.title.translated} />;
-      case "switcher":
-        return <Switcher key={inputKey} disabled={readonlyMode} defaultChecked={value} />;
-      case "radio":
-        return <RadioButton key={inputKey} disabled={readonlyMode} label={field.title.translated} />;
-      case "checkbox":
-        return <Checkbox key={inputKey} />;
-      case "dropdown":
-        return (
-          <Dropdown key={inputKey} disabled={readonlyMode} options={[]} placeholder={field.title.translated} id={""} />
-        );
-      default:
-        return null;
-    }
-  };
+  }, [documentFields]);
 
   if (typeError || fieldsError) {
     return (
@@ -135,9 +67,7 @@ const DocumentCreatePage = () => {
       {documentType && (
         <div className="grid grid-cols-1 gap-9">
           <ContentCard title={`Create New ${documentType.titleField}`}>
-            <Suspense fallback={<Loader />}>
-              {documentFields.map((field) => renderFormElement(field, ""))}
-            </Suspense>
+            <DynamicForm readonlyMode={entry.readonlyMode} fields={entry.fields} />
           </ContentCard>
         </div>
       )}
diff --git a/hosting/src/components/Form/DynamicForm.tsx b/hosting/src/components/Form/DynamicForm.tsx
index d8e7b9cb..218fc2ef 100644
--- a/hosting/src/components/Form/DynamicForm.tsx
+++ b/hosting/src/components/Form/DynamicForm.tsx
@@ -32,7 +32,15 @@ export interface DynamicFormProps {
   fields: DynamicFormField[];
 }
 
-export function DynamicForm(props: DynamicFormProps) {
+export const initialProps: DynamicFormProps = {
+  readonlyMode: false,
+  fields: []
+}
+
+export function DynamicForm({
+  readonlyMode,
+  fields
+}: DynamicFormProps) {
   const renderFormElement = (field: DynamicFormField) => {
     const formId = uuidv4();
     const formgroupKey = `formgroup-${formId}`;
@@ -42,15 +50,15 @@ export function DynamicForm(props: DynamicFormProps) {
       case FieldType.InputText:
       case FieldType.TextLine:
         return (
-          <FormGroup key={formgroupKey} label={field.label} disabled={field.disabled}>
-            <Input key={inputKey} type={field.inputType || "text"} disabled={field.disabled} placeholder={field.placeholder} value={field.value} onChange={field.onChange} />
+          <FormGroup key={formgroupKey} label={field.label} disabled={field.disabled || readonlyMode}>
+            <Input key={inputKey} type={field.inputType || "text"} disabled={field.disabled || readonlyMode} placeholder={field.placeholder} value={field.value} onChange={field.onChange} />
           </FormGroup>
         );
       case FieldType.TextboxRich:
       case FieldType.TextRich:
         return (
-          <FormGroup key={formgroupKey} label={field.label} disabled={field.disabled}>
-            <TextArea key={inputKey} rows={6} disabled={field.disabled} placeholder={field.placeholder} value={field.value} onChange={field.onChange} />
+          <FormGroup key={formgroupKey} label={field.label} disabled={field.disabled || readonlyMode}>
+            <TextArea key={inputKey} rows={6} disabled={field.disabled || readonlyMode} placeholder={field.placeholder} value={field.value} onChange={field.onChange} />
           </FormGroup>
         );
       case FieldType.DatePicker:
@@ -59,22 +67,22 @@ export function DynamicForm(props: DynamicFormProps) {
           <DatePicker
             key={inputKey}
             label={field.label}
-            disabled={field.disabled}
+            disabled={field.disabled || readonlyMode}
             placeholder={field.placeholder || "mm/dd/yyyy"}
             onChange={field.onChange}
             defaultValue={(field.value as Timestamp).toDate()}
           />
         );
       case FieldType.FileUpload:
-        return <FileUpload key={inputKey} label={field.label} disabled={field.disabled} onChange={field.onChange} />;
+        return <FileUpload key={inputKey} label={field.label} disabled={field.disabled || readonlyMode} onChange={field.onChange} />;
       case FieldType.Switcher:
-        return <Switcher key={inputKey} disabled={field.disabled} defaultChecked={field.value} onChange={field.onChange} />;
+        return <Switcher key={inputKey} disabled={field.disabled || readonlyMode} defaultChecked={field.value} onChange={field.onChange} />;
       case FieldType.Radio:
-        return <RadioButton key={inputKey} disabled={field.disabled} label={field.label} defaultChecked={field.value} />;
+        return <RadioButton key={inputKey} disabled={field.disabled || readonlyMode} label={field.label} defaultChecked={field.value} />;
       case FieldType.Checkbox:
         return <Checkbox key={inputKey} />;
       case FieldType.Dropdown:
-        return <Dropdown key={inputKey} disabled={field.disabled} options={field.dropdownOptions || []} placeholder={field.placeholder} id={""} />;
+        return <Dropdown key={inputKey} disabled={field.disabled || readonlyMode} options={field.dropdownOptions || []} placeholder={field.placeholder} id={""} />;
       default:
         return null;
     }
@@ -82,8 +90,9 @@ export function DynamicForm(props: DynamicFormProps) {
 
   return (
     <>
+      fields :: {JSON.stringify(fields)}
       <Suspense fallback={<Loader />}>
-        {props.fields.map((field) => renderFormElement(field))}
+        {fields.map((field) => renderFormElement(field))}
       </Suspense>
     </>
   )
diff --git a/hosting/src/components/Form/index.tsx b/hosting/src/components/Form/index.tsx
index 897dd50d..fd004031 100644
--- a/hosting/src/components/Form/index.tsx
+++ b/hosting/src/components/Form/index.tsx
@@ -8,3 +8,4 @@ export {RadioButton} from "./RadioButton";
 export {Select} from "./Select";
 export {Switcher} from "./Switcher";
 export {TextArea} from "./TextArea";
+export * from "./DynamicForm";

From d25440d9c01595cfac12f23e2405b74afc8e604d Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Wed, 3 Jul 2024 09:47:46 +0700
Subject: [PATCH 13/23] remove fieldtype in model

---
 functions/src/models/TanamDocumentField.ts        |  8 ++------
 .../content/[documentTypeId]/create/page.tsx      | 15 ++++++---------
 2 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/functions/src/models/TanamDocumentField.ts b/functions/src/models/TanamDocumentField.ts
index 2a87860c..5301c342 100644
--- a/functions/src/models/TanamDocumentField.ts
+++ b/functions/src/models/TanamDocumentField.ts
@@ -5,8 +5,7 @@ export interface ITanamDocumentField {
   weight: number;
   title: LocalizedString;
   description: LocalizedString;
-  type: string;
-  fieldType: FieldType
+  type: FieldType | string;
   validators: string[] | null;
 }
 
@@ -26,16 +25,14 @@ export class TanamDocumentField {
     this.title = new LocalizedString(json.title as Translations) ?? json.title;
     this.description = json.description;
     this.type = json.type;
-    this.fieldType = json.fieldType;
     this.validators = json.validators;
   }
 
   public id: string;
   public weight: number;
   public title: LocalizedString;
-  public fieldType: FieldType;
   public description: LocalizedString;
-  public readonly type: string;
+  public readonly type: FieldType | string;
   public readonly validators: string[] | null;
 
   /**
@@ -47,7 +44,6 @@ export class TanamDocumentField {
     return {
       weight: this.weight,
       title: this.title.toJson(),
-      fieldType: this.fieldType,
       description: this.description.toJson(),
       type: this.type,
       validators: this.validators,
diff --git a/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx b/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx
index 7ddb5ca4..d3c73e5e 100644
--- a/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx
+++ b/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx
@@ -30,15 +30,12 @@ const DocumentCreatePage = () => {
     if (documentFields) {
       setEntry({
         ...entry,
-        fields: documentFields.map((field) => {
-          console.info('field :: ', field)
-          return {
-            label: field.title.translated,
-            placeholder: field.title.translated,
-            fieldType: "input-text"
-          }
-        })
-      })
+        fields: documentFields.map((field) => ({
+          label: field.title.translated,
+          placeholder: field.title.translated,
+          fieldType: field.type
+        }))
+      });
       console.info('entry if :: ', entry)
     }
 

From aeb27a1cbaca3a0c402b59c996db87e17261eb82 Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Wed, 3 Jul 2024 09:49:53 +0700
Subject: [PATCH 14/23] put back fieldtype

---
 functions/src/models/TanamDocumentField.ts                  | 6 +++++-
 .../(protected)/content/[documentTypeId]/create/page.tsx    | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/functions/src/models/TanamDocumentField.ts b/functions/src/models/TanamDocumentField.ts
index 5301c342..0bbee834 100644
--- a/functions/src/models/TanamDocumentField.ts
+++ b/functions/src/models/TanamDocumentField.ts
@@ -6,6 +6,7 @@ export interface ITanamDocumentField {
   title: LocalizedString;
   description: LocalizedString;
   type: FieldType | string;
+  fieldType: FieldType;
   validators: string[] | null;
 }
 
@@ -25,14 +26,16 @@ export class TanamDocumentField {
     this.title = new LocalizedString(json.title as Translations) ?? json.title;
     this.description = json.description;
     this.type = json.type;
+    this.fieldType = json.fieldType;
     this.validators = json.validators;
   }
 
   public id: string;
   public weight: number;
   public title: LocalizedString;
+  public fieldType: FieldType;
   public description: LocalizedString;
-  public readonly type: FieldType | string;
+  public readonly type: string;
   public readonly validators: string[] | null;
 
   /**
@@ -44,6 +47,7 @@ export class TanamDocumentField {
     return {
       weight: this.weight,
       title: this.title.toJson(),
+      fieldType: this.fieldType,
       description: this.description.toJson(),
       type: this.type,
       validators: this.validators,
diff --git a/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx b/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx
index d3c73e5e..c4286c69 100644
--- a/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx
+++ b/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx
@@ -33,7 +33,7 @@ const DocumentCreatePage = () => {
         fields: documentFields.map((field) => ({
           label: field.title.translated,
           placeholder: field.title.translated,
-          fieldType: field.type
+          fieldType: field.fieldType
         }))
       });
       console.info('entry if :: ', entry)

From 1e8a912e1123a1ca9fda701d75bcdda688d3d706 Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Wed, 3 Jul 2024 09:54:40 +0700
Subject: [PATCH 15/23] remove unused

---
 .../(protected)/content/[documentTypeId]/create/page.tsx  | 8 --------
 hosting/src/components/Form/DynamicForm.tsx               | 1 -
 hosting/src/hooks/useTanamDocumentTypes.tsx               | 2 --
 3 files changed, 11 deletions(-)

diff --git a/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx b/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx
index c4286c69..7eb18f33 100644
--- a/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx
+++ b/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx
@@ -17,16 +17,12 @@ const DocumentCreatePage = () => {
   const {data: documentType, error: typeError} = useTanamDocumentType(documentTypeId);
   const {data: documentFields, error: fieldsError} = useTanamDocumentFields(documentTypeId);
 
-  console.info('documentTypeId :: ', documentTypeId)
-
   const [entry, setEntry] = useState<DynamicFormProps>({
     readonlyMode: false,
     fields: []
   });
 
   useEffect(() => {
-    console.info('documentFields :: ', documentFields)
-
     if (documentFields) {
       setEntry({
         ...entry,
@@ -36,10 +32,7 @@ const DocumentCreatePage = () => {
           fieldType: field.fieldType
         }))
       });
-      console.info('entry if :: ', entry)
     }
-
-    console.info('entry :: ', entry)
   }, [documentFields]);
 
   if (typeError || fieldsError) {
@@ -57,7 +50,6 @@ const DocumentCreatePage = () => {
 
   return (
     <>
-      entry :: {JSON.stringify(entry)}
       <Suspense fallback={<Loader />}>
         {documentType ? <PageHeader pageName={documentType.titleSingular.translated} /> : <Loader />}
       </Suspense>
diff --git a/hosting/src/components/Form/DynamicForm.tsx b/hosting/src/components/Form/DynamicForm.tsx
index 218fc2ef..3a8bcf22 100644
--- a/hosting/src/components/Form/DynamicForm.tsx
+++ b/hosting/src/components/Form/DynamicForm.tsx
@@ -90,7 +90,6 @@ export function DynamicForm({
 
   return (
     <>
-      fields :: {JSON.stringify(fields)}
       <Suspense fallback={<Loader />}>
         {fields.map((field) => renderFormElement(field))}
       </Suspense>
diff --git a/hosting/src/hooks/useTanamDocumentTypes.tsx b/hosting/src/hooks/useTanamDocumentTypes.tsx
index 008b6f70..c5a61d98 100644
--- a/hosting/src/hooks/useTanamDocumentTypes.tsx
+++ b/hosting/src/hooks/useTanamDocumentTypes.tsx
@@ -70,10 +70,8 @@ export function useTanamDocumentType(documentTypeId?: string): SingleTanamDocume
     const unsubscribe = onSnapshot(
       docRef,
       (doc) => {
-        console.info('typeId :: ', typeId)
         if (doc.exists()) {
           setData(TanamDocumentTypeClient.fromFirestore(doc));
-          console.info('doc :: ', doc.data())
         } else {
           setError(new UserNotification("error", "Error fetching data", "Document type not found"));
         }

From 2b8259a0e441c5b0d3708efcbcdf029aaacac57d Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Wed, 3 Jul 2024 09:57:06 +0700
Subject: [PATCH 16/23] fix wrong content card title

---
 .../app/(protected)/content/[documentTypeId]/create/page.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx b/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx
index 7eb18f33..50c95ed2 100644
--- a/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx
+++ b/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx
@@ -55,7 +55,7 @@ const DocumentCreatePage = () => {
       </Suspense>
       {documentType && (
         <div className="grid grid-cols-1 gap-9">
-          <ContentCard title={`Create New ${documentType.titleField}`}>
+          <ContentCard title={`Create New ${documentType.titleSingular.translated}`}>
             <DynamicForm readonlyMode={entry.readonlyMode} fields={entry.fields} />
           </ContentCard>
         </div>

From 14a1108da6a74fde9b9014cc21cc94a3b42fcdfb Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Wed, 3 Jul 2024 11:09:30 +0700
Subject: [PATCH 17/23] fix dynamicform

---
 .../content/[documentTypeId]/create/page.tsx  | 19 ++++++--
 hosting/src/components/Form/DynamicForm.tsx   | 48 ++++++++++++++-----
 2 files changed, 51 insertions(+), 16 deletions(-)

diff --git a/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx b/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx
index 50c95ed2..5d94bbf4 100644
--- a/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx
+++ b/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx
@@ -10,7 +10,7 @@ import {ErrorPage} from '@/components/Error/ErrorPage';
 import {useTanamDocumentFields} from "@/hooks/useTanamDocumentFields";
 import {useTanamDocumentType} from "@/hooks/useTanamDocumentTypes";
 import {useParams} from "next/navigation";
-import {Suspense, useState, useEffect} from "react";
+import {Suspense, useState, useEffect, useCallback} from "react";
 
 const DocumentCreatePage = () => {
   const {documentTypeId} = useParams<{documentTypeId: string;}>() ?? {};
@@ -27,14 +27,27 @@ const DocumentCreatePage = () => {
       setEntry({
         ...entry,
         fields: documentFields.map((field) => ({
+          id: field.id,
           label: field.title.translated,
           placeholder: field.title.translated,
-          fieldType: field.fieldType
+          fieldType: field.fieldType,
+          value: ""
         }))
       });
     }
   }, [documentFields]);
 
+  const handleFormChange = useCallback((updatedFields: { [key: string]: any }) => {
+    setEntry((prevEntry) => ({
+      ...prevEntry,
+      fields: prevEntry.fields.map((field) => ({
+        ...field,
+        value: updatedFields[field.id]
+      }))
+    }));
+    console.log("Updated form values:", updatedFields);
+  }, []);
+
   if (typeError || fieldsError) {
     return (
       <>
@@ -56,7 +69,7 @@ const DocumentCreatePage = () => {
       {documentType && (
         <div className="grid grid-cols-1 gap-9">
           <ContentCard title={`Create New ${documentType.titleSingular.translated}`}>
-            <DynamicForm readonlyMode={entry.readonlyMode} fields={entry.fields} />
+            <DynamicForm readonlyMode={entry.readonlyMode} fields={entry.fields} onFieldsChange={handleFormChange} />
           </ContentCard>
         </div>
       )}
diff --git a/hosting/src/components/Form/DynamicForm.tsx b/hosting/src/components/Form/DynamicForm.tsx
index 3a8bcf22..22b9c0d6 100644
--- a/hosting/src/components/Form/DynamicForm.tsx
+++ b/hosting/src/components/Form/DynamicForm.tsx
@@ -1,4 +1,4 @@
-import React, {Suspense} from "react";
+import React, {Suspense, useCallback, useEffect, useState} from "react";
 import {
   Checkbox,
   DatePicker,
@@ -17,6 +17,7 @@ import {Timestamp} from 'firebase/firestore';
 import {Option} from '@/components/Form/Dropdown';
 
 export interface DynamicFormField {
+  id: string;
   fieldType: FieldType | string;
   inputType?: string;
   label: string;
@@ -24,12 +25,12 @@ export interface DynamicFormField {
   disabled?: boolean;
   value?: any;
   dropdownOptions?: Option[];
-  onChange?: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | Date | boolean) => void;
 }
 
 export interface DynamicFormProps {
   readonlyMode: boolean;
   fields: DynamicFormField[];
+  onFieldsChange?: (fields: {[key: string]: any}) => void;
 }
 
 export const initialProps: DynamicFormProps = {
@@ -39,26 +40,47 @@ export const initialProps: DynamicFormProps = {
 
 export function DynamicForm({
   readonlyMode,
-  fields
+  fields,
+  onFieldsChange
 }: DynamicFormProps) {
-  const renderFormElement = (field: DynamicFormField) => {
+  const [formValues, setFormValues] = useState(() => {
+    return fields.reduce((acc, field) => {
+      acc[field.id] = field.value || "";
+      return acc;
+    }, {} as { [key: string]: any });
+  });
+
+  useEffect(() => {
+    if (onFieldsChange) {
+      onFieldsChange(formValues);
+    }
+  }, [formValues, onFieldsChange]);
+
+  const handleOnChange = useCallback((id: string, value: any) => {
+    setFormValues(prevValues => ({
+      ...prevValues,
+      [id]: value
+    }));
+  }, []);
+
+  const renderFormElement = useCallback((field: DynamicFormField, fieldIndex: number) => {
     const formId = uuidv4();
-    const formgroupKey = `formgroup-${formId}`;
-    const inputKey = `input-${formId}`;
+    const formgroupKey = `formgroup-${formId}-${fieldIndex}`;
+    const inputKey = `input-${formId}-${fieldIndex}`;
 
     switch (field.fieldType) {
       case FieldType.InputText:
       case FieldType.TextLine:
         return (
           <FormGroup key={formgroupKey} label={field.label} disabled={field.disabled || readonlyMode}>
-            <Input key={inputKey} type={field.inputType || "text"} disabled={field.disabled || readonlyMode} placeholder={field.placeholder} value={field.value} onChange={field.onChange} />
+            <Input key={inputKey} type={field.inputType || "text"} disabled={field.disabled || readonlyMode} placeholder={field.placeholder} value={field.value} onChange={(e) => handleOnChange(field.id, e.target.value)} />
           </FormGroup>
         );
       case FieldType.TextboxRich:
       case FieldType.TextRich:
         return (
           <FormGroup key={formgroupKey} label={field.label} disabled={field.disabled || readonlyMode}>
-            <TextArea key={inputKey} rows={6} disabled={field.disabled || readonlyMode} placeholder={field.placeholder} value={field.value} onChange={field.onChange} />
+            <TextArea key={inputKey} rows={6} disabled={field.disabled || readonlyMode} placeholder={field.placeholder} value={field.value} onChange={(e) => handleOnChange(field.id, e.target.value)} />
           </FormGroup>
         );
       case FieldType.DatePicker:
@@ -69,14 +91,14 @@ export function DynamicForm({
             label={field.label}
             disabled={field.disabled || readonlyMode}
             placeholder={field.placeholder || "mm/dd/yyyy"}
-            onChange={field.onChange}
+            onChange={(e) => handleOnChange(field.id, e)}
             defaultValue={(field.value as Timestamp).toDate()}
           />
         );
       case FieldType.FileUpload:
-        return <FileUpload key={inputKey} label={field.label} disabled={field.disabled || readonlyMode} onChange={field.onChange} />;
+        return <FileUpload key={inputKey} label={field.label} disabled={field.disabled || readonlyMode} onChange={(e) => handleOnChange(field.id, e.target.value)} />;
       case FieldType.Switcher:
-        return <Switcher key={inputKey} disabled={field.disabled || readonlyMode} defaultChecked={field.value} onChange={field.onChange} />;
+        return <Switcher key={inputKey} disabled={field.disabled || readonlyMode} defaultChecked={field.value} onChange={(e) => handleOnChange(field.id, e)} />;
       case FieldType.Radio:
         return <RadioButton key={inputKey} disabled={field.disabled || readonlyMode} label={field.label} defaultChecked={field.value} />;
       case FieldType.Checkbox:
@@ -86,12 +108,12 @@ export function DynamicForm({
       default:
         return null;
     }
-  };
+  }, [formValues, readonlyMode, handleOnChange]);
 
   return (
     <>
       <Suspense fallback={<Loader />}>
-        {fields.map((field) => renderFormElement(field))}
+        {fields.map((field, index) => renderFormElement(field, index))}
       </Suspense>
     </>
   )

From 7306130d90dbb6223767d50d7cb0ebf5ac3082d6 Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Wed, 3 Jul 2024 14:09:36 +0700
Subject: [PATCH 18/23] why is handling the form so painful in react

---
 hosting/src/components/Form/DynamicForm.tsx | 66 +++++++++++++--------
 1 file changed, 41 insertions(+), 25 deletions(-)

diff --git a/hosting/src/components/Form/DynamicForm.tsx b/hosting/src/components/Form/DynamicForm.tsx
index 22b9c0d6..9f589432 100644
--- a/hosting/src/components/Form/DynamicForm.tsx
+++ b/hosting/src/components/Form/DynamicForm.tsx
@@ -1,4 +1,4 @@
-import React, {Suspense, useCallback, useEffect, useState} from "react";
+import React, {Suspense, useEffect, useState} from "react";
 import {
   Checkbox,
   DatePicker,
@@ -30,7 +30,7 @@ export interface DynamicFormField {
 export interface DynamicFormProps {
   readonlyMode: boolean;
   fields: DynamicFormField[];
-  onFieldsChange?: (fields: {[key: string]: any}) => void;
+  onFieldsChange?: (fields: DynamicFormField[]) => void;
 }
 
 export const initialProps: DynamicFormProps = {
@@ -43,27 +43,42 @@ export function DynamicForm({
   fields,
   onFieldsChange
 }: DynamicFormProps) {
-  const [formValues, setFormValues] = useState(() => {
-    return fields.reduce((acc, field) => {
-      acc[field.id] = field.value || "";
-      return acc;
-    }, {} as { [key: string]: any });
-  });
+  const [testInput, setTestInput] = useState()
+  const [formValues, setFormValues] = useState<DynamicFormField[]>([]);
 
   useEffect(() => {
-    if (onFieldsChange) {
-      onFieldsChange(formValues);
+    if (fields) {
+      console.info('fields :: ', fields)
+      setFormValues(fields)
+      console.info('formValues :: ', formValues)
     }
-  }, [formValues, onFieldsChange]);
 
-  const handleOnChange = useCallback((id: string, value: any) => {
-    setFormValues(prevValues => ({
-      ...prevValues,
-      [id]: value
-    }));
-  }, []);
+    return () => {
+      setFormValues([])
+    }
+  }, [fields])
+
+  // useEffect(() => {
+  //   if (onFieldsChange) {
+  //     onFieldsChange(formValues);
+  //   }
+  // }, [formValues, onFieldsChange]);
+
+  const handleOnChange = (value: any) => {
+    console.info('handleOnChange :: ', value)
+    // field.value = value
+    // setFormValues(prevValues => ({
+    //   ...prevValues,
+    //   [id]: value
+    // }));
+  }
+
+  const handleTestInput = (value: any) => {
+    setTestInput(value.target.value)
+    console.info('handleTestInput :: ', value)
+  }
 
-  const renderFormElement = useCallback((field: DynamicFormField, fieldIndex: number) => {
+  const renderFormElement = (field: DynamicFormField, fieldIndex: number) => {
     const formId = uuidv4();
     const formgroupKey = `formgroup-${formId}-${fieldIndex}`;
     const inputKey = `input-${formId}-${fieldIndex}`;
@@ -73,14 +88,14 @@ export function DynamicForm({
       case FieldType.TextLine:
         return (
           <FormGroup key={formgroupKey} label={field.label} disabled={field.disabled || readonlyMode}>
-            <Input key={inputKey} type={field.inputType || "text"} disabled={field.disabled || readonlyMode} placeholder={field.placeholder} value={field.value} onChange={(e) => handleOnChange(field.id, e.target.value)} />
+            <Input key={inputKey} type={field.inputType || "text"} disabled={field.disabled || readonlyMode} placeholder={field.placeholder} value={testInput} onChange={handleTestInput} />
           </FormGroup>
         );
       case FieldType.TextboxRich:
       case FieldType.TextRich:
         return (
           <FormGroup key={formgroupKey} label={field.label} disabled={field.disabled || readonlyMode}>
-            <TextArea key={inputKey} rows={6} disabled={field.disabled || readonlyMode} placeholder={field.placeholder} value={field.value} onChange={(e) => handleOnChange(field.id, e.target.value)} />
+            <TextArea key={inputKey} rows={6} disabled={field.disabled || readonlyMode} placeholder={field.placeholder} value={field.value} onChange={handleOnChange} />
           </FormGroup>
         );
       case FieldType.DatePicker:
@@ -91,14 +106,14 @@ export function DynamicForm({
             label={field.label}
             disabled={field.disabled || readonlyMode}
             placeholder={field.placeholder || "mm/dd/yyyy"}
-            onChange={(e) => handleOnChange(field.id, e)}
+            onChange={handleOnChange}
             defaultValue={(field.value as Timestamp).toDate()}
           />
         );
       case FieldType.FileUpload:
-        return <FileUpload key={inputKey} label={field.label} disabled={field.disabled || readonlyMode} onChange={(e) => handleOnChange(field.id, e.target.value)} />;
+        return <FileUpload key={inputKey} label={field.label} disabled={field.disabled || readonlyMode} onChange={handleOnChange} />;
       case FieldType.Switcher:
-        return <Switcher key={inputKey} disabled={field.disabled || readonlyMode} defaultChecked={field.value} onChange={(e) => handleOnChange(field.id, e)} />;
+        return <Switcher key={inputKey} disabled={field.disabled || readonlyMode} defaultChecked={field.value} onChange={handleOnChange} />;
       case FieldType.Radio:
         return <RadioButton key={inputKey} disabled={field.disabled || readonlyMode} label={field.label} defaultChecked={field.value} />;
       case FieldType.Checkbox:
@@ -108,12 +123,13 @@ export function DynamicForm({
       default:
         return null;
     }
-  }, [formValues, readonlyMode, handleOnChange]);
+  };
 
   return (
     <>
+      formValues :: {JSON.stringify(formValues)}
       <Suspense fallback={<Loader />}>
-        {fields.map((field, index) => renderFormElement(field, index))}
+        {formValues.map((field, index) => renderFormElement(field, index))}
       </Suspense>
     </>
   )

From d72a20cab48b51aabd05db1f0f8017c8d693a01f Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Wed, 3 Jul 2024 15:37:46 +0700
Subject: [PATCH 19/23] still no luck

---
 hosting/package-lock.json                     | 77 +++++++++++++++++--
 hosting/package.json                          |  1 +
 .../content/[documentTypeId]/create/page.tsx  | 20 ++---
 hosting/src/components/Form/DynamicForm.tsx   | 54 +++++++------
 hosting/src/components/Form/TextField.tsx     | 31 ++++++++
 hosting/src/components/Form/index.tsx         |  1 +
 6 files changed, 145 insertions(+), 39 deletions(-)
 create mode 100644 hosting/src/components/Form/TextField.tsx

diff --git a/hosting/package-lock.json b/hosting/package-lock.json
index e41c8fd4..c0e3b5ae 100644
--- a/hosting/package-lock.json
+++ b/hosting/package-lock.json
@@ -17,6 +17,7 @@
         "firebase": "^10.12.0",
         "firebaseui": "^6.1.0",
         "flatpickr": "^4.6.13",
+        "formik": "^2.4.6",
         "jsvectormap": "^1.5.3",
         "next": "^14.2.3",
         "react": "^18.3.1",
@@ -1602,6 +1603,15 @@
         "url": "https://github.com/sponsors/ueberdosis"
       }
     },
+    "node_modules/@types/hoist-non-react-statics": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz",
+      "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==",
+      "dependencies": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -1620,14 +1630,12 @@
     "node_modules/@types/prop-types": {
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
-      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
-      "dev": true
+      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
     },
     "node_modules/@types/react": {
       "version": "18.3.2",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.2.tgz",
       "integrity": "sha512-Btgg89dAnqD4vV7R3hlwOxgqobUQKgx3MmrQRi0yYbs/P0ym8XozIAlkqVilPqHQwXs4e9Tf63rrCgl58BcO4w==",
-      "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -2496,8 +2504,7 @@
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
@@ -2579,6 +2586,14 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
+    "node_modules/deepmerge": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+      "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/define-data-property": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
@@ -3725,6 +3740,30 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/formik": {
+      "version": "2.4.6",
+      "resolved": "https://registry.npmjs.org/formik/-/formik-2.4.6.tgz",
+      "integrity": "sha512-A+2EI7U7aG296q2TLGvNapDNTZp1khVt5Vk0Q/fyfSROss0V/V6+txt2aJnwEos44IxTCW/LYAi/zgWzlevj+g==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://opencollective.com/formik"
+        }
+      ],
+      "dependencies": {
+        "@types/hoist-non-react-statics": "^3.3.1",
+        "deepmerge": "^2.1.1",
+        "hoist-non-react-statics": "^3.3.0",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "react-fast-compare": "^2.0.1",
+        "tiny-warning": "^1.0.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -4075,6 +4114,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
     "node_modules/http-parser-js": {
       "version": "0.5.8",
       "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.8.tgz",
@@ -4762,6 +4809,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "node_modules/lodash.camelcase": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
@@ -5974,6 +6031,11 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-fast-compare": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
+      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -6826,6 +6888,11 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "node_modules/tippy.js": {
       "version": "6.3.7",
       "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
diff --git a/hosting/package.json b/hosting/package.json
index 87c4c91e..7562a350 100644
--- a/hosting/package.json
+++ b/hosting/package.json
@@ -21,6 +21,7 @@
     "firebase": "^10.12.0",
     "firebaseui": "^6.1.0",
     "flatpickr": "^4.6.13",
+    "formik": "^2.4.6",
     "jsvectormap": "^1.5.3",
     "next": "^14.2.3",
     "react": "^18.3.1",
diff --git a/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx b/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx
index 5d94bbf4..6bb38ab5 100644
--- a/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx
+++ b/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx
@@ -10,7 +10,7 @@ import {ErrorPage} from '@/components/Error/ErrorPage';
 import {useTanamDocumentFields} from "@/hooks/useTanamDocumentFields";
 import {useTanamDocumentType} from "@/hooks/useTanamDocumentTypes";
 import {useParams} from "next/navigation";
-import {Suspense, useState, useEffect, useCallback} from "react";
+import {Suspense, useState, useEffect} from "react";
 
 const DocumentCreatePage = () => {
   const {documentTypeId} = useParams<{documentTypeId: string;}>() ?? {};
@@ -37,16 +37,16 @@ const DocumentCreatePage = () => {
     }
   }, [documentFields]);
 
-  const handleFormChange = useCallback((updatedFields: { [key: string]: any }) => {
-    setEntry((prevEntry) => ({
-      ...prevEntry,
-      fields: prevEntry.fields.map((field) => ({
-        ...field,
-        value: updatedFields[field.id]
-      }))
-    }));
+  const handleFormChange = (updatedFields: { [key: string]: any }) => {
+    // setEntry((prevEntry) => ({
+    //   ...prevEntry,
+    //   fields: prevEntry.fields.map((field) => ({
+    //     ...field,
+    //     value: updatedFields[field.id]
+    //   }))
+    // }));
     console.log("Updated form values:", updatedFields);
-  }, []);
+  };
 
   if (typeError || fieldsError) {
     return (
diff --git a/hosting/src/components/Form/DynamicForm.tsx b/hosting/src/components/Form/DynamicForm.tsx
index 9f589432..32fe28dd 100644
--- a/hosting/src/components/Form/DynamicForm.tsx
+++ b/hosting/src/components/Form/DynamicForm.tsx
@@ -9,12 +9,14 @@ import {
   RadioButton,
   Switcher,
   TextArea,
+  TextField
 } from "@/components/Form";
 import Loader from "@/components/common/Loader";
 import {FieldType} from "@functions/definitions/FieldType";
 import {v4 as uuidv4} from "uuid";
 import {Timestamp} from 'firebase/firestore';
 import {Option} from '@/components/Form/Dropdown';
+import {Formik, Form} from "formik";
 
 export interface DynamicFormField {
   id: string;
@@ -30,7 +32,7 @@ export interface DynamicFormField {
 export interface DynamicFormProps {
   readonlyMode: boolean;
   fields: DynamicFormField[];
-  onFieldsChange?: (fields: DynamicFormField[]) => void;
+  onFieldsChange?: (fields: { [key: string]: any }) => void;
 }
 
 export const initialProps: DynamicFormProps = {
@@ -43,26 +45,21 @@ export function DynamicForm({
   fields,
   onFieldsChange
 }: DynamicFormProps) {
-  const [testInput, setTestInput] = useState()
-  const [formValues, setFormValues] = useState<DynamicFormField[]>([]);
+  const [formValues, setFormValues] = useState<{ [key: string]: any }>([]);
 
   useEffect(() => {
-    if (fields) {
-      console.info('fields :: ', fields)
-      setFormValues(fields)
-      console.info('formValues :: ', formValues)
-    }
+    const initialValues = fields.reduce((acc, field) => {
+      acc[field.id] = field.value || "";
+      return acc;
+    }, {} as { [key: string]: any });
+    setFormValues(initialValues);
+  }, [fields]);
 
-    return () => {
-      setFormValues([])
+  useEffect(() => {
+    if (onFieldsChange) {
+      onFieldsChange(formValues);
     }
-  }, [fields])
-
-  // useEffect(() => {
-  //   if (onFieldsChange) {
-  //     onFieldsChange(formValues);
-  //   }
-  // }, [formValues, onFieldsChange]);
+  }, [formValues, onFieldsChange]);
 
   const handleOnChange = (value: any) => {
     console.info('handleOnChange :: ', value)
@@ -73,11 +70,6 @@ export function DynamicForm({
     // }));
   }
 
-  const handleTestInput = (value: any) => {
-    setTestInput(value.target.value)
-    console.info('handleTestInput :: ', value)
-  }
-
   const renderFormElement = (field: DynamicFormField, fieldIndex: number) => {
     const formId = uuidv4();
     const formgroupKey = `formgroup-${formId}-${fieldIndex}`;
@@ -88,7 +80,7 @@ export function DynamicForm({
       case FieldType.TextLine:
         return (
           <FormGroup key={formgroupKey} label={field.label} disabled={field.disabled || readonlyMode}>
-            <Input key={inputKey} type={field.inputType || "text"} disabled={field.disabled || readonlyMode} placeholder={field.placeholder} value={testInput} onChange={handleTestInput} />
+            <TextField key={inputKey} name={field.id} placeholder={field.placeholder} disabled={field.disabled || readonlyMode} />
           </FormGroup>
         );
       case FieldType.TextboxRich:
@@ -129,7 +121,21 @@ export function DynamicForm({
     <>
       formValues :: {JSON.stringify(formValues)}
       <Suspense fallback={<Loader />}>
-        {formValues.map((field, index) => renderFormElement(field, index))}
+        <Formik
+          initialValues={formValues}
+          onSubmit={(values, actions) => {
+            setTimeout(() => {
+              console.info(JSON.stringify(values, null, 2))
+              actions.setSubmitting(false);
+            }, 1000);
+          }}
+        >
+          {({handleSubmit}) => (
+            <Form onSubmit={handleSubmit}>
+              {fields.map((field, index) => renderFormElement(field, index))}
+            </Form>
+          )}
+        </Formik>
       </Suspense>
     </>
   )
diff --git a/hosting/src/components/Form/TextField.tsx b/hosting/src/components/Form/TextField.tsx
new file mode 100644
index 00000000..e8c212c2
--- /dev/null
+++ b/hosting/src/components/Form/TextField.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import {useField} from "formik";
+
+interface TextFieldProps {
+  id?: string;
+  name: string;
+  label?: string;
+  disabled?: boolean;
+  placeholder?: string;
+}
+
+/**
+ * TextField component for text input fields.
+ * @return {JSX.Element} The rendered input component.
+ */
+export function TextField({...props}: TextFieldProps) {
+  const [field, meta] = useField(props);
+
+  return (
+    <>
+      <input 
+        {...field}
+        {...props}
+        className="w-full rounded-lg border-[1.5px] border-stroke bg-transparent px-5 py-3 text-black outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter dark:border-form-strokedark dark:bg-form-input dark:text-white dark:focus:border-primary dark:disabled:bg-black"
+      />
+      {meta.touched && meta.error ? (
+        <div className="error">{meta.error}</div>
+      ) : null}
+    </>
+  );
+}
diff --git a/hosting/src/components/Form/index.tsx b/hosting/src/components/Form/index.tsx
index fd004031..c3d2e189 100644
--- a/hosting/src/components/Form/index.tsx
+++ b/hosting/src/components/Form/index.tsx
@@ -8,4 +8,5 @@ export {RadioButton} from "./RadioButton";
 export {Select} from "./Select";
 export {Switcher} from "./Switcher";
 export {TextArea} from "./TextArea";
+export {TextField} from "./TextField";
 export * from "./DynamicForm";

From c5564b8b81b5636201d305a8d42a4e49af9eaee5 Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Wed, 3 Jul 2024 16:39:20 +0700
Subject: [PATCH 20/23] idkw when state is update the whole parent component
 will re-render

---
 hosting/package-lock.json                     | 13 -------
 hosting/package.json                          |  1 -
 .../content/[documentTypeId]/create/page.tsx  | 15 ++++----
 hosting/src/components/Form/DynamicForm.tsx   | 35 ++++++++++---------
 4 files changed, 28 insertions(+), 36 deletions(-)

diff --git a/hosting/package-lock.json b/hosting/package-lock.json
index c0e3b5ae..6cff56ee 100644
--- a/hosting/package-lock.json
+++ b/hosting/package-lock.json
@@ -23,7 +23,6 @@
         "react": "^18.3.1",
         "react-apexcharts": "^1.4.1",
         "react-dom": "^18.3.1",
-        "uuid": "^10.0.0",
         "zod": "^3.23.8"
       },
       "devDependencies": {
@@ -7145,18 +7144,6 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
-    "node_modules/uuid": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
-      "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==",
-      "funding": [
-        "https://github.com/sponsors/broofa",
-        "https://github.com/sponsors/ctavan"
-      ],
-      "bin": {
-        "uuid": "dist/bin/uuid"
-      }
-    },
     "node_modules/w3c-keyname": {
       "version": "2.2.8",
       "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
diff --git a/hosting/package.json b/hosting/package.json
index 7562a350..f31ce362 100644
--- a/hosting/package.json
+++ b/hosting/package.json
@@ -27,7 +27,6 @@
     "react": "^18.3.1",
     "react-apexcharts": "^1.4.1",
     "react-dom": "^18.3.1",
-    "uuid": "^10.0.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {
diff --git a/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx b/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx
index 6bb38ab5..ccb39c38 100644
--- a/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx
+++ b/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx
@@ -37,14 +37,16 @@ const DocumentCreatePage = () => {
     }
   }, [documentFields]);
 
-  const handleFormChange = (updatedFields: { [key: string]: any }) => {
-    // setEntry((prevEntry) => ({
-    //   ...prevEntry,
-    //   fields: prevEntry.fields.map((field) => ({
+  const handleFieldsChange = (updatedFields: { [key: string]: any }) => {
+    // if (updatedFields) return
+
+    // setEntry({
+    //   ...entry,
+    //   fields: entry.fields.map((field) => ({
     //     ...field,
     //     value: updatedFields[field.id]
     //   }))
-    // }));
+    // });
     console.log("Updated form values:", updatedFields);
   };
 
@@ -69,7 +71,8 @@ const DocumentCreatePage = () => {
       {documentType && (
         <div className="grid grid-cols-1 gap-9">
           <ContentCard title={`Create New ${documentType.titleSingular.translated}`}>
-            <DynamicForm readonlyMode={entry.readonlyMode} fields={entry.fields} onFieldsChange={handleFormChange} />
+            entry :: {JSON.stringify(entry)}
+            <DynamicForm readonlyMode={entry.readonlyMode} fields={entry.fields} onFieldsChange={handleFieldsChange} />
           </ContentCard>
         </div>
       )}
diff --git a/hosting/src/components/Form/DynamicForm.tsx b/hosting/src/components/Form/DynamicForm.tsx
index 32fe28dd..97b53a35 100644
--- a/hosting/src/components/Form/DynamicForm.tsx
+++ b/hosting/src/components/Form/DynamicForm.tsx
@@ -13,7 +13,6 @@ import {
 } from "@/components/Form";
 import Loader from "@/components/common/Loader";
 import {FieldType} from "@functions/definitions/FieldType";
-import {v4 as uuidv4} from "uuid";
 import {Timestamp} from 'firebase/firestore';
 import {Option} from '@/components/Form/Dropdown';
 import {Formik, Form} from "formik";
@@ -61,33 +60,37 @@ export function DynamicForm({
     }
   }, [formValues, onFieldsChange]);
 
-  const handleOnChange = (value: any) => {
-    console.info('handleOnChange :: ', value)
-    // field.value = value
-    // setFormValues(prevValues => ({
-    //   ...prevValues,
-    //   [id]: value
-    // }));
+  const handleOnChange = (fieldKey: string, e: any) => {
+    if (!fieldKey && !e) return
+
+    const {name, value} = e.target
+    console.info('handleOnChange fieldKey :: ', fieldKey)
+    console.info('handleOnChange name :: ', name)
+    console.info('handleOnChange value :: ', value)
+    
+    setFormValues(prevValues => ({
+      ...prevValues,
+      [fieldKey]: value
+    }));
   }
 
   const renderFormElement = (field: DynamicFormField, fieldIndex: number) => {
-    const formId = uuidv4();
-    const formgroupKey = `formgroup-${formId}-${fieldIndex}`;
-    const inputKey = `input-${formId}-${fieldIndex}`;
+    const formgroupKey = `formgroup-${fieldIndex}`;
+    const inputKey = `input-${fieldIndex}`;
 
     switch (field.fieldType) {
       case FieldType.InputText:
       case FieldType.TextLine:
         return (
           <FormGroup key={formgroupKey} label={field.label} disabled={field.disabled || readonlyMode}>
-            <TextField key={inputKey} name={field.id} placeholder={field.placeholder} disabled={field.disabled || readonlyMode} />
+            <Input key={inputKey} type="text" placeholder={field.placeholder} disabled={field.disabled || readonlyMode} onChange={(e) => handleOnChange(field.id, e)} />
           </FormGroup>
         );
       case FieldType.TextboxRich:
       case FieldType.TextRich:
         return (
           <FormGroup key={formgroupKey} label={field.label} disabled={field.disabled || readonlyMode}>
-            <TextArea key={inputKey} rows={6} disabled={field.disabled || readonlyMode} placeholder={field.placeholder} value={field.value} onChange={handleOnChange} />
+            <TextArea key={inputKey} rows={6} disabled={field.disabled || readonlyMode} placeholder={field.placeholder} value={field.value} onChange={(e) => handleOnChange(field.id, e)} />
           </FormGroup>
         );
       case FieldType.DatePicker:
@@ -98,14 +101,14 @@ export function DynamicForm({
             label={field.label}
             disabled={field.disabled || readonlyMode}
             placeholder={field.placeholder || "mm/dd/yyyy"}
-            onChange={handleOnChange}
+            onChange={(e) => handleOnChange(field.id, e)}
             defaultValue={(field.value as Timestamp).toDate()}
           />
         );
       case FieldType.FileUpload:
-        return <FileUpload key={inputKey} label={field.label} disabled={field.disabled || readonlyMode} onChange={handleOnChange} />;
+        return <FileUpload key={inputKey} label={field.label} disabled={field.disabled || readonlyMode} onChange={(e) => handleOnChange(field.id, e)} />;
       case FieldType.Switcher:
-        return <Switcher key={inputKey} disabled={field.disabled || readonlyMode} defaultChecked={field.value} onChange={handleOnChange} />;
+        return <Switcher key={inputKey} disabled={field.disabled || readonlyMode} defaultChecked={field.value} onChange={(e) => handleOnChange(field.id, e)} />;
       case FieldType.Radio:
         return <RadioButton key={inputKey} disabled={field.disabled || readonlyMode} label={field.label} defaultChecked={field.value} />;
       case FieldType.Checkbox:

From cbb73a9d59b6122d54c4aca599bcf557c6ccd9d8 Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Mon, 8 Jul 2024 08:03:01 +0700
Subject: [PATCH 21/23] fix dymnamic form

---
 hosting/package-lock.json                     | 77 ++-----------------
 hosting/package.json                          |  1 -
 .../content/[documentTypeId]/create/page.tsx  | 15 +---
 hosting/src/components/Form/DynamicForm.tsx   | 56 +++++++-------
 hosting/src/components/Form/index.tsx         |  1 -
 5 files changed, 34 insertions(+), 116 deletions(-)

diff --git a/hosting/package-lock.json b/hosting/package-lock.json
index 6cff56ee..376d546d 100644
--- a/hosting/package-lock.json
+++ b/hosting/package-lock.json
@@ -17,7 +17,6 @@
         "firebase": "^10.12.0",
         "firebaseui": "^6.1.0",
         "flatpickr": "^4.6.13",
-        "formik": "^2.4.6",
         "jsvectormap": "^1.5.3",
         "next": "^14.2.3",
         "react": "^18.3.1",
@@ -1602,15 +1601,6 @@
         "url": "https://github.com/sponsors/ueberdosis"
       }
     },
-    "node_modules/@types/hoist-non-react-statics": {
-      "version": "3.3.5",
-      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz",
-      "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==",
-      "dependencies": {
-        "@types/react": "*",
-        "hoist-non-react-statics": "^3.3.0"
-      }
-    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -1629,12 +1619,14 @@
     "node_modules/@types/prop-types": {
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
-      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
+      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
+      "dev": true
     },
     "node_modules/@types/react": {
       "version": "18.3.2",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.2.tgz",
       "integrity": "sha512-Btgg89dAnqD4vV7R3hlwOxgqobUQKgx3MmrQRi0yYbs/P0ym8XozIAlkqVilPqHQwXs4e9Tf63rrCgl58BcO4w==",
+      "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -2503,7 +2495,8 @@
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "dev": true
     },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
@@ -2585,14 +2578,6 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
-    "node_modules/deepmerge": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
-      "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/define-data-property": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
@@ -3739,30 +3724,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/formik": {
-      "version": "2.4.6",
-      "resolved": "https://registry.npmjs.org/formik/-/formik-2.4.6.tgz",
-      "integrity": "sha512-A+2EI7U7aG296q2TLGvNapDNTZp1khVt5Vk0Q/fyfSROss0V/V6+txt2aJnwEos44IxTCW/LYAi/zgWzlevj+g==",
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://opencollective.com/formik"
-        }
-      ],
-      "dependencies": {
-        "@types/hoist-non-react-statics": "^3.3.1",
-        "deepmerge": "^2.1.1",
-        "hoist-non-react-statics": "^3.3.0",
-        "lodash": "^4.17.21",
-        "lodash-es": "^4.17.21",
-        "react-fast-compare": "^2.0.1",
-        "tiny-warning": "^1.0.2",
-        "tslib": "^2.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0"
-      }
-    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -4113,14 +4074,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/hoist-non-react-statics": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
-      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-      "dependencies": {
-        "react-is": "^16.7.0"
-      }
-    },
     "node_modules/http-parser-js": {
       "version": "0.5.8",
       "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.8.tgz",
@@ -4808,16 +4761,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-    },
-    "node_modules/lodash-es": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
-      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
-    },
     "node_modules/lodash.camelcase": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
@@ -6030,11 +5973,6 @@
         "react": "^18.3.1"
       }
     },
-    "node_modules/react-fast-compare": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
-      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
-    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -6887,11 +6825,6 @@
         "node": ">=0.8"
       }
     },
-    "node_modules/tiny-warning": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
-      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
-    },
     "node_modules/tippy.js": {
       "version": "6.3.7",
       "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
diff --git a/hosting/package.json b/hosting/package.json
index f31ce362..229d8115 100644
--- a/hosting/package.json
+++ b/hosting/package.json
@@ -21,7 +21,6 @@
     "firebase": "^10.12.0",
     "firebaseui": "^6.1.0",
     "flatpickr": "^4.6.13",
-    "formik": "^2.4.6",
     "jsvectormap": "^1.5.3",
     "next": "^14.2.3",
     "react": "^18.3.1",
diff --git a/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx b/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx
index ccb39c38..575a43cb 100644
--- a/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx
+++ b/hosting/src/app/(protected)/content/[documentTypeId]/create/page.tsx
@@ -37,17 +37,8 @@ const DocumentCreatePage = () => {
     }
   }, [documentFields]);
 
-  const handleFieldsChange = (updatedFields: { [key: string]: any }) => {
-    // if (updatedFields) return
-
-    // setEntry({
-    //   ...entry,
-    //   fields: entry.fields.map((field) => ({
-    //     ...field,
-    //     value: updatedFields[field.id]
-    //   }))
-    // });
-    console.log("Updated form values:", updatedFields);
+  const handleSave = (value: { [key: string]: any }) => {
+    console.log("handleSave ::", value);
   };
 
   if (typeError || fieldsError) {
@@ -72,7 +63,7 @@ const DocumentCreatePage = () => {
         <div className="grid grid-cols-1 gap-9">
           <ContentCard title={`Create New ${documentType.titleSingular.translated}`}>
             entry :: {JSON.stringify(entry)}
-            <DynamicForm readonlyMode={entry.readonlyMode} fields={entry.fields} onFieldsChange={handleFieldsChange} />
+            <DynamicForm readonlyMode={entry.readonlyMode} fields={entry.fields} onSave={handleSave} />
           </ContentCard>
         </div>
       )}
diff --git a/hosting/src/components/Form/DynamicForm.tsx b/hosting/src/components/Form/DynamicForm.tsx
index 97b53a35..1c9498c1 100644
--- a/hosting/src/components/Form/DynamicForm.tsx
+++ b/hosting/src/components/Form/DynamicForm.tsx
@@ -8,14 +8,13 @@ import {
   Input,
   RadioButton,
   Switcher,
-  TextArea,
-  TextField
+  TextArea
 } from "@/components/Form";
+import {Button} from "@/components/Button";
 import Loader from "@/components/common/Loader";
 import {FieldType} from "@functions/definitions/FieldType";
 import {Timestamp} from 'firebase/firestore';
 import {Option} from '@/components/Form/Dropdown';
-import {Formik, Form} from "formik";
 
 export interface DynamicFormField {
   id: string;
@@ -31,7 +30,8 @@ export interface DynamicFormField {
 export interface DynamicFormProps {
   readonlyMode: boolean;
   fields: DynamicFormField[];
-  onFieldsChange?: (fields: { [key: string]: any }) => void;
+  onSave?: (fields: { [key: string]: any }) => void;
+  onSubmit?: (fields: { [key: string]: any }) => void;
 }
 
 export const initialProps: DynamicFormProps = {
@@ -42,7 +42,8 @@ export const initialProps: DynamicFormProps = {
 export function DynamicForm({
   readonlyMode,
   fields,
-  onFieldsChange
+  onSave,
+  onSubmit
 }: DynamicFormProps) {
   const [formValues, setFormValues] = useState<{ [key: string]: any }>([]);
 
@@ -54,19 +55,10 @@ export function DynamicForm({
     setFormValues(initialValues);
   }, [fields]);
 
-  useEffect(() => {
-    if (onFieldsChange) {
-      onFieldsChange(formValues);
-    }
-  }, [formValues, onFieldsChange]);
-
   const handleOnChange = (fieldKey: string, e: any) => {
     if (!fieldKey && !e) return
 
-    const {name, value} = e.target
-    console.info('handleOnChange fieldKey :: ', fieldKey)
-    console.info('handleOnChange name :: ', name)
-    console.info('handleOnChange value :: ', value)
+    const {value} = e.target
     
     setFormValues(prevValues => ({
       ...prevValues,
@@ -74,6 +66,20 @@ export function DynamicForm({
     }));
   }
 
+  const handleSave = () => {
+    if (onSave) {
+      onSave(formValues);
+    }
+  }
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (onSubmit) {
+      onSubmit(formValues);
+    }
+  }
+
   const renderFormElement = (field: DynamicFormField, fieldIndex: number) => {
     const formgroupKey = `formgroup-${fieldIndex}`;
     const inputKey = `input-${fieldIndex}`;
@@ -124,21 +130,11 @@ export function DynamicForm({
     <>
       formValues :: {JSON.stringify(formValues)}
       <Suspense fallback={<Loader />}>
-        <Formik
-          initialValues={formValues}
-          onSubmit={(values, actions) => {
-            setTimeout(() => {
-              console.info(JSON.stringify(values, null, 2))
-              actions.setSubmitting(false);
-            }, 1000);
-          }}
-        >
-          {({handleSubmit}) => (
-            <Form onSubmit={handleSubmit}>
-              {fields.map((field, index) => renderFormElement(field, index))}
-            </Form>
-          )}
-        </Formik>
+        <form onSubmit={handleSubmit}>
+          {fields.map((field, index) => renderFormElement(field, index))}
+
+          <Button key="actionButton" onClick={handleSave} title="Save" />
+        </form>
       </Suspense>
     </>
   )
diff --git a/hosting/src/components/Form/index.tsx b/hosting/src/components/Form/index.tsx
index c3d2e189..fd004031 100644
--- a/hosting/src/components/Form/index.tsx
+++ b/hosting/src/components/Form/index.tsx
@@ -8,5 +8,4 @@ export {RadioButton} from "./RadioButton";
 export {Select} from "./Select";
 export {Switcher} from "./Switcher";
 export {TextArea} from "./TextArea";
-export {TextField} from "./TextField";
 export * from "./DynamicForm";

From ab47a883b03c79e11740ef67b643b974f38e7211 Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Mon, 8 Jul 2024 08:23:35 +0700
Subject: [PATCH 22/23] adjust button component

---
 hosting/src/components/Button.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/hosting/src/components/Button.tsx b/hosting/src/components/Button.tsx
index 40e73142..056ebb0a 100644
--- a/hosting/src/components/Button.tsx
+++ b/hosting/src/components/Button.tsx
@@ -2,13 +2,14 @@ import React, {useState} from "react";
 
 interface ButtonProps {
   title: string;
+  className?: string;
   onClick: () => Promise<void> | void;
   style?: "normal" | "rounded" | "outline" | "icon";
-  color?: "primary" | "meta-3" | "black";
+  color?: "primary" | "danger" | "meta-3" | "black";
   children?: React.ReactNode;
 }
 
-export function Button({title, onClick, style = "normal", color = "primary", children}: ButtonProps) {
+export function Button({title, onClick, style = "normal", color = "primary", children, className = ""}: ButtonProps) {
   const [isLoading, setIsLoading] = useState(false);
 
   const handleClick = async () => {
@@ -32,7 +33,7 @@ export function Button({title, onClick, style = "normal", color = "primary", chi
     "lg:px-8",
     "xl:px-10",
     isLoading ? "opacity-50 cursor-not-allowed" : "",
-  ];
+  ].concat(className);
 
   switch (color) {
     case "primary":
@@ -44,6 +45,9 @@ export function Button({title, onClick, style = "normal", color = "primary", chi
     case "black":
       styles.push("bg-black", "text-white");
       break;
+    case "danger":
+      styles.push("bg-danger", "text-white");
+      break;
     default:
       styles.push("bg-primary", "text-white");
   }

From 0c375b8c3976243b57e8f84e8b9d61ae9fb20145 Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Mon, 8 Jul 2024 08:36:23 +0700
Subject: [PATCH 23/23] fix pruneData

---
 hosting/src/components/Form/DynamicForm.tsx | 31 ++++++++++++++-------
 1 file changed, 21 insertions(+), 10 deletions(-)

diff --git a/hosting/src/components/Form/DynamicForm.tsx b/hosting/src/components/Form/DynamicForm.tsx
index 1c9498c1..a635d352 100644
--- a/hosting/src/components/Form/DynamicForm.tsx
+++ b/hosting/src/components/Form/DynamicForm.tsx
@@ -45,24 +45,33 @@ export function DynamicForm({
   onSave,
   onSubmit
 }: DynamicFormProps) {
-  const [formValues, setFormValues] = useState<{ [key: string]: any }>([]);
+  const [formValues, setFormValues] = useState<{ [key: string]: any }>({});
 
   useEffect(() => {
+    initialForm();
+  }, [fields]);
+
+  const initialForm = () => {
     const initialValues = fields.reduce((acc, field) => {
       acc[field.id] = field.value || "";
       return acc;
     }, {} as { [key: string]: any });
     setFormValues(initialValues);
-  }, [fields]);
+  }
+
+  const pruneData = () => {
+    console.info('pruneData')
+    initialForm();
+  }
 
   const handleOnChange = (fieldKey: string, e: any) => {
-    if (!fieldKey && !e) return
+    if (!fieldKey && !e) return;
 
-    const {value} = e.target
+    const {value, checked, type} = e.target
     
     setFormValues(prevValues => ({
       ...prevValues,
-      [fieldKey]: value
+      [fieldKey]: type === "checkbox" ? checked : value
     }));
   }
 
@@ -89,14 +98,14 @@ export function DynamicForm({
       case FieldType.TextLine:
         return (
           <FormGroup key={formgroupKey} label={field.label} disabled={field.disabled || readonlyMode}>
-            <Input key={inputKey} type="text" placeholder={field.placeholder} disabled={field.disabled || readonlyMode} onChange={(e) => handleOnChange(field.id, e)} />
+            <Input key={inputKey} type="text" placeholder={field.placeholder} disabled={field.disabled || readonlyMode} value={formValues[field.id] || ""} onChange={(e) => handleOnChange(field.id, e)} />
           </FormGroup>
         );
       case FieldType.TextboxRich:
       case FieldType.TextRich:
         return (
           <FormGroup key={formgroupKey} label={field.label} disabled={field.disabled || readonlyMode}>
-            <TextArea key={inputKey} rows={6} disabled={field.disabled || readonlyMode} placeholder={field.placeholder} value={field.value} onChange={(e) => handleOnChange(field.id, e)} />
+            <TextArea key={inputKey} rows={6} disabled={field.disabled || readonlyMode} placeholder={field.placeholder} value={formValues[field.id] || ""} onChange={(e) => handleOnChange(field.id, e)} />
           </FormGroup>
         );
       case FieldType.DatePicker:
@@ -108,15 +117,15 @@ export function DynamicForm({
             disabled={field.disabled || readonlyMode}
             placeholder={field.placeholder || "mm/dd/yyyy"}
             onChange={(e) => handleOnChange(field.id, e)}
-            defaultValue={(field.value as Timestamp).toDate()}
+            defaultValue={(formValues[field.id] as Timestamp).toDate()}
           />
         );
       case FieldType.FileUpload:
         return <FileUpload key={inputKey} label={field.label} disabled={field.disabled || readonlyMode} onChange={(e) => handleOnChange(field.id, e)} />;
       case FieldType.Switcher:
-        return <Switcher key={inputKey} disabled={field.disabled || readonlyMode} defaultChecked={field.value} onChange={(e) => handleOnChange(field.id, e)} />;
+        return <Switcher key={inputKey} disabled={field.disabled || readonlyMode} defaultChecked={formValues[field.id]} onChange={(e) => handleOnChange(field.id, e)} />;
       case FieldType.Radio:
-        return <RadioButton key={inputKey} disabled={field.disabled || readonlyMode} label={field.label} defaultChecked={field.value} />;
+        return <RadioButton key={inputKey} disabled={field.disabled || readonlyMode} label={field.label} defaultChecked={formValues[field.id]} />;
       case FieldType.Checkbox:
         return <Checkbox key={inputKey} />;
       case FieldType.Dropdown:
@@ -133,6 +142,8 @@ export function DynamicForm({
         <form onSubmit={handleSubmit}>
           {fields.map((field, index) => renderFormElement(field, index))}
 
+          <Button key="actionReset" onClick={pruneData} title="Reset" color="danger" className="mr-4" />
+          
           <Button key="actionButton" onClick={handleSave} title="Save" />
         </form>
       </Suspense>