akirachix · hunterachieng · Oct 7, 2025 · Oct 7, 2025 · Oct 7, 2025
diff --git a/tesfa/src/app/admin/performance/page.tsx b/tesfa/src/app/admin/performance/page.tsx
@@ -94,7 +94,7 @@ export default function PerformancePage() {
                 <h2 className="text-lg font-semibold text-gray-800">
                   Number of Queries
                 </h2>
-                <button className="px-5 py-2 border cursor-pointer border-gray-400 rounded-full text-sm bg-white hover:bg-gray-100">
+                <button className="px-5 py-2 border border-gray-400 rounded-full text-sm bg-white hover:bg-gray-100">
                   Monthly View
                 </button>
               </div>
@@ -120,7 +120,6 @@ export default function PerformancePage() {
                 </div>
               )}
             </div>
-
             <div>
               <ApiUsageChart />
             </div>

diff --git a/tesfa/src/app/admin/sharedcomponent/Sidebar/index.tsx b/tesfa/src/app/admin/sharedcomponent/Sidebar/index.tsx
@@ -1,16 +1,32 @@
 "use client";
 import Link from "next/link";
 import Image from "next/image";
-import { usePathname } from "next/navigation";
-import { LayoutDashboard, ClipboardList, Users, Bot, User } from "lucide-react";
+import { usePathname, useRouter } from "next/navigation";
+import { useState } from "react";
+import { LayoutDashboard, ClipboardList, Users, Bot, User, LogOut } from "lucide-react";
+
 const menuItems = [
   { id: 1, href: "/admin/dashboard", icon: LayoutDashboard, name: "Dashboard" },
-  { id: 2, href: "/admin/task-tracking", icon: ClipboardList , name: "Tasks"},
+  { id: 2, href: "/admin/task-tracking", icon: ClipboardList, name: "Tasks" },
   { id: 3, href: "/admin/organizations", icon: Users, name: "Organizations" },
   { id: 4, href: "/admin/performance", icon: Bot, name: "Performance" },
 ];
+
 export default function Sidebar() {
   const pathname = usePathname();
+  const router = useRouter();
+  const [showLogoutConfirm, setShowLogoutConfirm] = useState(false); 
+
+  const handleLogoutClick = () => setShowLogoutConfirm(true);
+
+  const handleLogoutConfirm = () => {
+    localStorage.removeItem("authToken");
+    router.push("/onboarding/login");
+    setShowLogoutConfirm(false);
+  };
+
+  const handleLogoutCancel = () => setShowLogoutConfirm(false);
+
   return (
     <div className="w-64 h-screen bg-teal-900 flex flex-col justify-between text-white">
       <div className="px-1 bg-teal-900 flex flex-col justify-between text-white">
@@ -41,6 +57,16 @@ export default function Sidebar() {
               </Link>
             );
           })}
+
+          <button
+            onClick={handleLogoutClick}
+            className={
+              `cursor-pointer px-6 py-3 mt-4 rounded-l-4xl gap-8 transition-colors flex items-center hover:bg-teal-700 w-63`
+            }
+          >
+            <LogOut size={28} />
+            <label className="text-md cursor-pointer">Logout</label>
+          </button>
         </div>
       </div>
       <div className="flex items-center gap-5 px-6 py-4 bg-teal-800">
