updates to prepare for demo

package.json

@@ -37,6 +37,7 @@
     "react-github-btn": "1.2.1",
     "react-images-viewer": "1.7.1",
     "react-quill": "1.3.5",
+    "react-router": "6.3.0",
     "react-router-dom": "6.2.1",
     "react-scripts": "5.0.0",
     "react-table": "7.7.0",
@@ -102,5 +103,11 @@
   "types": "dist/index.d.ts",
   "files": [
     "dist/**/*"
+  ],
+  "react/no-unstable-nested-components": [
+    "off",
+    {
+      "allowAsProps": true
+    }
   ]
 }

src/App.tsx

@@ -13,7 +13,14 @@ Coded by www.creative-tim.com
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 */
 
-import { useState, useEffect, useMemo, JSXElementConstructor, Key, ReactElement } from "react";
+import React, {
+  useState,
+  useEffect,
+  useMemo,
+  JSXElementConstructor,
+  Key,
+  ReactElement,
+} from "react";
 
 // react-router components
 import { Routes, Route, Navigate, useLocation } from "react-router-dom";
@@ -53,6 +60,8 @@ import { useMaterialUIController, setMiniSidenav, setOpenConfigurator } from "co
 import brandWhite from "assets/images/logo-ct.png";
 import brandDark from "assets/images/logo-ct-dark.png";
 import EntityCreate from "./qqq/pages/entity-create";
+import EntityView from "./qqq/pages/entity-view";
+import EntityEdit from "./qqq/pages/entity-edit";
 
 export default function App() {
   const [controller, dispatch] = useMaterialUIController();
@@ -156,6 +165,8 @@ export default function App() {
   );
 
   const entityCreateElement = <EntityCreate />;
+  const entityViewElement = <EntityView />;
+  const entityEditElement = <EntityEdit />;
 
   return direction === "rtl" ? (
     <CacheProvider value={rtlCache}>
@@ -177,9 +188,10 @@ export default function App() {
         )}
         {layout === "vr" && <Configurator />}
         <Routes>
-          {getRoutes(routes)}
           <Route path="*" element={<Navigate to="/dashboards/analytics" />} />
           <Route path="/:tableName/create" element={entityCreateElement} key="entity-create" />;
+          <Route path="/:tableName/view/:id" element={entityViewElement} key="entity-view" />;
+          {getRoutes(routes)}
         </Routes>
       </ThemeProvider>
     </CacheProvider>
@@ -202,9 +214,11 @@ export default function App() {
       )}
       {layout === "vr" && <Configurator />}
       <Routes>
-        {getRoutes(routes)}
         <Route path="*" element={<Navigate to="/dashboards/analytics" />} />
         <Route path="/:tableName/create" element={entityCreateElement} key="entity-create" />;
+        <Route path="/:tableName/view/:id" element={entityViewElement} key="entity-view" />;
+        <Route path="/:tableName/edit/:id" element={entityEditElement} key="entity-edit" />;
+        {getRoutes(routes)}
       </Routes>
     </ThemeProvider>
   );

src/qqq/pages/components/EntityForm/index.tsx

@@ -0,0 +1,184 @@
+/**
+ =========================================================
+ * Material Dashboard 2 PRO React TS - v1.0.0
+ =========================================================
+
+ * Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+ * Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+ Coded by www.creative-tim.com
+
+ =========================================================
+
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+ */
+
+/* eslint-disable no-unused-vars */
+/* eslint-disable spaced-comment */
+
+import { useParams } from "react-router-dom";
+
+// @material-ui core components
+import Card from "@mui/material/Card";
+import Grid from "@mui/material/Grid";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+
+// Settings page components
+import FormField from "layouts/pages/account/components/FormField";
+
+// qqq imports
+import { QTableMetaData } from "qqq-frontend-core/lib/model/metaData/QTableMetaData";
+import { QController } from "qqq-frontend-core/lib/controllers/QController";
+import React, { useState } from "react";
+import { QTableRecord } from "qqq-frontend-core/lib/model/metaData/QTableRecord";
+import MDButton from "../../../../components/MDButton";
+
+const qController = new QController("http://localhost:8000");
+
+// Declaring props types for EntityForm
+interface Props {
+  id?: string;
+}
+
+function EntityForm({ id }: Props): JSX.Element {
+  const { tableName } = useParams();
+  const [formFields, setFormFields] = useState([] as JSX.Element[]);
+  const defaultValues: { [key: string]: string } = {};
+  const [formValues, setFormValues] = useState(defaultValues);
+  const [loadCounter, setLoadCounter] = useState(0);
+
+  const handleInputChange = (e: { target: { name: any; value: any } }) => {
+    console.log("A");
+    const { name, value } = e.target;
+    console.log(name);
+    console.log(value);
+    formValues[name] = value;
+    setFormValues(formValues);
+  };
+
+  const tableMetaData = new QTableMetaData(tableName);
+  if (loadCounter === 0) {
+    setLoadCounter(1);
+
+    (async () => {
+      await qController.loadTableMetaData(tableName).then((tableMetaData) => {
+        const formFields = [] as JSX.Element[];
+
+        // make a call to query (just get all for now, and iterate and filter like a caveman)
+        if (id !== null) {
+          (async () => {
+            await qController.query(tableName, 250).then((results) => {
+              let foundRecord: QTableRecord;
+              results.forEach((record) => {
+                const values = new Map(Object.entries(record.values));
+                values.forEach((value, key) => {
+                  if (key === tableMetaData.primaryKeyField && value.toString() === id) {
+                    foundRecord = record;
+                  }
+                });
+              });
+
+              if (id != null) {
+                const values = new Map(Object.entries(foundRecord.values));
+                values.forEach((value, key) => {
+                  formValues[key] = value;
+                  console.log(`key:${key},value:${value}`);
+                });
+              }
+
+              const fields = new Map(Object.entries(tableMetaData.fields));
+              const sortedEntries = new Map([...fields.entries()].sort());
+              sortedEntries.forEach((fieldMetaData) => {
+                if (fieldMetaData.name !== tableMetaData.primaryKeyField) {
+                  if (formValues[fieldMetaData.name] == null) {
+                    formValues[fieldMetaData.name] = "";
+                  }
+
+                  formFields.push(
+                    <Grid item xs={12} sm={4} key={fieldMetaData.name}>
+                      <FormField
+                        key={fieldMetaData.name}
+                        name={fieldMetaData.name}
+                        id={fieldMetaData.name}
+                        label={fieldMetaData.label}
+                        value={formValues[fieldMetaData.name]}
+                        onChange={handleInputChange}
+                      />
+                    </Grid>
+                  );
+                }
+              });
+
+              setLoadCounter(2);
+              setFormValues(formValues);
+            });
+          })();
+        } else {
+          const fields = new Map(Object.entries(tableMetaData.fields));
+          const sortedEntries = new Map([...fields.entries()].sort());
+          sortedEntries.forEach((fieldMetaData) => {
+            if (fieldMetaData.name !== tableMetaData.primaryKeyField) {
+              formFields.push(
+                <Grid item xs={12} sm={4} key={fieldMetaData.name}>
+                  <FormField
+                    key={fieldMetaData.name}
+                    name={fieldMetaData.name}
+                    id={fieldMetaData.name}
+                    label={fieldMetaData.label}
+                    value={formValues[fieldMetaData.name]}
+                    onChange={handleInputChange}
+                  />
+                </Grid>
+              );
+            }
+          });
+        }
+
+        setFormFields(formFields);
+      });
+    })();
+  }
+
+  const handleSubmit = (event: { preventDefault: () => void }) => {
+    event.preventDefault();
+
+    (async () => {
+      await qController.create(tableName, formValues).then((recordList) => {
+        const values = new Map(Object.entries(recordList[0].values));
+        window.location.href = `/${tableName}/view/${values.get("id")}`;
+      });
+    })();
+  };
+
+  const pageTitle = id != null ? `Edit ${tableMetaData.label}` : `Create ${tableMetaData.label}`;
+
+  return (
+    <Card id="basic-info" sx={{ overflow: "visible" }}>
+      <MDBox p={3}>
+        <MDTypography variant="h5">{pageTitle}</MDTypography>
+      </MDBox>
+      <MDBox component="form" pb={3} px={3} onSubmit={handleSubmit}>
+        <Grid key="fieldsGrid" container spacing={3}>
+          {formFields}
+        </Grid>
+        <Grid key="buttonGrid" container spacing={3}>
+          <MDBox ml="auto">
+            <MDButton type="submit" variant="gradient" color="dark" size="small">
+              save {tableMetaData.label}
+            </MDButton>
+          </MDBox>
+        </Grid>
+      </MDBox>
+    </Card>
+  );
+}
+
+// Declaring default props for DefaultCell
+EntityForm.defaultProps = {
+  id: null,
+};
+
+export default EntityForm;

