From 852d6b8e0dbee716ff1fdca9fc87664a0de649ff Mon Sep 17 00:00:00 2001
From: ttd11204 <datkk112004@gmail.com>
Date: Thu, 11 Dec 2025 13:08:19 +0700
Subject: [PATCH 01/16] feat: Implement autosave functionality with IndexedDB
 integration and update scene actions for cloud state management

---
 package-lock.json                             |  7 ++
 package.json                                  |  1 +
 .../components/creator3d/Creator3D.tsx        | 97 ++++++++++++++++++-
 .../components/creator3d/Creator3DHeader.tsx  |  1 -
 .../components/creator3d/ExportDialog.tsx     |  1 -
 .../components/creator3d/SceneActions.tsx     |  8 +-
 .../components/creator3d/useAutosave.ts       | 69 +++++++++++++
 .../right-sidebar/ComponentInspector.tsx      |  1 -
 src/providers/Providers.tsx                   |  2 +-
 9 files changed, 177 insertions(+), 10 deletions(-)
 create mode 100644 src/features/creator-3d/components/creator3d/useAutosave.ts

diff --git a/package-lock.json b/package-lock.json
index 4c34baecb..aaf851c55 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -95,6 +95,7 @@
         "file-saver": "^2.0.5",
         "framer-motion": "^12.23.22",
         "gsap": "^3.13.0",
+        "idb-keyval": "^6.2.2",
         "jszip": "^3.10.1",
         "jwt-decode": "^4.0.0",
         "lodash-es": "^4.17.21",
@@ -8888,6 +8889,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/idb-keyval": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/idb-keyval/-/idb-keyval-6.2.2.tgz",
+      "integrity": "sha512-yjD9nARJ/jb1g+CvD0tlhUHOrJ9Sy0P8T9MF3YaLlHnSRpwPfpTX0XIvpmw3gAJUmEu3FiICLBDPXVwyEvrleg==",
+      "license": "Apache-2.0"
+    },
     "node_modules/ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
diff --git a/package.json b/package.json
index 78b8f7432..5792f8371 100644
--- a/package.json
+++ b/package.json
@@ -101,6 +101,7 @@
     "file-saver": "^2.0.5",
     "framer-motion": "^12.23.22",
     "gsap": "^3.13.0",
+    "idb-keyval": "^6.2.2",
     "jszip": "^3.10.1",
     "jwt-decode": "^4.0.0",
     "lodash-es": "^4.17.21",
diff --git a/src/features/creator-3d/components/creator3d/Creator3D.tsx b/src/features/creator-3d/components/creator3d/Creator3D.tsx
index 0f9acf1cc..b8a1f7b77 100644
--- a/src/features/creator-3d/components/creator3d/Creator3D.tsx
+++ b/src/features/creator-3d/components/creator3d/Creator3D.tsx
@@ -29,6 +29,8 @@ import { ApiSuccessResponse } from '@/types/baseModel'
 import { Emulator } from '@/features/emulator/types/emulator.type'
 import { buildSceneFromAssembly } from '@/features/creator-3d/hooks/buildSceneFromAssembly'
 import { exportGLB } from '@/features/creator-3d/hooks/exportGlb'
+import { useAutosave } from '@/features/creator-3d/components/creator3d/useAutosave'
+import { del } from 'idb-keyval'
 type Creator3DProps = {
   emulatorData: ApiSuccessResponse<Emulator> | undefined
 }
@@ -42,6 +44,17 @@ export default function Creator3D({ emulatorData }: Creator3DProps) {
   const selectedObject = useSelectedObject()
   const exportAssemblyFn = useExportAssembly()
   const fileInputRef = useRef<HTMLInputElement>(null)
+  const { actions, activities } = useAppSelector((s) => s.workspaceTree)
+  const creatorState = useMemo(
+    () => ({
+      instances,
+      actions,
+      activities
+    }),
+    [instances, actions, activities]
+  )
+
+  const autosaveKey = `creator-autosave-${workspaceId}`
 
   const [updateEmulator, { isLoading: isUpdating }] = useUpdateEmulatorMutation()
   const prevInstanceIds = useRef<string[]>([])
@@ -120,7 +133,6 @@ export default function Creator3D({ emulatorData }: Creator3DProps) {
             status: existing.status
           }
         }).unwrap()
-        toast.success('Lưu dữ liệu thành công.')
       }
 
       // console.log('Emulator creation response:', response)
