From 48309d716f6f5cef8e4db0658b8133a022dea66d Mon Sep 17 00:00:00 2001
From: Afiq <mdafiqiskandar@gmail.com>
Date: Mon, 26 May 2025 12:54:25 +0800
Subject: [PATCH] Refactor Layouts in Execution Module for Consistency

- Removed unnecessary padding and margin from header and body sections in history, inbox, and index views to streamline the layout.
- Enhanced visual consistency across the execution module by standardizing the structure of card components and their content.
- Improved overall user interface by simplifying the design elements, ensuring a cleaner and more cohesive appearance.
---
 pages/execution/history.vue | 10 ++--------
 pages/execution/inbox.vue   |  4 ++--
 pages/execution/index.vue   | 16 ++++++++--------
 3 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/pages/execution/history.vue b/pages/execution/history.vue
index 8fff5cc..994831e 100644
--- a/pages/execution/history.vue
+++ b/pages/execution/history.vue
@@ -134,12 +134,6 @@ const refreshCases = () => {
 <template>
   <div>
     <LayoutsBreadcrumb />
-    
-    <div class="mb-6">
-      <h1 class="text-2xl font-bold text-gray-800">Case History</h1>
-      <p class="text-gray-600">View your case history and completed processes.</p>
-    </div>
-
     <!-- Filters and Search -->
     <rs-card class="mb-6">
       <template #body>
@@ -187,7 +181,7 @@ const refreshCases = () => {
     <!-- Case History Table -->
     <rs-card>
       <template #header>
-        <div class="flex justify-between items-center p-5">
+        <div class="flex justify-between items-center">
           <h2 class="text-lg font-semibold">Your Cases</h2>
           <div class="flex items-center space-x-2">
             <rs-button 
@@ -205,7 +199,7 @@ const refreshCases = () => {
         </div>
       </template>
       <template #body>
-        <div class="px-5 pb-5">
+        <div class="">
           <rs-table
             :data="filteredCases"
             :options="tableOptions"
diff --git a/pages/execution/inbox.vue b/pages/execution/inbox.vue
index 54a7efa..911df95 100644
--- a/pages/execution/inbox.vue
+++ b/pages/execution/inbox.vue
@@ -166,7 +166,7 @@ const refreshTasks = () => {
     <!-- Task List -->
     <rs-card>
       <template #header>
-        <div class="flex justify-between items-center p-5">
+        <div class="flex justify-between items-center">
           <h2 class="text-lg font-semibold">Your Tasks</h2>
           <div class="flex items-center space-x-2">
             <rs-button
@@ -184,7 +184,7 @@ const refreshTasks = () => {
         </div>
       </template>
       <template #body>
-        <div class="px-5 pb-5">
+        <div class="">
           <rs-table
             :data="filteredTasks"
             :options="tableOptions"
diff --git a/pages/execution/index.vue b/pages/execution/index.vue
index 1c35822..a4d8dc2 100644
--- a/pages/execution/index.vue
+++ b/pages/execution/index.vue
@@ -86,7 +86,7 @@ const optionsAdvanced = {
       <!-- Pending Tasks -->
       <rs-card>
         <template #body>
-          <div class="pt-5 pb-3 px-5 flex items-center gap-4">
+          <div class="pt-5 flex items-center gap-4">
             <div
               class="p-5 flex justify-center items-center bg-yellow-100 rounded-2xl"
             >
@@ -110,7 +110,7 @@ const optionsAdvanced = {
       <!-- Active Cases -->
       <rs-card>
         <template #body>
-          <div class="pt-5 pb-3 px-5 flex items-center gap-4">
+          <div class="pt-5 flex items-center gap-4">
             <div
               class="p-5 flex justify-center items-center bg-blue-100 rounded-2xl"
             >
@@ -134,7 +134,7 @@ const optionsAdvanced = {
       <!-- Completed Cases -->
       <rs-card>
         <template #body>
-          <div class="pt-5 pb-3 px-5 flex items-center gap-4">
+          <div class="pt-5 flex items-center gap-4">
             <div
               class="p-5 flex justify-center items-center bg-green-100 rounded-2xl"
             >
@@ -158,7 +158,7 @@ const optionsAdvanced = {
       <!-- Overdue Tasks -->
       <rs-card>
         <template #body>
-          <div class="pt-5 pb-3 px-5 flex items-center gap-4">
+          <div class="pt-5 flex items-center gap-4">
             <div
               class="p-5 flex justify-center items-center bg-red-100 rounded-2xl"
             >
@@ -184,7 +184,7 @@ const optionsAdvanced = {
     <!-- Recent Tasks -->
     <rs-card class="mb-6">
       <template #header>
-        <div class="flex justify-between items-center p-5">
+        <div class="flex justify-between items-center">
           <h2 class="text-lg font-semibold">Recent Tasks</h2>
           <rs-button variant="primary" size="sm" to="/execution/inbox">
             View All Tasks
@@ -192,7 +192,7 @@ const optionsAdvanced = {
         </div>
       </template>
       <template #body>
-        <div class="px-5 pb-5">
+        <div class="">
           <rs-table
             :data="recentTasks"
             :options="tableOptions"
@@ -236,7 +236,7 @@ const optionsAdvanced = {
     <!-- Recent Processes -->
     <rs-card>
       <template #header>
-        <div class="flex justify-between items-center p-5">
+        <div class="flex justify-between items-center">
           <h2 class="text-lg font-semibold">Recent Processes</h2>
           <rs-button variant="primary" size="sm" to="/execution/history">
             View All Processes
@@ -244,7 +244,7 @@ const optionsAdvanced = {
         </div>
       </template>
       <template #body>
-        <div class="px-5 pb-5">
+        <div class="">
           <rs-table
             :data="recentProcesses"
             :options="tableOptions"