SPRINT-12: added widgets to tables

package-lock.json

@@ -17,7 +17,7 @@
             "@fullcalendar/interaction": "5.10.0",
             "@fullcalendar/react": "5.10.0",
             "@fullcalendar/timegrid": "5.10.0",
-            "@kingsrook/qqq-frontend-core": "file:.yalc/@kingsrook/qqq-frontend-core",
+            "@kingsrook/qqq-frontend-core": "1.0.21",
             "@mui/icons-material": "5.4.1",
             "@mui/material": "5.4.1",
             "@mui/styled-engine": "5.4.1",
@@ -49,6 +49,7 @@
             "react-dom": "17.0.2",
             "react-flatpickr": "3.10.7",
             "react-github-btn": "1.2.1",
+            "react-google-drive-picker": "^1.2.0",
             "react-html-parser": "2.0.2",
             "react-images-viewer": "1.7.1",
             "react-quill": "1.3.5",
@@ -82,14 +83,6 @@
             "typescript": "^4.7.3"
          }
       },
-      ".yalc/@kingsrook/qqq-frontend-core": {
-         "version": "1.0.16",
-         "license": "ISC",
-         "dependencies": {
-            "axios": "0.27.2",
-            "form-data": "4.0.0"
-         }
-      },
       "node_modules/@ampproject/remapping": {
          "version": "2.2.0",
          "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
@@ -3159,8 +3152,14 @@
          }
       },
       "node_modules/@kingsrook/qqq-frontend-core": {
-         "resolved": ".yalc/@kingsrook/qqq-frontend-core",
+         "version": "1.0.21",
-         "link": true
+         "resolved": "https://npm.pkg.github.com/download/@Kingsrook/qqq-frontend-core/1.0.21/8a34417ce4da909c9448b7b9c7ff72081df24adc",
+         "integrity": "sha512-/AIL5GW+RhfGSr2zH8tUZj/bsEgHI02ug3nGLVgGglftlrPWdMykAzIRYtxAMYOsDZKtZM0v6gNEav2WIieaHw==",
+         "license": "ISC",
+         "dependencies": {
+            "axios": "0.27.2",
+            "form-data": "4.0.0"
+         }
       },
       "node_modules/@leichtgewicht/ip-codec": {
          "version": "2.0.4",
@@ -15102,6 +15101,15 @@
             "github-buttons": "^2.8.0"
          }
       },
+      "node_modules/react-google-drive-picker": {
+         "version": "1.2.0",
+         "resolved": "https://registry.npmjs.org/react-google-drive-picker/-/react-google-drive-picker-1.2.0.tgz",
+         "integrity": "sha512-2CmaPLZP+8WkfT/J1xzNMWS99/SHphUk7wzw4/47uvNK4T+YYL7bYGHdwjJ4WMMCj4F0YCM9rDRc2enXqnP/TA==",
+         "peerDependencies": {
+            "react": ">=17.0.0",
+            "react-dom": ">=17.0.0"
+         }
+      },
       "node_modules/react-html-parser": {
          "version": "2.0.2",
          "resolved": "https://registry.npmjs.org/react-html-parser/-/react-html-parser-2.0.2.tgz",
@@ -20576,7 +20584,9 @@
          }
       },
       "@kingsrook/qqq-frontend-core": {
-         "version": "file:.yalc/@kingsrook/qqq-frontend-core",
+         "version": "1.0.21",
+         "resolved": "https://npm.pkg.github.com/download/@Kingsrook/qqq-frontend-core/1.0.21/8a34417ce4da909c9448b7b9c7ff72081df24adc",
+         "integrity": "sha512-/AIL5GW+RhfGSr2zH8tUZj/bsEgHI02ug3nGLVgGglftlrPWdMykAzIRYtxAMYOsDZKtZM0v6gNEav2WIieaHw==",
          "requires": {
             "axios": "0.27.2",
             "form-data": "4.0.0"
@@ -29046,6 +29056,11 @@
             "github-buttons": "^2.8.0"
          }
       },
