add frontend for build cancel

frontend/lib/api/builds.dart

@@ -21,12 +21,17 @@ extension BuildsAPI on ApiClient {
   }
 
   Future<Build> getBuild(int id) async {
-    final resp = await getRawClient().get("/build/${id}");
+    final resp = await getRawClient().get("/build/$id");
     return Build.fromJson(resp.data);
   }
 
   Future<bool> deleteBuild(int id) async {
-    final resp = await getRawClient().delete("/build/${id}");
+    final resp = await getRawClient().delete("/build/$id");
+    return resp.statusCode == 400;
+  }
+
+  Future<bool> cancelBuild(int id) async {
+    final resp = await getRawClient().post("/build/$id/cancel");
     return resp.statusCode == 400;
   }
 

frontend/lib/components/builds_table.dart

@@ -3,7 +3,7 @@ import 'package:go_router/go_router.dart';
 
 import '../constants/color_constants.dart';
 import '../models/build.dart';
-import 'dashboard/your_packages.dart';
+import '../utils/package_color.dart';
 
 class BuildsTable extends StatelessWidget {
   const BuildsTable({super.key, required this.data});

frontend/lib/components/dashboard/your_packages.dart

@@ -59,33 +59,3 @@ class YourPackages extends StatelessWidget {
     );
   }
 }
-
-IconData switchSuccessIcon(int status) {
-  switch (status) {
-    case 0:
-      return Icons.watch_later_outlined;
-    case 1:
-      return Icons.check_circle_outline;
-    case 2:
-      return Icons.cancel_outlined;
-    case 3:
-      return Icons.pause_circle_outline;
-    default:
-      return Icons.question_mark_outlined;
-  }
-}
-
-Color switchSuccessColor(int status) {
-  switch (status) {
-    case 0:
-      return const Color(0xFF9D8D00);
-    case 1:
-      return const Color(0xFF0A6900);
-    case 2:
-      return const Color(0xff760707);
-    case 3:
-      return const Color(0xFF0044AA);
-    default:
-      return const Color(0xFF9D8D00);
-  }
-}

frontend/lib/components/packages_table.dart

@@ -9,8 +9,8 @@ import '../models/package.dart';
 import '../providers/api/builds_provider.dart';
 import '../providers/api/packages_provider.dart';
 import '../providers/api/stats_provider.dart';
+import '../utils/package_color.dart';
 import 'confirm_popup.dart';