src/qqq/pages/entity-create/components/Accounts/index.tsx

@@ -1,273 +0,0 @@
-/**
-=========================================================
-* Material Dashboard 2 PRO React TS - v1.0.0
-=========================================================
-
-* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
-* Copyright 2022 Creative Tim (https://www.creative-tim.com)
-
-Coded by www.creative-tim.com
-
- =========================================================
-
-* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-*/
-
-import { useState } from "react";
-
-// @mui material components
-import Card from "@mui/material/Card";
-import Icon from "@mui/material/Icon";
-import Switch from "@mui/material/Switch";
-import Tooltip from "@mui/material/Tooltip";
-import Divider from "@mui/material/Divider";
-
-// Material Dashboard 2 PRO React TS components
-import MDBox from "components/MDBox";
-import MDTypography from "components/MDTypography";
-import MDAvatar from "components/MDAvatar";
-import MDInput from "components/MDInput";
-import MDButton from "components/MDButton";
-
-// Images
-import logoSlack from "assets/images/small-logos/logo-slack.svg";
-import logoSpotify from "assets/images/small-logos/logo-spotify.svg";
-import logoAtlassian from "assets/images/small-logos/logo-atlassian.svg";
-import logoAsana from "assets/images/small-logos/logo-asana.svg";
-
-// Material Dashboard 2 PRO React TS components
-import { useMaterialUIController } from "context";
-
-function Accounts(): JSX.Element {
-  const [controller] = useMaterialUIController();
-  const { darkMode } = controller;
-
-  const [slack2FA, setSlack2FA] = useState<boolean>(true);
-  const [spotify2FA, setSpotify2FA] = useState<boolean>(true);
-  const [atlassian2FA, setAtlassian2FA] = useState<boolean>(true);
-  const [asana2FA, setAsana2FA] = useState<boolean>(false);
-
-  const handleSetSlack2FA = () => setSlack2FA(!slack2FA);
-  const handleSetSpotify2FA = () => setSpotify2FA(!spotify2FA);
-  const handleSetAtlassian2FA = () => setAtlassian2FA(!atlassian2FA);
-  const handleSetAsana2FA = () => setAsana2FA(!asana2FA);
-
-  return (
-    <Card id="accounts">
-      <MDBox p={3} lineHeight={1}>
-        <MDBox mb={1}>
-          <MDTypography variant="h5">Accounts</MDTypography>
-        </MDBox>
-        <MDTypography variant="button" color="text">
-          Here you can setup and manage your integration settings.
-        </MDTypography>
-      </MDBox>
-      <MDBox pt={2} pb={3} px={3}>
-        <MDBox
-          display="flex"
-          justifyContent="space-between"
-          alignItems={{ xs: "flex-start", sm: "center" }}
-          flexDirection={{ xs: "column", sm: "row" }}
-        >
-          <MDBox display="flex" alignItems="center">
-            <MDAvatar src={logoSlack} alt="Slack logo" variant="rounded" />
-            <MDBox ml={2}>
-              <MDTypography variant="h5" fontWeight="medium">
-                Slack
-              </MDTypography>
-              <MDBox display="flex" alignItems="flex-end">
-                <MDTypography variant="button" color="text">
-                  Show less
-                </MDTypography>
-                <MDTypography variant="button" color="text" sx={{ lineHeight: 0 }}>
-                  <Icon fontSize="small">expand_less</Icon>
-                </MDTypography>
-              </MDBox>
-            </MDBox>
-          </MDBox>
-          <MDBox
-            display="flex"
-            alignItems="center"
-            justifyContent="flex-end"
-            width={{ xs: "100%", sm: "auto" }}
-            mt={{ xs: 1, sm: 0 }}
-          >
-            <MDBox lineHeight={0} mx={2}>
-              <MDTypography variant="button" color="text">
-                {slack2FA ? "Enabled" : "Disabled"}
-              </MDTypography>
-            </MDBox>
-            <MDBox mr={1}>
-              <Switch checked={slack2FA} onChange={handleSetSlack2FA} />
-            </MDBox>
-          </MDBox>
-        </MDBox>
-        <MDBox ml={2} pl={6} pt={2} lineHeight={1}>
-          <MDTypography variant="button" color="text">
-            You haven&apos;t added your Slack yet or you aren&apos;t authorized. Please add our
-            Slack Bot to your account by clicking on here. When you&apos;ve added the bot, send your
-            verification code that you have received.
-          </MDTypography>
-          <MDBox
-            bgColor={darkMode ? "grey-900" : "grey-100"}
-            borderRadius="lg"
-            display="flex"
-            justifyContent="space-between"
-            alignItems={{ xs: "flex-start", sm: "center" }}
-            flexDirection={{ xs: "column", sm: "row" }}
-            my={3}
-            py={1}
-            pl={{ xs: 1, sm: 2 }}
-            pr={1}
-          >
-            <MDTypography variant="button" fontWeight="medium" color="text">
-              Verification Code
-            </MDTypography>
-            <MDBox width={{ xs: "100%", sm: "25%", md: "15%" }} mt={{ xs: 1, sm: 0 }}>
-              <Tooltip title="Copy" placement="top">
-                <MDInput size="small" value="1172913" />
-              </Tooltip>
-            </MDBox>
-          </MDBox>
-          <MDBox
-            bgColor={darkMode ? "grey-900" : "grey-100"}
-            borderRadius="lg"
-            display="flex"
-            justifyContent="space-between"
-            alignItems={{ xs: "flex-start", sm: "center" }}
-            flexDirection={{ xs: "column", sm: "row" }}
-            my={3}
-            py={1}
-            pl={{ xs: 1, sm: 2 }}
-            pr={1}
-          >
-            <MDTypography variant="button" fontWeight="medium" color="text">
-              Connected account
-            </MDTypography>
-            <MDBox
-              display="flex"
-              alignItems={{ xs: "flex-start", sm: "center" }}
-              flexDirection={{ xs: "column", sm: "row" }}
-            >
-              <MDBox mr={2} mb={{ xs: 1, sm: 0 }} lineHeight={0}>
-                <MDTypography variant="button" fontWeight="medium">
-                  hello@creative-tim.com
-                </MDTypography>
-              </MDBox>
-              <MDButton variant="gradient" color="dark" size="small">
-                delete
-              </MDButton>
-            </MDBox>
-          </MDBox>
-        </MDBox>
-        <Divider />
-        <MDBox
-          display="flex"
-          justifyContent="space-between"
-          alignItems={{ xs: "flex-start", sm: "center" }}
-          flexDirection={{ xs: "column", sm: "row" }}
-        >
-          <MDBox display="flex" alignItems="center">
-            <MDAvatar src={logoSpotify} alt="Slack logo" variant="rounded" />
-            <MDBox ml={2} lineHeight={0}>
-              <MDTypography variant="h5" fontWeight="medium">
-                Spotify
-              </MDTypography>
-              <MDTypography variant="button" color="text">
-                Music
-              </MDTypography>
-            </MDBox>
-          </MDBox>
-          <MDBox
-            display="flex"
-            justifyContent="flex-end"
-            alignItems="center"
-            width={{ xs: "100%", sm: "auto" }}
-            mt={{ xs: 1, sm: 0 }}
-          >
-            <MDBox lineHeight={0} mx={2}>
-              <MDTypography variant="button" color="text">
-                {spotify2FA ? "Enabled" : "Disabled"}
-              </MDTypography>
-            </MDBox>
-            <MDBox mr={1}>
-              <Switch checked={spotify2FA} onChange={handleSetSpotify2FA} />
-            </MDBox>
-          </MDBox>
-        </MDBox>
-        <Divider />
-        <MDBox
-          display="flex"
-          justifyContent="space-between"
-          alignItems={{ xs: "flex-start", sm: "center" }}
-          flexDirection={{ xs: "column", sm: "row" }}
-        >
-          <MDBox display="flex" alignItems="center">
-            <MDAvatar src={logoAtlassian} alt="Slack logo" variant="rounded" />
-            <MDBox ml={2} lineHeight={0}>
-              <MDTypography variant="h5" fontWeight="medium">
-                Atlassian
-              </MDTypography>
-              <MDTypography variant="button" color="text">
-                Payment vendor
-              </MDTypography>
-            </MDBox>
-          </MDBox>
-          <MDBox
-            display="flex"
-            justifyContent="flex-end"
-            alignItems="center"
-            width={{ xs: "100%", sm: "auto" }}
-            mt={{ xs: 1, sm: 0 }}
-          >
-            <MDBox lineHeight={0} mx={2}>
-              <MDTypography variant="button" color="text">
-                {atlassian2FA ? "Enabled" : "Disabled"}
-              </MDTypography>
-            </MDBox>
-            <MDBox mr={1}>
-              <Switch checked={atlassian2FA} onChange={handleSetAtlassian2FA} />
-            </MDBox>
-          </MDBox>
-        </MDBox>
-        <Divider />
-        <MDBox
-          display="flex"
-          justifyContent="space-between"
-          alignItems={{ xs: "flex-start", sm: "center" }}
-          flexDirection={{ xs: "column", sm: "row" }}
-        >
-          <MDBox display="flex" alignItems="center">
-            <MDAvatar src={logoAsana} alt="Slack logo" variant="rounded" />
-            <MDBox ml={2} lineHeight={0}>
-              <MDTypography variant="h5" fontWeight="medium">
-                Asana
-              </MDTypography>
-              <MDTypography variant="button" color="text">
-                Organize your team
-              </MDTypography>
-            </MDBox>
-          </MDBox>
-          <MDBox
-            display="flex"
-            alignItems="center"
-            justifyContent="flex-end"
-            width={{ xs: "100%", sm: "auto" }}
-            mt={{ xs: 1, sm: 0 }}
-          >
-            <MDBox lineHeight={0} mx={2}>
-              <MDTypography variant="button" color="text">
-                {asana2FA ? "Enabled" : "Disabled"}
-              </MDTypography>
-            </MDBox>
-            <MDBox mr={1}>
-              <Switch checked={asana2FA} onChange={handleSetAsana2FA} />
-            </MDBox>
-          </MDBox>
-        </MDBox>
-      </MDBox>
-    </Card>
-  );
-}
-
-export default Accounts;

