From 8c85d614647e7ff99be0b76a8ed1104a1fdc4283 Mon Sep 17 00:00:00 2001
From: Raison-mathew <Raison.Mathew@ibm.com>
Date: Fri, 18 Jul 2025 12:15:43 +0530
Subject: [PATCH 1/5] style changes

---
 src/App.css                         | 1 -
 src/App.jsx                         | 8 +++++---
 src/components/AppHeader.jsx        | 4 ++--
 src/components/AutoTarget.jsx       | 3 +--
 src/components/BuildStatusTable.jsx | 5 ++---
 5 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/App.css b/src/App.css
index 9db7ca1..77f482a 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,5 +1,4 @@
 #root {
-  max-width: 1280px;
   padding: 2rem;
 }
 
diff --git a/src/App.jsx b/src/App.jsx
index e3ad0bf..ed331e7 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -56,9 +56,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>
+        
       </div> 
     </>
   )
diff --git a/src/components/AppHeader.jsx b/src/components/AppHeader.jsx
index 553ffa2..4931111 100644
--- a/src/components/AppHeader.jsx
+++ b/src/components/AppHeader.jsx
@@ -14,12 +14,12 @@ const AppHeader = () => {
                 <HeaderMenuItem>
                     Home
                 </HeaderMenuItem>
-                <HeaderMenuItem>
+                {/* <HeaderMenuItem>
                     Notification
                 </HeaderMenuItem>
                 <HeaderMenuItem>
                     Docs
-                </HeaderMenuItem>
+                </HeaderMenuItem> */}
             </HeaderNavigation>
             
         </Header>
diff --git a/src/components/AutoTarget.jsx b/src/components/AutoTarget.jsx
index 89f7c01..52dd352 100644
--- a/src/components/AutoTarget.jsx
+++ b/src/components/AutoTarget.jsx
@@ -68,8 +68,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}>
         {() => (
diff --git a/src/components/BuildStatusTable.jsx b/src/components/BuildStatusTable.jsx
index e96a2b0..8891193 100644
--- a/src/components/BuildStatusTable.jsx
+++ b/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>

From 5584e968e81cd49bb170a79e35d245021888e6b9 Mon Sep 17 00:00:00 2001
From: Ajeesh <Ajeesh.George@ibm.com>
Date: Fri, 18 Jul 2025 12:32:08 +0530
Subject: [PATCH 2/5] dashboard grid

---
 src/App.jsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/App.jsx b/src/App.jsx
index ed331e7..cba3e76 100644
--- a/src/App.jsx
+++ b/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" },
@@ -60,7 +62,8 @@ function App() {
           <BuildStatusTable></BuildStatusTable>
           <AutoTargetTable></AutoTargetTable>
         </div>
-        
+          <DashboardGrid></DashboardGrid>
+          <BottomGrid></BottomGrid>
       </div> 
     </>
   )

From 806ae829c1f53001cb1a1203db30e5e7fb0e1b1b Mon Sep 17 00:00:00 2001
From: Ajeesh <Ajeesh.George@ibm.com>
Date: Fri, 18 Jul 2025 12:32:22 +0530
Subject: [PATCH 3/5] Dashboard components

---
 src/components/BottomGrid.jsx    | 96 ++++++++++++++++++++++++++++++++
 src/components/DashboardGrid.jsx | 88 +++++++++++++++++++++++++++++
 2 files changed, 184 insertions(+)
 create mode 100644 src/components/BottomGrid.jsx
 create mode 100644 src/components/DashboardGrid.jsx

diff --git a/src/components/BottomGrid.jsx b/src/components/BottomGrid.jsx
new file mode 100644
index 0000000..c49e5b6
--- /dev/null
+++ b/src/components/BottomGrid.jsx
@@ -0,0 +1,96 @@
+/* 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: '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: '2rem', 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;
diff --git a/src/components/DashboardGrid.jsx b/src/components/DashboardGrid.jsx
new file mode 100644
index 0000000..4aff9a6
--- /dev/null
+++ b/src/components/DashboardGrid.jsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import { Button, TextInput } from '@carbon/react';
+import { Play } from "@carbon/icons-react";
+
+const data = [
+  { id: '905', version: '25', autoStatus: 'OFF', autoScheduleStatus: 'OFF' },
+  { id: '855', version: '28', autoStatus: 'OFF', autoScheduleStatus: 'ON' },
+];
+
+const DashboardGrid = () => {
+  return (
+    <div className="dashboard-grid" style={{ display: 'flex', gap: '2rem' }}>
+      {/* Build Basics Table */}
+      <div style={{ border: '1px solid black', padding: '1rem' }}>
+        <table className="cds--data-table">
+          <thead>
+            <tr>
+              <th>Build Basics</th>
+              <th>Manual</th>
+              <th>Auto</th>
+            </tr>
+          </thead>
+          <tbody>
+            {data.map((row) => (
+              <tr key={`build-${row.id}`}>
+                <td>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                    <span>{row.id}</span>
+                    <TextInput
+                      id={`version-${row.id}`}
+                      labelText=""
+                      placeholder="Enter Version Eg: 25"
+                      size="sm"
+                    />
+                  </div>
+                </td>
+                <td>
+                     <Button
+                        renderIcon={Play}
+                        kind="tertiary"
+                        size="sm"
+                        iconDescription="Commit"
+                      >
+                        Start
+                      </Button>
+                </td>
+                <td>Status: {row.autoStatus}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Test Record Verification Table */}
+      <div style={{ border: '1px solid black', padding: '1rem' }}>
+        <table className="cds--data-table">
+          <thead>
+            <tr>
+              <th>Test Record Verification</th>
+              <th>Manual</th>
+              <th>Auto</th>
+            </tr>
+          </thead>
+          <tbody>
+            {data.map((row) => (
+              <tr key={`verify-${row.id}`}>
+                <td>{row.id}</td>
+                <td>
+                     <Button
+                        renderIcon={Play}
+                        kind="tertiary"
+                        size="sm"
+                        iconDescription="Commit"
+                      >
+                        Start
+                      </Button>
+                </td>
+                <td>Status: {row.autoScheduleStatus}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default DashboardGrid;

From e135b510bf7da34a122b133cd2088a6bc50792a1 Mon Sep 17 00:00:00 2001
From: Raison-mathew <Raison.Mathew@ibm.com>
Date: Fri, 18 Jul 2025 13:03:26 +0530
Subject: [PATCH 4/5] more changes

---
 src/App.jsx                   |  1 -
 src/components/AutoTarget.jsx | 26 ++++++++--------
 src/components/BottomGrid.jsx | 12 +++++++-
 src/components/InfoTable.jsx  | 57 ++++++++++++++++++-----------------
 4 files changed, 55 insertions(+), 41 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index cba3e76..3497465 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -62,7 +62,6 @@ function App() {
           <BuildStatusTable></BuildStatusTable>
           <AutoTargetTable></AutoTargetTable>
         </div>
-          <DashboardGrid></DashboardGrid>
           <BottomGrid></BottomGrid>
       </div> 
     </>
diff --git a/src/components/AutoTarget.jsx b/src/components/AutoTarget.jsx
index 52dd352..5d9a74f 100644
--- a/src/components/AutoTarget.jsx
+++ b/src/components/AutoTarget.jsx
@@ -17,6 +17,7 @@ import {
 } from "@carbon/react";
 import { Play, Renew, Calendar } from "@carbon/icons-react";
 
+
 const initialRows = [
   {
     id: 1,
@@ -140,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>
         )}
diff --git a/src/components/BottomGrid.jsx b/src/components/BottomGrid.jsx
index c49e5b6..4015560 100644
--- a/src/components/BottomGrid.jsx
+++ b/src/components/BottomGrid.jsx
@@ -6,6 +6,16 @@ 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,
@@ -30,7 +40,7 @@ const tables = [
 
 const BottomGrid = () => {
   return (
-    <div className="dashboard-grid" style={{ display: 'flex', gap: '2rem', flexWrap: 'wrap' }}>
+    <div className="dashboard-grid" style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
       {tables.map((table, index) => (
         <div
           key={table.title}
diff --git a/src/components/InfoTable.jsx b/src/components/InfoTable.jsx
index 41dd23f..f2a8edb 100644
--- a/src/components/InfoTable.jsx
+++ b/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>
+    
+  )
     
 }
 

From 5d894848d743f0ff8dd6269f3f1a05ce176320b4 Mon Sep 17 00:00:00 2001
From: Raison-mathew <Raison.Mathew@ibm.com>
Date: Fri, 18 Jul 2025 13:04:33 +0530
Subject: [PATCH 5/5] deleted unwnated files

---
 src/components/DashboardGrid.jsx | 88 --------------------------------
 1 file changed, 88 deletions(-)
 delete mode 100644 src/components/DashboardGrid.jsx

diff --git a/src/components/DashboardGrid.jsx b/src/components/DashboardGrid.jsx
deleted file mode 100644
index 4aff9a6..0000000
--- a/src/components/DashboardGrid.jsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import React from 'react';
-import { Button, TextInput } from '@carbon/react';
-import { Play } from "@carbon/icons-react";
-
-const data = [
-  { id: '905', version: '25', autoStatus: 'OFF', autoScheduleStatus: 'OFF' },
-  { id: '855', version: '28', autoStatus: 'OFF', autoScheduleStatus: 'ON' },
-];
-
-const DashboardGrid = () => {
-  return (
-    <div className="dashboard-grid" style={{ display: 'flex', gap: '2rem' }}>
-      {/* Build Basics Table */}
-      <div style={{ border: '1px solid black', padding: '1rem' }}>
-        <table className="cds--data-table">
-          <thead>
-            <tr>
-              <th>Build Basics</th>
-              <th>Manual</th>
-              <th>Auto</th>
-            </tr>
-          </thead>
-          <tbody>
-            {data.map((row) => (
-              <tr key={`build-${row.id}`}>
-                <td>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-                    <span>{row.id}</span>
-                    <TextInput
-                      id={`version-${row.id}`}
-                      labelText=""
-                      placeholder="Enter Version Eg: 25"
-                      size="sm"
-                    />
-                  </div>
-                </td>
-                <td>
-                     <Button
-                        renderIcon={Play}
-                        kind="tertiary"
-                        size="sm"
-                        iconDescription="Commit"
-                      >
-                        Start
-                      </Button>
-                </td>
-                <td>Status: {row.autoStatus}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-
-      {/* Test Record Verification Table */}
-      <div style={{ border: '1px solid black', padding: '1rem' }}>
-        <table className="cds--data-table">
-          <thead>
-            <tr>
-              <th>Test Record Verification</th>
-              <th>Manual</th>
-              <th>Auto</th>
-            </tr>
-          </thead>
-          <tbody>
-            {data.map((row) => (
-              <tr key={`verify-${row.id}`}>
-                <td>{row.id}</td>
-                <td>
-                     <Button
-                        renderIcon={Play}
-                        kind="tertiary"
-                        size="sm"
-                        iconDescription="Commit"
-                      >
-                        Start
-                      </Button>
-                </td>
-                <td>Status: {row.autoScheduleStatus}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  );
-};
-
-export default DashboardGrid;