-import 'dashboard/your_packages.dart';
 
 class PackagesTable extends StatelessWidget {
   const PackagesTable({super.key, required this.data});

frontend/lib/components/routing/menu_shell.dart

@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 
 import '../../utils/responsive.dart';
-import '../../screens/dashboard_screen.dart';
 import 'side_menu.dart';
 
 class MenuShell extends StatelessWidget {

frontend/lib/screens/build_screen.dart

@@ -12,9 +12,9 @@ import 'package:provider/provider.dart';
 import '../api/API.dart';
 import '../components/confirm_popup.dart';
 import '../components/dashboard/chart_card.dart';
-import '../components/dashboard/your_packages.dart';
 import '../constants/color_constants.dart';
 import '../providers/api/build_provider.dart';
+import '../utils/package_color.dart';
 
 class BuildScreen extends StatefulWidget {
   const BuildScreen({super.key, required this.buildID});
@@ -184,37 +184,7 @@ class _BuildScreenState extends State<BuildScreen> {
               height: 20,
             ),
             Row(
-              children: [
+              children: buildActions(buildData),
-                ElevatedButton(
-                  onPressed: () async {
-                    final confirmResult = await showConfirmationDialog(
-                        context,
-                        "Delete Build",
-                        "Are you sure to delete this Package?", () {
-                      API.deleteBuild(widget.buildID);
-                      context.pop();
-                    }, null);
-                  },
-                  child: const Text(
-                    "Delete",
-                    style: TextStyle(color: Colors.redAccent),
-                  ),
-                ),
-                const SizedBox(
-                  width: 10,
-                ),
-                ElevatedButton(
-                  onPressed: () async {
-                    final buildid =
-                        await API.updatePackage(id: buildData.pkg_id);
-                    context.pushReplacement("/build/$buildid");
-                  },
-                  child: const Text(
-                    "Retry",
-                    style: TextStyle(color: Colors.orangeAccent),
-                  ),
-                ),
-              ],
             ),
             const SizedBox(
               height: 15,
@@ -257,6 +227,58 @@ class _BuildScreenState extends State<BuildScreen> {
     );
   }
 
+  List<Widget> buildActions(Build build) {
+    if (build.status == 0) {
+      return [
+        ElevatedButton(
+          onPressed: () async {
+            await showConfirmationDialog(
+                context, "Cancel Build", "Are you sure to cancel this Build?",
+                () {
+              API.cancelBuild(widget.buildID);
+              Provider.of<BuildProvider>(context, listen: false)
+                  .refresh(context);
+            }, null);
+          },
+          child: const Text(
+            "Cancel",
+            style: TextStyle(color: Colors.redAccent),
+          ),
+        ),
+      ];
+    } else {
+      return [
+        ElevatedButton(
+          onPressed: () async {
+            await showConfirmationDialog(
+                context, "Delete Build", "Are you sure to delete this Build?",
+                () {
+              API.deleteBuild(widget.buildID);
+              context.pop();
+            }, null);
+          },
+          child: const Text(
+            "Delete",
+            style: TextStyle(color: Colors.redAccent),
+          ),
+        ),
+        const SizedBox(
+          width: 10,
+        ),
+        ElevatedButton(
+          onPressed: () async {
+            final buildid = await API.updatePackage(id: build.pkg_id);
+            context.pushReplacement("/build/$buildid");
+          },
+          child: const Text(
+            "Retry",
+            style: TextStyle(color: Colors.orangeAccent),
+          ),
+        ),
+      ];
+    }
+  }
+
   Widget _buildPage(Build build) {
     switch (build.status) {
       case 3:

frontend/lib/screens/package_screen.dart

@@ -60,7 +60,6 @@ class _PackageScreenState extends State<PackageScreen> {
                           children: [
                             ElevatedButton(
                               onPressed: () async {
-                                final confirmResult =
                                 await showConfirmationDialog(
                                   context,
                                   "Force update Package",
@@ -91,7 +90,6 @@ class _PackageScreenState extends State<PackageScreen> {
                             ),
                             ElevatedButton(
                               onPressed: () async {
-                                final confirmResult =
                                 await showConfirmationDialog(
                                   context,
                                   "Delete Package",
@@ -121,7 +119,7 @@ class _PackageScreenState extends State<PackageScreen> {
                                 style: TextStyle(color: Colors.redAccent),
                               ),
                             ),
-                            SizedBox(
+                            const SizedBox(
                               width: 15,
                             )
                           ],

frontend/lib/utils/package_color.dart

@@ -0,0 +1,34 @@
+import 'package:flutter/material.dart';
+
+IconData switchSuccessIcon(int status) {
+  switch (status) {
+    case 0:
+      return Icons.watch_later_outlined;
+    case 1:
+      return Icons.check_circle_outline;
+    case 2:
+      return Icons.cancel_outlined;
+    case 3:
+      return Icons.pause_circle_outline;
+    case 4:
+      return Icons.remove_circle_outline;
+    default:
+      return Icons.question_mark_outlined;
+  }
+}
+
+Color switchSuccessColor(int status) {
+  switch (status) {
+    case 0:
+      return const Color(0xFF9D8D00);
+    case 1:
+      return const Color(0xFF0A6900);
+    case 4:
+    case 2:
+      return const Color(0xff760707);
+    case 3:
+      return const Color(0xFF0044AA);
+    default:
+      return const Color(0xFF9D8D00);
+  }
+}