From b2ea58b19e4fa8d243e635b89e7273cb357c86e2 Mon Sep 17 00:00:00 2001
From: karimaldeen <mhmadkarimaldeen@gmail.com>
Date: Mon, 9 Sep 2024 16:23:12 +0300
Subject: [PATCH] FIX PAGE

---
 package.json                                 |   4 +
 pnpm-lock.yaml                               |  72 +++++++
 src/Pages/Admin/Unit/DrapableTable.tsx       |  85 ++++++--
 src/Pages/Admin/Unit/Model/AddModel.tsx      |   4 +-
 src/Pages/Admin/Unit/Page.tsx                |   3 +-
 src/Pages/Admin/Unit/useTableColumns.tsx     |   3 +
 src/Pages/Admin/lesson/DrapableTable.tsx     | 194 +++++++++++++++++++
 src/Pages/Admin/lesson/Model/AddModel.tsx    |   1 +
 src/Pages/Admin/lesson/Model/EditModel.tsx   |   1 +
 src/Pages/Admin/lesson/Page.tsx              |   2 +-
 src/Pages/Admin/lesson/useTableColumns.tsx   |   2 +
 src/Pages/Admin/question/FilterForm.tsx      |  25 +++
 src/Pages/Admin/question/Page.tsx            |  17 +-
 src/Pages/Admin/question/useTableColumns.tsx |  12 +-
 src/Routes.tsx                               |  26 +--
 src/api/config.ts                            |   4 +-
 src/api/lesson.ts                            |   3 +
 src/api/unit.ts                              |   2 +
 18 files changed, 403 insertions(+), 57 deletions(-)
 create mode 100644 src/Pages/Admin/lesson/DrapableTable.tsx
 create mode 100644 src/Pages/Admin/question/FilterForm.tsx

diff --git a/package.json b/package.json
index 160eac3..40242d4 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,10 @@
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^5.3.7",
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/modifiers": "^7.0.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "antd": "^5.17.4",
     "axios": "^1.7.2",
     "bootstrap": "^5.3.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 98426af..ffcdba4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,18 @@ importers:
       '@ant-design/icons':
         specifier: ^5.3.7
         version: 5.3.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@dnd-kit/core':
