diff --git a/src/App.tsx b/src/App.tsx
index 0540bec..9508ad8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -226,7 +226,7 @@ export default function App()
name: `${app.label}`,
key: app.name,
route: path,
- component: ,
+ component: ,
});
}
else if (app.type === QAppNodeType.TABLE)
diff --git a/src/qqq/pages/app-home/index.tsx b/src/qqq/pages/app-home/index.tsx
index 7cda0a4..cdb68b0 100644
--- a/src/qqq/pages/app-home/index.tsx
+++ b/src/qqq/pages/app-home/index.tsx
@@ -33,8 +33,6 @@ import MiniStatisticsCard from "examples/Cards/StatisticsCards/MiniStatisticsCar
import {Icon} from "@mui/material";
import MDTypography from "components/MDTypography";
import Card from "@mui/material/Card";
-import ComplexStatisticsCard from "examples/Cards/StatisticsCards/ComplexStatisticsCard";
-import ReportsLineChart from "examples/Charts/LineCharts/ReportsLineChart";
import DefaultLineChart from "examples/Charts/LineCharts/DefaultLineChart";
import MDBadgeDot from "components/MDBadgeDot";
import ReportsBarChart from "examples/Charts/BarCharts/ReportsBarChart";
@@ -57,6 +55,9 @@ function AppHome({app}: Props): JSX.Element
const [tables, setTables] = useState([] as QTableMetaData[]);
const [processes, setProcesses] = useState([] as QProcessMetaData[]);
const [childApps, setChildApps] = useState([] as QAppMetaData[]);
+ const [tableCounts, setTableCounts] = useState(new Map());
+ const [updatedTableCounts, setUpdatedTableCounts] = useState(new Date());
+ const [widgets, setWidgets] = useState([] as any[]);
const location = useLocation();
@@ -102,154 +103,207 @@ function AppHome({app}: Props): JSX.Element
setTables(newTables);
setProcesses(newProcesses);
setChildApps(newChildApps);
+
+ const tableCounts = new Map();
+ newTables.forEach((table) =>
+ {
+ tableCounts.set(table.name, {isLoading: true, value: null});
+
+ setTimeout(async () =>
+ {
+ const count = await qController.count(table.name);
+ tableCounts.set(table.name, {isLoading: false, value: count});
+ setTableCounts(tableCounts);
+ setUpdatedTableCounts(new Date());
+ }, 1);
+ });
+ setTableCounts(tableCounts);
+
+ console.log(app.widgets);
+ if (app.widgets)
+ {
+ const widgets: any[] = [];
+ for (let i = 0; i < app.widgets.length; i++)
+ {
+ widgets[i] = {};
+ setTimeout(async () =>
+ {
+ const widget = await qController.widget(app.widgets[i]);
+ widgets[i] = widget;
+ setUpdatedTableCounts(new Date());
+ }, 1);
+ }
+ setWidgets(widgets);
+ }
}, [qInstance, location]);
- const reportsBarChartData = {
- labels: ["M", "T", "W", "T", "F", "S", "S"],
- datasets: {label: "Sales", data: [50, 20, 10, 22, 50, 10, 40]},
- };
-
- interface Types {
- labels: string[];
- datasets: {
- label: string;
- color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
- data: number[];
- }[];
- }
-
- const demoLineChartData: Types = {
- labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
- datasets: [
- {
- label: "Facebook Ads",
- color: "info",
- data: [50, 100, 200, 190, 400, 350, 500, 450, 700],
+ /*
+ const charts = [
+ {
+ type: "barChart",
+ title: "Parcel Invoice Lines per Month",
+ barChartData: {
+ labels: ["Feb 22", "Mar 22", "Apr 22", "May 22", "Jun 22", "Jul 22", "Aug 22"],
+ datasets: {label: "Parcel Invoice Lines", data: [50000, 22000, 11111, 22333, 40404, 9876, 2355]},
},
- {
- label: "Google Ads",
- color: "dark",
- data: [10, 30, 40, 120, 150, 220, 280, 250, 280],
+ },
+ {
+ type: "lineChart",
+ title: "Total Charges by Carrier per Month",
+ lineChartData: {
+ labels: ["Feb 22", "Mar 22", "Apr 22", "May 22", "Jun 22", "Jul 22", "Aug 22"],
+ datasets: [
+ {label: "UPS", color: "info", data: [50000, 22000, 11111, 22333, 40404, 9876, 2355]},
+ {label: "FedEx", color: "dark", data: [5000, 22000, 31111, 32333, 20404, 19876, 24355]},
+ {label: "LSO", color: "error", data: [500, 2200, 1111, 2333, 404, 17876, 2355]},
+ ],
},
- ],
- };
+ },
+ ];
+ */
+
+ console.log(`Widgets: ${widgets} and tables: ${tables}`);
+
+ const haveWidgets = widgets && widgets.length;
+ const widgetCount = widgets ? widgets.length : 0;
+
+ // eslint-disable-next-line no-nested-ternary
+ const tileSizeLg = (widgetCount === 0 ? 3 : widgetCount === 1 ? 4 : 6);
return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )}
- chart={demoLineChartData}
- />
-
-
-
-
-
-
- {
- tables.length ? (
-
-
-
- Tables
-
-
- {tables.map((table) => (
-
-
-
- {table.iconName || app.iconName}}}
- direction="right"
+ {
+ widgetCount > 0 ? (
+
+
+ {
+ widgets.map((chart) => (
+
+
+ {
+ chart.type === "barChart" && (
+
-
-
-
- ))}
-
-
-
- ) : null
- }
+ )
+ }
+ {
+ chart.type === "lineChart" && (
+
+
+ {
+ chart.lineChartData.datasets.map((dataSet: any) => (
+
+ ))
+ }
+
+
+
+ )}
+ chart={chart.lineChartData as { labels: string[]; datasets: { label: string; color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; data: number[]; }[]; }}
+ />
+ )
+ }
+
+
+ ))
+ }
+
+
+ ) : null
+ }
- {
- processes.length ? (
-
-
-
- Processes
+ {
+ tables.length > 0 || processes.length > 0 || childApps.length > 0 ? (
+ // eslint-disable-next-line no-nested-ternary
+
+ {
+ tables.length ? (
+
+
+
+ Tables
+
+
+ {tables.map((table) => (
+
+
+
+ {table.iconName || app.iconName}}}
+ direction="right"
+ />
+
+
+
+ ))}
+
+
-
- {processes.map((process) => (
-
-
-
-
-
- ))}
-
-
-
- ) : null
- }
+ ) : null
+ }
- {
- childApps.length ? (
-
-
-
- {childApps.map((childApp) => (
-
-
-
-
+ {
+ processes.length ? (
+
+
+
+ Processes
+
+
+ {processes.map((process) => (
+
+
+
+
+
+ ))}
- ))}
-
-
-
- ) : null
- }
-
+
+
+ ) : null
+ }
+
+ {
+ childApps.length ? (
+
+
+
+ Apps
+
+
+ {childApps.map((childApp) => (
+
+
+
+
+
+ ))}
+
+
+
+ ) : null
+ }
+
+ ) : null
+ }