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.
This commit is contained in:
Afiq 2025-05-26 12:54:25 +08:00
parent 0a4d41df06
commit 48309d716f
3 changed files with 12 additions and 18 deletions

View File

@ -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"

View File

@ -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"

View File

@ -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"