+        specifier: ^6.1.0
+        version: 6.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@dnd-kit/modifiers':
+        specifier: ^7.0.0
+        version: 7.0.0(@dnd-kit/core@6.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
+      '@dnd-kit/sortable':
+        specifier: ^8.0.0
+        version: 8.0.0(@dnd-kit/core@6.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
+      '@dnd-kit/utilities':
+        specifier: ^3.2.2
+        version: 3.2.2(react@18.3.1)
       antd:
         specifier: ^5.17.4
         version: 5.17.4(date-fns@3.3.1)(luxon@3.4.4)(moment@2.30.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -865,6 +877,34 @@ packages:
     resolution: {integrity: sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==}
     engines: {node: '>=10.0.0'}
 
+  '@dnd-kit/accessibility@3.1.0':
+    resolution: {integrity: sha512-ea7IkhKvlJUv9iSHJOnxinBcoOI3ppGnnL+VDJ75O45Nss6HtZd8IdN8touXPDtASfeI2T2LImb8VOZcL47wjQ==}
+    peerDependencies:
+      react: '>=16.8.0'
+
+  '@dnd-kit/core@6.1.0':
+    resolution: {integrity: sha512-J3cQBClB4TVxwGo3KEjssGEXNJqGVWx17aRTZ1ob0FliR5IjYgTxl5YJbKTzA6IzrtelotH19v6y7uoIRUZPSg==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@dnd-kit/modifiers@7.0.0':
+    resolution: {integrity: sha512-BG/ETy3eBjFap7+zIti53f0PCLGDzNXyTmn6fSdrudORf+OH04MxrW4p5+mPu4mgMk9kM41iYONjc3DOUWTcfg==}
+    peerDependencies:
+      '@dnd-kit/core': ^6.1.0
+      react: '>=16.8.0'
+
+  '@dnd-kit/sortable@8.0.0':
+    resolution: {integrity: sha512-U3jk5ebVXe1Lr7c2wU7SBZjcWdQP+j7peHJfCspnA81enlu88Mgd7CC8Q+pub9ubP7eKVETzJW+IBAhsqbSu/g==}
+    peerDependencies:
+      '@dnd-kit/core': ^6.1.0
+      react: '>=16.8.0'
+
+  '@dnd-kit/utilities@3.2.2':
+    resolution: {integrity: sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==}
+    peerDependencies:
+      react: '>=16.8.0'
+
   '@emotion/hash@0.8.0':
     resolution: {integrity: sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==}
 
@@ -4731,6 +4771,38 @@ snapshots:
 
   '@discoveryjs/json-ext@0.5.7': {}
 
+  '@dnd-kit/accessibility@3.1.0(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+      tslib: 2.6.2
+
+  '@dnd-kit/core@6.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@dnd-kit/accessibility': 3.1.0(react@18.3.1)
+      '@dnd-kit/utilities': 3.2.2(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      tslib: 2.6.2
+
+  '@dnd-kit/modifiers@7.0.0(@dnd-kit/core@6.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@dnd-kit/core': 6.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@dnd-kit/utilities': 3.2.2(react@18.3.1)
+      react: 18.3.1
+      tslib: 2.6.2
+
+  '@dnd-kit/sortable@8.0.0(@dnd-kit/core@6.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@dnd-kit/core': 6.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@dnd-kit/utilities': 3.2.2(react@18.3.1)
+      react: 18.3.1
+      tslib: 2.6.2
+
+  '@dnd-kit/utilities@3.2.2(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+      tslib: 2.6.2
+
   '@emotion/hash@0.8.0': {}
 
   '@emotion/unitless@0.7.5': {}
diff --git a/src/Pages/Admin/Unit/DrapableTable.tsx b/src/Pages/Admin/Unit/DrapableTable.tsx
index b6514dd..9bc32d0 100644
--- a/src/Pages/Admin/Unit/DrapableTable.tsx
+++ b/src/Pages/Admin/Unit/DrapableTable.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useMemo } from "react";
+import React, { Suspense, useContext, useEffect, useMemo } from "react";
 import { HolderOutlined } from "@ant-design/icons";
 import type { DragEndEvent } from "@dnd-kit/core";
 import { DndContext } from "@dnd-kit/core";
@@ -12,10 +12,16 @@ import {
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { Button, Table } from "antd";
-import type { TableColumnsType } from "antd";
 import { useParams } from "react-router-dom";
-import { ParamsEnum } from "../../enums/params";
-import { useGetAllUnit } from "../../api/unit";
+import { ParamsEnum } from "../../../enums/params";
+import { useGetAllUnit, useUpdateUnitOrder } from "../../../api/unit";
+
+const NotFoundLottie = React.lazy(() => import("../../../Components/Lottie/NotFound/NotFoundLottie"));
+const LoadingLottie = React.lazy(() => import("../../../Components/Lottie/Loading/LoadingLottie" ));
+
+
+import { useTranslation } from "react-i18next";
+import { useColumns } from "./useTableColumns";
 
 interface DataType {
   id: string; // Unique identifier for each row
@@ -32,7 +38,7 @@ interface RowContextProps {
 
 const RowContext = React.createContext<RowContextProps>({});
 
-const DragHandle: React.FC = () => {
+export const DragHandleUnit: React.FC = () => {
   const { setActivatorNodeRef, listeners } = useContext(RowContext);
   return (
     <Button
@@ -46,12 +52,6 @@ const DragHandle: React.FC = () => {
   );
 };
 
-const columns: TableColumnsType<DataType> = [
-  { key: "sort", align: "center", width: 80, render: () => <DragHandle /> },
-  { title: "Name", dataIndex: "name" },
-  { title: "Age", dataIndex: "age" },
-  { title: "Address", dataIndex: "address" },
-];
 
 interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
   "data-row-key": string;
@@ -96,13 +96,10 @@ const DrapableTable: React.FC = () => {
     response?.data?.data?.map((item: any, index: number) => ({
       id: item.id, // Ensure this is a unique identifier
       order: index + 1, // Assign order based on index
-      name: item.name,
-      age: item.age,
-      address: item.address,
+      ...item
     })) ?? [];
 
   const [dataSource, setDataSource] = React.useState<DataType[]>(data);
-  console.log(dataSource, "dataSource");
 
   useEffect(() => {
     // Update dataSource when the fetched data changes
@@ -110,28 +107,51 @@ const DrapableTable: React.FC = () => {
     setDataSource(sortedData);
   }, [response?.data?.data]);
 
+    const {mutate:orderUnit} = useUpdateUnitOrder({},{
+      retry:false
+    })
   const onDragEnd = ({ active, over }: DragEndEvent) => {
     if (active.id !== over?.id) {
       setDataSource((prevState) => {
         const activeIndex = prevState.findIndex(
           (record) => record.id === active.id,
         );
+       
         const overIndex = prevState.findIndex(
+           //@ts-ignore
           (record) => record.id === over.id,
         );
 
         // Move the items in the array
         const newState = arrayMove(prevState, activeIndex, overIndex);
-
+          const orderedNewState = newState.map((item, index) => ({
+            ...item,
+            order: index + 1, // Update the order based on the new index
+          }));
         // Update the order based on the new positions
-        return newState.map((item, index) => ({
-          ...item,
-          order: index + 1, // Update the order based on the new index
-        }));
+        const orderedNewStateWithNewChape = orderedNewState?.map((item:any)=>{
+          return {
+            "unit_id":item?.id,
+            "order":item?.order
+          }
+        })
+        orderUnit({units: orderedNewStateWithNewChape, _method:"PUT"})
+        return orderedNewState
       });
+
+        
     }
   };
 
+  const getRowClassName = (record: any, index: number): string => {
+    return index % 2 === 0 ? "even-row" : "odd-row";
+  };
+  const isLoading = response?.isLoading;
+  const [t] = useTranslation()
+  const columns = useColumns();
+  const sortedDataSource = dataSource.sort((a, b) => a.order - b.order) ;
+  console.log(sortedDataSource,"sortedDataSource");
+  
   return (
     <DndContext modifiers={[restrictToVerticalAxis]} onDragEnd={onDragEnd}>
       <SortableContext
@@ -141,9 +161,32 @@ const DrapableTable: React.FC = () => {
         <Table
           rowKey="id"
           components={{ body: { row: Row } }}
+           //@ts-ignore
           columns={columns}
-          dataSource={dataSource.sort((a, b) => a.order - b.order)} // Sort by order for rendering
+          dataSource={sortedDataSource} 
           pagination={false}
+        rowClassName={(record, index) => getRowClassName(record, index)}
+      className="DataTable"
+      loading={{
+        spinning: isLoading,
+        indicator:<Suspense fallback={<></>}>
+          <LoadingLottie />
+        </Suspense> ,
+        size: "large",
+      }}
+      locale={{
+        emptyText: (
+          isLoading  ? 
+          <></>
+          :
+         
+          <Suspense fallback={<></>}>
+          <NotFoundLottie
+          
+          />
+        </Suspense> 
+        ),
+      }}
         />
       </SortableContext>
     </DndContext>
diff --git a/src/Pages/Admin/Unit/Model/AddModel.tsx b/src/Pages/Admin/Unit/Model/AddModel.tsx
index 9f3d805..74e7348 100644
--- a/src/Pages/Admin/Unit/Model/AddModel.tsx
+++ b/src/Pages/Admin/Unit/Model/AddModel.tsx
@@ -10,7 +10,7 @@ import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
 
 const AddModel: React.FC = () => {
   const { mutate, status } = useAddUnit();
-  const { curriculum_id } = useParams();
+  const { subject_id } = useParams();
   const { OldObjectToEdit } = useObjectToEdit();
 
   const handleSubmit = (values: any) => {
@@ -21,7 +21,7 @@ const AddModel: React.FC = () => {
 
     mutate({
       ...values,
-      curriculum_id: curriculum_id,
+      subject_id: subject_id,
       order: order,
     });
   };
diff --git a/src/Pages/Admin/Unit/Page.tsx b/src/Pages/Admin/Unit/Page.tsx
index 7ea4124..4cc2a18 100644
--- a/src/Pages/Admin/Unit/Page.tsx
+++ b/src/Pages/Admin/Unit/Page.tsx
@@ -7,7 +7,6 @@ import { useGetAllSubject } from "../../../api/subject";
 import useSetPageTitle from "../../../Hooks/useSetPageTitle";
 import { ModalEnum } from "../../../enums/Model";
 import { useDeleteUnit } from "../../../api/unit";
-import DrapableTable from "./DrapableTable";
 import { useGetAllGrade } from "../../../api/grade";
 import { useGetAllCurriculum } from "../../../api/curriculum";
 import PageHeader from "../../../Layout/Dashboard/PageHeader";
@@ -15,7 +14,7 @@ import FilterLayout from "../../../Layout/Dashboard/FilterLayout";
 import FilterForm from "./Model/FilterForm";
 import { canAddUnit } from "../../../utils/hasAbilityFn";
 
-const Table = lazy(() => import("./Table"));
+const Table = lazy(() => import("./DrapableTable"));
 const AddModalForm = lazy(() => import("./Model/AddModel"));
 const EditModalForm = lazy(() => import("./Model/EditModel"));
 const DeleteModalForm = lazy(
diff --git a/src/Pages/Admin/Unit/useTableColumns.tsx b/src/Pages/Admin/Unit/useTableColumns.tsx
index 120a30d..9b115bd 100644
--- a/src/Pages/Admin/Unit/useTableColumns.tsx
+++ b/src/Pages/Admin/Unit/useTableColumns.tsx
@@ -18,6 +18,7 @@ import {
 import ActionButtons from "../../../Components/Table/ActionButtons";
 import { Unit } from "../../../types/Unit";
 import { ConvertEnumToTranslate } from "../../../utils/ConvertEnumToTranslate";
+import { DragHandleUnit } from "./DrapableTable";
 
 export const useColumns = () => {
   const { handel_open_model } = useModalHandler();
@@ -41,6 +42,8 @@ export const useColumns = () => {
   const [t] = useTranslation();
 
   const columns: TableColumnsType<Unit> = [
+    { key: "sort", align: "center", width: 80, render: () => <DragHandleUnit /> },
+
     {
       title: t("columns.id"),
       dataIndex: "id",
diff --git a/src/Pages/Admin/lesson/DrapableTable.tsx b/src/Pages/Admin/lesson/DrapableTable.tsx
new file mode 100644
index 0000000..53e6cb8
--- /dev/null
+++ b/src/Pages/Admin/lesson/DrapableTable.tsx
@@ -0,0 +1,194 @@
+import React, { Suspense, useContext, useEffect, useMemo } from "react";
+import { HolderOutlined } from "@ant-design/icons";
+import type { DragEndEvent } from "@dnd-kit/core";
+import { DndContext } from "@dnd-kit/core";
+import type { SyntheticListenerMap } from "@dnd-kit/core/dist/hooks/utilities";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import {
+  arrayMove,
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Button, Table } from "antd";
+import { useParams } from "react-router-dom";
+import { ParamsEnum } from "../../../enums/params";
+import { useGetAllLesson, useUpdateLessonOrder } from "../../../api/lesson";
+
+
+const NotFoundLottie = React.lazy(() => import("../../../Components/Lottie/NotFound/NotFoundLottie"));
+const LoadingLottie = React.lazy(() => import("../../../Components/Lottie/Loading/LoadingLottie" ));
+
+
+import { useTranslation } from "react-i18next";
+import { useColumns } from "./useTableColumns";
+
+interface DataType {
+  id: string; // Unique identifier for each row
+  order: number;
+  name: string;
+  age: number;
+  address: string;
+}
+
+interface RowContextProps {
+  setActivatorNodeRef?: (element: HTMLElement | null) => void;
+  listeners?: SyntheticListenerMap;
+}
+
+const RowContext = React.createContext<RowContextProps>({});
+
+export const DragHandleLesson: React.FC = () => {
+  const { setActivatorNodeRef, listeners } = useContext(RowContext);
+  return (
+    <Button
+      type="text"
+      size="small"
+      icon={<HolderOutlined />}
+      style={{ cursor: "move" }}
+      ref={setActivatorNodeRef}
+      {...listeners}
+    />
+  );
+};
+
+
+interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+  "data-row-key": string;
+}
+
+const Row: React.FC<RowProps> = (props) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: props["data-row-key"] });
+
+  const style: React.CSSProperties = {
+    ...props.style,
+    transform: CSS.Translate.toString(transform),
+    transition,
+    ...(isDragging ? { position: "relative", zIndex: 9999 } : {}),
+  };
+
+  const contextValue = useMemo<RowContextProps>(
+    () => ({ setActivatorNodeRef, listeners }),
+    [setActivatorNodeRef, listeners],
+  );
+
+  return (
+    <RowContext.Provider value={contextValue}>
+      <tr {...props} ref={setNodeRef} style={style} {...attributes} />
+    </RowContext.Provider>
+  );
+};
+
+const DrapableTable: React.FC = () => {
+  const { subject_id } = useParams<ParamsEnum>();
+  const response = useGetAllLesson({ subject_id: subject_id, pagination: false });
+
+  // Assuming the response contains a unique id for each item
+  const data =
+    response?.data?.data?.map((item: any, index: number) => ({
+      id: item.id, // Ensure this is a unique identifier
+      order: index + 1, // Assign order based on index
+      ...item
+    })) ?? [];
+
+  const [dataSource, setDataSource] = React.useState<DataType[]>(data);
+
+  useEffect(() => {
+    // Update dataSource when the fetched data changes
+    const sortedData = data.sort((a: any, b: any) => a.order - b.order);
+    setDataSource(sortedData);
+  }, [response?.data?.data]);
+
+    const {mutate:orderLesson} = useUpdateLessonOrder()
+  const onDragEnd = ({ active, over }: DragEndEvent) => {
+    if (active.id !== over?.id) {
+      setDataSource((prevState) => {
+        const activeIndex = prevState.findIndex(
+          (record) => record.id === active.id,
+        );
+       
+        const overIndex = prevState.findIndex(
+           //@ts-ignore
+          (record) => record.id === over.id,
+        );
+
+        // Move the items in the array
+        const newState = arrayMove(prevState, activeIndex, overIndex);
+          const orderedNewState = newState.map((item, index) => ({
+            ...item,
+            order: index + 1, // Update the order based on the new index
+          }));
+        // Update the order based on the new positions
+        const orderedNewStateWithNewChape = orderedNewState?.map((item:any)=>{
+          return {
+            "lesson_id":item?.id,
+            "order":item?.order
+          }
+        })
+        orderLesson({lessons: orderedNewStateWithNewChape, _method:"PUT"})
+        return orderedNewState
+      });
+
+        
+    }
+  };
+
+  const getRowClassName = (record: any, index: number): string => {
+    return index % 2 === 0 ? "even-row" : "odd-row";
+  };
+  const [t] = useTranslation()
+  const columns = useColumns();
+  const sortedDataSource = dataSource.sort((a, b) => a.order - b.order) ;
+  console.log(sortedDataSource,"sortedDataSource");
+  const isLoading = response?.isLoading
+  return (
+    <DndContext modifiers={[restrictToVerticalAxis]} onDragEnd={onDragEnd}>
+      <SortableContext
+        items={dataSource.map((i) => i.id)}
+        strategy={verticalListSortingStrategy}
+      >
+        <Table
+          rowKey="id"
+          components={{ body: { row: Row } }}
+           //@ts-ignore
+          columns={columns}
+          dataSource={sortedDataSource} 
+          pagination={false}
+        rowClassName={(record, index) => getRowClassName(record, index)}
+      className="DataTable"
+      loading={{
+        spinning: isLoading,
+        indicator:<Suspense fallback={<></>}>
+          <LoadingLottie />
+        </Suspense> ,
+        size: "large",
+      }}
+      locale={{
+        emptyText: (
+          isLoading  ? 
+          <></>
+          :
+         
+          <Suspense fallback={<></>}>
+          <NotFoundLottie
+          
+          />
+        </Suspense> 
+        ),
+      }}
+        />
+      </SortableContext>
+    </DndContext>
+  );
+};
+
+export default DrapableTable;
diff --git a/src/Pages/Admin/lesson/Model/AddModel.tsx b/src/Pages/Admin/lesson/Model/AddModel.tsx
index 7660383..b11a5ef 100644
--- a/src/Pages/Admin/lesson/Model/AddModel.tsx
+++ b/src/Pages/Admin/lesson/Model/AddModel.tsx
@@ -42,6 +42,7 @@ const AddModel: React.FC = () => {
         handleSubmit={handleSubmit}
         getInitialValues={getInitialValues({})}
         getValidationSchema={getValidationSchema}
+        width="500px"
       >
         <ModelForm />
       </LayoutModel>
diff --git a/src/Pages/Admin/lesson/Model/EditModel.tsx b/src/Pages/Admin/lesson/Model/EditModel.tsx
index e4185d8..4eaf837 100644
--- a/src/Pages/Admin/lesson/Model/EditModel.tsx
+++ b/src/Pages/Admin/lesson/Model/EditModel.tsx
@@ -43,6 +43,7 @@ const ModalForm: React.FC = () => {
         getInitialValues={getInitialValues(objectToEdit)}
         getValidationSchema={getValidationSchema}
         isAddModal={false}
+         width="500px"
       >
         <ModelForm />
       </LayoutModel>
diff --git a/src/Pages/Admin/lesson/Page.tsx b/src/Pages/Admin/lesson/Page.tsx
index ac15cc6..7aea4a8 100644
--- a/src/Pages/Admin/lesson/Page.tsx
+++ b/src/Pages/Admin/lesson/Page.tsx
@@ -15,7 +15,7 @@ import FilterLayout from "../../../Layout/Dashboard/FilterLayout";
 import FilterForm from "./Model/FilterForm";
 import { canAddLesson } from "../../../utils/hasAbilityFn";
 
-const Table = lazy(() => import("./Table"));
+const Table = lazy(() => import("./DrapableTable"));
 const AddModalForm = lazy(() => import("./Model/AddModel"));
 const EditModalForm = lazy(() => import("./Model/EditModel"));
 const DeleteModelsForm = lazy(
diff --git a/src/Pages/Admin/lesson/useTableColumns.tsx b/src/Pages/Admin/lesson/useTableColumns.tsx
index 911dc91..a897d29 100644
--- a/src/Pages/Admin/lesson/useTableColumns.tsx
+++ b/src/Pages/Admin/lesson/useTableColumns.tsx
@@ -14,6 +14,7 @@ import {
   canShowLesson,
 } from "../../../utils/hasAbilityFn";
 import ActionButtons from "../../../Components/Table/ActionButtons";
+import { DragHandleLesson } from "./DrapableTable";
 
 export const useColumns = () => {
   const { handel_open_model } = useModalHandler();
@@ -37,6 +38,7 @@ export const useColumns = () => {
   const [t] = useTranslation();
 
   const columns: TableColumnsType<Lesson> = [
+    { key: "sort", align: "center", width: 80, render: () => <DragHandleLesson /> },
     {
       title: t("columns.id"),
       dataIndex: "id",
diff --git a/src/Pages/Admin/question/FilterForm.tsx b/src/Pages/Admin/question/FilterForm.tsx
new file mode 100644
index 0000000..b82cd4e
--- /dev/null
+++ b/src/Pages/Admin/question/FilterForm.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import ValidationField from '../../../Components/ValidationField/ValidationField'
+import { Col, Row } from "reactstrap";
+
+const FilterForm = () => {
+  return (
+    <div>
+      <Row>
+        <Col>
+        <ValidationField placeholder="name" label="name" name="name" />
+        <ValidationField placeholder="name" label="name" name="name" />
+        
+        </Col>
+        <Col>
+        <ValidationField placeholder="name" label="name" name="name" />
+        <ValidationField placeholder="name" label="name" name="name" />
+        
+        </Col>
+
+      </Row>
+    </div>
+  )
+}
+
+export default FilterForm
\ No newline at end of file
diff --git a/src/Pages/Admin/question/Page.tsx b/src/Pages/Admin/question/Page.tsx
index a686ca0..7c54136 100644
--- a/src/Pages/Admin/question/Page.tsx
+++ b/src/Pages/Admin/question/Page.tsx
@@ -12,6 +12,11 @@ import { ModalEnum } from "../../../enums/Model";
 import { useGetAllSubject } from "../../../api/subject";
 import { useGetAllGrade } from "../../../api/grade";
 import { useGetAllCurriculum } from "../../../api/curriculum";
+import PageHeader from "../../../Layout/Dashboard/PageHeader";
+import { ABILITIES_ENUM } from "../../../enums/abilities";
+import { canAddQuestion } from "../../../utils/hasAbilityFn";
+import FilterLayout from "../../../Layout/Dashboard/FilterLayout";
+import FilterForm from "./FilterForm";
 const Table = lazy(() => import("./Table"));
 
 const TableHeader = () => {
@@ -69,9 +74,15 @@ const TableHeader = () => {
   return (
     <div className="TableWithHeader">
       <Suspense fallback={<Spin />}>
-        <header>
-          <h6>{t("models.Question")}</h6>
-        </header>
+      <PageHeader 
+            pageTitle="question"
+            ModelAbility={ModalEnum?.QUESTION_ACCEPT} 
+            canAdd={canAddQuestion}
+            locationToNavigate={`${ABILITIES_ENUM?.QUESTION}/add`}
+            openModel={false}/>
+          <FilterLayout
+           sub_children={<FilterForm/>}
+           filterTitle="sidebar.question"/>
         <Table />
       </Suspense>
       <DeleteModels
diff --git a/src/Pages/Admin/question/useTableColumns.tsx b/src/Pages/Admin/question/useTableColumns.tsx
index 6a9934e..b655002 100644
--- a/src/Pages/Admin/question/useTableColumns.tsx
+++ b/src/Pages/Admin/question/useTableColumns.tsx
@@ -69,16 +69,10 @@ export const useColumns = () => {
     },
    
     {
-      title: canAddQuestion ? (
-        <button onClick={() => handelAdd()} className="add_button">
-          {t("practical.add")} {t("models.Question")} <FaPlus />
-        </button>
-      ) : (
-        ""
-      ),
+      title: '#',
       key: "actions",
-      align: "end",
-      width: "25vw",
+      align: "center",
+     
       render: (_text, record, index) => {
         return (
           <ActionButtons
diff --git a/src/Routes.tsx b/src/Routes.tsx
index f32fd56..6c533df 100644
--- a/src/Routes.tsx
+++ b/src/Routes.tsx
@@ -129,7 +129,7 @@ export const menuItems: TMenuItem[] = [
 
 export const CrudRoute: TCrudRoute[] = [
   {
-    header: "page_header.grade_details",
+    header: "page_header.Subject",
     element: <Subject />,
     path: `/${ABILITIES_ENUM?.GRADE}/:${ParamsEnum?.GRADE_ID}`,
     abilities: ABILITIES_ENUM?.SUBJECT,
@@ -138,34 +138,26 @@ export const CrudRoute: TCrudRoute[] = [
   },
 
   {
-    header: "page_header.subject_details",
-    element: <Curriculum />,
-    path: `/${ABILITIES_ENUM?.GRADE}/:${ParamsEnum?.GRADE_ID}/${ABILITIES_ENUM?.SUBJECT}/:${ParamsEnum?.SUBJECT_ID}`,
-    abilities: ABILITIES_ENUM?.CURRICULUM,
-    abilities_value: ABILITIES_VALUES_ENUM.INDEX,
-    prevPath: 2,
-  },
-  {
-    header: "page_header.curriculum_details",
+    header: "page_header.unit",
     element: <Unit />,
-    path: `/${ABILITIES_ENUM?.GRADE}/:${ParamsEnum?.GRADE_ID}/${ABILITIES_ENUM?.SUBJECT}/:${ParamsEnum?.SUBJECT_ID}/${ABILITIES_ENUM?.CURRICULUM}/:${ParamsEnum?.CURRICULUM_ID}`,
+    path: `/${ABILITIES_ENUM?.GRADE}/:${ParamsEnum?.GRADE_ID}/${ABILITIES_ENUM?.SUBJECT}/:${ParamsEnum?.SUBJECT_ID}`,
     abilities: ABILITIES_ENUM?.UNIT,
     abilities_value: ABILITIES_VALUES_ENUM.INDEX,
     prevPath: 2,
   },
   {
-    header: "page_header.unit_details",
+    header: "page_header.lesson",
     element: <Lesson />,
-    path: `/${ABILITIES_ENUM?.GRADE}/:${ParamsEnum?.GRADE_ID}/${ABILITIES_ENUM?.SUBJECT}/:${ParamsEnum?.SUBJECT_ID}/${ABILITIES_ENUM?.CURRICULUM}/:${ParamsEnum?.CURRICULUM_ID}/${ABILITIES_ENUM?.UNIT}/:${ParamsEnum?.UNIT_ID}`,
+    path: `/${ABILITIES_ENUM?.GRADE}/:${ParamsEnum?.GRADE_ID}/${ABILITIES_ENUM?.SUBJECT}/:${ParamsEnum?.SUBJECT_ID}/${ABILITIES_ENUM?.UNIT}/:${ParamsEnum?.UNIT_ID}`,
     abilities: ABILITIES_ENUM?.LESSON,
     abilities_value: ABILITIES_VALUES_ENUM.INDEX,
     prevPath: 2,
   },
 
   {
-    header: "page_header.lesson_details",
+    header: "page_header.question",
     element: <Question />,
-    path: `/${ABILITIES_ENUM?.GRADE}/:${ParamsEnum?.GRADE_ID}/${ABILITIES_ENUM?.SUBJECT}/:${ParamsEnum?.SUBJECT_ID}/${ABILITIES_ENUM?.CURRICULUM}/:${ParamsEnum?.CURRICULUM_ID}/${ABILITIES_ENUM?.UNIT}/:${ParamsEnum?.UNIT_ID}/${ABILITIES_ENUM?.LESSON}/:${ParamsEnum?.LESSON_ID}`,
+    path: `/${ABILITIES_ENUM?.GRADE}/:${ParamsEnum?.GRADE_ID}/${ABILITIES_ENUM?.SUBJECT}/:${ParamsEnum?.SUBJECT_ID}/${ABILITIES_ENUM?.UNIT}/:${ParamsEnum?.UNIT_ID}/${ABILITIES_ENUM?.LESSON}/:${ParamsEnum?.LESSON_ID}`,
     abilities: ABILITIES_ENUM?.QUESTION,
     abilities_value: ABILITIES_VALUES_ENUM.INDEX,
     prevPath: 2,
@@ -173,7 +165,7 @@ export const CrudRoute: TCrudRoute[] = [
   {
     header: "page_header.add_Question",
     element: <AddQuestionPage />,
-    path: `/${ABILITIES_ENUM?.GRADE}/:${ParamsEnum?.GRADE_ID}/${ABILITIES_ENUM?.SUBJECT}/:${ParamsEnum?.SUBJECT_ID}/${ABILITIES_ENUM?.CURRICULUM}/:${ParamsEnum?.CURRICULUM_ID}/${ABILITIES_ENUM?.UNIT}/:${ParamsEnum?.UNIT_ID}/${ABILITIES_ENUM?.LESSON}/:${ParamsEnum?.LESSON_ID}/${ABILITIES_ENUM?.QUESTION}/add`,
+    path: `/${ABILITIES_ENUM?.GRADE}/:${ParamsEnum?.GRADE_ID}/${ABILITIES_ENUM?.SUBJECT}/:${ParamsEnum?.SUBJECT_ID}/${ABILITIES_ENUM?.UNIT}/:${ParamsEnum?.UNIT_ID}/${ABILITIES_ENUM?.LESSON}/:${ParamsEnum?.LESSON_ID}/${ABILITIES_ENUM?.QUESTION}/add`,
     abilities: ABILITIES_ENUM?.QUESTION,
     abilities_value: ABILITIES_VALUES_ENUM.INDEX,
     prevPath: 2,
@@ -181,7 +173,7 @@ export const CrudRoute: TCrudRoute[] = [
   {
     header: "page_header.edit_Question",
     element: <EditQuestionPage />,
-    path: `/${ABILITIES_ENUM?.GRADE}/:${ParamsEnum?.GRADE_ID}/${ABILITIES_ENUM?.SUBJECT}/:${ParamsEnum?.SUBJECT_ID}/${ABILITIES_ENUM?.CURRICULUM}/:${ParamsEnum?.CURRICULUM_ID}/${ABILITIES_ENUM?.UNIT}/:${ParamsEnum?.UNIT_ID}/${ABILITIES_ENUM?.LESSON}/:${ParamsEnum?.LESSON_ID}/${ABILITIES_ENUM?.QUESTION}/:${ParamsEnum?.QUESTION_ID}`,
+    path: `/${ABILITIES_ENUM?.GRADE}/:${ParamsEnum?.GRADE_ID}/${ABILITIES_ENUM?.SUBJECT}/:${ParamsEnum?.SUBJECT_ID}/${ABILITIES_ENUM?.UNIT}/:${ParamsEnum?.UNIT_ID}/${ABILITIES_ENUM?.LESSON}/:${ParamsEnum?.LESSON_ID}/${ABILITIES_ENUM?.QUESTION}/:${ParamsEnum?.QUESTION_ID}`,
     abilities: ABILITIES_ENUM?.QUESTION,
     abilities_value: ABILITIES_VALUES_ENUM.INDEX,
     prevPath: 2,
diff --git a/src/api/config.ts b/src/api/config.ts
index 8297a6a..dca8b1f 100644
--- a/src/api/config.ts
+++ b/src/api/config.ts
@@ -1,5 +1,5 @@
 
-export const BaseURL = "https://exercise-automation.point-dev.net/api/";
+export const BaseURL = "https://nerd-back.point-dev.net/api/";
 
-export const ImageBaseURL = "https://exercise-automation.point-dev.net/";
+export const ImageBaseURL = "https://nerd-back.point-dev.net/api/";
 export const HEADER_KEY = "X-Custom-Query-Key";
diff --git a/src/api/lesson.ts b/src/api/lesson.ts
index 6c71140..6824833 100644
--- a/src/api/lesson.ts
+++ b/src/api/lesson.ts
@@ -8,6 +8,7 @@ const API = {
   ADD: "/lesson",
   DELETE: "/lesson",
   UPDATE: "/lesson",
+  ORDER: "/lesson/order",
 };
 
 const KEY = "lesson";
@@ -19,3 +20,5 @@ export const useUpdateLesson = (params?: any) =>
   useUpdateMutation(KEY, API.GET);
 export const useDeleteLesson = (params?: any) =>
   useDeleteMutation(KEY, API.DELETE);
+
+export const useUpdateLessonOrder = (params?: any) => useAddMutation("karim", API.ORDER);
diff --git a/src/api/unit.ts b/src/api/unit.ts
index 4d93b30..018ac63 100644
--- a/src/api/unit.ts
+++ b/src/api/unit.ts
@@ -8,6 +8,7 @@ const API = {
   ADD: "/unit",
   DELETE: "/unit",
   UPDATE: "/unit",
+  ORDER: "/unit/order",
 };
 
 const KEY = "unit";
@@ -15,5 +16,6 @@ export const useGetAllUnit = (params?: any, options?: any) =>
   useGetQuery(KEY, API.GET, params, options);
 export const useAddUnit = () => useAddMutation(KEY, API.ADD);
 export const useUpdateUnit = (params?: any) => useUpdateMutation(KEY, API.GET);
+export const useUpdateUnitOrder = (params?: any,option?: any,) => useAddMutation("karim", API.ORDER,true);
 export const useDeleteUnit = (params?: any) =>
   useDeleteMutation(KEY, API.DELETE);