Update

frontend/hospital-portal/src/components/Table.tsx

@@ -28,7 +28,8 @@ import {
   Divider,
   IconButton,
   Modal,
-  CircularProgress
+  CircularProgress,
+  Container, Alert, AlertTitle
 } from '@mui/material';
 
 import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
@@ -339,6 +340,16 @@ const allowedStatusesForCSLMS = ['waiting_pharmacy', 'order_prepared', 'ready',
   return (
     // <Card>
       <Grid container>
+        {/* Check if any row has an alert and display a warning message */}
+        {rows.some(row => row.alert) && (
+            <Grid item xs={12} paddingX="24px" paddingY="20px">
+                <Alert severity="error">
+                    <AlertTitle>{localeData.txtAttention}</AlertTitle>
+                    {localeData.txtAttentionInfo}
+                </Alert>
+            </Grid>
+
+        )}
         {/* Field 1 */}
         <Grid item xs={12} paddingX="24px" paddingY="20px">
           <Grid container spacing={2}>
@@ -530,6 +541,7 @@ const allowedStatusesForCSLMS = ['waiting_pharmacy', 'order_prepared', 'ready',
           {/* Table */}
           <TableContainer component={Paper}>
             <TableContent aria-label="collapsible table" size="small">
+
               {/* Table Header */}
               <EnhancedTableHead />
               {/* End Table Header */}
@@ -544,7 +556,10 @@ const allowedStatusesForCSLMS = ['waiting_pharmacy', 'order_prepared', 'ready',
                 ) : rows && rows.length >= 1 ? (
                   rows.map((row, rowIndex) => (
                     <>
-                    <TableRow key={rowIndex}>
+                    <TableRow
+                        key={rowIndex}
+                        style={{ backgroundColor: row.alert ? '#fff3cd' : '#fff'}}
+                    >
                       {!selected.useSelected ? (
                          ''
                       ): (selected.useSelected && row.check_status === 'approved' && !row.check_claim ? (
@@ -651,6 +666,11 @@ const allowedStatusesForCSLMS = ['waiting_pharmacy', 'order_prepared', 'ready',
                         <TableCell colSpan={7}>
                             <Collapse in={openRowId === row.id} timeout="auto" unmountOnExit>
                                 <Card sx={{padding:2}}>
+                                    <Stack direction="row" alignItems="center" justifyContent="right">
+                                        <IconButton sx={{ color: 'black' }}  onClick={() => setOpenRowId(null)}>
+                                            <CloseIcon />
+                                        </IconButton>
+                                    </Stack>
                                     {/* Icon inside a Box for spacing and alignment */}
                                     <Stack direction="row" padding={2} justifyContent="space-between" alignItems="center">
                                         <Stack direction="row">
@@ -922,9 +942,9 @@ const allowedStatusesForCSLMS = ['waiting_pharmacy', 'order_prepared', 'ready',
 
                                     <Box sx={{ display: 'flex', justifyContent: 'space-between', padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
                                         {/* Close Button on the Left */}
-                                        <Button variant="outlined" color="inherit" onClick={() => setOpenRowId(null)}>
+                                        {/* <Button variant="outlined" color="inherit" onClick={() => setOpenRowId(null)}>
                                             {localeData.txtButtonClose}
-                                        </Button>
+                                        </Button> */}
                                         {/* Accept Button on the Right */}
                                         {/* {row.button_accept && formattedRoleName === 'admin-apotek' && allowedStatusesForApotek.includes(row.sStatus) ? (
                                             <Button variant="contained" color="primary" onClick={() => setDialogIDRow(row.id === dialogIDRow ? null : row.id)}>