From 2ce90ec45082717cea66347fb5aa016eea2457ff Mon Sep 17 00:00:00 2001
From: admin <cloud@tck.com.my>
Date: Fri, 13 Mar 2026 14:09:04 +0800
Subject: [PATCH] fix(ui): Add logo to header, shorten sidebar

---
 sample_interface/src/app/components/Header.tsx  | 7 ++++++-
 sample_interface/src/app/components/Sidebar.tsx | 4 ++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/sample_interface/src/app/components/Header.tsx b/sample_interface/src/app/components/Header.tsx
index 231c57b1b..b7dfd02df 100644
--- a/sample_interface/src/app/components/Header.tsx
+++ b/sample_interface/src/app/components/Header.tsx
@@ -36,7 +36,12 @@ export function Header() {
 
   return (
     <div className="bg-gray-950 border-b border-gray-700 px-2 py-1 flex items-start gap-1 text-xs">
-      {/* Left side - all status items in one row */}
+      {/* Logo (leftmost) */}
+      <div className="flex items-center gap-1 pr-2">
+        <img src={TCKLogo} alt="TCK" className="w-6 h-6" />
+      </div>
+
+      {/* Status items */}
       <div className="flex items-center gap-1">
         {/* Date */}
         <div className="flex items-center gap-1 px-2 py-0.5 bg-gray-800 rounded">
diff --git a/sample_interface/src/app/components/Sidebar.tsx b/sample_interface/src/app/components/Sidebar.tsx
index ebb98e2f2..ba7be65d5 100644
--- a/sample_interface/src/app/components/Sidebar.tsx
+++ b/sample_interface/src/app/components/Sidebar.tsx
@@ -114,7 +114,7 @@ export function Sidebar({ collapsed, onToggle }: SidebarProps) {
   return (
     <div 
       className={`bg-gray-950 border-r border-gray-700 transition-all duration-300 flex flex-col ${
-        collapsed ? "w-16" : "w-64"
+        collapsed ? "w-14" : "w-56"
       }`}
     >
       <div className="p-2 border-b border-gray-700 flex items-center justify-between">
@@ -134,7 +134,7 @@ export function Sidebar({ collapsed, onToggle }: SidebarProps) {
               <>
                 <button
                   onClick={() => toggleExpanded(item.id)}
-                  className={`w-full flex items-center gap-3 px-3 py-2.5 text-sm transition-colors ${
+                  className={`w-full flex items-center gap-2 px-2 py-2 text-xs transition-colors ${
                     isParentActive(item.children)
                       ? "bg-blue-600 text-white"
                       : "text-gray-300 hover:bg-gray-800 hover:text-white"