From 0706406f894ddb4a40fdc0a58bc7cf2f2001b6f0 Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Wed, 25 Sep 2024 15:35:39 +0700
Subject: [PATCH 01/11] add badge

---
 .../content/article/[documentId]/page.tsx     | 68 ++++++++++++-------
 libs/ui-components/src/Badge.tsx              | 12 ++++
 libs/ui-components/src/common/PageHeader.tsx  |  2 +-
 libs/ui-components/src/index.ts               |  1 +
 4 files changed, 56 insertions(+), 27 deletions(-)
 create mode 100644 libs/ui-components/src/Badge.tsx

diff --git a/apps/cms/src/app/(protected)/content/article/[documentId]/page.tsx b/apps/cms/src/app/(protected)/content/article/[documentId]/page.tsx
index 644074c9..c6c9d388 100644
--- a/apps/cms/src/app/(protected)/content/article/[documentId]/page.tsx
+++ b/apps/cms/src/app/(protected)/content/article/[documentId]/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 import {UserNotification} from "@tanam/domain-frontend";
-import {Button, Input, Loader, Notification, PageHeader, TiptapEditor} from "@tanam/ui-components";
+import {Badge, Button, Input, Loader, Notification, PageHeader, TiptapEditor} from "@tanam/ui-components";
 import {useParams, useRouter} from "next/navigation";
 import {Suspense, useEffect, useState} from "react";
 import {useCrudTanamDocument, useTanamDocument} from "../../../../../hooks/useTanamDocuments";
