From 401cb1b1265e560323dad872550b423d554a9d50 Mon Sep 17 00:00:00 2001
From: Ganning Xu <ganningxu@gmail.com>
Date: Thu, 15 Jun 2023 09:55:04 -0400
Subject: [PATCH 01/16] added basic information pulling for tickets

---
 src/App.js                    |  4 +-
 src/contexts/ServerContext.js | 36 ++++++++++++++++-
 src/views/Ticket.js           | 75 +++++++++++++++++++++++++++++++++++
 src/views/index.js            |  3 +-
 4 files changed, 115 insertions(+), 3 deletions(-)
 create mode 100644 src/views/Ticket.js

diff --git a/src/App.js b/src/App.js
index 5c85499b..ac60f74b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { LocationProvider, Router } from '@reach/router';
 import { Layout, Footer } from './components';
-import { EditGroup, EditUser, Group, Home, NotFound, Landing, ResourceListView, ResourceTreeView, Server, SpecificQuery, User, Zone } from './views';
+import { EditGroup, EditUser, Group, Home, NotFound, Landing, ResourceListView, ResourceTreeView, Server, SpecificQuery, User, Zone, Ticket} from './views';
 import { CheckProvider, EnvironmentProvider, ServerProvider } from './contexts';
 import './App.css';
 
@@ -27,6 +27,8 @@ class App extends Component {
                       <SpecificQuery path='/specific-query' />
                       <Zone path='/zones' />
                       <Landing path="/" />
+                      <Ticket path='/tickets' />
+                      
                       <NotFound default />
                     </Router>
                   </Layout>
diff --git a/src/contexts/ServerContext.js b/src/contexts/ServerContext.js
index 4603e995..4207a3ee 100644
--- a/src/contexts/ServerContext.js
+++ b/src/contexts/ServerContext.js
@@ -27,6 +27,9 @@ export const ServerProvider = ({ children }) => {
     const [userContext, setUserContext] = useState(initialState);
     const [userTotal, setUserTotal] = useState(0);
     const [isLoadingUserContext, setIsLoadingUserContext] = useState(false);
+    const [ticketContext, setTicketContext] = useState(initialState);
+    const [ticketTotal, setTicketTotal] = useState(0);
+    const [isLoadingTicketContext, setIsLoadingTicketContext] = useState(false);
     const [groupContext, setGroupContext] = useState(initialState);
     const [groupTotal, setGroupTotal] = useState(0);
     const [isLoadingGroupContext, setIsLoadingGroupContext] = useState(false);
@@ -73,6 +76,36 @@ export const ServerProvider = ({ children }) => {
         });
     }
 
