Development

src/App.css

@@ -1,5 +1,4 @@
 #root {
-  max-width: 1280px;
   padding: 2rem;
 }
 

src/App.jsx

@@ -5,6 +5,8 @@ import InfoTable from './components/InfoTable'
 import AutoTargetTable from './components/AutoTarget';
 import BuildStatusTable from './components/BuildStatusTable';
 import BuildEngineeringDashboard from './components/BuildEngineeringDashboard';
+import DashboardGrid from './components/DashboardGrid';
+import BottomGrid from './components/BottomGrid';
 
 const scheduleHeaders = [
   { key: "schedule", header: "Schedule" },
@@ -56,9 +58,11 @@ function App() {
       <div style={{padding: '2rem'}}>
         <InfoTable headers={scheduleHeaders} rows={scheduleRows}></InfoTable>
          {/* <InfoTable headers={buildStatusHeaders} rows={buildStatusRows}></InfoTable> */}
-        <BuildStatusTable></BuildStatusTable>
-         <AutoTargetTable></AutoTargetTable>
-
+        <div style={{display: "inline-flex", width: "100%"}}>
+          <BuildStatusTable></BuildStatusTable>
+          <AutoTargetTable></AutoTargetTable>
+        </div>
+          <BottomGrid></BottomGrid>
       </div> 
     </>
   )

src/components/AppHeader.jsx

@@ -14,12 +14,12 @@ const AppHeader = () => {
                 <HeaderMenuItem>
                     Home
                 </HeaderMenuItem>
-                <HeaderMenuItem>
+                {/* <HeaderMenuItem>
                     Notification
                 </HeaderMenuItem>
                 <HeaderMenuItem>
                     Docs
-                </HeaderMenuItem>
+                </HeaderMenuItem> */}
             </HeaderNavigation>
 
         </Header>

src/components/AutoTarget.jsx

@@ -17,6 +17,7 @@ import {
 } from "@carbon/react";
 import { Play, Renew, Calendar } from "@carbon/icons-react";
 
+
 const initialRows = [
   {
     id: 1,
@@ -68,8 +69,7 @@ const AutoTargetTable = () => {
   };
 
   return (
-    <div className="bx--grid" style={{ maxWidth: "1000px", margin: "auto" }}>
-      <h4>Auto Target - Status: OFF</h4>
+    <div className="bx--grid" style={{ width: "50%", margin: "10px"}}>
 
       <DataTable rows={[]} headers={[]} isSortable={false}>
         {() => (
@@ -141,21 +141,22 @@ const AutoTargetTable = () => {
                     <TableCell>Ready to Target</TableCell>
                     <TableCell>{row.readyToTarget}</TableCell>
                     <TableCell />
-                    <TableCell>
-                      {row.id === 2 && (
-                        <Button
-                          renderIcon={Renew}
-                          size="sm"
-                          kind="ghost"
-                          iconDescription="Refresh"
-                        >
-                          Refresh
-                        </Button>
-                      )}
-                    </TableCell>
+                    <TableCell/>
                   </TableRow>
                 </React.Fragment>
               ))}
+              <TableRow>
+                <TableCell colSpan={3} />
+                <TableCell>
+                    <Button
+                      renderIcon={Renew}
+                      size="sm"
+                      kind="ghost"
+                      iconDescription="Refresh">
+                      Refresh
+                    </Button>
+                </TableCell>
+              </TableRow>
             </TableBody>
           </Table>
         )}

src/components/BottomGrid.jsx

@@ -0,0 +1,106 @@
+/* eslint-disable no-unused-vars */
+import React from 'react';
+import { Button, TextInput } from '@carbon/react';
+import { Play } from "@carbon/icons-react";
+
+const buildIds = ['905', '855'];
+
+const tables = [
+  {
+    title: 'Build Basics',
+    hasInput: true,
+    autoStatuses: ['OFF', 'OFF'],
+  },
+  {
+    title: 'Test Record Verification',
+    hasInput: false,
+    autoStatuses: ['OFF', 'OFF'],
+  },
+  {
+    title: 'Ifix Enable',
+    hasInput: true,
+    autoStatuses: ['OFF', 'OFF'],
+  },
+  {
+    title: 'APAR List Integration',
+    hasInput: true,
+    autoStatuses: ['OFF', 'OFF'],
+  },
+  {
+    title: 'Ship the Published Builds',
+    hasInput: false,
+    autoStatuses: ['OFF', 'ON'],
+  },
+  {
+    title: 'PKG Build',
+    hasInput: true,
+    autoStatuses: ['OFF', 'ON'],
+  },
+];
+
+const BottomGrid = () => {
+  return (
+    <div className="dashboard-grid" style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
+      {tables.map((table, index) => (
+        <div
+          key={table.title}
+          style={{
+            border: '1px solid black',
+            padding: '1rem',
+            minWidth: '300px',
+            flexGrow: 1,
+          }}
+        >
+          <table className="cds--data-table">
+            <thead>
+              <tr>
+                <th>{table.title}</th>
+                <th>Manual</th>
+                <th>Auto</th>
+              </tr>
+            </thead>
+            <tbody>
+              {buildIds.map((id, idx) => (
+                <tr key={`${table.title}-${id}`}>
+                  <td>
+                    <div
+                      style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '0.5rem',
+                        whiteSpace: 'nowrap',
+                      }}
+                    >
+                      <span>{id}</span>
+                      {table.hasInput && (
+                        <TextInput
+                          id={`${table.title}-${id}`}
+                          labelText=""
+                          placeholder={`Enter Version Eg: ${id === '905' ? '25' : '28'}`}
+                          size="sm"
+                        />
+                      )}
+                    </div>
+                  </td>
+                  <td>
+                     <Button
+                        renderIcon={Play}
+                        kind="tertiary"
+                        size="sm"
+                        iconDescription="Commit"
+                      >
+                        Start
+                      </Button>
+                  </td>
+                  <td>Status: {table.autoStatuses[idx]}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default BottomGrid;

src/components/BuildStatusTable.jsx

@@ -72,10 +72,9 @@ const BuildStatusTable = () => {
   };
 
   return (
-    <div className="bx--grid" style={{ maxWidth: "1000px", margin: "auto" }}>
-      <h4>Build Status Table</h4>
+    <div className="bx--grid" style={{ width: "50%", margin: "10px" }}>
 
-      <DataTable rows={[]} headers={[]} isSortable={false}>
+      <DataTable rows={[]} headers={[]} isSortable={false} >
         {() => (
           <Table>
             <TableHead>

src/components/InfoTable.jsx

@@ -16,35 +16,38 @@ import {
 
 const InfoTable = ({ headers, rows, title, renderers = {} }) => {
    return (
-    <DataTable rows={rows} headers={headers} isSortable={false}>
-      {({ rows, headers, getHeaderProps }) => (
-        <TableContainer title={title}>
-          <Table size="sm">
-            <TableHead>
-              <TableRow>
-                {headers.map((header) => (
-                  <TableHeader key={header.key} {...getHeaderProps({ header })}>
-                    {header.header}
-                  </TableHeader>
-                ))}
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {rows.map((row) => (
-                <TableRow key={row.id}>
-                  {row.cells.map((cell) => (
-                    <TableCell key={cell.id}>
-                      {renderers[cell.info.header] ? renderers[cell.info.header](row) : cell.value}
-                    </TableCell>
+    <div style={{marginBottom: "20px"}}>
+      <DataTable rows={rows} headers={headers} isSortable={false}>
+        {({ rows, headers, getHeaderProps }) => (
+          <TableContainer title={title}>
+            <Table size="sm">
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader key={header.key} {...getHeaderProps({ header })}>
+                      {header.header}
+                    </TableHeader>
                   ))}
                 </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </TableContainer>
-      )}
-    </DataTable>
-   )
+              </TableHead>
+              <TableBody>
+                {rows.map((row) => (
+                  <TableRow key={row.id}>
+                    {row.cells.map((cell) => (
+                      <TableCell key={cell.id}>
+                        {renderers[cell.info.header] ? renderers[cell.info.header](row) : cell.value}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      </DataTable>
+    </div>
+
+  )
 
 }