@@ -12,8 +12,9 @@ export default function DocumentDetailsPage() {
   const {update, error: writeError} = useCrudTanamDocument();
 
   const [title, setTitle] = useState<string>("");
+  const [tags, setTags] = useState<string[]>([]);
   const [readonlyMode] = useState<boolean>(false);
-  const [updateTitleShown, setUpdateTitleShown] = useState<boolean>(false);
+  const [updateMetadata, setUpdateMetadata] = useState<boolean>(false);
   const [notification, setNotification] = useState<UserNotification | null>(null);
 
   useEffect(() => {
@@ -27,17 +28,22 @@ export default function DocumentDetailsPage() {
   }, [documentError, writeError]);
 
   useEffect(() => {
-    if (updateTitleShown) return;
+    if (updateMetadata) return;
 
     onDocumentTitleChange(title);
-  }, [updateTitleShown]);
+  }, [updateMetadata]);
 
   useEffect(() => {
     if (document) {
+      console.info("document :: ", document);
       setTitle(document.data.title as string);
+      setTags(document.data.tags as string[]);
     }
 
-    return () => setTitle("");
+    return () => {
+      setTitle("");
+      setTags([]);
+    };
   }, [document]);
 
   async function onDocumentTitleChange(title: string) {
@@ -69,27 +75,37 @@ export default function DocumentDetailsPage() {
       <Suspense fallback={<Loader />}>
         {document ? (
           <>
-            <div className="relative w-full flex flex-row gap-3">
-              {!updateTitleShown && <PageHeader pageName={document.data.title as string} />}
-
-              {updateTitleShown && (
-                <Input
-                  key="titleArticle"
-                  type="text"
-                  placeholder="Title"
-                  disabled={readonlyMode}
-                  value={title || ""}
-                  onChange={(e) => setTitle(e.target.value)}
-                />
-              )}
-
-              <Button
-                title={updateTitleShown ? "Save Changes" : "Edit Title"}
-                onClick={() => setUpdateTitleShown(!updateTitleShown)}
-                style="rounded"
-              >
-                <span className="i-ic-outline-edit mr-2" />
-              </Button>
+            <div className="relative w-full pr-5 pl-5">
+              <div className="relative w-full flex flex-row mb-4">
+                <Button
+                  title={updateMetadata ? "Save Changes" : "Edit Metadata"}
+                  onClick={() => setUpdateMetadata(!updateMetadata)}
+                  style="rounded"
+                >
+                  <span className="i-ic-outline-edit mr-2" />
+                </Button>
+              </div>
+
+              <div className="relative w-full flex flex-row mb-4">
+                {!updateMetadata && <PageHeader pageName={document.data.title as string} />}
+
+                {updateMetadata && (
+                  <Input
+                    key="titleArticle"
+                    type="text"
+                    placeholder="Title"
+                    disabled={readonlyMode}
+                    value={title || ""}
+                    onChange={(e) => setTitle(e.target.value)}
+                  />
+                )}
+              </div>
+
+              <div className="relative w-full flex flex-row gap-2">
+                {tags && tags.map((tag, index) => <Badge key={index} title={tag} />)}
+              </div>
+
+              <hr className="mt-4" />
             </div>
 
             {document?.data.content && (
diff --git a/libs/ui-components/src/Badge.tsx b/libs/ui-components/src/Badge.tsx
new file mode 100644
index 00000000..199a79b9
--- /dev/null
+++ b/libs/ui-components/src/Badge.tsx
@@ -0,0 +1,12 @@
+interface BadgeProps {
+  title: string;
+  className?: string;
+}
+
+export function Badge(props: BadgeProps) {
+  const {title, className} = props;
+
+  const badgeClassName = `block border px-3 py-1 text-xs font-semibold rounded-full ${className}`;
+
+  return <span className={badgeClassName}>{title}</span>;
+}
diff --git a/libs/ui-components/src/common/PageHeader.tsx b/libs/ui-components/src/common/PageHeader.tsx
index 33220242..926430c9 100644
--- a/libs/ui-components/src/common/PageHeader.tsx
+++ b/libs/ui-components/src/common/PageHeader.tsx
@@ -5,7 +5,7 @@ interface PageHeaderProps {
 
 export function PageHeader({pageName, pageActions = []}: PageHeaderProps) {
   return (
-    <div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+    <div className="relative flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
       <h2 className="text-title-md2 font-semibold text-black dark:text-white">{pageName}</h2>
       {pageActions.length > 0 && <div>{pageActions.map((action) => action)}</div>}
     </div>
diff --git a/libs/ui-components/src/index.ts b/libs/ui-components/src/index.ts
index 5ef018ba..423ff29c 100644
--- a/libs/ui-components/src/index.ts
+++ b/libs/ui-components/src/index.ts
@@ -11,6 +11,7 @@ export * from "./Table";
 export * from "./Tiptap/TiptapEditor";
 
 // Other Components
+export * from "./Badge";
 export * from "./Button";
 export * from "./CropImage";
 export * from "./FilePicker";

From acad8f8396543f62ddd3b86cba80ba233083c5e1 Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Wed, 25 Sep 2024 15:47:41 +0700
Subject: [PATCH 02/11] add description article

---
 .../content/article/[documentId]/page.tsx     | 30 ++++++++++++++++---
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/apps/cms/src/app/(protected)/content/article/[documentId]/page.tsx b/apps/cms/src/app/(protected)/content/article/[documentId]/page.tsx
index c6c9d388..3134a158 100644
--- a/apps/cms/src/app/(protected)/content/article/[documentId]/page.tsx
+++ b/apps/cms/src/app/(protected)/content/article/[documentId]/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 import {UserNotification} from "@tanam/domain-frontend";
-import {Badge, Button, Input, Loader, Notification, PageHeader, TiptapEditor} from "@tanam/ui-components";
+import {Badge, Button, Input, Loader, Notification, PageHeader, TextArea, TiptapEditor} from "@tanam/ui-components";
 import {useParams, useRouter} from "next/navigation";
 import {Suspense, useEffect, useState} from "react";
 import {useCrudTanamDocument, useTanamDocument} from "../../../../../hooks/useTanamDocuments";
@@ -12,6 +12,7 @@ export default function DocumentDetailsPage() {
   const {update, error: writeError} = useCrudTanamDocument();
 
   const [title, setTitle] = useState<string>("");
+  const [description, setDescription] = useState<string>("");
   const [tags, setTags] = useState<string[]>([]);
   const [readonlyMode] = useState<boolean>(false);
   const [updateMetadata, setUpdateMetadata] = useState<boolean>(false);
@@ -37,15 +38,21 @@ export default function DocumentDetailsPage() {
     if (document) {
       console.info("document :: ", document);
       setTitle(document.data.title as string);
+      setDescription(document.data.blurb as string);
       setTags(document.data.tags as string[]);
     }
 
     return () => {
-      setTitle("");
-      setTags([]);
+      pruneState();
     };
   }, [document]);
 
+  function pruneState() {
+    setTitle("");
+    setDescription("");
+    setTags([]);
+  }
+
   async function onDocumentTitleChange(title: string) {
     console.log("[onDocumentTitleChange]", title);
     if (!document) {
@@ -101,8 +108,23 @@ export default function DocumentDetailsPage() {
                 )}
               </div>
 
+              <div className="relative w-full flex flex-row mb-4">
+                {!updateMetadata && <p>{document.data.blurb as string}</p>}
+
+                {updateMetadata && (
+                  <TextArea
+                    key="descriptionArticle"
+                    placeholder="Description"
+                    rows={3}
+                    disabled={readonlyMode}
+                    value={description || ""}
+                    onChange={(e) => setDescription(e.target.value)}
+                  />
+                )}
+              </div>
+
               <div className="relative w-full flex flex-row gap-2">
-                {tags && tags.map((tag, index) => <Badge key={index} title={tag} />)}
+                {!updateMetadata && tags.length > 0 && tags.map((tag, index) => <Badge key={index} title={tag} />)}
               </div>
 
               <hr className="mt-4" />

From 51963fb3c60b6c9d7e3f7f6e06e9a5c10d51a4a1 Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Wed, 25 Sep 2024 15:53:00 +0700
Subject: [PATCH 03/11] integrate document update

---
 .../app/(protected)/content/article/[documentId]/page.tsx  | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/cms/src/app/(protected)/content/article/[documentId]/page.tsx b/apps/cms/src/app/(protected)/content/article/[documentId]/page.tsx
index 3134a158..33395676 100644
--- a/apps/cms/src/app/(protected)/content/article/[documentId]/page.tsx
+++ b/apps/cms/src/app/(protected)/content/article/[documentId]/page.tsx
@@ -31,7 +31,7 @@ export default function DocumentDetailsPage() {
   useEffect(() => {
     if (updateMetadata) return;
 
-    onDocumentTitleChange(title);
+    fetchDocumentUpdate(title, description);
   }, [updateMetadata]);
 
   useEffect(() => {
@@ -53,13 +53,14 @@ export default function DocumentDetailsPage() {
     setTags([]);
   }
 
-  async function onDocumentTitleChange(title: string) {
-    console.log("[onDocumentTitleChange]", title);
+  async function fetchDocumentUpdate(title: string, blurb: string) {
+    console.log("[fetchDocumentUpdate]", title);
     if (!document) {
       return;
     }
 
     document.data.title = title;
+    document.data.blurb = blurb;
     await update(document);
   }
 

From c55d5fe5ffd08bc45cb847ce37e7a2f17e8e9634 Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Wed, 25 Sep 2024 16:26:55 +0700
Subject: [PATCH 04/11] add multiple text component

---
 .../content/article/[documentId]/page.tsx     | 16 ++++-
 libs/ui-components/src/Form/MultipleText.tsx  | 67 +++++++++++++++++++
 libs/ui-components/src/Form/index.tsx         |  1 +
 3 files changed, 83 insertions(+), 1 deletion(-)
 create mode 100644 libs/ui-components/src/Form/MultipleText.tsx

diff --git a/apps/cms/src/app/(protected)/content/article/[documentId]/page.tsx b/apps/cms/src/app/(protected)/content/article/[documentId]/page.tsx
index 33395676..211454b7 100644
--- a/apps/cms/src/app/(protected)/content/article/[documentId]/page.tsx
+++ b/apps/cms/src/app/(protected)/content/article/[documentId]/page.tsx
@@ -1,6 +1,16 @@
 "use client";
 import {UserNotification} from "@tanam/domain-frontend";
-import {Badge, Button, Input, Loader, Notification, PageHeader, TextArea, TiptapEditor} from "@tanam/ui-components";
+import {
+  Badge,
+  Button,
+  Input,
+  Loader,
+  MultipleText,
+  Notification,
+  PageHeader,
+  TextArea,
+  TiptapEditor,
+} from "@tanam/ui-components";
 import {useParams, useRouter} from "next/navigation";
 import {Suspense, useEffect, useState} from "react";
 import {useCrudTanamDocument, useTanamDocument} from "../../../../../hooks/useTanamDocuments";
@@ -126,6 +136,10 @@ export default function DocumentDetailsPage() {
 
               <div className="relative w-full flex flex-row gap-2">
                 {!updateMetadata && tags.length > 0 && tags.map((tag, index) => <Badge key={index} title={tag} />)}
+
+                {updateMetadata && (
+                  <MultipleText placeholder="Add tags" value={tags} onChange={(value) => setTags(value)} />
+                )}
               </div>
 
               <hr className="mt-4" />
diff --git a/libs/ui-components/src/Form/MultipleText.tsx b/libs/ui-components/src/Form/MultipleText.tsx
new file mode 100644
index 00000000..bac598e5
--- /dev/null
+++ b/libs/ui-components/src/Form/MultipleText.tsx
@@ -0,0 +1,67 @@
+import {useState} from "react";
+import {Button} from "./../Button";
+import {Input} from "./Input";
+
+interface MultipleTextProps {
+  title?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  value?: string[];
+  onChange?: (value: string[]) => void;
+}
+
+export function MultipleText(props: MultipleTextProps) {
+  const {title, placeholder = "Add something here", disabled, value = [], onChange} = props;
+
+  const [entry, setEntry] = useState("");
+  const [entries, setEntries] = useState(value);
+
+  function handleAddItem() {
+    if (entry.trim()) {
+      const updatedArray = [...entries, entry.trim()];
+
+      setEntries(updatedArray);
+      onChange && onChange(updatedArray);
+      setEntry("");
+    }
+  }
+
+  function handleRemoveItem(index: number) {
+    const updatedArray = entries.filter((_, i) => i !== index);
+
+    setEntries(updatedArray);
+    onChange && onChange(updatedArray);
+  }
+
+  return (
+    <div className="relative w-full">
+      {title && <h3 className="text-lg font-semibold mb-2">{title}</h3>}
+
+      <div className="flex gap-2 mb-4">
+        <Input
+          key="multipleTextInput"
+          type="text"
+          placeholder={placeholder}
+          disabled={disabled}
+          value={entry}
+          onChange={(e) => setEntry(e.target.value)}
+        />
+
+        <Button title="Add" onClick={handleAddItem} style="rounded" />
+      </div>
+
+      {entries.length > 0 && (
+        <ul className="space-y-2">
+          {entries.map((value, index) => (
+            <li key={index} className="flex items-center justify-between p-2 bg-gray-100 rounded">
+              <span className="text-gray-700">{value}</span>
+              <button onClick={() => handleRemoveItem(index)} className="text-red-500 hover:text-red-700">
+                Remove
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
diff --git a/libs/ui-components/src/Form/index.tsx b/libs/ui-components/src/Form/index.tsx
index 897dd50d..e6edb0d1 100644
--- a/libs/ui-components/src/Form/index.tsx
+++ b/libs/ui-components/src/Form/index.tsx
@@ -4,6 +4,7 @@ export {Dropdown} from "./Dropdown";
 export {FileUpload} from "./FileUpload";
 export {FormGroup} from "./FormGroup";
 export {Input} from "./Input";
+export {MultipleText} from "./MultipleText";
 export {RadioButton} from "./RadioButton";
 export {Select} from "./Select";
 export {Switcher} from "./Switcher";

From 6038de73014842684df0a52d6558b81bf68f58bf Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Wed, 25 Sep 2024 16:39:38 +0700
Subject: [PATCH 05/11] multiple text with badge

---
 libs/ui-components/src/Badge.tsx             | 14 ++++++++++++--
 libs/ui-components/src/Form/MultipleText.tsx | 17 +++++------------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/libs/ui-components/src/Badge.tsx b/libs/ui-components/src/Badge.tsx
index 199a79b9..88be83a0 100644
--- a/libs/ui-components/src/Badge.tsx
+++ b/libs/ui-components/src/Badge.tsx
@@ -1,12 +1,22 @@
 interface BadgeProps {
   title: string;
   className?: string;
+  onRemove?: () => void;
 }
 
 export function Badge(props: BadgeProps) {
-  const {title, className} = props;
+  const {title, className, onRemove} = props;
 
   const badgeClassName = `block border px-3 py-1 text-xs font-semibold rounded-full ${className}`;
 
-  return <span className={badgeClassName}>{title}</span>;
+  return (
+    <span className={badgeClassName}>
+      {title}
+      {onRemove && (
+        <button onClick={onRemove} aria-label="Remove badge" className="ml-2">
+          <span className="i-ic-close w-[10px] h-[10px]" />
+        </button>
+      )}
+    </span>
+  );
 }
diff --git a/libs/ui-components/src/Form/MultipleText.tsx b/libs/ui-components/src/Form/MultipleText.tsx
index bac598e5..f16af902 100644
--- a/libs/ui-components/src/Form/MultipleText.tsx
+++ b/libs/ui-components/src/Form/MultipleText.tsx
@@ -1,4 +1,5 @@
 import {useState} from "react";
+import {Badge} from "../Badge";
 import {Button} from "./../Button";
 import {Input} from "./Input";
 
@@ -50,18 +51,10 @@ export function MultipleText(props: MultipleTextProps) {
         <Button title="Add" onClick={handleAddItem} style="rounded" />
       </div>
 
-      {entries.length > 0 && (
-        <ul className="space-y-2">
-          {entries.map((value, index) => (
-            <li key={index} className="flex items-center justify-between p-2 bg-gray-100 rounded">
-              <span className="text-gray-700">{value}</span>
-              <button onClick={() => handleRemoveItem(index)} className="text-red-500 hover:text-red-700">
-                Remove
-              </button>
-            </li>
-          ))}
-        </ul>
-      )}
+      <div className="relative w-full flex flex-row gap-2">
+        {entries.length > 0 &&
+          entries.map((value, index) => <Badge key={index} title={value} onRemove={() => handleRemoveItem(index)} />)}
+      </div>
     </div>
   );
 }

From c0e4fa384c7fdbf2480c43921ffd59e2f7d1dbd0 Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Wed, 25 Sep 2024 16:42:59 +0700
Subject: [PATCH 06/11] integrate tags data

---
 .../app/(protected)/content/article/[documentId]/page.tsx   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/cms/src/app/(protected)/content/article/[documentId]/page.tsx b/apps/cms/src/app/(protected)/content/article/[documentId]/page.tsx
index 211454b7..3a38fc5c 100644
--- a/apps/cms/src/app/(protected)/content/article/[documentId]/page.tsx
+++ b/apps/cms/src/app/(protected)/content/article/[documentId]/page.tsx
@@ -41,12 +41,11 @@ export default function DocumentDetailsPage() {
   useEffect(() => {
     if (updateMetadata) return;
 
-    fetchDocumentUpdate(title, description);
+    fetchDocumentUpdate(title, description, tags);
   }, [updateMetadata]);
 
   useEffect(() => {
     if (document) {
-      console.info("document :: ", document);
       setTitle(document.data.title as string);
       setDescription(document.data.blurb as string);
       setTags(document.data.tags as string[]);
@@ -63,7 +62,7 @@ export default function DocumentDetailsPage() {
     setTags([]);
   }
 
-  async function fetchDocumentUpdate(title: string, blurb: string) {
+  async function fetchDocumentUpdate(title: string, blurb: string, tags: string[]) {
     console.log("[fetchDocumentUpdate]", title);
     if (!document) {
       return;
@@ -71,6 +70,7 @@ export default function DocumentDetailsPage() {
 
     document.data.title = title;
     document.data.blurb = blurb;
+    document.data.tags = tags;
     await update(document);
   }
 

From 0e767872cc285b3e6967ec6141f94c85d7833bb6 Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Thu, 26 Sep 2024 08:42:51 +0700
Subject: [PATCH 07/11] fix badge responsive

---
 .../content/article/[documentId]/page.tsx     |  4 ++--
 libs/ui-components/src/Badge.tsx              | 22 +++++++++++--------
 libs/ui-components/src/Form/MultipleText.tsx  |  2 +-
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/apps/cms/src/app/(protected)/content/article/[documentId]/page.tsx b/apps/cms/src/app/(protected)/content/article/[documentId]/page.tsx
index 3a38fc5c..5dfebc92 100644
--- a/apps/cms/src/app/(protected)/content/article/[documentId]/page.tsx
+++ b/apps/cms/src/app/(protected)/content/article/[documentId]/page.tsx
@@ -93,7 +93,7 @@ export default function DocumentDetailsPage() {
       <Suspense fallback={<Loader />}>
         {document ? (
           <>
-            <div className="relative w-full pr-5 pl-5">
+            <div className="relative w-full">
               <div className="relative w-full flex flex-row mb-4">
                 <Button
                   title={updateMetadata ? "Save Changes" : "Edit Metadata"}
@@ -134,7 +134,7 @@ export default function DocumentDetailsPage() {
                 )}
               </div>
 
-              <div className="relative w-full flex flex-row gap-2">
+              <div className="relative w-full grid gap-2 lg:flex lg:flex-row lg:gap-2">
                 {!updateMetadata && tags.length > 0 && tags.map((tag, index) => <Badge key={index} title={tag} />)}
 
                 {updateMetadata && (
diff --git a/libs/ui-components/src/Badge.tsx b/libs/ui-components/src/Badge.tsx
index 88be83a0..3fdd3e7c 100644
--- a/libs/ui-components/src/Badge.tsx
+++ b/libs/ui-components/src/Badge.tsx
@@ -7,16 +7,20 @@ interface BadgeProps {
 export function Badge(props: BadgeProps) {
   const {title, className, onRemove} = props;
 
-  const badgeClassName = `block border px-3 py-1 text-xs font-semibold rounded-full ${className}`;
+  let badgeClassName = "border px-3 py-1 text-xs font-semibold rounded-full";
+  badgeClassName = className ? badgeClassName.concat(` ${className}`) : badgeClassName;
 
   return (
-    <span className={badgeClassName}>
-      {title}
-      {onRemove && (
-        <button onClick={onRemove} aria-label="Remove badge" className="ml-2">
-          <span className="i-ic-close w-[10px] h-[10px]" />
-        </button>
-      )}
-    </span>
+    <div className={badgeClassName}>
+      <div className="relative w-full inline-flex items-center justify-between">
+        <span>{title}</span>
+
+        {onRemove && (
+          <button onClick={onRemove} aria-label="Remove badge" className="ml-2">
+            <span className="relative top-[2px] i-ic-close" />
+          </button>
+        )}
+      </div>
+    </div>
   );
 }
diff --git a/libs/ui-components/src/Form/MultipleText.tsx b/libs/ui-components/src/Form/MultipleText.tsx
index f16af902..6d4ade85 100644
--- a/libs/ui-components/src/Form/MultipleText.tsx
+++ b/libs/ui-components/src/Form/MultipleText.tsx
@@ -51,7 +51,7 @@ export function MultipleText(props: MultipleTextProps) {
         <Button title="Add" onClick={handleAddItem} style="rounded" />
       </div>
 
-      <div className="relative w-full flex flex-row gap-2">
+      <div className="relative w-full grid gap-2 lg:flex lg:flex-row lg:gap-2">
         {entries.length > 0 &&
           entries.map((value, index) => <Badge key={index} title={value} onRemove={() => handleRemoveItem(index)} />)}
       </div>

From 19b54fcd268cffec24a99b4a9ca21192480cba25 Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Thu, 26 Sep 2024 12:52:04 +0700
Subject: [PATCH 08/11] put form to the modal

---
 .../content/article/[documentId]/page.tsx     | 152 ++++++++++++------
 .../app/(protected)/content/article/page.tsx  |   4 +-
 libs/ui-components/src/Badge.tsx              |   5 +-
 libs/ui-components/src/Form/MultipleText.tsx  |   4 +-
 4 files changed, 114 insertions(+), 51 deletions(-)

diff --git a/apps/cms/src/app/(protected)/content/article/[documentId]/page.tsx b/apps/cms/src/app/(protected)/content/article/[documentId]/page.tsx
index 5dfebc92..01682f3a 100644
--- a/apps/cms/src/app/(protected)/content/article/[documentId]/page.tsx
+++ b/apps/cms/src/app/(protected)/content/article/[documentId]/page.tsx
@@ -5,6 +5,7 @@ import {
   Button,
   Input,
   Loader,
+  Modal,
   MultipleText,
   Notification,
   PageHeader,
@@ -24,8 +25,9 @@ export default function DocumentDetailsPage() {
   const [title, setTitle] = useState<string>("");
   const [description, setDescription] = useState<string>("");
   const [tags, setTags] = useState<string[]>([]);
+  const [showModalMetadata, setShowMetadataModal] = useState<boolean>(false);
   const [readonlyMode] = useState<boolean>(false);
-  const [updateMetadata, setUpdateMetadata] = useState<boolean>(false);
+  const [loading, setLoading] = useState<boolean>(false);
   const [notification, setNotification] = useState<UserNotification | null>(null);
 
   useEffect(() => {
@@ -39,13 +41,7 @@ export default function DocumentDetailsPage() {
   }, [documentError, writeError]);
 
   useEffect(() => {
-    if (updateMetadata) return;
-
-    fetchDocumentUpdate(title, description, tags);
-  }, [updateMetadata]);
-
-  useEffect(() => {
-    if (document) {
+    if (document && showModalMetadata) {
       setTitle(document.data.title as string);
       setDescription(document.data.blurb as string);
       setTags(document.data.tags as string[]);
@@ -54,12 +50,12 @@ export default function DocumentDetailsPage() {
     return () => {
       pruneState();
     };
-  }, [document]);
+  }, [document, showModalMetadata]);
 
   function pruneState() {
     setTitle("");
     setDescription("");
-    setTags([]);
+    setTags((document?.data.tags as string[]) ?? []);
   }
 
   async function fetchDocumentUpdate(title: string, blurb: string, tags: string[]) {
@@ -84,6 +80,59 @@ export default function DocumentDetailsPage() {
     await update(document);
   }
 
+  function onCloseMetadataModal() {
+    setShowMetadataModal(false);
+  }
+
+  async function onSaveMetadataModal() {
+    setLoading(true);
+
+    try {
+      await fetchDocumentUpdate(title, description, tags);
+
+      setNotification(new UserNotification("success", "Update Metadata", "Success to update metadata"));
+    } catch (error) {
+      console.error(error);
+      setNotification(new UserNotification("error", "Update Metadata", "Failed to update metadata"));
+    } finally {
+      setLoading(false);
+      onCloseMetadataModal();
+    }
+  }
+
+  function onOpenMetadata() {
+    setShowMetadataModal(true);
+  }
+
+  /**
+   * Modal actions for saving or canceling metadata changes.
+   * @constant
+   * @type {JSX.Element}
+   */
+  const modalActionMetadata = (
+    <div className="flex flex-col sm:flex-row justify-end gap-3">
+      {/* Start button to close the metadata modal */}
+      <button
+        className="flex justify-center rounded border border-stroke px-6 py-2 font-medium text-black hover:shadow-1 dark:border-strokedark dark:text-white sm:w-full sm:text-sm"
+        disabled={readonlyMode || loading}
+        onClick={onCloseMetadataModal}
+      >
+        Close
+      </button>
+      {/* End button to close the metadata modal */}
+
+      {/* Start button to save changes metadata */}
+      <button
+        className="flex justify-center rounded bg-primary px-6 py-2 font-medium text-gray hover:bg-opacity-90 sm:w-full sm:text-sm"
+        disabled={readonlyMode || loading}
+        onClick={onSaveMetadataModal}
+      >
+        Save
+      </button>
+      {/* End button to save changes metadata */}
+    </div>
+  );
+
   return (
     <>
       {notification && (
@@ -95,51 +144,21 @@ export default function DocumentDetailsPage() {
           <>
             <div className="relative w-full">
               <div className="relative w-full flex flex-row mb-4">
-                <Button
-                  title={updateMetadata ? "Save Changes" : "Edit Metadata"}
-                  onClick={() => setUpdateMetadata(!updateMetadata)}
-                  style="rounded"
-                >
+                <Button title="Edit Metadata" onClick={onOpenMetadata} style="rounded">
                   <span className="i-ic-outline-edit mr-2" />
                 </Button>
               </div>
 
               <div className="relative w-full flex flex-row mb-4">
-                {!updateMetadata && <PageHeader pageName={document.data.title as string} />}
-
-                {updateMetadata && (
-                  <Input
-                    key="titleArticle"
-                    type="text"
-                    placeholder="Title"
-                    disabled={readonlyMode}
-                    value={title || ""}
-                    onChange={(e) => setTitle(e.target.value)}
-                  />
-                )}
+                <PageHeader pageName={document.data.title as string} />
               </div>
 
               <div className="relative w-full flex flex-row mb-4">
-                {!updateMetadata && <p>{document.data.blurb as string}</p>}
-
-                {updateMetadata && (
-                  <TextArea
-                    key="descriptionArticle"
-                    placeholder="Description"
-                    rows={3}
-                    disabled={readonlyMode}
-                    value={description || ""}
-                    onChange={(e) => setDescription(e.target.value)}
-                  />
-                )}
+                <p>{document.data.blurb as string}</p>
               </div>
 
-              <div className="relative w-full grid gap-2 lg:flex lg:flex-row lg:gap-2">
-                {!updateMetadata && tags.length > 0 && tags.map((tag, index) => <Badge key={index} title={tag} />)}
-
-                {updateMetadata && (
-                  <MultipleText placeholder="Add tags" value={tags} onChange={(value) => setTags(value)} />
-                )}
+              <div className="relative w-full flex flex-wrap gap-2">
+                {tags.length > 0 && tags.map((tag, index) => <Badge key={index} title={tag} />)}
               </div>
 
               <hr className="mt-4" />
@@ -153,6 +172,49 @@ export default function DocumentDetailsPage() {
                 onChange={onDocumentContentChange}
               />
             )}
+
+            {/* Start modal metadata */}
+            <Modal
+              isOpen={showModalMetadata}
+              disableOverlayClose={true}
+              onClose={onCloseMetadataModal}
+              actions={modalActionMetadata}
+              title="Metadata"
+            >
+              <div className="relative w-full">
+                <div className="relative w-full flex flex-row mb-4">
+                  <Input
+                    key="titleArticle"
+                    type="text"
+                    placeholder="Title"
+                    disabled={readonlyMode || loading}
+                    value={title || ""}
+                    onChange={(e) => setTitle(e.target.value)}
+                  />
+                </div>
+
+                <div className="relative w-full flex flex-row mb-4">
+                  <TextArea
+                    key="descriptionArticle"
+                    placeholder="Description"
+                    rows={3}
+                    disabled={readonlyMode || loading}
+                    value={description || ""}
+                    onChange={(e) => setDescription(e.target.value)}
+                  />
+                </div>
+
+                <div className="relative w-full">
+                  <MultipleText
+                    placeholder="Add tags"
+                    disabled={readonlyMode || loading}
+                    value={tags}
+                    onChange={(value) => setTags(value)}
+                  />
+                </div>
+              </div>
+            </Modal>
+            {/* End modal metadata */}
           </>
         ) : (
           <Loader />
diff --git a/apps/cms/src/app/(protected)/content/article/page.tsx b/apps/cms/src/app/(protected)/content/article/page.tsx
index ae5b9aa9..0225f726 100644
--- a/apps/cms/src/app/(protected)/content/article/page.tsx
+++ b/apps/cms/src/app/(protected)/content/article/page.tsx
@@ -86,10 +86,10 @@ export default function DocumentTypeDocumentsPage() {
     <>
       <Suspense fallback={<Loader />}>
         {documentType ? (
-          <div className="flex items-center gap-4">
+          <div className="relative w-full flex gap-2 mb-4">
             <PageHeader pageName={documentType.titlePlural.translated} />
 
-            <div className="mb-6">
+            <div className="relative">
               <span className="relative">
                 <Button
                   title={`Create ${documentType.titleSingular.translated}`}
diff --git a/libs/ui-components/src/Badge.tsx b/libs/ui-components/src/Badge.tsx
index 3fdd3e7c..04438f67 100644
--- a/libs/ui-components/src/Badge.tsx
+++ b/libs/ui-components/src/Badge.tsx
@@ -1,11 +1,12 @@
 interface BadgeProps {
   title: string;
   className?: string;
+  disabled?: boolean;
   onRemove?: () => void;
 }
 
 export function Badge(props: BadgeProps) {
-  const {title, className, onRemove} = props;
+  const {title, className, disabled, onRemove} = props;
 
   let badgeClassName = "border px-3 py-1 text-xs font-semibold rounded-full";
   badgeClassName = className ? badgeClassName.concat(` ${className}`) : badgeClassName;
@@ -16,7 +17,7 @@ export function Badge(props: BadgeProps) {
         <span>{title}</span>
 
         {onRemove && (
-          <button onClick={onRemove} aria-label="Remove badge" className="ml-2">
+          <button disabled={disabled} onClick={onRemove} aria-label="Remove badge" className="ml-2">
             <span className="relative top-[2px] i-ic-close" />
           </button>
         )}
diff --git a/libs/ui-components/src/Form/MultipleText.tsx b/libs/ui-components/src/Form/MultipleText.tsx
index 6d4ade85..71809a51 100644
--- a/libs/ui-components/src/Form/MultipleText.tsx
+++ b/libs/ui-components/src/Form/MultipleText.tsx
@@ -48,10 +48,10 @@ export function MultipleText(props: MultipleTextProps) {
           onChange={(e) => setEntry(e.target.value)}
         />
 
-        <Button title="Add" onClick={handleAddItem} style="rounded" />
+        <Button disabled={disabled} title="Add" onClick={handleAddItem} style="rounded" />
       </div>
 
-      <div className="relative w-full grid gap-2 lg:flex lg:flex-row lg:gap-2">
+      <div className="relative w-full flex flex-wrap gap-2">
         {entries.length > 0 &&
           entries.map((value, index) => <Badge key={index} title={value} onRemove={() => handleRemoveItem(index)} />)}
       </div>

From 6ac985c0bc17bbdf67af5915da9eed70dc820293 Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Thu, 26 Sep 2024 13:00:42 +0700
Subject: [PATCH 09/11] add loading state when submit

---
 .../content/article/[documentId]/page.tsx     | 24 ++++++++++---------
 libs/ui-components/src/Form/MultipleText.tsx  |  5 ++--
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/apps/cms/src/app/(protected)/content/article/[documentId]/page.tsx b/apps/cms/src/app/(protected)/content/article/[documentId]/page.tsx
index 01682f3a..371a57bd 100644
--- a/apps/cms/src/app/(protected)/content/article/[documentId]/page.tsx
+++ b/apps/cms/src/app/(protected)/content/article/[documentId]/page.tsx
@@ -87,6 +87,8 @@ export default function DocumentDetailsPage() {
   async function onSaveMetadataModal() {
     setLoading(true);
 
+    setNotification(null);
+
     try {
       await fetchDocumentUpdate(title, description, tags);
 
@@ -112,23 +114,23 @@ export default function DocumentDetailsPage() {
   const modalActionMetadata = (
     <div className="flex flex-col sm:flex-row justify-end gap-3">
       {/* Start button to close the metadata modal */}
-      <button
-        className="flex justify-center rounded border border-stroke px-6 py-2 font-medium text-black hover:shadow-1 dark:border-strokedark dark:text-white sm:w-full sm:text-sm"
+      <Button
+        title="Close"
+        loading={loading}
         disabled={readonlyMode || loading}
         onClick={onCloseMetadataModal}
-      >
-        Close
-      </button>
+        style="outline-rounded"
+      />
       {/* End button to close the metadata modal */}
 
       {/* Start button to save changes metadata */}
-      <button
-        className="flex justify-center rounded bg-primary px-6 py-2 font-medium text-gray hover:bg-opacity-90 sm:w-full sm:text-sm"
+      <Button
+        title="Save"
+        loading={loading}
         disabled={readonlyMode || loading}
         onClick={onSaveMetadataModal}
-      >
-        Save
-      </button>
+        style="rounded"
+      />
       {/* End button to save changes metadata */}
     </div>
   );
@@ -144,7 +146,7 @@ export default function DocumentDetailsPage() {
           <>
             <div className="relative w-full">
               <div className="relative w-full flex flex-row mb-4">
-                <Button title="Edit Metadata" onClick={onOpenMetadata} style="rounded">
+                <Button title="Edit Metadata" loading={loading} onClick={onOpenMetadata} style="rounded">
                   <span className="i-ic-outline-edit mr-2" />
                 </Button>
               </div>
diff --git a/libs/ui-components/src/Form/MultipleText.tsx b/libs/ui-components/src/Form/MultipleText.tsx
index 71809a51..e6890a7e 100644
--- a/libs/ui-components/src/Form/MultipleText.tsx
+++ b/libs/ui-components/src/Form/MultipleText.tsx
@@ -6,13 +6,14 @@ import {Input} from "./Input";
 interface MultipleTextProps {
   title?: string;
   placeholder?: string;
+  loading?: boolean;
   disabled?: boolean;
   value?: string[];
   onChange?: (value: string[]) => void;
 }
 
 export function MultipleText(props: MultipleTextProps) {
-  const {title, placeholder = "Add something here", disabled, value = [], onChange} = props;
+  const {title, placeholder = "Add something here", disabled, loading, value = [], onChange} = props;
 
   const [entry, setEntry] = useState("");
   const [entries, setEntries] = useState(value);
@@ -48,7 +49,7 @@ export function MultipleText(props: MultipleTextProps) {
           onChange={(e) => setEntry(e.target.value)}
         />
 
-        <Button disabled={disabled} title="Add" onClick={handleAddItem} style="rounded" />
+        <Button loading={loading} disabled={disabled} title="Add" onClick={handleAddItem} style="rounded" />
       </div>
 
       <div className="relative w-full flex flex-wrap gap-2">

From 5e248eb11460bb144fd2fbd8c86d01ea1d65d53c Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Thu, 26 Sep 2024 13:42:25 +0700
Subject: [PATCH 10/11] fix tags not showing

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

diff --git a/apps/cms/src/app/(protected)/content/article/[documentId]/page.tsx b/apps/cms/src/app/(protected)/content/article/[documentId]/page.tsx
index 371a57bd..c6ee817d 100644
--- a/apps/cms/src/app/(protected)/content/article/[documentId]/page.tsx
+++ b/apps/cms/src/app/(protected)/content/article/[documentId]/page.tsx
@@ -41,7 +41,7 @@ export default function DocumentDetailsPage() {
   }, [documentError, writeError]);
 
   useEffect(() => {
-    if (document && showModalMetadata) {
+    if (document) {
       setTitle(document.data.title as string);
       setDescription(document.data.blurb as string);
       setTags(document.data.tags as string[]);

From d7d3e04427ad1b8ab01c28d48d5e2ba9281c4037 Mon Sep 17 00:00:00 2001
From: Dennis Alund <dennis.alund@gmail.com>
Date: Wed, 2 Oct 2024 15:31:05 +0800
Subject: [PATCH 11/11] Updating package lock

---
 package-lock.json | 323 +++++++++++++++++++++++++---------------------
 1 file changed, 174 insertions(+), 149 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5d44d179..374255f7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2272,6 +2272,13 @@
         "tailwindcss": "*"
       }
     },
+    "node_modules/@electric-sql/pglite": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/@electric-sql/pglite/-/pglite-0.2.9.tgz",
+      "integrity": "sha512-KPItmBmPVZJGOv+qkCXmWyIPUPLQIyN+BVtV/zD+083aWSR/2ReaCUN+HJv6Jw4z9zJ00UCPQkeUXvOLuTlumg==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/@emnapi/core": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.2.0.tgz",
@@ -5786,9 +5793,9 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "14.2.9",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.9.tgz",
-      "integrity": "sha512-hnDAoDPMii31V0ivibI8p6b023jOF1XblWTVjsDUoZKwnZlaBtJFZKDwFqi22R8r9i6W08dThUWU7Bsh2Rg8Ww==",
+      "version": "14.2.14",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.14.tgz",
+      "integrity": "sha512-/0hWQfiaD5//LvGNgc8PjvyqV50vGK0cADYzaoOOGN8fxzBn3iAiaq3S0tCRnFBldq0LVveLcxCTi41ZoYgAgg==",
       "license": "MIT"
     },
     "node_modules/@next/eslint-plugin-next": {
@@ -5802,9 +5809,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "14.2.9",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.9.tgz",
-      "integrity": "sha512-/kfQifl3uLYi3DlwFlzCkgxe6fprJNLzzTUFknq3M5wGYicDIbdGlxUl6oHpVLJpBB/CBY3Y//gO6alz/K4NWA==",
+      "version": "14.2.14",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.14.tgz",
+      "integrity": "sha512-bsxbSAUodM1cjYeA4o6y7sp9wslvwjSkWw57t8DtC8Zig8aG8V6r+Yc05/9mDzLKcybb6EN85k1rJDnMKBd9Gw==",
       "cpu": [
         "arm64"
       ],
@@ -5818,9 +5825,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "14.2.9",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.9.tgz",
-      "integrity": "sha512-tK/RyhCmOCiXQ9IVdFrBbZOf4/1+0RSuJkebXU2uMEsusS51TjIJO4l8ZmEijH9gZa0pJClvmApRHi7JuBqsRw==",
+      "version": "14.2.14",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.14.tgz",
+      "integrity": "sha512-cC9/I+0+SK5L1k9J8CInahduTVWGMXhQoXFeNvF0uNs3Bt1Ub0Azb8JzTU9vNCr0hnaMqiWu/Z0S1hfKc3+dww==",
       "cpu": [
         "x64"
       ],
@@ -5834,9 +5841,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "14.2.9",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.9.tgz",
-      "integrity": "sha512-tS5eqwsp2nO7mzywRUuFYmefNZsUKM/mTG3exK2jIHv9TEVklE1SByB1KMhFkqlit1PxS9YK1tV8BOV90Wpbrw==",
+      "version": "14.2.14",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.14.tgz",
+      "integrity": "sha512-RMLOdA2NU4O7w1PQ3Z9ft3PxD6Htl4uB2TJpocm+4jcllHySPkFaUIFacQ3Jekcg6w+LBaFvjSPthZHiPmiAUg==",
       "cpu": [
         "arm64"
       ],
@@ -5850,9 +5857,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "14.2.9",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.9.tgz",
-      "integrity": "sha512-8svpeTFNAMTUMKQbEzE8qRAwl9o7mNBv7LR1bmSkQvo1oy4WrNyZbhWsldOiKrc4mZ5dfQkGYsI9T75mIFMfeA==",
+      "version": "14.2.14",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.14.tgz",
+      "integrity": "sha512-WgLOA4hT9EIP7jhlkPnvz49iSOMdZgDJVvbpb8WWzJv5wBD07M2wdJXLkDYIpZmCFfo/wPqFsFR4JS4V9KkQ2A==",
       "cpu": [
         "arm64"
       ],
@@ -5866,9 +5873,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "14.2.9",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.9.tgz",
-      "integrity": "sha512-0HNulLWpKTB7H5BhHCkEhcRAnWUHeAYCftrrGw3QC18+ZywTdAoPv/zEqKy/0adqt+ks4JDdlgSQ1lNKOKjo0A==",
+      "version": "14.2.14",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.14.tgz",
+      "integrity": "sha512-lbn7svjUps1kmCettV/R9oAvEW+eUI0lo0LJNFOXoQM5NGNxloAyFRNByYeZKL3+1bF5YE0h0irIJfzXBq9Y6w==",
       "cpu": [
         "x64"
       ],
@@ -5882,9 +5889,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "14.2.9",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.9.tgz",
-      "integrity": "sha512-hhVFViPHLAVUJRNtwwm609p9ozWajOmRvzOZzzKXgiVGwx/CALxlMUeh+M+e0Zj6orENhWLZeilOPHpptuENsA==",
+      "version": "14.2.14",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.14.tgz",
+      "integrity": "sha512-7TcQCvLQ/hKfQRgjxMN4TZ2BRB0P7HwrGAYL+p+m3u3XcKTraUFerVbV3jkNZNwDeQDa8zdxkKkw2els/S5onQ==",
       "cpu": [
         "x64"
       ],
@@ -5898,9 +5905,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "14.2.9",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.9.tgz",
-      "integrity": "sha512-p/v6XlOdrk06xfN9z4evLNBqftVQUWiyduQczCwSj7hNh8fWTbzdVxsEiNOcajMXJbQiaX/ZzZdFgKVmmJnnGQ==",
+      "version": "14.2.14",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.14.tgz",
+      "integrity": "sha512-8i0Ou5XjTLEje0oj0JiI0Xo9L/93ghFtAUYZ24jARSeTMXLUx8yFIdhS55mTExq5Tj4/dC2fJuaT4e3ySvXU1A==",
       "cpu": [
         "arm64"
       ],
@@ -5914,9 +5921,9 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.2.9",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.9.tgz",
-      "integrity": "sha512-IcW9dynWDjMK/0M05E3zopbRen7v0/yEaMZbHFOSS1J/w+8YG3jKywOGZWNp/eCUVtUUXs0PW+7Lpz8uLu+KQA==",
+      "version": "14.2.14",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.14.tgz",
+      "integrity": "sha512-2u2XcSaDEOj+96eXpyjHjtVPLhkAFw2nlaz83EPeuK4obF+HmtDJHqgR1dZB7Gb6V/d55FL26/lYVd0TwMgcOQ==",
       "cpu": [
         "ia32"
       ],
@@ -5930,9 +5937,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "14.2.9",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.9.tgz",
-      "integrity": "sha512-gcbpoXyWZdVOBgNa5BRzynrL5UR1nb2ZT38yKgnphYU9UHjeecnylMHntrQiMg/QtONDcJPFC/PmsS47xIRYoA==",
+      "version": "14.2.14",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.14.tgz",
+      "integrity": "sha512-MZom+OvZ1NZxuRovKt1ApevjiUJTcU2PmdJKL66xUPaJeRywnbGGRWUlaAOwunD6dX+pm83vj979NTC8QXjGWg==",
       "cpu": [
         "x64"
       ],
@@ -16523,10 +16530,14 @@
       }
     },
     "node_modules/basic-auth-connect": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/basic-auth-connect/-/basic-auth-connect-1.0.0.tgz",
-      "integrity": "sha512-kiV+/DTgVro4aZifY/hwRwALBISViL5NP4aReaR2EVJEObpbUBHIkdJh/YpcoEiYt7nBodZ6U2ajZeZvSxUCCg==",
-      "dev": true
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/basic-auth-connect/-/basic-auth-connect-1.1.0.tgz",
+      "integrity": "sha512-rKcWjfiRZ3p5WS9e5q6msXa07s6DaFAMXoyowV+mb2xQG+oYdw2QEUyKi0Xp95JvXzShlM+oGy5QuqSK6TfC1Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tsscmp": "^1.0.6"
+      }
     },
     "node_modules/basic-auth/node_modules/safe-buffer": {
       "version": "5.1.2",
@@ -21700,9 +21711,9 @@
       "optional": true
     },
     "node_modules/express": {
-      "version": "4.20.0",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.20.0.tgz",
-      "integrity": "sha512-pLdae7I6QqShF5PnNTCVn4hI91Dx0Grkn2+IAsMTgMIKuQVte2dN9PeGSSAME2FR8anOhVA62QDIUaWVfEXVLw==",
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.0.tgz",
+      "integrity": "sha512-VqcNGcj/Id5ZT1LZ/cfihi3ttTn+NJmkli2eZADigjq29qTlWi/hAQ43t/VLPq8+UX06FCEx3ByOYet6ZFblng==",
       "license": "MIT",
       "dependencies": {
         "accepts": "~1.3.8",
@@ -21717,7 +21728,7 @@
         "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "etag": "~1.8.1",
-        "finalhandler": "1.2.0",
+        "finalhandler": "1.3.1",
         "fresh": "0.5.2",
         "http-errors": "2.0.0",
         "merge-descriptors": "1.0.3",
@@ -21726,11 +21737,11 @@
         "parseurl": "~1.3.3",
         "path-to-regexp": "0.1.10",
         "proxy-addr": "~2.0.7",
-        "qs": "6.11.0",
+        "qs": "6.13.0",
         "range-parser": "~1.2.1",
         "safe-buffer": "5.2.1",
         "send": "0.19.0",
-        "serve-static": "1.16.0",
+        "serve-static": "1.16.2",
         "setprototypeof": "1.2.0",
         "statuses": "2.0.1",
         "type-is": "~1.6.18",
@@ -21756,21 +21767,6 @@
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "license": "MIT"
     },
-    "node_modules/express/node_modules/qs": {
-      "version": "6.11.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
-      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "side-channel": "^1.0.4"
-      },
-      "engines": {
-        "node": ">=0.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/ext-list": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/ext-list/-/ext-list-2.2.2.tgz",
@@ -22197,13 +22193,13 @@
       }
     },
     "node_modules/finalhandler": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
-      "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
+      "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==",
       "license": "MIT",
       "dependencies": {
         "debug": "2.6.9",
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
@@ -22223,15 +22219,6 @@
         "ms": "2.0.0"
       }
     },
-    "node_modules/finalhandler/node_modules/encodeurl": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/finalhandler/node_modules/ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -22441,11 +22428,13 @@
       }
     },
     "node_modules/firebase-tools": {
-      "version": "13.16.0",
-      "resolved": "https://registry.npmjs.org/firebase-tools/-/firebase-tools-13.16.0.tgz",
-      "integrity": "sha512-qBpHMW1ISD1RsgHactIzp9MIzW/a3uCbyVe5mtrSn03rSydEvq6TrNKERQuOkkqbnG/E/wD0vjYv9iS7xNhliw==",
+      "version": "13.20.2",
+      "resolved": "https://registry.npmjs.org/firebase-tools/-/firebase-tools-13.20.2.tgz",
+      "integrity": "sha512-lhJ8C/hNtNyG57IIWZ+j+0JaiB3A/wo7c/LFouRigE+/IRo13le2uotBAFI7XjTOgxelxs8wGA6u/4fgQAz8Zw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
+        "@electric-sql/pglite": "^0.2.0",
         "@google-cloud/cloud-sql-connector": "^1.3.3",
         "@google-cloud/pubsub": "^4.5.0",
         "abort-controller": "^3.0.0",
@@ -22480,6 +22469,7 @@
         "leven": "^3.1.0",
         "libsodium-wrappers": "^0.7.10",
         "lodash": "^4.17.21",
+        "lsofi": "1.0.0",
         "marked": "^13.0.2",
         "marked-terminal": "^7.0.0",
         "mime": "^2.5.2",
@@ -25132,6 +25122,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-buffer": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/is-bun-module": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/is-bun-module/-/is-bun-module-1.2.1.tgz",
@@ -29689,6 +29686,43 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "license": "ISC"
     },
+    "node_modules/lsofi": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/lsofi/-/lsofi-1.0.0.tgz",
+      "integrity": "sha512-MKr9vM1MSm+TSKfI05IYxpKV1NCxpJaBLnELyIf784zYJ5KV9lGCE1EvpA2DtXDNM3fCuFeCwXUzim/fyQRi+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^2.1.0",
+        "through2": "^2.0.1"
+      }
+    },
+    "node_modules/lsofi/node_modules/is-number": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-2.1.0.tgz",
+      "integrity": "sha512-QUzH43Gfb9+5yckcrSA0VBDwEtDUchrk4F6tfJZQuNzDJbEDB9cZNzSfXGQ1jqmdDY/kl41lUOWM9syA8z8jlg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "kind-of": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/lsofi/node_modules/kind-of": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+      "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/luxon": {
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.5.0.tgz",
@@ -30490,12 +30524,12 @@
       }
     },
     "node_modules/next": {
-      "version": "14.2.9",
-      "resolved": "https://registry.npmjs.org/next/-/next-14.2.9.tgz",
-      "integrity": "sha512-3CzBNo6BuJnRjcQvRw+irnU1WiuJNZEp+dkzkt91y4jeIDN/Emg95F+takSYiLpJ/HkxClVQRyqiTwYce5IVqw==",
+      "version": "14.2.14",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.2.14.tgz",
+      "integrity": "sha512-Q1coZG17MW0Ly5x76shJ4dkC23woLAhhnDnw+DfTc7EpZSGuWrlsZ3bZaO8t6u1Yu8FVfhkqJE+U8GC7E0GLPQ==",
       "license": "MIT",
       "dependencies": {
-        "@next/env": "14.2.9",
+        "@next/env": "14.2.14",
         "@swc/helpers": "0.5.5",
         "busboy": "1.6.0",
         "caniuse-lite": "^1.0.30001579",
@@ -30510,15 +30544,15 @@
         "node": ">=18.17.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "14.2.9",
-        "@next/swc-darwin-x64": "14.2.9",
-        "@next/swc-linux-arm64-gnu": "14.2.9",
-        "@next/swc-linux-arm64-musl": "14.2.9",
-        "@next/swc-linux-x64-gnu": "14.2.9",
-        "@next/swc-linux-x64-musl": "14.2.9",
-        "@next/swc-win32-arm64-msvc": "14.2.9",
-        "@next/swc-win32-ia32-msvc": "14.2.9",
-        "@next/swc-win32-x64-msvc": "14.2.9"
+        "@next/swc-darwin-arm64": "14.2.14",
+        "@next/swc-darwin-x64": "14.2.14",
+        "@next/swc-linux-arm64-gnu": "14.2.14",
+        "@next/swc-linux-arm64-musl": "14.2.14",
+        "@next/swc-linux-x64-gnu": "14.2.14",
+        "@next/swc-linux-x64-musl": "14.2.14",
+        "@next/swc-win32-arm64-msvc": "14.2.14",
+        "@next/swc-win32-ia32-msvc": "14.2.14",
+        "@next/swc-win32-x64-msvc": "14.2.14"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
@@ -34959,75 +34993,15 @@
       }
     },
     "node_modules/serve-static": {
-      "version": "1.16.0",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.0.tgz",
-      "integrity": "sha512-pDLK8zwl2eKaYrs8mrPZBJua4hMplRWJ1tIFksVC3FtBEBnl8dxgeHtsaMS8DhS9i4fLObaon6ABoc4/hQGdPA==",
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
+      "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
       "license": "MIT",
       "dependencies": {
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "parseurl": "~1.3.3",
-        "send": "0.18.0"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/serve-static/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "license": "MIT",
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/serve-static/node_modules/debug/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-      "license": "MIT"
-    },
-    "node_modules/serve-static/node_modules/encodeurl": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/serve-static/node_modules/mime": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-      "license": "MIT",
-      "bin": {
-        "mime": "cli.js"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/serve-static/node_modules/send": {
-      "version": "0.18.0",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
-      "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
-      "license": "MIT",
-      "dependencies": {
-        "debug": "2.6.9",
-        "depd": "2.0.0",
-        "destroy": "1.2.0",
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "etag": "~1.8.1",
-        "fresh": "0.5.2",
-        "http-errors": "2.0.0",
-        "mime": "1.6.0",
-        "ms": "2.1.3",
-        "on-finished": "2.4.1",
-        "range-parser": "~1.2.1",
-        "statuses": "2.0.1"
+        "send": "0.19.0"
       },
       "engines": {
         "node": ">= 0.8.0"
@@ -37138,6 +37112,57 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/through2": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
+      "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "readable-stream": "~2.3.6",
+        "xtend": "~4.0.1"
+      }
+    },
+    "node_modules/through2/node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/through2/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/through2/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/through2/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "node_modules/thunky": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",