src/qqq/pages/entity-create/components/Authentication/index.tsx

@@ -1,113 +0,0 @@
-/**
-=========================================================
-* Material Dashboard 2 PRO React TS - v1.0.0
-=========================================================
-
-* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
-* Copyright 2022 Creative Tim (https://www.creative-tim.com)
-
-Coded by www.creative-tim.com
-
- =========================================================
-
-* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-*/
-
-// @mui material components
-import Card from "@mui/material/Card";
-import Divider from "@mui/material/Divider";
-
-// Material Dashboard 2 PRO React TS components
-import MDBox from "components/MDBox";
-import MDTypography from "components/MDTypography";
-import MDButton from "components/MDButton";
-import MDBadge from "components/MDBadge";
-
-function Authentication(): JSX.Element {
-  return (
-    <Card id="2fa" sx={{ overflow: "visible" }}>
-      <MDBox display="flex" justifyContent="space-between" alignItems="center" p={3}>
-        <MDTypography variant="h5">Two-factor authentication</MDTypography>
-        <MDBadge variant="contained" color="success" badgeContent="enabled" container />
-      </MDBox>
-      <MDBox p={3}>
-        <MDBox
-          display="flex"
-          justifyContent="space-between"
-          alignItems={{ xs: "flex-start", sm: "center" }}
-          flexDirection={{ xs: "column", sm: "row" }}
-        >
-          <MDTypography variant="body2" color="text">
-            Security keys
-          </MDTypography>
-          <MDBox
-            display="flex"
-            alignItems={{ xs: "flex-start", sm: "center" }}
-            flexDirection={{ xs: "column", sm: "row" }}
-          >
-            <MDBox mx={{ xs: 0, sm: 2 }} mb={{ xs: 1, sm: 0 }}>
-              <MDTypography variant="button" color="text" fontWeight="regular">
-                No Security keys
-              </MDTypography>
-            </MDBox>
-            <MDButton variant="outlined" color="dark" size="small">
-              add
-            </MDButton>
-          </MDBox>
-        </MDBox>
-        <Divider />
-        <MDBox
-          display="flex"
-          justifyContent="space-between"
-          alignItems={{ xs: "flex-start", sm: "center" }}
-          flexDirection={{ xs: "column", sm: "row" }}
-        >
-          <MDTypography variant="body2" color="text">
-            SMS number
-          </MDTypography>
-          <MDBox
-            display="flex"
-            alignItems={{ xs: "flex-start", sm: "center" }}
-            flexDirection={{ xs: "column", sm: "row" }}
-          >
-            <MDBox mx={{ xs: 0, sm: 2 }} mb={{ xs: 1, sm: 0 }}>
-              <MDTypography variant="button" color="text" fontWeight="regular">
-                +3012374423
-              </MDTypography>
-            </MDBox>
-            <MDButton variant="outlined" color="dark" size="small">
-              edit
-            </MDButton>
-          </MDBox>
-        </MDBox>
-        <Divider />
-        <MDBox
-          display="flex"
-          justifyContent="space-between"
-          alignItems={{ xs: "flex-start", sm: "center" }}
-          flexDirection={{ xs: "column", sm: "row" }}
-        >
-          <MDTypography variant="body2" color="text">
-            Authenticator app
-          </MDTypography>
-          <MDBox
-            display="flex"
-            alignItems={{ xs: "flex-start", sm: "center" }}
-            flexDirection={{ xs: "column", sm: "row" }}
-          >
-            <MDBox mx={{ xs: 0, sm: 2 }} mb={{ xs: 1, sm: 0 }}>
-              <MDTypography variant="button" color="text" fontWeight="regular">
-                Not Configured
-              </MDTypography>
-            </MDBox>
-            <MDButton variant="outlined" color="dark" size="small">
-              set up
-            </MDButton>
-          </MDBox>
-        </MDBox>
-      </MDBox>
-    </Card>
-  );
-}
-
-export default Authentication;

src/qqq/pages/entity-create/components/ChangePassword/index.tsx

@@ -1,98 +0,0 @@
-/**
-=========================================================
-* Material Dashboard 2 PRO React TS - v1.0.0
-=========================================================
-
-* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
-* Copyright 2022 Creative Tim (https://www.creative-tim.com)
-
-Coded by www.creative-tim.com
-
- =========================================================
-
-* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-*/
-
-// @mui material components
-import Card from "@mui/material/Card";
-import Grid from "@mui/material/Grid";
-
-// Material Dashboard 2 PRO React TS components
-import MDBox from "components/MDBox";
-import MDTypography from "components/MDTypography";
-import MDButton from "components/MDButton";
-import MDInput from "components/MDInput";
-
-function ChangePassword(): JSX.Element {
-  const passwordRequirements = [
-    "One special characters",
-    "Min 6 characters",
-    "One number (2 are recommended)",
-    "Change it often",
-  ];
-
-  const renderPasswordRequirements = passwordRequirements.map((item, key) => {
-    const itemKey = `element-${key}`;
-
-    return (
-      <MDBox key={itemKey} component="li" color="text" fontSize="1.25rem" lineHeight={1}>
-        <MDTypography variant="button" color="text" fontWeight="regular" verticalAlign="middle">
-          {item}
-        </MDTypography>
-      </MDBox>
-    );
-  });
-
-  return (
-    <Card id="change-password">
-      <MDBox p={3}>
-        <MDTypography variant="h5">Change Password</MDTypography>
-      </MDBox>
-      <MDBox component="form" pb={3} px={3}>
-        <Grid container spacing={3}>
-          <Grid item xs={12}>
-            <MDInput
-              fullWidth
-              label="Current Password"
-              inputProps={{ type: "password", autoComplete: "" }}
-            />
-          </Grid>
-          <Grid item xs={12}>
-            <MDInput
-              fullWidth
-              label="New Password"
-              inputProps={{ type: "password", autoComplete: "" }}
-            />
-          </Grid>
-          <Grid item xs={12}>
-            <MDInput
-              fullWidth
-              label="Confirm New Password"
-              inputProps={{ type: "password", autoComplete: "" }}
-            />
-          </Grid>
-        </Grid>
-        <MDBox mt={6} mb={1}>
-          <MDTypography variant="h5">Password requirements</MDTypography>
-        </MDBox>
-        <MDBox mb={1}>
-          <MDTypography variant="body2" color="text">
-            Please follow this guide for a strong password
-          </MDTypography>
-        </MDBox>
-        <MDBox display="flex" justifyContent="space-between" alignItems="flex-end" flexWrap="wrap">
-          <MDBox component="ul" m={0} pl={3.25} mb={{ xs: 8, sm: 0 }}>
-            {renderPasswordRequirements}
-          </MDBox>
-          <MDBox ml="auto">
-            <MDButton variant="gradient" color="dark" size="small">
-              update password
-            </MDButton>
-          </MDBox>
-        </MDBox>
-      </MDBox>
-    </Card>
-  );
-}
-
-export default ChangePassword;

src/qqq/pages/entity-create/components/CreateForm/index.tsx

