add reorder to multi questions page

.env

@@ -1 +1,3 @@
 VITE_BASE_URL="https://nerd-back.point-dev.net/api/"
+# VITE_BASE_URL="http://zaker-back-dev.misbar.education/"
+

.env.production

@@ -0,0 +1 @@
+VITE_API_URL="https://nerd-back.point-dev.net/api/"

package.json

@@ -15,13 +15,13 @@
     "bootstrap": "^5.3.3",
     "dayjs": "^1.11.13",
     "formik": "^2.4.6",
+    "history": "^5.3.0",
     "i18next": "^23.15.1",
     "katex": "^0.16.11",
     "leaflet": "^1.9.4",
     "lottie-react": "^2.4.0",
     "mathjs": "^13.1.1",
     "mathml-to-latex": "^1.4.1",
-    "npm": "^10.8.3",
     "qrcode.react": "^4.1.0",
     "react": "^18.3.1",
     "react-beautiful-dnd": "^13.1.1",
@@ -44,7 +44,7 @@
     "start": "vite --port=3000",
     "build": "vite build",
     "test": "vite jest",
-    "preview": "vite preview",
+    "preview": "vite preview --outDir build --port 4173",
     "eject": "react-scripts eject",
     "format": "prettier --write ."
   },
@@ -80,8 +80,10 @@
     "@types/react-window": "^1.8.8",
     "@vitejs/plugin-legacy": "^5.4.2",
     "@vitejs/plugin-react": "^4.3.1",
+    "i": "^0.3.7",
     "jest": "^29.7.0",
     "jsdom": "^24.1.3",
+    "npm": "^11.6.1",
     "prettier": "^3.3.3",
     "rollup-plugin-visualizer": "^5.12.0",
     "ts-jest": "^29.2.5",
@@ -90,7 +92,9 @@
     "vite": "^5.4.8",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-env-compatible": "^2.0.1",
+    "vite-plugin-pwa": "^1.0.3",
     "webpack": "^5.95.0",
-    "webpack-cli": "^5.1.4"
+    "webpack-cli": "^5.1.4",
+    "workbox-window": "^7.3.0"
   }
 }

src/Pages/ReSeller/Sales/Model/FilterForm.tsx