+      "react-google-drive-picker": {
+         "version": "1.2.0",
+         "resolved": "https://registry.npmjs.org/react-google-drive-picker/-/react-google-drive-picker-1.2.0.tgz",
+         "integrity": "sha512-2CmaPLZP+8WkfT/J1xzNMWS99/SHphUk7wzw4/47uvNK4T+YYL7bYGHdwjJ4WMMCj4F0YCM9rDRc2enXqnP/TA=="
+      },
       "react-html-parser": {
          "version": "2.0.2",
          "resolved": "https://registry.npmjs.org/react-html-parser/-/react-html-parser-2.0.2.tgz",

package.json

@@ -13,7 +13,7 @@
       "@fullcalendar/interaction": "5.10.0",
       "@fullcalendar/react": "5.10.0",
       "@fullcalendar/timegrid": "5.10.0",
-      "@kingsrook/qqq-frontend-core": "1.0.20",
+      "@kingsrook/qqq-frontend-core": "1.0.21",
       "@mui/icons-material": "5.4.1",
       "@mui/material": "5.4.1",
       "@mui/styled-engine": "5.4.1",

src/qqq/components/DashboardWidgets.tsx

@@ -0,0 +1,172 @@
+/* QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
+import Grid from "@mui/material/Grid";
+import React, {useEffect, useState} from "react";
+import MDBadgeDot from "qqq/components/Temporary/MDBadgeDot";
+import MDBox from "qqq/components/Temporary/MDBox";
+import BarChart from "qqq/pages/dashboards/Widgets/BarChart";
+import LineChart from "qqq/pages/dashboards/Widgets/LineChart";
+import QuickSightChart from "qqq/pages/dashboards/Widgets/QuickSightChart";
+import TableCard from "qqq/pages/dashboards/Widgets/TableCard";
+import QClient from "qqq/utils/QClient";
+
+const qController = QClient.getInstance();
+
+interface Props
+{
+   widgetNameList: string[];
+   entityPrimaryKey?: string;
+}
+
+DashboardWidgets.defaultProps = {
+   widgetNameList: null,
+   entityPrimaryKey: null
+};
+
+function DashboardWidgets({widgetNameList, entityPrimaryKey}: Props): JSX.Element
+{
+   const [qInstance, setQInstance] = useState(null as QInstance);
+   const [widgets, setWidgets] = useState([] as any[]);
+   const [widgetNames, setWidgetNames] = useState([] as any[]);
+   const [widgetCounter, setWidgetCounter] = useState(0);
+
+   useEffect(() =>
+   {
+      (async () =>
+      {
+         const newQInstance = await qController.loadMetaData();
+         setQInstance(newQInstance);
+      })();
+   }, []);
+
+   useEffect(() =>
+   {
+      if (!qInstance)
+      {
+         return;
+      }
+
+      for (let i = 0; i < widgetNameList.length; i++)
+      {
+         widgets[i] = {};
+         (async () =>
+         {
+            widgets[i] = await qController.widget(widgetNameList[i], `id=${entityPrimaryKey}`);
+            setWidgetCounter(widgetCounter + 1);
+         })();
+      }
+      setWidgets(widgets);
+   }, [qInstance, widgetNames]);
+
+   const widgetCount = widgets ? widgets.length : 0;
+
+   const handleDropdownOnChange = (value: string, index: number) =>
+   {
+      setTimeout(async () =>
+      {
+         widgets[index] = await qController.widget(widgetNameList[index]);
+      }, 1);
+   };
+
+   console.log(`primarkey ${entityPrimaryKey}`);
+   console.log(`widgets: ${JSON.stringify(widgets)}`);
+
+   return (
+      widgetCount > 0 ? (
+         <Grid item xs={12} lg={12}>
+            <Grid container spacing={3}>
+               {
+                  widgets.map((widget, i) => (
+                     <Grid key={`${i}`} item xs={12} lg={12}>
+                        <MDBox mb={3}>
+                           {
+                              widget.type === "table" && (
+                                 <TableCard
+                                    color="info"
+                                    title={widget.title}
+                                    data={widget}
+                                    dropdownOptions={widget.dropdownOptions}
+                                    dropdownOnChange={handleDropdownOnChange}
+                                    widgetIndex={i}
+                                 />
+                              )
+                           }
+                        </MDBox>
+                     </Grid>
+                  ))
+               }
+            </Grid>
+            <Grid item xs={12} lg={widgetCount === 1 ? 3 : 6}>
+               {
+                  widgets.map((widget, i) => (
+                     <Grid key={`${i}`} item xs={12} lg={widgetCount === 1 ? 12 : 6}>
+                        {
+                           widget.type === "quickSightChart" && (
+                              <MDBox mb={3}>
+                                 <QuickSightChart url={widget.url} label={widget.label} />
+                              </MDBox>
+                           )
+                        }
+                        {
+                           widget.type === "barChart" && (
+                              <MDBox mb={3}>
+                                 <BarChart
+                                    color="info"
+                                    title={widget.title}
+                                    date={`As of ${new Date().toDateString()}`}
+                                    data={widget.chartData}
+                                 />
+                              </MDBox>
+                           )
+                        }
+                        {
+                           widget.type === "lineChart" && (
+                              <MDBox mb={3}>
+                                 <LineChart
+                                    title={widget.title}
+                                    description={(
+                                       <MDBox display="flex" justifyContent="space-between">
+                                          <MDBox display="flex" ml={-1}>
+                                             {
+                                                widget.lineChartData.datasets.map((dataSet: any) => (
+                                                   <MDBadgeDot key={dataSet.label} color={dataSet.color} size="sm" badgeContent={dataSet.label} />
+                                                ))
+                                             }
+                                          </MDBox>
+                                          <MDBox mt={-4} mr={-1} position="absolute" right="1.5rem" />
+                                       </MDBox>
+                                    )}
+                                    chart={widget.lineChartData as { labels: string[]; datasets: { label: string; color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; data: number[]; }[]; }}
+                                 />
+                              </MDBox>
+                           )
+                        }
+                     </Grid>
+                  ))
+               }
+            </Grid>
+         </Grid>
+      ) : null
+   );
+}
+
+export default DashboardWidgets;

src/qqq/components/QRecordSidebar/index.tsx

@@ -30,20 +30,46 @@ import MDTypography from "qqq/components/Temporary/MDTypography";
 interface Props
 {
    tableSections: QTableSection[];
+   widgetNames?: string[];
    light?: boolean;
 }
 
-function QRecordSidebar({tableSections, light}: Props): JSX.Element
+interface SidebarEntry
 {
+   iconName: string;
+   name: string;
+   label: string;
+}
+
+function QRecordSidebar({tableSections, widgetNames, light}: Props): JSX.Element
+{
+   /////////////////////////////////////////////////////////
+   // insert widgets after identity (first) table section //
+   /////////////////////////////////////////////////////////
+   const sidebarEntries = [] as SidebarEntry[];
+   tableSections.forEach((section, index) =>
+   {
+      if (index === 1 && widgetNames)
+      {
+         widgetNames.forEach((name) =>
+         {
+            sidebarEntries.push({iconName: "troubleshoot", name: name, label: name});
+         });
+      }
+      sidebarEntries.push({iconName: section.iconName, name: section.name, label: section.label});
+   });
+
+
    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"}}>
             {
-               tableSections ? tableSections.map((section: QTableSection, key: number) => (
+               sidebarEntries ? sidebarEntries.map((entry: SidebarEntry, key: number) => (
-                  <MDBox key={`section-${section.name}`} component="li" pt={key === 0 ? 0 : 1}>
+
+                  <MDBox key={`section-${entry.name}`} component="li" pt={key === 0 ? 0 : 1}>
                      <MDTypography
                         component="a"
-                        href={`#${section.name}`}
+                        href={`#${entry.name}`}
                         variant="button"
                         fontWeight="regular"
                         sx={({
@@ -64,9 +90,9 @@ function QRecordSidebar({tableSections, light}: Props): JSX.Element
                         })}
                      >
                         <MDBox mr={1.5} lineHeight={1} color="black">
-                           <Icon fontSize="small">{section.iconName}</Icon>
+                           <Icon fontSize="small">{entry.iconName}</Icon>
                         </MDBox>
-                        {section.label}
+                        {entry.label}
                      </MDTypography>
                   </MDBox>
                )) : null

src/qqq/components/Temporary/DataTable/index.tsx

@@ -18,12 +18,15 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+import {tooltipClasses, TooltipProps} from "@mui/material";
 import Autocomplete from "@mui/material/Autocomplete";
 import Icon from "@mui/material/Icon";
+import {styled} from "@mui/material/styles";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
 import TableContainer from "@mui/material/TableContainer";
 import TableRow from "@mui/material/TableRow";
+import Tooltip from "@mui/material/Tooltip";
 import parse from "html-react-parser";
 import {useEffect, useMemo, useState} from "react";
 import {useAsyncDebounce, useGlobalFilter, usePagination, useSortBy, useTable} from "react-table";
@@ -62,6 +65,15 @@ interface Props
    noEndBorder?: boolean;
 }
 
+const NoMaxWidthTooltip = styled(({className, ...props}: TooltipProps) => (
+   <Tooltip {...props} classes={{popper: className}} />
+))({
+   [`& .${tooltipClasses.tooltip}`]: {
+      maxWidth: "none",
+      textAlign: "left"
+   },
+});
+
 function DataTable({
    entriesPerPage,
    canSearch,
@@ -272,6 +284,18 @@ function DataTable({
                                        ) : (<DefaultCell>{cell.render("Cell")}</DefaultCell>)
                                     )
                                  }
+                                 {
+                                    cell.column.type === "htmlAndTooltip" && (
+                                       <DefaultCell>
+
+                                          <NoMaxWidthTooltip title={parse(row.values["tooltip"])}>
+                                             <MDBox>
+                                                {parse(cell.value)}
+                                             </MDBox>
+                                          </NoMaxWidthTooltip>
+                                       </DefaultCell>
+                                    )
+                                 }
                                  {
                                     cell.column.type === "html" && (
                                        <DefaultCell>{parse(cell.value)}</DefaultCell>

src/qqq/pages/app-home/index.tsx

@@ -31,16 +31,12 @@ import Grid from "@mui/material/Grid";
 import React, {useEffect, useState} from "react";
 import {Link, useLocation} from "react-router-dom";
 import BaseLayout from "qqq/components/BaseLayout";
+import DashboardWidgets from "qqq/components/DashboardWidgets";
 import ProcessLinkCard from "qqq/components/ProcessLinkCard";
-import MDBadgeDot from "qqq/components/Temporary/MDBadgeDot";
 import MDBox from "qqq/components/Temporary/MDBox";
 import MDTypography from "qqq/components/Temporary/MDTypography";
 import MiniStatisticsCard from "qqq/components/Temporary/MiniStatisticsCard";
-import BarChart from "qqq/pages/dashboards/Widgets/BarChart";
-import QuickSightChart from "qqq/pages/dashboards/Widgets/QuickSightChart";
-import TableCard from "qqq/pages/dashboards/Widgets/TableCard";
 import QClient from "qqq/utils/QClient";
-import LineChart from "../dashboards/Widgets/LineChart";
 
 const qController = QClient.getInstance();
 
@@ -160,81 +156,12 @@ function AppHome({app}: Props): JSX.Element
    return (
       <BaseLayout>
          <MDBox mt={4}>
+            {app.widgets && (
                <Grid container spacing={3}>
-               {
+                  <DashboardWidgets widgetNameList={app.widgets} />
-                  widgetCount > 0 ? (
-                     <Grid item xs={12} lg={12}>
-                        <Grid container spacing={3}>
-                           {
-                              widgets.map((chart, i) => (
-                                 <Grid key={`${i}`} item xs={12} lg={12}>
-                                    <MDBox mb={3}>
-                                       {
-                                          chart.type === "table" && (
-                                             <TableCard
-                                                color="info"
-                                                title={chart.title}
-                                                data={chart}
-                                                dropdownOptions={chart.dropdownOptions}
-                                                dropdownOnChange={handleDropdownOnChange}
-                                                widgetIndex={i}
-                                             />
-                                          )
-                                       }
-                                    </MDBox>
                </Grid>
-                              ))
-                           }
-                        </Grid>
-                        <Grid item xs={12} lg={widgetCount === 1 ? 3 : 6}>
-                           {
-                              widgets.map((chart, i) => (
-                                 <Grid key={`${i}`} item xs={12} lg={widgetCount === 1 ? 12 : 6}>
-                                    <MDBox mb={3}>
-                                       {
-                                          chart.type === "quickSightChart" && (
-                                             <QuickSightChart url={chart.url} label={chart.label} />
-                                          )
-                                       }
-                                       {
-                                          chart.type === "barChart" && (
-                                             <BarChart
-                                                color="info"
-                                                title={chart.title}
-                                                date={`As of ${new Date().toDateString()}`}
-                                                data={chart.chartData}
-                                             />
-                                          )
-                                       }
-                                       {
-                                          chart.type === "lineChart" && (
-                                             <LineChart
-                                                title={chart.title}
-                                                description={(
-                                                   <MDBox display="flex" justifyContent="space-between">
-                                                      <MDBox display="flex" ml={-1}>
-                                                         {
-                                                            chart.lineChartData.datasets.map((dataSet: any) => (
-                                                               <MDBadgeDot key={dataSet.label} color={dataSet.color} size="sm" badgeContent={dataSet.label} />
-                                                            ))
-                                                         }
-                                                      </MDBox>
-                                                      <MDBox mt={-4} mr={-1} position="absolute" right="1.5rem" />
-                                                   </MDBox>
             )}
-                                                chart={chart.lineChartData as { labels: string[]; datasets: { label: string; color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; data: number[]; }[]; }}
+            <Grid container spacing={3}>
-                                             />
-                                          )
-                                       }
-                                    </MDBox>
-                                 </Grid>
-                              ))
-                           }
-                        </Grid>
-                     </Grid>
-                  ) : null
-               }
-
                {
                   app.sections ? (
                      <Grid item xs={12} lg={widgetCount === 0 ? 12 : widgetCount === 1 ? 9 : 6}>

src/qqq/pages/dashboards/Widgets/TableCard.tsx

@@ -37,7 +37,10 @@ interface Props
 {
    title: string;
    data: TableDataInput;
-   dropdownOptions?: string[];
+   dropdownOptions?: {
+      id: string,
+      name: string
+   }[];
    dropdownOnChange?: (selectedValue: string, widgetIndex: number) => void;
    widgetIndex?: number;
 
@@ -49,7 +52,8 @@ function TableCard({title, data, dropdownOptions, dropdownOnChange, widgetIndex}
    const openArrowIcon = "arrow_drop_down";
    const closeArrowIcon = "arrow_drop_up";
    const [dropdown, setDropdown] = useState<string | null>(null);
-   const [dropdownValue, setDropdownValue] = useState<string>("");
+   const [dropdownValue, setDropdownValue] = useState("");
+   const [dropdownLabel, setDropdownLabel] = useState<string>("");
    const [dropdownIcon, setDropdownIcon] = useState<string>(openArrowIcon);
 
    const openDropdown = ({currentTarget}: any) =>
@@ -79,8 +83,8 @@ function TableCard({title, data, dropdownOptions, dropdownOnChange, widgetIndex}
                disableAutoFocusItem
             >
                {
-                  dropdownOptions.map((option) =>
+                  dropdownOptions.map((optionMap, index: number) =>
-                     <MenuItem key={option} onClick={close}>{option}</MenuItem>
+                     <MenuItem id={optionMap["id"]} key={index} onClick={close}>{optionMap["name"]}</MenuItem>
                   )
                }
             </Menu>
@@ -93,7 +97,8 @@ function TableCard({title, data, dropdownOptions, dropdownOnChange, widgetIndex}
       console.log(dropdownOptions);
       if (dropdownOptions)
       {
-         setDropdownValue(dropdownOptions[0]);
+         setDropdownValue(dropdownOptions[0]["id"]);
+         setDropdownLabel(dropdownOptions[0]["name"]);
       }
    }, [dropdownOptions]);
 
@@ -103,7 +108,7 @@ function TableCard({title, data, dropdownOptions, dropdownOnChange, widgetIndex}
          <Grid container>
             <Grid item xs={7}>
                <MDBox pt={3} px={3}>
-                  <MDTypography variant="h6" fontWeight="medium">
+                  <MDTypography variant="h5" fontWeight="medium">
                      {title}
                   </MDTypography>
                </MDBox>
@@ -111,6 +116,13 @@ function TableCard({title, data, dropdownOptions, dropdownOnChange, widgetIndex}
             <Grid item xs={5}>
                {dropdownOptions && (
                   <MDBox p={2} width="100%" textAlign="right" lineHeight={1}>
+                     <MDTypography
+                        variant="caption"
+                        color="secondary"
+                        fontWeight="regular"
+                     >
+                        <strong>Billing Period: </strong>
+                     </MDTypography>
                      <MDTypography
                         variant="caption"
                         color="secondary"
@@ -118,7 +130,7 @@ function TableCard({title, data, dropdownOptions, dropdownOnChange, widgetIndex}
                         sx={{cursor: "pointer"}}
                         onClick={openDropdown}
                      >
-                        {dropdownValue}
+                        {dropdownLabel}
                      </MDTypography>
                      {renderMenu(dropdown, openDropdown, closeDropdown, dropdownIcon)}
                   </MDBox>

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

@@ -37,6 +37,7 @@ import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import React, {useReducer, useState} from "react";
 import {useLocation, useNavigate, useSearchParams} from "react-router-dom";
+import DashboardWidgets from "qqq/components/DashboardWidgets";
 import {QActionsMenuButton, QDeleteButton, QEditButton} from "qqq/components/QButtons";
 import QRecordSidebar from "qqq/components/QRecordSidebar";
 import colors from "qqq/components/Temporary/colors";
@@ -66,7 +67,6 @@ function ViewContents({id, table}: Props): JSX.Element
    const tableName = table ? table.name : pathParts[pathParts.length - 2];
 
    const [asyncLoadInited, setAsyncLoadInited] = useState(false);
-   const [nameValues, setNameValues] = useState([] as JSX.Element[]);
    const [sectionFieldElements, setSectionFieldElements] = useState(null as Map<string, JSX.Element[]>);
    const [deleteConfirmationOpen, setDeleteConfirmationOpen] = useState(false);
    const [tableMetaData, setTableMetaData] = useState(null);
@@ -77,6 +77,7 @@ function ViewContents({id, table}: Props): JSX.Element
    const [nonT1TableSections, setNonT1TableSections] = useState([] as QTableSection[]);
    const [tableProcesses, setTableProcesses] = useState([] as QProcessMetaData[]);
    const [actionsMenu, setActionsMenu] = useState(null);
+   const [widgets, setWidgets] = useState([] as string[]);
    const [searchParams] = useSearchParams();
    const [, forceUpdate] = useReducer((x) => x + 1, 0);
 
@@ -106,6 +107,7 @@ function ViewContents({id, table}: Props): JSX.Element
          /////////////////////
          const record = await qController.get(tableName, id);
          setRecord(record);
+         setWidgets(tableMetaData.widgets);
 
          /////////////////////////////////////////////////
          // define the sections, e.g., for the left-bar //
@@ -237,7 +239,7 @@ function ViewContents({id, table}: Props): JSX.Element
 
          <Grid container spacing={3}>
             <Grid item xs={12} lg={3}>
-               <QRecordSidebar tableSections={tableSections} />
+               <QRecordSidebar tableSections={tableSections} widgetNames={widgets} />
             </Grid>
             <Grid item xs={12} lg={9}>
 
@@ -264,6 +266,9 @@ function ViewContents({id, table}: Props): JSX.Element
                      </Card>
                   </Grid>
                </Grid>
+               {tableMetaData && tableMetaData.widgets && record && (
+                  <DashboardWidgets widgetNameList={tableMetaData.widgets} entityPrimaryKey={record.values.get(tableMetaData.primaryKeyField)} />
+               )}
                {nonT1TableSections.length > 0 ? nonT1TableSections.map(({
                   iconName, label, name, fieldNames, tier,
                }: any) => (