[UI] Report ouputs (#9003)

* Typo fixes

* Display table of generated reports

* Display generated label outputs

* Translation

* Allow sorting of API Endpoints

* Add template detail to output serializers

* Add extra table column

src/frontend/src/pages/Index/Settings/AdminCenter/CurrencyManagementPanel.tsx

@@ -89,7 +89,7 @@ export function CurrencyTable({
   );
 }
 
-export default function CurrencyManagmentPanel() {
+export default function CurrencyManagementPanel() {
   const [info, setInfo] = useState<any>({});
 
   return (

src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx

@@ -44,11 +44,13 @@ const TaskManagementPanel = Loadable(
   lazy(() => import('./TaskManagementPanel'))
 );
 
-const CurrencyManagmentPanel = Loadable(
-  lazy(() => import('./CurrencyManagmentPanel'))
+const CurrencyManagementPanel = Loadable(
+  lazy(() => import('./CurrencyManagementPanel'))
 );
 
-const UnitManagmentPanel = Loadable(lazy(() => import('./UnitManagmentPanel')));
+const UnitManagementPanel = Loadable(
+  lazy(() => import('./UnitManagementPanel'))
+);
 
 const PluginManagementPanel = Loadable(
   lazy(() => import('./PluginManagementPanel'))
@@ -137,10 +139,10 @@ export default function AdminCenter() {
         name: 'currencies',
         label: t`Currencies`,
         icon: <IconCoins />,
-        content: <CurrencyManagmentPanel />
+        content: <CurrencyManagementPanel />
       },
       {
-        name: 'projectcodes',
+        name: 'project-codes',
         label: t`Project Codes`,
         icon: <IconListDetails />,
         content: (
@@ -151,16 +153,16 @@ export default function AdminCenter() {
         )
       },
       {
-        name: 'customstates',
+        name: 'custom-states',
         label: t`Custom States`,
         icon: <IconListDetails />,
         content: <CustomStateTable />
       },
       {
-        name: 'customunits',
+        name: 'custom-units',
         label: t`Custom Units`,
         icon: <IconScale />,
-        content: <UnitManagmentPanel />
+        content: <UnitManagementPanel />
       },
       {
         name: 'part-parameters',

src/frontend/src/pages/Index/Settings/AdminCenter/LabelTemplatePanel.tsx

@@ -1,8 +1,14 @@
+import { t } from '@lingui/macro';
+import { Accordion } from '@mantine/core';
+import { StylishText } from '../../../../components/items/StylishText';
 import { ApiEndpoints } from '../../../../enums/ApiEndpoints';
 import { ModelType } from '../../../../enums/ModelType';
-import { TemplateTable } from '../../../../tables/settings/TemplateTable';
+import {
+  TemplateOutputTable,
+  TemplateTable
+} from '../../../../tables/settings/TemplateTable';
 
-export default function LabelTemplatePanel() {
+function LabelTemplateTable() {
   return (
     <TemplateTable
       templateProps={{
@@ -17,3 +23,29 @@ export default function LabelTemplatePanel() {
     />
   );
 }
+
+export default function LabelTemplatePanel() {
+  return (
+    <Accordion defaultValue={['templates']} multiple>
+      <Accordion.Item value='templates'>
+        <Accordion.Control>
+          <StylishText size='lg'>{t`Label Templates`}</StylishText>
+        </Accordion.Control>
+        <Accordion.Panel>
+          <LabelTemplateTable />
+        </Accordion.Panel>
+      </Accordion.Item>
+      <Accordion.Item value='outputs'>
+        <Accordion.Control>
+          <StylishText size='lg'>{t`Generated Labels`}</StylishText>
+        </Accordion.Control>
+        <Accordion.Panel>
+          <TemplateOutputTable
+            endpoint={ApiEndpoints.label_output}
+            withPlugins
+          />
+        </Accordion.Panel>
+      </Accordion.Item>
+    </Accordion>
+  );
+}

src/frontend/src/pages/Index/Settings/AdminCenter/ReportTemplatePanel.tsx

@@ -1,11 +1,16 @@
 import { t } from '@lingui/macro';
 
+import { Accordion } from '@mantine/core';
 import { YesNoButton } from '../../../../components/buttons/YesNoButton';
+import { StylishText } from '../../../../components/items/StylishText';
 import { ApiEndpoints } from '../../../../enums/ApiEndpoints';
 import { ModelType } from '../../../../enums/ModelType';
-import { TemplateTable } from '../../../../tables/settings/TemplateTable';
+import {
+  TemplateOutputTable,
+  TemplateTable
+} from '../../../../tables/settings/TemplateTable';
 
-export default function ReportTemplateTable() {
+function ReportTemplateTable() {
   return (
     <TemplateTable
       templateProps={{
@@ -33,3 +38,26 @@ export default function ReportTemplateTable() {
     />
   );
 }
+
+export default function ReportTemplatePanel() {
+  return (
+    <Accordion defaultValue={['templates']} multiple>
+      <Accordion.Item value='templates'>
+        <Accordion.Control>
+          <StylishText size='lg'>{t`Report Templates`}</StylishText>
+        </Accordion.Control>
+        <Accordion.Panel>
+          <ReportTemplateTable />
+        </Accordion.Panel>
+      </Accordion.Item>
+      <Accordion.Item value='outputs'>
+        <Accordion.Control>
+          <StylishText size='lg'>{t`Generated Reports`}</StylishText>
+        </Accordion.Control>
+        <Accordion.Panel>
+          <TemplateOutputTable endpoint={ApiEndpoints.report_output} />
+        </Accordion.Panel>
+      </Accordion.Item>
+    </Accordion>
+  );
+}

src/frontend/src/pages/Index/Settings/AdminCenter/UnitManagementPanel.tsx

@@ -48,7 +48,7 @@ function AllUnitTable() {
   );
 }
 
-export default function UnitManagmentPanel() {
+export default function UnitManagementPanel() {
   return (
     <Stack gap='xs'>
       <Accordion defaultValue='custom'>

src/frontend/src/tables/settings/TemplateTable.tsx

@@ -42,7 +42,7 @@ import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
 import type { TableColumn } from '../Column';
-import { BooleanColumn } from '../ColumnRenderers';
+import { BooleanColumn, DateColumn } from '../ColumnRenderers';
 import type { TableFilter } from '../Filter';
 import { InvenTreeTable } from '../InvenTreeTable';
 import {
@@ -401,3 +401,78 @@ export function TemplateTable({
     </>
   );
 }
+
+export function TemplateOutputTable({
+  endpoint,
+  withPlugins = false
+}: {
+  endpoint: ApiEndpoints;
+  withPlugins?: boolean;
+}) {
+  const table = useTable(`${endpoint}-output`);
+
+  const tableColumns: TableColumn[] = useMemo(() => {
+    return [
+      {
+        accessor: 'output',
+        sortable: false,
+        switchable: false,
+        title: t`Report Output`,
+        noWrap: true,
+        noContext: true,
+        render: (record: any) => {
+          if (record.output) {
+            return <AttachmentLink attachment={record.output} />;
+          } else {
+            return '-';
+          }
+        }
+      },
+      {
+        accessor: 'template_detail.name',
+        sortable: false,
+        switchable: false,
+        title: t`Template`
+      },
+      {
+        accessor: 'model_type',
+        sortable: true,
+        switchable: false,
+        title: t`Model Type`
+      },
+      DateColumn({
+        accessor: 'created',
+        title: t`Creation Date`,
+        switchable: false,
+        sortable: true
+      }),
+      {
+        accessor: 'plugin',
+        title: t`Plugin`,
+        hidden: !withPlugins
+      },
+      {
+        accessor: 'user_detail.username',
+        sortable: true,
+        ordering: 'user',
+        title: t`Created By`
+      }
+    ];
+  }, [withPlugins]);
+
+  return (
+    <>
+      <InvenTreeTable
+        url={apiUrl(endpoint)}
+        tableState={table}
+        columns={tableColumns}
+        props={{
+          enableSearch: false,
+          enableColumnSwitching: false,
+          enableSelection: true,
+          enableBulkDelete: true
+        }}
+      />
+    </>
+  );
+}