From 58a089b81239ff47c03e7beaefe6893e440fd43b Mon Sep 17 00:00:00 2001
From: PhuocNTB <phuocntb@mieusoft.com>
Date: Fri, 3 Jul 2026 22:15:58 +0700
Subject: [PATCH] fix ui

---
 .../src/components/WorkspaceSeatingChart.tsx  | 45 ++++++++++++++++---
 1 file changed, 39 insertions(+), 6 deletions(-)

diff --git a/management/src/components/WorkspaceSeatingChart.tsx b/management/src/components/WorkspaceSeatingChart.tsx
index d853435..9b6cd94 100644
--- a/management/src/components/WorkspaceSeatingChart.tsx
+++ b/management/src/components/WorkspaceSeatingChart.tsx
@@ -40,6 +40,7 @@ export const WorkspaceSeatingChart: React.FC<WorkspaceSeatingChartProps> = ({
   // Edit mode for structural changes
   const [isEditingStructure, setIsEditingStructure] = useState(false);
   const [dragOverCell, setDragOverCell] = useState<string | null>(null);
+  const [saveNotice, setSaveNotice] = useState<string | null>(null);
 
   // Load templates and layout
   useEffect(() => {
@@ -68,12 +69,23 @@ export const WorkspaceSeatingChart: React.FC<WorkspaceSeatingChartProps> = ({
   const saveLayout = (newLayout: SeatingLayout | null) => {
     if (newLayout) {
       localStorage.setItem(`sc_seating_layout_${workspaceId}`, JSON.stringify(newLayout));
+      setSaveNotice('Đã lưu thay đổi sơ đồ chỗ ngồi!');
     } else {
       localStorage.removeItem(`sc_seating_layout_${workspaceId}`);
+      setSaveNotice('Đã xóa sơ đồ chỗ ngồi!');
     }
     setLayout(newLayout);
   };
 
+  useEffect(() => {
+    if (saveNotice) {
+      const timer = setTimeout(() => {
+        setSaveNotice(null);
+      }, 2000);
+      return () => clearTimeout(timer);
+    }
+  }, [saveNotice]);
+
   // Get active seated list
   const seatedStudentIds = useMemo(() => {
     if (!layout) return new Set<number>();
@@ -395,8 +407,8 @@ export const WorkspaceSeatingChart: React.FC<WorkspaceSeatingChartProps> = ({
               borderRadius: 'var(--radius-md)',
               border: '1px solid var(--border-color)',
               alignContent: 'start',
-              overflowY: 'auto',
-              minHeight: '400px',
+              overflow: 'auto',
+              minHeight: 0,
             }}
           >
             {gridItems}
@@ -423,7 +435,7 @@ export const WorkspaceSeatingChart: React.FC<WorkspaceSeatingChartProps> = ({
   };
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', height: '100%', minHeight: '450px' }}>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', flex: 1, minHeight: 0, height: '100%', overflow: 'hidden' }}>
       
       {!layout ? (
         // Empty state: select template or customize
@@ -510,10 +522,10 @@ export const WorkspaceSeatingChart: React.FC<WorkspaceSeatingChartProps> = ({
         </div>
       ) : (
         // Seating Workspace View
-        <div style={{ display: 'grid', gridTemplateColumns: '1fr 300px', gap: '1.5rem', height: '100%' }}>
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 300px', gap: '1.5rem', flex: 1, minHeight: 0, overflow: 'hidden' }}>
           
           {/* Main Seating Panel */}
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', flex: 1, minHeight: 0, overflow: 'hidden' }}>
             {/* Toolbar */}
             <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '10px' }}>
               <div style={{ display: 'flex', gap: '8px' }}>
@@ -554,7 +566,7 @@ export const WorkspaceSeatingChart: React.FC<WorkspaceSeatingChartProps> = ({
           </div>
 
           {/* Right Panel: Unseated Students list */}
-          <div style={{ borderLeft: '1px solid var(--border-color)', paddingLeft: '1.5rem', display: 'flex', flexDirection: 'column', gap: '1rem', overflow: 'hidden' }}>
+          <div style={{ borderLeft: '1px solid var(--border-color)', paddingLeft: '1.5rem', display: 'flex', flexDirection: 'column', gap: '1rem', overflow: 'hidden', flex: 1, minHeight: 0 }}>
             <div>
               <h4 style={{ margin: 0, fontSize: '0.95rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                 <span>Chưa vào chỗ</span>
@@ -633,6 +645,27 @@ export const WorkspaceSeatingChart: React.FC<WorkspaceSeatingChartProps> = ({
 
         </div>
       )}
+
+      {saveNotice && (
+        <div style={{
+          position: 'fixed',
+          bottom: '24px',
+          right: '24px',
+          background: '#10b981',
+          color: '#fff',
+          padding: '0.65rem 1.25rem',
+          borderRadius: '8px',
+          boxShadow: 'var(--shadow-lg)',
+          fontSize: '0.85rem',
+          fontWeight: 600,
+          zIndex: 1000,
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px',
+        }}>
+          <span style={{ fontSize: '1.1rem' }}>✓</span> {saveNotice}
+        </div>
+      )}
     </div>
   );
 };