-ux

-ui
ใหม่ ทั้งระบบ (ai little retouch)

ng-ttc-frontend/src/app/content/main-project-content/main-project-content.html

@@ -1,52 +1,45 @@
 <div class="h-screen bg-gray-100 flex flex-col">
 
-    <!-- Header Section -->
-    <header class="flex justify-between items-center py-4 px-6 bg-white shadow-sm border-b border-gray-200 z-10">
+    <header class="flex justify-between items-center py-4 px-6">
       @if (mode == 'default') {
-        <h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
-            <i class="fas fa-folder text-red-500"></i> โครงการทั้งหมด
-        </h1>
+      <div class="flex flex-col md:flex-row justify-between items-end mb-6 gap-4">
+          <div>
+            <h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
+             <span class="w-2 h-8 bg-red-900 rounded-full"></span> รายการโครงการทั้งหมด
+            </h1>
+            <p class="text-gray-500 mt-1 text-sm pl-4">ติดตาม สถานะโครงการ และ เสนอโครงการ</p>
+            </div>
+          </div>
+        <!-- <h1 class="text-3xl font-bold text-gray-800">โครงการทั้งหมด</h1> -->
       } @else if (mode == 'add')  {
-        <div class="flex items-center gap-3">
-            <!-- ปุ่มย้อนกลับ -->
-            <button (click)="onCancelProject()"
-                    class="w-10 h-10 rounded-full flex items-center justify-center hover:bg-gray-100 text-gray-500 transition-colors hover:text-red-500"
-                    title="ย้อนกลับ">
-                <i class="fas fa-arrow-left text-lg"></i>
-            </button>
-            <h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
-                <i class="fas fa-plus-circle text-red-500"></i> เพิ่มโครงการ
-            </h1>
-        </div>
-      } @else if (mode == 'edit') {
-        <div class="flex items-center gap-3">
-             <!-- ปุ่มย้อนกลับ -->
-            <button (click)="onCancelProject()"
-                    class="w-10 h-10 rounded-full flex items-center justify-center hover:bg-gray-100 text-gray-500 transition-colors hover:text-red-500"
-                    title="ย้อนกลับ">
-                <i class="fas fa-arrow-left text-lg"></i>
-            </button>
-            <h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
-                <i class="fas fa-edit text-red-500"></i> แก้ไขโครงการ
-            </h1>
-        </div>
-      }
+        <div class="flex flex-col md:flex-row justify-between items-end gap-4">
+              <div>
+                <h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
+                  <button (click)="onCancelProject()"
+                  class="group flex items-center justify-center w-8 h-8 rounded-full hover:bg-gray-100 transition-all mr-1"
+                  title="ย้อนกลับ">
+                      <i class="fas fa-arrow-left text-gray-400 group-hover:text-red-900 text-lg"></i>
+                  </button>
+                  <div class="h-6 w-px bg-gray-200 mr-2"></div>
+
+                  <span class="w-2 h-8 bg-red-900 rounded-full"></span> เพิ่มโครงการ
+                </h1>
+                <p class="text-gray-500 mt-1 text-sm pl-14">กรอกรายละเอียดเพื่อขออนุมัติงบประมาณ</p>
+              </div>
+          </div>
+        }
+
     </header>
 
-    <!-- Content Area (Scrollable) -->
-    <div class="grow overflow-y-auto px-6 pb-6 pt-6">
+    <div class="grow overflow-y-auto px-6 pb-6">
 
         @if ( mode == 'default') {
-            <!-- รายการโครงการ (Smart Component ย่อย หรือ Dumb Component ก็ได้) -->
             <app-main-project></app-main-project>
-
         } @else if ( mode == 'add') {
-            <!-- หน้าเพิ่มโครงการ (Dumb Component) -->
-            <!-- เชื่อม Event save/cancel กลับมาที่ Parent -->
-            <app-main-project-add
-                (save)="onSaveProject($event)"
-                (cancel)="onCancelProject()">
-            </app-main-project-add>
+          <app-main-project-add
+              (save)="onSaveProject($event)"
+              (cancel)="onCancelProject()">
+          </app-main-project-add>
         }
 
     </div>