@@ -1,106 +0,0 @@
-/**
- =========================================================
- * Material Dashboard 2 PRO React TS - v1.0.0
- =========================================================
-
- * Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
- * Copyright 2022 Creative Tim (https://www.creative-tim.com)
-
- Coded by www.creative-tim.com
-
- =========================================================
-
- * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
- */
-
-/* eslint-disable no-unused-vars */
-/* eslint-disable spaced-comment */
-
-import { useParams } from "react-router-dom";
-
-// @material-ui core components
-import Card from "@mui/material/Card";
-import Grid from "@mui/material/Grid";
-
-// Material Dashboard 2 PRO React TS components
-import MDBox from "components/MDBox";
-import MDTypography from "components/MDTypography";
-
-// Settings page components
-import FormField from "layouts/pages/account/components/FormField";
-
-// qqq imports
-import { QTableMetaData } from "qqq-frontend-core/lib/model/metaData/QTableMetaData";
-import { QController } from "qqq-frontend-core/lib/controllers/QController";
-import { useState } from "react";
-import MDButton from "../../../../../components/MDButton";
-// import React, { useState } from "react";
-
-const qController = new QController("http://localhost:8000");
-console.log(qController);
-
-function CreateForm(): JSX.Element {
-  const { tableName } = useParams();
-  const [formFields, setFormFields] = useState([] as JSX.Element[]);
-  const defaultValues: { [key: string]: string } = {};
-  const [formValues, setFormValues] = useState(defaultValues);
-
-  const handleInputChange = (e: { target: { name: any; value: any } }) => {
-    const { name, value } = e.target;
-    formValues[name] = value;
-  };
-
-  const handleSubmit = (event: { preventDefault: () => void }) => {
-    event.preventDefault();
-    qController.create(tableName, formValues);
-  };
-
-  const tableMetaData = new QTableMetaData(tableName);
-  if (formFields.length === 0) {
-    (async () => {
-      await qController.loadTableMetaData(tableName).then((tableMetaData) => {
-        const formFields = [] as JSX.Element[];
-        const fields = new Map(Object.entries(tableMetaData.fields));
-        fields.forEach((fieldMetaData) => {
-          //formValues[fieldMetaData.name] = "";
-          formFields.push(
-            <Grid item xs={12} sm={4}>
-              <FormField
-                key={fieldMetaData.name}
-                name={fieldMetaData.name}
-                id={fieldMetaData.name}
-                label={fieldMetaData.label}
-                value={formValues[fieldMetaData.name]}
-                onChange={handleInputChange}
-              />
-            </Grid>
-          );
-        });
-
-        setFormFields(formFields);
-      });
-    })();
-  }
-
-  return (
-    <Card id="basic-info" sx={{ overflow: "visible" }}>
-      <MDBox p={3}>
-        <MDTypography variant="h5">Create {tableMetaData.label}</MDTypography>
-      </MDBox>
-      <MDBox component="form" pb={3} px={3} onSubmit={handleSubmit}>
-        <Grid container spacing={3}>
-          {formFields}
-        </Grid>
-        <Grid container spacing={3}>
-          <MDBox ml="auto">
-            <MDButton type="submit" variant="gradient" color="dark" size="small">
-              create {tableMetaData.label}
-            </MDButton>
-          </MDBox>
-        </Grid>
-      </MDBox>
-    </Card>
-  );
-}
-
-export default CreateForm;

src/qqq/pages/entity-create/components/DeleteAccount/index.tsx

@@ -1,57 +0,0 @@
-/**
-=========================================================
-* Material Dashboard 2 PRO React TS - v1.0.0
-=========================================================
-
-* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
-* Copyright 2022 Creative Tim (https://www.creative-tim.com)
-
-Coded by www.creative-tim.com
-
- =========================================================
-
-* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-*/
-
-// @mui material components
-import Card from "@mui/material/Card";
-
-// Material Dashboard 2 PRO React TS components
-import MDBox from "components/MDBox";
-import MDTypography from "components/MDTypography";
-import MDButton from "components/MDButton";
-
-function DeleteAccount(): JSX.Element {
-  return (
-    <Card id="delete-account">
-      <MDBox
-        pr={3}
-        display="flex"
-        justifyContent="space-between"
-        alignItems={{ xs: "flex-start", sm: "center" }}
-        flexDirection={{ xs: "column", sm: "row" }}
-      >
-        <MDBox p={3} lineHeight={1}>
-          <MDBox mb={1}>
-            <MDTypography variant="h5">Delete Account</MDTypography>
-          </MDBox>
-          <MDTypography variant="button" color="text">
-            Once you delete your account, there is no going back. Please be certain.
-          </MDTypography>
-        </MDBox>
-        <MDBox display="flex" flexDirection={{ xs: "column", sm: "row" }}>
-          <MDButton variant="outlined" color="secondary">
-            deactivate
-          </MDButton>
-          <MDBox ml={{ xs: 0, sm: 1 }} mt={{ xs: 1, sm: 0 }}>
-            <MDButton variant="gradient" color="error" sx={{ height: "100%" }}>
-              delete account
-            </MDButton>
-          </MDBox>
-        </MDBox>
-      </MDBox>
-    </Card>
-  );
-}
-
-export default DeleteAccount;

src/qqq/pages/entity-create/components/Header/index.tsx

@@ -1,74 +0,0 @@
-/**
-=========================================================
-* Material Dashboard 2 PRO React TS - v1.0.0
-=========================================================
-
-* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
-* Copyright 2022 Creative Tim (https://www.creative-tim.com)
-
-Coded by www.creative-tim.com
-
- =========================================================
-
-* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-*/
-
-import { useState } from "react";
-
-// @mui material components
-import Card from "@mui/material/Card";
-import Grid from "@mui/material/Grid";
-import Switch from "@mui/material/Switch";
-
-// Material Dashboard 2 PRO React TS components
-import MDBox from "components/MDBox";
-import MDTypography from "components/MDTypography";
-import MDAvatar from "components/MDAvatar";
-
-// Images
-import burceMars from "assets/images/bruce-mars.jpg";
-
-function Header(): JSX.Element {
-  const [visible, setVisible] = useState<boolean>(true);
-
-  const handleSetVisible = () => setVisible(!visible);
-
-  return (
-    <Card id="profile">
-      <MDBox p={2}>
-        <Grid container spacing={3} alignItems="center">
-          <Grid item>
-            <MDAvatar src={burceMars} alt="profile-image" size="xl" shadow="sm" />
-          </Grid>
-          <Grid item>
-            <MDBox height="100%" mt={0.5} lineHeight={1}>
-              <MDTypography variant="h5" fontWeight="medium">
-                Alex Thompson
-              </MDTypography>
-              <MDTypography variant="button" color="text" fontWeight="medium">
-                CEO / Co-Founder
-              </MDTypography>
-            </MDBox>
-          </Grid>
-          <Grid item xs={12} md={6} lg={3} sx={{ ml: "auto" }}>
-            <MDBox
-              display="flex"
-              justifyContent={{ md: "flex-end" }}
-              alignItems="center"
-              lineHeight={1}
-            >
-              <MDTypography variant="caption" fontWeight="regular">
-                Switch to {visible ? "invisible" : "visible"}
-              </MDTypography>
-              <MDBox ml={1}>
-                <Switch checked={visible} onChange={handleSetVisible} />
-              </MDBox>
-            </MDBox>
-          </Grid>
-        </Grid>
-      </MDBox>
-    </Card>
-  );
-}
-
-export default Header;

src/qqq/pages/entity-create/components/Notifications/index.tsx