@@ -6,6 +6,31 @@ const FilterForm = () => {
     <div>
       <Row>
         <Col>
+          <ValidationField
+            placeholder="student_name"
+            label="student_name"
+            name="student_name"
+            />
+          <ValidationField
+            placeholder="student_number"
+            label="student_number"
+            name="student_number"
+            type="number"
+            />
+          <ValidationField
+            placeholder="solid_price"
+            label="student_number"
+            name="solid_price"
+            type="number"
+            />
+        </Col>
+
+        <Col>
+          <ValidationField
+            placeholder="package"
+            label="package"
+            name="package_name"
+            />
           <ValidationField
             placeholder="activation_date"
             label="activation_date"
@@ -18,6 +43,7 @@ const FilterForm = () => {
             name="expiration_date"
             type="Date"
           />
+
         </Col>
       </Row>
     </div>

src/Pages/ReSeller/Sales/Table.tsx

@@ -10,14 +10,13 @@ const App: React.FC = () => {
   const { filterState }: any = useFilterState();
   const { Filter } = useFilterStateState();
   const name = Filter?.name;
-  const sort_by = Filter?.sort_by;
   const response = useGetAllSales({
     pagination: true,
     ...filterState,
     activation_date: formatDate(filterState?.activation_date),
     expiration_date: formatDate(filterState?.expiration_date),
     name,
-    sort_by,
+    [Filter?.reOrderKey]:Filter?.reOrderValue,
   });
 
   return <DataTable response={response} useColumns={useColumns} />;

src/Pages/ReSeller/Sales/useTableColumns.tsx

@@ -1,9 +1,23 @@
 import { TableColumnsType } from "antd";
 import { Sales } from "../../../types/Item";
 import { useTranslation } from "react-i18next";
+import { LuArrowUpDown } from "react-icons/lu";
+import { useState } from "react";
+import { useFilterStateState } from "../../../zustand/Filter";
 
 export const useColumns = () => {
   const [t] = useTranslation();
+  const [isDesc,setIsDesc] = useState(true)
+  const {Filter,setFilter} = useFilterStateState()
+
+  const handleClickReorder = (key:string) =>{
+    setFilter({
+      ...Filter,
+      reOrderKey:key,
+      reOrderValue:isDesc ? "desc":"asc"
+    })
+    setIsDesc(!isDesc)
+  }
 
   const columns: TableColumnsType<Sales> = [
     // {
@@ -13,7 +27,7 @@ export const useColumns = () => {
     //   align: "center",
     // },
     {
-      title: t("columns.student_full_name"),
+      title:<div> <LuArrowUpDown className="reorderIcon" onClick={() =>handleClickReorder("sortName")}/> {t("columns.student_full_name")}  </div>,
       key: "student_full_name",
       align: "center",
       render: (row) => {
@@ -37,7 +51,7 @@ export const useColumns = () => {
       align: "center",
     },
     {
-      title: t("columns.activation_date"),
+      title:<div> <LuArrowUpDown className="reorderIcon" onClick={() =>handleClickReorder("sortDate")}/> {t("columns.activation_date")}  </div> ,
       dataIndex: "activation_date",
       key: "activation_date",
       align: "center",

src/Styles/App/classNames.scss

@@ -355,3 +355,8 @@ button:disabled {
   margin: auto;
   padding-top: 20px;
 }
+
+.reorderIcon{
+  color: var(--primary);
+  margin-left: 5px;
+}

src/api/config.ts

@@ -1,5 +1,6 @@
-export const BaseURL = "https://nerd-back.point-dev.net/api/";
+// export const BaseURL = "https://nerd-back.point-dev.net/api/";
 // export const BaseURL = "http://192.168.43.153:8080/api/";
 // export const BaseURL = import.meta.env.VITE_BASE_URL ;
+export const BaseURL = "https://zaker-back-dev.misbar.education/api/"
 
 export const HEADER_KEY = "X-Custom-Query-Key";

src/translate/ar.json

@@ -467,6 +467,8 @@
     "payment_type": "نوع الدفع",
     "details": "التفاصيل",
     "student_name": "اسم الطالب",
+    "student_number":"رقم الطالب",
+    "solid_price":"المبلغ المدفوع",
     "receipt_number": "رقم الإيصال",
     "date": "التاريخ",
     "value": "القيمة",

tsconfig.json

@@ -14,7 +14,9 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "types": ["vite-plugin-pwa/client"]
+
   },
   "include": ["src"]
 }

vite.config.mjs

@@ -1,36 +1,31 @@
+// vite.config.mjs
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import { visualizer } from "rollup-plugin-visualizer";
 import env from "vite-plugin-env-compatible";
+import { VitePWA } from "vite-plugin-pwa";
 
-export default defineConfig(() => {
+export default defineConfig(() => ({
-  return {
+  build: {
-    build: {
+    outDir: "build",
-      outDir: "build",
+    rollupOptions: {
-      rollupOptions: {
+      output: {
-        output: {
+        entryFileNames: "[name].[hash].js",
-          entryFileNames: "[name].[hash].js",
+        chunkFileNames: "[name].[hash].js",
-          chunkFileNames: "[name].[hash].js",
+        assetFileNames: "[name].[hash][extname]",
-          assetFileNames: "[name].[hash][extname]",
-        },
       },
     },
-    envPrefix: "VITE_",
+  },
-    css: {
+  envPrefix: "VITE_",
-      preprocessorOptions: {
+  css: { preprocessorOptions: { scss: {} } },
-        scss: {
+  plugins: [
-          // Optionally add a global import here for variables or mixins
+    react(),
-          // additionalData: `@import "src/styles/variables.scss";`,
+    env(),
-        },
+    VitePWA({
-      },
+      injectRegister: "auto",      
-    },
+      registerType: "autoUpdate",  
-    plugins: [
+      workbox: { clientsClaim: true, skipWaiting: true },
-      react(),
+    }),
-      env(),
+    visualizer({ filename: "./bundle-analysis.html", open: true }),
-      visualizer({
+  ],
-        filename: "./bundle-analysis.html",
+}));
-        open: true,
-      }),
-    ],
-  };
-});