From 0d2b37be007fabb78c8b71dbacb796beac4352aa Mon Sep 17 00:00:00 2001
From: Purvesh <ind.purvesh@gmail.com>
Date: Sun, 9 Jun 2024 19:43:12 +1200
Subject: [PATCH 1/2] page table

---
 react-admin/src/pages/page/PageCreate.jsx     | 560 +++++++++---------
 react-admin/src/pages/page/PageTable.jsx      |  98 ---
 react-admin/src/pages/page/PageTable.tsx      |  99 ++++
 ...{useComponentAll.js => useComponentAll.ts} |   0
 .../hooks/{useGetPage.js => useGetPage.ts}    |   2 +-
 .../{usePageTable.js => usePageTable.ts}      |   0
 .../{useStorePage.js => useStorePage.ts}      |   0
 .../{useUpdatePage.js => useUpdatePage.ts}    |   2 +-
 react-admin/src/types/page/IPageModel.ts      |  10 +
 9 files changed, 391 insertions(+), 380 deletions(-)
 delete mode 100644 react-admin/src/pages/page/PageTable.jsx
 create mode 100644 react-admin/src/pages/page/PageTable.tsx
 rename react-admin/src/pages/page/hooks/{useComponentAll.js => useComponentAll.ts} (100%)
 rename react-admin/src/pages/page/hooks/{useGetPage.js => useGetPage.ts} (92%)
 rename react-admin/src/pages/page/hooks/{usePageTable.js => usePageTable.ts} (100%)
 rename react-admin/src/pages/page/hooks/{useStorePage.js => useStorePage.ts} (100%)
 rename react-admin/src/pages/page/hooks/{useUpdatePage.js => useUpdatePage.ts} (91%)
 create mode 100644 react-admin/src/types/page/IPageModel.ts

diff --git a/react-admin/src/pages/page/PageCreate.jsx b/react-admin/src/pages/page/PageCreate.jsx
index dad6bf48..a02534ef 100644
--- a/react-admin/src/pages/page/PageCreate.jsx
+++ b/react-admin/src/pages/page/PageCreate.jsx
@@ -1,320 +1,320 @@
-import { useState } from "react";
-import { Link } from "react-router-dom";
-import { PlusIcon } from "@heroicons/react/24/solid";
+import {useState} from "react";
+import {Link} from "react-router-dom";
+import {PlusIcon} from "@heroicons/react/24/solid";
 import AvoredModal from "../../components/AvoredModal";
 import InputField from "../../components/InputField";
 import _ from "lodash";
