feat: Add action summary to push view

src/ui/components/CustomTabs/CustomTabs.tsx

@@ -24,6 +24,7 @@ import CardBody from '../Card/CardBody';
 import CardHeader from '../Card/CardHeader';
 import styles from '../../assets/jss/material-dashboard-react/components/customTabsStyle';
 import { SvgIconProps } from '@material-ui/core';
+import Badge from '@material-ui/core/Badge';
 
 const useStyles = makeStyles(styles as any);
 
@@ -33,6 +34,7 @@ export type TabItem = {
   tabName: string;
   tabIcon?: React.ComponentType<SvgIconProps>;
   tabContent: React.ReactNode;
+  badge?: number;
 };
 
 interface CustomTabsProps {
@@ -81,6 +83,13 @@ const CustomTabs: React.FC<CustomTabsProps> = ({
         >
           {tabs.map((prop, key) => {
             const icon = prop.tabIcon ? { icon: <prop.tabIcon /> } : {};
+            const label = prop.badge ? (
+              <Badge badgeContent={prop.badge} color='error'>
+                {prop.tabName}
+              </Badge>
+            ) : (
+              prop.tabName
+            );
             return (
               <Tab
                 classes={{
@@ -89,7 +98,7 @@ const CustomTabs: React.FC<CustomTabsProps> = ({
                   wrapper: classes.tabWrapper,
                 }}
                 key={key}
-                label={prop.tabName}
+                label={label}
                 {...icon}
               />
             );

src/ui/views/PushDetails/PushDetails.tsx

@@ -24,25 +24,24 @@ import Card from '../../components/Card/Card';
 import CardIcon from '../../components/Card/CardIcon';
 import CardBody from '../../components/Card/CardBody';
 import CardHeader, { CardHeaderColor } from '../../components/Card/CardHeader';
-import CardFooter from '../../components/Card/CardFooter';
 import Button from '../../components/CustomButtons/Button';
+import CustomTabs from '../../components/CustomTabs/CustomTabs';
+import CommitDataTable from './components/CommitDataTable';
 import Diff from './components/Diff';
+import StepsTimeline from './components/StepsTimeline';
 import Attestation from './components/Attestation';
 import AttestationInfo from './components/AttestationInfo';
 import RejectionInfo from './components/RejectionInfo';
 import Reject from './components/Reject';
-import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableHead from '@material-ui/core/TableHead';
-import TableRow from '@material-ui/core/TableRow';
-import TableCell from '@material-ui/core/TableCell';
 import { getPush, authorisePush, rejectPush, cancelPush } from '../../services/git-push';
 import type { ServiceResult } from '../../services/errors';
-import { CheckCircle, Visibility, Cancel, Block } from '@material-ui/icons';
+import { CheckCircle, Visibility, Cancel, Block, List as ListIcon } from '@material-ui/icons';
+import CodeIcon from '@material-ui/icons/Code';
+import TimelineIcon from '@material-ui/icons/Timeline';
 import Snackbar from '@material-ui/core/Snackbar';
 import { PushActionView } from '../../types';
 import { trimPrefixRefsHeads, trimTrailingDotGit } from '../../../db/helper';
-import { generateEmailLink, getGitProvider } from '../../utils';
+import { getGitProvider } from '../../utils';
 
 const Dashboard: React.FC = () => {
   const { id } = useParams<{ id: string }>();
@@ -115,6 +114,8 @@ const Dashboard: React.FC = () => {
   if (isError) throw new Error(message || 'Something went wrong ...');
   if (!push) return <div>No push data found</div>;
 
+  const errorCount = push.steps?.filter((step) => step.error).length ?? 0;
+
   let headerData: { title: string; color: CardHeaderColor } = {
     title: 'Pending',
     color: 'warning',
@@ -249,44 +250,29 @@ const Dashboard: React.FC = () => {
               </GridContainer>
             </CardBody>
           </Card>
-          <Card>
-            <CardHeader color={headerData.color} stats icon>
-              <h3>{headerData.title}</h3>
-            </CardHeader>
-            <CardBody>
-              <Table>
-                <TableHead>
-                  <TableRow>
-                    <TableCell>Timestamp</TableCell>
-                    <TableCell>Committer</TableCell>
-                    <TableCell>Author</TableCell>
-                    <TableCell>Message</TableCell>
-                  </TableRow>
-                </TableHead>
-                <TableBody>
-                  {push.commitData?.map((c) => (
-                    <TableRow key={c.commitTimestamp}>
-                      <TableCell>
-                        {moment.unix(Number(c.commitTimestamp || 0)).toString()}
-                      </TableCell>
-                      <TableCell>{generateEmailLink(c.committer, c.committerEmail)}</TableCell>
-                      <TableCell>{generateEmailLink(c.author, c.authorEmail)}</TableCell>
-                      <TableCell>{c.message}</TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </CardBody>
-          </Card>
         </GridItem>
         <GridItem xs={12} sm={12} md={12}>
-          <Card>
-            <CardHeader />
-            <CardBody>
-              <Diff diff={push.diff.content} />
-            </CardBody>
-            <CardFooter />
-          </Card>
+          <CustomTabs
+            headerColor='primary'
+            tabs={[
+              {
+                tabName: 'Commits',
+                tabIcon: ListIcon,
+                tabContent: <CommitDataTable commitData={push.commitData || []} />,
+              },
+              {
+                tabName: 'Changes',
+                tabIcon: CodeIcon,
+                tabContent: <Diff diff={push.diff?.content || ''} />,
+              },
+              {
+                tabName: 'Steps',
+                tabIcon: TimelineIcon,
+                tabContent: <StepsTimeline steps={push.steps ?? []} />,
+                badge: errorCount > 0 ? errorCount : undefined,
+              },
+            ]}
+          />
         </GridItem>
       </GridContainer>
     </div>

src/ui/views/PushDetails/components/CommitDataTable.tsx

@@ -0,0 +1,60 @@
+/**
+ * Copyright 2026 GitProxy Contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import moment from 'moment';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import TableCell from '@material-ui/core/TableCell';
+import { generateEmailLink } from '../../../utils';
+import { CommitData } from '../../../../proxy/processors/types';
+
+interface CommitDataTableProps {
+  commitData: CommitData[];
+}
+
+const CommitDataTable: React.FC<CommitDataTableProps> = ({ commitData }) => {
+  if (commitData.length === 0) {
+    return <p>No commits found for this push.</p>;
+  }
+
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableCell>Timestamp</TableCell>
+          <TableCell>Committer</TableCell>
+          <TableCell>Author</TableCell>
+          <TableCell>Message</TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {commitData.map((c) => (
+          <TableRow key={c.commitTimestamp}>
+            <TableCell>{moment.unix(Number(c.commitTimestamp || 0)).toString()}</TableCell>
+            <TableCell>{generateEmailLink(c.committer, c.committerEmail)}</TableCell>
+            <TableCell>{generateEmailLink(c.author, c.authorEmail)}</TableCell>
+            <TableCell>{c.message}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+};
+
+export default CommitDataTable;