@@ -1,149 +0,0 @@
-/**
-=========================================================
-* Material Dashboard 2 PRO React TS - v1.0.0
-=========================================================
-
-* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
-* Copyright 2022 Creative Tim (https://www.creative-tim.com)
-
-Coded by www.creative-tim.com
-
- =========================================================
-
-* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-*/
-
-// @mui material components
-import Card from "@mui/material/Card";
-import Table from "@mui/material/Table";
-import TableRow from "@mui/material/TableRow";
-import TableBody from "@mui/material/TableBody";
-import Switch from "@mui/material/Switch";
-
-// Material Dashboard 2 PRO React TS components
-import MDBox from "components/MDBox";
-import MDTypography from "components/MDTypography";
-
-// Setting pages components
-import TableCell from "layouts/pages/account/settings/components/TableCell";
-
-function Notifications(): JSX.Element {
-  return (
-    <Card id="notifications">
-      <MDBox p={3} lineHeight={1}>
-        <MDBox mb={1}>
-          <MDTypography variant="h5">Notifications</MDTypography>
-        </MDBox>
-        <MDTypography variant="button" color="text">
-          Choose how you receive notifications. These notification settings apply to the things
-          you’re watching.
-        </MDTypography>
-      </MDBox>
-      <MDBox pb={3} px={3}>
-        <MDBox minWidth="auto" sx={{ overflow: "scroll" }}>
-          <Table sx={{ minWidth: "36rem" }}>
-            <MDBox component="thead">
-              <TableRow>
-                <TableCell width="100%" padding={[1.5, 3, 1.5, 0.5]}>
-                  Activity
-                </TableCell>
-                <TableCell align="center" padding={[1.5, 6, 1.5, 6]}>
-                  Email
-                </TableCell>
-                <TableCell align="center" padding={[1.5, 6, 1.5, 6]}>
-                  Push
-                </TableCell>
-                <TableCell align="center" padding={[1.5, 6, 1.5, 6]}>
-                  SMS
-                </TableCell>
-              </TableRow>
-            </MDBox>
-            <TableBody>
-              <TableRow>
-                <TableCell padding={[1, 1, 1, 0.5]}>
-                  <MDBox lineHeight={1.4}>
-                    <MDTypography display="block" variant="button" fontWeight="regular">
-                      Mentions
-                    </MDTypography>
-                    <MDTypography variant="caption" color="text" fontWeight="regular">
-                      Notify when another user mentions you in a comment
-                    </MDTypography>
-                  </MDBox>
-                </TableCell>
-                <TableCell align="center" padding={[1, 1, 1, 0.5]}>
-                  <Switch defaultChecked />
-                </TableCell>
-                <TableCell align="center" padding={[1, 1, 1, 0.5]}>
-                  <Switch />
-                </TableCell>
-                <TableCell align="center" padding={[1, 1, 1, 0.5]}>
-                  <Switch />
-                </TableCell>
-              </TableRow>
-              <TableRow>
-                <TableCell padding={[1, 1, 1, 0.5]}>
-                  <MDBox lineHeight={1.4}>
-                    <MDTypography display="block" variant="button" fontWeight="regular">
-                      Comments
-                    </MDTypography>
-                    <MDTypography variant="caption" color="text" fontWeight="regular">
-                      Notify when another user comments your item.
-                    </MDTypography>
-                  </MDBox>
-                </TableCell>
-                <TableCell align="center" padding={[1, 1, 1, 0.5]}>
-                  <Switch defaultChecked />
-                </TableCell>
-                <TableCell align="center" padding={[1, 1, 1, 0.5]}>
-                  <Switch defaultChecked />
-                </TableCell>
-                <TableCell align="center" padding={[1, 1, 1, 0.5]}>
-                  <Switch />
-                </TableCell>
-              </TableRow>
-              <TableRow>
-                <TableCell padding={[1, 1, 1, 0.5]}>
-                  <MDBox lineHeight={1.4}>
-                    <MDTypography display="block" variant="button" fontWeight="regular">
-                      Follows
-                    </MDTypography>
-                    <MDTypography variant="caption" color="text" fontWeight="regular">
-                      Notify when another user follows you.
-                    </MDTypography>
-                  </MDBox>
-                </TableCell>
-                <TableCell align="center" padding={[1, 1, 1, 0.5]}>
-                  <Switch />
-                </TableCell>
-                <TableCell align="center" padding={[1, 1, 1, 0.5]}>
-                  <Switch defaultChecked />
-                </TableCell>
-                <TableCell align="center" padding={[1, 1, 1, 0.5]}>
-                  <Switch />
-                </TableCell>
-              </TableRow>
-              <TableRow>
-                <TableCell padding={[1, 1, 1, 0.5]} noBorder>
-                  <MDTypography display="block" variant="button" color="text">
-                    Log in from a new device
-                  </MDTypography>
-                </TableCell>
-                <TableCell align="center" padding={[1, 1, 1, 0.5]} noBorder>
-                  <Switch defaultChecked />
-                </TableCell>
-                <TableCell align="center" padding={[1, 1, 1, 0.5]} noBorder>
-                  <Switch defaultChecked />
-                </TableCell>
-                <TableCell align="center" padding={[1, 1, 1, 0.5]} noBorder>
-                  <Switch defaultChecked />
-                </TableCell>
-              </TableRow>
-            </TableBody>
-          </Table>
-        </MDBox>
-      </MDBox>
-    </Card>
-  );
-}
-
-export default Notifications;

src/qqq/pages/entity-create/components/Sessions/index.tsx

@@ -1,172 +0,0 @@
-/**
-=========================================================
-* Material Dashboard 2 PRO React TS - v1.0.0
-=========================================================
-
-* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
-* Copyright 2022 Creative Tim (https://www.creative-tim.com)
-
-Coded by www.creative-tim.com
-
- =========================================================
-
-* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-*/
-
-// @mui material components
-import Card from "@mui/material/Card";
-import Icon from "@mui/material/Icon";
-import Divider from "@mui/material/Divider";
-
-// Material Dashboard 2 PRO React TS components
-import MDBox from "components/MDBox";
-import MDTypography from "components/MDTypography";
-import MDBadge from "components/MDBadge";
-
-function Sessions(): JSX.Element {
-  const actionButtonStyles = {
-    "& .material-icons-round": {
-      transform: `translateX(0)`,
-      transition: "all 200ms cubic-bezier(0.34,1.61,0.7,1.3)",
-    },
-
-    "&:hover .material-icons-round, &:focus .material-icons-round": {
-      transform: `translateX(4px)`,
-    },
-  };
-
-  return (
-    <Card id="sessions">
-      <MDBox p={3} lineHeight={1}>
-        <MDBox mb={1}>
-          <MDTypography variant="h5">Sessions</MDTypography>
-        </MDBox>
-        <MDTypography variant="button" color="text" fontWeight="regular">
-          This is a list of devices that have logged into your account. Remove those that you do not
-          recognize.
-        </MDTypography>
-      </MDBox>
-      <MDBox pb={3} px={3} sx={{ overflow: "auto" }}>
-        <MDBox
-          display="flex"
-          justifyContent="space-between"
-          alignItems="center"
-          width={{ xs: "max-content", sm: "100%" }}
-        >
-          <MDBox display="flex" alignItems="center">
-            <MDBox textAlign="center" color="text" px={{ xs: 0, md: 1.5 }} opacity={0.6}>
-              <Icon>desktop_windows</Icon>
-            </MDBox>
-            <MDBox height="100%" ml={2} lineHeight={1} mr={2}>
-              <MDTypography display="block" variant="button" fontWeight="regular" color="text">
-                Bucharest 68.133.163.201
-              </MDTypography>
-              <MDTypography variant="caption" color="text">
-                Your current session
-              </MDTypography>
-            </MDBox>
-          </MDBox>
-          <MDBox display="flex" alignItems="center">
-            <MDBadge
-              variant="contained"
-              size="xs"
-              badgeContent="active"
-              color="success"
-              container
-            />
-            <MDBox mx={2} lineHeight={1}>
-              <MDTypography variant="button" color="secondary" fontWeight="regular">
-                EU
-              </MDTypography>
-            </MDBox>
-            <MDTypography
-              component="a"
-              href="#"
-              variant="button"
-              color="info"
-              fontWeight="regular"
-              sx={actionButtonStyles}
-            >
-              See more&nbsp;
-              <Icon sx={{ fontWeight: "bold", verticalAlign: "middle" }}>arrow_forward</Icon>
-            </MDTypography>
-          </MDBox>
-        </MDBox>
-        <Divider />
-        <MDBox
-          display="flex"
-          justifyContent="space-between"
-          alignItems="center"
-          width={{ xs: "max-content", sm: "100%" }}
-        >
-          <MDBox display="flex" alignItems="center" mr={2}>
-            <MDBox textAlign="center" color="text" px={{ xs: 0, md: 1.5 }} opacity={0.6}>
-              <Icon>desktop_windows</Icon>
-            </MDBox>
-            <MDBox ml={2}>
-              <MDTypography display="block" variant="body2" fontWeight="regular" color="text">
-                Chrome on macOS
-              </MDTypography>
-            </MDBox>
-          </MDBox>
-          <MDBox display="flex" alignItems="center">
-            <MDBox mx={2} lineHeight={1}>
-              <MDTypography variant="button" color="secondary" fontWeight="regular">
-                US
-              </MDTypography>
-            </MDBox>
-            <MDTypography
-              component="a"
-              href="#"
-              variant="button"
-              color="info"
-              fontWeight="regular"
-              sx={actionButtonStyles}
-            >
-              See more&nbsp;
-              <Icon sx={{ fontWeight: "bold", verticalAlign: "middle" }}>arrow_forward</Icon>
-            </MDTypography>
-          </MDBox>
-        </MDBox>
-        <Divider />
-        <MDBox
-          display="flex"
-          justifyContent="space-between"
-          alignItems="center"
-          width={{ xs: "max-content", sm: "100%" }}
-        >
-          <MDBox display="flex" alignItems="center" mr={2}>
-            <MDBox textAlign="center" color="text" px={{ xs: 0, md: 1.5 }} opacity={0.6}>
-              <Icon>phone_iphone</Icon>
-            </MDBox>
-            <MDBox ml={2}>
-              <MDTypography display="block" variant="body2" fontWeight="regular" color="text">
-                Safari on iPhone
-              </MDTypography>
-            </MDBox>
-          </MDBox>
-          <MDBox display="flex" alignItems="center">
-            <MDBox mx={2} lineHeight={1}>
-              <MDTypography variant="button" color="secondary" fontWeight="regular">
-                US
-              </MDTypography>
-            </MDBox>
-            <MDTypography
-              component="a"
-              href="#"
-              variant="button"
-              color="info"
-              fontWeight="regular"
-              sx={actionButtonStyles}
-            >
-              See more&nbsp;
-              <Icon sx={{ fontWeight: "bold", verticalAlign: "middle" }}>arrow_forward</Icon>
-            </MDTypography>
-          </MDBox>
-        </MDBox>
-      </MDBox>
-    </Card>
-  );
-}
-
-export default Sessions;