-import { useComponentAll } from "./hooks/useComponentAll";
-import { useStorePage } from "./hooks/useStorePage";
-import { useTranslation } from "react-i18next";
+import {useComponentAll} from "./hooks/useComponentAll";
+import {useStorePage} from "./hooks/useStorePage";
+import {useTranslation} from "react-i18next";
 
 function PageCreate() {
-  const [isComponentTableModalOpen, setIsComponentTableModalOpen] =
-    useState(false);
-  const [pageComponents, setPageComponents] = useState([]);
-  const [page, setPage] = useState({});
-  const [t] = useTranslation("global");
+    const [isComponentTableModalOpen, setIsComponentTableModalOpen] =
+        useState(false);
+    const [pageComponents, setPageComponents] = useState([]);
+    const [page, setPage] = useState({});
+    const [t] = useTranslation("global");
 
-  const component_all_api_response = useComponentAll();
-  const components = _.get(component_all_api_response, "data.data", []);
+    const component_all_api_response = useComponentAll();
+    const components = _.get(component_all_api_response, "data.data", []);
 
-  const { mutate } = useStorePage();
+    const {mutate} = useStorePage();
 
-  const getFormattedDate = (date) => {
-    var date_obj = new Date(date);
-    return `${date_obj.getFullYear()}-${
-      date_obj.getMonth() + 1
-    }-${date_obj.getDate()}`;
-  };
+    const getFormattedDate = (date) => {
+        var date_obj = new Date(date);
+        return `${date_obj.getFullYear()}-${
+            date_obj.getMonth() + 1
+        }-${date_obj.getDate()}`;
+    };
 
-  const renderComponentFieldType = (componentField) => {
-    switch (componentField.field_type) {
-      case "textarea":
-        return <div>Textarea</div>;
-      case "radio":
-        return (
-            <div className="p-3">
-              <input id={componentField.identifier} type="radio" value={componentField.identifier}
-                     className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"/>
-              <label htmlFor={componentField.identifier}
-                    className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">
-                {componentField.name}
-              </label>
-            </div>
-        );
-      case "text":
-      default:
+    const renderComponentFieldType = (componentField) => {
+        switch (componentField.field_type) {
+            case "textarea":
+                return <div>Textarea</div>;
+            case "radio":
+                return (
+                    <div className="p-3">
+                        <input id={componentField.identifier} type="radio" value={componentField.identifier}
+                               className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"/>
+                        <label htmlFor={componentField.identifier}
+                               className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">
+                            {componentField.name}
+                        </label>
+                    </div>
+                );
+            case "text":
+            default:
+                return (
+                    <div>
+                        <InputField
+                            label={componentField.name}
+                            type="text"
+                            name={componentField.identifier}
+                            onChange={(e) =>
+                                componentFieldContentOnChange(componentField.id, e.target.value)
+                            }
+                        />
+                    </div>
+                );
+        }
+    };
+
+    const renderComponentField = (componentField) => {
         return (
-            <div>
-              <InputField
-                  label={componentField.name}
-                  type="text"
-                  name={componentField.identifier}
-                  onChange={(e) =>
-                      componentFieldContentOnChange(componentField.id, e.target.value)
-                  }
-              />
+            <div className="ring-1 my-2 ring-gray-200" key={componentField.id}>
+                {renderComponentFieldType(componentField)}
             </div>
         );
-    }
-  };
-
-  const renderComponentField = (componentField) => {
-    return (
-      <div className="ring-1 my-2 ring-gray-200" key={componentField.id}>
-        {renderComponentFieldType(componentField)}
-      </div>
-    );
-  };
+    };
 
-  const componentSelected = (e, componentId) => {
-    e.preventDefault();
-    const selectedComponent = components.find(
-      (component) => component.id === componentId
-    );
-
-    pageAddComponentSelected(selectedComponent);
-    setIsComponentTableModalOpen(false);
+    const componentSelected = (e, componentId) => {
+        e.preventDefault();
+        const selectedComponent = components.find(
+            (component) => component.id === componentId
+        );
 
-    setPageComponents((pageComponents) => [
-      ...pageComponents,
-      selectedComponent,
-    ]);
-  };
+        pageAddComponentSelected(selectedComponent);
+        setIsComponentTableModalOpen(false);
 
-  const addComponentOnClick = () => {
-    setIsComponentTableModalOpen(true);
-  };
+        setPageComponents((pageComponents) => [
+            ...pageComponents,
+            selectedComponent,
+        ]);
+    };
 
-  const pageModelOnClose = () => {
-    setIsComponentTableModalOpen(false);
-  };
+    const addComponentOnClick = () => {
+        setIsComponentTableModalOpen(true);
+    };
 
-  const pageNameOnChange = (value) => {
-    setPage({
-      ...page,
-      name: value,
-    });
-  };
-  const pageIdentifierOnChange = (value) => {
-    setPage({
-      ...page,
-      identifier: value,
-    });
-  };
-  const pageAddComponentSelected = (component) => {
-    var componentContent = {};
-    componentContent.id = component.id;
-    componentContent.name = component.name;
-    componentContent.identifier = component.identifier;
-    componentContent.component_fields_content = [];
+    const pageModelOnClose = () => {
+        setIsComponentTableModalOpen(false);
+    };
 
-    component.fields.forEach((field) => {
-      var componentFieldContent = {};
+    const pageNameOnChange = (value) => {
+        setPage({
+            ...page,
+            name: value,
+        });
+    };
+    const pageIdentifierOnChange = (value) => {
+        setPage({
+            ...page,
+            identifier: value,
+        });
+    };
+    const pageAddComponentSelected = (component) => {
+        var componentContent = {};
+        componentContent.id = component.id;
+        componentContent.name = component.name;
+        componentContent.identifier = component.identifier;
+        componentContent.component_fields_content = [];
 
-      componentFieldContent.id = field.id;
-      componentFieldContent.name = field.name;
-      componentFieldContent.identifier = field.identifier;
-      componentFieldContent.field_type = field.field_type;
-      componentFieldContent.field_content = "";
+        component.fields.forEach((field) => {
+            var componentFieldContent = {};
 
-      componentContent.component_fields_content.push(componentFieldContent);
-    });
+            componentFieldContent.id = field.id;
+            componentFieldContent.name = field.name;
+            componentFieldContent.identifier = field.identifier;
+            componentFieldContent.field_type = field.field_type;
+            componentFieldContent.field_content = "";
 
-    if (_.isEmpty(_.get(page, "components_content"))) {
-      page["components_content"] = [];
-    }
-    page.components_content.push(componentContent);
-  };
+            componentContent.component_fields_content.push(componentFieldContent);
+        });
 
-  const componentFieldContentOnChange = (componentFieldId, value) => {
-    page.components_content.forEach((componentContent) => {
-      componentContent.component_fields_content.forEach(
-        // Removed variable "componentField"
-        (componentFieldContent) => {
-          if (componentFieldContent.id === componentFieldId) {
-            componentFieldContent.field_content = value;
-          }
+        if (_.isEmpty(_.get(page, "components_content"))) {
+            page["components_content"] = [];
         }
-      );
-    });
-    const updatedComponentContent = page.components_content;
+        page.components_content.push(componentContent);
+    };
 
-    setPage({
-      ...page,
-      components_content: updatedComponentContent,
-    });
-  };
+    const componentFieldContentOnChange = (componentFieldId, value) => {
+        page.components_content.forEach((componentContent) => {
+            componentContent.component_fields_content.forEach(
+                // Removed variable "componentField"
+                (componentFieldContent) => {
+                    if (componentFieldContent.id === componentFieldId) {
+                        componentFieldContent.field_content = value;
+                    }
+                }
+            );
+        });
+        const updatedComponentContent = page.components_content;
 
-  const renderComponent = (pageComponent) => {
-    return (
-      <div
-        key={pageComponent.id}
-        className="my-5 ring-1 ring-gray-200 rounded p-3"
-      >
-        <div>component name: {pageComponent.name}</div>
-        <div>component identifier: {pageComponent.identifier}</div>
-        <div>
-          Component Fields
-          {pageComponent.fields.map((componentField) => {
-            return renderComponentField(componentField);
-          })}
-        </div>
-      </div>
-    );
-  };
+        setPage({
+            ...page,
+            components_content: updatedComponentContent,
+        });
+    };
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
+    const renderComponent = (pageComponent) => {
+        return (
+            <div
+                key={pageComponent.id}
+                className="my-5 ring-1 ring-gray-200 rounded p-3"
+            >
+                <div>component name: {pageComponent.name}</div>
+                <div>component identifier: {pageComponent.identifier}</div>
+                <div>
+                    Component Fields
+                    {pageComponent.fields.map((componentField) => {
+                        return renderComponentField(componentField);
+                    })}
+                </div>
+            </div>
+        );
+    };
 
-    mutate(page);
-  };
+    const handleSubmit = async (e) => {
+        e.preventDefault();
 
-  return (
-    <div className="flex-1 bg-white">
-      <div className="px-5 pl-64 ">
-        <div className="w-full">
-          <div className="block rounded-lg p-6">
-            <h1 className="text-xl font-semibold mb-4 text-gray-900">
-              {t("pages.information")}
-            </h1>
-            {/*<p className="text-gray-600 dark:text-gray-300 mb-6">Use a permanent address where you can*/}
-            {/*    receive mail.</p>*/}
-            <form onSubmit={handleSubmit}>
-              <div className="mb-4">
-                <input
-                  type="text"
-                  placeholder="Name"
-                  value={_.get(page, "name", "")}
-                  onChange={(e) => pageNameOnChange(e.target.value)}
-                  className="border p-2 rounded w-full"
-                />
-              </div>
-              <div className="mb-4">
-                <input
-                  type="text"
-                  placeholder="Identifier"
-                  value={_.get(page, "identifier", "")}
-                  onChange={(e) => pageIdentifierOnChange(e.target.value)}
-                  className="border p-2 rounded w-full"
-                />
-              </div>
+        mutate(page);
+    };
 
-              <div>
-                {pageComponents.map((pageComponent) => {
-                  return renderComponent(pageComponent);
-                })}
-              </div>
+    return (
+        <div className="flex-1 bg-white">
+            <div className="px-5 pl-64 ">
+                <div className="w-full">
+                    <div className="block rounded-lg p-6">
+                        <h1 className="text-xl font-semibold mb-4 text-gray-900">
+                            {t("pages.information")}
+                        </h1>
+                        {/*<p className="text-gray-600 dark:text-gray-300 mb-6">Use a permanent address where you can*/}
+                        {/*    receive mail.</p>*/}
+                        <form onSubmit={handleSubmit}>
+                            <div className="mb-4">
+                                <input
+                                    type="text"
+                                    placeholder="Name"
+                                    value={_.get(page, "name", "")}
+                                    onChange={(e) => pageNameOnChange(e.target.value)}
+                                    className="border p-2 rounded w-full"
+                                />
+                            </div>
+                            <div className="mb-4">
+                                <input
+                                    type="text"
+                                    placeholder="Identifier"
+                                    value={_.get(page, "identifier", "")}
+                                    onChange={(e) => pageIdentifierOnChange(e.target.value)}
+                                    className="border p-2 rounded w-full"
+                                />
+                            </div>
 
-              <div className="mb-4 flex items-center justify-center ring-1 ring-gray-400 rounded p-5">
-                <button
-                  type="button"
-                  className="flex"
-                  onClick={addComponentOnClick}
-                >
-                  <PlusIcon className="text-primary-500 h-6 w-6" />
-                  <span className="text-sm ml-1 text-primary-500">
+                            <div>
+                                {pageComponents.map((pageComponent) => {
+                                    return renderComponent(pageComponent);
+                                })}
+                            </div>
+
+                            <div className="mb-4 flex items-center justify-center ring-1 ring-gray-400 rounded p-5">
+                                <button
+                                    type="button"
+                                    className="flex"
+                                    onClick={addComponentOnClick}
+                                >
+                                    <PlusIcon className="text-primary-500 h-6 w-6"/>
+                                    <span className="text-sm ml-1 text-primary-500">
                     Add Component
                   </span>
-                </button>
-              </div>
+                                </button>
+                            </div>
+
+                            <AvoredModal
+                                closeModal={pageModelOnClose}
+                                modal_header="Select Component"
+                                modal_body={
+                                    <div className="text-primary-500">
+                                        <table className="min-w-full bg-white shadow-md rounded">
+                                            <thead>
+                                            <tr className="bg-gray-700 text-white">
+                                                <th className="py-3 px-4 rounded-l font-semibold text-left">
+                                                    {t("common.id")}
+                                                </th>
+                                                <th className="py-3 px-4 font-semibol text-left">
+                                                    {t("common.name")}
+                                                </th>
+                                                <th className="py-3 px-4 font-semibol text-left">
+                                                    {t("common.identifier")}
+                                                </th>
+                                                <th className="py-3 px-4 font-semibol text-left">
+                                                    {t("common.created_at")}
+                                                </th>
+                                                <th className="py-3 px-4 font-semibol text-left">
+                                                    {t("common.updated_at")}
+                                                </th>
+                                                <th className="py-3 px-4 font-semibol text-left">
+                                                    {t("common.created_by")}
+                                                </th>
+                                                <th className="py-3 px-4 font-semibol text-left">
+                                                    {t("common.updated_by")}
+                                                </th>
+                                                <th className="py-3 px-4 rounded-r font-semibol text-left">
+                                                    {t("common.action")}
+                                                </th>
+                                            </tr>
+                                            </thead>
+                                            <tbody className="">
+                                            {components.map((component) => {
+                                                return (
+                                                    <tr key={component.id} className="border-b">
+                                                        <td className="py-3 px-4">{component.id}</td>
+                                                        <td className="py-3 px-4">{component.name}</td>
+                                                        <td className="py-3 px-4">
+                                                            {component.identifier}
+                                                        </td>
+                                                        <td className="py-3 px-4">
+                                                            {getFormattedDate(component.created_at)}
+                                                        </td>
+                                                        <td className="py-3 px-4">
+                                                            {getFormattedDate(component.updated_at)}
+                                                        </td>
+                                                        <td className="py-3 px-4">
+                                                            {component.created_by}
+                                                        </td>
+                                                        <td className="py-3 px-4">
+                                                            {component.updated_by}
+                                                        </td>
+                                                        <td className="py-3 px-4">
+                                                            <button
+                                                                type="button"
+                                                                className="font-medium text-primary-600 hover:text-primary-800"
+                                                                onClick={(e) =>
+                                                                    componentSelected(e, component.id)
+                                                                }
+                                                            >
+                                                                {t("common.select")}
+                                                            </button>
+                                                        </td>
+                                                    </tr>
+                                                );
+                                            })}
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                }
+                                isOpen={isComponentTableModalOpen}
+                            ></AvoredModal>
 
-              <AvoredModal
-                closeModal={pageModelOnClose}
-                modal_header="Select Component"
-                modal_body={
-                  <div className="text-primary-500">
-                    <table className="min-w-full bg-white shadow-md rounded">
-                      <thead>
-                        <tr className="bg-gray-700 text-white">
-                          <th className="py-3 px-4 rounded-l font-semibold text-left">
-                            {t("common.id")}
-                          </th>
-                          <th className="py-3 px-4 font-semibol text-left">
-                            {t("common.name")}
-                          </th>
-                          <th className="py-3 px-4 font-semibol text-left">
-                            {t("common.identifier")}
-                          </th>
-                          <th className="py-3 px-4 font-semibol text-left">
-                            {t("common.created_at")}
-                          </th>
-                          <th className="py-3 px-4 font-semibol text-left">
-                            {t("common.updated_at")}
-                          </th>
-                          <th className="py-3 px-4 font-semibol text-left">
-                            {t("common.created_by")}
-                          </th>
-                          <th className="py-3 px-4 font-semibol text-left">
-                            {t("common.updated_by")}
-                          </th>
-                          <th className="py-3 px-4 rounded-r font-semibol text-left">
-                            {t("common.action")}
-                          </th>
-                        </tr>
-                      </thead>
-                      <tbody className="">
-                        {components.map((component) => {
-                          return (
-                            <tr key={component.id} className="border-b">
-                              <td className="py-3 px-4">{component.id}</td>
-                              <td className="py-3 px-4">{component.name}</td>
-                              <td className="py-3 px-4">
-                                {component.identifier}
-                              </td>
-                              <td className="py-3 px-4">
-                                {getFormattedDate(component.created_at)}
-                              </td>
-                              <td className="py-3 px-4">
-                                {getFormattedDate(component.updated_at)}
-                              </td>
-                              <td className="py-3 px-4">
-                                {component.created_by}
-                              </td>
-                              <td className="py-3 px-4">
-                                {component.updated_by}
-                              </td>
-                              <td className="py-3 px-4">
+                            <div className="flex items-center">
                                 <button
-                                  type="button"
-                                  className="font-medium text-primary-600 hover:text-primary-800"
-                                  onClick={(e) =>
-                                    componentSelected(e, component.id)
-                                  }
+                                    type="submit"
+                                    className="bg-primary-600 py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
                                 >
-                                  {t("common.select")}
+                                    {t("common.save")}
                                 </button>
-                              </td>
-                            </tr>
-                          );
-                        })}
-                      </tbody>
-                    </table>
-                  </div>
-                }
-                isOpen={isComponentTableModalOpen}
-              ></AvoredModal>
-
-              <div className="flex items-center">
-                <button
-                  type="submit"
-                  className="bg-primary-600 py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
-                >
-                  {t("common.save")}
-                </button>
-                <Link
-                  to="/admin/page"
-                  className="ml-auto font-medium text-gray-600 hover:text-gray-500"
-                >
-                  {t("common.cancel")}
-                </Link>
-              </div>
-            </form>
-          </div>
+                                <Link
+                                    to="/admin/page"
+                                    className="ml-auto font-medium text-gray-600 hover:text-gray-500"
+                                >
+                                    {t("common.cancel")}
+                                </Link>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-  );
+    );
 }
 
 export default PageCreate;
