diff --git a/src/frontend/src/components/settings/FactCollection.tsx b/src/frontend/src/components/settings/FactCollection.tsx new file mode 100644 index 000000000000..9c69464eb277 --- /dev/null +++ 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 ( + + {items.map((item, index) => ( + + ))} + + ); +} diff --git a/src/frontend/src/components/settings/FactItem.tsx b/src/frontend/src/components/settings/FactItem.tsx new file mode 100644 index 000000000000..bc549c3b505e --- /dev/null +++ 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 ( + + + {title} + {value} + + + ); +} diff --git a/src/frontend/src/tables/settings/CurrencyTable.tsx b/src/frontend/src/pages/Index/Settings/AdminCenter/CurrencyManagmentPanel.tsx similarity index 61% rename from src/frontend/src/tables/settings/CurrencyTable.tsx rename to src/frontend/src/pages/Index/Settings/AdminCenter/CurrencyManagmentPanel.tsx index e5ed7533c283..e9554d92a0d4 100644 --- a/src/frontend/src/tables/settings/CurrencyTable.tsx +++ b/src/frontend/src/pages/Index/Settings/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 [ } @@ -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({}); + + return ( + + + + + + ); +} diff --git a/src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx b/src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx index 8f842613296e..7c0b51c8d735 100644 --- 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: , - content: + content: }, { name: 'projectcodes', diff --git a/src/frontend/src/pages/Index/Settings/AdminCenter/TaskManagementPanel.tsx b/src/frontend/src/pages/Index/Settings/AdminCenter/TaskManagementPanel.tsx index 3ac9526166f5..47fb448b1d21 100644 --- 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 ( - - - {title} - {value} - - - ); -} - export default function TaskManagementPanel() { const { instance: taskInfo } = useInstance({ endpoint: ApiEndpoints.task_overview, @@ -55,20 +37,13 @@ export default function TaskManagementPanel() { )} - - - - - +