@@ -49,6 +75,29 @@ export default function Sidebar() {
         </div>
         <p className="items-center font-medium">Tesfa admin</p>
       </div>
+
+      {showLogoutConfirm && (
+        <div className="fixed inset-0 bg-black opacity-90 flex items-center justify-center z-50">
+          <div className="bg-white p-6 rounded-lg shadow-lg max-w-xs w-full">
+            <h2 className="text-lg font-bold mb-2 text-[#00363E]">Confirm Logout</h2>
+            <p className="mb-4 text-gray-700">Are you sure you want to logout?</p>
+            <div className="flex justify-end gap-4">
+              <button
+                onClick={handleLogoutCancel}
+                className="px-4 py-2 rounded-2xl cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-800"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleLogoutConfirm}
+                className="px-4 py-2 cursor-pointer rounded-2xl bg-red-600 hover:bg-red-700 text-white"
+              >
+                Logout
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
-}
+}
diff --git a/tesfa/src/app/edit-profile/page.tsx b/tesfa/src/app/edit-profile/page.tsx
@@ -23,6 +23,7 @@ export default function EditProfilePage() {
   const [updateStatus, setUpdateStatus] = useState<"" | "error">("");
   const [updateMessage, setUpdateMessage] = useState<string>("");
   const [submitting, setSubmitting] = useState(false);
+  const [imageError, setImageError] = useState(""); 
 
   useEffect(() => {
     if (profile) {
@@ -38,15 +39,26 @@ export default function EditProfilePage() {
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value, type, files } = e.target;
     if (type === "file" && files && files[0]) {
-      setLogoImage(files[0]);
-      setFormData((prev) => ({ ...prev, logo_image: files[0] }));
+      const file = files[0];
+      // PNG only
+      if (file.type !== "image/png") {
+        setImageError("PNG format is preferable. Please upload a PNG image.");
+        setLogoImage(null);
+        setFormData((prev) => ({ ...prev, logo_image: null }));
+        return;
+      } else {
+        setImageError("");
+        setLogoImage(file);
+        setFormData((prev) => ({ ...prev, logo_image: file }));
+      }
     } else {
       setFormData((prev) => ({ ...prev, [name]: value }));
     }
   };
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+    if (imageError) return; 
     setSubmitting(true);
     const email = formData.email.trim();
     const org_name = (formData.org_name || "NGO").trim();
@@ -132,18 +144,23 @@ export default function EditProfilePage() {
                   <button
                     type="button"
                     onClick={() => document.getElementById("logoInput")?.click()}
-                    className="absolute top-40 right-5 bg-white border-2 border-[#C3A041] text-[#C3A041] w-10 h-10 rounded-full flex items-center justify-center shadow hover:bg-[#F3FBFD] transition"
+                    className="absolute top-40 cursor-pointer right-5 bg-white border-2 border-[#C3A041] text-[#C3A041] w-10 h-10 rounded-full flex items-center justify-center shadow hover:bg-[#F3FBFD] transition"
                     aria-label="Upload logo"
                   >
                     <CameraIcon className="w-5 h-5 cursor-pointer" />
                   </button>
                   <input
                     id="logoInput"
                     type="file"
-                    accept="image/*"
+                    accept="image/png" 
                     onChange={handleChange}
                     className="hidden"
                   />
+                  {imageError && (
+                    <div className="mt-2 text-red-600 font-semibold text-center">
+                      {imageError}
+                    </div>
+                  )}
                   <div className="mt-4 font-bold text-3xl text-[#C3A041] text-center">
                     {formData.org_name}
                   </div>
@@ -198,7 +215,7 @@ export default function EditProfilePage() {
                       <button
                         type="button"
                         onClick={() => setShowPassword(!showPassword)}
-                        className="absolute right-4 top-1/2 transform -translate-y-1/2 text-[#C3A041] hover:text-[#00353D]"
+                        className="absolute right-4 top-1/2 cursor-pointer transform -translate-y-1/2 text-[#C3A041] hover:text-[#00353D]"
                         aria-label={showPassword ? "Hide password" : "Show password"}
                       >
                         {showPassword ? <Eye className="w-5 h-5" /> : <EyeOff className="w-5 h-5" />}
@@ -209,14 +226,14 @@ export default function EditProfilePage() {
                     <button
                       type="button"
                       onClick={() => router.push("/profile")}
-                      className="px-5 py-2 border-2 border-[#03363D] text-[#03363D] rounded-full text-lg font-medium shadow hover:bg-[#F3FBFD] transition"
+                      className="px-5 py-2 border-2 border-[#03363D] cursor-pointer text-[#03363D] rounded-full text-lg font-medium shadow hover:bg-[#F3FBFD] transition"
                     >
                       Cancel
                     </button>
                     <button
                       type="submit"
-                      disabled={submitting}
-                      className="px-7 py-2 bg-[#03363D] text-white rounded-full text-lg font-medium shadow hover:bg-[#065A60] transition"
+                      disabled={submitting || !!imageError}
+                      className="px-7 py-2 bg-[#03363D] text-white cursor-pointer rounded-full text-lg font-medium shadow hover:bg-[#065A60] transition"
                     >
                       {submitting ? "Saving..." : "Save"}
                     </button>

diff --git a/tesfa/src/app/globals.css b/tesfa/src/app/globals.css
@@ -5,46 +5,38 @@
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
 }
-
 @media (prefers-color-scheme: dark) {
 }
-
 body {
   background: var(--background);
   color: var(--foreground);
   font-family: var(--font-josefin-sans),sans-serif;
    overflow-y: hidden;
-
 }
 input:focus {
   outline: none;
 }
 .bg-active-gradient {
-  background: linear-gradient(to right, #e6c362, #d3ac45);
+  background: linear-gradient(to right, #E6C362, #D3AC45);
 }
-
 *::-webkit-scrollbar {
   width: 12px;
   height: 12px;
   margin-left: 5px;
 }
-
 *::-webkit-scrollbar-track {
-  background: #f1f1f1;
+  background: #F1F1F1;
   border-radius: 10px;
   margin-left: 5px;
 }
-
 *::-webkit-scrollbar-thumb {
-  background-color: #d3ac45;
+  background-color: #D3AC45;
   border-radius: 10px;
-  border: 3px solid #f1f1f1;
+  border: 3px solid #F1F1F1;
 }
-
 *::-webkit-scrollbar-thumb:hover {
-  background-color: #d3ac45;
+  background-color: #D3AC45;
 }
-
 .animate-fade-in {
   animation: fadeInScale 0.4s;
 }
@@ -58,17 +50,12 @@ input:focus {
     transform: scale(1);
   }
 }
-
-
 .recharts-wrapper:focus,
 .recharts-surface:focus,
 .recharts-wrapper:focus-visible,
 .recharts-surface:focus-visible {
   outline: none !important;
 }
-
-
-
 @keyframes move-rays {
   0% {
     transform: translateX(0);
@@ -124,3 +111,17 @@ input:focus {
   left: 50%;
   transform: translate(-50%, -50%);
 }
+@media screen and (min-width: 1025px) and (max-width: 1400px) {
+  .dashed-spinner {
+    top: 44%;
+    left: 45.5%;
+    transform: translate(-50%, -50%);
+  }
+}
+@media screen and (width: 1024px) {
+  .dashed-spinner {
+    top: 42%;
+    left: 44%;
+    transform: translate(-50%, -50%);
+  }
+}
diff --git a/tesfa/src/app/kanban/components/Taskcard/index.tsx b/tesfa/src/app/kanban/components/Taskcard/index.tsx
@@ -67,7 +67,7 @@ export function TaskCard({ task, index, onDelete }: TaskCardProps) {
           <LuTrash2 size={16}/>
         </button>
 
-      <div className={`${getCardColor(task.status)} border-none rounded-2xl h-[20vh] sm:h-[18vh] md:h-[20vh] text-white p-3 sm:p-4 mb-3 shadow-lg hover:shadow-xl transition-shadow w-full`}>
+      <div className={`${getCardColor(task.status)} border-none rounded-2xl h-auto text-white p-3 sm:p-4 mb-3 shadow-lg hover:shadow-xl transition-shadow w-full`}>
        <div {...listeners} {...attributes} className="w-full">
         <div className="space-y-1 sm:space-y-2">
           <h4 className="font-medium text-lg sm:text-base">{task.title}</h4>