diff --git a/react-admin/src/pages/page/PageTable.jsx b/react-admin/src/pages/page/PageTable.jsx
deleted file mode 100644
index dbeafe70..00000000
--- a/react-admin/src/pages/page/PageTable.jsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import {Link} from "react-router-dom"
-import _ from 'lodash'
-import {usePageTable} from "./hooks/usePageTable"
-import { useTranslation } from "react-i18next"
-
-function PageTable() {
-    const page_api_table_response = usePageTable()
-    const pages = _.get(page_api_table_response, 'data.data.data', [])
-    const [t] = useTranslation("global")
-
-    const getFormattedDate = ((date) => {
-        const date_obj = new Date(date);
-
-        return `${date_obj.getFullYear()}-${("0" + (date_obj.getMonth() + 1)).slice("-2")}-${("0" + date_obj.getDate()).slice("-2")}`;
-    })
-
-
-
-    return (
-      <div className="flex-1 bg-white">
-        <div className="px-5 ml-64">
-          <div className="flex items-center">
-            <div className="p-5 text-2xl font-semibold text-primary-500">
-              {t("pages.pages")}
-            </div>
-            <Link
-              className="ml-auto bg-primary-600 py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
-              to="/admin/page-create"
-            >
-              {t("common.create")}
-            </Link>
-          </div>
-
-          <div className="overflow-x-auto">
-            <table className="min-w-full bg-white shadow-md rounded">
-              <thead>
-                <tr className="bg-gray-700 text-white">
-                  <th className="py-3 px-4 rounded-l font-semibold text-left">
-                    {t("common.id")}
-                  </th>
-                  <th className="py-3 px-4 font-semibol text-left">
-                    {t("common.name")}
-                  </th>
-                  <th className="py-3 px-4 font-semibol text-left">
-                    {t("common.identifier")}
-                  </th>
-                  <th className="py-3 px-4 font-semibol text-left">
-                    {t("common.created_at")}
-                  </th>
-                  <th className="py-3 px-4 font-semibol text-left">
-                    {t("common.updated_at")}
-                  </th>
-                  <th className="py-3 px-4 font-semibol text-left">
-                    {t("common.created_by")}
-                  </th>
-                  <th className="py-3 px-4 font-semibol text-left">
-                    {t("common.updated_by")}
-                  </th>
-                  <th className="py-3 px-4 rounded-r font-semibol text-left">
-                    {t("common.action")}
-                  </th>
-                </tr>
-              </thead>
-              <tbody className="">
-                {pages.map((page) => {
-                  return (
-                    <tr key={page.id} className="border-b">
-                      <td className="py-3 px-4">{page.id}</td>
-                      <td className="py-3 px-4">{page.name}</td>
-                      <td className="py-3 px-4">{page.identifier}</td>
-                      <td className="py-3 px-4">
-                        {getFormattedDate(page.created_at)}
-                      </td>
-                      <td className="py-3 px-4">
-                        {getFormattedDate(page.updated_at)}
-                      </td>
-                      <td className="py-3 px-4">{page.created_by}</td>
-                      <td className="py-3 px-4">{page.updated_by}</td>
-                      <td className="py-3 px-4">
-                        <Link
-                          className="font-medium text-primary-600 hover:text-primary-800"
-                          to={`/admin/page-edit/${page.id}`}
-                        >
-                          {t("common.edit")}
-                        </Link>
-                      </td>
-                    </tr>
-                  );
-                })}
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-    );
-}
-
-export default PageTable
\ No newline at end of file
diff --git a/react-admin/src/pages/page/PageTable.tsx b/react-admin/src/pages/page/PageTable.tsx
new file mode 100644
index 00000000..93be0103
--- /dev/null
+++ b/react-admin/src/pages/page/PageTable.tsx
@@ -0,0 +1,99 @@
+import {Link} from "react-router-dom"
+import _ from 'lodash'
+import {usePageTable} from "./hooks/usePageTable"
+import {useTranslation} from "react-i18next"
+import {useRoleTable} from "../role/hooks/useRoleTable";
+import IRoleModel from "../../types/admin-user/IRoleModel";
+import {createColumnHelper, getCoreRowModel, useReactTable} from "@tanstack/react-table";
+import {getFormattedDate} from "../../lib/common";
+import IPageModel from "../../types/page/IPageModel";
+import AvoRedTable from "../../components/AvoRedTable";
+
+function PageTable() {
+    const [t] = useTranslation("global")
+    const page_api_table_response = useRoleTable();
+    const pages: Array<IPageModel> = _.get(page_api_table_response, 'data.data.data', [])
+
+    const columnHelper = createColumnHelper<IPageModel>()
+    const columns = [
+        columnHelper.accessor('id', {
+            cell: info => info.getValue(),
+            header: t("common.id")
+        }),
+        columnHelper.accessor('name', {
+            cell: info => info.getValue(),
+            header: t("common.name")
+        }),
+        columnHelper.accessor('identifier', {
+            cell: info => info.getValue(),
+            header: t("common.identifier")
+        }),
+        columnHelper.accessor('created_at', {
+            id: "created_at",
+            cell: info => getFormattedDate(info.getValue()),
+            header: t("common.created_at")
+        }),
+        columnHelper.accessor('created_by', {
+            cell: info => info.getValue(),
+            header: t("common.created_by")
+        }),
+        columnHelper.accessor('updated_at', {
+            cell: info => getFormattedDate(info.getValue()),
+            header: t("common.updated_at")
+        }),
+        columnHelper.accessor('updated_by', {
+            cell: info => info.getValue(),
+            header: t("common.updated_by")
+        }),
+        columnHelper.accessor('action', {
+            cell: info => {
+                return (
+                    <Link
+                        className="font-medium text-primary-600 hover:text-primary-800"
+                        to={`/admin/page-edit/${info.row.original.id}`}
+                    >
+                        {t("common.edit")}
+                    </Link>
+                )
+            },
+            header: t("common.action"),
+            enableHiding: false
+        }),
+    ]
+
+    const table = useReactTable({
+        data: pages,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        initialState: {
+            columnVisibility: {
+                created_at: false,
+                created_by: false
+            }
+        }
+    })
+
+    return (
+        <div className="flex-1 bg-white">
+            <div className="px-5 ml-64">
+                <div className="flex items-center">
+                    <div className="p-5 text-2xl font-semibold text-primary-500">
+                        {t("pages.pages")}
+                    </div>
+                    <Link
+                        className="ml-auto bg-primary-600 py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
+                        to="/admin/page-create"
+                    >
+                        {t("common.create")}
+                    </Link>
+                </div>
+
+                <div className="overflow-x-auto">
+                    <AvoRedTable table={table}/>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default PageTable
\ No newline at end of file
diff --git a/react-admin/src/pages/page/hooks/useComponentAll.js b/react-admin/src/pages/page/hooks/useComponentAll.ts
similarity index 100%
rename from react-admin/src/pages/page/hooks/useComponentAll.js
rename to react-admin/src/pages/page/hooks/useComponentAll.ts
diff --git a/react-admin/src/pages/page/hooks/useGetPage.js b/react-admin/src/pages/page/hooks/useGetPage.ts
similarity index 92%
rename from react-admin/src/pages/page/hooks/useGetPage.js
rename to react-admin/src/pages/page/hooks/useGetPage.ts
index e45581dc..4c1ff767 100644
--- a/react-admin/src/pages/page/hooks/useGetPage.js
+++ b/react-admin/src/pages/page/hooks/useGetPage.ts
@@ -3,7 +3,7 @@ import { useAxios } from '../../../hooks/useAxios'
 import _ from 'lodash'
 import {useNavigate} from 'react-router-dom'
 
-export const useGetPage = (page_id) => {
+export const useGetPage = (page_id: string) => {
     const client = useAxios()
     const redirect = useNavigate()
 
diff --git a/react-admin/src/pages/page/hooks/usePageTable.js b/react-admin/src/pages/page/hooks/usePageTable.ts
similarity index 100%
rename from react-admin/src/pages/page/hooks/usePageTable.js
rename to react-admin/src/pages/page/hooks/usePageTable.ts
diff --git a/react-admin/src/pages/page/hooks/useStorePage.js b/react-admin/src/pages/page/hooks/useStorePage.ts
similarity index 100%
rename from react-admin/src/pages/page/hooks/useStorePage.js
rename to react-admin/src/pages/page/hooks/useStorePage.ts
diff --git a/react-admin/src/pages/page/hooks/useUpdatePage.js b/react-admin/src/pages/page/hooks/useUpdatePage.ts
similarity index 91%
rename from react-admin/src/pages/page/hooks/useUpdatePage.js
rename to react-admin/src/pages/page/hooks/useUpdatePage.ts
index c04aaf6e..86bc75c6 100644
--- a/react-admin/src/pages/page/hooks/useUpdatePage.js
+++ b/react-admin/src/pages/page/hooks/useUpdatePage.ts
@@ -3,7 +3,7 @@ import { useAxios } from '../../../hooks/useAxios'
 import _ from 'lodash'
 import {useNavigate} from 'react-router-dom'
 
-export const useUpdatePage = (page_id) => {
+export const useUpdatePage = (page_id: string) => {
     const client = useAxios();
     const redirect = useNavigate();
     return useMutation({
diff --git a/react-admin/src/types/page/IPageModel.ts b/react-admin/src/types/page/IPageModel.ts
new file mode 100644
index 00000000..dfc77c54
--- /dev/null
+++ b/react-admin/src/types/page/IPageModel.ts
@@ -0,0 +1,10 @@
+export default interface IPageModel {
+    id: string;
+    name: string;
+    identifier: string;
+    created_at: string;
+    created_by: string;
+    updated_at: string;
+    updated_by: string;
+    action: string;
+}
\ No newline at end of file

From 2575505e7b9e07858fb93b1a24e8541732380d20 Mon Sep 17 00:00:00 2001
From: Purvesh <ind.purvesh@gmail.com>
Date: Sun, 9 Jun 2024 20:03:22 +1200
Subject: [PATCH 2/2] page create ts in progress

---
 .../src/pages/page/PageComponentTable.tsx     |  86 ++++++++++++++
 react-admin/src/pages/page/PageCreate.jsx     | 108 +++++-------------
 .../pages/page/schemas/page.create.schema.ts  |  10 ++
 .../pages/role/schemas/role.create.schema.ts  |  12 +-
 .../src/types/component/IComponentModel.ts    |   9 ++
 5 files changed, 139 insertions(+), 86 deletions(-)
 create mode 100644 react-admin/src/pages/page/PageComponentTable.tsx
 create mode 100644 react-admin/src/pages/page/schemas/page.create.schema.ts
 create mode 100644 react-admin/src/types/component/IComponentModel.ts

diff --git a/react-admin/src/pages/page/PageComponentTable.tsx b/react-admin/src/pages/page/PageComponentTable.tsx
new file mode 100644
index 00000000..28c75df2
--- /dev/null
+++ b/react-admin/src/pages/page/PageComponentTable.tsx
@@ -0,0 +1,86 @@
+import {useTranslation} from "react-i18next";
+import {getFormattedDate} from "../../lib/common";
+import IComponentModel from "../../types/component/IComponentModel";
+
+interface ISelectedComponentFunction {
+    (e: React.MouseEvent, id: string): void
+}
+
+interface IPageComponentProps {
+    components: Array<IComponentModel>;
+    componentSelected: ISelectedComponentFunction
+}
+
+function PageComponentTable(props: IPageComponentProps) {
+    const [t] = useTranslation("global");
+    return (
+        <table className="min-w-full bg-white shadow-md rounded">
+            <thead>
+            <tr className="bg-gray-700 text-white">
+                <th className="py-3 px-4 rounded-l font-semibold text-left">
+                    {t("common.id")}
+                </th>
+                <th className="py-3 px-4 font-semibol text-left">
+                    {t("common.name")}
+                </th>
+                <th className="py-3 px-4 font-semibol text-left">
+                    {t("common.identifier")}
+                </th>
+                <th className="py-3 px-4 font-semibol text-left">
+                    {t("common.created_at")}
+                </th>
+                <th className="py-3 px-4 font-semibol text-left">
+                    {t("common.updated_at")}
+                </th>
+                <th className="py-3 px-4 font-semibol text-left">
+                    {t("common.created_by")}
+                </th>
+                <th className="py-3 px-4 font-semibol text-left">
+                    {t("common.updated_by")}
+                </th>
+                <th className="py-3 px-4 rounded-r font-semibol text-left">
+                    {t("common.action")}
+                </th>
+            </tr>
+            </thead>
+            <tbody className="">
+            {props.components.map((component) => {
+                return (
+                    <tr key={component.id} className="border-b">
+                        <td className="py-3 px-4">{component.id}</td>
+                        <td className="py-3 px-4">{component.name}</td>
+                        <td className="py-3 px-4">
+                            {component.identifier}
+                        </td>
+                        <td className="py-3 px-4">
+                            {getFormattedDate(component.created_at)}
+                        </td>
+                        <td className="py-3 px-4">
+                            {getFormattedDate(component.updated_at)}
+                        </td>
+                        <td className="py-3 px-4">
+                            {component.created_by}
+                        </td>
+                        <td className="py-3 px-4">
+                            {component.updated_by}
+                        </td>
+                        <td className="py-3 px-4">
+                            <button
+                                type="button"
+                                className="font-medium text-primary-600 hover:text-primary-800"
+                                onClick={(e) =>
+                                    props.componentSelected(e, component.id)
+                                }
+                            >
+                                {t("common.select")}
+                            </button>
+                        </td>
+                    </tr>
+                );
+            })}
+            </tbody>
+        </table>
+    )
+}
+
+export default PageComponentTable
\ No newline at end of file
diff --git a/react-admin/src/pages/page/PageCreate.jsx b/react-admin/src/pages/page/PageCreate.jsx
index a02534ef..cb289f6f 100644
--- a/react-admin/src/pages/page/PageCreate.jsx
+++ b/react-admin/src/pages/page/PageCreate.jsx
@@ -7,6 +7,10 @@ import _ from "lodash";
 import {useComponentAll} from "./hooks/useComponentAll";
 import {useStorePage} from "./hooks/useStorePage";
 import {useTranslation} from "react-i18next";
+import {useForm} from "react-hook-form";
+import {joiResolver} from "@hookform/resolvers/joi";
+import {PageCreateSchema} from "./schemas/page.create.schema"
+import PageComponentTable from "./PageComponentTable";
 
 function PageCreate() {
     const [isComponentTableModalOpen, setIsComponentTableModalOpen] =
@@ -15,6 +19,17 @@ function PageCreate() {
     const [page, setPage] = useState({});
     const [t] = useTranslation("global");
 
+    const {
+        control,
+        register,
+        handleSubmit,
+        formState: {errors},
+        setValue,
+        getValues
+    } = useForm({
+        resolver: joiResolver(PageCreateSchema, {allowUnknown: true}),
+    });
+
     const component_all_api_response = useComponentAll();
     const components = _.get(component_all_api_response, "data.data", []);
 
@@ -164,10 +179,10 @@ function PageCreate() {
         );
     };
 
-    const handleSubmit = async (e) => {
-        e.preventDefault();
-
-        mutate(page);
+    const submitHandler = async (data) => {
+        // e.preventDefault();
+        console.log(data)
+        // mutate(page);
     };
 
     return (
@@ -180,22 +195,20 @@ function PageCreate() {
                         </h1>
                         {/*<p className="text-gray-600 dark:text-gray-300 mb-6">Use a permanent address where you can*/}
                         {/*    receive mail.</p>*/}
-                        <form onSubmit={handleSubmit}>
+                        <form onSubmit={handleSubmit(submitHandler)}>
                             <div className="mb-4">
-                                <input
-                                    type="text"
+                                <InputField
+                                    autofocus={true}
                                     placeholder="Name"
-                                    value={_.get(page, "name", "")}
-                                    onChange={(e) => pageNameOnChange(e.target.value)}
+                                    register={register("name")}
                                     className="border p-2 rounded w-full"
                                 />
                             </div>
                             <div className="mb-4">
-                                <input
+                                <InputField
                                     type="text"
                                     placeholder="Identifier"
-                                    value={_.get(page, "identifier", "")}
-                                    onChange={(e) => pageIdentifierOnChange(e.target.value)}
+                                    register={register("identifier")}
                                     className="border p-2 rounded w-full"
                                 />
                             </div>
@@ -214,8 +227,8 @@ function PageCreate() {
                                 >
                                     <PlusIcon className="text-primary-500 h-6 w-6"/>
                                     <span className="text-sm ml-1 text-primary-500">
-                    Add Component
-                  </span>
+                                        Add Component
+                                    </span>
                                 </button>
                             </div>
 
@@ -224,72 +237,7 @@ function PageCreate() {
                                 modal_header="Select Component"
                                 modal_body={
                                     <div className="text-primary-500">
-                                        <table className="min-w-full bg-white shadow-md rounded">
-                                            <thead>
-                                            <tr className="bg-gray-700 text-white">
-                                                <th className="py-3 px-4 rounded-l font-semibold text-left">
-                                                    {t("common.id")}
-                                                </th>
-                                                <th className="py-3 px-4 font-semibol text-left">
-                                                    {t("common.name")}
-                                                </th>
-                                                <th className="py-3 px-4 font-semibol text-left">
-                                                    {t("common.identifier")}
-                                                </th>
-                                                <th className="py-3 px-4 font-semibol text-left">
-                                                    {t("common.created_at")}
-                                                </th>
-                                                <th className="py-3 px-4 font-semibol text-left">
-                                                    {t("common.updated_at")}
-                                                </th>
-                                                <th className="py-3 px-4 font-semibol text-left">
-                                                    {t("common.created_by")}
-                                                </th>
-                                                <th className="py-3 px-4 font-semibol text-left">
-                                                    {t("common.updated_by")}
-                                                </th>
-                                                <th className="py-3 px-4 rounded-r font-semibol text-left">
-                                                    {t("common.action")}
-                                                </th>
-                                            </tr>
-                                            </thead>
-                                            <tbody className="">
-                                            {components.map((component) => {
-                                                return (
-                                                    <tr key={component.id} className="border-b">
-                                                        <td className="py-3 px-4">{component.id}</td>
-                                                        <td className="py-3 px-4">{component.name}</td>
-                                                        <td className="py-3 px-4">
-                                                            {component.identifier}
-                                                        </td>
-                                                        <td className="py-3 px-4">
-                                                            {getFormattedDate(component.created_at)}
-                                                        </td>
-                                                        <td className="py-3 px-4">
-                                                            {getFormattedDate(component.updated_at)}
-                                                        </td>
-                                                        <td className="py-3 px-4">
-                                                            {component.created_by}
-                                                        </td>
-                                                        <td className="py-3 px-4">
-                                                            {component.updated_by}
-                                                        </td>
-                                                        <td className="py-3 px-4">
-                                                            <button
-                                                                type="button"
-                                                                className="font-medium text-primary-600 hover:text-primary-800"
-                                                                onClick={(e) =>
-                                                                    componentSelected(e, component.id)
-                                                                }
-                                                            >
-                                                                {t("common.select")}
-                                                            </button>
-                                                        </td>
-                                                    </tr>
-                                                );
-                                            })}
-                                            </tbody>
-                                        </table>
+                                        <PageComponentTable components={components} componentSelected={componentSelected} />
                                     </div>
                                 }
                                 isOpen={isComponentTableModalOpen}
diff --git a/react-admin/src/pages/page/schemas/page.create.schema.ts b/react-admin/src/pages/page/schemas/page.create.schema.ts
new file mode 100644
index 00000000..7e78dc89
--- /dev/null
+++ b/react-admin/src/pages/page/schemas/page.create.schema.ts
@@ -0,0 +1,10 @@
+import Joi from 'joi';
+
+export const PageCreateSchema = Joi.object({
+    name : Joi.string().required().messages({
+        'string.empty': 'Name is required.',
+    }),
+    identifier : Joi.string().required().messages({
+        'string.empty': 'Identifier is required.',
+    })
+});
diff --git a/react-admin/src/pages/role/schemas/role.create.schema.ts b/react-admin/src/pages/role/schemas/role.create.schema.ts
index a743cd0d..88a17b34 100644
--- a/react-admin/src/pages/role/schemas/role.create.schema.ts
+++ b/react-admin/src/pages/role/schemas/role.create.schema.ts
@@ -1,10 +1,10 @@
 import Joi from 'joi';
 
 export const RoleCreateSchema = Joi.object({
-    // name : Joi.string().required().messages({
-    //     'string.empty': 'Name is required.',
-    // }),
-    // identifier : Joi.string().required().messages({
-    //     'string.empty': 'Identifier is required.',
-    // })
+    name : Joi.string().required().messages({
+        'string.empty': 'Name is required.',
+    }),
+    identifier : Joi.string().required().messages({
+        'string.empty': 'Identifier is required.',
+    })
 });
diff --git a/react-admin/src/types/component/IComponentModel.ts b/react-admin/src/types/component/IComponentModel.ts
new file mode 100644
index 00000000..5d45c6c9
--- /dev/null
+++ b/react-admin/src/types/component/IComponentModel.ts
@@ -0,0 +1,9 @@
+export default interface IComponentModel {
+    id: string;
+    name: string;
+    identifier: string;
+    created_at: string;
+    updated_at: string;
+    created_by: string;
+    updated_by: string;
+}
\ No newline at end of file