add login log page

src/pages/User/DetailsPage_Individual/LoginGrid.js

@@ -0,0 +1,71 @@
+// material-ui
+import * as React from 'react';
+import {FiDataGrid} from "components/FiDataGrid";
+import {
+    // Button,
+    // Typography, 
+    useMediaQuery
+} from '@mui/material';
+import * as DateUtils from "utils/DateUtils"
+// import {useNavigate} from "react-router-dom";
+// import {
+//     isORGLoggedIn,
+//   } from "utils/Utils";
+import {useTheme} from "@emotion/react";
+// import {getStatusIntl} from "utils/statusUtils/PublicNoteStatusUtils";
+// import {
+//     FormattedMessage, 
+//     useIntl} from "react-intl";
+// ==============================|| EVENT TABLE ||============================== //
+
+export default function LoginGrid({rows}) {
+    // const navigate = useNavigate()
+    const theme = useTheme();
+    const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
+    // const intl = useIntl();
+
+    // const handleDetailClick = (params) => () => {
+    //     navigate('/publicNotice/'+ params.id);
+    // };
+
+    // const remarkHeadername = rows.orgId===null?"我的備註":"Care Of / 我的備註"
+
+    const columns = [
+        {
+            id: 'loginTime',
+            field: 'loginTime',
+            headerName: "Date Time",
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
+            valueGetter:(params)=>{
+                return DateUtils.datetimeStr(params?.value);
+            }
+        },
+        {
+            id: 'result',
+            field: 'result',
+            headerName: 'Result',
+            width: isMdOrLg ? 'auto' : 300,
+            flex: isMdOrLg ? 1 : undefined,
+            // valueGetter:(params)=>{
+            //     return DateUtils.datetimeStr(params?.value);
+            // }
+        },
+    ];
+    
+    // function handleRowDoubleClick(params) {
+    //     navigate('/publicNotice/'+ params.id);
+    // }
+
+    return (
+        <div style={{minHeight: 200, height:"100%", width: '100%', padding: 4}}>
+            <FiDataGrid
+                rows={rows}
+                columns={columns}
+                customPageSize={10}
+                // onRowDoubleClick={handleRowDoubleClick}
+                getRowHeight={() => 'auto'}
+            />
+        </div>
+    );
+}

src/pages/User/DetailsPage_Individual/index.js

@@ -1,7 +1,8 @@
 // material-ui
 import * as React from "react";
 
-import { Grid, Typography, Button, Stack } from '@mui/material';
+import { Grid, Typography, Button, Stack, Box, Tab } from '@mui/material';
+import { TabPanel, TabContext, TabList } from '@mui/lab';
 import FileList from "components/FileList"
 import MainCard from "components/MainCard";
 import * as HttpUtils from "utils/HttpUtils";
@@ -27,6 +28,7 @@ import * as ComboData from "utils/ComboData";
 const LoadingComponent = Loadable(React.lazy(() => import('../../extra-pages/LoadingComponent')));
 const UserInformationCard = Loadable(React.lazy(() => import('./UserInformationCard_Individual')));
 const UserInformationPubCard = Loadable(React.lazy(() => import('./UserInformationCard_Individual_Pub')));
+const LoginGrid = Loadable(React.lazy(() => import('./LoginGrid')));
 
 import {
     isGLDLoggedIn,
@@ -42,6 +44,7 @@ const UserMaintainPage_Individual = () => {
     const navigate = useNavigate();
     const [formData, setFormData] = React.useState({})
     const [isLoading, setLoding] = React.useState(true);
+    const [selectedTab, setSelectedTab] = React.useState("1");
 
     React.useEffect(() => {
         if (isORGLoggedIn()){
@@ -51,6 +54,10 @@ const UserMaintainPage_Individual = () => {
         }
     }, []);
 
+    const handleChange = (event, newValue) => {
+        setSelectedTab(newValue);
+    }
+
     const loadData = () => {
         setLoding(true);
         if (isGLDLoggedIn()){
@@ -173,15 +180,26 @@ const UserMaintainPage_Individual = () => {
                         {isGLDLoggedIn()?
                             <Grid item xs={12} md={12} lg={12}>
                                 <MainCard elevation={0} border={false} content={false} sx={{maxWidth: '100%', mr:2, width: "-webkit-fill-available"}}>
-                                    <Typography variant="h4" sx={{ mt: 4, ml: 2, mb: 2, mr: 2, borderBottom: "1px solid black" }}>
-                                        Files
-                                    </Typography>
-                                    <Grid item xs={12} sm={12} md={12} lg={12} sx={{maxWidth: '100%'}}>
-                                        <FileList
-                                            refId={params.id}
-                                            refType={"identification"}
-                                        />
-                                    </Grid>
+                                    <TabContext value={selectedTab}>
+                                        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+                                            <TabList  variant="scrollable" onChange={handleChange} aria-label="lab API tabs example">
+                                                <Tab label="Files" value="1" />
+                                                <Tab label="Login" value="2" />
+                                            </TabList>
+                                        </Box>
+                                        <TabPanel value="1">
+                                            <FileList
+                                                refId={params.id}
+                                                refType={"identification"}
+                                            />
+                                        </TabPanel>
+                                        <TabPanel value="2">
+                                            <LoginGrid
+                                                // refId={params.id}
+                                                // row={}
+                                            />
+                                        </TabPanel>
+                                    </TabContext>
                                 </MainCard>
                                 <br />
                             </Grid>