-project ux (ux for user role)

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

@@ -1,115 +1,53 @@
 <div class="h-screen bg-gray-100 flex flex-col">
 
-    <header class="flex justify-between items-center py-4 px-6">
+    <!-- Header Section -->
+    <header class="flex justify-between items-center py-4 px-6 bg-white shadow-sm border-b border-gray-200 z-10">
       @if (mode == 'default') {
-        <h1 class="text-3xl font-bold text-gray-800">โครงการทั้งหมด</h1>
+        <h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
+            <i class="fas fa-folder text-red-500"></i> โครงการทั้งหมด
+        </h1>
       } @else if (mode == 'add')  {
-        <h1 class="text-3xl font-bold text-gray-800">เพิ่มโครงการ</h1>
+        <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>
       }
-
     </header>
 
-    <div class="grow overflow-y-auto px-6 pb-6">
+    <!-- Content Area (Scrollable) -->
+    <div class="grow overflow-y-auto px-6 pb-6 pt-6">
 
         @if ( mode == 'default') {
+            <!-- รายการโครงการ (Smart Component ย่อย หรือ Dumb Component ก็ได้) -->
             <app-main-project></app-main-project>
+
         } @else if ( mode == 'add') {
-            <app-main-project-add></app-main-project-add>
+            <!-- หน้าเพิ่มโครงการ (Dumb Component) -->
+            <!-- เชื่อม Event save/cancel กลับมาที่ Parent -->
+            <app-main-project-add
+                (save)="onSaveProject($event)"
+                (cancel)="onCancelProject()">
+            </app-main-project-add>
         }
 
     </div>
 </div>
-
-<!-- <div class="h-screen bg-gray-100 flex flex-col">
-
-  <header class="flex justify-between items-center py-4 px-6 bg-white shadow-sm shrink-0 z-10">
-    <h1 class="text-2xl font-bold text-gray-800">
-      {{ mode === 'add' ? 'สร้างโครงการใหม่' : 'โครงการทั้งหมด' }}
-    </h1>
-
-    <button *ngIf="mode === 'default'"
-            (click)="mode = 'add'"
-            class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg shadow-sm text-sm font-medium transition">
-      + เพิ่มโครงการ
-    </button>
-  </header>
-
-  <div class="grow overflow-y-auto p-6">
-
-    @if (mode === 'default') {
-      <app-main-project></app-main-project>
-
-    } @else if (mode === 'add') {
-
-      <div class="flex items-start justify-center min-h-full">
-        <div class="bg-white p-8 rounded-xl shadow-lg w-full max-w-lg border border-gray-100">
-
-          <div class="flex justify-between items-center mb-6">
-            <h2 class="text-xl font-bold text-gray-800">รายละเอียดโครงการ</h2>
-            <button (click)="mode = 'default'" class="text-gray-400 hover:text-gray-600">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-              </svg>
-            </button>
-          </div>
-
-          <form class="space-y-5"> <div>
-              <label for="projectName" class="block text-sm font-medium text-gray-700 mb-1">ชื่อโครงการ</label>
-              <input type="text" id="projectName" name="projectName"
-                     class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none transition shadow-sm"
-                     placeholder="ป้อนชื่อโครงการ">
-            </div>
-
-            <div>
-              <label for="budgetType" class="block text-sm font-medium text-gray-700 mb-1">ประเภทงบประมาณ</label>
-              <div class="relative">
-                <select id="budgetType" name="budgetType"
-                        class="w-full p-3 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none appearance-none shadow-sm cursor-pointer">
-                  <option value="">-- เลือกประเภท --</option>
-                  <option value="operation">งบดำเนินงาน</option>
-                  <option value="investment">งบลงทุน</option>
-                  <option value="research">งบวิจัย</option>
-                </select>
-                <div class="absolute inset-y-0 right-0 flex items-center px-3 pointer-events-none text-gray-500">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-                  </svg>
-                </div>
-              </div>
-            </div>
-
-            <div>
-              <label for="amount" class="block text-sm font-medium text-gray-700 mb-1">จำนวนเงิน (บาท)</label>
-              <input type="number" id="amount" name="amount"
-                     class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none transition shadow-sm"
-                     placeholder="เช่น 15000.00">
-            </div>
-
-            <div>
-              <label for="date" class="block text-sm font-medium text-gray-700 mb-1">วันที่เริ่มโครงการ</label>
-              <div class="relative">
-                <input type="date" id="date" name="date"
-                       class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none transition shadow-sm text-gray-700">
-              </div>
-            </div>
-
-            <div class="flex items-center gap-3 pt-4">
-              <button type="button" (click)="mode = 'default'"
-                      class="flex-1 px-4 py-3 bg-gray-100 text-gray-700 font-semibold rounded-lg hover:bg-gray-200 transition">
-                ยกเลิก
-              </button>
-
-              <button type="submit"
-                      class="flex-1 px-4 py-3 bg-red-500 text-white font-semibold rounded-lg shadow-md hover:bg-red-600 focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition">
-                ส่งโครงการ
-              </button>
-            </div>
-
-          </form>
-        </div>
-      </div>
-
-    }
-
-  </div>
-</div> -->