improve modal table

frontend/src/App.tsx

@@ -63,17 +63,32 @@ function App() {
             <thead>
               <tr>
                 <th>#</th>
+                <th>Region</th>
+                <th>Fixes</th>
+                <th></th>
               </tr>
             </thead>
             <tbody>
-              {regions.length ? regions.map((region, idx) => <tr key={idx}>
+              {regions.length ? regions.map((region, idx) => <>
-                <td>{idx + 1}</td>
+                <tr key={idx}>
-                <td>{region.identifier}</td>
+                  <td>{idx + 1}</td>
-                <td>{region.fixes.length} Fixes</td>
+                  <td>{region.identifier}</td>
-                <td><Button variant='primary' type='button' onClick={() => setSelectedRegion(region.identifier)}>Select</Button></td>
+                  <td>{region.fixes.length} Fixes</td>
-              </tr>) : <>
+                  <td>
-                  <tr><td className='p-2 text-center' colSpan={5}>- no regions defined -</td></tr>
+                    <Button
-              </>}
+                      variant={selectedRegion == region.identifier ? 'success' : 'primary'}
+                      type='button'
+                      onClick={() => setSelectedRegion(region.identifier)}
+                    >
+                      Select
+                    </Button>
+                  </td>
+                </tr>
+              </>) : (<>
+                <tr>
+                  <td className='p-2 text-center' colSpan={4}>- no regions defined -</td>
+                </tr>
+              </>)}
             </tbody>
           </Table>
         </Modal.Body>