feedback

src/components/LeftNav.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { styled, useTheme } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Drawer from '@mui/material/Drawer';
@@ -44,14 +44,12 @@ const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(({
   ],
 }));
 
-
-
 const NavStyles = makeStyles((theme) => ({
   header: {
     borderBottom: "2px solid rgba(0,0,0,0.1)",
     display: "flex",
   },
-  title:{
+  title: {
     fontWeight: "600!important",
     fontSize: "1.25rem!important",
   }
@@ -62,25 +60,33 @@ const DrawerHeader = styled('div')(({ theme }) => ({
   alignItems: 'center',
   padding: theme.spacing(0, 1),
   background: 'rgb(246 248 249)',
-  // necessary for content to be below app bar
   ...theme.mixins.toolbar,
   justifyContent: 'flex-end',
 }));
 
-export default function PersistentDrawerLeft({ handleDrawerClose, open}) {
+export default function PersistentDrawerLeft({ handleDrawerClose, open }) {
   const location = useLocation();
   const theme = useTheme();
+  const drawerRef = useRef(null); // Create a ref for the drawer
 
   useEffect(() => {
-    document.addEventListener('mousedown', handleDrawerClose);
+    const handleClickOutside = (event) => {
+      // Check if the click was outside the drawer
+      if (drawerRef.current && !drawerRef.current.contains(event.target)) {
+        handleDrawerClose();
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
     
     return () => {
-      document.removeEventListener('mousedown', handleDrawerClose);
+      document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, []);
+  }, [handleDrawerClose]);
 
   return (
     <Drawer
+      ref={drawerRef}  // Attach the ref to the Drawer
       sx={{
         width: drawerWidth,
         flexShrink: 0,
@@ -100,7 +106,7 @@ export default function PersistentDrawerLeft({ handleDrawerClose, open}) {
       </DrawerHeader>
       <Divider />
       <List>
-            <ListItem key={'Dashboard'} disablePadding component={Link} to={'dashboard'} selected={location.pathname=='/dashboard'}>
+        <ListItem key={'Dashboard'} disablePadding component={Link} to={'dashboard'} selected={location.pathname == '/dashboard'}>
           <ListItemButton>
             <ListItemIcon>
               <PersonIcon />
@@ -108,7 +114,7 @@ export default function PersistentDrawerLeft({ handleDrawerClose, open}) {
             <ListItemText primary={'Dashboard'} />
           </ListItemButton>
         </ListItem>
-            <ListItem key={'User'} disablePadding component={Link} to={'user'} selected={location.pathname=='/user'}>
+        <ListItem key={'User'} disablePadding component={Link} to={'user'} selected={location.pathname == '/user'}>
           <ListItemButton>
             <ListItemIcon>
               <PersonIcon />
@@ -116,7 +122,7 @@ export default function PersistentDrawerLeft({ handleDrawerClose, open}) {
             <ListItemText primary={'User'} />
           </ListItemButton>
         </ListItem>
-            <ListItem key={'Quotes'} disablePadding component={Link} to={'quotes'} selected={location.pathname=='/quotes'}>
+        <ListItem key={'Quotes'} disablePadding component={Link} to={'quotes'} selected={location.pathname == '/quotes'}>
           <ListItemButton>
             <ListItemIcon>
               <MonetizationOnIcon />
@@ -124,7 +130,7 @@ export default function PersistentDrawerLeft({ handleDrawerClose, open}) {
             <ListItemText primary={'Quotes'} />
           </ListItemButton>
         </ListItem>
-            <ListItem key={'WorkOrder'} disablePadding component={Link} to={'workOrder'} selected={location.pathname=='/workOrder'}>
+        <ListItem key={'WorkOrder'} disablePadding component={Link} to={'workOrder'} selected={location.pathname == '/workOrder'}>
           <ListItemButton>
             <ListItemIcon>
               <TextSnippetIcon />
@@ -132,7 +138,7 @@ export default function PersistentDrawerLeft({ handleDrawerClose, open}) {
             <ListItemText primary={'Work Order'} />
           </ListItemButton>
         </ListItem>
-            <ListItem key={'Contacts'} disablePadding component={Link} to={'contacts'} selected={location.pathname=='/contacts'}>
+        <ListItem key={'Contacts'} disablePadding component={Link} to={'contacts'} selected={location.pathname == '/contacts'}>
           <ListItemButton>
             <ListItemIcon>
               <TextSnippetIcon />
@@ -140,7 +146,7 @@ export default function PersistentDrawerLeft({ handleDrawerClose, open}) {
             <ListItemText primary={'Contacts'} />
           </ListItemButton>
         </ListItem>
-            <ListItem key={'AddressBook'} disablePadding component={Link} to={'addressBook'} selected={location.pathname=='/addressBook'}>
+        <ListItem key={'AddressBook'} disablePadding component={Link} to={'addressBook'} selected={location.pathname == '/addressBook'}>
           <ListItemButton>
             <ListItemIcon>
               <TextSnippetIcon />

src/components/ListHeader.js

@@ -6,7 +6,6 @@ import ListHeaderStyles from "./ListHeader.Styles";
 const ListHeader = ({ handleClickFormModalOpen, isEmpty, text }) => {
   const classes = ListHeaderStyles();
   return (
-    !isEmpty && (
       <Box component="span" m={1} className={classes.box}>
         <Typography variant="h6" component="h6">
           {text}
@@ -20,7 +19,6 @@ const ListHeader = ({ handleClickFormModalOpen, isEmpty, text }) => {
           Add
         </Button>
       </Box>
-    )
   );
 };
 export default ListHeader;

src/pages/address/components/Form.js

@@ -76,28 +76,11 @@ const ItemForm = ({
           <Box component="form" onSubmit={handleSubmit} noValidate>
             <DialogContent>
               <DialogContentText className={classes.title}>
-                {PRIMARY_TEXT}
+                {PRIMARY_TEXT.replace("Item", "Address")}
               </DialogContentText>
-
-              <TextField
-                id="Name"
-                label="Name"
-                variant="outlined"
-                style={{ width: '100%' }}
-                margin="normal"
-                required
-                name="Name"
-                value={values.name}
-                onChange={(event) => {
-                  const { value } = event.target;
-                  handleChangeKV("name", value);
-                }}
-                error={!!errors.FirstName}
-                helperText={errors.FirstName}
-              />
               <TextField
                 id="Title"
-                label="Title"
+                label="Name"
                 variant="outlined"
                 style={{ width: '100%' }}
                 margin="normal"
@@ -111,6 +94,22 @@ const ItemForm = ({
                 error={!!errors.LastName}
                 helperText={errors.LastName}
               />      
+              <TextField
+                id="Name"
+                label="Address"
+                variant="outlined"
+                style={{ width: '100%' }}
+                margin="normal"
+                required
+                name="Name"
+                value={values.name}
+                onChange={(event) => {
+                  const { value } = event.target;
+                  handleChangeKV("name", value);
+                }}
+                error={!!errors.FirstName}
+                helperText={errors.FirstName}
+              />     
             </DialogContent>
             <DialogActions>
               <Button onClick={handleClose}>Cancel</Button>

src/pages/address/components/Table.js

@@ -62,7 +62,7 @@ const TableItems = ({ items, onEditClick, onDeleteClick }) => {
             }
         },
         {
-            name: "name",
+            name: "title",
             label: "Name",
             options: {
                 display: true,
@@ -71,8 +71,8 @@ const TableItems = ({ items, onEditClick, onDeleteClick }) => {
             }
         },
         {
-            name: "title",
+            name: "name",
-            label: "Title",
+            label: "Address",
             options: {
                 display: true,
                 filter: true,

src/pages/workorder/_utility.js

@@ -1,7 +1,7 @@
 export const initialValues = 
 {
  "workerOrderNumber": "",
- "workerOrderTitle": "",
+ "workerOrderTitle": "PLUMBING JANITORIAL SCRUBBER PIT CLEANOUT 13W",
  "description": "",
  "po": "",
  "tt": "",

src/pages/workorder/attachments/ImageDrawer.js

@@ -86,7 +86,7 @@ const ImageDrawer = ({ item, open, setOpen }) => {
             <Typography variant="subtitle1">Upload Images</Typography>
             <Input
               type="file"
-              inputProps={{ accept: "image/*", multiple: true }} // Allow multiple files 
+              inputProps={{ accept: ".jpg, .jpeg, .png, .pdf, .doc, .docx" }} // Allow multiple files 
               onChange={handleFileChange}
               style={{ display: 'none' }}
               id="file-input"

src/pages/workorder/components/Form.js

@@ -11,7 +11,6 @@ import InputLabel from "@mui/material/InputLabel";
 import MenuItem from "@mui/material/MenuItem";
 import Select from "@mui/material/Select";
 import CloseIcon from "@mui/icons-material/Close";
-import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
 import FormStyles from "./Form.Styles"; 
 import IconButton from "@mui/material/IconButton";
 import Typography from "@mui/material/Typography";
@@ -21,6 +20,7 @@ import SubmitButtonWithLoader from "../../../components/SubmitButtonWithLoader";
 import { form_text_builder, API_SUCCESS_MESSAGE } from "../../../constants";
 import { getContacts, getCategories, getLocations, getUsers } from '../../contacts/list/api';
 import moment from 'moment';
+
 const ItemForm = ({
   item,
   mode,
@@ -28,6 +28,7 @@ const ItemForm = ({
   setOpen,
   apiCall,
   setApiStatus,
+  viewOnly = false // New prop added here
 }) => {
   const [isFormLoading, setIsFormLoading] = useState(false);
   const [workOrders, setWorkOrders] = useState([]);
@@ -58,7 +59,8 @@ const ItemForm = ({
   const [isFormSubmit, setIsFormSubmit] = useState(false);
   const classes = FormStyles();
   const { PRIMARY_TEXT, SECONDARY_TEXT, BUTTON_TEXT } = form_text_builder(mode);
-  const { values, errors, handleChangeKV, handleSubmit, setValues } = useForm({
+
+  const { values, errors, handleChangeKV, handleSubmit } = useForm({
     initialValues: item,
     onSubmit(values) {
       setIsFormLoading(true);
@@ -82,10 +84,10 @@ const ItemForm = ({
     },
     validate: (formValues) => {
       if (isFormSubmit) setIsFormSubmit(false); 
-
       return formValidation(formValues);
     },
   });
+
   const handleClose = () => {
     setOpen({ open: false });
   };
@@ -95,7 +97,6 @@ const ItemForm = ({
     getContacts().then((response) => { handleSuccess(response, setContacts) });
     getLocations().then((response) => { handleSuccess(response, setLocations) });
     getCategories().then((response) => { handleSuccess(response, setCategories) });
-
   }, []);
 
   function handleSuccess(response, cb) {
@@ -117,265 +118,226 @@ const ItemForm = ({
               <DialogContentText className={classes.title}>
                 {PRIMARY_TEXT}
               </DialogContentText>
-              <div>
+              <div style={{ display: 'flex', alignItems: 'flex-start' }}> {/* Changed alignItems to flex-start */}
-                <InputLabel id="PO-label">WO ID:</InputLabel>
+                {/* Left Section */}
+                <div style={{ flex: 1, paddingRight: '0.5rem', display: 'flex', flexDirection: 'column' }}>
+                  {/* Full-width Work Order Title */}
+                  <InputLabel id="work-order-title">Work Order Title:</InputLabel>
                   <TextField
-                  id="WOID"
+                    id="workerOrderTitle"
-                  label="WO ID:"
                     variant="outlined"
-                  style={{ width: '100%' }}
-                  margin="normal"
-                  required
-                  name="workerOrderNumber"
-                  value={values.workerOrderNumber}
-                  onChange={(event) => {
-                    const { value } = event.target;
-                    handleChangeKV("workerOrderNumber", value);
-                  }}
-                  error={!!errors.workerOrderNumber}
-                  helperText={errors.workerOrderNumber}
-                />
-                </div>
-                <div>
-                <Select
-                  labelId="work-order-title-select-label"
-                  id="work-order-title-select"
                     fullWidth
-                  value={values.workOrderTitle || ''}
-                  onChange={(event) => {
-                    const { value } = event.target;
-                    handleChangeKV("workerOrderTitle", value);
-                  }}
-                  label="Work Order Title"
-                >
-                  {workOrderTitles.map((title, index) => (
-                    <MenuItem value={title} key={index}>
-                      {title}
-                    </MenuItem>
-                  ))}
-                </Select>     
-                <InputLabel id="PO-label">Work Order Title:</InputLabel>          
-                <TextField
-                  id="WorkerOrderTitle"
-                  variant="outlined"
-                  style={{ width: '100%' }}
                     margin="normal"
-                  required
+                    value={values?.workerOrderTitle || ''}
-                  name="workerOrderTitle"
+                    onChange={viewOnly ? null : (event) => handleChangeKV("workerOrderTitle", event.target.value)}
-                  value={values.workerOrderTitle}
-                  onChange={(event) => {
-                    const { value } = event.target;
-                    handleChangeKV("workerOrderTitle", value);
-                  }}
                     error={!!errors.workerOrderTitle}
                     helperText={errors.workerOrderTitle}
+                    disabled={viewOnly} // Disable if in read-only mode
                   />
-              </div>
+
-              <div>
+                  {/* Inputs Layout for WO number, PO#, TT# */}
-                <InputLabel id="description-label">Description</InputLabel>
+                  <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between' }}>
+                    <div style={{ flex: '1 1 30%', paddingRight: '0.5rem' }}>
+                      <InputLabel id="wo-number-label">WO Number:</InputLabel>
                       <TextField
-                  id="Description"
+                        id="workerOrderNumber"
-                  label="Description"
                         variant="outlined"
-                  style={{ width: '100%' }}
+                        fullWidth
-                  margin="normal"
+                        value={values?.workerOrderNumber || ''}
-                  required
+                        onChange={viewOnly ? null : (event) => handleChangeKV("workerOrderNumber", event.target.value)}
-                  name="description"
+                        error={!!errors.workerOrderNumber}
-                  value={values.description}
+                        helperText={errors.workerOrderNumber}
-                  onChange={(event) => {
+                        disabled={viewOnly} // Disable if in read-only mode
-                    const { value } = event.target;
-                    handleChangeKV("description", value);
-                  }}
-                  error={!!errors.description}
-                  helperText={errors.description}
                       />
                     </div>
-              <div>
+
-                <InputLabel id="PO-label">PO # :</InputLabel>
+                    <div style={{ flex: '1 1 30%', paddingRight: '0.5rem' }}>
+                      <InputLabel id="po-label">PO #:</InputLabel>
                       <TextField
                         id="po"
-                  label=""
                         variant="outlined"
-                  style={{ width: '100%' }}
+                        fullWidth
-                  margin="normal"
+                        value={values?.po || ''}
-                  required
+                        onChange={viewOnly ? null : (event) => handleChangeKV("po", event.target.value)}
-                  name="po"
-                  value={values?.po}
-                  onChange={(event) => {
-                    const { value } = event.target;
-                    handleChangeKV("po", value);
-                  }}
                         error={!!errors.po}
                         helperText={errors.po}
+                        disabled={viewOnly} // Disable if in read-only mode
                       />
                     </div>
-              <div>
+
-                <InputLabel id="TT-label">TT #</InputLabel>
+                    <div style={{ flex: '1 1 30%' }}>
+                      <InputLabel id="tt-label">TT #:</InputLabel>
                       <TextField
                         id="tt"
-                  label=""
                         variant="outlined"
-                  style={{ width: '100%' }}
+                        fullWidth
-                  margin="normal"
+                        value={values?.tt || ''}
-                  required
+                        onChange={viewOnly ? null : (event) => handleChangeKV("tt", event.target.value)}
-                  name="tt"
-                  value={values?.tt}
-                  onChange={(event) => {
-                    const { value } = event.target;
-                    handleChangeKV("tt", value);
-                  }}
                         error={!!errors.tt}
                         helperText={errors.tt}
+                        disabled={viewOnly} // Disable if in read-only mode
                       />
                     </div>
-              <div>
+                  </div>
-                <InputLabel id="Wo-select-date-label">Due Date*</InputLabel>
+
+                  {/* Inputs Layout for Priority, Schedule Date, Due Date */}
+                  <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between' }}>
+                    <div style={{ flex: '1 1 30%', paddingRight: '0.5rem' }}>
+                      <InputLabel id="priority-label">Priority:</InputLabel>
+                      <Select
+                        fullWidth
+                        id="priority"
+                        value={values?.priority || ''}
+                        onChange={viewOnly ? null : (event) => handleChangeKV("priority", event.target.value)}
+                        disabled={viewOnly} // Disable if in read-only mode
+                      >
+                        {priorities.map((priority, index) => (
+                          <MenuItem value={priority.value} key={index}>
+                            {priority.text}
+                          </MenuItem>
+                        ))}
+                      </Select>
+                    </div>
+
+                    <div style={{ flex: '1 1 30%', paddingRight: '0.5rem' }}>
+                      <InputLabel id="schedule-date-label">Schedule Date:</InputLabel>
                       <TextField
-                  id="DueDate"
+                        id="scheduleDate"
-                  label=""
-                  variant="outlined"
-                  style={{ width: '100%' }}
-                  margin="normal"
-                  required
-                  name="dueDate"
                         type="date"
-                  defaultValue={ moment(values.formattedDueDate).format("YYYY-MM-DD")}
+                        fullWidth
-                  onChange={(event) => {
+                        defaultValue={moment(values?.scheduleDate).format("YYYY-MM-DD") || ''}
-                    const { value } = event.target;
+                        onChange={viewOnly ? null : (event) => handleChangeKV("scheduleDate", event.target.value)}
-                    handleChangeKV("dueDate", value);
+                        disabled={viewOnly} // Disable if in read-only mode
-                  }}
-                  error={!!errors.dueDate}
-                  helperText={errors.dueDate}
                       />
                     </div>
-              <div>
+
-                <InputLabel id="Wo-select-contact-label">POC*</InputLabel>
+                    <div style={{ flex: '1 1 30%' }}>
-                <Select
+                      <InputLabel id="due-date-label">Due Date:</InputLabel>
-                  labelId="Wo-select-contact-label"
+                      <TextField
-                  id="wo"
+                        id="dueDate"
+                        type="date"
                         fullWidth
-                  value={values.contactId}
+                        defaultValue={moment(values?.dueDate).format("YYYY-MM-DD") || ''}
-                  label=""
+                        onChange={viewOnly ? null : (event) => handleChangeKV("dueDate", event.target.value)}
-                  onChange={(event) => {
+                        disabled={viewOnly} // Disable if in read-only mode
-                    const { value } = event.target;
+                      />
-                    handleChangeKV("workOrderContacts", value?.toString());
+                    </div>
-                  }}
+                  </div>
+
+                  {/* Inputs Layout for Categories and Work Order Type */}
+                  <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between' }}>
+                    <div style={{ flex: '1 1 48%', paddingRight: '0.5rem' }}>
+                      <InputLabel id="categories-label">Categories:</InputLabel>
+                      <Select
+                        fullWidth
+                        id="categories"
+                        value={values.categoryId || ''}
+                        onChange={viewOnly ? null : (event) => handleChangeKV("workOrderCategories", event.target.value)}
+                        disabled={viewOnly} // Disable if in read-only mode
                       >
-                  {contacts.map((s, i) => (
+                        {categories.map((category) => (
-                    <MenuItem value={s.id} key={i}>
+                          <MenuItem value={category.id} key={category.id}>
-                      {s.name}
+                            {category.name}
                           </MenuItem>
                         ))}
                       </Select>
                     </div>
-              <div>
+
-                <InputLabel id="Wo-select-label">Assigned To:*</InputLabel>
+                    <div style={{ flex: '1 1 48%' }}>
+                      <InputLabel id="work-order-type-label">Work Order Type:</InputLabel>
                       <Select
-                  labelId="AssignTo-label"
-                  id="AssignTo"
                         fullWidth
-                  value={values.assignTo}
+                        id="workOrderType"
-                  label=""
+                        value={values.workOrderType || ''}
-                  onChange={(event) => {
+                        onChange={viewOnly ? null : (event) => handleChangeKV("workOrderType", event.target.value)}
-                    const { value } = event.target;
+                        disabled={viewOnly} // Disable if in read-only mode
-                    handleChangeKV("assignTo", value);
-                  }}
                       >
-                  {users.map((s, i) => (
+                        {workOrderTypes.map((type) => (
-                    <MenuItem value={s.id} key={i}>
+                          <MenuItem value={type.value} key={type.value}>
-                      {s.firstName}
-                    </MenuItem>
-                  ))}
-                </Select>
-              </div>
-              <div>
-                <InputLabel id="Wo-select-label">Priority:*</InputLabel>
-                <Select
-                  labelId="Priority-label"
-                  id="Priority"
-                  fullWidth
-                  value={values.priority}
-                  label=""
-                  onChange={(event) => {
-                    const { value } = event.target;
-                    handleChangeKV("priority", value);
-                  }}
-                >
-                  {priorities.map((s, i) => (
-                    <MenuItem value={s.value} key={i}>
-                      {s.text}
-                    </MenuItem>
-                  ))}
-                </Select>
-              </div>
-              <div>
-                <InputLabel id="work-order-type-select-label">Work Order Type:*</InputLabel>
-                <Select
-                  labelId="work-order-type-select-label"
-                  id="work-order-type-select"
-                  value={values.workOrderType}
-                  fullWidth
-                  onChange={(event) => {
-                    const { value } = event.target;
-                    handleChangeKV("workOrderType", value);
-                  }}
-                  label="Work Order Type"
-                >
-                  {workOrderTypes.map((type, index) => (
-                    <MenuItem value={type.value} key={index}>
                             {type.text}
                           </MenuItem>
                         ))}
                       </Select>
                     </div>
-              <div>
+                  </div>
-                <InputLabel id="Wo-select-label">Location:*</InputLabel>
+
+                  {/* Contact and Dispatcher */}
+                  <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between' }}>
+                    <div style={{ flex: '1 1 48%', paddingRight: '0.5rem' }}>
+                      <InputLabel id="site-contact-label">Site Contact:</InputLabel>
                       <Select
-                  id="Location"
                         fullWidth
-                  value={values.locationId}
+                        value={values.contactId || ''}
-                  label=""
+                        onChange={viewOnly ? null : (event) => handleChangeKV("workOrderContacts", event.target.value)}
-                  onChange={(event) => {
+                        disabled={viewOnly} // Disable if in read-only mode
-                    const { value } = event.target;
-                    handleChangeKV("locationId", value);
-                  }}
                       >
-                  {locations.map((s, i) => (
+                        {contacts.map((contact) => (
-                    <MenuItem value={s.id} key={i}>
+                          <MenuItem value={contact.id} key={contact.id}>
-                      {s.name}
+                            {contact.name}
                           </MenuItem>
                         ))}
                       </Select>
                     </div>
 
-              <div>
+                    <div style={{ flex: '1 1 48%' }}>
-                <InputLabel id="Wo-select-label">Categories:*</InputLabel>
+                      <InputLabel id="dispatcher-label">Dispatcher:</InputLabel>
                       <Select
-                  labelId="categories-label"
-                  id="categories"
                         fullWidth
-                  value={values.categoryId}
+                        value={values.assignTo || ''}
-                  label=""
+                        onChange={viewOnly ? null : (event) => handleChangeKV("assignTo", event.target.value)}
-                  onChange={(event) => {
+                        disabled={viewOnly} // Disable if in read-only mode
-                    const { value } = event.target;
-                    handleChangeKV("workOrderCategories", value?.toString());
-                  }}
                       >
-                  {categories.map((s, i) => (
+                        {users.map((user) => (
-                    <MenuItem value={s.id} key={i}>
+                          <MenuItem value={user.id} key={user.id}>
-                      {s.name}
+                            {user.firstName}
                           </MenuItem>
                         ))}
                       </Select>
                     </div>
+                  </div>
 
+                  {/* Location */}
+                  <div style={{ flex: '1 1 100%', paddingRight: '0.5rem' }}>
+                    <InputLabel id="location-label">Location:</InputLabel>
+                    <Select
+                      fullWidth
+                      value={values.locationId || ''}
+                      onChange={viewOnly ? null : (event) => handleChangeKV("locationId", event.target.value)}
+                      disabled={viewOnly} // Disable if in read-only mode
+                    >
+                      {locations.map((location) => (
+                        <MenuItem value={location.id} key={location.id}>
+                          {location.name}
+                        </MenuItem>
+                      ))}
+                    </Select>
+                  </div>
+                </div>
+
+                {/* Right Section for Notes, starts at the same level as Work Order Title */}
+                <div style={{ flex: '1', paddingLeft: '0.5rem', marginTop: '1.25rem' }}> {/* Added margin-top to align with the title */}
+                  <InputLabel id="notes-label">Notes:</InputLabel>
+                  <TextField
+                    id="notes"
+                    variant="outlined"
+                    multiline
+                    rows={10} // Larger textarea
+                    fullWidth
+                    value={values?.notes || ''}
+                    onChange={viewOnly ? null : (event) => handleChangeKV("notes", event.target.value)}
+                    disabled={viewOnly} // Disable if in read-only mode
+                  />
+                </div>
+              </div>
             </DialogContent>
             <DialogActions>
-              <Button onClick={handleClose}>Cancel</Button>
+              <Button onClick={handleClose}>Close</Button>
+              {!viewOnly && (
                 <SubmitButtonWithLoader
                   buttonText={BUTTON_TEXT}
                   loading={isFormLoading}
                 />
+              )}
             </DialogActions>
           </Box>
         </Dialog>

src/pages/workorder/components/Table.js

@@ -4,13 +4,36 @@ import IconButton from "@mui/material/IconButton";
 import EditOutlined from "@mui/icons-material/EditOutlined";
 import DeleteIcon from "@mui/icons-material/Delete";
 import SpeakerNotes from '@mui/icons-material/SpeakerNotes';
+import PermMediaIcon from '@mui/icons-material/PermMedia';
+import Select from "@mui/material/Select";
+import MenuItem from "@mui/material/MenuItem";
 import TableStyles from './TableStyles';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
-import PermMediaIcon from '@mui/icons-material/PermMedia';
+import { post } from '../../../apiUtil';
+import { API_URL } from '../../../constants';
 
-const TableItems = ({ items, onEditClick, onDeleteClick, onOpenNoteClick, onOpenAttachmentsClick }) => {
+export const EditStatus = (item) => post(`${API_URL}/WorkOrder/EditStatus`, item);
+export const EditAvettaTask = (item) => post(`${API_URL}/WorkOrder/EditAvettaTask`, item);
+
+const TableItems = ({ items, onEditClick, onDeleteClick, onOpenNoteClick, onOpenAttachmentsClick, onRowClickViewOnly }) => {
     const classes = TableStyles();
     
+    const statusOptions = [
+        "Open",
+        "Pending",
+        "Assigned",
+        "In Progress",
+        "On Hold",
+        "Cancelled",
+        "Completed"
+    ];
+
+    const completionOptions = [
+        "Yes, Complete",
+        "Yes, Incomplete",
+        "No" // Default option
+    ];
+
     const getMuiTheme = () => {
         return createTheme({
             components: {
@@ -19,49 +42,61 @@ const TableItems = ({ items, onEditClick, onDeleteClick, onOpenNoteClick, onOpen
                         root: {
                             backgroundColor: '#98acbf',
                             color: '#fff',
-                        }
+                            cursor: 'col-resize', // Indicate column can be resized
                         },
                     },
-                MUIDataTableSelectCell: {
-                    styleOverrides: {
-                        headerCell: {
-                            backgroundColor: '#98acbf',
-                            color: '#fff',
-                        }
-                    }
-                },
-                MUIDataTableBodyRow: {
-                    styleOverrides: {
-                        root: {
-                            '&:nth-of-type(odd)': {
-                                backgroundColor: 'rgba(0, 0, 0, 0.02)'
-                            }
-                        }
-                    },
                 },
                 MUIDataTableBodyCell: {
                     styleOverrides: {
                         root: {
                             padding: 6,
-                            wordBreak: 'break-all'
+                            wordBreak: 'break-all',
-                        }
                         },
                     },
                 },
-        })
+                MUIDataTableBodyRow: {
-    }
+                    styleOverrides: {
+                        root: {
+                            cursor: 'pointer', // Change cursor to pointer for clickable rows
+                        },
+                    },
+                },
+            },
+        });
+    };
 
+    const updateStatusOnServer = async (id, status) => {
+        try {
+            await EditStatus({ id, status });
+        } catch (error) {
+            console.error('Error updating status:', error);
+        }
+    };
+
+    const updateTaskOnServer = async (id, avettaTask) => {
+        try {
+            await EditAvettaTask({ id, avettaTask });
+        } catch (error) {
+            console.error('Error updating Avetta Task:', error);
+        }
+    };
+
+    const handleRowClick = (rowData, rowMeta) => {
+        const index = rowMeta.dataIndex;
+        const selectedItem = items[index]; // Access the original items array
+        onRowClickViewOnly({ open: true, selectedItem, viewOnly:true }); // Pass the selected item
+    };
 
     const columns = [
         {
             name: "id",
-            label: "id",
+            label: "ID",
             options: {
                 display: false,
                 filter: false,
                 sort: false,
-                viewColumns:false,
+                viewColumns: false,
-            }
+            },
         },
         {
             name: "workerOrderNumber",
@@ -70,7 +105,7 @@ const TableItems = ({ items, onEditClick, onDeleteClick, onOpenNoteClick, onOpen
                 display: true,
                 filter: false,
                 sort: true,
-            }
+            },
         },
         {
             name: "workerOrderTitle",
@@ -79,7 +114,7 @@ const TableItems = ({ items, onEditClick, onDeleteClick, onOpenNoteClick, onOpen
                 display: true,
                 filter: false,
                 sort: true,
-            }
+            },
         },
         {
             name: "assignToUserName",
@@ -88,7 +123,7 @@ const TableItems = ({ items, onEditClick, onDeleteClick, onOpenNoteClick, onOpen
                 display: true,
                 filter: true,
                 sort: false,
-            }
+            },
         },
         {
             name: "priority",
@@ -97,7 +132,7 @@ const TableItems = ({ items, onEditClick, onDeleteClick, onOpenNoteClick, onOpen
                 display: true,
                 filter: true,
                 sort: false,
-            }
+            },
         },
         {
             name: "status",
@@ -106,7 +141,58 @@ const TableItems = ({ items, onEditClick, onDeleteClick, onOpenNoteClick, onOpen
                 display: true,
                 filter: true,
                 sort: false,
-            }
+                customBodyRender: (value, tableMeta, updateValue) => {
+                    return (
+                        <Select
+                            labelId="status-select-label"
+                            id="status-select"
+                            value={value || 'Open'}
+                            onChange={async (event) => {
+                                const newStatus = event.target.value;
+                                const rowId = tableMeta.rowData[0];
+                                await updateStatusOnServer(rowId, newStatus);
+                                updateValue(newStatus);
+                            }}
+                        >
+                            {statusOptions.map((status) => (
+                                <MenuItem value={status} key={status}>
+                                    {status}
+                                </MenuItem>
+                            ))}
+                        </Select>
+                    );
+                },
+            },
+        },
+        {
+            name: "avettaTask",
+            label: "Avetta Task", // New column
+            options: {
+                display: true,
+                filter: true,
+                sort: false,
+                customBodyRender: (value, tableMeta, updateValue) => {
+                    return (
+                        <Select
+                            labelId="avetta-task-select-label"
+                            id="avetta-task-select"
+                            value={value || 'No'} // Default to 'No'
+                            onChange={async (event) => {
+                                const newAvettaTask = event.target.value;
+                                const rowId = tableMeta.rowData[0];
+                                await updateTaskOnServer(rowId, newAvettaTask); // Update server with new task status
+                                updateValue(newAvettaTask);
+                            }}
+                        >
+                            {completionOptions.map((completion) => (
+                                <MenuItem value={completion} key={completion}>
+                                    {completion}
+                                </MenuItem>
+                            ))}
+                        </Select>
+                    );
+                },
+            },
         },
         {
             name: "formattedDueDate",
@@ -115,7 +201,16 @@ const TableItems = ({ items, onEditClick, onDeleteClick, onOpenNoteClick, onOpen
                 display: true,
                 filter: true,
                 sort: false,
-            }
+            },
+        },
+        {
+            name: "formattedAssignDate",
+            label: "AssignDate",
+            options: {
+                display: true,
+                filter: true,
+                sort: false,
+            },
         },
         {
             name: "",
@@ -124,7 +219,7 @@ const TableItems = ({ items, onEditClick, onDeleteClick, onOpenNoteClick, onOpen
                 filter: false,
                 sort: false,
                 empty: true,
-                customBodyRender: (value, tableMeta, updateValue) => {
+                customBodyRender: (value, tableMeta) => {
                     return (
                         <>
                             <IconButton
@@ -133,41 +228,25 @@ const TableItems = ({ items, onEditClick, onDeleteClick, onOpenNoteClick, onOpen
                                 className={classes.IconButton}
                                 onClick={(e) => {
                                     e.stopPropagation();
-                                    const id = tableMeta.rowData[0];
+                                    const rowIndex = tableMeta.rowIndex; // Get the index of the row
-                                    const _selectedItem = tableMeta.tableData
+                                    const selectedItem = items[rowIndex]; // Access the original items array
-                                        .find(obj => obj.id == id);
+                                    onEditClick({ open: true, selectedItem }); // Pass the selected item
-                                    onEditClick({ open: true, selectedItem: _selectedItem });
                                 }}
                             >
                                 <EditOutlined />
                             </IconButton>
-                            <IconButton
-                                edge="end"
-                                aria-label="delete"
-                                className={classes.IconButton}
-                                onClick={(e) => {
-                                    e.stopPropagation();
-                                    const id = tableMeta.rowData[0];
-                                    const _selectedItem = tableMeta.tableData
-                                        .find(obj => obj.id == id);
-                                    onDeleteClick({ open: true, selectedItem: _selectedItem });
-                                }}
-                            >
-                                <DeleteIcon />
-                            </IconButton>
                             <IconButton
                                 edge="end"
                                 aria-label="history"
                                 className={classes.IconButton}
                                 onClick={(e) => {
                                     e.stopPropagation();
-                                    const id = tableMeta.rowData[0];
+                                    const rowIndex = tableMeta.rowIndex; // Get the index of the row
-                                    const _selectedItem = tableMeta.tableData
+                                    const selectedItem = items[rowIndex]; // Access the original items array
-                                        .find(obj => obj.id == id);
+                                    onOpenNoteClick({ open: true, selectedItem }); // Pass the selected item
-                                        onOpenNoteClick({ open: true, selectedItem: _selectedItem });
                                 }}
                             >
-                                <SpeakerNotes/>
+                                <SpeakerNotes />
                             </IconButton>
                             <IconButton
                                 edge="end"
@@ -175,13 +254,25 @@ const TableItems = ({ items, onEditClick, onDeleteClick, onOpenNoteClick, onOpen
                                 className={classes.IconButton}
                                 onClick={(e) => {
                                     e.stopPropagation();
-                                    const id = tableMeta.rowData[0];
+                                    const rowIndex = tableMeta.rowIndex; // Get the index of the row
-                                    const _selectedItem = tableMeta.tableData
+                                    const selectedItem = items[rowIndex]; // Access the original items array
-                                        .find(obj => obj.id == id);
+                                    onOpenAttachmentsClick({ open: true, selectedItem }); // Pass the selected item
-                                        onOpenAttachmentsClick({ open: true, selectedItem: _selectedItem });
                                 }}
                             >
-                                <PermMediaIcon/>
+                                <PermMediaIcon />
+                            </IconButton>
+                            <IconButton
+                                edge="end"
+                                aria-label="delete"
+                                className={classes.IconButton}
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    const rowIndex = tableMeta.rowIndex; // Get the index of the row
+                                    const selectedItem = items[rowIndex]; // Access the original items array
+                                    onDeleteClick({ open: true, selectedItem }); // Pass the selected item
+                                }}
+                            >
+                                <DeleteIcon />
                             </IconButton>
                         </>
                     );
@@ -190,16 +281,13 @@ const TableItems = ({ items, onEditClick, onDeleteClick, onOpenNoteClick, onOpen
         }
     ];
 
-    const handleRowClick = (rowData, rowMeta) => {
-        console.log(rowData, rowMeta);
-    };
-
     const options = {
         filterType: "checkbox",
         rowsPerPage: 50,
         rowsPerPageOptions: [50, 100, 200],
         jumpToPage: true,
         onRowClick: handleRowClick,
+        resizableColumns: true, // Enables column resizing
     };
 
     return (
@@ -212,6 +300,6 @@ const TableItems = ({ items, onEditClick, onDeleteClick, onOpenNoteClick, onOpen
             />
         </ThemeProvider>
     );
-}
+};
 
 export default React.memo(TableItems);

src/pages/workorder/edit/index.js

@@ -3,7 +3,7 @@ import Form from "../components/Form";
 import { EDIT } from "../../../constants";
 import { editItems } from "./api";
 
-const EditItemModal = ({ item, open, setOpen, isEdit, setApiStatus }) => {
+const EditItemModal = ({ item, open, setOpen, isEdit, setApiStatus, viewOnly = false }) => {
   return (
     isEdit && open && (
       <Form
@@ -13,6 +13,7 @@ const EditItemModal = ({ item, open, setOpen, isEdit, setApiStatus }) => {
         mode={EDIT}
         apiCall={editItems}
         setApiStatus={setApiStatus}
+        viewOnly = {viewOnly}
       />
     )
   );

src/pages/workorder/list/index.js

@@ -23,6 +23,11 @@ const List = () => {
     selectedItem: {},
     open: false,
   });
+  const [viewOnlyopen, setViewOnlyopen] = React.useState({
+    selectedItem: {},
+    open: false,
+    viewOnly:false,
+  });
   const [noteHistoryModalopen, setNoteHistoryModalopen] = React.useState({
     selectedItem: {},
     open: false,
@@ -80,6 +85,7 @@ const List = () => {
         onOpenNoteClick = {setNoteHistoryModalopen}
         onOpenAttachmentsClick = {setAttachmentsModalopen}
         isEmpty={isEmptyList}
+        onRowClickViewOnly = {setViewOnlyopen}
       />
       <AddModal
         open={formModalopen.open}
@@ -88,12 +94,22 @@ const List = () => {
         setApiStatus={setApiStatus}
       />
       <EditModal
+        key={"edit"}
         item={{ ...formModalopen.selectedItem }}
         open={formModalopen.open}
         setOpen={setFormModalopen}
         isEdit={isEdit}
         setApiStatus={setApiStatus}
       />
+      <EditModal
+        key={"view"}
+        item={{ ...viewOnlyopen.selectedItem }}
+        open={viewOnlyopen.viewOnly}
+        setOpen={() => setViewOnlyopen({viewOnly:false})}
+        isEdit={viewOnlyopen.viewOnly}
+        setApiStatus={setApiStatus}
+        viewOnly={viewOnlyopen.viewOnly}
+      />
       <NoteHistoryDrawer
         item={{ ...noteHistoryModalopen.selectedItem }}
         open={noteHistoryModalopen.open}

src/pages/workorder/noteHistory/NoteHistoryDrawer.js

@@ -17,14 +17,13 @@ const NoteHistoryDrawer = ({ item, open, setOpen, setApiStatus }) => {
   const [note, setNote] = useState('');
   const [noteHistory, setNoteHistory] = useState([]);
   const [comments, setComments] = useState([]);
+  const [loaded, setLoaded] = useState(false);
 
 
   const handleSubmit = async () => {
     if (note.trim()) {
       await addComments({id: item.id , Comments: [...noteHistory, note]});
-      setNoteHistory([]);
+      setLoaded(true);
-      setNote('');
-      setOpen(false);
     }
   };
 
@@ -42,7 +41,7 @@ const NoteHistoryDrawer = ({ item, open, setOpen, setApiStatus }) => {
         setComments(_comments); 
       }
     }
-  }, [item])
+  }, [item,loaded])
 
   return (
     <div>