src/qqq/pages/entity-create/components/Sidenav/index.tsx

@@ -1,105 +0,0 @@
-/**
-=========================================================
-* Material Dashboard 2 PRO React TS - v1.0.0
-=========================================================
-
-* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
-* Copyright 2022 Creative Tim (https://www.creative-tim.com)
-
-Coded by www.creative-tim.com
-
- =========================================================
-
-* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-*/
-
-// @mui material components
-import Card from "@mui/material/Card";
-import Icon from "@mui/material/Icon";
-import { Theme } from "@mui/material/styles";
-
-// Material Dashboard 2 PRO React TS components
-import MDBox from "components/MDBox";
-import MDTypography from "components/MDTypography";
-
-// Material Dashboard 2 PRO React context
-import { useMaterialUIController } from "context";
-
-function Sidenav(): JSX.Element {
-  const [controller] = useMaterialUIController();
-  const { darkMode } = controller;
-
-  const sidenavItems = [
-    { icon: "person", label: "profile", href: "profile" },
-    { icon: "receipt_long", label: "basic info", href: "basic-info" },
-    { icon: "lock", label: "change password", href: "change-password" },
-    { icon: "security", label: "2FA", href: "2fa" },
-    { icon: "badge", label: "accounts", href: "accounts" },
-    { icon: "campaign", label: "notifications", href: "notifications" },
-    { icon: "settings_applications", label: "sessions", href: "sessions" },
-    { icon: "delete", label: "delete account", href: "delete-account" },
-  ];
-
-  const renderSidenavItems = sidenavItems.map(({ icon, label, href }, key) => {
-    const itemKey = `item-${key}`;
-
-    return (
-      <MDBox key={itemKey} component="li" pt={key === 0 ? 0 : 1}>
-        <MDTypography
-          component="a"
-          href={`#${href}`}
-          variant="button"
-          fontWeight="regular"
-          textTransform="capitalize"
-          sx={({
-            borders: { borderRadius },
-            functions: { pxToRem },
-            palette: { light },
-            transitions,
-          }: Theme) => ({
-            display: "flex",
-            alignItems: "center",
-            borderRadius: borderRadius.md,
-            padding: `${pxToRem(10)} ${pxToRem(16)}`,
-            transition: transitions.create("background-color", {
-              easing: transitions.easing.easeInOut,
-              duration: transitions.duration.shorter,
-            }),
-
-            "&:hover": {
-              backgroundColor: light.main,
-            },
-          })}
-        >
-          <MDBox mr={1.5} lineHeight={1} color={darkMode ? "white" : "dark"}>
-            <Icon fontSize="small">{icon}</Icon>
-          </MDBox>
-          {label}
-        </MDTypography>
-      </MDBox>
-    );
-  });
-
-  return (
-    <Card
-      sx={{
-        borderRadius: ({ borders: { borderRadius } }) => borderRadius.lg,
-        position: "sticky",
-        top: "1%",
-      }}
-    >
-      <MDBox
-        component="ul"
-        display="flex"
-        flexDirection="column"
-        p={2}
-        m={0}
-        sx={{ listStyle: "none" }}
-      >
-        {renderSidenavItems}
-      </MDBox>
-    </Card>
-  );
-}
-
-export default Sidenav;

src/qqq/pages/entity-create/components/TableCell/index.tsx

@@ -1,61 +0,0 @@
-/**
-=========================================================
-* Material Dashboard 2 PRO React TS - v1.0.0
-=========================================================
-
-* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
-* Copyright 2022 Creative Tim (https://www.creative-tim.com)
-
-Coded by www.creative-tim.com
-
- =========================================================
-
-* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-*/
-
-import { ReactNode } from "react";
-
-// Material Dashboard 2 PRO React TS components
-import MDBox from "components/MDBox";
-import MDTypography from "components/MDTypography";
-
-// Declaring props types for TableCell
-interface Props {
-  width?: string;
-  children: ReactNode;
-  align?: string | any;
-  padding?: number[];
-  noBorder?: boolean;
-}
-
-function TableCell({ width, align, padding, noBorder, children }: Props): JSX.Element {
-  return (
-    <MDBox
-      component="th"
-      width={width}
-      pt={padding[0]}
-      pr={padding[1]}
-      pb={padding[2]}
-      pl={padding[3]}
-      textAlign={align}
-      sx={{
-        border: ({ borders: { borderWidth }, palette: { light } }) =>
-          noBorder ? 0 : `${borderWidth[1]} solid ${light.main}`,
-      }}
-    >
-      <MDTypography component="div" variant="body2" color="text">
-        {children}
-      </MDTypography>
-    </MDBox>
-  );
-}
-
-// Declaring default props for TableCell
-TableCell.defaultProps = {
-  width: "auto",
-  align: "left",
-  padding: [],
-  noBorder: false,
-};
-
-export default TableCell;

src/qqq/pages/entity-create/index.tsx

@@ -20,7 +20,7 @@ import Grid from "@mui/material/Grid";
 import MDBox from "components/MDBox";
 
 // Settings page components
