Origin/usage report page

packages/client/src/pages/engine/EngineReportPage.tsx

@@ -0,0 +1,28 @@
+import { styled } from '@semoss/ui';
+import { SettingsContext } from '@/contexts';
+import { useEngine, usePixel } from '@/hooks';
+import { SETTINGS_PENDING_USER } from '@/components/settings';
+import { UsagePerUserTable } from './UsagePerUserTable';
+import { UsagePerProjectTable } from './UsagePerProjectTable';
+
+const StyledContainer = styled('div')(({ theme }) => ({
+    display: 'flex',
+    // alignSelf: 'stretch',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    gap: '5px',
+    marginBottom: '50px',
+}));
+
+export const EngineReportPage = () => {
+    return (
+        <SettingsContext.Provider value={{ adminMode: false }}>
+            <StyledContainer>
+                <UsagePerUserTable />
+            </StyledContainer>
+            <StyledContainer>
+                <UsagePerProjectTable />
+            </StyledContainer>
+        </SettingsContext.Provider>
+    );
+};

packages/client/src/pages/engine/EngineReportingPage.tsx

@@ -0,0 +1,16 @@
+import React, { useState, useEffect } from 'react';
+import { Button, Table, styled, Typography } from '@semoss/ui';
+import { useEngine } from '@/hooks';
+// import { FileTable } from '@/components/settings';
+
+
+export const EngineReportingPage = () => {
+    //Grabbing Engine Id for document creation
+
+    return (
+
+        <div>
+            Placeholder
+        </div>
+    );
+};

packages/client/src/pages/engine/UsagePerProjectTable.tsx

@@ -0,0 +1,173 @@
+import { useEngine, usePixel } from '@/hooks';
+import { Table, Typography, styled, Search, IconButton } from '@semoss/ui';
+import { useState, useRef, useEffect } from 'react';
+import SearchIcon from '@mui/icons-material/Search';
+import { FilterAltSharp } from '@mui/icons-material';
+
+const StyledTableContainer = styled(Table.Container)({
+    background: '#FFF',
+    boxShadow: '0px 5px 22px 0px rgba(0, 0, 0, 0.06)',
+});
+
+const Grid = styled('div')({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
+});
+const StyledSearchFilter = styled('div')({
+    marginLeft: '10px',
+    display: 'flex',
+});
+const StyledFilter = styled('div')({
+    marginLeft: '10px',
+});
+
+const MAPPINGS = {
+    TOTAL_NUMBER_OF_REQUEST: 'Requests',
+    TOTAL_NUMBER_OF_TOKENS: 'Tokens',
+};
+
+export const UsagePerProjectTable = () => {
+    const [search, setSearch] = useState<string>('');
+    const UsagePerProjectSearchRef = useRef<HTMLInputElement | null>(null);
+    const [page, setPage] = useState<number>(0);
+    const [rowsPerPage, setRowsPerPage] = useState<number>(5);
+    const [isSearch, setIsSearch] = useState<boolean>(false);
+    const [isFilter, setIsFilter] = useState<boolean>(false);
+
+    useEffect(() => {
+        UsagePerProjectSearchRef.current?.focus();
+    }, [search]);
+
+    const { id, type } = useEngine();
+    const usagePerProjectPixel = ['MODEL'].includes(type)
+        ? `GetEngineUsagePerProject(engine='${id}');`
+        : '';
+
+    const usagePerProject = usePixel(usagePerProjectPixel);
+
+    const outputData: Record<string, any>[] =
+        usagePerProject.status === 'SUCCESS' &&
+        Array.isArray(usagePerProject.data)
+            ? usagePerProject.data
+            : [];
+
+    const headers = outputData.length > 0 ? Object.keys(outputData[0]) : [];
+    const rows = outputData.length > 0 ? outputData : [];
+
+    const filteredRows = rows.filter((row) =>
+        Object.values(row).some((value) =>
+            value?.toString().toLowerCase().includes(search.toLowerCase()),
+        ),
+    );
+
+    const paginatedRows = filteredRows.slice(
+        page * rowsPerPage,
+        page * rowsPerPage + rowsPerPage,
+    );
+
+    return (
+        <>
+            <Grid>
+                <div>
+                    <Typography variant={'h6'}>Apps</Typography>
+                    <Typography variant={'body2'}>
+                        Summary of app activity, including messages, tokens, and
+                        last utilization date.
+                    </Typography>
+                </div>
+                <StyledSearchFilter>
+                    <StyledFilter>
+                        {isSearch ? (
+                            <Search
+                                inputRef={UsagePerProjectSearchRef}
+                                placeholder="Search"
+                                size="small"
+                                value={search}
+                                onChange={(e) => {
+                                    setSearch(e.target.value);
+                                    setPage(0);
+                                }}
+                            />
+                        ) : (
+                            <IconButton onClick={() => setIsSearch(!isSearch)}>
+                                <SearchIcon />
+                            </IconButton>
+                        )}
+                    </StyledFilter>
+                    <StyledFilter>
+                        {isFilter ? (
+                            <Search
+                                inputRef={UsagePerProjectSearchRef}
+                                placeholder="Search"
+                                size="small"
+                                value={search}
+                                onChange={(e) => {
+                                    setSearch(e.target.value);
+                                    setPage(0);
+                                }}
+                            />
+                        ) : (
+                            <IconButton onClick={() => setIsFilter(!isFilter)}>
+                                <FilterAltSharp />
+                            </IconButton>
+                        )}
+                    </StyledFilter>
+                </StyledSearchFilter>
+            </Grid>
+            <StyledTableContainer>
+                <Table>
+                    <Table.Head>
+                        <Table.Row>
+                            {headers.map((header, index) => (
+                                <Table.Cell key={index}>
+                                    {MAPPINGS[header]}
+                                </Table.Cell>
+                            ))}
+                        </Table.Row>
+                    </Table.Head>
+                    <Table.Body>
+                        {paginatedRows.length > 0 ? (
+                            paginatedRows.map((row, rowIndex) => (
+                                <Table.Row key={rowIndex}>
+                                    {headers.map((header, colIndex) => (
+                                        <Table.Cell key={colIndex}>
+                                            {row[header]}
+                                        </Table.Cell>
+                                    ))}
+                                </Table.Row>
+                            ))
+                        ) : (
+                            <Table.Row>
+                                <Table.Cell
+                                    colSpan={headers.length}
+                                    align="center"
+                                >
+                                    No filtered data found
+                                </Table.Cell>
+                            </Table.Row>
+                        )}
+                    </Table.Body>
+                    <Table.Footer>
+                        <Table.Row>
+                            <Table.Pagination
+                                onPageChange={(e, v) => setPage(v)}
+                                page={page}
+                                rowsPerPage={rowsPerPage}
+                                rowsPerPageOptions={[5, 10, 20]}
+                                onRowsPerPageChange={(e) => {
+                                    setRowsPerPage(
+                                        parseInt(e.target.value, 10),
+                                    );
+                                    setPage(0);
+                                }}
+                                count={filteredRows.length}
+                            />
+                        </Table.Row>
+                    </Table.Footer>
+                </Table>
+            </StyledTableContainer>
+        </>
+    );
+};