[PUI] Add currency stats (inventree#7971)

* factor out stats overview * move to panel * Add currency stas overview Closes invenhost#115
matmair · Aug 23, 2024 · 8a59829 · 8a59829
1 parent ed2da62
commit 8a59829
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 48 deletions.
diff --git a/src/frontend/src/components/settings/FactCollection.tsx b/src/frontend/src/components/settings/FactCollection.tsx
@@ -0,0 +1,19 @@
+import { SimpleGrid } from '@mantine/core';
+
+import { FactItem } from './FactItem';
+
+export function FactCollection({
+  items,
+  minItems = 3
+}: {
+  items: { title: string; value: any }[];
+  minItems?: number;
+}) {
+  return (
+    <SimpleGrid cols={minItems} spacing="xs">
+      {items.map((item, index) => (
+        <FactItem key={index} title={item.title} value={item.value} />
+      ))}
+    </SimpleGrid>
+  );
+}
diff --git a/src/frontend/src/components/settings/FactItem.tsx b/src/frontend/src/components/settings/FactItem.tsx
@@ -0,0 +1,14 @@
+import { Paper, Stack, Text } from '@mantine/core';
+
+import { StylishText } from '../items/StylishText';
+
+export function FactItem({ title, value }: { title: string; value: number }) {
+  return (
+    <Paper p="md" shadow="xs">
+      <Stack gap="xs">
+        <StylishText size="md">{title}</StylishText>
+        <Text>{value}</Text>
+      </Stack>
+    </Paper>
+  );
+}
diff --git a/...end/src/tables/settings/CurrencyTable.tsx → ...gs/AdminCenter/CurrencyManagmentPanel.tsx b/...end/src/tables/settings/CurrencyTable.tsx → ...gs/AdminCenter/CurrencyManagmentPanel.tsx
@@ -1,21 +1,24 @@
 import { t } from '@lingui/macro';
+import { Divider, Stack } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
 import { IconReload } from '@tabler/icons-react';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
-import { api } from '../../App';
-import { ActionButton } from '../../components/buttons/ActionButton';
-import { ApiEndpoints } from '../../enums/ApiEndpoints';
-import { useTable } from '../../hooks/UseTable';
-import { apiUrl } from '../../states/ApiState';
-import { InvenTreeTable } from '../InvenTreeTable';
+import { api } from '../../../../App';
+import { ActionButton } from '../../../../components/buttons/ActionButton';
+import { FactCollection } from '../../../../components/settings/FactCollection';
+import { ApiEndpoints } from '../../../../enums/ApiEndpoints';
+import { useTable } from '../../../../hooks/UseTable';
+import { apiUrl } from '../../../../states/ApiState';
+import { InvenTreeTable } from '../../../../tables/InvenTreeTable';
 
 /*
  * Table for displaying available currencies
  */
-export default function CurrencyTable() {
+export function CurrencyTable({
+  setInfo
+}: Readonly<{ setInfo: (info: any) => void }>) {
   const table = useTable('currency');
-
   const columns = useMemo(() => {
     return [
       {
@@ -53,6 +56,7 @@ export default function CurrencyTable() {
   const tableActions = useMemo(() => {
     return [
       <ActionButton
+        key="refresh"
         onClick={refreshCurrencies}
         tooltip={t`Refresh currency exchange rates`}
         icon={<IconReload />}
@@ -69,6 +73,7 @@ export default function CurrencyTable() {
         idAccessor: 'currency',
         tableActions: tableActions,
         dataFormatter: (data: any) => {
+          setInfo(data);
           let rates = data.exchange_rates ?? {};
 
           return Object.entries(rates).map(([currency, rate]) => {
@@ -82,3 +87,20 @@ export default function CurrencyTable() {
     />
   );
 }
+
+export default function CurrencyManagmentPanel() {
+  const [info, setInfo] = useState<any>({});
+
+  return (
+    <Stack gap="xs">
+      <FactCollection
+        items={[
+          { title: t`Last fetched`, value: info?.updated },
+          { title: t`Base currency`, value: info?.base_currency }
+        ]}
+      />
+      <Divider />
+      <CurrencyTable setInfo={setInfo} />
+    </Stack>
+  );
+}
diff --git a/src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx b/src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx
@@ -48,6 +48,10 @@ const TaskManagementPanel = Loadable(
   lazy(() => import('./TaskManagementPanel'))
 );
 
+const CurrencyManagmentPanel = Loadable(
+  lazy(() => import('./CurrencyManagmentPanel'))
+);
+
 const PluginManagementPanel = Loadable(
   lazy(() => import('./PluginManagementPanel'))
 );
@@ -88,10 +92,6 @@ const LocationTypesTable = Loadable(
   lazy(() => import('../../../../tables/stock/LocationTypesTable'))
 );
 
-const CurrencyTable = Loadable(
-  lazy(() => import('../../../../tables/settings/CurrencyTable'))
-);
-
 export default function AdminCenter() {
   const user = useUserState();
 
@@ -125,7 +125,7 @@ export default function AdminCenter() {
         name: 'currencies',
         label: t`Currencies`,
         icon: <IconCoins />,
-        content: <CurrencyTable />
+        content: <CurrencyManagmentPanel />
       },
       {
         name: 'projectcodes',

diff --git a/src/frontend/src/pages/Index/Settings/AdminCenter/TaskManagementPanel.tsx b/src/frontend/src/pages/Index/Settings/AdminCenter/TaskManagementPanel.tsx
@@ -1,16 +1,9 @@
 import { t } from '@lingui/macro';
-import {
-  Accordion,
-  Alert,
-  Divider,
-  Paper,
-  SimpleGrid,
-  Stack,
-  Text
-} from '@mantine/core';
+import { Accordion, Alert, Divider, Stack, Text } from '@mantine/core';
 import { lazy } from 'react';
 
 import { StylishText } from '../../../../components/items/StylishText';
+import { FactCollection } from '../../../../components/settings/FactCollection';
 import { ApiEndpoints } from '../../../../enums/ApiEndpoints';
 import { Loadable } from '../../../../functions/loading';
 import { useInstance } from '../../../../hooks/UseInstance';
@@ -27,17 +20,6 @@ const FailedTasksTable = Loadable(
   lazy(() => import('../../../../tables/settings/FailedTasksTable'))
 );
 
-function TaskCountOverview({ title, value }: { title: string; value: number }) {
-  return (
-    <Paper p="md" shadow="xs">
-      <Stack gap="xs">
-        <StylishText size="md">{title}</StylishText>
-        <Text>{value}</Text>
-      </Stack>
-    </Paper>
-  );
-}
-
 export default function TaskManagementPanel() {
   const { instance: taskInfo } = useInstance({
     endpoint: ApiEndpoints.task_overview,
@@ -55,20 +37,13 @@ export default function TaskManagementPanel() {
         </Alert>
       )}
       <Stack gap="xs">
-        <SimpleGrid cols={3} spacing="xs">
-          <TaskCountOverview
-            title={t`Pending Tasks`}
-            value={taskInfo?.pending_tasks}
-          />
-          <TaskCountOverview
-            title={t`Scheduled Tasks`}
-            value={taskInfo?.scheduled_tasks}
-          />
-          <TaskCountOverview
-            title={t`Failed Tasks`}
-            value={taskInfo?.failed_tasks}
-          />
-        </SimpleGrid>
+        <FactCollection
+          items={[
+            { title: t`Pending Tasks`, value: taskInfo?.pending_tasks },
+            { title: t`Scheduled Tasks`, value: taskInfo?.scheduled_tasks },
+            { title: t`Failed Tasks`, value: taskInfo?.failed_tasks }
+          ]}
+        />
         <Divider />
         <Accordion defaultValue="pending">
           <Accordion.Item value="pending" key="pending-tasks">