-import CreateForm from "qqq/pages/entity-create/components/CreateForm";
+import CreateForm from "qqq/pages/components/EntityForm";
 import BaseLayout from "qqq/pages/components/BaseLayout";
 
 function EntityCreate(): JSX.Element {

src/qqq/pages/entity-edit/index.tsx

@@ -0,0 +1,49 @@
+/**
+ =========================================================
+ * Material Dashboard 2 PRO React TS - v1.0.0
+ =========================================================
+
+ * Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+ * Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+ Coded by www.creative-tim.com
+
+ =========================================================
+
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+ */
+
+// @mui material components
+import Grid from "@mui/material/Grid";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+
+// Settings page components
+import BaseLayout from "qqq/pages/components/BaseLayout";
+import { useParams } from "react-router-dom";
+import EntityForm from "qqq/pages/components/EntityForm";
+
+function EntityEdit(): JSX.Element {
+  const { id } = useParams();
+
+  return (
+    <BaseLayout>
+      <MDBox mt={4}>
+        <Grid container spacing={3}>
+          <Grid item xs={12} lg={12}>
+            <MDBox mb={3}>
+              <Grid container spacing={3}>
+                <Grid item xs={12}>
+                  <EntityForm id={id} />
+                </Grid>
+              </Grid>
+            </MDBox>
+          </Grid>
+        </Grid>
+      </MDBox>
+    </BaseLayout>
+  );
+}
+
+export default EntityEdit;

src/qqq/pages/entity-list/components/IdCell/index.tsx

@@ -1,17 +1,17 @@
 /**
-=========================================================
+ =========================================================
-* Material Dashboard 2 PRO React TS - v1.0.0
+ * Material Dashboard 2 PRO React TS - v1.0.0
-=========================================================
+ =========================================================
 
-* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+ * Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
-* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+ * Copyright 2022 Creative Tim (https://www.creative-tim.com)
 
-Coded by www.creative-tim.com
+ Coded by www.creative-tim.com
 
  =========================================================
 
-* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-*/
+ */
 
 // @mui material components
 import Checkbox from "@mui/material/Checkbox";
@@ -19,6 +19,7 @@ import Checkbox from "@mui/material/Checkbox";
 // Material Dashboard 2 PRO React TS components
 import MDBox from "components/MDBox";
 import MDTypography from "components/MDTypography";
+import Link from "@mui/material/Link";
 
 // Declaring props types for IdCell
 interface Props {
@@ -27,12 +28,17 @@ interface Props {
 }
 
 function IdCell({ id, checked }: Props): JSX.Element {
+  const pathParts = window.location.pathname.split("/");
+  const tableName = pathParts[1];
+  const href = `/${tableName}/view/${id}/`;
+  const link = <Link href={href}>{id}</Link>;
+
   return (
     <MDBox display="flex" alignItems="center">
       <Checkbox defaultChecked={checked} />
       <MDBox ml={1}>
         <MDTypography variant="caption" fontWeight="medium" color="text">
-          {id}
+          {link}
         </MDTypography>
       </MDBox>
     </MDBox>

src/qqq/pages/entity-list/data/dataTableData.tsx

@@ -1,184 +0,0 @@
-/**
-=========================================================
-* Material Dashboard 2 PRO React TS - v1.0.0
-=========================================================
-
-* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
-* Copyright 2022 Creative Tim (https://www.creative-tim.com)
-
-Coded by www.creative-tim.com
-
- =========================================================
-
-* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-*/
-
-/* eslint-disable react/prop-types */
-// ProductsList page components
-import IdCell from "layouts/ecommerce/orders/order-list/components/IdCell";
-import DefaultCell from "layouts/ecommerce/orders/order-list/components/DefaultCell";
-import StatusCell from "layouts/ecommerce/orders/order-list/components/StatusCell";
-import CustomerCell from "layouts/ecommerce/orders/order-list/components/CustomerCell";
-
-// Images
-import team1 from "assets/images/team-1.jpg";
-import team2 from "assets/images/team-2.jpg";
-import team3 from "assets/images/team-3.jpg";
-import team4 from "assets/images/team-4.jpg";
-import team5 from "assets/images/team-5.jpg";
-import ivana from "assets/images/ivana-squares.jpg";
-
-const dataTableData = {
-  columns: [
-    { Header: "id", accessor: "id", Cell: ({ value }: any) => <IdCell id={value} /> },
-    {
-      Header: "date",
-      accessor: "date",
-      Cell: ({ value }: any) => <DefaultCell value={value} />,
-    },
-    {
-      Header: "status",
-      accessor: "status",
-      Cell: ({ value }: any) => {
-        let status;
-
-        if (value === "paid") {
-          status = <StatusCell icon="done" color="success" status="Paid" />;
-        } else if (value === "refunded") {
-          status = <StatusCell icon="replay" color="dark" status="Refunded" />;
-        } else {
-          status = <StatusCell icon="close" color="error" status="Canceled" />;
-        }
-
-        return status;
-      },
-    },
-    {
-      Header: "customer",
-      accessor: "customer",
-      Cell: ({ value: [name, data] }: any) => (
-        <CustomerCell image={data.image} color={data.color || "dark"} name={name} />
-      ),
-    },
-    {
-      Header: "product",
-      accessor: "product",
-      Cell: ({ value }: any) => {
-        const [name, data] = value;
-
-        return (
-          <DefaultCell
-            value={typeof value === "string" ? value : name}
-            suffix={data.suffix || false}
-          />
-        );
-      },
-    },
-    {
-      Header: "revenue",
-      accessor: "revenue",
-      Cell: ({ value }: any) => <DefaultCell value={value} />,
-    },
-  ],
-
-  rows: [
-    {
-      id: "#10421",
-      date: "1 Nov, 10:20 AM",
-      status: "paid",
-      customer: ["Orlando Imieto", { image: team2 }],
-      product: "Nike Sport V2",
-      revenue: "$140,20",
-    },
-    {
-      id: "#10422",
-      date: "1 Nov, 10:53 AM",
-      status: "paid",
-      customer: ["Alice Murinho", { image: team1 }],
-      product: "Valvet T-shirt",
-      revenue: "$42,00",
-    },
-    {
-      id: "#10423",
-      date: "1 Nov, 11:13 AM",
-      status: "refunded",
-      customer: ["Michael Mirra", { image: "M" }],
-      product: ["Leather Wallet", { suffix: "+1 more" }],
-      revenue: "$25,50",
-    },
-    {
-      id: "#10424",
-      date: "1 Nov, 12:20 PM",
-      status: "paid",
-      customer: ["Andrew Nichel", { image: team3 }],
-      product: "Bracelet Onu-Lino",
-      revenue: "$19,40",
-    },
-    {
-      id: "#10425",
-      date: "1 Nov, 1:40 PM",
-      status: "canceled",
-      customer: ["Sebastian Koga", { image: team4 }],
-      product: ["Phone Case Pink", { suffix: "x 2" }],
-      revenue: "$44,90",
-    },
-    {
-      id: "#10426",
-      date: "1 Nov, 2:19 PM",
-      status: "paid",
-      customer: ["Laur Gilbert", { image: "L" }],
-      product: "Backpack Niver",
-      revenue: "$112,50",
-    },
-    {
-      id: "#10427",
-      date: "1 Nov, 3:42 AM",
-      status: "paid",
-      customer: ["Iryna Innda", { image: "I" }],
-      product: "Adidas Vio",
-      revenue: "$200,00",
-    },
-    {
-      id: "#10428",
-      date: "2 Nov, 9:32 AM",
-      status: "paid",
-      customer: ["Arrias Liunda", { image: "A" }],
-      product: "Airpods 2 Gen",
-      revenue: "$350,00",
-    },
-    {
-      id: "#10429",
-      date: "2 Nov, 10:14 AM",
-      status: "paid",
-      customer: ["Rugna Ilpio", { image: team5 }],
-      product: "Bracelet Warret",
-      revenue: "$15,00",
-    },
-    {
-      id: "#10430",
-      date: "2 Nov, 10:14 AM",
-      status: "refunded",
-      customer: ["Anna Landa", { image: ivana }],
-      product: ["Watter Bottle India", { suffix: "x 3" }],
-      revenue: "$25,00",
-    },
-    {
-      id: "#10431",
-      date: "2 Nov, 3:12 PM",
-      status: "paid",
-      customer: ["Karl Innas", { image: "K" }],
-      product: "Kitchen Gadgets",
-      revenue: "$164,90",
-    },
-    {
-      id: "#10432",
-      date: "2 Nov, 5:12 PM",
-      status: "paid",
-      customer: ["Oana Kilas", { image: "O", color: "info" }],
-      product: "Office Papers",
-      revenue: "$23,90",
-    },
-  ],
-};
-
-export default dataTableData;

src/qqq/pages/entity-list/index.tsx

@@ -12,8 +12,9 @@
 
  * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
  */
+/*  eslint-disable react/no-unstable-nested-components */
 
-import { useState } from "react";
+import React, { useState } from "react";
 
 // @mui material components
 import Card from "@mui/material/Card";
@@ -30,14 +31,14 @@ import MDButton from "components/MDButton";
 // Material Dashboard 2 PRO React TS examples components
 import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
 import DashboardNavbar from "examples/Navbars/DashboardNavbar";
-import Footer from "examples/Footer";
 import DataTable from "examples/Tables/DataTable";
 
-// import dataTableData from "layouts/ecommerce/orders/order-list/data/dataTableData";
 // Data
-import { QTableMetaData } from "qqq-frontend-core/lib/model/metaData/QTableMetaData";
 import { QController } from "qqq-frontend-core/lib/controllers/QController";
 import Link from "@mui/material/Link";
+import { QTableMetaData } from "qqq-frontend-core/lib/model/metaData/QTableMetaData";
+import IdCell from "./components/IdCell";
+import Footer from "../components/Footer";
 
 const qController = new QController("http://localhost:8000");
 console.log(qController);
@@ -54,8 +55,8 @@ let dataTableData = {
 
 function EntityList({ table }: Props): JSX.Element {
   const [menu, setMenu] = useState(null);
-  const [thing, thing1] = useState(1);
+  const [tableState, setTableState] = useState("");
-  console.log(thing);
+  console.log(tableState);
 
   const newEntity = (event: any) => setMenu(event.currentTarget);
   const openMenu = (event: any) => setMenu(event.currentTarget);
@@ -66,33 +67,39 @@ function EntityList({ table }: Props): JSX.Element {
   (async () => {
     await qController.loadTableMetaData(table.name).then((tableMetaData) => {
       (async () => {
-        await qController.query(table.name).then((results) => {
+        await qController.query(table.name, 250).then((results) => {
           dataTableData = {
             columns: [],
             rows: [],
           };
 
-          Object.keys(tableMetaData.fields).forEach((key) => {
+          const fields = new Map(Object.entries(tableMetaData.fields));
-            dataTableData.columns.push({
+          const sortedEntries = new Map([...fields.entries()].sort());
-              Header: key,
+          sortedEntries.forEach((value, key) => {
-              accessor: key,
+            if (key === tableMetaData.primaryKeyField) {
-            });
+              dataTableData.columns.splice(0, 0, {
+                Header: key,
+                accessor: key,
+                Cell: ({ value }: any) => <IdCell id={value} />,
+              });
+            } else {
+              dataTableData.columns.push({
+                Header: key,
+                accessor: key,
+              });
+            }
           });
 
           results.forEach((record) => {
             const row = new Map();
             const values = new Map(Object.entries(record.values));
             values.forEach((value, key) => {
-              if (key === tableMetaData.primaryKeyField) {
+              row.set(key, value);
-                row.set(key, `<a href='/${tableMetaData.name}/${value}'>${value}</a>`);
-              } else {
-                row.set(key, value);
-              }
             });
             dataTableData.rows.push(Object.fromEntries(row));
           });
 
-          thing1(table.name === "carrier" ? 2 : 3);
+          setTableState(table.name);
         });
       })();
     });

src/qqq/pages/entity-view/components/ViewContents/index.tsx

@@ -0,0 +1,188 @@
+/**
+ =========================================================
+ * Material Dashboard 2 PRO React TS - v1.0.0
+ =========================================================
+
+ * Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+ * Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+ Coded by www.creative-tim.com
+
+ =========================================================
+
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+ */
+
+/* eslint-disable no-unused-vars */
+/* eslint-disable spaced-comment */
+/* eslint-disable react/no-array-index-key */
+
+import { useParams } from "react-router-dom";
+
+// @material-ui core components
+import Card from "@mui/material/Card";
+import Grid from "@mui/material/Grid";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDTypography from "components/MDTypography";
+
+// Settings page components
+
+// qqq imports
+import { QTableMetaData } from "qqq-frontend-core/lib/model/metaData/QTableMetaData";
+import { QController } from "qqq-frontend-core/lib/controllers/QController";
+import { QTableRecord } from "qqq-frontend-core/lib/model/metaData/QTableRecord";
+import React, { useState } from "react";
+
+import Link from "@mui/material/Link";
+import Dialog from "@mui/material/Dialog";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogActions from "@mui/material/DialogActions";
+import Button from "@mui/material/Button";
+
+import MDButton from "../../../../../components/MDButton";
+import { setLayout } from "../../../../../context";
+
+const qController = new QController("http://localhost:8000");
+console.log(qController);
+
+// Declaring props types for ViewForm
+interface Props {
+  id: string;
+}
+
+function ViewContents({ id }: Props): JSX.Element {
+  const { tableName } = useParams();
+  const [nameValues, setNameValues] = useState([] as JSX.Element[]);
+  const [loadCounter, setLoadCounter] = useState(0);
+  const [open, setOpen] = useState(false);
+
+  const handleConfirmDelete = (event: { preventDefault: () => void }) => {
+    event.preventDefault();
+
+    (async () => {
+      await qController.delete(tableName, id).then((results) => {
+        window.location.href = `/${tableName}/list/`;
+      });
+    })();
+  };
+
+  const tableMetaData = new QTableMetaData(tableName);
+  if (loadCounter === 0) {
+    setLoadCounter(1);
+    (async () => {
+      await qController.loadTableMetaData(tableName).then((tableMetaData) => {
+        const formFields = [] as JSX.Element[];
+        const fields = new Map(Object.entries(tableMetaData.fields));
+
+        // make a call to query (just get all for now, and iterate and filter like a caveman)
+        (async () => {
+          await qController.query(tableName, 250).then((results) => {
+            let foundRecord: QTableRecord;
+            results.forEach((record) => {
+              const values = new Map(Object.entries(record.values));
+              values.forEach((value, key) => {
+                if (key === tableMetaData.primaryKeyField && value.toString() === id) {
+                  foundRecord = record;
+                }
+              });
+            });
+
+            nameValues.push(
+              <MDBox key={tableMetaData.primaryKeyField} display="flex" py={1} pr={2}>
+                <MDTypography variant="button" fontWeight="bold" textTransform="capitalize">
+                  {tableMetaData.primaryKeyField}: &nbsp;
+                </MDTypography>
+                <MDTypography variant="button" fontWeight="regular" color="text">
+                  &nbsp;{id}
+                </MDTypography>
+              </MDBox>
+            );
+
+            const values = new Map(Object.entries(foundRecord.values));
+            const sortedEntries = new Map([...values.entries()].sort());
+            sortedEntries.forEach((value, key) => {
+              if (key !== tableMetaData.primaryKeyField) {
+                nameValues.push(
+                  <MDBox key={key} display="flex" py={1} pr={2}>
+                    <MDTypography variant="button" fontWeight="bold" textTransform="capitalize">
+                      {key}: &nbsp;
+                    </MDTypography>
+                    <MDTypography variant="button" fontWeight="regular" color="text">
+                      &nbsp;{value}
+                    </MDTypography>
+                  </MDBox>
+                );
+              }
+            });
+
+            setLoadCounter(2);
+          });
+        })();
+      });
+    })();
+  }
+
+  const handleConfirmDeleteOpen = () => {
+    // setOpen(true);
+  };
+
+  const handleConfirmDeleteClose = () => {
+    // setOpen(false);
+  };
+
+  const editPath = `/${tableName}/edit/${id}`;
+
+  return (
+    <Card id="basic-info" sx={{ overflow: "visible" }}>
+      <MDBox p={3}>
+        <MDTypography variant="h5">
+          Viewing {tableMetaData.label} ({id})
+        </MDTypography>
+      </MDBox>
+      <MDBox p={3}>{nameValues}</MDBox>
+      <MDBox component="form" pb={3} px={3}>
+        <Grid key="tres" container spacing={3}>
+          <MDBox ml="auto" mr={5}>
+            <MDButton
+              type="submit"
+              variant="gradient"
+              color="primary"
+              size="small"
+              onClick={handleConfirmDelete}
+            >
+              delete {tableMetaData.label}
+            </MDButton>
+            <Dialog
+              open={open}
+              onClose={handleConfirmDeleteClose}
+              aria-labelledby="alert-dialog-title"
+              aria-describedby="alert-dialog-description"
+            >
+              <DialogTitle id="alert-dialog-title">Confirm Deletion</DialogTitle>
+              <DialogContent>
+                <DialogContentText id="alert-dialog-description">
+                  Are you sure you want to delete this record?
+                </DialogContentText>
+              </DialogContent>
+              <DialogActions>
+                <Button onClick={handleConfirmDeleteClose}>No</Button>
+                <Button onClick={handleConfirmDelete} autoFocus>
+                  Yes
+                </Button>
+              </DialogActions>
+            </Dialog>
+            <MDButton type="submit" variant="gradient" color="dark" size="small">
+              <Link href={editPath}>edit {tableMetaData.label}</Link>
+            </MDButton>
+          </MDBox>
+        </Grid>
+      </MDBox>
+    </Card>
+  );
+}
+
+export default ViewContents;

src/qqq/pages/entity-view/index.tsx

@@ -0,0 +1,51 @@
+/**
+ =========================================================
+ * Material Dashboard 2 PRO React TS - v1.0.0
+ =========================================================
+
+ * Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+ * Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+ Coded by www.creative-tim.com
+
+ =========================================================
+
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+ */
+
+import { useParams } from "react-router-dom";
+
+// @mui material components
+import Grid from "@mui/material/Grid";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+
+// Settings page components
+// import CreateForm from "qqq/pages/entity-create/components/CreateForm";
+import BaseLayout from "qqq/pages/components/BaseLayout";
+import ViewContents from "./components/ViewContents";
+
+function EntityView(): JSX.Element {
+  const { id } = useParams();
+
+  return (
+    <BaseLayout>
+      <MDBox mt={4}>
+        <Grid container spacing={3}>
+          <Grid item xs={12} lg={12}>
+            <MDBox mb={3}>
+              <Grid container spacing={3}>
+                <Grid item xs={12}>
+                  <ViewContents id={id} />
+                </Grid>
+              </Grid>
+            </MDBox>
+          </Grid>
+        </Grid>
+      </MDBox>
+    </BaseLayout>
+  );
+}
+
+export default EntityView;

src/qqq/qqqRoutes.tsx

@@ -393,8 +393,11 @@ console.log(qController);
   await qController.loadMetaData().then((metaData) => {
     console.log(`metaData: ${metaData}`);
 
+    // get the keys sorted
+    const keys = new Map([...metaData.entries()].sort());
+
     const tableList = [] as any[];
-    metaData.forEach((value, key) => {
+    keys.forEach((value, key) => {
       const table = metaData.get(key);
       tableList.push({
         name: table.label,

tsconfig.json

@@ -20,7 +20,8 @@
     "noImplicitThis": true,
     "strictNullChecks": false,
     "downlevelIteration": true,
-    "baseUrl": "src"
+    "baseUrl": "src",
+    "allowAsProps": true
   },
   "include": ["src"]
 }