Add material code and settings

client/src/app/features/recipes/recipe-details/recipe-details.component.html

@@ -4,20 +4,23 @@
       class="block col-span-1 p-6 bg-white border border-gray-200 rounded-lg shadow"
     >
       <div *ngIf="isLoaded; else indicator" [@inOutAnimation]>
-        <h5 class="mb-2 text-xl font-bold text-gray-900">
-          {{ originalRecipeDetail?.name }} |
-          {{ originalRecipeDetail?.productCode }}
-        </h5>
+        <div class="flex flex-wrap">
+          <h5 class="mb-2 text-xl font-bold text-gray-900">
+            {{ originalRecipeDetail.name }}
+          </h5>
+          <h5 class="mb-2 px-3 text-xl font-bold text-gray-900">|</h5>
+          <h5 class="mb-2 text-xl font-bold text-gray-900">
+            {{ originalRecipeDetail.productCode }}
+          </h5>
+        </div>
         <div class="flex items-center mb-2">
-          <div class="flex items-center mr-4">
-            <p class="text-sm text-gray-500">สูตร</p>
-            <p class="ml-2 text-sm text-gray-900">
-              {{ originalRecipeDetail?.name }}
-            </p>
-          </div>
           <div class="flex items-center">
-            <p class="text-sm text-gray-500">ประเภท</p>
-            <p class="ml-2 text-sm text-gray-900">เครื่องดื่ม</p>
+            <p class="text-sm text-gray-500">Last Modify</p>
+            <p class="ml-2 text-sm text-gray-900">
+              {{
+                originalRecipeDetail.lastModified | date : "dd/MM/yyyy HH:mm:ss"
+              }}
+            </p>
           </div>
         </div>
         <div class="flex p-3 items-center justify-center w-full">
@@ -103,26 +106,38 @@
         </div>
       </ng-template>
     </div>
-    <div
-      class="flex items-center justify-center h-48 mb-4 rounded bg-gray-50 dark:bg-gray-800"
-    >
-      <p class="text-2xl text-gray-400 dark:text-gray-500">
-        <svg
-          class="w-3.5 h-3.5"
-          aria-hidden="true"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 18 18"
-        >
-          <path
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M9 1v16M1 9h16"
-          />
-        </svg>
-      </p>
+    <div class="col-span-3 max-h-[300px] overflow-auto mb-4 rounded">
+      <table class="table">
+        <thead>
+          <tr class="bg-gray-200">
+            <th class="px-6 py-3">Enable</th>
+            <th class="px-6 py-3">Material ID</th>
+            <th class="px-6 py-3">Material Name</th>
+          </tr>
+        </thead>
+        <tbody *ngIf="isMatLoaded; else indicator">
+          <tr
+            *ngFor="let mat of originalRecipeDetail?.matData"
+            class="bg-white la border-b hover:bg-secondary"
+          >
+            <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
+              <label>
+                <input
+                  type="checkbox"
+                  class="toggle toggle-sm"
+                  [checked]="mat.enable"
+                />
+              </label>
+            </td>
+            <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
+              {{ mat.id }}
+            </td>
+            <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
+              {{ mat.name }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
     <div class="grid grid-cols-2 gap-4 mb-4">
       <div
@@ -318,7 +333,7 @@
       </div>
     </div>
     <div
-      class="sticky bottom-0 col-span-3 flex justify-end bg-white rounded-full shadow-xl p-3"
+      class="sticky bottom-0 col-span-3 flex justify-end bg-white rounded-full drop-shadow-2xl p-3"
     >
       <button
         (click)="onPressConfirmClose()"