@@ -304,6 +316,7 @@ export default function Creator3D({ emulatorData }: Creator3DProps) {
       // ================================
       // 🔹 Restore Activities + Steps
       // ================================
+      console.log('Restoring activity:', data.activities)
       if (Array.isArray(data.activities)) {
         for (const activity of data.activities) {
           // const fullSteps: Step[] = []
@@ -531,6 +544,64 @@ export default function Creator3D({ emulatorData }: Creator3DProps) {
     [dispatch]
   )
 
+  const restoreFromAutosave = (data: any) => {
+    if (!data) return
+
+    // Restore instances
+    if (Array.isArray(data.instances)) {
+      dispatch(setInstances(data.instances))
+    }
+
+    // Restore actions
+    dispatch(clearAction())
+    if (Array.isArray(data.actions)) {
+      for (const act of data.actions) {
+        dispatch(addAction(act))
+
+        if (Array.isArray(act.targets)) {
+          for (const targetId of act.targets) {
+            dispatch(addTargetToAction({ actionId: act.id, targetId }))
+          }
+        }
+
+        if (act.type === 'transform_arm' && act.connectorArmTransforms) {
+          Object.entries(act.connectorArmTransforms).forEach(([connectorId, arms]) => {
+            dispatch(
+              updateConnectorArms({
+                actionId: act.id,
+                connectorId,
+                arms: arms as Record<string, { x: number; y: number; z: number }>
+              })
+            )
+          })
+        }
+      }
+    }
+
+    // Restore activities
+    dispatch(clearActivities())
+    if (Array.isArray(data.activities)) {
+      for (const activity of data.activities) {
+        dispatch(
+          addActivity({
+            id: activity.id,
+            name: activity.name,
+            steps: [],
+            difficulty: activity.difficulty ?? 'medium',
+            description: activity.description ?? '',
+            estimatedTime: activity.estimatedTime ?? 10
+          })
+        )
+
+        if (Array.isArray(activity.steps)) {
+          for (const step of activity.steps) {
+            dispatch(addStepToActivity({ activityId: activity.id, step }))
+          }
+        }
+      }
+    }
+  }
+
   const handleExportGLB = async () => {
     const assembly = exportAssemblyFn({
       title: `Assembly ${workspaceId}`,
@@ -578,9 +649,22 @@ export default function Creator3D({ emulatorData }: Creator3DProps) {
     [dispatch]
   )
 
+  const { status: cloudState, loadPromise: autosaveLoaded } = useAutosave({
+    key: autosaveKey,
+    data: creatorState,
+    onLoad: restoreFromAutosave,
+    onSyncToServer: async () => handleSaveAssembly(),
+    interval: 2000,
+    debounce: 5000
+  })
+
   useEffect(() => {
-    handleImportAssembly(workspaceId)
-  }, [])
+    autosaveLoaded.then((saved) => {
+      if (!saved) {
+        handleImportAssembly(workspaceId)
+      }
+    })
+  }, [autosaveLoaded, handleImportAssembly, workspaceId])
 
   // trong Creator3D
   useEffect(() => {
@@ -619,7 +703,12 @@ export default function Creator3D({ emulatorData }: Creator3DProps) {
         />
 
         {/* Action Buttons */}
-        <SceneActions onSave={handleSaveAssembly} onImportJSON={handleClickImportJSON} onExportGLB={handleExportGLB} />
+        <SceneActions
+          cloudState={cloudState}
+          onSave={handleSaveAssembly}
+          onImportJSON={handleClickImportJSON}
+          onExportGLB={handleExportGLB}
+        />
       </div>
 
       {/* Object Inspector */}
diff --git a/src/features/creator-3d/components/creator3d/Creator3DHeader.tsx b/src/features/creator-3d/components/creator3d/Creator3DHeader.tsx
index d9bc2ef50..21d2e82e2 100644
--- a/src/features/creator-3d/components/creator3d/Creator3DHeader.tsx
+++ b/src/features/creator-3d/components/creator3d/Creator3DHeader.tsx
@@ -50,7 +50,6 @@ export default function Creator3DHeader() {
           </div>
         </div>
         <div className='flex items-center gap-3'>
-          <LanguageSwitcher />
           <Button className='bg-blue-600 hover:bg-blue-700' onClick={handleExportToJSON}>
             {t3d('header.export')}
           </Button>
diff --git a/src/features/creator-3d/components/creator3d/ExportDialog.tsx b/src/features/creator-3d/components/creator3d/ExportDialog.tsx
index b3a825624..d66395cae 100644
--- a/src/features/creator-3d/components/creator3d/ExportDialog.tsx
+++ b/src/features/creator-3d/components/creator3d/ExportDialog.tsx
@@ -27,7 +27,6 @@ export function UpsertEmulator({ emulationId }: UpsertEmulatorProps) {
 
   const [name, setName] = useState('')
   const [description, setDescription] = useState('')
-  console.log('description in UpsertEmulator:', description)
   const [visibility, setVisibility] = useState<'public' | 'private'>('public')
   const [thumbnailBase64, setThumbnailBase64] = useState<string | undefined>()
   const [thumbnailFileName, setThumbnailFileName] = useState<string | undefined>()
diff --git a/src/features/creator-3d/components/creator3d/SceneActions.tsx b/src/features/creator-3d/components/creator3d/SceneActions.tsx
index 98fbeb5e9..3dc06e678 100644
--- a/src/features/creator-3d/components/creator3d/SceneActions.tsx
+++ b/src/features/creator-3d/components/creator3d/SceneActions.tsx
@@ -1,12 +1,14 @@
+import { IconCloudCheck, IconCloudOff, IconLoader2, IconRefresh } from '@tabler/icons-react'
 import { useTranslations } from 'next-intl'
 
 interface SceneActionsProps {
+  cloudState: 'saved' | 'saving'
   onSave: () => void
   onImportJSON?: () => void
   onExportGLB?: () => void
 }
 
-export function SceneActions({ onSave, onImportJSON, onExportGLB }: SceneActionsProps) {
+export function SceneActions({ cloudState, onSave, onImportJSON, onExportGLB }: SceneActionsProps) {
   const t3d = useTranslations('creator3D.main_content')
   const tc = useTranslations('common')
   return (
@@ -14,8 +16,10 @@ export function SceneActions({ onSave, onImportJSON, onExportGLB }: SceneActions
       <button
         onClick={onSave}
         className='rounded-md border border-green-200 bg-green-50 px-3 py-2 text-sm font-medium text-green-700 hover:bg-green-100'
+        disabled={cloudState === 'saving'}
       >
-        {t3d('save_assembly')}
+        {cloudState === 'saving' && <IconLoader2 className='animate-spin' />}
+        {cloudState === 'saved' && <IconCloudCheck className='text-green-600' />}
       </button>
 
       <button
diff --git a/src/features/creator-3d/components/creator3d/useAutosave.ts b/src/features/creator-3d/components/creator3d/useAutosave.ts
new file mode 100644
index 000000000..45b63996a
--- /dev/null
+++ b/src/features/creator-3d/components/creator3d/useAutosave.ts
@@ -0,0 +1,69 @@
+// useAutosave.ts
+import { useEffect, useRef, useState } from 'react'
+import { get, set, del } from 'idb-keyval'
+
+type UseAutosaveOptions = {
+  key: string
+  data: any
+  onLoad: (data: any) => void
+  onSyncToServer: (data: any) => Promise<void>
+  interval?: number
+  debounce?: number
+}
+
+export function useAutosave({
+  key,
+  data,
+  onLoad,
+  onSyncToServer,
+  interval = 2000,
+  debounce = 5000
+}: UseAutosaveOptions) {
+  // snapshot cuối cùng đã autosave (ghi vào IndexedDB)
+  const lastSerializedRef = useRef<string>('')
+
+  // timer dùng cho debounce gọi API
+  const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  // Promise load autosave (chỉ tạo 1 lần)
+  const loadPromiseRef = useRef<Promise<any> | null>(null)
+
+  const [status, setStatus] = useState<'saving' | 'saved'>('saved')
+
+  if (!loadPromiseRef.current) {
+    loadPromiseRef.current = (async () => {
+      const saved = await get(key)
+      if (saved) onLoad(saved)
+
+      return saved
+    })()
+  }
+
+  useEffect(() => {
+    const id = setInterval(async () => {
+      const serialized = JSON.stringify(data)
+
+      if (serialized === lastSerializedRef.current) return
+
+      lastSerializedRef.current = serialized
+      await set(key, data)
+      setStatus('saving')
+
+      if (debounceTimer.current) clearTimeout(debounceTimer.current)
+
+      debounceTimer.current = setTimeout(async () => {
+        setStatus('saving')
+        await onSyncToServer(data)
+        await del(key)
+        setStatus('saved')
+      }, debounce)
+    }, interval)
+
+    return () => {
+      clearInterval(id)
+      if (debounceTimer.current) clearTimeout(debounceTimer.current)
+    }
+  }, [data])
+
+  return { status, loadPromise: loadPromiseRef.current! }
+}
diff --git a/src/features/creator-3d/components/right-sidebar/ComponentInspector.tsx b/src/features/creator-3d/components/right-sidebar/ComponentInspector.tsx
index 5b4fd8c51..16247ea10 100644
--- a/src/features/creator-3d/components/right-sidebar/ComponentInspector.tsx
+++ b/src/features/creator-3d/components/right-sidebar/ComponentInspector.tsx
@@ -28,7 +28,6 @@ export function ComponentInspector() {
   const dispatch = useAppDispatch()
   const { selectedActionId, actions } = useAppSelector((s) => s.workspaceTree)
   const selectedObject = useSelectedObject()
-  console.log({ localValues, selectedObjectCategory: selectedObject?.category })
 
   const onObjectUpdate = useCallback(
     (objectId: string, updates: any) => {
diff --git a/src/providers/Providers.tsx b/src/providers/Providers.tsx
index f0e7c86ea..b29af6b06 100644
--- a/src/providers/Providers.tsx
+++ b/src/providers/Providers.tsx
@@ -21,7 +21,7 @@ export default function Providers({
         <AuthSessionSync />
         <ModalProvider>
           {children}
-          <ChatAgent />
+          {/* <ChatAgent /> */}
         </ModalProvider>
         <Toaster />
       </StoreProvider>

From a64982c41ab3d2eaade71f9d172a802cf8be71ea Mon Sep 17 00:00:00 2001
From: ttd11204 <datkk112004@gmail.com>
Date: Thu, 11 Dec 2025 13:56:21 +0700
Subject: [PATCH 02/16] feat: Add resetWorkspace action to clear actions and
 steps in workspace state

---
 .../creator-workspace/SceneTopRight.tsx       |  4 +-
 .../components/creator3d/Creator3D.tsx        | 50 +--------------
 .../right-sidebar/ActionInspector.tsx         |  6 --
 .../right-sidebar/WorkspaceTree.tsx           | 61 ++++++++++---------
 .../creator-3d/hooks/creator-3d-helper.ts     |  3 -
 .../creator-3d/slice/workspaceTreeSlice.ts    |  8 ++-
 6 files changed, 43 insertions(+), 89 deletions(-)

diff --git a/src/features/creator-3d/components/creator-workspace/SceneTopRight.tsx b/src/features/creator-3d/components/creator-workspace/SceneTopRight.tsx
index 18afbbd07..5c02f7cdf 100644
--- a/src/features/creator-3d/components/creator-workspace/SceneTopRight.tsx
+++ b/src/features/creator-3d/components/creator-workspace/SceneTopRight.tsx
@@ -1,7 +1,7 @@
 import { Button } from '@/components/shadcn/button'
 import { clearScene } from '@/features/creator-3d/slice/creatorSceneSlice'
 import { setCameraStatus } from '@/features/creator-3d/slice/strawLabSlice'
-import { resetActions } from '@/features/creator-3d/slice/workspaceTreeSlice'
+import { resetActions, resetWorkspace } from '@/features/creator-3d/slice/workspaceTreeSlice'
 import { useAppDispatch, useAppSelector } from '@/hooks/redux-hooks'
 import { useTranslations } from 'next-intl'
 import { useCallback } from 'react'
@@ -15,7 +15,7 @@ export default function SceneTopRight() {
   const handleClearScene = useCallback(() => {
     if (confirm('Are you sure you want to clear the entire scene? This action cannot be undone.')) {
       dispatch(clearScene())
-      dispatch(resetActions())
+      dispatch(resetWorkspace())
     }
   }, [dispatch])
 
diff --git a/src/features/creator-3d/components/creator3d/Creator3D.tsx b/src/features/creator-3d/components/creator3d/Creator3D.tsx
index b8a1f7b77..b4d57f4b6 100644
--- a/src/features/creator-3d/components/creator3d/Creator3D.tsx
+++ b/src/features/creator-3d/components/creator3d/Creator3D.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useCallback, useMemo, useEffect, useRef } from 'react'
+import { useCallback, useMemo, useEffect, useRef } from 'react'
 import { ComponentPalette } from '../component-palette/ComponentPalette'
 import { SceneActions } from '@/features/creator-3d/components/creator3d/SceneActions'
 import { SceneStats } from '@/features/creator-3d/components/creator3d/SceneStats'
@@ -27,10 +27,8 @@ import { useParams } from 'next/navigation'
 import { useUpdateEmulatorMutation } from '@/features/emulator/api/emulatorApi'
 import { ApiSuccessResponse } from '@/types/baseModel'
 import { Emulator } from '@/features/emulator/types/emulator.type'
-import { buildSceneFromAssembly } from '@/features/creator-3d/hooks/buildSceneFromAssembly'
 import { exportGLB } from '@/features/creator-3d/hooks/exportGlb'
 import { useAutosave } from '@/features/creator-3d/components/creator3d/useAutosave'
-import { del } from 'idb-keyval'
 type Creator3DProps = {
   emulatorData: ApiSuccessResponse<Emulator> | undefined
 }
@@ -156,8 +154,8 @@ export default function Creator3D({ emulatorData }: Creator3DProps) {
       }
 
       const existing = emulatorData.data
+
       const data = existing.definitionJson ? JSON.parse(existing.definitionJson) : null
-      console.log('Importing assembly data:', data.instances.connectors)
       if (!data) throw new Error('Dữ liệu assembly không hợp lệ')
 
       const allInstances: AssemblyInstance[] = []
@@ -316,23 +314,8 @@ export default function Creator3D({ emulatorData }: Creator3DProps) {
       // ================================
       // 🔹 Restore Activities + Steps
       // ================================
-      console.log('Restoring activity:', data.activities)
       if (Array.isArray(data.activities)) {
         for (const activity of data.activities) {
-          // const fullSteps: Step[] = []
-
-          // if (Array.isArray(activity.steps)) {
-          //   for (const step of activity.steps) {
-          //     fullSteps.push({
-          //       actionId: step.actionId + 1111,
-          //       title: step.title || 'Untitled Step',
-          //       description: step.description || '',
-          //       expectedResult: step.expectedResult || '',
-          //       hints: step.hints || []
-          //     })
-          //   }
-          // }
-
           dispatch(
             addActivity({
               id: activity.id,
@@ -348,35 +331,6 @@ export default function Creator3D({ emulatorData }: Creator3DProps) {
           if (Array.isArray(activity.steps)) {
             for (const step of activity.steps) {
               dispatch(addStepToActivity({ activityId: activity.id, step }))
-
-              // ✅ 3️⃣ Nếu step có actions thì xử lý tiếp
-              // if (Array.isArray(step.actions)) {
-              //   for (const act of step.actions) {
-              //     // Thêm action
-              //     dispatch(addAction({ id: act.id, name: act.name, type: act.type }))
-              //     console.log('Restoring action:', act.id, act.name, act.type)
-
-              //     // Gắn các target
-              //     if (Array.isArray(act.targets)) {
-              //       act.targets.forEach((targetId: string) =>
-              //         dispatch(addTargetToAction({ actionId: act.id, targetId }))
-              //       )
-              //     }
-
-              //     // Restore arms nếu có
-              //     if (act.type === 'transform_arm' && act.connectorArmTransforms) {
-              //       Object.entries(act.connectorArmTransforms).forEach(([connectorId, arms]) => {
-              //         dispatch(
-              //           updateConnectorArms({
-              //             actionId: act.id,
-              //             connectorId,
-              //             arms: arms as Record<string, { x: number; y: number; z: number }>
-              //           })
-              //         )
-              //       })
-              //     }
-              //   }
-              // }
             }
           }
         }
diff --git a/src/features/creator-3d/components/right-sidebar/ActionInspector.tsx b/src/features/creator-3d/components/right-sidebar/ActionInspector.tsx
index f4f508bf1..d04030341 100644
--- a/src/features/creator-3d/components/right-sidebar/ActionInspector.tsx
+++ b/src/features/creator-3d/components/right-sidebar/ActionInspector.tsx
@@ -15,19 +15,15 @@ export default function ActionInspector({ selectedAction }: ActionInspectorProps
   const t3d = useTranslations('creator3D.right_panel')
   const dispatch = useAppDispatch()
   const activities = useAppSelector((s) => s.workspaceTree.activities)
-  console.log('activities', activities)
 
-  // 🔍 Tìm step tương ứng actionId
   const stepInfo = useMemo(() => {
     for (const activity of activities) {
-      console.log('activity', activity)
       const idx = activity.steps.findIndex((s) => s.actionId === selectedAction.id)
       if (idx !== -1) return { activityId: activity.id, stepIndex: idx, step: activity.steps[idx] }
     }
     return null
   }, [activities, selectedAction.id])
 
-  // ⚙️ Local state cho tất cả field
   const [localFields, setLocalFields] = useState(() => ({
     name: selectedAction.name,
     title: stepInfo?.step.title || '',
@@ -36,12 +32,10 @@ export default function ActionInspector({ selectedAction }: ActionInspectorProps
     hints: stepInfo?.step.hints || []
   }))
 
-  // 🧠 Handle thay đổi field (cập nhật local state)
   const handleChange = (field: keyof typeof localFields, value: string | string[]) => {
     setLocalFields((prev) => ({ ...prev, [field]: value }))
   }
 
-  // 🧩 Khi blur, sync lên Redux
   const handleBlur = () => {
     // update name
     if (localFields.name !== selectedAction.name) {
diff --git a/src/features/creator-3d/components/right-sidebar/WorkspaceTree.tsx b/src/features/creator-3d/components/right-sidebar/WorkspaceTree.tsx
index b5e20542b..4ce25b70a 100644
--- a/src/features/creator-3d/components/right-sidebar/WorkspaceTree.tsx
+++ b/src/features/creator-3d/components/right-sidebar/WorkspaceTree.tsx
@@ -20,6 +20,7 @@ import { useAppDispatch, useAppSelector } from '@/hooks/redux-hooks'
 import { RootState } from '@/libs/redux/store'
 import {
   addAction,
+  addActivity,
   addStepToActivity,
   moveTargetToAction,
   removeActionWithInstances,
@@ -176,39 +177,41 @@ export default function WorkspaceTree() {
 
   const handleAddAction = (type: WorkspaceAction['type']) => {
     const newId = `action_${nextActionNumber}`
-    if (type === 'highlight') {
-      dispatch(addAction({ id: newId, name: `Bước ${nextActionNumber}`, type }))
-      dispatch(
-        // TODO: hard code activityId tạm thời
-        addStepToActivity({
-          activityId: activities[0]?.id || newId,
-          step: {
-            title: `Bước ${nextActionNumber}`,
-            actionId: newId,
-            description: '',
-            expectedResult: '',
-            hints: []
-          }
-        })
-      )
-      dispatch(setSelectedAction(newId))
-    }
-    if (type === 'transform_arm') {
-      dispatch(addAction({ id: newId, name: `Bước ${nextActionNumber}`, type }))
+
+    let activityId = activities[0]?.id
+    if (!activityId) {
+      activityId = 'activity_1'
       dispatch(
-        addStepToActivity({
-          activityId: activities[0]?.id || newId,
-          step: {
-            title: `Bước ${nextActionNumber}`,
-            actionId: newId,
-            description: '',
-            expectedResult: '',
-            hints: []
-          }
+        addActivity({
+          id: activityId,
+          name: 'Activity 1',
+          steps: [],
+          difficulty: 'easy',
+          description: '',
+          estimatedTime: 10
         })
       )
-      dispatch(setSelectedAction(newId))
     }
+
+    // 2️⃣ Add action mới
+    dispatch(addAction({ id: newId, name: `Bước ${nextActionNumber}`, type }))
+
+    // 3️⃣ Add step cho đúng action và activity
+    dispatch(
+      addStepToActivity({
+        activityId,
+        step: {
+          title: `Bước ${nextActionNumber}`,
+          actionId: newId,
+          description: '',
+          expectedResult: '',
+          hints: []
+        }
+      })
+    )
+
+    // 4️⃣ Chọn action mới
+    dispatch(setSelectedAction(newId))
   }
 
   // 1️⃣ expand chỉ khi actions thay đổi
diff --git a/src/features/creator-3d/hooks/creator-3d-helper.ts b/src/features/creator-3d/hooks/creator-3d-helper.ts
index 4c18b3d33..ac1298293 100644
--- a/src/features/creator-3d/hooks/creator-3d-helper.ts
+++ b/src/features/creator-3d/hooks/creator-3d-helper.ts
@@ -215,7 +215,6 @@ export function exportAssembly(
   const now = new Date().toISOString()
   const actions = state.workspaceTree.actions
   const activities = state.workspaceTree.activities
-  console.log('🧩 Exporting activities activities:', activities)
   // Straws
   const straws = instances
     .filter((i) => i.category === 'straw')
@@ -288,8 +287,6 @@ export function exportAssembly(
     }))
   }))
 
-  console.log('🧩 Exported Assembly Activities:', exportedActivities)
-
   return {
     metadata: {
       ...metadata,
diff --git a/src/features/creator-3d/slice/workspaceTreeSlice.ts b/src/features/creator-3d/slice/workspaceTreeSlice.ts
index 9e193eaaa..29a502222 100644
--- a/src/features/creator-3d/slice/workspaceTreeSlice.ts
+++ b/src/features/creator-3d/slice/workspaceTreeSlice.ts
@@ -236,6 +236,11 @@ export const workspaceTreeSlice = createSlice({
     clearAction: (state) => {
       state.actions = []
       state.selectedActionId = null
+    },
+    resetWorkspace: (state) => {
+      state.actions = []
+      state.activities.forEach((a) => (a.steps = [])) // xoá toàn bộ step
+      state.selectedActionId = null
     }
   }
 })
@@ -255,7 +260,8 @@ export const {
   removeTargetFromAllActions,
   updateActionName,
   updateTargetOrderInAction,
-  clearActivities
+  clearActivities,
+  resetWorkspace
 } = workspaceTreeSlice.actions
 
 export default workspaceTreeSlice.reducer

From 457ac3b3e951fae4d8d5d54a460e4a8d97012c87 Mon Sep 17 00:00:00 2001
From: LeThanhNhan91 <lethanhnhan09012004@gmail.com>
Date: Thu, 11 Dec 2025 14:54:10 +0700
Subject: [PATCH 03/16] feat: System Admin dashboard

---
 messages/en/dashboard/en_dashboard.json       |  50 +++
 messages/vi/dashboard/vi_dashboard.json       |  50 +++
 .../[locale]/admin/(main)/dashboard/page.tsx  |   7 +-
 .../dashboard/api/AdminDashboardApi.ts        |  22 ++
 .../components/AdminSystemDashboard.tsx       | 296 ++++++++++++++++++
 .../tableColumn/TopCourseColumns.tsx          |  73 +++++
 .../components/tableColumn/TopOrgColumns.tsx  |  68 ++++
 .../dashboard/types/systemDashboard.type.ts   |  75 +++++
 src/libs/redux/apiMiddleware.ts               |   4 +-
 src/libs/redux/rootReducer.ts                 |   4 +-
 10 files changed, 643 insertions(+), 6 deletions(-)
 create mode 100644 src/features/dashboard/api/AdminDashboardApi.ts
 create mode 100644 src/features/dashboard/components/AdminSystemDashboard.tsx
 create mode 100644 src/features/dashboard/components/tableColumn/TopCourseColumns.tsx
 create mode 100644 src/features/dashboard/components/tableColumn/TopOrgColumns.tsx
 create mode 100644 src/features/dashboard/types/systemDashboard.type.ts

diff --git a/messages/en/dashboard/en_dashboard.json b/messages/en/dashboard/en_dashboard.json
index 873f22080..f262d7c90 100644
--- a/messages/en/dashboard/en_dashboard.json
+++ b/messages/en/dashboard/en_dashboard.json
@@ -108,6 +108,56 @@
         "currTitle": "Curriculum Title",
         "name": "Name"
       }
+    },
+    "admin": {
+      "title": "System Dashboard",
+      "subtitle": "Overview of system performance and revenue",
+      "period": {
+        "placeholder": "Select period",
+        "month": "Month",
+        "quarter": "Quarter",
+        "year": "Year"
+      },
+      "stats": {
+        "revenue": "Total Revenue",
+        "compare": "vs previous period",
+        "activeOrg": "Active Organizations",
+        "growth": "Growth",
+        "totalStudent": "Total Students",
+        "enrollment": "Enrollments",
+        "completionRate": "Completion Rate"
+      },
+      "charts": {
+        "revenueByPlan": "Revenue by Plan",
+        "revenueDesc": "Revenue distribution based on subscription plans",
+        "planDetail": "Subscription Plan Details",
+        "planDetailDesc": "Current subscription plan status",
+        "totalPlan": "Total Plans",
+        "active": "Active",
+        "expired": "Expired",
+        "noData": "No revenue data available"
+      },
+      "tables": {
+        "topOrg": "Top Organizations",
+        "topOrgDesc": "Organizations with the largest student body",
+        "topCourse": "Top Courses",
+        "topCourseDesc": "Most popular courses in the system",
+        "headers": {
+           "orgName": "Organization Name",
+           "students": "Students",
+           "enrollments": "Enrollments",
+           "passRate": "Pass Rate",
+           "activeSub": "Active Subs",
+           "courseName": "Course Name",
+           "classrooms": "Classrooms",
+           "avgScore": "Avg Score",
+           "completion": "Completion"
+        },
+        "placeholders": {
+            "org": "No organization data",
+            "course": "No course data"
+        }
+      }
     }
   }
 }
diff --git a/messages/vi/dashboard/vi_dashboard.json b/messages/vi/dashboard/vi_dashboard.json
index 36cc33b7d..e3d08f895 100644
--- a/messages/vi/dashboard/vi_dashboard.json
+++ b/messages/vi/dashboard/vi_dashboard.json
@@ -109,6 +109,56 @@
         "currTitle": "Tên chương trình",
         "name": "Tên"
       }
+    },
+    "admin": {
+      "title": "Bảng điều khiển hệ thống",
+      "subtitle": "Tổng quan hiệu suất hệ thống và doanh thu",
+      "period": {
+        "placeholder": "Chọn kỳ",
+        "month": "Tháng này",
+        "quarter": "Quý này",
+        "year": "Năm này"
+      },
+      "stats": {
+        "revenue": "Tổng doanh thu",
+        "compare": "So với kỳ trước",
+        "activeOrg": "Tổ chức hoạt động",
+        "growth": "Tăng trưởng",
+        "totalStudent": "Tổng học sinh",
+        "enrollment": "Lượt ghi danh",
+        "completionRate": "Tỷ lệ hoàn thành"
+      },
+      "charts": {
+        "revenueByPlan": "Doanh thu theo Gói",
+        "revenueDesc": "Phân bổ doanh thu dựa trên các gói đăng ký",
+        "planDetail": "Chi tiết gói đăng ký",
+        "planDetailDesc": "Trạng thái các gói đăng ký hiện tại",
+        "totalPlan": "Tổng gói",
+        "active": "Đang hoạt động",
+        "expired": "Đã hết hạn",
+        "noData": "Chưa có dữ liệu doanh thu"
+      },
+      "tables": {
+        "topOrg": "Top Tổ Chức",
+        "topOrgDesc": "Các tổ chức có lượng học viên lớn nhất",
+        "topCourse": "Top Khóa Học",
+        "topCourseDesc": "Các khóa học phổ biến nhất hệ thống",
+        "headers": {
+           "orgName": "Tên Tổ Chức",
+           "students": "Học sinh",
+           "enrollments": "Ghi danh",
+           "passRate": "Tỷ lệ đạt",
+           "activeSub": "Gói hoạt động",
+           "courseName": "Khóa học",
+           "classrooms": "Lớp học",
+           "avgScore": "Điểm TB",
+           "completion": "Hoàn thành"
+        },
+        "placeholders": {
+            "org": "Chưa có dữ liệu tổ chức",
+            "course": "Chưa có dữ liệu khóa học"
+        }
+      }
     }
   }
 }
diff --git a/src/app/[locale]/admin/(main)/dashboard/page.tsx b/src/app/[locale]/admin/(main)/dashboard/page.tsx
index d9c7d481c..a6c2f64cf 100644
--- a/src/app/[locale]/admin/(main)/dashboard/page.tsx
+++ b/src/app/[locale]/admin/(main)/dashboard/page.tsx
@@ -1,10 +1,9 @@
-import data from './data.json'
-import { DataTable } from '@/components/shadcn/data-table'
+import SystemDashboardPage from '@/features/dashboard/components/AdminSystemDashboard'
 
-export default function Page() {
+export default function AdminDashboardPage() {
   return (
     <div className='flex flex-col gap-4 py-4 md:gap-6 md:py-6'>
-      <DataTable data={data} />
+      <SystemDashboardPage/>
     </div>
   )
 }
diff --git a/src/features/dashboard/api/AdminDashboardApi.ts b/src/features/dashboard/api/AdminDashboardApi.ts
new file mode 100644
index 000000000..74fad8ee3
--- /dev/null
+++ b/src/features/dashboard/api/AdminDashboardApi.ts
@@ -0,0 +1,22 @@
+import { ApiSuccessResponse } from './../../../types/baseModel';
+import { createApi } from '@reduxjs/toolkit/query/react'
+import { customFetchBaseQueryWithErrorHandling } from '@/libs/redux/baseApi'
+import { SystemDashboardQueryParams, SystemDashboardData } from '../types/systemDashboard.type'
+
+export const systemDashboardApi = createApi({
+  reducerPath: 'systemDashboardApi',
+  baseQuery: customFetchBaseQueryWithErrorHandling,
+  tagTypes: ['SystemDashboard'],
+  endpoints: (builder) => ({
+    getSystemDashboard: builder.query<ApiSuccessResponse<SystemDashboardData>, SystemDashboardQueryParams>({
+      query: (params) => ({
+        url: '/admin/dashboard',
+        method: 'GET',
+        params: params
+      }),
+      providesTags: ['SystemDashboard']
+    })
+  })
+})
+
+export const { useGetSystemDashboardQuery } = systemDashboardApi
\ No newline at end of file
diff --git a/src/features/dashboard/components/AdminSystemDashboard.tsx b/src/features/dashboard/components/AdminSystemDashboard.tsx
new file mode 100644
index 000000000..24a8962b9
--- /dev/null
+++ b/src/features/dashboard/components/AdminSystemDashboard.tsx
@@ -0,0 +1,296 @@
+'use client'
+
+import React, { useState, useMemo } from 'react'
+import { DataTable } from '@/components/shared/data-table/data-table'
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/shadcn/card'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/shadcn/select'
+import { Badge } from '@/components/shadcn/badge'
+import { Users, Building2, BookOpen, DollarSign, TrendingUp, TrendingDown, Book } from 'lucide-react'
+import LoadingComponent from '@/components/shared/loading/LoadingComponent'
+import {
+  Chart as ChartJS,
+  ArcElement,
+  Tooltip,
+  Legend,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title
+} from 'chart.js'
+import { Doughnut } from 'react-chartjs-2'
+import { useTranslations } from 'next-intl'
+import { useGetSystemDashboardQuery } from '../api/AdminDashboardApi'
+import { TopOrganizationTableItem, useTopOrgColumns } from './tableColumn/TopOrgColumns'
+import { TopCourseTableItem, useTopCourseColumns } from './tableColumn/TopCourseColumns'
+
+ChartJS.register(ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement, Title)
+
+export default function SystemDashboardPage() {
+  const t = useTranslations('dashboard.admin')
+  const [period, setPeriod] = useState<'Month' | 'Quarter' | 'Year'>('Month')
+  const { data: response, isLoading } = useGetSystemDashboardQuery({ period })
+  
+  const orgColumns = useTopOrgColumns()
+  const courseColumns = useTopCourseColumns()
+
+  const tableDataOrgs: TopOrganizationTableItem[] = useMemo(() => {
+    if (!response?.data?.topOrganizations) return []
+    return response.data.topOrganizations.map((org) => ({
+      ...org,
+      id: org.organizationId
+    }))
+  }, [response])
+
+  const tableDataCourses: TopCourseTableItem[] = useMemo(() => {
+    if (!response?.data?.topCourses) return []
+    return response.data.topCourses.map((course) => ({
+      ...course,
+      id: course.courseId
+    }))
+  }, [response])
+
+  if (isLoading)
+    return (
+      <div className='flex h-screen items-center justify-center'>
+        <LoadingComponent />
+      </div>
+    )
+  if (!response?.data) return <div>{t('charts.noData')}</div>
+
+  const { summary, subscriptions, periodComparison } = response.data
+
+  const formatCurrency = (value: number) =>
+    new Intl.NumberFormat('vi-VN', { style: 'currency', currency: 'VND' }).format(value)
+
+  const GrowthIndicator = ({ value }: { value: number }) => {
+    const isPositive = value >= 0
+    return (
+      <Badge
+        variant={isPositive ? 'default' : 'destructive'}
+        className={`ml-2 border-none ${isPositive ? 'bg-green-100 text-green-700 hover:bg-green-200' : 'bg-red-100 text-red-700 hover:bg-red-200'}`}
+      >
+        {isPositive ? <TrendingUp className='mr-1 h-3 w-3' /> : <TrendingDown className='mr-1 h-3 w-3' />}
+        {Math.abs(value)}%
+      </Badge>
+    )
+  }
+
+  const revenueChartData = {
+    labels: subscriptions.byPlan.map((p) => p.planName),
+    datasets: [
+      {
+        label: t('stats.revenue'),
+        data: subscriptions.byPlan.map((p) => p.revenue),
+        backgroundColor: [
+          'rgba(59, 130, 246, 0.8)',
+          'rgba(16, 185, 129, 0.8)',
+          'rgba(249, 115, 22, 0.8)',
+          'rgba(139, 92, 246, 0.8)'
+        ],
+        borderColor: [
+          'rgba(59, 130, 246, 1)',
+          'rgba(16, 185, 129, 1)',
+          'rgba(249, 115, 22, 1)',
+          'rgba(139, 92, 246, 1)'
+        ],
+        borderWidth: 1
+      }
+    ]
+  }
+
+  return (
+    <div className='min-h-screen space-y-6 bg-slate-50/50 p-6'>
+      {/* Header & Filter */}
+      <div className='flex flex-col items-start justify-between gap-4 md:flex-row md:items-center'>
+        <div>
+          <h1 className='text-3xl font-bold tracking-tight text-gray-900'>{t('title')}</h1>
+          <p className='mt-1 text-muted-foreground'>{t('subtitle')}</p>
+        </div>
+        <div className='w-[120px]'>
+          <Select value={period} onValueChange={(val: any) => setPeriod(val)}>
+            <SelectTrigger className='bg-white'>
+              <SelectValue placeholder={t('period.placeholder')} />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value='Month'>{t('period.month')}</SelectItem>
+              <SelectItem value='Quarter'>{t('period.quarter')}</SelectItem>
+              <SelectItem value='Year'>{t('period.year')}</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      {/* Stats Cards Row */}
+      <div className='grid gap-4 md:grid-cols-2 lg:grid-cols-4'>
+        <Card className='shadow-sm transition-shadow hover:shadow-md py-4'>
+          <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
+            <CardTitle className='text-sm font-medium'>{t('stats.revenue')}</CardTitle>
+            <DollarSign className='h-4 w-4 text-green-600' />
+          </CardHeader>
+          <CardContent>
+            <div className='text-2xl font-bold'>{formatCurrency(subscriptions.totalRevenue)}</div>
+            <p className='mt-1 flex items-center text-xs text-muted-foreground'>
+              {t('stats.compare')}: <GrowthIndicator value={periodComparison.revenueGrowth} />
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card className='shadow-sm transition-shadow hover:shadow-md py-4'>
+          <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
+            <CardTitle className='text-sm font-medium'>{t('stats.activeOrg')}</CardTitle>
+            <Building2 className='h-4 w-4 text-blue-600' />
+          </CardHeader>
+          <CardContent>
+            <div className='text-2xl font-bold'>
+              {summary.activeOrganizations} / {summary.totalOrganizations}
+            </div>
+            <p className='mt-1 flex items-center text-xs text-muted-foreground'>
+              {t('stats.growth')}: <GrowthIndicator value={periodComparison.organizationGrowth} />
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card className='shadow-sm transition-shadow hover:shadow-md py-4'>
+          <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
+            <CardTitle className='text-sm font-medium'>{t('stats.totalStudent')}</CardTitle>
+            <Users className='h-4 w-4 text-orange-600' />
+          </CardHeader>
+          <CardContent>
+            <div className='text-2xl font-bold'>{summary.totalStudents}</div>
+            <p className='mt-1 flex items-center text-xs text-muted-foreground'>
+               {t('stats.growth')}: <GrowthIndicator value={periodComparison.studentGrowth} />
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card className='shadow-sm transition-shadow hover:shadow-md py-4'>
+          <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
+            <CardTitle className='text-sm font-medium'>{t('stats.enrollment')}</CardTitle>
+            <BookOpen className='h-4 w-4 text-purple-600' />
+          </CardHeader>
+          <CardContent>
+            <div className='text-2xl font-bold'>{summary.totalEnrollments}</div>
+            <p className='mt-1 flex items-center text-xs text-muted-foreground'>
+              {t('stats.completionRate')}:{' '}
+              <span className='ml-1 font-semibold text-gray-700'>
+                {response.data.enrollments.completionRate}%
+              </span>
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Charts Row */}
+      <div className='grid gap-6 md:grid-cols-2 lg:grid-cols-6'>
+        <Card className='col-span-3 shadow-sm py-4'>
+          <CardHeader>
+            <CardTitle>{t('charts.revenueByPlan')}</CardTitle>
+            <CardDescription>{t('charts.revenueDesc')}</CardDescription>
+          </CardHeader>
+          <CardContent className='flex h-[300px] items-center justify-center'>
+            {subscriptions.byPlan.length > 0 ? (
+              <div className='h-[250px] w-[250px]'>
+                <Doughnut data={revenueChartData} options={{ maintainAspectRatio: false }} />
+              </div>
+            ) : (
+              <div className='text-sm text-muted-foreground'>{t('charts.noData')}</div>
+            )}
+          </CardContent>
+        </Card>
+
+        <Card className='col-span-3 shadow-sm py-4'>
+          <CardHeader>
+            <CardTitle>{t('charts.planDetail')}</CardTitle>
+            <CardDescription className='mb-2'>{t('charts.planDetailDesc')}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className='mb-6 grid grid-cols-3 gap-4'>
+              <div className='rounded-lg border border-blue-100 bg-blue-50 p-4'>
+                <div className='text-sm font-medium text-blue-600'>{t('charts.totalPlan')}</div>
+                <div className='text-2xl font-bold text-blue-900'>
+                  {subscriptions.totalSubscriptions}
+                </div>
+              </div>
+              <div className='rounded-lg border border-green-100 bg-green-50 p-4'>
+                <div className='text-sm font-medium text-green-600'>{t('charts.active')}</div>
+                <div className='text-2xl font-bold text-green-900'>
+                  {subscriptions.activeSubscriptions}
+                </div>
+              </div>
+              <div className='rounded-lg border border-red-100 bg-red-50 p-4'>
+                <div className='text-sm font-medium text-red-600'>{t('charts.expired')}</div>
+                <div className='text-2xl font-bold text-red-900'>
+                  {subscriptions.expiredSubscriptions}
+                </div>
+              </div>
+            </div>
+
+            <div className='space-y-4'>
+              {subscriptions.byPlan.map((plan, index) => (
+                <div
+                  key={index}
+                  className='flex items-center justify-between rounded-md bg-gray-50 p-3'
+                >
+                  <div className='flex items-center gap-3'>
+                    <div
+                      className={`h-8 w-2 rounded-full ${index === 0 ? 'bg-blue-500' : 'bg-purple-500'}`}
+                    ></div>
+                    <div>
+                      <div className='text-sm font-semibold'>{plan.planName}</div>
+                      <div className='text-xs text-muted-foreground'>
+                        {t('charts.active')}: {plan.activeCount}
+                      </div>
+                    </div>
+                  </div>
+                  <div className='font-bold text-gray-700'>{formatCurrency(plan.revenue)}</div>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Tables Row: Top Org & Top Courses */}
+      <div className='grid gap-6 xl:grid-cols-2'>
+        <Card className='shadow-sm py-4'>
+          <CardHeader className='flex flex-row items-center justify-between pb-2'>
+            <div>
+              <CardTitle>{t('tables.topOrg')}</CardTitle>
+              <CardDescription>{t('tables.topOrgDesc')}</CardDescription>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <DataTable
+              columns={orgColumns}
+              data={tableDataOrgs}
+              pagingData={undefined}
+              pagingParams={{ pageNumber: 1, pageSize: tableDataOrgs.length }}
+              handlePageChange={() => {}}
+              placeholder={t('tables.placeholders.org')}
+            />
+          </CardContent>
+        </Card>
+
+        <Card className='shadow-sm py-4'>
+          <CardHeader className='flex flex-row items-center justify-between pb-2'>
+            <div>
+              <CardTitle>{t('tables.topCourse')}</CardTitle>
+              <CardDescription>{t('tables.topCourseDesc')}</CardDescription>
+            </div>
+            <Book className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <DataTable
+              columns={courseColumns}
+              data={tableDataCourses}
+              pagingData={undefined}
+              pagingParams={{ pageNumber: 1, pageSize: tableDataCourses.length }}
+              handlePageChange={() => {}}
+              placeholder={t('tables.placeholders.course')}
+            />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/features/dashboard/components/tableColumn/TopCourseColumns.tsx b/src/features/dashboard/components/tableColumn/TopCourseColumns.tsx
new file mode 100644
index 000000000..2eea4f5ba
--- /dev/null
+++ b/src/features/dashboard/components/tableColumn/TopCourseColumns.tsx
@@ -0,0 +1,73 @@
+import { ColumnDef } from '@tanstack/react-table'
+import { Badge } from '@/components/shadcn/badge'
+import { Users, School } from 'lucide-react'
+import { useTranslations } from 'next-intl'
+import { TopCourse } from '../../types/systemDashboard.type'
+
+export type TopCourseTableItem = TopCourse & {
+  id: number | string
+}
+
+export const useTopCourseColumns = (): ColumnDef<TopCourseTableItem>[] => {
+  const t = useTranslations('dashboard.admin.tables.headers')
+
+  return [
+    {
+      accessorKey: 'courseName',
+      header: t('courseName'),
+      cell: ({ row }) => (
+        <div className='flex flex-col'>
+          <span className='font-semibold text-gray-900 line-clamp-1' title={row.original.courseName}>
+            {row.original.courseName}
+          </span>
+          <span className='text-xs text-muted-foreground'>
+            {row.original.courseCode}
+          </span>
+        </div>
+      )
+    },
+    {
+      accessorKey: 'totalEnrollments',
+      header: t('enrollments'),
+      cell: ({ row }) => (
+        <div className='flex items-center gap-2'>
+          <Users className='h-4 w-4 text-blue-500' />
+          <span className='font-medium'>{row.original.totalEnrollments}</span>
+        </div>
+      )
+    },
+    {
+      accessorKey: 'totalClassrooms',
+      header: t('classrooms'),
+      cell: ({ row }) => (
+        <div className='flex items-center gap-2'>
+          <School className='h-4 w-4 text-indigo-500' />
+          <span className='font-medium'>{row.original.totalClassrooms}</span>
+        </div>
+      )
+    },
+    {
+      accessorKey: 'averageScore',
+      header: t('avgScore'),
+      cell: ({ row }) => (
+        <div className='font-medium text-gray-700'>
+          {row.original.averageScore.toFixed(1)}
+        </div>
+      )
+    },
+    {
+      accessorKey: 'completionRate',
+      header: t('completion'),
+      cell: ({ row }) => {
+        const rate = row.original.completionRate
+        return (
+          <div className='flex items-center gap-2'>
+            <Badge variant={rate >= 70 ? 'success' : 'secondary'} className='whitespace-nowrap rounded-sm'>
+              {rate}%
+            </Badge>
+          </div>
+        )
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/src/features/dashboard/components/tableColumn/TopOrgColumns.tsx b/src/features/dashboard/components/tableColumn/TopOrgColumns.tsx
new file mode 100644
index 000000000..99083b5e6
--- /dev/null
+++ b/src/features/dashboard/components/tableColumn/TopOrgColumns.tsx
@@ -0,0 +1,68 @@
+import { ColumnDef } from '@tanstack/react-table'
+import { Badge } from '@/components/shadcn/badge'
+import { useTranslations } from 'next-intl'
+import { GraduationCap, Users, CreditCard } from 'lucide-react'
+import { TopOrganization } from '../../types/systemDashboard.type'
+
+export type TopOrganizationTableItem = TopOrganization & {
+  id: number | string
+}
+
+export const useTopOrgColumns = (): ColumnDef<TopOrganizationTableItem>[] => {
+  const t = useTranslations('dashboard.admin.tables.headers')
+
+  return [
+    {
+      accessorKey: 'organizationName',
+      header: t('orgName'),
+      cell: ({ row }) => (
+        <div className='flex flex-col'>
+          <span className='font-semibold text-gray-900'>{row.original.organizationName}</span>
+          <span className='text-xs text-muted-foreground'>ID: {row.original.organizationId}</span>
+        </div>
+      )
+    },
+    {
+      accessorKey: 'totalStudents',
+      header: t('students'),
+      cell: ({ row }) => (
+        <div className='flex items-center gap-2'>
+          <Users className='h-4 w-4 text-blue-500' />
+          <span className='font-medium'>{row.original.totalStudents}</span>
+        </div>
+      )
+    },
+    {
+      accessorKey: 'totalEnrollments',
+      header: t('enrollments'),
+      cell: ({ row }) => (
+        <div className='flex items-center gap-2'>
+          <GraduationCap className='h-4 w-4 text-orange-500' />
+          <span className='font-medium'>{row.original.totalEnrollments}</span>
+        </div>
+      )
+    },
+    {
+      accessorKey: 'passRate',
+      header: t('passRate'),
+      cell: ({ row }) => {
+        const rate = row.original.passRate
+        return (
+          <Badge variant={rate >= 50 ? 'success' : 'destructive'} className='rounded-sm'>
+            {rate}%
+          </Badge>
+        )
+      }
+    },
+    {
+      accessorKey: 'activeSubscriptions',
+      header: t('activeSub'),
+      cell: ({ row }) => (
+        <div className='flex items-center gap-2'>
+          <CreditCard className='h-4 w-4 text-purple-500' />
+          <span className='font-medium'>{row.original.activeSubscriptions}</span>
+        </div>
+      )
+    }
+  ]
+}
\ No newline at end of file
diff --git a/src/features/dashboard/types/systemDashboard.type.ts b/src/features/dashboard/types/systemDashboard.type.ts
new file mode 100644
index 000000000..9ab030776
--- /dev/null
+++ b/src/features/dashboard/types/systemDashboard.type.ts
@@ -0,0 +1,75 @@
+import { ApiResponse } from '@/types/baseModel'
+
+
+export type SystemDashboardData = {
+  summary: DashboardSummary
+  subscriptions: SubscriptionStats
+  enrollments: EnrollmentStats
+  topCourses: TopCourse[]
+  topOrganizations: TopOrganization[]
+  periodComparison: PeriodComparison
+}
+
+export type DashboardSummary = {
+  totalOrganizations: number
+  totalEnrollments: number
+  totalStudents: number
+  totalTeachers: number
+  totalClassrooms: number
+  totalCertificates: number
+  overallPassRate: number
+  activeOrganizations: number
+}
+
+export type SubscriptionStats = {
+  totalSubscriptions: number
+  activeSubscriptions: number
+  expiredSubscriptions: number
+  byPlan: PlanStat[]
+  totalRevenue: number
+}
+
+export type TopCourse = {
+  courseId: number
+  courseCode: string
+  courseName: string
+  totalEnrollments: number
+  completionRate: number
+  averageScore: number
+  totalClassrooms: number
+}
+
+export type PlanStat = {
+  planName: string
+  count: number
+  revenue: number
+  activeCount: number
+}
+
+export type EnrollmentStats = {
+  totalEnrollments: number
+  completedEnrollments: number
+  inProgressEnrollments: number
+  enrollmentsByMonth: any[]
+  completionRate: number
+}
+
+export type TopOrganization = {
+  organizationId: number
+  organizationName: string
+  totalStudents: number
+  totalEnrollments: number
+  passRate: number
+  activeSubscriptions: number
+}
+
+export type PeriodComparison = {
+  organizationGrowth: number
+  enrollmentGrowth: number
+  studentGrowth: number
+  revenueGrowth: number
+}
+
+export type SystemDashboardQueryParams = {
+  period: 'Month' | 'Quarter' | 'Year'
+}
\ No newline at end of file
diff --git a/src/libs/redux/apiMiddleware.ts b/src/libs/redux/apiMiddleware.ts
index aa13bac7b..aed38d872 100644
--- a/src/libs/redux/apiMiddleware.ts
+++ b/src/libs/redux/apiMiddleware.ts
@@ -35,6 +35,7 @@ import { orgDashboardApi } from '@/features/dashboard/api/OrgDashboardApi'
 import { studentAssignmentApi } from '@/features/assignment/api/studentAssignmentApi'
 import { assignmentApi } from '@/features/assignment/api/assignmentApi'
 import { groupApi } from '@/features/group/api/groupApi'
+import { systemDashboardApi } from '@/features/dashboard/api/AdminDashboardApi'
 
 export const apiMiddlewares: Middleware[] = [
   courseApi.middleware,
@@ -72,7 +73,8 @@ export const apiMiddlewares: Middleware[] = [
   studentAssignmentApi.middleware,
   assignmentApi.middleware,
   orgDashboardApi.middleware,
-  groupApi.middleware
+  groupApi.middleware,
+  systemDashboardApi.middleware
   // Add your custom middlewares here
   // Example: loggerMiddleware, errorHandlingMiddleware, etc.
 ]
diff --git a/src/libs/redux/rootReducer.ts b/src/libs/redux/rootReducer.ts
index 2b9d1d0d3..44773efc1 100644
--- a/src/libs/redux/rootReducer.ts
+++ b/src/libs/redux/rootReducer.ts
@@ -75,6 +75,7 @@ import { enrollmentSlice } from '@/features/enrollment/slice/enrollmentSlice'
 import { groupApi } from '@/features/group/api/groupApi'
 import { organizationSpecialSlice } from '@/features/organization/slice/organizationSpecialSlice'
 import { groupSlice } from '@/features/group/slice/groupSlice'
+import { systemDashboardApi } from '@/features/dashboard/api/AdminDashboardApi'
 
 export const rootReducer = combineReducers({
   // Add your reducers here
@@ -157,5 +158,6 @@ export const rootReducer = combineReducers({
   [orgDashboardApi.reducerPath]: orgDashboardApi.reducer,
   [studentAssignmentApi.reducerPath]: studentAssignmentApi.reducer,
   [assignmentApi.reducerPath]: assignmentApi.reducer,
-  [groupApi.reducerPath]: groupApi.reducer
+  [groupApi.reducerPath]: groupApi.reducer,
+  [systemDashboardApi.reducerPath]: systemDashboardApi.reducer
 })

From 7251648de51e2cecf340dcd13f6c20e6beabb953 Mon Sep 17 00:00:00 2001
From: ttd11204 <datkk112004@gmail.com>
Date: Thu, 11 Dec 2025 15:23:47 +0700
Subject: [PATCH 04/16] Refactor CreatorWorkspace component: remove unused GLTF
 preload calls and commented-out keyboard shortcuts; add action to remove
 targets from all actions on delete. Update ComponentInspector to include a
 new line for clarity. Add console log for item in exportAssembly function to
 aid debugging.

---
 src/app/[locale]/test2/page.tsx               | 1514 +----------------
 .../creator-workspace/CreatorWorkspace.tsx    |   83 +-
 .../right-sidebar/ComponentInspector.tsx      |    1 +
 .../creator-3d/hooks/creator-3d-helper.ts     |    2 +-
 4 files changed, 74 insertions(+), 1526 deletions(-)

diff --git a/src/app/[locale]/test2/page.tsx b/src/app/[locale]/test2/page.tsx
index 7c34db2e5..4f85e419a 100644
--- a/src/app/[locale]/test2/page.tsx
+++ b/src/app/[locale]/test2/page.tsx
@@ -3,1341 +3,54 @@ import React from 'react'
 export default function Page() {
   const jsonObject = {
     metadata: {
-      title: 'Assembly_emu_e3676a7ca85a',
-      description: 'Exported assembly JSON',
+      title: 'Assembly emu_fc1f61b54ebf',
+      description: 'Exported from workspace',
       author: 'STEMify User',
       version: '2.0',
-      created: '2025-12-04T08:00:41.963Z',
-      lastModified: '2025-12-04T08:00:41.963Z'
+      created: '2025-12-11T07:16:28.516Z',
+      lastModified: '2025-12-11T07:16:28.516Z'
     },
     templates: {
       materials: [
-        {
-          id: 'plastic_green',
-          source: '/components/templates/MaterialLibrary/plastic_green.json'
-        },
-        {
-          id: 'plastic_red',
-          source: '/components/templates/MaterialLibrary/plastic_red.json'
-        },
-        {
-          id: 'plastic_blue',
-          source: '/components/templates/MaterialLibrary/plastic_blue.json'
-        },
-        {
-          id: 'plastic_yellow',
-          source: '/components/templates/MaterialLibrary/plastic_yellow.json'
-        },
-        {
-          id: 'plastic_orange',
-          source: '/components/templates/MaterialLibrary/plastic_orange.json'
-        },
-        {
-          id: 'plastic_pink',
-          source: '/components/templates/MaterialLibrary/plastic_pink.json'
-        }
+        { id: 'plastic_green', source: '/components/templates/MaterialLibrary/plastic_green.json' },
+        { id: 'plastic_red', source: '/components/templates/MaterialLibrary/plastic_red.json' },
+        { id: 'plastic_blue', source: '/components/templates/MaterialLibrary/plastic_blue.json' },
+        { id: 'plastic_yellow', source: '/components/templates/MaterialLibrary/plastic_yellow.json' },
+        { id: 'plastic_orange', source: '/components/templates/MaterialLibrary/plastic_orange.json' },
+        { id: 'plastic_pink', source: '/components/templates/MaterialLibrary/plastic_pink.json' }
       ],
       components: [
-        {
-          id: 'blue_19_0',
-          source: '/components/templates/StrawTypes/blue_19_0.json'
-        },
-        {
-          id: 'green_16_2',
-          source: '/components/templates/StrawTypes/green_16_2.json'
-        },
-        {
-          id: 'pink_8_9',
-          source: '/components/templates/StrawTypes/pink_8_9.json'
-        },
-        {
-          id: 'orange_6_3',
-          source: '/components/templates/StrawTypes/orange_6_3.json'
-        },
-        {
-          id: 'yellow_3_8',
-          source: '/components/templates/StrawTypes/yellow_3_8.json'
-        },
-        {
-          id: '1leg',
-          source: '/components/templates/ConnectorTypes/1leg.json'
-        },
-        {
-          id: '2leg',
-          source: '/components/templates/ConnectorTypes/2legs.json'
-        },
-        {
-          id: '3leg',
-          source: '/components/templates/ConnectorTypes/3legs.json'
-        },
-        {
-          id: '5leg',
-          source: '/components/templates/ConnectorTypes/5legs.json'
-        }
+        { id: 'blue_19_0', source: '/components/templates/StrawTypes/blue_19_0.json' },
+        { id: 'green_16_2', source: '/components/templates/StrawTypes/green_16_2.json' },
+        { id: 'pink_8_9', source: '/components/templates/StrawTypes/pink_8_9.json' },
+        { id: 'orange_6_3', source: '/components/templates/StrawTypes/orange_6_3.json' },
+        { id: 'yellow_3_8', source: '/components/templates/StrawTypes/yellow_3_8.json' },
+        { id: '1leg', source: '/components/templates/ConnectorTypes/1leg.json' },
+        { id: '2leg', source: '/components/templates/ConnectorTypes/2legs.json' },
+        { id: '3leg', source: '/components/templates/ConnectorTypes/3legs.json' },
+        { id: '5leg', source: '/components/templates/ConnectorTypes/5legs.json' }
       ]
     },
     instances: {
-      straws: [
-        {
-          templateId: 'orange_6_3',
-          instances: [
-            {
-              id: 'straw_2',
-              transform: {
-                position: {
-                  x: -16.81,
-                  y: 0,
-                  z: 0.5
-                },
-                rotation: {
-                  x: 0,
-                  y: 1.5707963267948966,
-                  z: 0
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              }
-            },
-            {
-              id: 'straw_6',
-              transform: {
-                position: {
-                  x: 1.2,
-                  y: 0,
-                  z: 0.1
-                },
-                rotation: {
-                  x: 0,
-                  y: 1.5707963267948966,
-                  z: 0
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              }
-            },
-            {
-              id: 'straw_9',
-              transform: {
-                position: {
-                  x: 19.58,
-                  y: 0,
-                  z: 0.1
-                },
-                rotation: {
-                  x: 0,
-                  y: 1.5707963267948966,
-                  z: 0
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              }
-            }
-          ]
-        },
-        {
-          templateId: 'blue_19_0',
-          instances: [
-            {
-              id: 'straw_5',
-              transform: {
-                position: {
-                  x: -7.9,
-                  y: 0,
-                  z: 0.7
-                },
-                rotation: {
-                  x: 0,
-                  y: 0.40142572795869574,
-                  z: 0
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              }
-            },
-            {
-              id: 'straw_8',
-              transform: {
-                position: {
-                  x: 10.3,
-                  y: 0,
-                  z: 0.2
-                },
-                rotation: {
-                  x: 0,
-                  y: 0.40142572795869574,
-                  z: 0.011693705988362009
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              }
-            },
-            {
-              id: 'straw_23',
-              transform: {
-                position: {
-                  x: 25.37,
-                  y: 8.05,
-                  z: -7.242924715885387
-                },
-                rotation: {
-                  x: 0,
-                  y: 0,
-                  z: 1.0471975511965976
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              }
-            },
-            {
-              id: 'straw_24',
-              transform: {
-                position: {
-                  x: 34.77249725174951,
-                  y: 8.1,
-                  z: -7.2
-                },
-                rotation: {
-                  x: 0,
-                  y: 0,
-                  z: -1.0471975511965976
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              }
-            },
-            {
-              id: 'straw_25',
-              transform: {
-                position: {
-                  x: 30.31080251771205,
-                  y: 0,
-                  z: -7.170156821198586
-                },
-                rotation: {
-                  x: 0,
-                  y: 0,
-                  z: 0
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              }
-            },
-            {
-              id: 'straw_26',
-              transform: {
-                position: {
-                  x: 30.3,
-                  y: 0,
-                  z: 9
-                },
-                rotation: {
-                  x: 0,
-                  y: 0,
-                  z: 0
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              }
-            },
-            {
-              id: 'straw_27',
-              transform: {
-                position: {
-                  x: 25.3,
-                  y: 8.1,
-                  z: 8.999041192800192
-                },
-                rotation: {
-                  x: 0,
-                  y: 0,
-                  z: 1.0471975511965976
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              }
-            },
-            {
-              id: 'straw_28',
-              transform: {
-                position: {
-                  x: 34.86959286657108,
-                  y: 8.1,
-                  z: 8.951652990328856
-                },
-                rotation: {
-                  x: 0,
-                  y: 0,
-                  z: -1.0471975511965976
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              }
-            },
-            {
-              id: 'straw_31',
-              transform: {
-                position: {
-                  x: 34.81607758931416,
-                  y: 8.45,
-                  z: 1.7943938040032492
-                },
-                rotation: {
-                  x: 0,
-                  y: 0,
-                  z: -1.0471975511965976
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              }
-            },
-            {
-              id: 'straw_32',
-              transform: {
-                position: {
-                  x: 19.093986291090562,
-                  y: 8.90132410410023,
-                  z: 0.2544576705499644
-                },
-                rotation: {
-                  x: 0,
-                  y: 0,
-                  z: -0.5235987755982988
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              }
-            },
-            {
-              id: 'straw_35',
-              transform: {
-                position: {
-                  x: 1.7507498195927065,
-                  y: 13.354867557265095,
-                  z: 0.29941936665361224
-                },
-                rotation: {
-                  x: 0,
-                  y: 0,
-                  z: 0
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              }
-            }
-          ]
-        },
-        {
-          templateId: 'green_16_2',
-          instances: [
-            {
-              id: 'straw_10',
-              transform: {
-                position: {
-                  x: -7.7,
-                  y: 0,
-                  z: -3.8
-                },
-                rotation: {
-                  x: 0,
-                  y: 0,
-                  z: 0
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              }
-            },
-            {
-              id: 'straw_11',
-              transform: {
-                position: {
-                  x: 10.4,
-                  y: 0,
-                  z: -3.8
-                },
-                rotation: {
-                  x: 0,
-                  y: 0,
-                  z: 0
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              }
-            },
-            {
-              id: 'straw_12',
-              transform: {
-                position: {
-                  x: -7.7,
-                  y: 0,
-                  z: 4.7
-                },
-                rotation: {
-                  x: 0,
-                  y: 0,
-                  z: 0
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              }
-            },
-            {
-              id: 'straw_13',
-              transform: {
-                position: {
-                  x: 10.4,
-                  y: 0,
-                  z: 4.7
-                },
-                rotation: {
-                  x: 0,
-                  y: 0,
-                  z: 0
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              }
-            },
-            {
-              id: 'straw_14',
-              transform: {
-                position: {
-                  x: -12.1,
-                  y: 6.5,
-                  z: -1.8
-                },
-                rotation: {
-                  x: 0,
-                  y: -0.4537856055185257,
-                  z: 0.8726646259971648
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              }
-            },
-            {
-              id: 'straw_15',
-              transform: {
-                position: {
-                  x: -12.1,
-                  y: 6.5,
-                  z: 2.3
-                },
-                rotation: {
-                  x: 0,
-                  y: 0.41887902047863906,
-                  z: 0.8726646259971648
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              }
-            },
-            {
-              id: 'straw_16',
-              transform: {
-                position: {
-                  x: -3.330841863339714,
-                  y: 6.248445372099425,
-                  z: -1.9038064789070885
-                },
-                rotation: {
-                  x: 0,
-                  y: 0.47123889803846897,
-                  z: -0.9075712110370514
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              }
-            },
-            {
-              id: 'straw_17',
-              transform: {
-                position: {
-                  x: -3.2,
-                  y: 6.47,
-                  z: 2.26
-                },
-                rotation: {
-                  x: 0,
-                  y: -0.4363323129985824,
-                  z: -0.890117918517108
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              }
-            },
-            {
-              id: 'straw_18',
-              transform: {
-                position: {
-                  x: 6.3,
-                  y: 6.5,
-                  z: -1.8
-                },
-                rotation: {
-                  x: 0,
-                  y: -0.4537856055185257,
-                  z: 0.8726646259971648
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              }
-            },
-            {
-              id: 'straw_19',
-              transform: {
-                position: {
-                  x: 6.3,
-                  y: 6.5,
-                  z: 2.3
-                },
-                rotation: {
-                  x: 0,
-                  y: 0.41887902047863906,
-                  z: 0.8726646259971648
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              }
-            },
-            {
-              id: 'straw_20',
-              transform: {
-                position: {
-                  x: 15.33,
-                  y: 6.5,
-                  z: -1.9
-                },
-                rotation: {
-                  x: 0,
-                  y: 0.47123889803846897,
-                  z: -0.9075712110370514
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              }
-            },
-            {
-              id: 'straw_21',
-              transform: {
-                position: {
-                  x: 15.3,
-                  y: 6.5,
-                  z: 2.5
-                },
-                rotation: {
-                  x: 0,
-                  y: -0.4363323129985824,
-                  z: -0.890117918517108
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              }
-            },
-            {
-              id: 'straw_22',
-              transform: {
-                position: {
-                  x: 20.722631586967886,
-                  y: 0,
-                  z: 1.0057328801081784
-                },
-                rotation: {
-                  x: 0,
-                  y: 1.5707963267948966,
-                  z: 0
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              }
-            },
-            {
-              id: 'straw_29',
-              transform: {
-                position: {
-                  x: 30.0045944833505,
-                  y: 16.5,
-                  z: 0.8561350731218518
-                },
-                rotation: {
-                  x: 0,
-                  y: 1.5707963267948966,
-                  z: 0
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              }
-            },
-            {
-              id: 'straw_30',
-              transform: {
-                position: {
-                  x: 40.057301867781874,
-                  y: 0,
-                  z: 1.1100846063914593
-                },
-                rotation: {
-                  x: 0,
-                  y: 1.5707963267948966,
-                  z: 0
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              }
-            }
-          ]
-        },
-        {
-          templateId: 'yellow_3_8',
-          instances: [
-            {
-              id: 'straw_34',
-              transform: {
-                position: {
-                  x: 26.17041960671652,
-                  y: 2.1148457882507943,
-                  z: 0.5329097101846596
-                },
-                rotation: {
-                  x: 0,
-                  y: 0,
-                  z: -2.2689280275926285
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              }
-            }
-          ]
-        }
-      ],
+      straws: [],
       connectors: [
-        {
-          templateId: '2leg',
-          instances: [
-            {
-              id: 'connector_5',
-              transform: {
-                position: {
-                  x: -16.8,
-                  y: 0,
-                  z: -3.1
-                },
-                rotation: {
-                  x: 1.5707963267948966,
-                  y: 0,
-                  z: 1.5707963267948966
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              },
-              arms: {}
-            },
-            {
-              id: 'connector_7',
-              transform: {
-                position: {
-                  x: -16.9,
-                  y: 0,
-                  z: 4.1
-                },
-                rotation: {
-                  x: 1.5707963267948966,
-                  y: 0,
-                  z: 1.5707963267948966
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              },
-              arms: {}
-            },
-            {
-              id: 'connector_14',
-              transform: {
-                position: {
-                  x: 1.3,
-                  y: 0,
-                  z: -3.7
-                },
-                rotation: {
-                  x: 1.5707963267948966,
-                  y: 0,
-                  z: 1.5707963267948966
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              },
-              arms: {}
-            },
-            {
-              id: 'connector_15',
-              transform: {
-                position: {
-                  x: 1.3,
-                  y: 0,
-                  z: 3.8
-                },
-                rotation: {
-                  x: 1.5707963267948966,
-                  y: 0,
-                  z: 1.5707963267948966
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              },
-              arms: {}
-            },
-            {
-              id: 'connector_18',
-              transform: {
-                position: {
-                  x: 19.66,
-                  y: 0,
-                  z: -3.15
-                },
-                rotation: {
-                  x: 1.5707963267948966,
-                  y: 0,
-                  z: 1.5707963267948966
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              },
-              arms: {}
-            },
-            {
-              id: 'connector_20',
-              transform: {
-                position: {
-                  x: 19.5,
-                  y: 0,
-                  z: 3.8
-                },
-                rotation: {
-                  x: 1.5707963267948966,
-                  y: 0,
-                  z: 1.5707963267948966
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              },
-              arms: {}
-            },
-            {
-              id: 'connector_23',
-              transform: {
-                position: {
-                  x: 1.2,
-                  y: 0,
-                  z: -3.7
-                },
-                rotation: {
-                  x: 1.5707963267948966,
-                  y: 3.141592653589793,
-                  z: 0
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              },
-              arms: {}
-            },
-            {
-              id: 'connector_27',
-              transform: {
-                position: {
-                  x: 1.3,
-                  y: 0,
-                  z: 4.7
-                },
-                rotation: {
-                  x: 1.5707963267948966,
-                  y: 0,
-                  z: 0
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              },
-              arms: {}
-            }
-          ]
-        },
         {
           templateId: '1leg',
           instances: [
             {
-              id: 'connector_9',
-              transform: {
-                position: {
-                  x: -16.97,
-                  y: 0,
-                  z: 4.5
-                },
-                rotation: {
-                  x: 1.5707963267948966,
-                  y: 0,
-                  z: -0.3490658503988659
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              },
-              arms: {}
-            },
-            {
-              id: 'connector_11',
-              transform: {
-                position: {
-                  x: 1.3,
-                  y: 0,
-                  z: -3.34
-                },
-                rotation: {
-                  x: 1.5707963267948966,
-                  y: 0,
-                  z: 2.8099800957108703
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              },
-              arms: {}
-            },
-            {
-              id: 'connector_16',
-              transform: {
-                position: {
-                  x: 1.2,
-                  y: 0,
-                  z: 4.3
-                },
-                rotation: {
-                  x: 1.5707963267948966,
-                  y: -0.03490658503988659,
-                  z: -0.6108652381980153
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              },
-              arms: {}
-            },
-            {
-              id: 'connector_19',
-              transform: {
-                position: {
-                  x: 19.74,
-                  y: 0,
-                  z: -3.97
-                },
-                rotation: {
-                  x: 1.5707963267948966,
-                  y: 3.141592653589793,
-                  z: 0.4363323129985824
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              },
-              arms: {}
-            },
-            {
-              id: 'connector_21',
-              transform: {
-                position: {
-                  x: -16.8,
-                  y: 0,
-                  z: -3.8
-                },
-                rotation: {
-                  x: 1.5707963267948966,
-                  y: 0,
-                  z: 0
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              },
-              arms: {}
-            },
-            {
-              id: 'connector_25',
-              transform: {
-                position: {
-                  x: -17,
-                  y: 0,
-                  z: 4.6
-                },
-                rotation: {
-                  x: 1.5707963267948966,
-                  y: 0,
-                  z: 0
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              },
-              arms: {}
-            },
-            {
-              id: 'connector_29',
-              transform: {
-                position: {
-                  x: 19.41,
-                  y: -0.013953688090604155,
-                  z: 4.76
-                },
-                rotation: {
-                  x: 1.5707963267948966,
-                  y: 3.141592653589793,
-                  z: 0
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              },
-              arms: {}
-            },
-            {
-              id: 'connector_30',
-              transform: {
-                position: {
-                  x: 19.5,
-                  y: 0,
-                  z: -3.9
-                },
-                rotation: {
-                  x: 1.5707963267948966,
-                  y: 3.141592653589793,
-                  z: 0
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              },
-              arms: {}
-            },
-            {
-              id: 'connector_31',
-              transform: {
-                position: {
-                  x: -7.6,
-                  y: 13.3,
-                  z: 0.3
-                },
-                rotation: {
-                  x: 0,
-                  y: 0,
-                  z: -1.5707963267948966
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              },
-              arms: {}
-            },
-            {
-              id: 'connector_32',
-              transform: {
-                position: {
-                  x: 10.94,
-                  y: 13.6,
-                  z: 0.4
-                },
-                rotation: {
-                  x: 0,
-                  y: 0,
-                  z: -1.5707963267948966
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              },
-              arms: {}
-            },
-            {
-              id: 'connector_33',
-              transform: {
-                position: {
-                  x: 20.74784905648725,
-                  y: 0,
-                  z: -3.496217776302761
-                },
-                rotation: {
-                  x: 1.5707963267948966,
-                  y: 3.141592653589793,
-                  z: 0
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              },
-              arms: {}
-            },
-            {
-              id: 'connector_34',
+              id: 'connector_1',
               transform: {
-                position: {
-                  x: 20.79,
-                  y: 0,
-                  z: 3.687578897905908
-                },
-                rotation: {
-                  x: 1.5707963267948966,
-                  y: 3.141592653589793,
-                  z: 0
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
+                position: { x: -0.6475473374387839, y: 0, z: 1.0008010201402797 },
+                rotation: { x: 0, y: 0, z: 0 },
+                scale: { x: 1, y: 1, z: 1 }
               },
-              arms: {}
-            },
-            {
-              id: 'connector_35',
-              transform: {
-                position: {
-                  x: 30.073391112008878,
-                  y: 16.68,
-                  z: 1.7167804549312669
-                },
-                rotation: {
-                  x: 1.5707963267948966,
-                  y: -1.0471975511965976,
-                  z: 0
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              },
-              arms: {}
-            },
-            {
-              id: 'connector_36',
-              transform: {
-                position: {
-                  x: 39.83283639272023,
-                  y: 0,
-                  z: 1.7928342987420356
-                },
-                rotation: {
-                  x: 1.5707963267948966,
-                  y: 2.0943951023931953,
-                  z: 0
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              },
-              arms: {}
-            },
-            {
-              id: 'connector_37',
-              transform: {
-                position: {
-                  x: 27.8646836486829,
-                  y: 4.1066451023783985,
-                  z: 0.5060142278475936
-                },
-                rotation: {
-                  x: 1.5707963267948966,
-                  y: -2.2689280275926285,
-                  z: 0
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              },
-              arms: {}
-            },
-            {
-              id: 'connector_38',
-              transform: {
-                position: {
-                  x: 10.558742342045136,
-                  y: 0,
-                  z: 17.134284182871355
-                },
-                rotation: {
-                  x: 0,
-                  y: 0,
-                  z: 0
-                },
-                scale: {
-                  x: 1,
-                  y: 1,
-                  z: 1
-                }
-              },
-              arms: {
-                arm_1: {
-                  x: 0,
-                  y: 0,
-                  z: 0
-                },
-                arm_2: {
-                  x: 0,
-                  y: 0,
-                  z: 0
-                },
-                arm_3: {
-                  x: 0,
-                  y: 0,
-                  z: 0
-                }
-              }
+              arms: { arm_1: { x: 0, y: 0, z: 0 }, arm_2: { x: 0, y: 0, z: 0 }, arm_3: { x: 0, y: 0, z: 0 } }
             }
           ]
         }
       ]
     },
-    actions: [
-      {
-        id: 'action_1',
-        name: 'Default Action',
-        type: 'highlight',
-        targets: [
-          'straw_2',
-          'straw_5',
-          'connector_5',
-          'connector_7',
-          'connector_9',
-          'connector_11',
-          'straw_6',
-          'connector_14',
-          'connector_15',
-          'straw_8',
-          'connector_16',
-          'straw_9',
-          'connector_18',
-          'connector_19',
-          'connector_20'
-        ],
-        duration: 2
-      },
-      {
-        id: 'action_2',
-        name: 'Highlight Action 2',
-        type: 'highlight',
-        targets: [
-          'straw_10',
-          'connector_21',
-          'straw_11',
-          'connector_23',
-          'straw_12',
-          'connector_25',
-          'connector_27',
-          'straw_13',
-          'connector_29',
-          'connector_30'
-        ],
-        duration: 2
-      },
-      {
-        id: 'action_3',
-        name: 'Highlight Action 3',
-        type: 'highlight',
-        targets: ['straw_14', 'straw_15', 'straw_16', 'straw_17', 'connector_31'],
-        duration: 2
-      },
-      {
-        id: 'action_4',
-        name: 'Highlight Action 4',
-        type: 'highlight',
-        targets: ['straw_18', 'straw_19', 'straw_20', 'straw_21', 'connector_32'],
-        duration: 2
-      },
-      {
-        id: 'action_5',
-        name: 'Highlight Action 5',
-        type: 'highlight',
-        targets: ['straw_22', 'connector_33', 'connector_34'],
-        duration: 2
-      },
-      {
-        id: 'action_6',
-        name: 'Highlight Action 6',
-        type: 'highlight',
-        targets: ['straw_23', 'straw_24', 'straw_25', 'straw_26', 'straw_27', 'straw_28'],
-        duration: 2
-      },
-      {
-        id: 'action_7',
-        name: 'Highlight Action 7',
-        type: 'highlight',
-        targets: ['straw_29', 'connector_35'],
-        duration: 2
-      },
-      {
-        id: 'action_8',
-        name: 'Highlight Action 8',
-        type: 'highlight',
-        targets: ['straw_30', 'connector_36'],
-        duration: 2
-      },
-      {
-        id: 'action_9',
-        name: 'Highlight Action 9',
-        type: 'highlight',
-        targets: ['straw_31'],
-        duration: 2
-      },
-      {
-        id: 'action_10',
-        name: 'Highlight Action 10',
-        type: 'highlight',
-        targets: ['straw_32', 'straw_34', 'connector_37', 'straw_35'],
-        duration: 2
-      },
-      {
-        id: 'action_11',
-        name: 'Highlight Action 10',
-        type: 'highlight',
-        targets: ['connector_38'],
-        duration: 2
-      }
-    ],
+    actions: [{ id: 'action_1', name: 'Bước 1', type: 'highlight', targets: ['connector_1'], duration: 2 }],
     activities: [
       {
         id: 'custom_assembly',
@@ -1346,135 +59,8 @@ export default function Page() {
         difficulty: 'beginner',
         estimatedTime: 600,
         steps: [
-          {
-            actionId: 'action_11',
-            title: 'Khởi Động Cầu Nâng Thông Minh',
-            description: 'Hãy nhấn nút tiếp tục bắt đầu hành trình sáng tạo của bạn!',
-            expectedResult: 'Targets are highlighted',
-            hints: null,
-            validation: null
-          },
-          {
-            actionId: 'action_1',
-            title: 'Tạo Dầm Cầu Ziczac',
-            description:
-              'Lắp các ống hút nối nhau như hình ziczac nhé! Cây cầu sẽ trông thật ngầu và chắc chắn, sẵn sàng cho phần nâng hạ ở bước tiếp theo!',
-            expectedResult: 'Targets are highlighted',
-            hints: null,
-            validation: null
-          },
-          {
-            actionId: 'action_2',
-            title: 'Hoàn Thiện Mặt Cầu',
-            description:
-              'Tạo các thanh dài và gắn chúng quanh khung ziczac nào! Giờ thì cây cầu của bạn đã có phần nền cực kỳ vững chắc rồi đấy!',
-            expectedResult: 'Targets are highlighted',
-            hints: null,
-            validation: null
-          },
-          {
-            actionId: 'action_3',
-            title: 'Lắp Các Thanh Nối Vào Khung Cầu',
-            description:
-              'Tạo các thanh nối chắc chắn rồi gắn chúng vào phần khung cầu nhé! Những thanh nối này sẽ giúp cây cầu thêm bền vững và sẵn sàng cho cơ chế nâng hạ hoạt động trơn tru.',
-            expectedResult: 'Targets are highlighted',
-            hints: null,
-            validation: null
-          },
-          {
-            actionId: 'action_4',
-            title: 'Làm Lại Một Lần Nữa!',
-            description: 'Lặp lại bước trước ở bên còn lại nhé! Cây cầu của bạn sắp hoàn thiện rồi — thật tuyệt vời!',
-            expectedResult: 'Targets are highlighted',
-            hints: null,
-            validation: null
-          },
-          {
-            actionId: 'action_5',
-            title: 'Tạo Thanh Trượt Cho Cầu Nâng',
-            description:
-              'Hãy lắp một thanh trượt và đặt nó dọc theo khung cầu. Thanh này giúp mô phỏng cơ chế trượt – nơi cây cầu có thể di chuyển mượt mà khi được nâng lên hoặc hạ xuống.',
-            expectedResult: 'Targets are highlighted',
-            hints: null,
-            validation: null
-          },
-          {
-            actionId: 'action_6',
-            title: 'Dựng Hai Khung Tam Giác Siêu Chắc!',
-            description:
-              'Hãy lắp các thanh nối thành hình tam giác ở hai bên cây cầu. Hình tam giác là cấu trúc vững chắc nhất trong kỹ thuật xây dựng, giúp cây cầu của bạn đứng vững và chịu lực tốt hơn!',
-            expectedResult: 'Targets are highlighted',
-            hints: null,
-            validation: null
-          },
-          {
-            actionId: 'action_7',
-            title: 'Gắn Ống Hút Nối 2 Khung Tam Giác',
-            description:
-              'Lắp các ống hút vào hình tam giác nhé, rồi trượt connector vào đầu ống như đang “mặc áo giáp” cho cầu vậy! Giờ cây cầu của bạn trông thật vững chãi và cực kỳ ngầu!',
-            expectedResult: 'Targets are highlighted',
-            hints: null,
-            validation: null
-          },
-          {
-            actionId: 'action_8',
-            title: 'Làm Lại Ở Bên Còn Lại Nào!',
-            description:
-              'Lặp lại bước trước ở phía bên kia nhé! Khi hoàn thành, cây cầu của bạn sẽ trông thật cân đối và sẵn sàng nâng lên – hạ xuống như một cây cầu thật!',
-            expectedResult: 'Targets are highlighted',
-            hints: null,
-            validation: null
-          },
-          {
-            actionId: 'action_9',
-            title: 'Làm Thanh Chống Siêu Vững Cho Cầu!',
-            description:
-              'ắn các khớp nối vào ống hút để tạo thanh chống nhé! Vậy là cây cầu của bạn đã có “cánh tay đỡ” cực kỳ mạnh mẽ!',
-            expectedResult: 'Targets are highlighted',
-            hints: null,
-            validation: null
-          },
-          {
-            actionId: 'action_10',
-            title: 'Lắp Đòn Bẩy Thần Kỳ!',
-            description:
-              'Hãy gắn một ống hút làm đòn bẩy ở phần chân cầu nhé! Khi bạn ấn xuống, cây cầu sẽ nâng lên – giống như phép thuật vậy! Đã đến lúc thử nghiệm mô hình của bạn!',
-            expectedResult: 'Targets are highlighted',
-            hints: null,
-            validation: null
-          },
-          {
-            actionId: 'action_12',
-            title: 'Transform Step 12',
-            description: '',
-            expectedResult: '',
-            hints: [],
-            validation: null
-          },
-          {
-            actionId: 'action_13',
-            title: 'Highlight Step 13',
-            description: '',
-            expectedResult: '',
-            hints: [],
-            validation: null
-          },
-          {
-            actionId: 'action_14',
-            title: 'Highlight Step 14',
-            description: '',
-            expectedResult: '',
-            hints: [],
-            validation: null
-          },
-          {
-            actionId: 'action_15',
-            title: 'Highlight Step 15',
-            description: '',
-            expectedResult: '',
-            hints: [],
-            validation: null
-          }
+          { actionId: 'action_1', title: 'Bước 1', description: '', expectedResult: '', hints: [], validation: null },
+          { title: 'Bước 1', actionId: 'action_1', description: '', expectedResult: '', hints: [] }
         ]
       }
     ],
@@ -1483,49 +69,13 @@ export default function Page() {
         background: '#f5f5f5',
         lighting: {
           ambient: '#404040',
-          directional: {
-            color: '#FFFFFF',
-            intensity: 1.2,
-            position: {
-              x: 10,
-              y: 15,
-              z: 8
-            }
-          }
+          directional: { color: '#FFFFFF', intensity: 1.2, position: { x: 10, y: 15, z: 8 } }
         },
-        camera: {
-          position: {
-            x: 30,
-            y: 20,
-            z: 30
-          },
-          target: {
-            x: 0,
-            y: 0,
-            z: 0
-          },
-          fov: 60,
-          controls: 'orbit'
-        }
+        camera: { position: { x: 30, y: 20, z: 30 }, target: { x: 0, y: 0, z: 0 }, fov: 60, controls: 'orbit' }
       },
       workspace: {
-        bounds: {
-          min: {
-            x: -100,
-            y: -100,
-            z: -100
-          },
-          max: {
-            x: 100,
-            y: 100,
-            z: 100
-          }
-        },
-        grid: {
-          visible: true,
-          size: 1,
-          divisions: 100
-        }
+        bounds: { min: { x: -100, y: -100, z: -100 }, max: { x: 100, y: 100, z: 100 } },
+        grid: { visible: true, size: 1, divisions: 100 }
       }
     }
   }
diff --git a/src/features/creator-3d/components/creator-workspace/CreatorWorkspace.tsx b/src/features/creator-3d/components/creator-workspace/CreatorWorkspace.tsx
index 2ae31d2c8..7fc25cb4c 100644
--- a/src/features/creator-3d/components/creator-workspace/CreatorWorkspace.tsx
+++ b/src/features/creator-3d/components/creator-workspace/CreatorWorkspace.tsx
@@ -1,10 +1,5 @@
 'use client'
 
-// useGLTF.preload('/models/connector_1leg.glb')
-// useGLTF.preload('/models/connector_2legs.glb')
-// useGLTF.preload('/models/connector_3legs.glb')
-// useGLTF.preload('/models/connector_5legs.glb')
-
 import { Canvas } from '@react-three/fiber'
 import { useRef, useCallback, useState, useEffect } from 'react'
 import { CreatorToolbar } from '@/features/creator-3d/components/creator-workspace/CreatorToolbar'
@@ -20,7 +15,7 @@ import {
   setSelectedId
 } from '@/features/creator-3d/slice/creatorSceneSlice'
 import { syncRedo, syncUndo } from '@/features/creator-3d/slice/createSceneThunk'
-import { useGLTF } from '@react-three/drei'
+import { removeTargetFromAllActions } from '@/features/creator-3d/slice/workspaceTreeSlice'
 
 interface CreatorWorkspaceProps {
   onObjectSelect: (objectId: string | null) => void
@@ -69,53 +64,55 @@ export function CreatorWorkspace({ onObjectSelect, onObjectUpdate, onObjectAdd }
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       // ⌨️ Ctrl + Z → Undo (synced)
-      if (e.ctrlKey && e.key.toLowerCase() === 'z') {
-        e.preventDefault()
-        dispatch(syncUndo())
-        return
-      }
+      // if (e.ctrlKey && e.key.toLowerCase() === 'z') {
+      //   e.preventDefault()
+      //   dispatch(syncUndo())
+      //   return
+      // }
 
       // ⌨️ Ctrl + Y → Redo (synced)
-      if (e.ctrlKey && e.key.toLowerCase() === 'y') {
-        e.preventDefault()
-        dispatch(syncRedo())
-        return
-      }
+      // if (e.ctrlKey && e.key.toLowerCase() === 'y') {
+      //   e.preventDefault()
+      //   dispatch(syncRedo())
+      //   return
+      // }
 
       // ⌨️ Ctrl + C → Copy
-      if (e.ctrlKey && e.key.toLowerCase() === 'c' && selectedId) {
-        e.preventDefault()
-        const copied = instances.find((i) => i.id === selectedId)
-        clipboardRef.current = copied ? JSON.parse(JSON.stringify(copied)) : null
-        console.log('📋 Copied object:', clipboardRef.current?.id)
-        return
-      }
+      // if (e.ctrlKey && e.key.toLowerCase() === 'c' && selectedId) {
+      //   e.preventDefault()
+      //   const copied = instances.find((i) => i.id === selectedId)
+      //   clipboardRef.current = copied ? JSON.parse(JSON.stringify(copied)) : null
+      //   console.log('📋 Copied object:', clipboardRef.current?.id)
+      //   return
+      // }
 
       // ⌨️ Ctrl + V → Paste
-      if (e.ctrlKey && e.key.toLowerCase() === 'v' && clipboardRef.current) {
-        e.preventDefault()
-        const base = clipboardRef.current
-        const newCopy: AssemblyInstance = {
-          ...base,
-          id: `${base.id}_copy_${Date.now()}`,
-          transform: {
-            ...base.transform,
-            position: {
-              x: base.transform.position.x + 1,
-              y: base.transform.position.y,
-              z: base.transform.position.z + 1
-            }
-          }
-        }
-        dispatch(addInstance(newCopy))
-        dispatch(setSelectedId(newCopy.id))
-        console.log('📎 Pasted object:', newCopy.id)
-        return
-      }
+      // if (e.ctrlKey && e.key.toLowerCase() === 'v' && clipboardRef.current) {
+      //   e.preventDefault()
+      //   const base = clipboardRef.current
+      //   const newCopy: AssemblyInstance = {
+      //     ...base,
+      //     id: `${base.id}_copy_${Date.now()}`,
+      //     transform: {
+      //       ...base.transform,
+      //       position: {
+      //         x: base.transform.position.x + 1,
+      //         y: base.transform.position.y,
+      //         z: base.transform.position.z + 1
+      //       }
+      //     }
+      //   }
+      //   dispatch(addInstance(newCopy))
+      //   dispatch(setSelectedId(newCopy.id))
+      //   console.log('📎 Pasted object:', newCopy.id)
+      //   return
+      // }
 
       if ((e.key === 'Delete' || e.key === 'Backspace') && selectedId) {
         e.preventDefault()
         dispatch(removeInstance(selectedId))
+        dispatch(removeTargetFromAllActions(selectedId))
+
         console.log('🗑️ Deleted object:', selectedId)
         return
       }
diff --git a/src/features/creator-3d/components/right-sidebar/ComponentInspector.tsx b/src/features/creator-3d/components/right-sidebar/ComponentInspector.tsx
index 16247ea10..337e9dd08 100644
--- a/src/features/creator-3d/components/right-sidebar/ComponentInspector.tsx
+++ b/src/features/creator-3d/components/right-sidebar/ComponentInspector.tsx
@@ -24,6 +24,7 @@ export function ComponentInspector() {
     name: string
     arms?: Record<string, { x?: string; y?: string; z?: string }>
   } | null>(null)
+
   const [isEditing, setIsEditing] = useState(false)
   const dispatch = useAppDispatch()
   const { selectedActionId, actions } = useAppSelector((s) => s.workspaceTree)
diff --git a/src/features/creator-3d/hooks/creator-3d-helper.ts b/src/features/creator-3d/hooks/creator-3d-helper.ts
index ac1298293..b324332cb 100644
--- a/src/features/creator-3d/hooks/creator-3d-helper.ts
+++ b/src/features/creator-3d/hooks/creator-3d-helper.ts
@@ -237,10 +237,10 @@ export function exportAssembly(
     instances: instanceList
   }))
 
-  // Connectors (⚠️ KHÔNG export arms trong instance, chỉ giữ transform thôi)
   const connectors = instances
     .filter((i) => i.category === 'connector')
     .reduce<Record<string, any[]>>((acc, item) => {
+      console.log({ item })
       const templateId = item.templateId
       if (!acc[templateId]) acc[templateId] = []
       acc[templateId].push({

From 87ee51b62ee8074503c0b06dc933db3af6f5fdc0 Mon Sep 17 00:00:00 2001
From: meewaldor <tieumylam91@gmail.com>
Date: Thu, 11 Dec 2025 17:09:54 +0700
Subject: [PATCH 05/16] feat: update translations and connector/straw names for
 improved clarity and consistency

---
 messages/en/3d/en_3d.json                     | 22 +++++++++++++++++--
 messages/en/subscription/en_subscription.json |  2 +-
 messages/vi/3d/vi_3d.json                     | 22 +++++++++++++++++--
 messages/vi/subscription/vi_subscription.json |  2 +-
 .../templates/ConnectorTypes/1leg.json        |  2 +-
 .../templates/ConnectorTypes/2legs.json       |  2 +-
 .../templates/ConnectorTypes/3legs.json       |  2 +-
 .../templates/ConnectorTypes/5legs.json       |  2 +-
 .../templates/StrawTypes/blue_19_0.json       |  4 ++--
 .../templates/StrawTypes/green_11_2.json      |  4 ++--
 .../templates/StrawTypes/green_16_2.json      |  4 ++--
 .../templates/StrawTypes/orange_6_3.json      |  4 ++--
 .../templates/StrawTypes/pink_8_9.json        |  4 ++--
 .../templates/StrawTypes/yellow_3_8.json      |  4 ++--
 .../right-sidebar/ActionInspector.tsx         | 14 ++++++------
 .../right-sidebar/WorkspaceTree.tsx           |  6 ++---
 src/utils/index.ts                            |  3 +++
 17 files changed, 71 insertions(+), 32 deletions(-)

diff --git a/messages/en/3d/en_3d.json b/messages/en/3d/en_3d.json
index fac92c3dd..26048c4b4 100644
--- a/messages/en/3d/en_3d.json
+++ b/messages/en/3d/en_3d.json
@@ -42,17 +42,35 @@
       "connector": "Connector",
       "drag_guide": "Drag to add to scene",
       "double_click_guide": "Double-click to place at origin",
-      "select_guide": "Select & use gizmo to transform"
+      "select_guide": "Select & use gizmo to transform",
+      "bluestraw": "Blue Straw",
+      "pinkstraw": "Pink Straw",
+      "yellowstraw": "Yellow Straw",
+      "greenstraw": "Green Straw",
+      "orangestraw": "Orange Straw",
+      "1legconnector": "1 Leg Connector",
+      "2legsconnector": "2 Legs Connector",
+      "3legsconnector": "3 Legs Connector",
+      "5legsconnector": "5 Legs Connector"
     },
     "right_panel": {
       "workspace_tree": "Workspace Tree",
       "properties": "Properties",
       "delete_component": "Do you want to delete this component?",
       "select_object_or_action": "Select an object or action to edit properties",
+      "noStep": "No step linked to this action",
       "action_properties": {
         "title": "Action Properties",
         "name": "Name",
-        "type": "Type"
+        "type": "Type",
+        "step": {
+          "detail": "Step Details",
+          "title": "Title",
+          "description": "Description",
+          "expectedResult": "Expected Result",
+          "hint": "Hint",
+          "addHint": "Add Hint"
+        }
       },
       "component_properties": {
         "select_object_or_action": "Select an object or action to edit properties",
diff --git a/messages/en/subscription/en_subscription.json b/messages/en/subscription/en_subscription.json
index 8393d66d1..130997e2c 100644
--- a/messages/en/subscription/en_subscription.json
+++ b/messages/en/subscription/en_subscription.json
@@ -5,7 +5,7 @@
       "searchPlaceholder": "Search organizations by name...",
       "subscriptionTitle": "Subscription List",
       "subscriptionHistoryTitle": "Subscription History",
-      "organizationSubscriptionTitle": "Organization Subscription Management",
+      "organizationSubscriptionTitle": "Organization Management",
       "organizationSubscriptionDescription": "Browse and manage all organization subscriptions registered on the platform.",
       "placeholder": {
         "search": "Search organizations by name...",
diff --git a/messages/vi/3d/vi_3d.json b/messages/vi/3d/vi_3d.json
index 895e53796..09ead74e3 100644
--- a/messages/vi/3d/vi_3d.json
+++ b/messages/vi/3d/vi_3d.json
@@ -42,17 +42,35 @@
       "connector": "Đầu nối",
       "drag_guide": "Kéo để thêm vào cảnh",
       "double_click_guide": "Nhấp đúp để đặt tại gốc tọa độ",
-      "select_guide": "Chọn & sử dụng gizmo để biến đổi"
+      "select_guide": "Chọn & sử dụng gizmo để biến đổi",
+      "bluestraw": "Ống hút xanh dương",
+      "pinkstraw": "Ống hút hồng",
+      "yellowstraw": "Ống hút vàng",
+      "greenstraw": "Ống hút xanh lá",
+      "orangestraw": "Ống hút cam",
+      "1legconnector": "Đầu nối 1 chân",
+      "2legsconnector": "Đầu nối 2 chân",
+      "3legsconnector": "Đầu nối 3 chân",
+      "5legsconnector": "Đầu nối 5 chân"
     },
     "right_panel": {
       "workspace_tree": "Cấu trúc mô hình",
       "properties": "Thuộc tính",
       "delete_component": "Bạn có muốn xóa thành phần này không?",
       "select_object_or_action": "Chọn một vật thể hoặc hành động để chỉnh sửa thuộc tính",
+      "noStep": "Không có bước nào liên kết với hành động này",
       "action_properties": {
         "title": "Thuộc tính hành động",
         "name": "Tên",
-        "type": "Loại"
+        "type": "Loại",
+        "step": {
+          "detail": "Chi tiết bước",
+          "title": "Tiêu đề",
+          "description": "Mô tả",
+          "expectedResult": "Kết quả mong đợi",
+          "hint": "Gợi ý",
+          "addHint": "Thêm gợi ý"
+        }
       },
       "component_properties": {
         "select_object_or_action": "Chọn một vật thể hoặc hành động để chỉnh sửa thuộc tính",
diff --git a/messages/vi/subscription/vi_subscription.json b/messages/vi/subscription/vi_subscription.json
index fea81fd77..65a848fe5 100644
--- a/messages/vi/subscription/vi_subscription.json
+++ b/messages/vi/subscription/vi_subscription.json
@@ -5,7 +5,7 @@
       "searchPlaceholder": "Tìm kiếm tổ chức theo tên...",
       "subscriptionTitle": "Danh sách gói đăng ký",
       "subscriptionHistoryTitle": "Lịch sử đăng ký",
-      "organizationSubscriptionTitle": "Quản lý đăng ký tổ chức",
+      "organizationSubscriptionTitle": "Quản lý tổ chức",
       "organizationSubscriptionDescription": "Duyệt và quản lý tất cả các đăng ký tổ chức đã đăng ký trên nền tảng.",
       "placeholder": {
         "search": "Tìm kiếm tổ chức theo tên...",
diff --git a/public/components/templates/ConnectorTypes/1leg.json b/public/components/templates/ConnectorTypes/1leg.json
index f1cbdd37c..a57679777 100644
--- a/public/components/templates/ConnectorTypes/1leg.json
+++ b/public/components/templates/ConnectorTypes/1leg.json
@@ -1,6 +1,6 @@
 {
   "id": "1leg",
-  "name": "1-Leg Red Connector",
+  "name": "Đầu nối 1 chân",
   "version": "1.0",
   "category": "connector",
   "baseGeometry": {
diff --git a/public/components/templates/ConnectorTypes/2legs.json b/public/components/templates/ConnectorTypes/2legs.json
index a50b4c38d..abb9ae990 100644
--- a/public/components/templates/ConnectorTypes/2legs.json
+++ b/public/components/templates/ConnectorTypes/2legs.json
@@ -1,6 +1,6 @@
 {
   "id": "2leg",
-  "name": "2-Leg Connector",
+  "name": "Đầu nối 2 chân",
   "version": "1.0",
   "category": "connector",
   "baseGeometry": {
diff --git a/public/components/templates/ConnectorTypes/3legs.json b/public/components/templates/ConnectorTypes/3legs.json
index 7809f075e..0c399bde0 100644
--- a/public/components/templates/ConnectorTypes/3legs.json
+++ b/public/components/templates/ConnectorTypes/3legs.json
@@ -1,6 +1,6 @@
 {
   "id": "3leg",
-  "name": "3-Leg Red Connector",
+  "name": "Đầu nối 3 chân",
   "version": "1.0",
   "category": "connector",
   "baseGeometry": {
diff --git a/public/components/templates/ConnectorTypes/5legs.json b/public/components/templates/ConnectorTypes/5legs.json
index 38c4fd82d..76e2d2af6 100644
--- a/public/components/templates/ConnectorTypes/5legs.json
+++ b/public/components/templates/ConnectorTypes/5legs.json
@@ -1,6 +1,6 @@
 {
   "id": "5leg",
-  "name": "5-Leg Red Connector",
+  "name": "Đầu nối 5 chân",
   "version": "1.0",
   "category": "connector",
   "baseGeometry": {
diff --git a/public/components/templates/StrawTypes/blue_19_0.json b/public/components/templates/StrawTypes/blue_19_0.json
index e248b5146..fa614de34 100644
--- a/public/components/templates/StrawTypes/blue_19_0.json
+++ b/public/components/templates/StrawTypes/blue_19_0.json
@@ -1,7 +1,7 @@
 {
   "id": "blue_19_0",
-  "shortName": "Blue Straw",
-  "name": "Blue Straw 19.0cm",
+  "shortName": "Ống hút xanh dương",
+  "name": "Ống hút xanh dương",
   "version": "1.0",
   "category": "straw",
   "baseGeometry": {
diff --git a/public/components/templates/StrawTypes/green_11_2.json b/public/components/templates/StrawTypes/green_11_2.json
index 2877cbab4..7576dd3a5 100644
--- a/public/components/templates/StrawTypes/green_11_2.json
+++ b/public/components/templates/StrawTypes/green_11_2.json
@@ -1,7 +1,7 @@
 {
   "id": "green_11_2",
-  "shortName": "Green Straw",
-  "name": "Green Straw 15.0cm",
+  "shortName": "Ống hút xanh lá",
+  "name": "Ống hút xanh lá",
   "version": "1.0",
   "category": "straw",
   "baseGeometry": {
diff --git a/public/components/templates/StrawTypes/green_16_2.json b/public/components/templates/StrawTypes/green_16_2.json
index 78be47068..7004356bd 100644
--- a/public/components/templates/StrawTypes/green_16_2.json
+++ b/public/components/templates/StrawTypes/green_16_2.json
@@ -1,7 +1,7 @@
 {
   "id": "green_16_2",
-  "shortName": "Green Straw",
-  "name": "Green Straw 16.2cm",
+  "shortName": "Ống hút xanh lá",
+  "name": "Ống hút xanh lá",
   "version": "1.0",
   "category": "straw",
   "baseGeometry": {
diff --git a/public/components/templates/StrawTypes/orange_6_3.json b/public/components/templates/StrawTypes/orange_6_3.json
index 0dadbff05..8f4bd8dba 100644
--- a/public/components/templates/StrawTypes/orange_6_3.json
+++ b/public/components/templates/StrawTypes/orange_6_3.json
@@ -1,7 +1,7 @@
 {
   "id": "orange_6_3",
-  "shortName": "Orange Straw",
-  "name": "Orange Straw 6.3cm",
+  "shortName": "Ống hút cam",
+  "name": "Ống hút cam",
   "version": "1.0",
   "category": "straw",
   "baseGeometry": {
diff --git a/public/components/templates/StrawTypes/pink_8_9.json b/public/components/templates/StrawTypes/pink_8_9.json
index 916958748..587cb3070 100644
--- a/public/components/templates/StrawTypes/pink_8_9.json
+++ b/public/components/templates/StrawTypes/pink_8_9.json
@@ -1,7 +1,7 @@
 {
   "id": "pink_8_9",
-  "shortName": "Pink Straw",
-  "name": "Pink Straw 8.9cm",
+  "shortName": "Ống hút hồng",
+  "name": "Ống hút hồng",
   "version": "1.0",
   "category": "straw",
   "baseGeometry": {
diff --git a/public/components/templates/StrawTypes/yellow_3_8.json b/public/components/templates/StrawTypes/yellow_3_8.json
index a8a3f9fde..d6b96f8e7 100644
--- a/public/components/templates/StrawTypes/yellow_3_8.json
+++ b/public/components/templates/StrawTypes/yellow_3_8.json
@@ -1,7 +1,7 @@
 {
   "id": "yellow_3_8",
-  "shortName": "Yellow Straw",
-  "name": "Yellow Straw 3.8cm",
+  "shortName": "Ống hút vàng",
+  "name": "Ống hút vàng",
   "version": "1.0",
   "category": "straw",
   "baseGeometry": {
diff --git a/src/features/creator-3d/components/right-sidebar/ActionInspector.tsx b/src/features/creator-3d/components/right-sidebar/ActionInspector.tsx
index d04030341..7c56bfb10 100644
--- a/src/features/creator-3d/components/right-sidebar/ActionInspector.tsx
+++ b/src/features/creator-3d/components/right-sidebar/ActionInspector.tsx
@@ -59,7 +59,7 @@ export default function ActionInspector({ selectedAction }: ActionInspectorProps
     }
   }
 
-  if (!stepInfo) return <p className='text-sm text-gray-500'>No step linked to this action.</p>
+  if (!stepInfo) return <p className='text-sm text-gray-500'>{t3d('noStep')}</p>
 
   return (
     <div className='space-y-4'>
@@ -89,10 +89,10 @@ export default function ActionInspector({ selectedAction }: ActionInspectorProps
 
       {/* Step section */}
       <div className='space-y-3 border-t pt-3'>
-        <h3 className='font-semibold text-gray-900'>Step Details</h3>
+        <h3 className='font-semibold text-gray-900'>{t3d('action_properties.step.detail')}</h3>
 
         <div>
-          <label className='text-sm font-medium'>Title</label>
+          <label className='text-sm font-medium'>{t3d('action_properties.step.title')}</label>
           <Input
             value={localFields.title}
             onChange={(e) => handleChange('title', e.target.value)}
@@ -102,7 +102,7 @@ export default function ActionInspector({ selectedAction }: ActionInspectorProps
         </div>
 
         <div>
-          <label className='text-sm font-medium'>Description</label>
+          <label className='text-sm font-medium'>{t3d('action_properties.step.description')}</label>
           <Textarea
             value={localFields.description}
             onChange={(e) => handleChange('description', e.target.value)}
@@ -112,7 +112,7 @@ export default function ActionInspector({ selectedAction }: ActionInspectorProps
         </div>
 
         <div>
-          <label className='text-sm font-medium'>Expected Result</label>
+          <label className='text-sm font-medium'>{t3d('action_properties.step.expectedResult')}</label>
           <Textarea
             value={localFields.expectedResult}
             onChange={(e) => handleChange('expectedResult', e.target.value)}
@@ -122,7 +122,7 @@ export default function ActionInspector({ selectedAction }: ActionInspectorProps
         </div>
 
         <div>
-          <label className='text-sm font-medium'>Hints</label>
+          <label className='text-sm font-medium'>{t3d('action_properties.step.hint')}</label>
           {localFields.hints.map((hint, index) => (
             <Input
               key={index}
@@ -140,7 +140,7 @@ export default function ActionInspector({ selectedAction }: ActionInspectorProps
             onClick={() => handleChange('hints', [...localFields.hints, ''])}
             className='mt-2 rounded bg-blue-600 px-3 py-1 text-sm text-white hover:bg-blue-700'
           >
-            Add Hint
+            {t3d('action_properties.step.addHint')}
           </button>
         </div>
       </div>
diff --git a/src/features/creator-3d/components/right-sidebar/WorkspaceTree.tsx b/src/features/creator-3d/components/right-sidebar/WorkspaceTree.tsx
index 4ce25b70a..035316a16 100644
--- a/src/features/creator-3d/components/right-sidebar/WorkspaceTree.tsx
+++ b/src/features/creator-3d/components/right-sidebar/WorkspaceTree.tsx
@@ -42,7 +42,7 @@ interface WorkspaceItem {
 
 export default function WorkspaceTree() {
   const tc = useTranslations('common')
-  const t3d = useTranslations('creator3D.right_panel')
+  const t3d = useTranslations('creator3D')
   const dispatch = useAppDispatch()
   const { openModal } = useModal()
   const { actions, activities } = useAppSelector((s: RootState) => s.workspaceTree)
@@ -109,7 +109,7 @@ export default function WorkspaceTree() {
   const handleDeleteComponent = (e: React.MouseEvent<HTMLDivElement, MouseEvent>, id: string) => {
     e.stopPropagation()
     openModal('confirm', {
-      message: t3d('delete_component'),
+      message: t3d('right_panel.delete_component'),
       onConfirm: () => {
         dispatch(removeInstance(id))
         dispatch(removeTargetFromAllActions(id))
@@ -234,7 +234,7 @@ export default function WorkspaceTree() {
   return (
     <div>
       <div className='mb-2'>
-        <h2 className='text-lg font-medium'>{t3d('workspace_tree')}</h2>
+        <h2 className='text-lg font-medium'>{t3d('right_panel.workspace_tree')}</h2>
         <div className='flex flex-wrap gap-2'>
           <button
             onClick={() => handleAddAction('highlight')}
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 23755eb56..d94a1cbdb 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -230,3 +230,6 @@ export const useGradeTranslation = () => {
     return tc(grade.toLowerCase().replace(' ', '_'))
   }
 }
+
+export const toSlug = (str: string) => str.toLowerCase().replace(/\s+/g, '');
+

From 75610d245c6bad1dacddc9d8a13fb2249a8dc208 Mon Sep 17 00:00:00 2001
From: ttd11204 <datkk112004@gmail.com>
Date: Thu, 11 Dec 2025 17:31:17 +0700
Subject: [PATCH 06/16] feat: Add UngroupedStudentList and UpsertStudentGroup
 components; enhance curriculum descriptions in English and Vietnamese; update
 group API and types for student IDs

---
 messages/en/organization/en_organization.json |   1 +
 messages/vi/organization/vi_organization.json |   1 +
 src/features/group/api/groupApi.ts            |   1 +
 .../components/list/OrganizationGroupList.tsx | 166 ++++++++++++------
 .../components/list/UngroupedStudentList.tsx  | 118 +++++++++++++
 .../components/upsert/UpsertStudentGroup.tsx  |  75 ++++++++
 src/features/group/types/group.type.ts        |   1 +
 .../list/OrganizationCurriculumList.tsx       |   2 +-
 src/features/user/types/user.type.ts          |   1 +
 src/providers/ModalProvider.tsx               |   2 +
 src/types/general.ts                          |   1 +
 src/utils/index.ts                            |  26 +++
 12 files changed, 336 insertions(+), 59 deletions(-)
 create mode 100644 src/features/group/components/list/UngroupedStudentList.tsx
 create mode 100644 src/features/group/components/upsert/UpsertStudentGroup.tsx

diff --git a/messages/en/organization/en_organization.json b/messages/en/organization/en_organization.json
index 169dd9ad4..acc3232b4 100644
--- a/messages/en/organization/en_organization.json
+++ b/messages/en/organization/en_organization.json
@@ -235,6 +235,7 @@
     },
     "curriculum": {
       "curriculum": "Curriculum",
+      "orgCurriculumDescription": "Your organization currently has access to {count} active curriculum frameworks included in your subscription. Each curriculum provides structured learning pathways, curated courses, and teaching resources designed to support STEM education across different levels. Explore the curricula below to view their courses, timelines, and details.",
       "title": "Curriculum List",
       "noData": "No curriculum found for this organization.",
       "noResultsForFilter": "No results found for the selected filter.",
diff --git a/messages/vi/organization/vi_organization.json b/messages/vi/organization/vi_organization.json
index e8a317c1c..b5ff1c1f5 100644
--- a/messages/vi/organization/vi_organization.json
+++ b/messages/vi/organization/vi_organization.json
@@ -234,6 +234,7 @@
     },
     "curriculum": {
       "curriculum": "Khung chương trình",
+      "orgCurriculumDescription": "Tổ chức của bạn hiện đang được cấp quyền truy cập vào {count} khung chương trình thuộc gói đăng ký.\nMỗi khung chương trình cung cấp lộ trình học tập rõ ràng, danh mục khóa học và tài nguyên giảng dạy nhằm hỗ trợ việc triển khai giáo dục STEM ở nhiều cấp độ. Hãy khám phá các chương trình bên dưới để xem thông tin khóa học, thời gian học và chi tiết liên quan.",
       "title": "Danh sách khung chương trình",
       "noData": "Không tìm thấy chương trình giảng dạy nào cho tổ chức này.",
       "noResultsForFilter": "Không tìm thấy kết quả nào cho bộ lọc đã chọn.",
diff --git a/src/features/group/api/groupApi.ts b/src/features/group/api/groupApi.ts
index 69ac4ad2e..677a41271 100644
--- a/src/features/group/api/groupApi.ts
+++ b/src/features/group/api/groupApi.ts
@@ -53,6 +53,7 @@ export const {
 
   useUpdateMutation: useUpdateGroupMutation,
   useDeleteMutation: useDeleteGroupMutation,
+  useCreateMutation: useCreateGroupMutation,
 
   useSearchGroupByOrganizationIdQuery,
   useAddStudentToGroupMutation,
diff --git a/src/features/group/components/list/OrganizationGroupList.tsx b/src/features/group/components/list/OrganizationGroupList.tsx
index 54e753887..a68800aae 100644
--- a/src/features/group/components/list/OrganizationGroupList.tsx
+++ b/src/features/group/components/list/OrganizationGroupList.tsx
@@ -11,6 +11,10 @@ import { toast } from 'sonner'
 import { Group } from '@/features/group/types/group.type'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/shadcn/avatar'
 import { useRouter } from 'next/navigation'
+import { useState } from 'react'
+import { UngroupedStudentList } from '@/features/group/components/list/UngroupedStudentList'
+import { useGetOrganizationUserQuery } from '@/features/user/api/userApi'
+import { LicenseType } from '@/types/userRole'
 
 export default function OrganizationGroupList() {
   const { openModal } = useModal()
@@ -19,6 +23,8 @@ export default function OrganizationGroupList() {
   const tc = useTranslations('common')
   const tt = useTranslations('toast')
   const to = useTranslations('organization.group')
+  const [activeTab, setActiveTab] = useState<'groups' | 'ungrouped'>('groups')
+  const [search, setSearch] = useState('')
 
   const { selectedOrganizationId } = useAppSelector((state) => state.selectedOrganization)
 
@@ -26,6 +32,10 @@ export default function OrganizationGroupList() {
     { organizationId: selectedOrganizationId!, params: {} },
     { skip: !selectedOrganizationId }
   )
+  const { data: ungroupedStudents } = useGetOrganizationUserQuery(
+    { organizationId: selectedOrganizationId!, pageNumber: 1, pageSize: 50, role: LicenseType.STUDENT },
+    { skip: !selectedOrganizationId }
+  )
   const [deleteGroup] = useDeleteGroupMutation()
 
   const handleCopyGroupCode = (code: string) => {
@@ -56,73 +66,113 @@ export default function OrganizationGroupList() {
           <p className='text-sm text-gray-600'>{to('subTitle')}</p>
         </div>
       </div>
+      <div className='mt-4 border-b'>
+        <nav className='flex gap-6'>
+          <button
+            onClick={() => setActiveTab('groups')}
+            className={`pb-2 text-sm font-medium ${
+              activeTab === 'groups' ? 'border-b-2 border-blue-500 text-blue-600' : 'text-gray-600 hover:text-gray-800'
+            }`}
+          >
+            Groups
+          </button>
 
-      <div className='grid grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3'>
-        {data?.data.items.map((group) => (
-          <Card
-            key={group.id}
-            className='min-h-[100px] transition hover:shadow-md'
-            onClick={() => handleNavigate(group.id)}
+          <button
+            onClick={() => setActiveTab('ungrouped')}
+            className={`pb-2 text-sm font-medium ${
+              activeTab === 'ungrouped'
+                ? 'border-b-2 border-blue-500 text-blue-600'
+                : 'text-gray-600 hover:text-gray-800'
+            }`}
           >
-            <CardContent className='p-5'>
-              <div className='flex min-w-0 items-center justify-between gap-3'>
-                {/* LEFT AREA */}
-                <div className='flex min-w-0 items-center gap-4'>
-                  <div className='flex h-12 w-12 items-center justify-center rounded-lg bg-gradient-to-br from-blue-300 to-sky-400'>
-                    <Users className='h-6 w-6 text-white' />
-                  </div>
+            Ungrouped Students
+            {ungroupedStudents && ungroupedStudents?.data?.items?.length > 0 && (
+              <span className='ml-2 rounded-full bg-red-100 px-2 py-0.5 text-xs text-red-600'>
+                {ungroupedStudents?.data?.items?.length}
+              </span>
+            )}
+          </button>
+        </nav>
+      </div>
+      {activeTab === 'groups' && (
+        <div className='mt-6 grid grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3'>
+          {data?.data.items.map((group) => (
+            <Card
+              key={group.id}
+              className='min-h-[100px] transition hover:shadow-md'
+              onClick={() => handleNavigate(group.id)}
+            >
+              <CardContent className='p-5'>
+                <div className='flex min-w-0 items-center justify-between gap-3'>
+                  {/* LEFT AREA */}
+                  <div className='flex min-w-0 items-center gap-4'>
+                    <div className='flex h-12 w-12 items-center justify-center rounded-lg bg-gradient-to-br from-blue-300 to-sky-400'>
+                      <Users className='h-6 w-6 text-white' />
+                    </div>
 
-                  <div>
-                    <div className='flex items-center gap-2'>
-                      <h3 className='truncate text-base font-medium'>{group.name}</h3>
-                      <div className='mt-1 flex -space-x-2'>
-                        {group.students.slice(0, 3).map((s, i) => {
-                          const initials = s.fullName
-                            .split(' ')
-                            .filter(Boolean)
-                            .map((n) => n[0])
-                            .join('')
-                            .toUpperCase()
+                    <div>
+                      <div className='flex items-center gap-2'>
+                        <h3 className='truncate text-base font-medium'>{group.name}</h3>
+                        <div className='mt-1 flex -space-x-2'>
+                          {group.students.slice(0, 3).map((s, i) => {
+                            const initials = s.fullName
+                              .split(' ')
+                              .filter(Boolean)
+                              .map((n) => n[0])
+                              .join('')
+                              .toUpperCase()
 
-                          return (
-                            <Avatar
-                              key={s.organizationUserId}
-                              className='h-8 w-8 border-2 border-white ring-1 ring-gray-200'
-                              style={{ zIndex: 10 - i }}
-                            >
-                              {/* Không dùng AvatarImage vì không có URL ảnh */}
-                              <AvatarFallback className='bg-gray-100 text-xs font-medium'>{initials}</AvatarFallback>
-                            </Avatar>
-                          )
-                        })}
+                            return (
+                              <Avatar
+                                key={s.organizationUserId}
+                                className='h-8 w-8 border-2 border-white ring-1 ring-gray-200'
+                                style={{ zIndex: 10 - i }}
+                              >
+                                {/* Không dùng AvatarImage vì không có URL ảnh */}
+                                <AvatarFallback className='bg-gray-100 text-xs font-medium'>{initials}</AvatarFallback>
+                              </Avatar>
+                            )
+                          })}
 
-                        {group.students.length > 3 && (
-                          <div className='flex h-8 w-8 items-center justify-center rounded-full border-2 border-white bg-gray-100 ring-1 ring-gray-200'>
-                            <span className='text-xs font-medium'>+{group.students.length - 3}</span>
-                          </div>
-                        )}
+                          {group.students.length > 3 && (
+                            <div className='flex h-8 w-8 items-center justify-center rounded-full border-2 border-white bg-gray-100 ring-1 ring-gray-200'>
+                              <span className='text-xs font-medium'>+{group.students.length - 3}</span>
+                            </div>
+                          )}
+                        </div>
                       </div>
-                    </div>
 
-                    <button className='mt-0.5' onClick={() => handleCopyGroupCode(group.code)}>
-                      <Badge variant='secondary' className='text-xs'>
-                        {group.code}
-                        <Copy className='ml-1 inline-block h-3 w-3' />
-                      </Badge>
-                    </button>
-                    {/* AVATAR LIST */}
+                      <button className='mt-0.5' onClick={() => handleCopyGroupCode(group.code)}>
+                        <Badge variant='secondary' className='text-xs'>
+                          {group.code}
+                          <Copy className='ml-1 inline-block h-3 w-3' />
+                        </Badge>
+                      </button>
+                      {/* AVATAR LIST */}
+                    </div>
                   </div>
-                </div>
 
-                {/* MENU BTN */}
-                <button className='rounded-full p-1 hover:bg-gray-100'>
-                  <MoreHorizontal className='h-5 w-5 text-gray-400' />
-                </button>
-              </div>
-            </CardContent>
-          </Card>
-        ))}
-      </div>
+                  {/* MENU BTN */}
+                  <button className='rounded-full p-1 hover:bg-gray-100'>
+                    <MoreHorizontal className='h-5 w-5 text-gray-400' />
+                  </button>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+      {/* Ungrouped Students */}
+      {activeTab === 'ungrouped' && (
+        <UngroupedStudentList
+          students={ungroupedStudents?.data?.items || []}
+          onCreateGroup={(studentIds) => {
+            console.log('Creating group for:', studentIds)
+            // Gọi API create group...
+          }}
+          onSearchChange={setSearch}
+        />
+      )}
     </div>
   )
 }
diff --git a/src/features/group/components/list/UngroupedStudentList.tsx b/src/features/group/components/list/UngroupedStudentList.tsx
new file mode 100644
index 000000000..da94d6a6a
--- /dev/null
+++ b/src/features/group/components/list/UngroupedStudentList.tsx
@@ -0,0 +1,118 @@
+'use client'
+
+import { useState } from 'react'
+import { Button } from '@/components/shadcn/button'
+import { Checkbox } from '@/components/shadcn/checkbox'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/shadcn/table'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/shadcn/dialog'
+import { Input } from '@/components/shadcn/input'
+import { Label } from '@/components/shadcn/label'
+import { Avatar, AvatarFallback } from '@/components/shadcn/avatar'
+import { OrganizationUser } from '@/features/user/types/user.type'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/shadcn/select'
+import { getColorByInitial } from '@/utils/index'
+import { useModal } from '@/providers/ModalProvider'
+
+interface Props {
+  students: OrganizationUser[]
+  onCreateGroup: (selectedIds: string[]) => void
+  onSearchChange: (text: string) => void
+}
+
+export function UngroupedStudentList({ students, onCreateGroup, onSearchChange }: Props) {
+  const [selected, setSelected] = useState<string[]>([])
+  const [groupName, setGroupName] = useState('')
+  const { openModal } = useModal()
+
+  const toggleStudent = (id: string) => {
+    setSelected((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]))
+  }
+
+  const toggleSelectAll = () => {
+    if (selected.length === students.length) setSelected([])
+    else setSelected(students.map((s) => s.organizationUserId))
+  }
+
+  const initials = (name: string) =>
+    name
+      .split(' ')
+      .filter(Boolean)
+      .map((n) => n[0])
+      .join('')
+      .toUpperCase()
+
+  return (
+    <div className='mt-5'>
+      {/* HEADER */}
+      <div className='mb-4 flex items-center justify-between'>
+        <h2 className='text-lg font-semibold'>Students Without Group</h2>
+
+        <Button
+          disabled={selected.length === 0}
+          onClick={() => openModal('upsertStudentGroup', { studentIds: selected })}
+        >
+          Create Group ({selected.length})
+        </Button>
+      </div>
+      <div className='mb-4 flex flex-wrap items-center gap-3'>
+        {/* SEARCH */}
+        <div className='w-full sm:w-100'>
+          <Input placeholder='Search student...' onChange={(e) => onSearchChange(e.target.value)} />
+        </div>
+      </div>
+      {/* TABLE */}
+      <div className='overflow-hidden rounded-lg border bg-white'>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className='w-10'>
+                <Checkbox checked={selected.length === students.length} onCheckedChange={toggleSelectAll} />
+              </TableHead>
+              <TableHead>Student</TableHead>
+              <TableHead>Email</TableHead>
+              <TableHead>Grade</TableHead>
+            </TableRow>
+          </TableHeader>
+
+          <TableBody>
+            {students.map((s) => {
+              const firstLetter = initials(s.fullName)[0]
+              const bgColor = getColorByInitial(firstLetter)
+              return (
+                <TableRow key={s.organizationUserId}>
+                  <TableCell>
+                    <Checkbox
+                      checked={selected.includes(s.organizationUserId)}
+                      onCheckedChange={() => toggleStudent(s.organizationUserId)}
+                    />
+                  </TableCell>
+
+                  <TableCell>
+                    <div className='flex items-center gap-3'>
+                      <Avatar className='h-8 w-8 border'>
+                        <AvatarFallback className={`${bgColor} font-bold text-white`}>{firstLetter}</AvatarFallback>
+                      </Avatar>
+
+                      <span className='font-medium'>{s.fullName}</span>
+                    </div>
+                  </TableCell>
+
+                  <TableCell className='text-gray-600'>{s.email}</TableCell>
+                  <TableCell>{s.grade ?? '-'}</TableCell>
+                </TableRow>
+              )
+            })}
+
+            {students.length === 0 && (
+              <TableRow>
+                <TableCell colSpan={3} className='py-6 text-center text-gray-500'>
+                  No ungrouped students.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  )
+}
diff --git a/src/features/group/components/upsert/UpsertStudentGroup.tsx b/src/features/group/components/upsert/UpsertStudentGroup.tsx
new file mode 100644
index 000000000..b11d3419f
--- /dev/null
+++ b/src/features/group/components/upsert/UpsertStudentGroup.tsx
@@ -0,0 +1,75 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/shadcn/dialog'
+import { Input } from '@/components/shadcn/input'
+import { Label } from '@/components/shadcn/label'
+import { Button } from '@/components/shadcn/button'
+import { useCreateGroupMutation } from '@/features/group/api/groupApi'
+import { useModal } from '@/providers/ModalProvider'
+
+export interface StudentGroupPayload {
+  name: string
+  code: string
+  studentIds: string[]
+}
+
+interface UpsertStudentGroupProps {
+  studentIds: string[] // <-- danh sách student để tạo group
+}
+
+export function UpsertStudentGroup({ studentIds }: UpsertStudentGroupProps) {
+  const [name, setName] = useState('')
+  const [code, setCode] = useState('')
+  const [createStudentGroup] = useCreateGroupMutation()
+  const { closeModal } = useModal()
+
+  const handleSubmit = () => {
+    if (!name.trim() || !code.trim()) return
+
+    createStudentGroup({
+      name: name.trim(),
+      code: code.trim(),
+      studentIds: studentIds
+    })
+
+    closeModal()
+  }
+
+  return (
+    <Dialog>
+      <DialogContent className='sm:max-w-md'>
+        <DialogHeader>
+          <DialogTitle>Create Student Group</DialogTitle>
+        </DialogHeader>
+
+        <div className='mt-2 space-y-4'>
+          {/* GROUP NAME */}
+          <div className='space-y-1'>
+            <Label>Group Name</Label>
+            <Input placeholder='Enter group name...' value={name} onChange={(e) => setName(e.target.value)} />
+          </div>
+
+          {/* GROUP CODE */}
+          <div className='space-y-1'>
+            <Label>Group Code</Label>
+            <Input placeholder='Enter group code...' value={code} onChange={(e) => setCode(e.target.value)} />
+          </div>
+
+          {/* DISPLAY SELECTED STUDENT COUNT */}
+          <p className='text-sm text-gray-600'>{studentIds.length} students will be added to this group.</p>
+        </div>
+
+        <DialogFooter>
+          <Button variant='outline' onClick={closeModal}>
+            Cancel
+          </Button>
+
+          <Button disabled={!name.trim() || !code.trim()} onClick={handleSubmit}>
+            Create Group
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/src/features/group/types/group.type.ts b/src/features/group/types/group.type.ts
index cc0cfbd08..0f6dedd7e 100644
--- a/src/features/group/types/group.type.ts
+++ b/src/features/group/types/group.type.ts
@@ -17,6 +17,7 @@ export type Group = {
   createdAt: string
   updatedAt: string
   students: GroupDetailStudent[]
+  studentIds?: string[]
 }
 
 export type GroupDetailStudent = {
diff --git a/src/features/resource/curriculum/components/list/OrganizationCurriculumList.tsx b/src/features/resource/curriculum/components/list/OrganizationCurriculumList.tsx
index 7256b026b..b2164ab3a 100644
--- a/src/features/resource/curriculum/components/list/OrganizationCurriculumList.tsx
+++ b/src/features/resource/curriculum/components/list/OrganizationCurriculumList.tsx
@@ -77,7 +77,7 @@ export default function OrganizationCurriculumList() {
           <div>
             <h1 className='text-3xl font-bold text-gray-900'>{t('title')}</h1>
             <p className='mt-1 text-sm text-gray-600'>
-              {curriculumData.data.curriculums.length} {t('curriculum')}
+              {t('orgCurriculumDescription', { count: curriculumData.data.curriculums.length })}
             </p>
           </div>
         </div>
diff --git a/src/features/user/types/user.type.ts b/src/features/user/types/user.type.ts
index b3d4a05e8..fe30d10ad 100644
--- a/src/features/user/types/user.type.ts
+++ b/src/features/user/types/user.type.ts
@@ -62,6 +62,7 @@ export type UserSliceParams = {
 // Organization User Types
 export type OrganizationUser = {
   userId: string
+  grade?: string
   email: string
   userName: string
   fullName: string
diff --git a/src/providers/ModalProvider.tsx b/src/providers/ModalProvider.tsx
index a1781185f..2b2c68c1a 100644
--- a/src/providers/ModalProvider.tsx
+++ b/src/providers/ModalProvider.tsx
@@ -46,6 +46,7 @@ import CreateAssignmentInfoModal from '@/features/assignment/components/upsert/C
 import UpsertGroupModal from '@/features/group/components/modal/UpsertGroupModal'
 import UpdateGroupModal from '@/features/group/components/modal/UpdateGroupModal'
 import CreateQuizModal from '@/features/resource/quiz/components/modal/CreateQuizModal'
+import { UpsertStudentGroup } from '@/features/group/components/upsert/UpsertStudentGroup'
 const ModalContext = createContext<ModalContextType>({
   openModal: () => {},
   closeModal: () => {},
@@ -103,6 +104,7 @@ export const ModalProvider = ({ children }: { children: React.ReactNode }) => {
       {modalType === 'upsertGroup' && <UpsertGroupModal {...modalProps} />}
       {modalType === 'updateGroup' && <UpdateGroupModal {...modalProps} />}
       {modalType === 'createQuiz' && <CreateQuizModal {...modalProps} />}
+      {modalType === 'upsertStudentGroup' && <UpsertStudentGroup {...modalProps} />}
 
       {/* detail */}
       {modalType === 'lessonDetail' && <LessonDetailModal {...modalProps} />}
diff --git a/src/types/general.ts b/src/types/general.ts
index 13e9313d2..0e5df6c95 100644
--- a/src/types/general.ts
+++ b/src/types/general.ts
@@ -43,6 +43,7 @@ export type ModalType =
   | 'upsertGroup'
   | 'updateGroup'
   | 'createQuiz'
+  | 'upsertStudentGroup'
 
   // detail
   | 'lessonDetail'
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 23755eb56..c3d2d32a2 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -230,3 +230,29 @@ export const useGradeTranslation = () => {
     return tc(grade.toLowerCase().replace(' ', '_'))
   }
 }
+
+export function getColorByInitial(initial: string) {
+  const colors = [
+    'bg-red-500',
+    'bg-orange-500',
+    'bg-amber-500',
+    'bg-yellow-500',
+    'bg-lime-500',
+    'bg-green-500',
+    'bg-emerald-500',
+    'bg-teal-500',
+    'bg-cyan-500',
+    'bg-sky-500',
+    'bg-blue-500',
+    'bg-indigo-500',
+    'bg-violet-500',
+    'bg-purple-500',
+    'bg-fuchsia-500',
+    'bg-pink-500',
+    'bg-rose-500'
+  ]
+
+  // Lấy ASCII để random màu theo chữ cái
+  const index = (initial.charCodeAt(0) - 65) % colors.length
+  return colors[index] || 'bg-gray-500'
+}

From bab9a91151e62b21a787c27a94847de23211aac6 Mon Sep 17 00:00:00 2001
From: ttd11204 <datkk112004@gmail.com>
Date: Thu, 11 Dec 2025 17:32:20 +0700
Subject: [PATCH 07/16] fix: Simplify toSlug function by removing unnecessary
 semicolon

---
 src/utils/index.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/utils/index.ts b/src/utils/index.ts
index 4503e5eaa..222f8b3a9 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -231,8 +231,7 @@ export const useGradeTranslation = () => {
   }
 }
 
-export const toSlug = (str: string) => str.toLowerCase().replace(/\s+/g, '');
-
+export const toSlug = (str: string) => str.toLowerCase().replace(/\s+/g, '')
 
 export function getColorByInitial(initial: string) {
   const colors = [

From 7beb91359b7183a2cbb11510d0fd6ce111abcfcb Mon Sep 17 00:00:00 2001
From: meewaldor <tieumylam91@gmail.com>
Date: Thu, 11 Dec 2025 17:59:11 +0700
Subject: [PATCH 08/16] feat: enhance getRemainingMonths function for accurate
 month calculation and add debug logs

---
 .../detail/OrganizationSubscriptionDetail.tsx | 24 +++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/features/subscription/components/detail/OrganizationSubscriptionDetail.tsx b/src/features/subscription/components/detail/OrganizationSubscriptionDetail.tsx
index c3d1e8789..4c4f7b20a 100644
--- a/src/features/subscription/components/detail/OrganizationSubscriptionDetail.tsx
+++ b/src/features/subscription/components/detail/OrganizationSubscriptionDetail.tsx
@@ -27,13 +27,25 @@ export default function OrganizationSubscriptionDetail() {
 
   const { data: subscription, isLoading: isLoadingSubscription } = useGetSubscriptionByIdQuery(Number(subscriptionId))
 
-  const getRemainingMonths = (endDate: string | undefined) => {
+  const getRemainingMonths = (endDate?: string) => {
     if (!endDate) return 0
+
     const end = new Date(endDate)
     const now = new Date()
-    const diff = end.getTime() - now.getTime()
-    const months = Math.ceil(diff / (1000 * 60 * 60 * 24 * 30))
-    return months > 0 ? months : 0
+
+    if (isNaN(end.getTime())) return 0
+    if (end <= now) return 0
+
+    let yearsDiff = end.getFullYear() - now.getFullYear()
+    let monthsDiff = end.getMonth() - now.getMonth()
+
+    let totalMonths = yearsDiff * 12 + monthsDiff
+
+    if (end.getDate() < now.getDate()) {
+      totalMonths -= 1
+    }
+
+    return totalMonths > 0 ? totalMonths : 0
   }
 
   const calculateProgressValue = (startDate: Date, endDate: Date, today: Date = new Date()): number => {
@@ -62,6 +74,10 @@ export default function OrganizationSubscriptionDetail() {
   if (!subscription?.data) {
     return <SEmpty title='Organization Subscription Not Found' />
   }
+  console.log('Start:', subscription.data.startDate, new Date(subscription.data.startDate))
+  console.log('End:', subscription.data.endDate, new Date(subscription.data.endDate))
+
+  console.log(calculateProgressValue(new Date(subscription.data.startDate), new Date(subscription.data.endDate)))
   return (
     <div className='min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-slate-50 p-6'>
       <div className='mx-auto max-w-7xl space-y-8'>

From d8a94b07c7f5e79744ba7865fe8506ec63990e4b Mon Sep 17 00:00:00 2001
From: ttd11204 <datkk112004@gmail.com>
Date: Thu, 11 Dec 2025 19:02:28 +0700
Subject: [PATCH 09/16] fix: Update Checkbox component styles for checked
 state; ensure UpsertStudentGroup dialog opens correctly

---
 src/components/shadcn/checkbox.tsx                          | 2 +-
 src/features/group/components/upsert/UpsertStudentGroup.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/shadcn/checkbox.tsx b/src/components/shadcn/checkbox.tsx
index 0131f2d6e..83de8a51d 100644
--- a/src/components/shadcn/checkbox.tsx
+++ b/src/components/shadcn/checkbox.tsx
@@ -11,7 +11,7 @@ function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxP
     <CheckboxPrimitive.Root
       data-slot='checkbox'
       className={cn(
-        'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        'peer border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:bg-blue-600',
         className
       )}
       {...props}
diff --git a/src/features/group/components/upsert/UpsertStudentGroup.tsx b/src/features/group/components/upsert/UpsertStudentGroup.tsx
index b11d3419f..988ba88c2 100644
--- a/src/features/group/components/upsert/UpsertStudentGroup.tsx
+++ b/src/features/group/components/upsert/UpsertStudentGroup.tsx
@@ -37,7 +37,7 @@ export function UpsertStudentGroup({ studentIds }: UpsertStudentGroupProps) {
   }
 
   return (
-    <Dialog>
+    <Dialog open onOpenChange={closeModal}>
       <DialogContent className='sm:max-w-md'>
         <DialogHeader>
           <DialogTitle>Create Student Group</DialogTitle>

From 4f786367f51ef5a7ab13162d1898dd929b35fc31 Mon Sep 17 00:00:00 2001
From: ttd11204 <datkk112004@gmail.com>
Date: Fri, 12 Dec 2025 17:34:32 +0700
Subject: [PATCH 10/16] feat: Update curriculum terminology and enhance
 subscription management in organization features

---
 messages/en/classroom/en_classroom.json       |   2 +-
 messages/en/organization/en_organization.json |   7 +-
 messages/vi/classroom/vi_classroom.json       |   2 +-
 messages/vi/organization/vi_organization.json |   7 +-
 .../detail/OrganizationClassroomDetail.tsx    |  17 +-
 .../components/upsert/CreateClassroom.tsx     |   3 -
 .../classroom/types/classroom.type.ts         |   1 +
 .../organization/api/organizationApi.ts       |   2 +-
 .../organization/types/organization.type.ts   |  16 +-
 .../OrganizationCourseClassroom.tsx           |  10 +-
 .../OrganizationCourseClassroomCoulum.tsx     |   6 +-
 .../list/OrganizationCourseList.tsx           |   5 +-
 .../detail/OrganizationCurriculumDetail.tsx   |   2 +-
 .../OrganizationCurriculumInfoSection.tsx     |  79 +++++----
 .../list/OrganizationCurriculumList.tsx       | 157 ++++++++++--------
 .../curriculum/slice/curriculumSlice.ts       |   9 +-
 .../curriculum/types/curriculum.type.ts       |   2 -
 src/utils/index.ts                            |  12 +-
 18 files changed, 195 insertions(+), 144 deletions(-)

diff --git a/messages/en/classroom/en_classroom.json b/messages/en/classroom/en_classroom.json
index 9e99c10eb..6f69e1821 100644
--- a/messages/en/classroom/en_classroom.json
+++ b/messages/en/classroom/en_classroom.json
@@ -26,7 +26,7 @@
         "startDate": "Start Date",
         "endDate": "End Date"
       },
-      "curriculum": "Update Classroom Curriculum",
+      "curriculum": "Update Course",
       "teacher": "Update Classroom Teacher",
       "students": {
         "addStudents": "Add Students to Classroom",
diff --git a/messages/en/organization/en_organization.json b/messages/en/organization/en_organization.json
index acc3232b4..b0c559571 100644
--- a/messages/en/organization/en_organization.json
+++ b/messages/en/organization/en_organization.json
@@ -246,7 +246,12 @@
       "filterByStatus": "Filter by Status",
       "showing": "Showing",
       "results": "results",
-      "all": "All"
+      "all": "All",
+      "activeSubscriptions": "Active Subscriptions",
+      "expiredSubscriptions": "Expired Subscriptions",
+      "upcomingSubscriptions": "Upcoming Subscriptions",
+      "cancelledSubscriptions": "Cancelled Subscriptions",
+      "accessPeriod": "Access Period"
     },
     "userTable": {
       "title": "Manage Users in the Organization",
diff --git a/messages/vi/classroom/vi_classroom.json b/messages/vi/classroom/vi_classroom.json
index 66f8ada17..a3f4ba646 100644
--- a/messages/vi/classroom/vi_classroom.json
+++ b/messages/vi/classroom/vi_classroom.json
@@ -25,7 +25,7 @@
         "startDate": "Ngày bắt đầu",
         "endDate": "Ngày kết thúc"
       },
-      "curriculum": "Cập nhật chương trình học của lớp học",
+      "curriculum": "Cập nhật khóa học",
       "teacher": "Cập nhật giáo viên của lớp học",
       "students": {
         "addStudents": "Thêm học sinh vào lớp học",
diff --git a/messages/vi/organization/vi_organization.json b/messages/vi/organization/vi_organization.json
index b5ff1c1f5..5fdef5219 100644
--- a/messages/vi/organization/vi_organization.json
+++ b/messages/vi/organization/vi_organization.json
@@ -245,7 +245,12 @@
       "filterByStatus": "Lọc theo trạng thái",
       "showing": "Hiển thị",
       "results": "kết quả",
-      "all": "Tất cả"
+      "all": "Tất cả",
+      "activeSubscriptions": "Gói đang hoạt động",
+      "expiredSubscriptions": "Gói đã hết hạn",
+      "upcomingSubscriptions": "Gói sắp kích hoạt",
+      "cancelledSubscriptions": "Gói đã hủy",
+      "accessPeriod": "Thời hạn truy cập"
     },
     "userTable": {
       "title": "Quản lý người dùng trong Tổ chức",
diff --git a/src/features/classroom/components/detail/OrganizationClassroomDetail.tsx b/src/features/classroom/components/detail/OrganizationClassroomDetail.tsx
index 56684da2b..a263d553a 100644
--- a/src/features/classroom/components/detail/OrganizationClassroomDetail.tsx
+++ b/src/features/classroom/components/detail/OrganizationClassroomDetail.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useDeleteClassroomStudentsMutation, useGetClassroomByIdQuery } from '@/features/classroom/api/classroomApi'
-import { useParams } from 'next/navigation'
+import { useParams, useRouter } from 'next/navigation'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/shadcn/card'
 import { Badge } from '@/components/shadcn/badge'
 import { Button } from '@/components/shadcn/button'
@@ -36,6 +36,7 @@ export default function OrganizationClassroomDetail() {
   const tc = useTranslations('common')
   const statusTranslations = useStatusTranslation()
   const locale = useLocale()
+  const router = useRouter()
 
   const { openModal } = useModal()
   const { classroomId } = useParams()
@@ -96,12 +97,10 @@ export default function OrganizationClassroomDetail() {
     <div className='min-h-screen bg-slate-50/50'>
       <div className='container mx-auto px-6 pb-8'>
         {/* Back Button */}
-        <Link href='/organization/classroom'>
-          <Button variant='ghost' className='mb-6 -ml-2'>
-            <ArrowLeft className='mr-2 h-4 w-4' />
-            {tClassroom('detail.backToClassrooms')}
-          </Button>
-        </Link>
+        <Button variant='ghost' className='mb-6 -ml-2' onClick={() => router.back()}>
+          <ArrowLeft className='mr-2 h-4 w-4' />
+          {tClassroom('detail.backToClassrooms')}
+        </Button>
 
         {/* Header Section */}
         <div className='mb-8'>
@@ -273,9 +272,7 @@ export default function OrganizationClassroomDetail() {
 
                         <div className='flex-1'>
                           <p className='font-medium text-slate-900'>{student.name || student.email}</p>
-                          {(student.email) && (
-                            <p className='text-sm text-slate-500'>{student.email}</p>
-                          )}
+                          {student.email && <p className='text-sm text-slate-500'>{student.email}</p>}
                         </div>
                       </div>
                     ))}
diff --git a/src/features/classroom/components/upsert/CreateClassroom.tsx b/src/features/classroom/components/upsert/CreateClassroom.tsx
index da852ad8d..051c728b0 100644
--- a/src/features/classroom/components/upsert/CreateClassroom.tsx
+++ b/src/features/classroom/components/upsert/CreateClassroom.tsx
@@ -78,8 +78,6 @@ export default function CreateClassroom() {
   const [startDate, setStartDateState] = useState<Date | undefined>(new Date())
   const [endDate, setEndDate] = useState<Date | undefined>(new Date(new Date().setDate(new Date().getDate() + 56)))
 
-  const selectedSubscriptionId = useAppSelector((state) => state.selectedOrganization.selectedSubscriptionOrderId)
-
   const GRADE_OPTIONS = Object.values(Grade)
     .filter((v) => typeof v === 'number')
     .map((grade) => ({
@@ -105,7 +103,6 @@ export default function CreateClassroom() {
       const payload = {
         ...value,
         courseId: Number(value.courseId),
-        organizationSubscriptionOrderId: selectedSubscriptionId!,
         studentGroups: selectedGroups
       }
 
diff --git a/src/features/classroom/types/classroom.type.ts b/src/features/classroom/types/classroom.type.ts
index 55a576511..b0d8938f1 100644
--- a/src/features/classroom/types/classroom.type.ts
+++ b/src/features/classroom/types/classroom.type.ts
@@ -37,6 +37,7 @@ export type ClassroomSliceParams = {
   teacherId?: string
   status?: ClassroomStatus
   courseId?: number
+  subscriptionId?: number
 } & SliceQueryParams
 
 // Pending, InProgress, Completed, Deleted
diff --git a/src/features/organization/api/organizationApi.ts b/src/features/organization/api/organizationApi.ts
index 76ded6bf6..711e48d96 100644
--- a/src/features/organization/api/organizationApi.ts
+++ b/src/features/organization/api/organizationApi.ts
@@ -23,7 +23,7 @@ export const organizationApi = createCrudApi<Organization, OrganizationSlicePara
       providesTags: ['Organization']
     }),
     getCurriculumsByOrganizationId: build.query<
-      ApiSuccessResponse<{ curriculums: Curriculum[] }>,
+      ApiSuccessResponse<{ curriculums: OrganizationCurriculum[] }>,
       { organizationId: number }
     >({
       query: ({ organizationId }) => ({
diff --git a/src/features/organization/types/organization.type.ts b/src/features/organization/types/organization.type.ts
index d8249e032..b3a31d825 100644
--- a/src/features/organization/types/organization.type.ts
+++ b/src/features/organization/types/organization.type.ts
@@ -1,3 +1,4 @@
+import { CourseLevel } from '@/features/resource/course/types/course.type'
 import { OrganizationSubscription } from '@/features/subscription/types/subscription.type'
 import { SliceQueryParams } from '@/libs/redux/createQuerySlice'
 import { SearchPaginatedRequestParams } from '@/types/baseModel'
@@ -49,28 +50,33 @@ export type OrganizationFormData = {
 }
 
 // organization curriculum
-
 export type OrganizationCurriculum = {
   id: number
   title: string
+  description?: string
   imageUrl: string
   courseCount: number
-  startDate: string
-  endDate: string
   code: string
-  status: string
   courses: OrganizationCurriculumCourse[]
+  subscriptionGroups: {
+    status: string
+    subscriptions: {
+      subscriptionId: number
+      startDate: string
+      endDate: string
+    }[]
+  }[]
 }
 
 export type OrganizationCurriculumCourse = {
   id: number
   title: string
   code: string
+  level: CourseLevel
   imageUrl: string
   description: string
   duration: number
   status: string
-  level: string
   ageRangeLabel: string
   courseOrderIndex: number
   lessons: any[]
diff --git a/src/features/resource/course/components/detail/organization/OrganizationCourseClassroom.tsx b/src/features/resource/course/components/detail/organization/OrganizationCourseClassroom.tsx
index 28c5709c7..91de1fd8b 100644
--- a/src/features/resource/course/components/detail/organization/OrganizationCourseClassroom.tsx
+++ b/src/features/resource/course/components/detail/organization/OrganizationCourseClassroom.tsx
@@ -33,7 +33,12 @@ export default function OrganizationCourseClassroom() {
   const organizationId = useAppSelector((state) => state.selectedOrganization.selectedOrganizationId)
 
   const debouncedSearchQuery = useDebounce(search, 500)
-  const { data } = useSearchClassroomsQuery({ ...queryParams, organizationId: organizationId })
+  const { data } = useSearchClassroomsQuery({
+    ...queryParams,
+    organizationId: organizationId,
+    courseId: Number(courseId),
+    search: debouncedSearchQuery
+  })
 
   const rows = React.useMemo(() => data?.data.items ?? [], [data])
   const columns = useGetOrganizationCourseClassroomColumn()
@@ -64,7 +69,8 @@ export default function OrganizationCourseClassroom() {
             className='bg-sky-600 text-white hover:bg-sky-700'
             onClick={() => {
               dispatch(setCourseId(Number(courseId)))
-              router.push(`/${locale}/organization/classroom/create`)}}
+              router.push(`/${locale}/organization/classroom/create`)
+            }}
           >
             + {tc('button.createClassroom')}
           </Button>
diff --git a/src/features/resource/course/components/detail/organization/OrganizationCourseClassroomCoulum.tsx b/src/features/resource/course/components/detail/organization/OrganizationCourseClassroomCoulum.tsx
index cb1bc3da0..a9ebf53ae 100644
--- a/src/features/resource/course/components/detail/organization/OrganizationCourseClassroomCoulum.tsx
+++ b/src/features/resource/course/components/detail/organization/OrganizationCourseClassroomCoulum.tsx
@@ -21,10 +21,10 @@ export function useGetOrganizationCourseClassroomColumn(): ColumnDef<Classroom>[
 
   return [
     {
-      accessorKey: 'classCode',
-      header: tc('tableHeader.classCode'),
+      accessorKey: 'className',
+      header: tc('tableHeader.className'),
       cell: ({ row }) => {
-        return <span>{row.original.classCode}</span>
+        return <span>{row.original.name}</span>
       }
     },
     {
diff --git a/src/features/resource/course/components/list/OrganizationCourseList.tsx b/src/features/resource/course/components/list/OrganizationCourseList.tsx
index 7224914a7..49bca20bd 100644
--- a/src/features/resource/course/components/list/OrganizationCourseList.tsx
+++ b/src/features/resource/course/components/list/OrganizationCourseList.tsx
@@ -1,7 +1,6 @@
 import { Badge } from '@/components/shadcn/badge'
 import CardLayout from '@/components/shared/card/CardLayout'
-import { Course } from '@/features/resource/course/types/course.type'
-import { useGetCurriculumByIdQuery } from '@/features/resource/curriculum/api/curriculumApi'
+import { OrganizationCurriculumCourse } from '@/features/organization/types/organization.type'
 import { getLevelBadgeClass } from '@/utils/badgeColor'
 import { capitalizeFirst } from '@/utils/index'
 import { useTranslations } from 'next-intl'
@@ -9,7 +8,7 @@ import Link from 'next/link'
 import { useParams } from 'next/navigation'
 import React from 'react'
 type OrganizationCurriculumCourseListProps = {
-  courses: Course[]
+  courses: OrganizationCurriculumCourse[]
 }
 
 export default function OrganizationCourseList({ courses }: OrganizationCurriculumCourseListProps) {
diff --git a/src/features/resource/curriculum/components/detail/OrganizationCurriculumDetail.tsx b/src/features/resource/curriculum/components/detail/OrganizationCurriculumDetail.tsx
index 2f5bc76bf..3cd85a60b 100644
--- a/src/features/resource/curriculum/components/detail/OrganizationCurriculumDetail.tsx
+++ b/src/features/resource/curriculum/components/detail/OrganizationCurriculumDetail.tsx
@@ -29,7 +29,7 @@ export default function OrganizationCurriculumDetail() {
           <hr className='my-10' />
           <LearningOutcomeTable curriculumId={Number(curriculum.id)} />
           <hr className='my-10' />
-          <KitListSection context='curriculum' kitIds={curriculum.kitIds || []} />
+          <KitListSection context='curriculum' kitIds={[]} />
           <hr className='my-10' />
           <OrganizationCourseList courses={curriculum.courses || []} />
         </>
diff --git a/src/features/resource/curriculum/components/detail/OrganizationCurriculumInfoSection.tsx b/src/features/resource/curriculum/components/detail/OrganizationCurriculumInfoSection.tsx
index e57448ef0..258710968 100644
--- a/src/features/resource/curriculum/components/detail/OrganizationCurriculumInfoSection.tsx
+++ b/src/features/resource/curriculum/components/detail/OrganizationCurriculumInfoSection.tsx
@@ -1,25 +1,14 @@
-import { Button } from '@/components/shadcn/button'
-import { SquarePen, Trash2 } from 'lucide-react'
 import Image from 'next/image'
 import React from 'react'
 import { Badge } from '@/components/shadcn/badge'
 import { useLocale, useTranslations } from 'next-intl'
-import {
-  useDeleteCurriculumMutation,
-  useGetCurriculumByIdQuery,
-  useUpdateCurriculumMutation
-} from '@/features/resource/curriculum/api/curriculumApi'
-import { useParams } from 'next/navigation'
-import { Curriculum, CurriculumStatus } from '../../types/curriculum.type'
-import { useModal } from '@/providers/ModalProvider'
-import { toast } from 'sonner'
 import { getStatusBadgeClass } from '@/utils/badgeColor'
-import { useAppSelector } from '@/hooks/redux-hooks'
-import { UserRole } from '@/types/userRole'
 import { formatDate, useStatusTranslation } from '@/utils/index'
+import { OrganizationCurriculum } from '@/features/organization/types/organization.type'
+import { SubscriptionStatus } from '@/features/subscription/types/subscription.type'
 
 type OrganizationCurriculumInfoSectionProps = {
-  curriculum: Curriculum
+  curriculum: OrganizationCurriculum
 }
 
 export default function OrganizationCurriculumInfoSection({ curriculum }: OrganizationCurriculumInfoSectionProps) {
@@ -31,33 +20,19 @@ export default function OrganizationCurriculumInfoSection({ curriculum }: Organi
 
   const statusTranslate = useStatusTranslation()
   const locale = useLocale()
+  const group = curriculum.subscriptionGroups[0]
 
   return (
     <div className='grid grid-cols-1 gap-12 py-5 md:grid-cols-3'>
       {/* Content Section */}
       <div className='flex flex-col md:col-span-2'>
-        <h2 className='mb-2 text-sm text-gray-500 uppercase'>{curriculum.code}</h2>
         <div className='flex items-center gap-2'>
-          <h1 className='mb-4 text-4xl font-bold text-gray-900'>{curriculum.title}</h1>
-          <Badge className={getStatusBadgeClass(curriculum.status)}>{statusTranslate(curriculum.status)}</Badge>
-        </div>
-
-        {/* badges */}
-        <div className='mb-4 flex flex-wrap gap-2'>
-          <div className='flex items-center gap-2 text-sm'>
-            <span className='text-gray-600'>{to('startDate')}:</span>
-            <span className='font-medium text-gray-900'>
-              {curriculum.startDate ? formatDate(curriculum.startDate, { locale }) : '-'}
-            </span>
-          </div>
-
-          <div className='flex items-center gap-2 text-sm'>
-            <span className='text-gray-600'>{to('endDate')}:</span>
-            <span className='font-medium text-gray-900'>
-              {curriculum.endDate ? formatDate(curriculum.endDate, { locale }) : '-'}
-            </span>
-          </div>
+          <h2 className='mb-2 text-sm text-gray-500 uppercase'>{curriculum.code}</h2>
+          <Badge className={getStatusBadgeClass(curriculum.subscriptionGroups[0].status)}>
+            {statusTranslate(curriculum.subscriptionGroups[0].status)}
+          </Badge>
         </div>
+        <h1 className='mb-4 text-4xl font-bold text-gray-900'>{curriculum.title}</h1>
 
         <div className='mb-6 h-1 w-20 bg-yellow-500' />
 
@@ -65,7 +40,7 @@ export default function OrganizationCurriculumInfoSection({ curriculum }: Organi
       </div>
 
       {/* Image Section */}
-      <div>
+      <div className='space-y-4'>
         <div className='relative aspect-[4/4] w-full overflow-hidden rounded-2xl shadow-md'>
           <Image
             src={curriculum.imageUrl || '/images/fallback.png'}
@@ -74,6 +49,40 @@ export default function OrganizationCurriculumInfoSection({ curriculum }: Organi
             className='object-cover'
           />
         </div>
+        {/* Subscription Section */}
+        <div className='overflow-hidden rounded-2xl border bg-white shadow-sm'>
+          {/* Card body */}
+          <div className='p-4'>
+            {/* Subscription info */}
+            <div className='space-y-2 text-sm'>
+              {/* Subscription count + status */}
+              <Badge className='flex items-center gap-2 bg-blue-100 text-blue-800'>
+                <span>
+                  {group.subscriptions.length}{' '}
+                  {group.status === SubscriptionStatus.ACTIVE
+                    ? to('activeSubscriptions')
+                    : group.status === SubscriptionStatus.PENDING
+                      ? to('upcomingSubscriptions')
+                      : to('expiredSubscriptions')}
+                </span>
+              </Badge>
+
+              {/* Access period */}
+              <div className='flex flex-col gap-2'>
+                <span className='text-gray-600'>{to('accessPeriod')}:</span>
+                <span className='font-medium text-gray-900'>
+                  {formatDate(new Date(Math.min(...group.subscriptions.map((s) => new Date(s.startDate).getTime()))), {
+                    locale
+                  })}
+                  {' – '}
+                  {formatDate(new Date(Math.max(...group.subscriptions.map((s) => new Date(s.endDate).getTime()))), {
+                    locale
+                  })}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   )
diff --git a/src/features/resource/curriculum/components/list/OrganizationCurriculumList.tsx b/src/features/resource/curriculum/components/list/OrganizationCurriculumList.tsx
index b2164ab3a..8d59d8e9b 100644
--- a/src/features/resource/curriculum/components/list/OrganizationCurriculumList.tsx
+++ b/src/features/resource/curriculum/components/list/OrganizationCurriculumList.tsx
@@ -10,10 +10,18 @@ import { useGetCurriculumsByOrganizationIdQuery } from '@/features/organization/
 import { Badge } from '@/components/shadcn/badge'
 import { getStatusBadgeClass } from '@/utils/badgeColor'
 import { BookOpen, Calendar, GraduationCap, Filter } from 'lucide-react'
-import { CurriculumStatus } from '@/features/resource/curriculum/types/curriculum.type'
 import { useAppDispatch, useAppSelector } from '@/hooks/redux-hooks'
 import { SubscriptionStatus } from '@/features/subscription/types/subscription.type'
 import { setSelectedCurriculum } from '@/features/resource/curriculum/slice/curriculumSlice'
+import { OrganizationCurriculum } from '@/features/organization/types/organization.type'
+
+export function getDominantSubscriptionGroup(groups: OrganizationCurriculum['subscriptionGroups']) {
+  return (
+    groups.find((g) => g.status === 'ACTIVE') ||
+    groups.find((g) => g.status === 'UPCOMING') ||
+    groups.find((g) => g.status === 'EXPIRED')
+  )
+}
 
 export default function OrganizationCurriculumList() {
   const t = useTranslations('organization.curriculum')
@@ -25,22 +33,13 @@ export default function OrganizationCurriculumList() {
 
   const { selectedOrganizationId } = useAppSelector((state) => state.selectedOrganization)
 
-  const [selectedStatus, setSelectedStatus] = useState<SubscriptionStatus | CurriculumStatus | 'ALL'>('ALL')
+  const [selectedStatus, setSelectedStatus] = useState<SubscriptionStatus>(SubscriptionStatus.ACTIVE)
 
   const { data: curriculumData, isLoading } = useGetCurriculumsByOrganizationIdQuery(
     { organizationId: selectedOrganizationId! },
     { skip: !selectedOrganizationId }
   )
-  // Filter curriculums based on selected status
-  const filteredCurriculums = useMemo(() => {
-    if (!curriculumData?.data?.curriculums) return []
-
-    if (selectedStatus === 'ALL') {
-      return curriculumData.data.curriculums
-    }
-
-    return curriculumData.data.curriculums.filter((curriculum) => curriculum.status === selectedStatus)
-  }, [curriculumData, selectedStatus])
+  const curriculums = curriculumData?.data.curriculums || []
 
   if (isLoading) {
     return (
@@ -58,8 +57,7 @@ export default function OrganizationCurriculumList() {
     )
   }
 
-  const statusOptions: Array<SubscriptionStatus | 'ALL'> = [
-    'ALL',
+  const statusOptions: Array<SubscriptionStatus> = [
     SubscriptionStatus.ACTIVE,
     SubscriptionStatus.PENDING,
     SubscriptionStatus.CANCELLED,
@@ -101,7 +99,7 @@ export default function OrganizationCurriculumList() {
                     : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                 }`}
               >
-                {status === 'ALL' ? t('all') : tc(`status2.${status.toLowerCase()}`)}
+                {tc(`status2.${status.toLowerCase()}`)}
               </button>
             ))}
           </div>
@@ -109,68 +107,97 @@ export default function OrganizationCurriculumList() {
 
         {/* Results Count */}
         <div className='mt-3 text-sm text-gray-600'>
-          {t('showing')} <span className='font-semibold text-gray-900'>{filteredCurriculums.length}</span>{' '}
-          {t('results')}
+          {t('showing')} <span className='font-semibold text-gray-900'>{curriculums.length}</span> {t('results')}
         </div>
       </div>
 
       {/* Empty State for Filtered Results */}
-      {filteredCurriculums.length === 0 ? (
+      {curriculums.length === 0 ? (
         <div className='py-12'>
           <SEmpty title={t('noResultsForFilter')} />
         </div>
       ) : (
         /* Curriculum Grid */
         <div className='grid grid-cols-1 gap-10 md:grid-cols-2 xl:grid-cols-3'>
-          {filteredCurriculums.map((curriculum) => (
-            <CardLayout
-              key={curriculum.id}
-              className='cursor-pointer hover:-translate-y-1'
-              imageSrc={curriculum.imageUrl}
-              onClick={() => {
-                dispatch(setSelectedCurriculum(curriculum))
-                router.push(`/${locale}/organization/curriculum/${curriculum.id}`)
-              }}
-              badge={
-                <Badge className={`${getStatusBadgeClass(curriculum.status)} shadow-sm`}>
-                  {tc(`status2.${curriculum.status.toLowerCase()}`)}
-                </Badge>
-              }
-              action={<Badge variant={'secondary'}>{curriculum.code}</Badge>}
-            >
-              <div>
-                {/* Title */}
-                <h2 className='mb-1 line-clamp-2 text-lg font-bold text-gray-900 transition-colors'>
-                  {curriculum.title}
-                </h2>
-
-                <div className='space-y-2'>
-                  {/* Course Count */}
-                  <div className='flex items-center gap-2 text-sm text-gray-700'>
-                    <BookOpen className='h-4 w-4 text-blue-600' />
-                    <span className='font-medium'>
-                      {curriculum.courseCount} {t('courses')}
-                    </span>
-                  </div>
-
-                  {/* Dates */}
-                  <div className='flex items-center gap-2 text-sm'>
-                    <span className='text-gray-600'>{t('startDate')}:</span>
-                    <span className='font-medium text-gray-900'>
-                      {curriculum.startDate ? formatDate(curriculum.startDate, { locale }) : ''}
-                    </span>
-                  </div>
-
-                  <div className='flex items-center gap-2 text-sm'>
-                    <span className='text-gray-600'>{t('endDate')}:</span>
-                    <span className='font-medium text-gray-900'>
-                      {curriculum.endDate ? formatDate(curriculum.endDate, { locale }) : ''}
-                    </span>
+          {curriculums.map((curriculum) => {
+            const displayGroup = getDominantSubscriptionGroup(curriculum.subscriptionGroups)
+
+            return (
+              <CardLayout
+                key={curriculum.id}
+                className='cursor-pointer hover:-translate-y-1'
+                imageSrc={curriculum.imageUrl}
+                onClick={() => {
+                  dispatch(setSelectedCurriculum(curriculum))
+                  router.push(`/${locale}/organization/curriculum/${curriculum.id}`)
+                }}
+                badge={
+                  <Badge className={`${getStatusBadgeClass(selectedStatus)} shadow-sm`}>
+                    {tc(`status2.${selectedStatus.toLowerCase()}`)}
+                  </Badge>
+                }
+                action={<Badge variant={'secondary'}>{curriculum.code}</Badge>}
+              >
+                <div>
+                  {/* Title */}
+                  <h2 className='mb-1 line-clamp-2 text-lg font-bold text-gray-900 transition-colors'>
+                    {curriculum.title}
+                  </h2>
+
+                  <div className='space-y-2'>
+                    {/* Course Count */}
+                    <div className='flex items-center gap-2 text-sm text-gray-700'>
+                      <BookOpen className='h-4 w-4 text-blue-600' />
+                      <span className='font-medium'>
+                        {curriculum.courseCount} {t('courses')}
+                      </span>
+                    </div>
+                    {/* Dates */}
+                    {displayGroup && (
+                      <>
+                        {displayGroup.subscriptions.length === 1 ? (
+                          <>
+                            <div className='flex items-center gap-2 text-sm'>
+                              <span className='text-gray-600'>{t('startDate')}:</span>
+                              <span className='font-medium text-gray-900'>
+                                {formatDate(displayGroup.subscriptions[0].startDate, { locale })}
+                              </span>
+                            </div>
+
+                            <div className='flex items-center gap-2 text-sm'>
+                              <span className='text-gray-600'>{t('endDate')}:</span>
+                              <span className='font-medium text-gray-900'>
+                                {formatDate(displayGroup.subscriptions[0].endDate, { locale })}
+                              </span>
+                            </div>
+                          </>
+                        ) : (
+                          <div className='flex items-center gap-2 text-sm'>
+                            <span className='text-gray-600'>{t('accessPeriod')}:</span>
+                            <span className='font-medium text-gray-900'>
+                              {formatDate(
+                                new Date(
+                                  Math.min(...displayGroup.subscriptions.map((s) => new Date(s.startDate).getTime()))
+                                ),
+                                { locale }
+                              )}
+                              {' – '}
+                              {formatDate(
+                                new Date(
+                                  Math.max(...displayGroup.subscriptions.map((s) => new Date(s.endDate).getTime()))
+                                ),
+                                { locale }
+                              )}
+                            </span>
+                          </div>
+                        )}
+                      </>
+                    )}
                   </div>
                 </div>
-              </div>
-            </CardLayout>
-          ))}
+              </CardLayout>
+            )
+          })}
         </div>
       )}
     </div>
diff --git a/src/features/resource/curriculum/slice/curriculumSlice.ts b/src/features/resource/curriculum/slice/curriculumSlice.ts
index d5eaa4ba3..ad8aa1a00 100644
--- a/src/features/resource/curriculum/slice/curriculumSlice.ts
+++ b/src/features/resource/curriculum/slice/curriculumSlice.ts
@@ -1,6 +1,7 @@
 import { createQuerySlice } from '@/libs/redux/createQuerySlice'
-import { Curriculum, CurriculumSliceParams, CurriculumStatus } from '../types/curriculum.type'
+import { CurriculumSliceParams, CurriculumStatus } from '../types/curriculum.type'
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import { OrganizationCurriculum } from '@/features/organization/types/organization.type'
 
 const initialState: CurriculumSliceParams = {
   pageNumber: 1,
@@ -16,18 +17,18 @@ export const { setPageIndex, setPageSize, setSearchTerm, setParam, setMultiplePa
   curriculumSlice.actions
 
 interface SelectedCurriculumState {
-  selectedCurriculum: Curriculum | null
+  selectedCurriculum: OrganizationCurriculum | null
 }
 
 const selectedCurriculumInitialState: SelectedCurriculumState = {
   selectedCurriculum: null
 }
-
+// Organization selected curriculum slice
 export const selectedCurriculumSlice = createSlice({
   name: 'selectedCurriculum',
   initialState: selectedCurriculumInitialState,
   reducers: {
-    setSelectedCurriculum: (state, action: PayloadAction<Curriculum | null>) => {
+    setSelectedCurriculum: (state, action: PayloadAction<OrganizationCurriculum | null>) => {
       state.selectedCurriculum = action.payload
     },
     clearSelectedCurriculum: (state) => {
diff --git a/src/features/resource/curriculum/types/curriculum.type.ts b/src/features/resource/curriculum/types/curriculum.type.ts
index a9fd16f9d..f1e95cfa6 100644
--- a/src/features/resource/curriculum/types/curriculum.type.ts
+++ b/src/features/resource/curriculum/types/curriculum.type.ts
@@ -20,8 +20,6 @@ export type Curriculum = {
   kitIds?: number[]
   price: number
   learningOutcomes: string[]
-  startDate?: string
-  endDate?: string
 }
 
 export type CurriculumSliceParams = {
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 222f8b3a9..ee75aa26e 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -49,19 +49,19 @@ export interface FormatDateOptions {
   month?: 'numeric' | '2-digit' | 'short' | 'long'
   day?: 'numeric' | '2-digit'
 }
-export const formatDate = (dateString: string, options: FormatDateOptions = {}) => {
+export const formatDate = (date: string | Date, options: FormatDateOptions = {}) => {
   const { locale, showTime = false, pattern, year = 'numeric', month = 'short', day = 'numeric' } = options
 
-  const date = new Date(dateString)
+  const d = typeof date === 'string' ? new Date(date) : date
 
-  if (isNaN(date.getTime())) {
+  if (isNaN(d.getTime())) {
     return 'N/A'
   }
   // --- 1. Nếu có pattern → custom formatting ---
   if (pattern) {
-    const dd = String(date.getDate()).padStart(2, '0')
-    const MM = String(date.getMonth() + 1).padStart(2, '0')
-    const yyyy = date.getFullYear()
+    const dd = String(d.getDate()).padStart(2, '0')
+    const MM = String(d.getMonth() + 1).padStart(2, '0')
+    const yyyy = d.getFullYear()
 
     switch (pattern) {
       case 'dd/MM/yyyy':

From 8b0363279ff9e40a5169f06158235d5c794524fe Mon Sep 17 00:00:00 2001
From: ttd11204 <datkk112004@gmail.com>
Date: Fri, 12 Dec 2025 18:38:52 +0700
Subject: [PATCH 11/16] feat: Add status parameter to
 getCurriculumsByOrganizationId query and update OrganizationCurriculumList
 component

---
 src/features/organization/api/organizationApi.ts           | 7 ++++---
 .../components/list/OrganizationCurriculumList.tsx         | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/features/organization/api/organizationApi.ts b/src/features/organization/api/organizationApi.ts
index 711e48d96..0a73442d9 100644
--- a/src/features/organization/api/organizationApi.ts
+++ b/src/features/organization/api/organizationApi.ts
@@ -24,10 +24,11 @@ export const organizationApi = createCrudApi<Organization, OrganizationSlicePara
     }),
     getCurriculumsByOrganizationId: build.query<
       ApiSuccessResponse<{ curriculums: OrganizationCurriculum[] }>,
-      { organizationId: number }
+      { organizationId: number; status?: string }
     >({
-      query: ({ organizationId }) => ({
-        url: `/organizations/${organizationId}/curriculums`
+      query: ({ organizationId, status }) => ({
+        url: `/organizations/${organizationId}/curriculums`,
+        params: status ? { status } : undefined
       }),
       providesTags: ['Organization']
     })
diff --git a/src/features/resource/curriculum/components/list/OrganizationCurriculumList.tsx b/src/features/resource/curriculum/components/list/OrganizationCurriculumList.tsx
index 8d59d8e9b..dda2f3300 100644
--- a/src/features/resource/curriculum/components/list/OrganizationCurriculumList.tsx
+++ b/src/features/resource/curriculum/components/list/OrganizationCurriculumList.tsx
@@ -36,7 +36,7 @@ export default function OrganizationCurriculumList() {
   const [selectedStatus, setSelectedStatus] = useState<SubscriptionStatus>(SubscriptionStatus.ACTIVE)
 
   const { data: curriculumData, isLoading } = useGetCurriculumsByOrganizationIdQuery(
-    { organizationId: selectedOrganizationId! },
+    { organizationId: selectedOrganizationId!, status: selectedStatus },
     { skip: !selectedOrganizationId }
   )
   const curriculums = curriculumData?.data.curriculums || []

From 1c3c695ed686e73f55f9da66e1391d126dd6717f Mon Sep 17 00:00:00 2001
From: ttd11204 <datkk112004@gmail.com>
Date: Fri, 12 Dec 2025 18:42:58 +0700
Subject: [PATCH 12/16] fix: Refactor loading and empty state handling in
 OrganizationCurriculumList component

---
 .../list/OrganizationCurriculumList.tsx       | 20 ++-----------------
 1 file changed, 2 insertions(+), 18 deletions(-)

diff --git a/src/features/resource/curriculum/components/list/OrganizationCurriculumList.tsx b/src/features/resource/curriculum/components/list/OrganizationCurriculumList.tsx
index dda2f3300..2b0e46674 100644
--- a/src/features/resource/curriculum/components/list/OrganizationCurriculumList.tsx
+++ b/src/features/resource/curriculum/components/list/OrganizationCurriculumList.tsx
@@ -41,22 +41,6 @@ export default function OrganizationCurriculumList() {
   )
   const curriculums = curriculumData?.data.curriculums || []
 
-  if (isLoading) {
-    return (
-      <div className='fixed inset-0 z-50 flex items-center justify-center bg-gradient-to-br from-blue-50/80 to-indigo-50/80 backdrop-blur-xl'>
-        <LoadingComponent size={150} />
-      </div>
-    )
-  }
-
-  if (!curriculumData || curriculumData.data.curriculums.length === 0) {
-    return (
-      <div className='mx-auto max-w-7xl px-5 py-12'>
-        <SEmpty title={t('noData')} />
-      </div>
-    )
-  }
-
   const statusOptions: Array<SubscriptionStatus> = [
     SubscriptionStatus.ACTIVE,
     SubscriptionStatus.PENDING,
@@ -75,7 +59,7 @@ export default function OrganizationCurriculumList() {
           <div>
             <h1 className='text-3xl font-bold text-gray-900'>{t('title')}</h1>
             <p className='mt-1 text-sm text-gray-600'>
-              {t('orgCurriculumDescription', { count: curriculumData.data.curriculums.length })}
+              {t('orgCurriculumDescription', { count: curriculumData?.data.curriculums.length || 0 })}
             </p>
           </div>
         </div>
@@ -112,7 +96,7 @@ export default function OrganizationCurriculumList() {
       </div>
 
       {/* Empty State for Filtered Results */}
-      {curriculums.length === 0 ? (
+      {!curriculumData || curriculums.length === 0 ? (
         <div className='py-12'>
           <SEmpty title={t('noResultsForFilter')} />
         </div>

From a54a73052bd4926f51f8b2f8f0984a766be9bac1 Mon Sep 17 00:00:00 2001
From: ttd11204 <datkk112004@gmail.com>
Date: Fri, 12 Dec 2025 21:20:10 +0700
Subject: [PATCH 13/16] feat: Enhance user management and upload functionality;
 update translations and API integration

---
 messages/en/admin/en_admin.json               |  3 +-
 messages/vi/admin/vi_admin.json               |  3 +-
 src/components/shared/csv/UploadCSV.tsx       | 80 +-----------------
 .../api/licenseAssignmentApi.ts               |  2 +-
 .../components/modal/UploadCSV.tsx            | 81 +------------------
 .../user/components/table/UserAction.tsx      |  7 +-
 .../user/components/table/UserTable.tsx       |  8 +-
 src/utils/index.ts                            | 21 ++---
 8 files changed, 28 insertions(+), 177 deletions(-)

diff --git a/messages/en/admin/en_admin.json b/messages/en/admin/en_admin.json
index a6c54547b..d05404935 100644
--- a/messages/en/admin/en_admin.json
+++ b/messages/en/admin/en_admin.json
@@ -86,6 +86,7 @@
       "updateButton": "Update"
     },
     "user": {
+      "userManagement": "User Management",
       "createTitle": "Create User",
       "editTitle": "Edit User",
       "email": "Email",
@@ -145,4 +146,4 @@
       "reviewMessage": "Course submission is under review."
     }
   }
-}
+}
\ No newline at end of file
diff --git a/messages/vi/admin/vi_admin.json b/messages/vi/admin/vi_admin.json
index ecc3f365b..c943fb631 100644
--- a/messages/vi/admin/vi_admin.json
+++ b/messages/vi/admin/vi_admin.json
@@ -87,6 +87,7 @@
       "updateButton": "Cập nhật"
     },
     "user": {
+      "userManagement": "Quản lý người dùng",
       "createTitle": "Tạo người dùng",
       "editTitle": "Chỉnh sửa người dùng",
       "email": "Email",
@@ -146,4 +147,4 @@
       "reviewMessage": "Khóa học đang đợi quản trị viên phê duyệt."
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/shared/csv/UploadCSV.tsx b/src/components/shared/csv/UploadCSV.tsx
index 508d73781..968bdcc4c 100644
--- a/src/components/shared/csv/UploadCSV.tsx
+++ b/src/components/shared/csv/UploadCSV.tsx
@@ -35,8 +35,7 @@ export default function UploadCSV({
   const tv = useTranslations('validation')
 
   const [isDragging, setIsDragging] = useState<boolean>(false)
-  const [uploadProgress, setUploadProgress] = useState<number>(0)
-  const [isUploading, setIsUploading] = useState<boolean>(false)
+
   const [internalFile, setInternalFile] = useState<UploadedFile | null>(null)
   const fileInputRef = useRef<HTMLInputElement>(null)
 
@@ -90,20 +89,6 @@ export default function UploadCSV({
     } else {
       setInternalFile(newFile)
     }
-
-    setIsUploading(true)
-    setUploadProgress(0)
-
-    const interval = setInterval(() => {
-      setUploadProgress((prev) => {
-        if (prev >= 100) {
-          clearInterval(interval)
-          setIsUploading(false)
-          return 100
-        }
-        return prev + 10
-      })
-    }, 200)
   }
 
   const handleRemoveFile = () => {
@@ -113,18 +98,11 @@ export default function UploadCSV({
       setInternalFile(null)
     }
 
-    setUploadProgress(0)
-    setIsUploading(false)
     if (fileInputRef.current) {
       fileInputRef.current.value = ''
     }
   }
 
-  const handleCancel = () => {
-    setIsUploading(false)
-    setUploadProgress(0)
-  }
-
   const formatFileSize = (bytes: number): string => {
     return `${(bytes / 1024).toFixed(0)} KB`
   }
@@ -176,7 +154,7 @@ dattse18@gmail.com,Dat,Tran,Student,StudentLic,STEM06,S006`
         className={`rounded-lg border-2 border-dashed p-8 text-center transition-all ${
           isDragging
             ? 'border-blue-500 bg-blue-50'
-            : uploadedFile && !isUploading
+            : uploadedFile
               ? 'border-green-500 bg-green-50'
               : 'border-gray-300 bg-gray-50'
         }`}
@@ -185,34 +163,7 @@ dattse18@gmail.com,Dat,Tran,Student,StudentLic,STEM06,S006`
         onDragLeave={handleDragLeave}
         onDrop={handleDrop}
       >
-        {isUploading ? (
-          <div className='flex flex-col items-center'>
-            <div className='relative mb-4 h-16 w-16'>
-              <svg className='h-16 w-16 -rotate-90 transform'>
-                <circle cx='32' cy='32' r='28' stroke='#e5e7eb' strokeWidth='4' fill='none' />
-                <circle
-                  cx='32'
-                  cy='32'
-                  r='28'
-                  stroke='#3b82f6'
-                  strokeWidth='4'
-                  fill='none'
-                  strokeDasharray={`${2 * Math.PI * 28}`}
-                  strokeDashoffset={`${2 * Math.PI * 28 * (1 - uploadProgress / 100)}`}
-                  strokeLinecap='round'
-                  className='transition-all duration-300'
-                />
-              </svg>
-              <div className='absolute inset-0 flex items-center justify-center'>
-                <span className='text-sm font-semibold text-blue-600'>{uploadProgress}%</span>
-              </div>
-            </div>
-            <p className='mb-3 text-sm text-gray-600'>{to('uploading')}</p>
-            <button onClick={handleCancel} className='text-sm text-blue-600 hover:text-blue-700'>
-              {tc('button.cancel')}
-            </button>
-          </div>
-        ) : uploadedFile ? (
+        {uploadedFile ? (
           <div className='flex flex-col items-center'>
             <div className='mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-blue-500'>
               <svg className='h-6 w-6 text-white' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
@@ -245,7 +196,7 @@ dattse18@gmail.com,Dat,Tran,Student,StudentLic,STEM06,S006`
         )}
       </div>
 
-      {uploadedFile && !isUploading && (
+      {uploadedFile && (
         <div className='mt-4 flex items-center justify-between rounded-lg border border-gray-200 bg-white p-3'>
           <div className='flex items-center gap-3'>
             <div className='flex h-8 w-8 items-center justify-center rounded bg-green-100'>
@@ -261,29 +212,6 @@ dattse18@gmail.com,Dat,Tran,Student,StudentLic,STEM06,S006`
           </button>
         </div>
       )}
-
-      {isUploading && uploadedFile && (
-        <div className='mt-4 rounded-lg border border-gray-200 bg-white p-3'>
-          <div className='mb-2 flex items-center justify-between'>
-            <div className='flex items-center gap-3'>
-              <div className='flex h-8 w-8 items-center justify-center rounded bg-green-100'>
-                <FileSpreadsheet className='h-5 w-5 text-green-600' />
-              </div>
-              <div>
-                <p className='text-sm font-medium text-gray-900'>{uploadedFile.name}</p>
-                {uploadedFile.size && <p className='text-xs text-gray-500'>{formatFileSize(uploadedFile.size)}</p>}
-              </div>
-            </div>
-            <span className='text-xs text-gray-500'>{uploadProgress}%</span>
-          </div>
-          <div className='h-1.5 w-full rounded-full bg-gray-200'>
-            <div
-              className='h-1.5 rounded-full bg-blue-600 transition-all duration-300'
-              style={{ width: `${uploadProgress}%` }}
-            />
-          </div>
-        </div>
-      )}
     </div>
   )
 }
diff --git a/src/features/license-assignment/api/licenseAssignmentApi.ts b/src/features/license-assignment/api/licenseAssignmentApi.ts
index 598fad60d..2dd385fe6 100644
--- a/src/features/license-assignment/api/licenseAssignmentApi.ts
+++ b/src/features/license-assignment/api/licenseAssignmentApi.ts
@@ -8,7 +8,7 @@ import { createCrudApi } from '@/libs/redux/baseApi'
 
 export const licenseAssignmentApi = createCrudApi<LicenseAssignment, LicenseAssignmentSliceParams>({
   reducerPath: 'licenseAssignmentApi',
-  tagTypes: ['LicenseAssignment'],
+  tagTypes: ['LicenseAssignment', 'Subscription'],
   baseUrl: '/license-assignments'
 }).injectEndpoints({
   endpoints: (builder) => ({
diff --git a/src/features/license-assignment/components/modal/UploadCSV.tsx b/src/features/license-assignment/components/modal/UploadCSV.tsx
index 10feff719..ca1700d8a 100644
--- a/src/features/license-assignment/components/modal/UploadCSV.tsx
+++ b/src/features/license-assignment/components/modal/UploadCSV.tsx
@@ -21,8 +21,6 @@ export default function UploadCSV({ onFileChange, uploadedFile: externalFile, on
   const tv = useTranslations('validation')
 
   const [isDragging, setIsDragging] = useState<boolean>(false)
-  const [uploadProgress, setUploadProgress] = useState<number>(0)
-  const [isUploading, setIsUploading] = useState<boolean>(false)
   const [internalFile, setInternalFile] = useState<UploadedFile | null>(null)
   const fileInputRef = useRef<HTMLInputElement>(null)
 
@@ -77,21 +75,6 @@ export default function UploadCSV({ onFileChange, uploadedFile: externalFile, on
     } else {
       setInternalFile(newFile)
     }
-
-    setIsUploading(true)
-    setUploadProgress(0)
-
-    // Simulate upload progress
-    const interval = setInterval(() => {
-      setUploadProgress((prev) => {
-        if (prev >= 100) {
-          clearInterval(interval)
-          setIsUploading(false)
-          return 100
-        }
-        return prev + 10
-      })
-    }, 200)
   }
 
   const handleRemoveFile = () => {
@@ -101,18 +84,11 @@ export default function UploadCSV({ onFileChange, uploadedFile: externalFile, on
       setInternalFile(null)
     }
 
-    setUploadProgress(0)
-    setIsUploading(false)
     if (fileInputRef.current) {
       fileInputRef.current.value = ''
     }
   }
 
-  const handleCancel = () => {
-    setIsUploading(false)
-    setUploadProgress(0)
-  }
-
   const formatFileSize = (bytes: number): string => {
     return `${(bytes / 1024).toFixed(0)} KB`
   }
@@ -161,7 +137,7 @@ dattse18@gmail.com,Dat,Tran,Student,StudentLic,STEM06,S006`
         className={`rounded-lg border-2 border-dashed p-8 text-center transition-all ${
           isDragging
             ? 'border-blue-500 bg-blue-50'
-            : uploadedFile && !isUploading
+            : uploadedFile
               ? 'border-green-500 bg-green-50'
               : 'border-gray-300 bg-gray-50'
         }`}
@@ -170,34 +146,7 @@ dattse18@gmail.com,Dat,Tran,Student,StudentLic,STEM06,S006`
         onDragLeave={handleDragLeave}
         onDrop={handleDrop}
       >
-        {isUploading ? (
-          <div className='flex flex-col items-center'>
-            <div className='relative mb-4 h-16 w-16'>
-              <svg className='h-16 w-16 -rotate-90 transform'>
-                <circle cx='32' cy='32' r='28' stroke='#e5e7eb' strokeWidth='4' fill='none' />
-                <circle
-                  cx='32'
-                  cy='32'
-                  r='28'
-                  stroke='#3b82f6'
-                  strokeWidth='4'
-                  fill='none'
-                  strokeDasharray={`${2 * Math.PI * 28}`}
-                  strokeDashoffset={`${2 * Math.PI * 28 * (1 - uploadProgress / 100)}`}
-                  strokeLinecap='round'
-                  className='transition-all duration-300'
-                />
-              </svg>
-              <div className='absolute inset-0 flex items-center justify-center'>
-                <span className='text-sm font-semibold text-blue-600'>{uploadProgress}%</span>
-              </div>
-            </div>
-            <p className='mb-3 text-sm text-gray-600'>{to('uploading')}</p>
-            <button onClick={handleCancel} className='text-sm text-blue-600 hover:text-blue-700'>
-              {tc('button.cancel')}
-            </button>
-          </div>
-        ) : uploadedFile ? (
+        {uploadedFile ? (
           <div className='flex flex-col items-center'>
             <div className='mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-blue-500'>
               <svg className='h-6 w-6 text-white' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
@@ -231,7 +180,7 @@ dattse18@gmail.com,Dat,Tran,Student,StudentLic,STEM06,S006`
       </div>
 
       {/* Uploaded File Display */}
-      {uploadedFile && !isUploading && (
+      {uploadedFile && (
         <div className='mt-4 flex items-center justify-between rounded-lg border border-gray-200 bg-white p-3'>
           <div className='flex items-center gap-3'>
             <div className='flex h-8 w-8 items-center justify-center rounded bg-green-100'>
@@ -247,30 +196,6 @@ dattse18@gmail.com,Dat,Tran,Student,StudentLic,STEM06,S006`
           </button>
         </div>
       )}
-
-      {/* Progress Bar for URL Upload */}
-      {isUploading && uploadedFile && (
-        <div className='mt-4 rounded-lg border border-gray-200 bg-white p-3'>
-          <div className='mb-2 flex items-center justify-between'>
-            <div className='flex items-center gap-3'>
-              <div className='flex h-8 w-8 items-center justify-center rounded bg-green-100'>
-                <FileSpreadsheet className='h-5 w-5 text-green-600' />
-              </div>
-              <div>
-                <p className='text-sm font-medium text-gray-900'>{uploadedFile.name}</p>
-                {uploadedFile.size && <p className='text-xs text-gray-500'>{formatFileSize(uploadedFile.size)}</p>}
-              </div>
-            </div>
-            <span className='text-xs text-gray-500'>{uploadProgress}%</span>
-          </div>
-          <div className='h-1.5 w-full rounded-full bg-gray-200'>
-            <div
-              className='h-1.5 rounded-full bg-blue-600 transition-all duration-300'
-              style={{ width: `${uploadProgress}%` }}
-            />
-          </div>
-        </div>
-      )}
     </div>
   )
 }
diff --git a/src/features/user/components/table/UserAction.tsx b/src/features/user/components/table/UserAction.tsx
index fb4f36094..d98645efa 100644
--- a/src/features/user/components/table/UserAction.tsx
+++ b/src/features/user/components/table/UserAction.tsx
@@ -11,6 +11,7 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/shadcn/avatar'
 import Image from 'next/image'
 import { Badge } from '@/components/shadcn/badge'
 import { getStatusBadgeClass } from '@/utils/badgeColor'
+import { useStatusTranslation } from '@/utils/index'
 
 export function useGetUserAction(): ColumnDef<User>[] {
   const { openModal } = useModal()
@@ -18,6 +19,8 @@ export function useGetUserAction(): ColumnDef<User>[] {
   const t = useTranslations('tableHeader')
   const tt = useTranslations('toast')
   const tm = useTranslations('message')
+  const tc = useTranslations('common')
+  const statusTranslate = useStatusTranslation()
 
   const handleDelete = async (id: string, userName: string) => {
     try {
@@ -81,7 +84,7 @@ export function useGetUserAction(): ColumnDef<User>[] {
       header: t('userRole'),
       cell: ({ row }) => {
         const role = row.original.userRole
-        return <div>{role}</div>
+        return <div>{tc(`accountType.${role}`)}</div>
       }
     },
     {
@@ -90,7 +93,7 @@ export function useGetUserAction(): ColumnDef<User>[] {
       cell: ({ row }) => {
         const value = row.original.status.toString()
         const badgeValue = value.toLocaleUpperCase() as UserStatus
-        return <Badge className={`${getStatusBadgeClass(badgeValue)}`}>{value}</Badge>
+        return <Badge className={`${getStatusBadgeClass(badgeValue)}`}>{statusTranslate(value)}</Badge>
       }
     },
     createActionsColumnFromItems<User>([
diff --git a/src/features/user/components/table/UserTable.tsx b/src/features/user/components/table/UserTable.tsx
index 591ec352b..42e497396 100644
--- a/src/features/user/components/table/UserTable.tsx
+++ b/src/features/user/components/table/UserTable.tsx
@@ -18,7 +18,7 @@ import { UserRole } from '@/types/userRole'
 import { useStatusTranslation } from '@/utils/index'
 
 export default function UserTable() {
-  const t = useTranslations('Admin.placeholder')
+  const t = useTranslations('Admin')
   const tCommon = useTranslations('common')
   const statusTranslate = useStatusTranslation()
   const { openModal } = useModal()
@@ -71,11 +71,11 @@ export default function UserTable() {
 
   return (
     <div className='px-6'>
-      <h1 className='text-2xl text-gray-800'>User Management</h1>
-      <div className='flex justify-between'>
+      <h1 className='text-2xl text-gray-800'>{t('user.userManagement')}</h1>
+      <div className='flex flex-wrap items-center justify-between gap-4'>
         <div className='flex items-center justify-start gap-4 py-4'>
           <Input
-            placeholder={t('userSearch')}
+            placeholder={t('placeholder.userSearch')}
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
             className='w-[400px]'
diff --git a/src/utils/index.ts b/src/utils/index.ts
index ee75aa26e..a91198006 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -49,15 +49,18 @@ export interface FormatDateOptions {
   month?: 'numeric' | '2-digit' | 'short' | 'long'
   day?: 'numeric' | '2-digit'
 }
-export const formatDate = (date: string | Date, options: FormatDateOptions = {}) => {
+export const formatDate = (date?: string | Date | null, options: FormatDateOptions = {}) => {
+  if (!date) return 'N/A'
+
   const { locale, showTime = false, pattern, year = 'numeric', month = 'short', day = 'numeric' } = options
 
   const d = typeof date === 'string' ? new Date(date) : date
 
-  if (isNaN(d.getTime())) {
+  if (!(d instanceof Date) || isNaN(d.getTime())) {
     return 'N/A'
   }
-  // --- 1. Nếu có pattern → custom formatting ---
+
+  // custom pattern
   if (pattern) {
     const dd = String(d.getDate()).padStart(2, '0')
     const MM = String(d.getMonth() + 1).padStart(2, '0')
@@ -73,18 +76,8 @@ export const formatDate = (date: string | Date, options: FormatDateOptions = {})
     }
   }
 
-  return date.toLocaleString(locale === 'vi' ? 'vi-VN' : 'en-US', {
-    year,
-    month,
-    day,
-    ...(showTime && {
-      hour: '2-digit',
-      minute: '2-digit',
-      second: '2-digit'
-    })
-  })
+  return d.toLocaleDateString(locale, { year, month, day })
 }
-
 export function formatDateV2(date: Date | undefined) {
   if (!date) {
     return ''

From 5ff9479fe6a21f68d679f31396bd7b89c6b82dae Mon Sep 17 00:00:00 2001
From: ttd11204 <datkk112004@gmail.com>
Date: Fri, 12 Dec 2025 22:29:37 +0700
Subject: [PATCH 14/16] feat: Add subscription selection and related fields in
 CreateClassroom; update translations and curriculum list layout

---
 messages/en/classroom/en_classroom.json       |  10 +-
 messages/vi/classroom/vi_classroom.json       |  10 +-
 .../components/upsert/CreateClassroom.tsx     | 124 +++++++++++++++++-
 .../list/OrganizationCurriculumList.tsx       |   2 +-
 .../subscription/types/subscription.type.ts   |   1 +
 5 files changed, 135 insertions(+), 12 deletions(-)

diff --git a/messages/en/classroom/en_classroom.json b/messages/en/classroom/en_classroom.json
index 6f69e1821..5f67450bc 100644
--- a/messages/en/classroom/en_classroom.json
+++ b/messages/en/classroom/en_classroom.json
@@ -86,7 +86,13 @@
       "weeks": "Weeks",
       "custom": "Custom",
       "groupList": "Group List",
-      "grade": "Grade"
+      "grade": "Grade",
+      "selectSubscription": "Select Subscription",
+      "annual": "Annual",
+      "semiAnnual": "Semi-Annual",
+      "students": "Students",
+      "teachers": "Teachers",
+      "curricula": "Curricula"
     },
     "studentClassroom": {
       "list": {
@@ -112,4 +118,4 @@
       "grade": "Grade"
     }
   }
-}
+}
\ No newline at end of file
diff --git a/messages/vi/classroom/vi_classroom.json b/messages/vi/classroom/vi_classroom.json
index a3f4ba646..fcfbd7853 100644
--- a/messages/vi/classroom/vi_classroom.json
+++ b/messages/vi/classroom/vi_classroom.json
@@ -85,7 +85,13 @@
       "description": "Mô tả",
       "descriptionPlaceholder": "Mô tả ngắn gọn về lớp học này...",
       "groupList": "Danh sách nhóm",
-      "grade": "Khối"
+      "grade": "Khối",
+      "selectSubscription": "Chọn gói đăng ký",
+      "annual": "Hàng năm",
+      "semiAnnual": "Nửa năm",
+      "students": "Học sinh",
+      "teachers": "Giáo viên",
+      "curricula": "Chương trình học"
     },
     "studentClassroom": {
       "list": {
@@ -111,4 +117,4 @@
       "grade": "Khối"
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/features/classroom/components/upsert/CreateClassroom.tsx b/src/features/classroom/components/upsert/CreateClassroom.tsx
index 051c728b0..293b39e3f 100644
--- a/src/features/classroom/components/upsert/CreateClassroom.tsx
+++ b/src/features/classroom/components/upsert/CreateClassroom.tsx
@@ -15,18 +15,23 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { Calendar } from '@/components/shadcn/calendar'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/shadcn/popover'
 import { Button } from '@/components/shadcn/button'
-import { CalendarIcon } from 'lucide-react'
+import { BookOpen, CalendarIcon, Check, GraduationCap, Users } from 'lucide-react'
 import { format } from 'date-fns'
 import { cn } from '@/utils/shadcn/utils'
 import BackButton from '@/components/shared/button/BackButton'
 import GroupTableWithTeacher from '@/features/group/components/list/GroupTableWithTeacher'
 import { Grade } from '@/features/classroom/types/classroom.type'
+import { RadioGroup, RadioGroupItem } from '@/components/shadcn/radio-group'
+import { useSearchSubscriptionQuery } from '@/features/subscription/api/subscriptionApi'
+import { Card, CardContent } from '@/components/shadcn/card'
+import { Badge } from '@/components/shadcn/badge'
+import { formatDate, formatPrice, useStatusTranslation } from '@/utils/index'
+import { getStatusBadgeClass } from '@/utils/badgeColor'
 
 type ClassroomFormData = {
   grade: string
   description?: string
   courseId: number
-  organizationSubscriptionOrderId: number
   durationWeeks: string
   startDate: string
   endDate: string
@@ -42,7 +47,6 @@ const defaultClassroomFormData: ClassroomFormData = {
   grade: '',
   description: '',
   courseId: 1,
-  organizationSubscriptionOrderId: 1,
   durationWeeks: '8',
   startDate: new Date().toISOString(),
   endDate: new Date(new Date().setDate(new Date().getDate() + 56)).toISOString(),
@@ -52,10 +56,10 @@ const defaultClassroomFormData: ClassroomFormData = {
 export default function CreateClassroom() {
   const tc = useTranslations('common')
   const tt = useTranslations('toast')
+  const statusTranslate = useStatusTranslation()
   const tClassroom = useTranslations('classroom.create')
 
   const { closeModal } = useModal()
-  const dispatch = useAppDispatch()
   const router = useRouter()
   const locale = useLocale()
 
@@ -68,8 +72,7 @@ export default function CreateClassroom() {
     }[]
   >([])
 
-  const [minDate, setMinDate] = useState<Date | undefined>(undefined)
-  const [maxDate, setMaxDate] = useState<Date | undefined>(undefined)
+  const { selectedOrganizationId } = useAppSelector((state) => state.selectedOrganization)
 
   // Form states
   const [grade, setGrade] = useState('')
@@ -77,6 +80,7 @@ export default function CreateClassroom() {
   const [durationWeeks, setDurationWeeks] = useState('8')
   const [startDate, setStartDateState] = useState<Date | undefined>(new Date())
   const [endDate, setEndDate] = useState<Date | undefined>(new Date(new Date().setDate(new Date().getDate() + 56)))
+  const [selectedSubscriptionId, setSelectedSubscriptionId] = useState<number | null>(null)
 
   const GRADE_OPTIONS = Object.values(Grade)
     .filter((v) => typeof v === 'number')
@@ -95,6 +99,11 @@ export default function CreateClassroom() {
 
   const isCustomDuration = durationWeeks === 'custom'
 
+  const { data: subscriptions } = useSearchSubscriptionQuery({
+    pageNumber: 1,
+    pageSize: 10,
+    organizationId: selectedOrganizationId!
+  })
   const [createClassroom, { isLoading: isCreating }] = useCreateClassroomMutation()
 
   const form = useAppForm({
@@ -103,6 +112,7 @@ export default function CreateClassroom() {
       const payload = {
         ...value,
         courseId: Number(value.courseId),
+        organizationSubscriptionOrderId: selectedSubscriptionId!,
         studentGroups: selectedGroups
       }
 
@@ -159,6 +169,19 @@ export default function CreateClassroom() {
         </div>
       </div>
 
+      <div className='mx-auto my-4 max-w-6xl'>
+        <div className='rounded-lg border border-blue-100 bg-blue-50/60 p-5 text-center'>
+          <h3 className='mb-2 text-base font-semibold text-blue-700'>Hướng dẫn tạo lớp học</h3>
+
+          <div className='mx-auto max-w-3xl space-y-1 text-center text-sm text-gray-600'>
+            Khóa học có thể thuộc nhiều gói đăng ký đang hoạt động. Vui lòng chọn một gói đăng ký trước khi tạo lớp học.
+            Gói đăng ký được chọn sẽ quyết định số lượng học sinh, giáo viên và quyền truy cập nội dung học tập. Sau khi
+            chọn gói, hãy chọn nhóm học sinh, gán giáo viên và thiết lập thời gian lớp học. Nhấn Create để hoàn tất việc
+            tạo lớp học.
+          </div>
+        </div>
+      </div>
+
       {/* Form Content */}
 
       <form
@@ -169,9 +192,96 @@ export default function CreateClassroom() {
         className='flex-1 overflow-y-auto px-6 py-6'
       >
         <div className='mx-auto max-w-6xl'>
+          <div className='mb-4 space-y-4'>
+            <Label className='text-base font-semibold'>{tClassroom('selectSubscription')}</Label>
+
+            <div className='grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3'>
+              {subscriptions?.data.items.map((sub) => {
+                const isActive = sub.status === 'Active'
+                const isSelected = selectedSubscriptionId === sub.id
+
+                return (
+                  <Card
+                    key={sub.id}
+                    className={`relative cursor-pointer transition-all duration-300 ${
+                      isActive ? 'hover:border-blue-300 hover:shadow-md' : 'cursor-not-allowed opacity-60'
+                    } ${
+                      isSelected ? '-translate-y-3 border-blue-500 shadow-lg shadow-blue-200/50' : 'border-gray-200'
+                    }`}
+                    onClick={() => isActive && setSelectedSubscriptionId(sub.id)}
+                  >
+                    <CardContent className='space-y-4 p-5'>
+                      {/* Header */}
+                      <div className='flex items-start justify-between gap-2'>
+                        <h3 className='font-semibold text-gray-900'>{sub.planName}</h3>
+                        <Badge className={getStatusBadgeClass(sub.status)}>
+                          {statusTranslate(sub.status.toLowerCase())}
+                        </Badge>
+                      </div>
+
+                      {/* Price */}
+                      <div className='flex items-baseline gap-1'>
+                        <span className='text-2xl font-bold text-gray-900'>{formatPrice(sub.netAmount)}</span>
+                      </div>
+
+                      {/* Period */}
+                      <div className='flex items-center gap-2 text-sm text-gray-600'>
+                        <Badge variant='outline' className='font-normal'>
+                          {tClassroom(sub.planBillingCycle.toLowerCase())}
+                        </Badge>
+                        <span className='text-xs'>
+                          {formatDate(sub.startDate, { locale })} - {formatDate(sub.endDate, { locale })}
+                        </span>
+                      </div>
+
+                      {/* Divider */}
+                      <div className='border-t border-gray-100' />
+
+                      {/* Stats */}
+                      <div className='space-y-2.5'>
+                        <div className='flex items-center justify-between text-sm'>
+                          <div className='flex items-center gap-2 text-gray-600'>
+                            <GraduationCap className='h-4 w-4' />
+                            <span>{tClassroom('students')}</span>
+                          </div>
+                          <span className='font-medium text-gray-900'>
+                            {sub.currentStudentSeats}/{sub.maxStudentSeats}
+                          </span>
+                        </div>
+
+                        <div className='flex items-center justify-between text-sm'>
+                          <div className='flex items-center gap-2 text-gray-600'>
+                            <Users className='h-4 w-4' />
+                            <span>{tClassroom('teachers')}</span>
+                          </div>
+                          <span className='font-medium text-gray-900'>
+                            {sub.currentTeacherSeats}/{sub.maxTeacherSeats}
+                          </span>
+                        </div>
+
+                        <div className='flex items-center justify-between text-sm'>
+                          <div className='flex items-center gap-2 text-gray-600'>
+                            <BookOpen className='h-4 w-4' />
+                            <span>{tClassroom('curricula')}</span>
+                          </div>
+                          <span className='font-medium text-gray-900'>{sub.curriculumCount}</span>
+                        </div>
+                      </div>
+
+                      {/* Code */}
+                      <div className='border-t border-gray-100 pt-2'>
+                        <p className='font-mono text-xs text-gray-400'>{sub.code}</p>
+                      </div>
+                    </CardContent>
+                  </Card>
+                )
+              })}
+            </div>
+          </div>
+
           <div className='mb-4 space-y-2'>
             <div className='flex justify-between'>
-              <h2 className='text-lg font-semibold text-gray-900'>{tClassroom('groupList')}</h2>
+              {/* <h2 className='text-lg font-semibold text-gray-900'>{tClassroom('groupList')}</h2> */}
 
               <div className='flex items-center space-x-4'>
                 <Label htmlFor='grade'>{tClassroom('grade')}</Label>
diff --git a/src/features/resource/curriculum/components/list/OrganizationCurriculumList.tsx b/src/features/resource/curriculum/components/list/OrganizationCurriculumList.tsx
index 2b0e46674..48cc47049 100644
--- a/src/features/resource/curriculum/components/list/OrganizationCurriculumList.tsx
+++ b/src/features/resource/curriculum/components/list/OrganizationCurriculumList.tsx
@@ -102,7 +102,7 @@ export default function OrganizationCurriculumList() {
         </div>
       ) : (
         /* Curriculum Grid */
-        <div className='grid grid-cols-1 gap-10 md:grid-cols-2 xl:grid-cols-3'>
+        <div className='grid grid-cols-1 gap-10 md:grid-cols-2 xl:grid-cols-4'>
           {curriculums.map((curriculum) => {
             const displayGroup = getDominantSubscriptionGroup(curriculum.subscriptionGroups)
 
diff --git a/src/features/subscription/types/subscription.type.ts b/src/features/subscription/types/subscription.type.ts
index b381e228f..c59e6f856 100644
--- a/src/features/subscription/types/subscription.type.ts
+++ b/src/features/subscription/types/subscription.type.ts
@@ -31,6 +31,7 @@ export type OrganizationSubscription = {
   curriculums: Partial<Curriculum>[]
   contract: Partial<Contract>
   planBillingCycle: BillingCycle
+  code: string
 }
 
 export type PlanBillingCycle = {

From 37811f9d7361513eec2c98e9533f4b8e628437bf Mon Sep 17 00:00:00 2001
From: halinhtvn3a <77691576+halinhtvn3a@users.noreply.github.com>
Date: Fri, 12 Dec 2025 23:36:46 +0700
Subject: [PATCH 15/16] Enhance JWT callback for robust user info extraction

Refactored the JWT callback in authOptions to decode user information directly from the access token, with improved role mapping and fallback logic. User fields such as name, email, username, and organizations are now extracted more reliably, supporting multiple claim sources and handling both stringified and object organization data. Also updated session callback to use the new token fields and provide sensible defaults.
---
 .../assembly/hooks/useAssemblyOptimized.ts    |   1 -
 src/libs/auth/authOptions.ts                  | 116 +++++++++++++-----
 2 files changed, 87 insertions(+), 30 deletions(-)

diff --git a/src/features/assembly/hooks/useAssemblyOptimized.ts b/src/features/assembly/hooks/useAssemblyOptimized.ts
index 05a78fc6a..c255d1068 100644
--- a/src/features/assembly/hooks/useAssemblyOptimized.ts
+++ b/src/features/assembly/hooks/useAssemblyOptimized.ts
@@ -378,7 +378,6 @@ export function useAssembly(options: UseAssemblyOptions = {}): UseAssemblyReturn
 
       let assemblyData: Assembly | null = null
 
-      // ✅ Ưu tiên dùng inline data (từ API)
       if (inlineData) {
         assemblyData = inlineData
       }
diff --git a/src/libs/auth/authOptions.ts b/src/libs/auth/authOptions.ts
index 45dd84980..49660f018 100644
--- a/src/libs/auth/authOptions.ts
+++ b/src/libs/auth/authOptions.ts
@@ -69,37 +69,93 @@ export const authOptions: NextAuthOptions = {
     },
     async jwt({ token, account, profile }) {
       if (account?.access_token) {
-        // console.log('JWT callback', { profile })
         token.accessToken = account.access_token
         token.idToken = account.id_token
-        token.role = profile?.role || UserRole.GUEST
+        
+        
         try {
-          token.organizations = JSON.parse((profile as any).organizations || '[]')
-          console.log('Parsed organizations:', token.organizations)
-        } catch (err) {
-          console.error('Failed to parse organizations JSON:', err)
-          token.organizations = undefined
-        }
-
-        //   try {
-        //     const decoded: any = jwtDecode(account.access_token)
-        //     token.role = decoded['http://schemas.microsoft.com/ws/2008/06/identity/claims/role'] ?? 'Guest'
-        //     token.preferred_username = decoded['preferred_username'] ?? 'unknown'
-        //     token.sub = decoded['sub'] ?? 'unknown'
+          const decoded: any = jwtDecode(account.access_token)
+          const accessTokenRole = 
+            decoded['http://schemas.microsoft.com/ws/2008/06/identity/claims/role'] ||
+            decoded['platform_role'] ||
+            decoded['role'] ||
+            UserRole.GUEST
+          
+          let mappedRole: UserRole = UserRole.GUEST
+          if (accessTokenRole === 'Admin' || accessTokenRole === 'admin') {
+            mappedRole = UserRole.ADMIN
+          } else if (accessTokenRole === 'Staff' || accessTokenRole === 'staff') {
+            mappedRole = UserRole.STAFF
+          } else if (accessTokenRole === 'Member' || accessTokenRole === 'member') {
+            mappedRole = UserRole.MEMBER
+          }
+          
+          token.role = mappedRole
+          
+         token.name = decoded['name'] || 
+                      decoded['http://schemas.microsoft.com/ws/2008/06/identity/claims/name'] ||
+                      token.name ||
+                      'Unnamed'
+          
+          token.email = decoded['email'] || 
+                       decoded['http://schemas.microsoft.com/ws/2008/06/identity/claims/emailaddress'] ||
+                       token.email ||
+                       'no-email@example.com'
+          
+          token.preferred_username = decoded['preferred_username'] || 
+                                     decoded['http://schemas.microsoft.com/ws/2008/06/identity/claims/name'] ||
+                                     decoded['name'] ||
+                                     token.preferred_username ||
+                                     'unknown'
+          
+          token.username = decoded['preferred_username'] ||
+                          decoded['http://schemas.microsoft.com/ws/2008/06/identity/claims/name'] ||
+                          decoded['name'] ||
+                          token.username ||
+                          'unknown'
+          
+          token.sub = decoded['sub'] ?? token.sub ?? 'unknown'
+        
 
-        //     // Optional: parse organizations if present in the token
-        //     const rawOrganizations = decoded['organizations']
-        //     if (rawOrganizations) {
-        //       try {
-        //         token.organizations = JSON.parse(rawOrganizations) // array of { id, subscriptions }
-        //       } catch (err) {
-        //         console.error('Failed to parse organizations JSON:', err)
-        //         token.organizations = []
-        //       }
-        //     }
-        //   } catch (error) {
-        //     console.error('Failed to decode access token:', error)
-        //   }
+          const rawOrganizations = decoded['organizations']
+          if (rawOrganizations) {
+            try {
+              const parsedOrgs = typeof rawOrganizations === 'string' 
+                ? JSON.parse(rawOrganizations) 
+                : rawOrganizations
+              
+              if (parsedOrgs && typeof parsedOrgs === 'object') {
+                token.organizations = parsedOrgs
+             
+              } else {
+                token.organizations = undefined
+              }
+            } catch (err) {
+              token.organizations = undefined
+            }
+          } else {
+            try {
+              const profileOrgs = (profile as any).organizations
+              if (profileOrgs) {
+                const parsed = typeof profileOrgs === 'string' ? JSON.parse(profileOrgs) : profileOrgs
+                if (parsed && typeof parsed === 'object') {
+                  token.organizations = parsed
+        
+                } else {
+                  token.organizations = undefined
+                }
+              } else {
+                token.organizations = undefined
+              }
+            } catch (err) {
+              token.organizations = undefined
+            }
+          }
+        } catch (error) {
+          const oidcRole = (profile as OIDCProfile)?.['http://schemas.microsoft.com/ws/2008/06/identity/claims/role']
+          token.role = (profile as any)?.role || oidcRole || UserRole.GUEST
+          console.log('⚠️ [AUTH DEBUG] Using fallback role from profile:', token.role)
+        }
       }
 
       return token
@@ -108,10 +164,12 @@ export const authOptions: NextAuthOptions = {
       if (token) {
         session.accessToken = token.accessToken!
         session.user.userRole = token.role!
-        session.user.userName = token.username!
+        session.user.userName = (token.username || token.preferred_username || 'unknown') as string
         session.user.userId = token.sub!
         session.exp = token.exp!
-        session.user.email = token.email!
+        
+       session.user.name = (token.name || session.user.name || 'Unnamed') as string
+        session.user.email = (token.email || session.user.email || 'no-email@example.com') as string
 
         session.user.organizations = token.organizations
         // console.log('Session callback', JSON.stringify(session, null, 2))

From eb6c11033daf98065b8080c0955cbfcc6af1c908 Mon Sep 17 00:00:00 2001
From: ttd11204 <datkk112004@gmail.com>
Date: Sat, 13 Dec 2025 11:55:44 +0700
Subject: [PATCH 16/16] fix: Refactor variable declarations for clarity in
 OrganizationSubscriptionDetail component

---
 .../components/detail/OrganizationSubscriptionDetail.tsx      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/features/subscription/components/detail/OrganizationSubscriptionDetail.tsx b/src/features/subscription/components/detail/OrganizationSubscriptionDetail.tsx
index 4c4f7b20a..e9594c830 100644
--- a/src/features/subscription/components/detail/OrganizationSubscriptionDetail.tsx
+++ b/src/features/subscription/components/detail/OrganizationSubscriptionDetail.tsx
@@ -36,8 +36,8 @@ export default function OrganizationSubscriptionDetail() {
     if (isNaN(end.getTime())) return 0
     if (end <= now) return 0
 
-    let yearsDiff = end.getFullYear() - now.getFullYear()
-    let monthsDiff = end.getMonth() - now.getMonth()
+    const yearsDiff = end.getFullYear() - now.getFullYear()
+    const monthsDiff = end.getMonth() - now.getMonth()
 
     let totalMonths = yearsDiff * 12 + monthsDiff