+    const loadTickets = (offset, limit, order, orderBy) => {
+        setIsLoadingTicketContext(true);
+        let _query = "SELECT TICKET_TYPE, TICKET_USER_ID, TICKET_STRING, TICKET_OBJECT_TYPE"
+
+        _query = queryGenerator(_query, order, orderBy);
+        return axios({
+            method: 'GET',
+            url: `${restApiLocation}/query`,
+            headers: {
+                'Authorization': localStorage.getItem('zmt-token')
+            },
+            params: {
+                query: _query,
+                limit: limit,
+                offset: offset,
+                type: 'general',
+                'case-sensitive': 0
+            }
+        }).then((res) => {
+            setTicketTotal(res.data.total)
+            setTicketContext(res.data);
+            setIsLoadingTicketContext(false);
+        }).catch(() => {
+            setTicketContext(undefined);
+            setIsLoadingTicketContext(false);
+        });
+
+
+    }
+
     // iterate through group results and load user counts
     const loadGroupUserCounts = async (inputArray, offset, limit, order, orderBy) => {
         let groupUserCountPromises = inputArray._embedded.map(group => axios({
@@ -435,9 +468,10 @@ export const ServerProvider = ({ children }) => {
         <ServerContext.Provider value={{
             zoneContext, localZoneName, zones, loadZones, loadZoneReport, filteredServers, loadCurrServers,
             userTotal, userContext, loadUsers,
+            ticketTotal, ticketContext, loadTickets,
             groupTotal, groupContext, loadGroups,
             rescTotal, rescAll, rescContext, rescTypes, rescPanelStatus, updatingRescPanelStatus, loadResources,
-            isLoadingGroupContext, isLoadingRescContext, isLoadingUserContext, isLoadingZoneContext, isLoadingZones,
+            isLoadingGroupContext, isLoadingRescContext, isLoadingUserContext, isLoadingZoneContext, isLoadingZones, isLoadingTicketContext,
             serverVersions, validServerHosts, irodsVersionComparator,
             specificQueryContext, isLoadingSpecificQueryContext, specificQueryTotal, loadSpecificQueries,
             loadData
diff --git a/src/views/Ticket.js b/src/views/Ticket.js
new file mode 100644
index 00000000..81e1c8a0
--- /dev/null
+++ b/src/views/Ticket.js
@@ -0,0 +1,75 @@
+import React, { Fragment, useEffect } from 'react';
+import { navigate } from '@reach/router';
+// import axios from 'axios';
+import { useServer } from '../contexts';
+// import { makeStyles, StylesProvider, Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, LinearProgress, TextField, Typography, Input, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TablePagination, TableSortLabel, Select, Paper } from '@material-ui/core';
+// import SaveIcon from '@material-ui/icons/Save';
+// import CloseIcon from '@material-ui/icons/Close';
+// import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab';
+
+
+
+export const Ticket = () => {
+    if (!localStorage.getItem('zmt-token')) navigate('/');
+    // const location = useLocation()
+    // const params = new URLSearchParams(location.search)
+    // const { restApiLocation } = useEnvironment();
+    // const auth = localStorage.getItem('zmt-token');
+    // const userTypes = ["rodsuser", "rodsadmin", "groupadmin"];
+    // const [currPage, setCurrPage] = useState(1);
+    // const [perPage, setPerPage] = useState(10);
+    // const [filterUsername, setFilterName] = useState(params.get('filter') ? decodeURIComponent(params.get('filter')) : '');
+    const { loadTickets, ticketContext } = useServer();
+    // const [order, setOrder] = useState("asc");
+    // const [orderBy, setOrderBy] = useState("USER_NAME");
+
+  
+    const perPage = 10;
+    const currPage = 1;
+    const order = "asc";
+    const orderBy = "USER_NAME";
+    useEffect(() => {
+        // loadUsers(perPage * (currPage - 1), perPage, filterUsername, order, orderBy)
+      
+
+        loadTickets(perPage * (currPage - 1), perPage, order, orderBy)
+        console.log("ticketContext: ", ticketContext)
+        
+    }, [currPage, perPage, order, orderBy])
+    console.log("ticketContext: ", ticketContext)
+    return (
+      <Fragment>
+        {/* {ticketContext ? (
+            {ticketContext._embedded.map((ticket, index) => {
+                return (
+                    <div key={index}>
+                        <h1>{ticket[0]}</h1>
+                    </div>
+                )
+            })}
+        ) : (
+            <div>
+                <h1>no tickets</h1>
+            </div>
+        )
+        } */}
+
+        {ticketContext === undefined ? <div>Cannot load ticket data. Please check your iRODS Client REST API endpoint connection.</div> :
+            <Fragment>
+                {ticketContext._embedded.map((ticket, index) => {
+                    return (
+                        <div key={index}>
+                            <h1>{ticket[0]}</h1>
+                        </div>
+                    )
+
+                }
+                )}
+                
+                </Fragment>
+        }
+
+
+      </Fragment>
+    );
+}
\ No newline at end of file
diff --git a/src/views/index.js b/src/views/index.js
index db73ffd4..664ad504 100644
--- a/src/views/index.js
+++ b/src/views/index.js
@@ -9,4 +9,5 @@ export * from "./Server";
 export * from "./User";
 export * from "./resources";
 export * from "./Zone";
-export * from "./SpecificQuery"
\ No newline at end of file
+export * from "./SpecificQuery"
+export * from "./Ticket"
\ No newline at end of file

From 27cde5143b216e603631e88da4e0d8d81e5b25f7 Mon Sep 17 00:00:00 2001
From: Ganning Xu <ganningxu@gmail.com>
Date: Thu, 15 Jun 2023 11:21:25 -0400
Subject: [PATCH 02/16] added ticket table but without filtering yet

---
 src/contexts/ServerContext.js |   2 +-
 src/views/Ticket.js           | 119 ++++++++++++++++++++++++++--------
 2 files changed, 93 insertions(+), 28 deletions(-)

diff --git a/src/contexts/ServerContext.js b/src/contexts/ServerContext.js
index 4207a3ee..181f72e2 100644
--- a/src/contexts/ServerContext.js
+++ b/src/contexts/ServerContext.js
@@ -78,7 +78,7 @@ export const ServerProvider = ({ children }) => {
 
     const loadTickets = (offset, limit, order, orderBy) => {
         setIsLoadingTicketContext(true);
-        let _query = "SELECT TICKET_TYPE, TICKET_USER_ID, TICKET_STRING, TICKET_OBJECT_TYPE"
+        let _query = "SELECT TICKET_OWNER_NAME, TICKET_TYPE, TICKET_STRING, TICKET_OBJECT_TYPE, TICKET_CREATE_TIME, TICKET_MODIFY_TIME, TICKET_EXPIRY"
 
         _query = queryGenerator(_query, order, orderBy);
         return axios({
diff --git a/src/views/Ticket.js b/src/views/Ticket.js
index 81e1c8a0..ce70880a 100644
--- a/src/views/Ticket.js
+++ b/src/views/Ticket.js
@@ -1,12 +1,53 @@
+/*eslint no-unused-vars: "error"*/
+
 import React, { Fragment, useEffect } from 'react';
 import { navigate } from '@reach/router';
 // import axios from 'axios';
 import { useServer } from '../contexts';
 // import { makeStyles, StylesProvider, Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, LinearProgress, TextField, Typography, Input, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TablePagination, TableSortLabel, Select, Paper } from '@material-ui/core';
+import { makeStyles, LinearProgress, TableContainer, Paper, Table, TableHead, StylesProvider, TableRow, TableCell, TableBody } from '@material-ui/core';
 // import SaveIcon from '@material-ui/icons/Save';
 // import CloseIcon from '@material-ui/icons/Close';
 // import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab';
 
+const useStyles = makeStyles((theme) => ({
+    tableContainer: {
+        marginTop: 20
+    },
+    errorMsg: {
+        color: 'red'
+    },
+    link_button: {
+        textDecoration: 'none'
+    },
+    pagination: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    filterGroup: {
+        display: 'flex',
+        flexDirection: 'row',
+        margin: theme.spacing(1),
+        justifyContent: 'center'
+    },
+    filter: {
+        marginLeft: 30,
+        width: 300
+    },
+    add_user_name: {
+        width: 200
+    },
+    add_button: {
+        marginLeft: 30
+    },
+    fontInherit: {
+        font: 'inherit'
+    },
+    table_cell: {
+        wordWrap: 'break-word'
+    }
+}));
 
 
 export const Ticket = () => {
@@ -19,7 +60,9 @@ export const Ticket = () => {
     // const [currPage, setCurrPage] = useState(1);
     // const [perPage, setPerPage] = useState(10);
     // const [filterUsername, setFilterName] = useState(params.get('filter') ? decodeURIComponent(params.get('filter')) : '');
-    const { loadTickets, ticketContext } = useServer();
+    const { isLoadingUserContext, loadTickets, ticketContext } = useServer();
+    const classes = useStyles();
+    // const [filterTicket, setFilterTicket] = useState(params.get('filter') ? decodeURIComponent(params.get('filter')) : '');
     // const [order, setOrder] = useState("asc");
     // const [orderBy, setOrderBy] = useState("USER_NAME");
 
@@ -29,7 +72,6 @@ export const Ticket = () => {
     const order = "asc";
     const orderBy = "USER_NAME";
     useEffect(() => {
-        // loadUsers(perPage * (currPage - 1), perPage, filterUsername, order, orderBy)
       
 
         loadTickets(perPage * (currPage - 1), perPage, order, orderBy)
@@ -39,36 +81,59 @@ export const Ticket = () => {
     console.log("ticketContext: ", ticketContext)
     return (
       <Fragment>
-        {/* {ticketContext ? (
-            {ticketContext._embedded.map((ticket, index) => {
-                return (
-                    <div key={index}>
-                        <h1>{ticket[0]}</h1>
-                    </div>
-                )
-            })}
-        ) : (
-            <div>
-                <h1>no tickets</h1>
-            </div>
-        )
-        } */}
+        {isLoadingUserContext ? <LinearProgress /> : <div className="table_view_spinner_holder" />}
 
         {ticketContext === undefined ? <div>Cannot load ticket data. Please check your iRODS Client REST API endpoint connection.</div> :
             <Fragment>
-                {ticketContext._embedded.map((ticket, index) => {
-                    return (
-                        <div key={index}>
-                            <h1>{ticket[0]}</h1>
-                        </div>
-                    )
-
-                }
-                )}
-                
-                </Fragment>
+                Total Entries: {ticketContext.total}
+            </Fragment>
         }
 
+        {/* <TextField
+            className={classes.filter}
+            id="filter-term"
+            label="Filter"
+            placeholder="Filter by User Name"
+            onChange={handleFilterChange}
+        /> */}
+
+        <TableContainer className={classes.tableContainer} component={Paper}>
+            <Table style={{ width: '100%', tableLayout: 'fixed' }} aria-label="User table">
+                <TableHead>
+                    <StylesProvider injectFirst>
+                        <TableRow>
+                            <TableCell className={classes.table_cell} style={{ width: '40%' }}>Created By</TableCell>
+                            <TableCell className={classes.table_cell} style={{ width: '40%' }}>Type</TableCell>
+                            <TableCell className={classes.table_cell} style={{ width: '20%' }}>Ticket String</TableCell>
+                            <TableCell className={classes.table_cell} style={{ width: '20%' }}>Create Time</TableCell>
+                            <TableCell className={classes.table_cell} style={{ width: '20%' }}>Modify Time</TableCell>
+                            <TableCell className={classes.table_cell} style={{ width: '20%' }}>Expire Time</TableCell>
+                        </TableRow>
+                    </StylesProvider>
+                </TableHead>
+                <TableBody>
+                    {
+                        ticketContext._embedded.map((ticket, index) => {
+
+                            return (
+                                <TableRow key={index}>
+                                    <TableCell className={classes.table_cell} style={{ width: '40%' }}>{ticket[0]}</TableCell>
+                                    <TableCell className={classes.table_cell} style={{ width: '40%' }}>{ticket[1]}</TableCell>
+                                    <TableCell className={classes.table_cell} style={{ width: '20%' }}>{ticket[2]}</TableCell>
+                                    <TableCell className={classes.table_cell} style={{ width: '20%' }}>{new Date(parseInt(ticket[4])).toLocaleDateString()}</TableCell>
+                                    <TableCell className={classes.table_cell} style={{ width: '20%' }}>{new Date(parseInt(ticket[5])).toLocaleDateString()}</TableCell>
+                                    <TableCell className={classes.table_cell} style={{ width: '20%' }}>{ticket[6] ? new Date(parseInt(ticket[6])).toLocaleDateString(): ""}</TableCell>
+                                </TableRow>
+                            )
+                        })
+                    }
+
+                </TableBody>
+            </Table>
+
+        </TableContainer>
+
+
 
       </Fragment>
     );

From e545054a1e0256715ab55c284048871928a34a5a Mon Sep 17 00:00:00 2001
From: Ganning Xu <ganningxu@gmail.com>
Date: Thu, 15 Jun 2023 11:25:58 -0400
Subject: [PATCH 03/16] added tickets tab to layout sidebar

---
 src/components/layout/layout.js | 7 ++++++-
 src/views/Ticket.js             | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/layout/layout.js b/src/components/layout/layout.js
index aae16c86..a204be27 100644
--- a/src/components/layout/layout.js
+++ b/src/components/layout/layout.js
@@ -72,7 +72,7 @@ export const Layout = ({ children }) => {
     const { localZoneName, zones } = useServer();
     const AppBarLogo = require(`../../img/${environment.appbarLogo}`).default;
     const [mobileOpen, setMobileOpen] = useState(false);
-    const { userTotal, groupTotal, rescTotal, zoneContext, specificQueryTotal } = useServer();
+    const { userTotal, groupTotal, rescTotal, zoneContext, specificQueryTotal, ticketTotal } = useServer();
 
     const logoutHandler = () => {
         localStorage.removeItem('zmt-token');
@@ -108,6 +108,11 @@ export const Layout = ({ children }) => {
                 <MenuItem button selected={pathname === 'specific-query'} component={Link} to="/specific-query" key='specific-query'>
                     <ListItemText>Specific Queries ({specificQueryTotal})</ListItemText>
                 </MenuItem>
+                <MenuItem button selected={pathname === 'tickets'} component={Link} to="/tickets" key='ticket'>
+                    <ListItemText>Tickets ({ticketTotal})</ListItemText>
+                </MenuItem>
+
+
             </List>
             <Divider />
             <List>
diff --git a/src/views/Ticket.js b/src/views/Ticket.js
index ce70880a..ccdcb385 100644
--- a/src/views/Ticket.js
+++ b/src/views/Ticket.js
@@ -104,7 +104,7 @@ export const Ticket = () => {
                         <TableRow>
                             <TableCell className={classes.table_cell} style={{ width: '40%' }}>Created By</TableCell>
                             <TableCell className={classes.table_cell} style={{ width: '40%' }}>Type</TableCell>
-                            <TableCell className={classes.table_cell} style={{ width: '20%' }}>Ticket String</TableCell>
+                            <TableCell className={classes.table_cell} style={{ width: '20%' }}>Ticket ID</TableCell>
                             <TableCell className={classes.table_cell} style={{ width: '20%' }}>Create Time</TableCell>
                             <TableCell className={classes.table_cell} style={{ width: '20%' }}>Modify Time</TableCell>
                             <TableCell className={classes.table_cell} style={{ width: '20%' }}>Expire Time</TableCell>

From 815dd0955c75368da191e24ce093c8bdf8991005 Mon Sep 17 00:00:00 2001
From: Ganning Xu <ganningxu@gmail.com>
Date: Thu, 15 Jun 2023 14:14:33 -0400
Subject: [PATCH 04/16] added sorting for each column

---
 src/views/Ticket.js | 108 +++++++++++++++++++++++++++++++++++++-------
 1 file changed, 91 insertions(+), 17 deletions(-)

diff --git a/src/views/Ticket.js b/src/views/Ticket.js
index ccdcb385..5a6a6ef7 100644
--- a/src/views/Ticket.js
+++ b/src/views/Ticket.js
@@ -1,11 +1,11 @@
 /*eslint no-unused-vars: "error"*/
 
-import React, { Fragment, useEffect } from 'react';
+import React, { useState, Fragment, useEffect } from 'react';
 import { navigate } from '@reach/router';
 // import axios from 'axios';
 import { useServer } from '../contexts';
 // import { makeStyles, StylesProvider, Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, LinearProgress, TextField, Typography, Input, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TablePagination, TableSortLabel, Select, Paper } from '@material-ui/core';
-import { makeStyles, LinearProgress, TableContainer, Paper, Table, TableHead, StylesProvider, TableRow, TableCell, TableBody } from '@material-ui/core';
+import { makeStyles, LinearProgress, TableContainer, Paper, Table, TableHead, StylesProvider, TableRow, TableCell, TableBody, TableSortLabel } from '@material-ui/core';
 // import SaveIcon from '@material-ui/icons/Save';
 // import CloseIcon from '@material-ui/icons/Close';
 // import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab';
@@ -63,22 +63,31 @@ export const Ticket = () => {
     const { isLoadingUserContext, loadTickets, ticketContext } = useServer();
     const classes = useStyles();
     // const [filterTicket, setFilterTicket] = useState(params.get('filter') ? decodeURIComponent(params.get('filter')) : '');
-    // const [order, setOrder] = useState("asc");
-    // const [orderBy, setOrderBy] = useState("USER_NAME");
-
+    const [order, setOrder] = useState("asc");
+    const [orderBy, setOrderBy] = useState("TICKET_OWNER_NAME");
+ // TICKET_OWNER_NAME, TICKET_TYPE, TICKET_STRING, TICKET_OBJECT_TYPE, TICKET_CREATE_TIME, TICKET_MODIFY_TIME, TICKET_EXPIRY
   
     const perPage = 10;
     const currPage = 1;
-    const order = "asc";
-    const orderBy = "USER_NAME";
-    useEffect(() => {
-      
 
+    useEffect(() => {
         loadTickets(perPage * (currPage - 1), perPage, order, orderBy)
         console.log("ticketContext: ", ticketContext)
-        
     }, [currPage, perPage, order, orderBy])
-    console.log("ticketContext: ", ticketContext)
+
+    const handleSort = (props) => {
+        const isAsc = orderBy === props && order === 'desc';
+        setOrder(isAsc ? 'asc' : 'desc');
+        setOrderBy(props);
+    }
+
+    const handleFilterChange = (e) => {
+        setFilterName(e.target.value)
+        // update the path without reload, filter is also encoded 
+        if (e.target.value === '') window.history.replaceState('', '', '/users')
+        else window.history.replaceState('', '', `/users?filter=${encodeURIComponent(e.target.value)}`)
+    }
+
     return (
       <Fragment>
         {isLoadingUserContext ? <LinearProgress /> : <div className="table_view_spinner_holder" />}
@@ -102,12 +111,77 @@ export const Ticket = () => {
                 <TableHead>
                     <StylesProvider injectFirst>
                         <TableRow>
-                            <TableCell className={classes.table_cell} style={{ width: '40%' }}>Created By</TableCell>
-                            <TableCell className={classes.table_cell} style={{ width: '40%' }}>Type</TableCell>
-                            <TableCell className={classes.table_cell} style={{ width: '20%' }}>Ticket ID</TableCell>
-                            <TableCell className={classes.table_cell} style={{ width: '20%' }}>Create Time</TableCell>
-                            <TableCell className={classes.table_cell} style={{ width: '20%' }}>Modify Time</TableCell>
-                            <TableCell className={classes.table_cell} style={{ width: '20%' }}>Expire Time</TableCell>
+                            <TableCell className={classes.table_cell} style={{ width: '20%' }}>
+                                <TableSortLabel
+                                    active={orderBy === "TICKET_OWNER_NAME"}
+                                    direction={orderBy === "TICKET_OWNER_NAME" ? order : "asc"}
+                                    onClick={() => {
+                                        handleSort("TICKET_OWNER_NAME");
+                                    }}
+                                >Created By
+                                </TableSortLabel>
+                            </TableCell>
+
+                            <TableCell className={classes.table_cell} style={{ width: '20%' }}>
+                                <TableSortLabel
+                                    active={orderBy === "TICKET_TYPE"}
+                                    direction={orderBy === "TICKET_TYPE" ? order : "asc"}
+                                    onClick={() => {
+                                        handleSort("TICKET_TYPE");
+                                    }}
+                                >Type
+                                </TableSortLabel>
+                            </TableCell>
+
+                            <TableCell className={classes.table_cell} style={{ width: '20%' }}>
+                                <TableSortLabel
+                                    active={orderBy === "TICKET_STRING"}
+                                    direction={orderBy === "TICKET_STRING" ? order : "asc"}
+                                    onClick={() => {
+                                        handleSort("TICKET_STRING");
+                                    }}
+                                >
+                                Ticket ID
+                                </TableSortLabel>
+                            </TableCell>
+
+                            <TableCell className={classes.table_cell} style={{ width: '20%' }}>
+                                <TableSortLabel
+                                    active={orderBy === "TICKET_CREATE_TIME"}
+                                    direction={orderBy === "TICKET_CREATE_TIME" ? order : "asc"}
+                                    onClick={() => {
+                                        handleSort("TICKET_CREATE_TIME");
+                                    }}
+                                >
+                                Create Time
+                                </TableSortLabel>
+                            </TableCell>
+
+
+                            <TableCell className={classes.table_cell} style={{ width: '20%' }}>
+                                <TableSortLabel
+                                    active={orderBy === "TICKET_MODIFY_TIME"}
+                                    direction={orderBy === "TICKET_MODIFY_TIME" ? order : "asc"}
+                                    onClick={() => {
+                                        handleSort("TICKET_MODIFY_TIME");
+                                    }}
+                                >
+                                Modify Time
+                                </TableSortLabel>
+                            </TableCell>
+
+
+                            <TableCell className={classes.table_cell} style={{ width: '20%' }}>
+                                <TableSortLabel
+                                    active={orderBy === "TICKET_EXPIRY"}
+                                    direction={orderBy === "TICKET_EXPIRY" ? order : "asc"}
+                                    onClick={() => {
+                                        handleSort("TICKET_EXPIRY");
+                                    }}
+                                >
+                                Expire Time
+                                </TableSortLabel>
+                            </TableCell>
                         </TableRow>
                     </StylesProvider>
                 </TableHead>

From 89aaaa92a4ba8dc58dd92f776cbd7210b8c37f06 Mon Sep 17 00:00:00 2001
From: Ganning Xu <ganningxu@gmail.com>
Date: Thu, 15 Jun 2023 14:40:56 -0400
Subject: [PATCH 05/16] added filtering for all columns in tickets

---
 src/views/Ticket.js | 52 +++++++++++++++++++++++++++++++++++----------
 1 file changed, 41 insertions(+), 11 deletions(-)

diff --git a/src/views/Ticket.js b/src/views/Ticket.js
index 5a6a6ef7..a20b772c 100644
--- a/src/views/Ticket.js
+++ b/src/views/Ticket.js
@@ -1,11 +1,11 @@
 /*eslint no-unused-vars: "error"*/
 
 import React, { useState, Fragment, useEffect } from 'react';
-import { navigate } from '@reach/router';
+import { navigate, useLocation } from '@reach/router';
 // import axios from 'axios';
 import { useServer } from '../contexts';
 // import { makeStyles, StylesProvider, Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, LinearProgress, TextField, Typography, Input, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TablePagination, TableSortLabel, Select, Paper } from '@material-ui/core';
-import { makeStyles, LinearProgress, TableContainer, Paper, Table, TableHead, StylesProvider, TableRow, TableCell, TableBody, TableSortLabel } from '@material-ui/core';
+import { makeStyles, LinearProgress, TableContainer, Paper, Table, TableHead, StylesProvider, TableRow, TableCell, TableBody, TextField, TableSortLabel } from '@material-ui/core';
 // import SaveIcon from '@material-ui/icons/Save';
 // import CloseIcon from '@material-ui/icons/Close';
 // import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab';
@@ -52,19 +52,21 @@ const useStyles = makeStyles((theme) => ({
 
 export const Ticket = () => {
     if (!localStorage.getItem('zmt-token')) navigate('/');
-    // const location = useLocation()
-    // const params = new URLSearchParams(location.search)
+    const location = useLocation()
+    const params = new URLSearchParams(location.search)
     // const { restApiLocation } = useEnvironment();
     // const auth = localStorage.getItem('zmt-token');
     // const userTypes = ["rodsuser", "rodsadmin", "groupadmin"];
     // const [currPage, setCurrPage] = useState(1);
     // const [perPage, setPerPage] = useState(10);
-    // const [filterUsername, setFilterName] = useState(params.get('filter') ? decodeURIComponent(params.get('filter')) : '');
+
     const { isLoadingUserContext, loadTickets, ticketContext } = useServer();
     const classes = useStyles();
-    // const [filterTicket, setFilterTicket] = useState(params.get('filter') ? decodeURIComponent(params.get('filter')) : '');
+    const [filterTicket, setFilterTicket] = useState(params.get('filter') ? decodeURIComponent(params.get('filter')) : '');
     const [order, setOrder] = useState("asc");
     const [orderBy, setOrderBy] = useState("TICKET_OWNER_NAME");
+    const [ticketsData, setTicketsData] = useState([]); // array of ticket information
+
  // TICKET_OWNER_NAME, TICKET_TYPE, TICKET_STRING, TICKET_OBJECT_TYPE, TICKET_CREATE_TIME, TICKET_MODIFY_TIME, TICKET_EXPIRY
   
     const perPage = 10;
@@ -75,6 +77,13 @@ export const Ticket = () => {
         console.log("ticketContext: ", ticketContext)
     }, [currPage, perPage, order, orderBy])
 
+    useEffect(() => {
+        if (ticketContext !== undefined) {
+            setTicketsData(ticketContext._embedded)
+        }
+    }, [ticketContext])
+
+
     const handleSort = (props) => {
         const isAsc = orderBy === props && order === 'desc';
         setOrder(isAsc ? 'asc' : 'desc');
@@ -82,14 +91,36 @@ export const Ticket = () => {
     }
 
     const handleFilterChange = (e) => {
-        setFilterName(e.target.value)
+        setFilterTicket(e.target.value)
+        console.log("filter: ", e.target.value)
         // update the path without reload, filter is also encoded 
-        if (e.target.value === '') window.history.replaceState('', '', '/users')
-        else window.history.replaceState('', '', `/users?filter=${encodeURIComponent(e.target.value)}`)
+        if (e.target.value === '') window.history.replaceState('', '', '/tickets')
+        else window.history.replaceState('', '', `/tickets?filter=${encodeURIComponent(e.target.value)}`)
+
+
     }
 
+    let filteredTickets = ticketsData.filter((ticket) => {
+        return ticket[0].includes(filterTicket.toLowerCase()) || 
+                ticket[1].includes(filterTicket.toLowerCase()) ||
+                ticket[2].includes(filterTicket.toLowerCase()) ||
+                ticket[3].includes(filterTicket.toLowerCase()) ||
+                ticket[4].includes(filterTicket.toLowerCase()) ||
+                ticket[5].includes(filterTicket.toLowerCase()) ||
+                ticket[6].includes(filterTicket.toLowerCase())
+                
+    })
+
     return (
       <Fragment>
+        <TextField
+            className={classes.filter}
+            id="filter-term"
+            label="Filter"
+            placeholder="Filter by User Name"
+            onChange={handleFilterChange}
+        />
+
         {isLoadingUserContext ? <LinearProgress /> : <div className="table_view_spinner_holder" />}
 
         {ticketContext === undefined ? <div>Cannot load ticket data. Please check your iRODS Client REST API endpoint connection.</div> :
@@ -187,8 +218,7 @@ export const Ticket = () => {
                 </TableHead>
                 <TableBody>
                     {
-                        ticketContext._embedded.map((ticket, index) => {
-
+                        filteredTickets.map((ticket, index) => {
                             return (
                                 <TableRow key={index}>
                                     <TableCell className={classes.table_cell} style={{ width: '40%' }}>{ticket[0]}</TableCell>

From a8bebe2cf1754208b16d2ab8bc20582966577249 Mon Sep 17 00:00:00 2001
From: Ganning Xu <ganningxu@gmail.com>
Date: Thu, 15 Jun 2023 14:46:54 -0400
Subject: [PATCH 06/16] added 'N/A' for tickets with no expire time

---
 src/views/Ticket.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/Ticket.js b/src/views/Ticket.js
index a20b772c..050b9ca7 100644
--- a/src/views/Ticket.js
+++ b/src/views/Ticket.js
@@ -108,7 +108,7 @@ export const Ticket = () => {
                 ticket[4].includes(filterTicket.toLowerCase()) ||
                 ticket[5].includes(filterTicket.toLowerCase()) ||
                 ticket[6].includes(filterTicket.toLowerCase())
-                
+
     })
 
     return (
@@ -226,7 +226,7 @@ export const Ticket = () => {
                                     <TableCell className={classes.table_cell} style={{ width: '20%' }}>{ticket[2]}</TableCell>
                                     <TableCell className={classes.table_cell} style={{ width: '20%' }}>{new Date(parseInt(ticket[4])).toLocaleDateString()}</TableCell>
                                     <TableCell className={classes.table_cell} style={{ width: '20%' }}>{new Date(parseInt(ticket[5])).toLocaleDateString()}</TableCell>
-                                    <TableCell className={classes.table_cell} style={{ width: '20%' }}>{ticket[6] ? new Date(parseInt(ticket[6])).toLocaleDateString(): ""}</TableCell>
+                                    <TableCell className={classes.table_cell} style={{ width: '20%' }}>{ticket[6] ? new Date(parseInt(ticket[6])).toLocaleDateString(): "N/A"}</TableCell>
                                 </TableRow>
                             )
                         })

From f4d10acabacb6aefbff618da481978ed341dd620 Mon Sep 17 00:00:00 2001
From: Ganning Xu <ganningxu@gmail.com>
Date: Thu, 15 Jun 2023 22:49:25 -0400
Subject: [PATCH 07/16] added support for pagination on tickets table

---
 src/views/Ticket.js | 56 ++++++++++++++++++++++++---------------------
 1 file changed, 30 insertions(+), 26 deletions(-)

diff --git a/src/views/Ticket.js b/src/views/Ticket.js
index 050b9ca7..13c2cd0d 100644
--- a/src/views/Ticket.js
+++ b/src/views/Ticket.js
@@ -5,7 +5,7 @@ import { navigate, useLocation } from '@reach/router';
 // import axios from 'axios';
 import { useServer } from '../contexts';
 // import { makeStyles, StylesProvider, Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, LinearProgress, TextField, Typography, Input, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TablePagination, TableSortLabel, Select, Paper } from '@material-ui/core';
-import { makeStyles, LinearProgress, TableContainer, Paper, Table, TableHead, StylesProvider, TableRow, TableCell, TableBody, TextField, TableSortLabel } from '@material-ui/core';
+import { makeStyles, LinearProgress, TableContainer, Paper, Table, TableHead, StylesProvider, TableRow, TableCell, TableBody, TextField, TablePagination, TableSortLabel } from '@material-ui/core';
 // import SaveIcon from '@material-ui/icons/Save';
 // import CloseIcon from '@material-ui/icons/Close';
 // import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab';
@@ -46,6 +46,9 @@ const useStyles = makeStyles((theme) => ({
     },
     table_cell: {
         wordWrap: 'break-word'
+    },
+    header_row: {
+        fontWeight: 'bold'
     }
 }));
 
@@ -57,8 +60,8 @@ export const Ticket = () => {
     // const { restApiLocation } = useEnvironment();
     // const auth = localStorage.getItem('zmt-token');
     // const userTypes = ["rodsuser", "rodsadmin", "groupadmin"];
-    // const [currPage, setCurrPage] = useState(1);
-    // const [perPage, setPerPage] = useState(10);
+    const [currPage, setCurrPage] = useState(1);
+    const [perPage, setPerPage] = useState(10);
 
     const { isLoadingUserContext, loadTickets, ticketContext } = useServer();
     const classes = useStyles();
@@ -69,12 +72,10 @@ export const Ticket = () => {
 
  // TICKET_OWNER_NAME, TICKET_TYPE, TICKET_STRING, TICKET_OBJECT_TYPE, TICKET_CREATE_TIME, TICKET_MODIFY_TIME, TICKET_EXPIRY
   
-    const perPage = 10;
-    const currPage = 1;
 
     useEffect(() => {
         loadTickets(perPage * (currPage - 1), perPage, order, orderBy)
-        console.log("ticketContext: ", ticketContext)
+        
     }, [currPage, perPage, order, orderBy])
 
     useEffect(() => {
@@ -92,12 +93,13 @@ export const Ticket = () => {
 
     const handleFilterChange = (e) => {
         setFilterTicket(e.target.value)
-        console.log("filter: ", e.target.value)
         // update the path without reload, filter is also encoded 
         if (e.target.value === '') window.history.replaceState('', '', '/tickets')
         else window.history.replaceState('', '', `/tickets?filter=${encodeURIComponent(e.target.value)}`)
+    }
 
-
+    const handlePageChange = (event, value) => {
+        setCurrPage(value + 1);
     }
 
     let filteredTickets = ticketsData.filter((ticket) => {
@@ -110,23 +112,23 @@ export const Ticket = () => {
                 ticket[6].includes(filterTicket.toLowerCase())
 
     })
-
+    console.log("ticketContext: ", ticketContext)
     return (
       <Fragment>
-        <TextField
-            className={classes.filter}
-            id="filter-term"
-            label="Filter"
-            placeholder="Filter by User Name"
-            onChange={handleFilterChange}
-        />
+
+        <div className={classes.filterGroup}>
+            <TextField
+                className={classes.filter}
+                id="filter-term"
+                label="Filter"
+                placeholder="Filter by User Name"
+                onChange={handleFilterChange}
+            />
+        </div>
 
         {isLoadingUserContext ? <LinearProgress /> : <div className="table_view_spinner_holder" />}
 
-        {ticketContext === undefined ? <div>Cannot load ticket data. Please check your iRODS Client REST API endpoint connection.</div> :
-            <Fragment>
-                Total Entries: {ticketContext.total}
-            </Fragment>
+        {ticketContext === undefined ?? <div>Cannot load ticket data. Please check your iRODS Client REST API endpoint connection.</div>
         }
 
         {/* <TextField
@@ -136,13 +138,15 @@ export const Ticket = () => {
             placeholder="Filter by User Name"
             onChange={handleFilterChange}
         /> */}
+        <TablePagination component="div" className={classes.pagination} page={currPage - 1} count={parseInt(ticketContext.total)} rowsPerPage={perPage} onChangePage={handlePageChange} onChangeRowsPerPage={(e) => { setPerPage(e.target.value); setCurrPage(1) }} />
+
 
         <TableContainer className={classes.tableContainer} component={Paper}>
             <Table style={{ width: '100%', tableLayout: 'fixed' }} aria-label="User table">
                 <TableHead>
                     <StylesProvider injectFirst>
                         <TableRow>
-                            <TableCell className={classes.table_cell} style={{ width: '20%' }}>
+                            <TableCell className={classes.table_cell, classes.header_row} style={{ width: '20%' }}>
                                 <TableSortLabel
                                     active={orderBy === "TICKET_OWNER_NAME"}
                                     direction={orderBy === "TICKET_OWNER_NAME" ? order : "asc"}
@@ -153,7 +157,7 @@ export const Ticket = () => {
                                 </TableSortLabel>
                             </TableCell>
 
-                            <TableCell className={classes.table_cell} style={{ width: '20%' }}>
+                            <TableCell className={classes.table_cell, classes.header_row} style={{ width: '20%' }}>
                                 <TableSortLabel
                                     active={orderBy === "TICKET_TYPE"}
                                     direction={orderBy === "TICKET_TYPE" ? order : "asc"}
@@ -164,7 +168,7 @@ export const Ticket = () => {
                                 </TableSortLabel>
                             </TableCell>
 
-                            <TableCell className={classes.table_cell} style={{ width: '20%' }}>
+                            <TableCell className={classes.table_cell, classes.header_row} style={{ width: '20%' }}>
                                 <TableSortLabel
                                     active={orderBy === "TICKET_STRING"}
                                     direction={orderBy === "TICKET_STRING" ? order : "asc"}
@@ -176,7 +180,7 @@ export const Ticket = () => {
                                 </TableSortLabel>
                             </TableCell>
 
-                            <TableCell className={classes.table_cell} style={{ width: '20%' }}>
+                            <TableCell className={classes.table_cell, classes.header_row} style={{ width: '20%' }}>
                                 <TableSortLabel
                                     active={orderBy === "TICKET_CREATE_TIME"}
                                     direction={orderBy === "TICKET_CREATE_TIME" ? order : "asc"}
@@ -189,7 +193,7 @@ export const Ticket = () => {
                             </TableCell>
 
 
-                            <TableCell className={classes.table_cell} style={{ width: '20%' }}>
+                            <TableCell className={classes.table_cell, classes.header_row} style={{ width: '20%' }}>
                                 <TableSortLabel
                                     active={orderBy === "TICKET_MODIFY_TIME"}
                                     direction={orderBy === "TICKET_MODIFY_TIME" ? order : "asc"}
@@ -202,7 +206,7 @@ export const Ticket = () => {
                             </TableCell>
 
 
-                            <TableCell className={classes.table_cell} style={{ width: '20%' }}>
+                            <TableCell className={classes.table_cell, classes.header_row} style={{ width: '20%' }}>
                                 <TableSortLabel
                                     active={orderBy === "TICKET_EXPIRY"}
                                     direction={orderBy === "TICKET_EXPIRY" ? order : "asc"}

From 3904dab8c15d2bd61a3d1c12a0399f8299557a55 Mon Sep 17 00:00:00 2001
From: Ganning Xu <ganningxu@gmail.com>
Date: Fri, 16 Jun 2023 09:02:39 -0400
Subject: [PATCH 08/16] fixed unix timestamp date conversion

---
 src/views/Ticket.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/views/Ticket.js b/src/views/Ticket.js
index 13c2cd0d..2b4baeb3 100644
--- a/src/views/Ticket.js
+++ b/src/views/Ticket.js
@@ -223,14 +223,18 @@ export const Ticket = () => {
                 <TableBody>
                     {
                         filteredTickets.map((ticket, index) => {
+                            let d1 = new Date(parseInt(ticket[4] * 1000))
+                            let d2 = new Date(parseInt(ticket[5] * 1000))
+                            let temp = new Date(parseInt(ticket[6] * 1000)) 
+                            let d3 = ticket[6] ? temp.toLocaleDateString() + ", " + temp.toLocaleTimeString() : "N/A"
                             return (
                                 <TableRow key={index}>
                                     <TableCell className={classes.table_cell} style={{ width: '40%' }}>{ticket[0]}</TableCell>
                                     <TableCell className={classes.table_cell} style={{ width: '40%' }}>{ticket[1]}</TableCell>
                                     <TableCell className={classes.table_cell} style={{ width: '20%' }}>{ticket[2]}</TableCell>
-                                    <TableCell className={classes.table_cell} style={{ width: '20%' }}>{new Date(parseInt(ticket[4])).toLocaleDateString()}</TableCell>
-                                    <TableCell className={classes.table_cell} style={{ width: '20%' }}>{new Date(parseInt(ticket[5])).toLocaleDateString()}</TableCell>
-                                    <TableCell className={classes.table_cell} style={{ width: '20%' }}>{ticket[6] ? new Date(parseInt(ticket[6])).toLocaleDateString(): "N/A"}</TableCell>
+                                    <TableCell className={classes.table_cell} style={{ width: '20%' }}>{d1.toLocaleDateString()}, {d1.toLocaleTimeString()}</TableCell>
+                                    <TableCell className={classes.table_cell} style={{ width: '20%' }}>{d2.toLocaleDateString()}, {d2.toLocaleTimeString()}</TableCell>
+                                    <TableCell className={classes.table_cell} style={{ width: '20%' }}>{d3}</TableCell>
                                 </TableRow>
                             )
                         })

From 90c536dd5a178f50178c7a7c8193bd9a15bb94cc Mon Sep 17 00:00:00 2001
From: Ganning Xu <ganningxu@gmail.com>
Date: Fri, 16 Jun 2023 09:10:18 -0400
Subject: [PATCH 09/16] added base parameter to parseInt functions

---
 src/views/Ticket.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/views/Ticket.js b/src/views/Ticket.js
index 2b4baeb3..a328f686 100644
--- a/src/views/Ticket.js
+++ b/src/views/Ticket.js
@@ -223,9 +223,9 @@ export const Ticket = () => {
                 <TableBody>
                     {
                         filteredTickets.map((ticket, index) => {
-                            let d1 = new Date(parseInt(ticket[4] * 1000))
-                            let d2 = new Date(parseInt(ticket[5] * 1000))
-                            let temp = new Date(parseInt(ticket[6] * 1000)) 
+                            let d1 = new Date(parseInt(ticket[4] * 1000, 10))
+                            let d2 = new Date(parseInt(ticket[5] * 1000, 10))
+                            let temp = new Date(parseInt(ticket[6] * 1000, 10)) 
                             let d3 = ticket[6] ? temp.toLocaleDateString() + ", " + temp.toLocaleTimeString() : "N/A"
                             return (
                                 <TableRow key={index}>

From 626545fc97cd52c9ca65782146fc234194f7999e Mon Sep 17 00:00:00 2001
From: Ganning Xu <ganningxu@gmail.com>
Date: Fri, 16 Jun 2023 09:13:08 -0400
Subject: [PATCH 10/16] removed commented out code block

---
 src/views/Ticket.js | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/views/Ticket.js b/src/views/Ticket.js
index a328f686..2705967a 100644
--- a/src/views/Ticket.js
+++ b/src/views/Ticket.js
@@ -131,13 +131,7 @@ export const Ticket = () => {
         {ticketContext === undefined ?? <div>Cannot load ticket data. Please check your iRODS Client REST API endpoint connection.</div>
         }
 
-        {/* <TextField
-            className={classes.filter}
-            id="filter-term"
-            label="Filter"
-            placeholder="Filter by User Name"
-            onChange={handleFilterChange}
-        /> */}
+  
         <TablePagination component="div" className={classes.pagination} page={currPage - 1} count={parseInt(ticketContext.total)} rowsPerPage={perPage} onChangePage={handlePageChange} onChangeRowsPerPage={(e) => { setPerPage(e.target.value); setCurrPage(1) }} />
 
 

From e433ec277ba2482f5d61bd0fcbf36b93700b1422 Mon Sep 17 00:00:00 2001
From: Ganning Xu <ganningxu@gmail.com>
Date: Fri, 16 Jun 2023 12:22:09 -0400
Subject: [PATCH 11/16] added wording for if no modification

---
 src/views/Ticket.js | 29 +++++++++++++++++++----------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/views/Ticket.js b/src/views/Ticket.js
index 2705967a..3c6aa7e7 100644
--- a/src/views/Ticket.js
+++ b/src/views/Ticket.js
@@ -70,7 +70,7 @@ export const Ticket = () => {
     const [orderBy, setOrderBy] = useState("TICKET_OWNER_NAME");
     const [ticketsData, setTicketsData] = useState([]); // array of ticket information
 
- // TICKET_OWNER_NAME, TICKET_TYPE, TICKET_STRING, TICKET_OBJECT_TYPE, TICKET_CREATE_TIME, TICKET_MODIFY_TIME, TICKET_EXPIRY
+    // SELECT TICKET_OWNER_NAME, TICKET_TYPE, TICKET_STRING, TICKET_OBJECT_TYPE, TICKET_CREATE_TIME, TICKET_MODIFY_TIME, TICKET_EXPIRY
   
 
     useEffect(() => {
@@ -103,13 +103,13 @@ export const Ticket = () => {
     }
 
     let filteredTickets = ticketsData.filter((ticket) => {
-        return ticket[0].includes(filterTicket.toLowerCase()) || 
-                ticket[1].includes(filterTicket.toLowerCase()) ||
-                ticket[2].includes(filterTicket.toLowerCase()) ||
-                ticket[3].includes(filterTicket.toLowerCase()) ||
-                ticket[4].includes(filterTicket.toLowerCase()) ||
-                ticket[5].includes(filterTicket.toLowerCase()) ||
-                ticket[6].includes(filterTicket.toLowerCase())
+        return ticket[0].includes(filterTicket) || 
+                ticket[1].includes(filterTicket) ||
+                ticket[2].includes(filterTicket) ||
+                ticket[3].includes(filterTicket) ||
+                ticket[4].includes(filterTicket) ||
+                ticket[5].includes(filterTicket) ||
+                ticket[6].includes(filterTicket)
 
     })
     console.log("ticketContext: ", ticketContext)
@@ -123,6 +123,7 @@ export const Ticket = () => {
                 label="Filter"
                 placeholder="Filter by User Name"
                 onChange={handleFilterChange}
+                value={filterTicket}
             />
         </div>
 
@@ -215,10 +216,18 @@ export const Ticket = () => {
                     </StylesProvider>
                 </TableHead>
                 <TableBody>
+                    
                     {
                         filteredTickets.map((ticket, index) => {
                             let d1 = new Date(parseInt(ticket[4] * 1000, 10))
                             let d2 = new Date(parseInt(ticket[5] * 1000, 10))
+                            let show1 = d1.toLocaleDateString() + ",  " + d1.toLocaleTimeString()
+                            let show2 = d2.toLocaleDateString() + ", " + d2.toLocaleTimeString()
+                            
+                            if (ticket[4] == ticket[5]) {
+                                show2 = "N/A"
+                            }   
+
                             let temp = new Date(parseInt(ticket[6] * 1000, 10)) 
                             let d3 = ticket[6] ? temp.toLocaleDateString() + ", " + temp.toLocaleTimeString() : "N/A"
                             return (
@@ -226,8 +235,8 @@ export const Ticket = () => {
                                     <TableCell className={classes.table_cell} style={{ width: '40%' }}>{ticket[0]}</TableCell>
                                     <TableCell className={classes.table_cell} style={{ width: '40%' }}>{ticket[1]}</TableCell>
                                     <TableCell className={classes.table_cell} style={{ width: '20%' }}>{ticket[2]}</TableCell>
-                                    <TableCell className={classes.table_cell} style={{ width: '20%' }}>{d1.toLocaleDateString()}, {d1.toLocaleTimeString()}</TableCell>
-                                    <TableCell className={classes.table_cell} style={{ width: '20%' }}>{d2.toLocaleDateString()}, {d2.toLocaleTimeString()}</TableCell>
+                                    <TableCell className={classes.table_cell} style={{ width: '20%' }}>{show1}</TableCell>
+                                    <TableCell className={classes.table_cell} style={{ width: '20%' }}>{show2}</TableCell>
                                     <TableCell className={classes.table_cell} style={{ width: '20%' }}>{d3}</TableCell>
                                 </TableRow>
                             )

From 7e5ac7ad8cecd2b7303ae613f21eba0c0542e9c7 Mon Sep 17 00:00:00 2001
From: Ganning Xu <ganningxu@gmail.com>
Date: Mon, 19 Jun 2023 14:40:54 -0400
Subject: [PATCH 12/16] added as much information as possible to tickets page

---
 src/components/TicketRows.js  | 154 ++++++++++++++++++++++++++++++++++
 src/contexts/ServerContext.js |   2 +-
 src/views/Ticket.js           |  55 +++++-------
 3 files changed, 177 insertions(+), 34 deletions(-)
 create mode 100644 src/components/TicketRows.js

diff --git a/src/components/TicketRows.js b/src/components/TicketRows.js
new file mode 100644
index 00000000..b59a66f8
--- /dev/null
+++ b/src/components/TicketRows.js
@@ -0,0 +1,154 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import Button from '@material-ui/core/Button';
+import Collapse from '@material-ui/core/Collapse';
+import Typography from '@material-ui/core/Typography';
+import SaveIcon from '@material-ui/icons/Save';
+import DeleteIcon from '@material-ui/icons/Delete';
+import CancelIcon from '@material-ui/icons/Cancel';
+import EditIcon from '@material-ui/icons/Edit';
+import WarningIcon from '@material-ui/icons/Warning';
+import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
+import { useEnvironment, useServer } from '../contexts';
+import { ModifyResourceController, RemoveResourceController } from '../controllers/ResourceController';
+import MuiAlert from '@material-ui/lab/Alert';
+import { makeStyles, CircularProgress, Dialog, DialogActions, DialogContent, DialogContentText, Icon, IconButton, Table, TableBody, TableCell, TableRow, Tooltip, Snackbar, TextField, Box} from "@material-ui/core";
+
+const useStyles = makeStyles((theme) => ({
+  link_button: {
+    textDecoration: 'none'
+  },
+  row: {
+    paddingTop: 10
+  },
+  toggle_group: {
+    marginLeft: 20
+  },
+  table_cell: {
+    width: '50%',
+    fontSize: 15,
+    wordWrap: 'break-word',
+    height: 40
+  },
+  remove_button: {
+    float: 'right'
+  },
+  dialog_content: {
+    paddingLeft: 20,
+    fontSize: 20
+  },
+  remove_result: {
+    textAlign: 'center',
+    color: 'red'
+  },
+  dialog_contenttext: {
+    padding: theme.spacing(3),
+    fontSize: 15
+  },
+  cell: {
+    wordWrap: 'break-word'
+  },
+  resource_container: {
+    display: 'flex',
+    flexDirection: 'column',
+    padding: '10px 0'
+  },
+  resource_textfield: {
+    width: '50%'
+  },
+  collapse: {
+    backgroundColor: '#f5f5f5'
+  }
+}));
+
+function TicketRows({ row }) {
+  const classes = useStyles(); 
+  const [ticket, setTicket] = useState(row);
+  const [open, setOpen] = useState(false);
+
+//   useEffect(() => {
+//     if (rescPanelStatus === `editing-${resc[11]}`) setIsEditing(true);
+//     else {
+//       setCurrentResc(resc);
+//       setIsEditing(false);
+//     }
+//   }, [rescPanelStatus])
+
+
+  let d1 = new Date(parseInt(ticket[13] * 1000, 10))
+  let d2 = new Date(parseInt(ticket[14] * 1000, 10))
+  let show1 = d1.toLocaleDateString() + ",  " + d1.toLocaleTimeString()
+  let show2 = d2.toLocaleDateString() + ", " + d2.toLocaleTimeString()
+  
+
+  if (ticket[13] == ticket[14]) {
+      show2 = "N/A"
+  }   
+
+  let temp = new Date(parseInt(ticket[6] * 1000, 10)) 
+  let d3 = ticket[12] ? temp.toLocaleDateString() + ", " + temp.toLocaleTimeString() : "N/A"
+
+  return (
+    <React.Fragment>
+        <TableRow hover={true} onClick={() => setOpen(!open)}>
+            <TableCell className={classes.table_cell} style={{ width: '40%' }}>{ticket[17]}</TableCell>
+            <TableCell className={classes.table_cell} style={{ width: '40%' }}>{ticket[2]}</TableCell>
+            <TableCell className={classes.table_cell} style={{ width: '20%' }}>{ticket[0]}</TableCell>
+            <TableCell className={classes.table_cell} style={{ width: '20%' }}>{show1}</TableCell>
+            <TableCell className={classes.table_cell} style={{ width: '20%' }}>{show2}</TableCell>
+            <TableCell className={classes.table_cell} style={{ width: '20%' }}>{d3}</TableCell>
+            <TableCell>
+                <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)} align='right'>
+                    {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
+                </IconButton>
+            </TableCell>
+        </TableRow>
+
+        <TableRow hover={true} className={classes.collapse}>
+        <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={12}>
+            <Collapse in={open} timeout="auto" unmountOnExit>
+            <Table
+                style={{ width: "100%", tableLayout: "fixed" }}
+                size="small"
+                
+              >
+                <TableBody>
+                    <TableRow>
+                        <TableCell className={classes.table_cell} style={{ width: '40%' }}>TICKET_STRING: {ticket[1]}</TableCell>
+                        <TableCell className={classes.table_cell} style={{ width: '40%' }}>TICKET_USER_ID: {ticket[3]}</TableCell>
+                        <TableCell className={classes.table_cell} style={{ width: '40%' }}>TICKET_OBJECT_ID: {ticket[4]}</TableCell>
+                        <TableCell className={classes.table_cell} style={{ width: '40%' }}>TICKET_OBJECT_TYPE: {ticket[5]}</TableCell>
+                    </TableRow>
+               
+                    <TableRow>
+                        <TableCell className={classes.table_cell} style={{ width: '40%' }}>TICKET_USES_LIMIT: {ticket[6]}</TableCell>
+                        <TableCell className={classes.table_cell} style={{ width: '40%' }}>TICKET_USES_COUNT: {ticket[7]}</TableCell>
+                        <TableCell className={classes.table_cell} style={{ width: '40%' }}>TICKET_WRITE_FILE_COUNT: {ticket[8]}</TableCell>
+                        <TableCell className={classes.table_cell} style={{ width: '40%' }}>TICKET_WRITE_FILE_LIMIT: {ticket[9]}</TableCell>
+                    </TableRow>
+
+                    <TableRow>
+                        <TableCell className={classes.table_cell} style={{ width: '40%' }}>TICKET_WRITE_BYTE_COUNT: {ticket[10]}</TableCell>
+                        <TableCell className={classes.table_cell} style={{ width: '40%' }}>TICKET_WRITE_BYTE_LIMIT: {ticket[11]}</TableCell>
+                        <TableCell className={classes.table_cell} style={{ width: '40%' }}>TICKET_DATA_NAME: {ticket[15]}</TableCell>
+                        <TableCell className={classes.table_cell} style={{ width: '40%' }}>TICKET_DATA_COLL_NAME: {ticket[16]}</TableCell>
+                    </TableRow>
+
+                    <TableRow>
+                        <TableCell className={classes.table_cell} style={{ width: '40%' }}>TICKET_OWNER_ZONE: {ticket[18]}</TableCell>
+                    </TableRow>
+
+                </TableBody>
+
+            </Table>
+            </Collapse>
+        </TableCell>
+      </TableRow>
+
+    </React.Fragment>
+
+  );
+}
+
+export default TicketRows;
\ No newline at end of file
diff --git a/src/contexts/ServerContext.js b/src/contexts/ServerContext.js
index 181f72e2..8c6ce479 100644
--- a/src/contexts/ServerContext.js
+++ b/src/contexts/ServerContext.js
@@ -78,7 +78,7 @@ export const ServerProvider = ({ children }) => {
 
     const loadTickets = (offset, limit, order, orderBy) => {
         setIsLoadingTicketContext(true);
-        let _query = "SELECT TICKET_OWNER_NAME, TICKET_TYPE, TICKET_STRING, TICKET_OBJECT_TYPE, TICKET_CREATE_TIME, TICKET_MODIFY_TIME, TICKET_EXPIRY"
+        let _query = "SELECT TICKET_ID, TICKET_STRING, TICKET_TYPE, TICKET_USER_ID, TICKET_OBJECT_ID, TICKET_OBJECT_TYPE, TICKET_USES_LIMIT, TICKET_USES_COUNT, TICKET_WRITE_FILE_COUNT, TICKET_WRITE_FILE_LIMIT, TICKET_WRITE_BYTE_COUNT, TICKET_WRITE_BYTE_LIMIT, TICKET_EXPIRY, TICKET_CREATE_TIME, TICKET_MODIFY_TIME, TICKET_DATA_NAME, TICKET_DATA_COLL_NAME, TICKET_OWNER_NAME, TICKET_OWNER_ZONE"
 
         _query = queryGenerator(_query, order, orderBy);
         return axios({
diff --git a/src/views/Ticket.js b/src/views/Ticket.js
index 3c6aa7e7..3caceef7 100644
--- a/src/views/Ticket.js
+++ b/src/views/Ticket.js
@@ -9,6 +9,7 @@ import { makeStyles, LinearProgress, TableContainer, Paper, Table, TableHead, St
 // import SaveIcon from '@material-ui/icons/Save';
 // import CloseIcon from '@material-ui/icons/Close';
 // import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab';
+import TicketRows from '../components/TicketRows';
 
 const useStyles = makeStyles((theme) => ({
     tableContainer: {
@@ -63,7 +64,7 @@ export const Ticket = () => {
     const [currPage, setCurrPage] = useState(1);
     const [perPage, setPerPage] = useState(10);
 
-    const { isLoadingUserContext, loadTickets, ticketContext } = useServer();
+    const { isLoadingTicketContext, loadTickets, ticketContext } = useServer();
     const classes = useStyles();
     const [filterTicket, setFilterTicket] = useState(params.get('filter') ? decodeURIComponent(params.get('filter')) : '');
     const [order, setOrder] = useState("asc");
@@ -75,13 +76,15 @@ export const Ticket = () => {
 
     useEffect(() => {
         loadTickets(perPage * (currPage - 1), perPage, order, orderBy)
-        
+        console.log('loading tickets')
     }, [currPage, perPage, order, orderBy])
 
     useEffect(() => {
         if (ticketContext !== undefined) {
+            console.log("ticketContext", ticketContext);
             setTicketsData(ticketContext._embedded)
         }
+
     }, [ticketContext])
 
 
@@ -103,16 +106,14 @@ export const Ticket = () => {
     }
 
     let filteredTickets = ticketsData.filter((ticket) => {
-        return ticket[0].includes(filterTicket) || 
-                ticket[1].includes(filterTicket) ||
-                ticket[2].includes(filterTicket) ||
-                ticket[3].includes(filterTicket) ||
-                ticket[4].includes(filterTicket) ||
-                ticket[5].includes(filterTicket) ||
-                ticket[6].includes(filterTicket)
+        if (filterTicket === '') return true;
+
+        return ticket[17].includes(filterTicket) || 
+        ticket[2].includes(filterTicket) ||
+        ticket[0].includes(filterTicket)
 
     })
-    console.log("ticketContext: ", ticketContext)
+    
     return (
       <Fragment>
 
@@ -121,13 +122,13 @@ export const Ticket = () => {
                 className={classes.filter}
                 id="filter-term"
                 label="Filter"
-                placeholder="Filter by User Name"
+                placeholder="Filter by owner, type, or ID"
                 onChange={handleFilterChange}
                 value={filterTicket}
             />
         </div>
 
-        {isLoadingUserContext ? <LinearProgress /> : <div className="table_view_spinner_holder" />}
+        {isLoadingTicketContext ? <LinearProgress /> : <div className="table_view_spinner_holder" />}
 
         {ticketContext === undefined ?? <div>Cannot load ticket data. Please check your iRODS Client REST API endpoint connection.</div>
         }
@@ -148,7 +149,7 @@ export const Ticket = () => {
                                     onClick={() => {
                                         handleSort("TICKET_OWNER_NAME");
                                     }}
-                                >Created By
+                                >Owner
                                 </TableSortLabel>
                             </TableCell>
 
@@ -212,33 +213,21 @@ export const Ticket = () => {
                                 Expire Time
                                 </TableSortLabel>
                             </TableCell>
+
+                            <TableCell
+                      style={{ width: "5%" }}
+                      align="right"
+                    ></TableCell>
                         </TableRow>
                     </StylesProvider>
                 </TableHead>
                 <TableBody>
                     
                     {
-                        filteredTickets.map((ticket, index) => {
-                            let d1 = new Date(parseInt(ticket[4] * 1000, 10))
-                            let d2 = new Date(parseInt(ticket[5] * 1000, 10))
-                            let show1 = d1.toLocaleDateString() + ",  " + d1.toLocaleTimeString()
-                            let show2 = d2.toLocaleDateString() + ", " + d2.toLocaleTimeString()
-                            
-                            if (ticket[4] == ticket[5]) {
-                                show2 = "N/A"
-                            }   
-
-                            let temp = new Date(parseInt(ticket[6] * 1000, 10)) 
-                            let d3 = ticket[6] ? temp.toLocaleDateString() + ", " + temp.toLocaleTimeString() : "N/A"
+                       filteredTickets.map((ticket, index) => {
+                          
                             return (
-                                <TableRow key={index}>
-                                    <TableCell className={classes.table_cell} style={{ width: '40%' }}>{ticket[0]}</TableCell>
-                                    <TableCell className={classes.table_cell} style={{ width: '40%' }}>{ticket[1]}</TableCell>
-                                    <TableCell className={classes.table_cell} style={{ width: '20%' }}>{ticket[2]}</TableCell>
-                                    <TableCell className={classes.table_cell} style={{ width: '20%' }}>{show1}</TableCell>
-                                    <TableCell className={classes.table_cell} style={{ width: '20%' }}>{show2}</TableCell>
-                                    <TableCell className={classes.table_cell} style={{ width: '20%' }}>{d3}</TableCell>
-                                </TableRow>
+                                <TicketRows key={ticket[0]} row={ticket} />
                             )
                         })
                     }

From 9a9e4913c26f772040b9b83fd5fd3b7e45ad4d52 Mon Sep 17 00:00:00 2001
From: Ganning Xu <ganningxu@gmail.com>
Date: Mon, 19 Jun 2023 15:32:11 -0400
Subject: [PATCH 13/16] removed unused imports and added proptypes

---
 src/components/TicketRows.js | 23 +++++++++--------------
 src/views/Ticket.js          |  2 +-
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/src/components/TicketRows.js b/src/components/TicketRows.js
index b59a66f8..60a2903a 100644
--- a/src/components/TicketRows.js
+++ b/src/components/TicketRows.js
@@ -1,19 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import Button from '@material-ui/core/Button';
 import Collapse from '@material-ui/core/Collapse';
-import Typography from '@material-ui/core/Typography';
-import SaveIcon from '@material-ui/icons/Save';
-import DeleteIcon from '@material-ui/icons/Delete';
-import CancelIcon from '@material-ui/icons/Cancel';
-import EditIcon from '@material-ui/icons/Edit';
-import WarningIcon from '@material-ui/icons/Warning';
 import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
 import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
-import { useEnvironment, useServer } from '../contexts';
-import { ModifyResourceController, RemoveResourceController } from '../controllers/ResourceController';
-import MuiAlert from '@material-ui/lab/Alert';
-import { makeStyles, CircularProgress, Dialog, DialogActions, DialogContent, DialogContentText, Icon, IconButton, Table, TableBody, TableCell, TableRow, Tooltip, Snackbar, TextField, Box} from "@material-ui/core";
+import { makeStyles, IconButton, Table, TableBody, TableCell, TableRow } from "@material-ui/core";
 
 const useStyles = makeStyles((theme) => ({
   link_button: {
@@ -64,7 +54,8 @@ const useStyles = makeStyles((theme) => ({
 
 function TicketRows({ row }) {
   const classes = useStyles(); 
-  const [ticket, setTicket] = useState(row);
+  // const [ticket, setTicket] = useState(row);
+  const ticket = row; // the above line is there in case we need to change the state of the ticket (through ticket editing)
   const [open, setOpen] = useState(false);
 
 //   useEffect(() => {
@@ -151,4 +142,8 @@ function TicketRows({ row }) {
   );
 }
 
-export default TicketRows;
\ No newline at end of file
+export default TicketRows;
+
+TicketRows.propTypes = {
+  row: PropTypes.array,
+}
\ No newline at end of file
diff --git a/src/views/Ticket.js b/src/views/Ticket.js
index 3caceef7..7db11b2f 100644
--- a/src/views/Ticket.js
+++ b/src/views/Ticket.js
@@ -224,7 +224,7 @@ export const Ticket = () => {
                 <TableBody>
                     
                     {
-                       filteredTickets.map((ticket, index) => {
+                       filteredTickets.map((ticket) => {
                           
                             return (
                                 <TicketRows key={ticket[0]} row={ticket} />

From af5e9b0fba4b63308647d322efcbf1dfdd23130d Mon Sep 17 00:00:00 2001
From: Ganning Xu <ganningxu@gmail.com>
Date: Thu, 22 Jun 2023 15:46:34 -0400
Subject: [PATCH 14/16] [92] added templating for ticket creation...might need
 to revert later

---
 src/views/Ticket.js | 196 ++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 191 insertions(+), 5 deletions(-)

diff --git a/src/views/Ticket.js b/src/views/Ticket.js
index 7db11b2f..4560233d 100644
--- a/src/views/Ticket.js
+++ b/src/views/Ticket.js
@@ -2,10 +2,20 @@
 
 import React, { useState, Fragment, useEffect } from 'react';
 import { navigate, useLocation } from '@reach/router';
-// import axios from 'axios';
-import { useServer } from '../contexts';
+import axios from 'axios';
+import { useServer, useEnvironment } from '../contexts';
 // import { makeStyles, StylesProvider, Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, LinearProgress, TextField, Typography, Input, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TablePagination, TableSortLabel, Select, Paper } from '@material-ui/core';
-import { makeStyles, LinearProgress, TableContainer, Paper, Table, TableHead, StylesProvider, TableRow, TableCell, TableBody, TextField, TablePagination, TableSortLabel } from '@material-ui/core';
+import { makeStyles, LinearProgress, TableContainer, Paper, Table, TableHead, StylesProvider, TableRow, TableCell, TableBody, TextField, TablePagination, TableSortLabel, InputLabel } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import Select from '@material-ui/core/Select';
+import FormControl from '@material-ui/core/FormControl';
+
+
 // import SaveIcon from '@material-ui/icons/Save';
 // import CloseIcon from '@material-ui/icons/Close';
 // import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab';
@@ -50,7 +60,12 @@ const useStyles = makeStyles((theme) => ({
     },
     header_row: {
         fontWeight: 'bold'
-    }
+    },
+    formControl: {
+        margin: theme.spacing(1),
+        minWidth: 240,
+      },
+    
 }));
 
 
@@ -58,7 +73,8 @@ export const Ticket = () => {
     if (!localStorage.getItem('zmt-token')) navigate('/');
     const location = useLocation()
     const params = new URLSearchParams(location.search)
-    // const { restApiLocation } = useEnvironment();
+    const { restApiLocation } = useEnvironment();
+    console.log("restApiLocation", restApiLocation)
     // const auth = localStorage.getItem('zmt-token');
     // const userTypes = ["rodsuser", "rodsadmin", "groupadmin"];
     const [currPage, setCurrPage] = useState(1);
@@ -70,6 +86,7 @@ export const Ticket = () => {
     const [order, setOrder] = useState("asc");
     const [orderBy, setOrderBy] = useState("TICKET_OWNER_NAME");
     const [ticketsData, setTicketsData] = useState([]); // array of ticket information
+    const [createOpen, setCreateOpen] = useState(false);
 
     // SELECT TICKET_OWNER_NAME, TICKET_TYPE, TICKET_STRING, TICKET_OBJECT_TYPE, TICKET_CREATE_TIME, TICKET_MODIFY_TIME, TICKET_EXPIRY
   
@@ -113,6 +130,53 @@ export const Ticket = () => {
         ticket[0].includes(filterTicket)
 
     })
+
+    const handleClickOpen = () => {
+        setCreateOpen(true);
+      };
+    
+      const handleClose = () => {
+        setCreateOpen(false);
+      };
+    
+    const handleCreateTicket = async () => {
+        let dataObj = {
+            logical_path: document.getElementById('logical-path').value,
+            type: document.getElementById('ticket-type').value,
+            use_count: document.getElementById('use-count').value,
+            write_file_count: document.getElementById('write-file-count').value,
+            write_byte_count: document.getElementById('write-byte-count').value,
+            seconds_until_expiration: document.getElementById('seconds-until-expiration').value,
+            users: document.getElementById('users').value,
+            groups: document.getElementById('groups').value,
+            hosts: document.getElementById('hosts').value
+        }
+
+
+        const response = await axios({
+            method: 'GET',
+            url: `${restApiLocation}/ticket`,
+            params: {
+                logical_path: dataObj.logical_path,
+                type: dataObj.type,
+                use_count: dataObj.use_count,
+                write_file_count: dataObj.write_file_count,
+                write_byte_count: dataObj.write_byte_count,
+
+                seconds_until_expiration: dataObj.seconds_until_expiration,
+                users: dataObj.users,
+                groups: dataObj.groups,
+                hosts: dataObj.hosts
+            },
+            headers: {
+                'Authorization': localStorage.getItem('zmt-token')
+            },
+        })
+
+        console.log(response);
+
+
+    }
     
     return (
       <Fragment>
@@ -126,6 +190,128 @@ export const Ticket = () => {
                 onChange={handleFilterChange}
                 value={filterTicket}
             />
+
+        <Button variant="outlined" color="primary" onClick={handleClickOpen}>
+            Open form dialog
+        </Button>
+
+        {/* 
+            logical-path: The url encoded logical path to a collection or data object for which access is desired
+            type: The type of ticket to create. The value must be either read or write. Defaults to read
+            use-count: The maximum number of times the ticket can be used. Defaults to 0 (unlimited use)
+            write-file-count: The maximum number of writes allowed to a data object. Defaults to 0 (unlimited writes)
+            write-byte-count: The maximum number of bytes allowed to be written to data object. Defaults to 0 (unlimited bytes)
+            seconds-until-expiration: The number of seconds before the ticket will expire. Defaults to 0 (no expiration)
+            users: A comma-separated list of iRODS users who are allowed to use the generated ticket
+            groups: A comma-separated list of iRODS groups that are allowed to use the generated ticket
+            hosts: A comma-separated list of hosts that are allowed to use the ticket
+        
+        */}
+        <Dialog open={createOpen} onClose={handleClose} aria-labelledby="form-dialog-title">
+        <DialogTitle id="form-dialog-title">New Ticket</DialogTitle>
+        <DialogContent>
+            <DialogContentText>
+            Create a new ticket
+            </DialogContentText>
+            
+            <FormControl className={classes.formControl}>
+            <TextField
+                id="logical-path"
+                label="Logical Path"
+                type="text"
+                fullWidth
+            />
+            </FormControl>
+            
+            <FormControl className={classes.formControl}>
+            <InputLabel htmlFor="age-native-simple">Ticket Type</InputLabel>
+            <Select
+                native
+                id="ticket-type"
+            >
+                <option value='read'>Read</option>
+                <option value='write'>Write</option>
+            </Select>
+            </FormControl>
+
+            <FormControl className={classes.formControl}>
+            <TextField
+                id="use-count"
+                label="Use Count"
+                type="number"
+                fullWidth
+            />
+            </FormControl>
+
+            <FormControl className={classes.formControl}>
+            <TextField
+                id="write-file-count"
+                label="Write File Count"
+                type="number"
+                fullWidth
+            />
+            </FormControl>
+
+            <FormControl className={classes.formControl}>
+            <TextField
+                id="write-byte-count"
+                label="Write Byte Count"
+                type="number"
+                fullWidth
+            />
+            </FormControl>
+
+            <FormControl className={classes.formControl}>
+            <TextField
+                id="seconds-until-expiration"
+                label="Seconds Until Expiration"
+                type="number"
+                fullWidth
+            />
+            </FormControl>
+
+            <FormControl className={classes.formControl}>
+            <TextField
+                id="users"
+                label="Users"
+                type="text"
+                fullWidth
+            />
+            </FormControl>
+
+            <FormControl className={classes.formControl}>
+            <TextField
+
+                id="groups"
+                label="Groups"
+                type="text"
+                fullWidth
+            />
+            </FormControl>
+
+
+            <FormControl className={classes.formControl}>
+            <TextField
+
+                id="hosts"
+                label="Hosts"
+                type="text"
+                fullWidth
+            />
+            </FormControl>  
+
+        </DialogContent>
+        <DialogActions>
+            <Button onClick={handleClose} color="primary">
+            Cancel
+            </Button>
+            <Button onClick={handleCreateTicket} color="primary" >
+            Create Ticket
+            </Button>
+        </DialogActions>
+        </Dialog>;
+
+
         </div>
 
         {isLoadingTicketContext ? <LinearProgress /> : <div className="table_view_spinner_holder" />}

From 3b511912dff3b9e2d34ad33209225a46a3eb7142 Mon Sep 17 00:00:00 2001
From: Ganning Xu <ganningxu@gmail.com>
Date: Wed, 28 Jun 2023 10:21:08 -0400
Subject: [PATCH 15/16] [92] added example response for when /ticket works

---
 src/views/Ticket.js | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/views/Ticket.js b/src/views/Ticket.js
index 4560233d..795d5c39 100644
--- a/src/views/Ticket.js
+++ b/src/views/Ticket.js
@@ -4,7 +4,6 @@ import React, { useState, Fragment, useEffect } from 'react';
 import { navigate, useLocation } from '@reach/router';
 import axios from 'axios';
 import { useServer, useEnvironment } from '../contexts';
-// import { makeStyles, StylesProvider, Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, LinearProgress, TextField, Typography, Input, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TablePagination, TableSortLabel, Select, Paper } from '@material-ui/core';
 import { makeStyles, LinearProgress, TableContainer, Paper, Table, TableHead, StylesProvider, TableRow, TableCell, TableBody, TextField, TablePagination, TableSortLabel, InputLabel } from '@material-ui/core';
 import Button from '@material-ui/core/Button';
 import Dialog from '@material-ui/core/Dialog';
@@ -14,11 +13,6 @@ import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import Select from '@material-ui/core/Select';
 import FormControl from '@material-ui/core/FormControl';
-
-
-// import SaveIcon from '@material-ui/icons/Save';
-// import CloseIcon from '@material-ui/icons/Close';
-// import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab';
 import TicketRows from '../components/TicketRows';
 
 const useStyles = makeStyles((theme) => ({
@@ -171,10 +165,20 @@ export const Ticket = () => {
             headers: {
                 'Authorization': localStorage.getItem('zmt-token')
             },
-        })
+        }).catch(e => {})
 
-        console.log(response);
+        const exampleResponse = {
+            "headers": {
+              "irods-ticket": ["CS11B8C4KZX2BIl"]
+            },
+            "url": "/irods-rest/0.9.3/stream?logical-path=%2FtempZone%2Fhome%2Frods%2Ffile0&offset=0&count=33064"
+        }
+
+        if (exampleResponse && exampleResponse.url) {
+            window.location.reload();
+        }
 
+        console.log(response);
 
     }
     
@@ -192,7 +196,7 @@ export const Ticket = () => {
             />
 
         <Button variant="outlined" color="primary" onClick={handleClickOpen}>
-            Open form dialog
+            New Ticket
         </Button>
 
         {/* 
@@ -309,7 +313,7 @@ export const Ticket = () => {
             Create Ticket
             </Button>
         </DialogActions>
-        </Dialog>;
+        </Dialog>
 
 
         </div>

From cef311d6beb2b8811fceac93fc534502f60d6d3a Mon Sep 17 00:00:00 2001
From: Ganning Xu <ganningxu@gmail.com>
Date: Wed, 28 Jun 2023 10:29:22 -0400
Subject: [PATCH 16/16] [92] added ticket string to table

---
 src/components/TicketRows.js |  7 ++-----
 src/views/Ticket.js          | 12 ++++++++++++
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/TicketRows.js b/src/components/TicketRows.js
index 60a2903a..c0d747df 100644
--- a/src/components/TicketRows.js
+++ b/src/components/TicketRows.js
@@ -84,6 +84,7 @@ function TicketRows({ row }) {
     <React.Fragment>
         <TableRow hover={true} onClick={() => setOpen(!open)}>
             <TableCell className={classes.table_cell} style={{ width: '40%' }}>{ticket[17]}</TableCell>
+            <TableCell className={classes.table_cell} style={{ width: '40%' }}>{ticket[1]}</TableCell>
             <TableCell className={classes.table_cell} style={{ width: '40%' }}>{ticket[2]}</TableCell>
             <TableCell className={classes.table_cell} style={{ width: '20%' }}>{ticket[0]}</TableCell>
             <TableCell className={classes.table_cell} style={{ width: '20%' }}>{show1}</TableCell>
@@ -106,7 +107,7 @@ function TicketRows({ row }) {
               >
                 <TableBody>
                     <TableRow>
-                        <TableCell className={classes.table_cell} style={{ width: '40%' }}>TICKET_STRING: {ticket[1]}</TableCell>
+                        <TableCell className={classes.table_cell} style={{ width: '40%' }}>TICKET_OWNER_ZONE: {ticket[18]}</TableCell>
                         <TableCell className={classes.table_cell} style={{ width: '40%' }}>TICKET_USER_ID: {ticket[3]}</TableCell>
                         <TableCell className={classes.table_cell} style={{ width: '40%' }}>TICKET_OBJECT_ID: {ticket[4]}</TableCell>
                         <TableCell className={classes.table_cell} style={{ width: '40%' }}>TICKET_OBJECT_TYPE: {ticket[5]}</TableCell>
@@ -126,10 +127,6 @@ function TicketRows({ row }) {
                         <TableCell className={classes.table_cell} style={{ width: '40%' }}>TICKET_DATA_COLL_NAME: {ticket[16]}</TableCell>
                     </TableRow>
 
-                    <TableRow>
-                        <TableCell className={classes.table_cell} style={{ width: '40%' }}>TICKET_OWNER_ZONE: {ticket[18]}</TableCell>
-                    </TableRow>
-
                 </TableBody>
 
             </Table>
diff --git a/src/views/Ticket.js b/src/views/Ticket.js
index 795d5c39..73b39d0e 100644
--- a/src/views/Ticket.js
+++ b/src/views/Ticket.js
@@ -343,6 +343,18 @@ export const Ticket = () => {
                                 </TableSortLabel>
                             </TableCell>
 
+                            <TableCell className={classes.table_cell, classes.header_row} style={{ width: '20%' }}>
+                                <TableSortLabel
+                                    active={orderBy === "TICKET_STRING"}
+                                    direction={orderBy === "TICKET_STRING" ? order : "asc"}
+                                    onClick={() => {
+                                        handleSort("TICKET_STRING");
+                                    }}
+                                >
+                                String
+                                </TableSortLabel>
+                            </TableCell>
+
                             <TableCell className={classes.table_cell, classes.header_row} style={{ width: '20%' }}>
                                 <TableSortLabel
                                     active={orderBy === "TICKET_TYPE"}