From 92bc65ce2fb50ef4942a2ca83b33e05ee3fbe48e Mon Sep 17 00:00:00 2001
From: sosokker <sirin_29@hotmail.co.th>
Date: Thu, 16 Nov 2023 23:27:02 +0700
Subject: [PATCH] Update Eisenhower Matrix

---
 .../EisenhowerMatrix/Eisenhower.jsx           | 62 +++++++++++++++----
 frontend/src/components/profilePage.jsx       |  2 +-
 2 files changed, 52 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/EisenhowerMatrix/Eisenhower.jsx b/frontend/src/components/EisenhowerMatrix/Eisenhower.jsx
index c300236..8dc159a 100644
--- a/frontend/src/components/EisenhowerMatrix/Eisenhower.jsx
+++ b/frontend/src/components/EisenhowerMatrix/Eisenhower.jsx
@@ -1,25 +1,65 @@
 import React from "react";
+import { FiAlertCircle, FiClock, FiXCircle, FiCheckCircle } from "react-icons/fi";
 
-function EachBlog({ name, colorCode }) {
+function EachBlog({ name, colorCode, contentList, icon }) {
   return (
-    <div className={`grid grid-rows-2 gap-4 text-left p-4 rounded-lg bg-white border border-gray-300 shadow-md`}>
-      <div className={`text-xl font-bold`} style={{ color: colorCode }}>
-        {name}
+    <div
+      className={`h-full text-left p-4 rounded-lg bg-white border border-gray-300 overflow-y-auto`}>
+        <div className="flex" style={{ color: colorCode }}>
+          <span className="mx-2 mt-1">{icon}</span>
+          <span>{name}</span>
+      </div>
+      <hr className="my-3 h-0.5 border-t-0 bg-gray-300 opacity-100 dark:opacity-50" />
+      <div className="space-y-2">
+        {contentList.length === 0 ? (
+          <p className="text-gray-500 text-center">No tasks</p>
+        ) : (
+          contentList.map((item, index) => (
+            <div key={index} className="flex items-start">
+              <input type="checkbox" checked={item.checked} className="checkbox mt-1 mr-2" />
+              <label className="cursor-pointer">{item.text}</label>
+            </div>
+          ))
+        )}
       </div>
-      <div className="h-36">Content goes here</div>
     </div>
   );
 }
 
 function Eisenhower() {
+  const contentList_ui = [
+    { text: "Complete report for the meeting", checked: true },
+    { text: "Review project proposal", checked: false },
+    { text: "Submit expense report", checked: false },
+    { text: "Complete report for the meeting", checked: true },
+    { text: "Review project proposal", checked: false },
+    { text: "Submit expense report", checked: false },
+    { text: "Complete report for the meeting", checked: true },
+    { text: "Review project proposal", checked: false },
+    { text: "Submit expense report", checked: false },
+  ];
+
+  const contentList_uni = [];
+  const contentList_nui = [];
+  const contentList_nuni = [];
+
   return (
-    <div className="bg-slate-100 text-left p-4 m-auto">
-      <h1 className="text-3xl font-bold mb-4">The Eisenhower Matrix</h1>
+    <div className="bg-slate-100 text-left p-4 w-full">
       <div className="grid grid-rows-2 grid-cols-2 gap-2">
-        <EachBlog name="Urgent & Important" colorCode="#FF5733" />
-        <EachBlog name="Urgent & Not important" colorCode="#FDDD5C" />
-        <EachBlog name="Not urgent & Important" colorCode="#189AB4" />
-        <EachBlog name="Not urgent & Not important" colorCode="#94FA92" />
+        <EachBlog name="Urgent & Important" colorCode="#ff5f68" icon={<FiAlertCircle />} contentList={contentList_ui} />
+        <EachBlog name="Urgent & Not important" colorCode="#ffb000" icon={<FiClock />} contentList={contentList_uni} />
+        <EachBlog
+          name="Not urgent & Important"
+          colorCode="#4772fa"
+          icon={<FiCheckCircle />}
+          contentList={contentList_nui}
+        />
+        <EachBlog
+          name="Not urgent & Not important"
+          colorCode="#0cce9c"
+          icon={<FiXCircle />}
+          contentList={contentList_nuni}
+        />
       </div>
     </div>
   );
diff --git a/frontend/src/components/profilePage.jsx b/frontend/src/components/profilePage.jsx
index 2f00049..4b0d0b4 100644
--- a/frontend/src/components/profilePage.jsx
+++ b/frontend/src/components/profilePage.jsx
@@ -4,7 +4,7 @@ import ProfileUpdateComponent from "./ProfileUpdateComponent";
 function ProfileUpdatePage() {
   return (
     <div>
-      <div className="stats shadow">
+      <div className="stats shadow mt-3">
         <div className="stat">
           <div className="stat-title truncate">Username</div>
           <div className="stat-value truncate">Sirin</div>