fix qr code bug (return null)

.env

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

.env.example

@@ -0,0 +1 @@
+REACT_APP_BASE_URL=

package-lock.json

@@ -12782,7 +12782,6 @@
       "version": "2.0.15",
       "resolved": "https://registry.npmjs.org/react-qr-code/-/react-qr-code-2.0.15.tgz",
       "integrity": "sha512-MkZcjEXqVKqXEIMVE0mbcGgDpkfSdd8zhuzXEl9QzYeNcw8Hq2oVIzDLWuZN2PQBwM5PWjc2S31K8Q1UbcFMfw==",
-      "license": "MIT",
       "dependencies": {
         "prop-types": "^15.8.1",
         "qr.js": "0.0.0"

src/App.tsx

@@ -33,7 +33,7 @@ const App = () => {
       />
 
       {renderRoutesRecursively(menuItems)}
-
+      
       {CrudRoute.map((route) => {
         const useAbility = hasAbility(route.abilities, route.abilities_value);
         if (!RoleByType(route)) {

src/Components/Routes/RenderRoutesRecursively.tsx

@@ -10,6 +10,7 @@ export const renderRoutesRecursively = (routes: TMenuItem[]) =>
     if (!useAbility) {
       return false;
     }
+    
     return (
       <React.Fragment key={route.path}>
         <Route path={route.path} element={RenderRouteElement(route)} />

src/Components/Ui/ReportTableIcon.tsx

@@ -0,0 +1,22 @@
+import { Tooltip } from 'antd'
+import React from 'react'
+import { useTranslation } from 'react-i18next';
+import { FaPaperclip } from 'react-icons/fa'
+
+interface ReportButtonsProps {
+    editTooltipTitle?: any;
+    onClick?: () => void;
+  }
+
+const ReportTableIcon = ({editTooltipTitle,onClick}:ReportButtonsProps) => {
+    const {t} = useTranslation();
+  return (
+    <Tooltip placement="top" title={t(editTooltipTitle)} color="#E0E0E0">
+        <span onClick={onClick}>
+        <FaPaperclip size={22} style={{ color: "#A098AE" }} />
+        </span>
+    </Tooltip>
+  )
+}
+
+export default ReportTableIcon

src/Layout/Dashboard/PageHeader.tsx

@@ -14,7 +14,8 @@ const PageHeader = ({
   pageTitle,
   openModel = true,
   locationToNavigate,
-  addModal = true
+  addModal = true,
+  modelButtonTitle = "add",
 }: {
   canAdd?: any;
   ModelAbility?: any;
@@ -22,6 +23,7 @@ const PageHeader = ({
   openModel?: boolean;
   locationToNavigate?: string | any;
   addModal?:boolean;
+  modelButtonTitle?:string
 }) => {
   const navigate = useNavigate();
   const { handel_open_model } = useModalHandler();
@@ -57,7 +59,7 @@ const PageHeader = ({
               className="add_button"
             >
               <BsPlusCircleFill />
-              {t(`practical.add`)}
+              {t(`practical.${modelButtonTitle}`)}
             </button>
           </div>
         ) :""}

src/Layout/Dashboard/QrCodeModels.tsx

@@ -42,7 +42,7 @@ const QrCodeModels: React.FC<ModalFormProps> = ({
 
       <main className="main_modal">
         <div className="ValidationField w-100 mb-5 ">
-          <QRCodeGenerator url = {`https://nerd-back.point-dev.net/api/students/question`} serial={objectToEdit.serial}/>
+          <QRCodeGenerator url = {`https://nerd-back.point-dev.net/api/students/question`} serial={objectToEdit?.serial}/>
         </div>
       </main>
     </Modal>

src/Pages/Admin/Notifications/AddNotification/Page.tsx

@@ -32,7 +32,9 @@ const TableHeader = () => {
           pageTitle="notification"
           ModelAbility={ModalEnum?.NOTIFICATION_ADD}
           canAdd={canAddNotification}
+          modelButtonTitle="add_notification"
         />
+        
         <FilterLayout sub_children={<FilterForm />} filterTitle="table.notification" />
         <Table />
         <AddModalForm />

src/Pages/Admin/Notifications/AddNotification/useTableColumns.tsx

@@ -40,19 +40,11 @@ export const useColumns = () => {
 
   const columns: TableColumnsType<Notification> = [
     {
-      title: t("columns.id"),
+      title: t("columns.created_at"),
-      dataIndex: "id",
+      dataIndex: "created_at",
-      key: "id",
+      key: "created_at",
       align: "center",
-      render: (_text, record) => record?.id,
+      render: (_text, record) => record?.created_at,
-    },
-    {
-      title: `${t("columns.body")}`,
-      dataIndex: "body",
-      key: "body",
-      align: "center",
-      render: (_text, record) => record?.body,
-      ellipsis:true
     },
     {
       title: `${t("columns.seen")}`,
@@ -62,6 +54,14 @@ export const useColumns = () => {
       render: (_text, record) => record?.seen,
       ellipsis:true
     },
+    {
+      title: `${t("columns.title")}`,
+      dataIndex: "title",
+      key: "title",
+      align: "center",
+      render: (_text, record) => record?.title,
+      ellipsis:true
+    },
     {
       title: `${t("columns.notifiable_type")}`,
       dataIndex: "notifiable_type",
@@ -71,23 +71,12 @@ export const useColumns = () => {
       ellipsis:true
     },
     {
-
+      title: `${t("columns.body")}`,
-      title: t("columns.procedure"),
+      dataIndex: "body",
-      key: "actions",
+      key: "body",
       align: "center",
-      width: "25vw",
+      render: (_text, record) => record?.body,
-      render: (_text, record, index) => {
+      // ellipsis:true
-        return (
-          <ActionButtons
-            canDelete={canDeleteNotification}
-            canEdit={canEditNotification}
-            index={index}
-            onDelete={() => handelDelete(record)}
-            onEdit={() => handleEdit(record)}
-            onShow={() => handelShow(record)}
-          />
-        );
-      },
     },
   ];
 

src/Pages/Admin/Notifications/Card.tsx

@@ -1,11 +1,7 @@
-import TrashButton from "../../../Components/Ui/TrashButton"
 import { notifications } from "../../../types/Notifications"
 
 
-const Card = ({name,date,image,id,pop,setPop}:notifications) => {
+const Card = ({name,date,image,id}:notifications) => {
-    const handleDeleteOne = () => {
-        setPop(pop?.filter((item:any)=> item?.id !== id))
-    }
     
   return (
         <div className="notification_card" key={id}>
@@ -16,12 +12,6 @@ const Card = ({name,date,image,id,pop,setPop}:notifications) => {
                     <p>{date}</p>
                 </div>
             </div>
-            <div>
-                <TrashButton 
-                 onClick={handleDeleteOne} 
-                 name="delete"
-                 icon={false}/>
-            </div>
         </div>  
     )
 }

src/Pages/Admin/Notifications/Page.tsx

@@ -1,48 +1,32 @@
 import { Divider } from 'antd';
 import { useTranslation } from 'react-i18next'
-import { NotificationArray } from './NotificationArray';
 import { notifications } from '../../../types/Notifications';
 import Card from './Card';
-import TrashButton from '../../../Components/Ui/TrashButton';
+import { useGetAllNotificationMine } from '../../../api/notification';
-import { useEffect, useState } from 'react';
 
 const Page = () => {
     const {t} = useTranslation(); 
-    const [pop, setPop] = useState(NotificationArray);
+    const {data} = useGetAllNotificationMine();
-    const [isEmpty, setIsEmpty] = useState(pop.length < 1 ? true : false);
+    console.log(data);
 
-    const handleDeleteAll = () => {
-        setPop([])
-    }
-
-    useEffect(()=>{
-        if(pop.length < 1){
-            setIsEmpty(true);
-        }else{
-            setIsEmpty(false);
-        }
-    },[pop])
   return (
     <div className='notification_container'>
         <div className='notification_header'>
             <h3>{t("header.notifications")}</h3>
-            <TrashButton 
+
-            onClick={handleDeleteAll} 
-             name='delete_all'/>
         </div>
         <Divider/>
         {
-            isEmpty === false 
+            !!data?.data  
             ?
             <div className="notification_body">
-                {pop?.map((not:notifications)=>(
+                {data?.data?.map((not:notifications)=>(
                     <Card
                     id={not?.id}
                     name={not?.name} 
-                    date={not?.date} 
+                    date={not?.date}
-                    pop={pop}
+                    image={not?.image}
-                    setPop={setPop}
+                    />
-                    image={not?.image}/>
                 ))}
             </div>
             :

src/Pages/Admin/QuestionBank/useTableColumns.tsx

@@ -12,6 +12,9 @@ import {
 } from "../../../utils/hasAbilityFn";
 import ActionButtons from "../../../Components/Table/ActionButtons";
 import { useFilterStateState } from "../../../zustand/Filter";
+import { FaPaperclip } from "react-icons/fa";
+import { ParamsEnum } from "../../../enums/params";
+import ReportTableIcon from "../../../Components/Ui/ReportTableIcon";
 
 export const useColumns = () => {
   const { setObjectToEdit } = useObjectToEdit((state) => state);
@@ -24,6 +27,13 @@ export const useColumns = () => {
     setIsOpen(ModalEnum?.QUESTION_DELETE);
   };
 
+  
+  const handleNavigateToReport = (record: any) => {
+    setFilter({})
+    // console.log(record);
+    
+    navigate(`/report/${record?.report?.id}`);
+  };
   const handleEdit = (record: any) => {
     console.log(record,"record");
       const lesson = record?.lessons?.[0] ;
@@ -170,8 +180,9 @@ export const useColumns = () => {
       key: "actions",
       align: "center",
 
-      render: (_text, record, index) => {
+      render: ({_text, record, index}:any) => {
         return (
+          <div className="flex">
           <ActionButtons
             canDelete={canDeleteQuestion}
             canEdit={canEditQuestion}
@@ -179,6 +190,12 @@ export const useColumns = () => {
             onDelete={() => handelDelete(record)}
             onEdit={() => handleEdit(record)}
           />
+          {
+            !!record?.report?.content  
+              ? <ReportTableIcon editTooltipTitle='practical.with_report' onClick={() => handleNavigateToReport(record)}/>
+              : ""
+          }
+          </div>
         );
       },
     },

src/Pages/Admin/Report/Show/ReportInfo.tsx

@@ -10,6 +10,7 @@ const ReportInfo = () => {
     const {data} = useGetAllReport({
         show:report_id
     })
+    
     const {t} = useTranslation();
 
   return (

src/Pages/Admin/Report/Table.tsx

@@ -4,19 +4,23 @@ import { useColumns } from "./useTableColumns";
 import { useGetAllReport } from "../../../api/report";
 import { useFilterState } from "../../../Components/Utils/Filter/FilterState";
 import { useFilterStateState } from "../../../zustand/Filter";
+import { useParams } from "react-router-dom";
+import { ParamsEnum } from "../../../enums/params";
 const App: React.FC = () => {
   const { filterState } = useFilterState();
 
   const { Filter } = useFilterStateState();
   const name = Filter?.name ; 
   const sort_by = Filter?.sort_by ; 
-
+  const { question_id } = useParams<ParamsEnum>();
+  
 
   const response = useGetAllReport({
     name,
     sort_by,
     pagination: true,
     ...filterState,
+    question_id:question_id
   });
 
   return <DataTable response={response} useColumns={useColumns} />;

src/Pages/Admin/Reseller/Add/Page.tsx

@@ -49,14 +49,14 @@ const TableHeader = () => {
             validationSchema={getValidationSchema}
             onSubmit={handleSubmit}
           >
-            {({ resetForm }) => ( 
+            {({ dirty }) => ( 
                 <Form className="Form_details_container">
                     <PersonalDetailsForm />
                     <TitleDetailsForm />
                     <AttachmentForm />
                     <div className="resellerButton">
                         <button type="button" onClick={() => Navigate('/reseller')}>{t("practical.cancel")}</button>
-                        <button type="submit">
+                        <button type="submit" disabled={!dirty}>
                             {t("practical.add")} {t("models.reseller")}
                             {status === QueryStatusEnum.LOADING && (
                               <span className="Spinier_Div">

src/Pages/Admin/Reseller/Edit/Page.tsx

@@ -25,7 +25,6 @@ const TableHeader = ({canEdit,ModelAbility}:{canEdit?: any;ModelAbility?: any;})
   useSetPageTitle(t(`page_header.add_reseller`));
   
   const handleSubmit = (values: any) => {
-    console.log(values);
     
     const DataToSend = {
         ...values,
@@ -62,14 +61,14 @@ const TableHeader = ({canEdit,ModelAbility}:{canEdit?: any;ModelAbility?: any;})
             validationSchema={getValidationSchema}
             onSubmit={handleSubmit}
           >
-          {({ resetForm }) => ( 
+          {({ dirty }) => ( 
             <Form className="Form_details_container">
               <PersonalDetailsForm isEdit={true} />
               <TitleDetailsForm />
               <AttachmentForm />
               <div className="resellerButton">
                 <button type="button" onClick={()=>Navigate('/reseller')}>{t("practical.cancel")}</button>
-                <button type="submit">
+                <button type="submit" disabled={!dirty}>
                   {t("practical.edit")} {t("models.reseller")}
                   {status === QueryStatusEnum.LOADING && (
                     <span className=" reseller_spinner_div">

src/Pages/Auth/LoginForm.tsx

@@ -8,15 +8,17 @@ import { FormValues } from "../../types/Auth";
 import { useTranslation } from "react-i18next";
 import { getLocalStorage } from "../../utils/LocalStorage";
 import { USER_KEY } from "../../config/AppKey";
+import { toast } from "react-toastify";
 
 const LoginForm = () => {
   const { mutate, isLoading, isSuccess, data } = useLoginAdmin();
   const [t] = useTranslation();
   const handelSubmit = (values: FormValues) => {
     mutate(values);
+        
     // localStorage.setItem('type',)
   };
-
+  
   const { login } = useAuthState();
 
   const LoginData = {

src/Routes.tsx

@@ -165,7 +165,7 @@ export const menuItems: TMenuItem[] = [
     element: <Report />,
     icon: <FaPaperclip />,
     text: "sidebar.report",
-    path: `/${ABILITIES_ENUM?.Report}`,
+    path: `/${ABILITIES_ENUM?.Report}`  ,
     abilities: ABILITIES_ENUM?.Report,
     abilities_value: ABILITIES_VALUES_ENUM.INDEX,
     prevPath: 0,
@@ -439,6 +439,15 @@ export const CrudRoute: TCrudRoute[] = [
     prevPath: 0,
 
   },
+  // report based on question id
+  {
+    header: "page_header.report",
+    element: <Report />,
+    path: `/${ABILITIES_ENUM?.Report}/${ParamsEnum?.QUESTION_ID}`  ,
+    abilities: ABILITIES_ENUM?.Report,
+    abilities_value: ABILITIES_VALUES_ENUM.INDEX,
+    prevPath: 0,
+  },
 ];
 
 export const AppRoutes: Record<string, string> = Object.fromEntries(

src/Styles/App/classNames.scss

@@ -4,6 +4,7 @@
   padding: 20px 2vw;
   border-radius: 10px;
 }
+
 .TowItemField {
   display: flex;
   gap: 4%;
@@ -12,6 +13,7 @@
     width: 48%;
   }
 }
+
 .small_section {
   background: var(--bg);
   @include Shadow;
@@ -316,3 +318,4 @@ button:disabled {
     height: 40px;
   }
 }
+

src/Styles/Pages/reSeller.scss

@@ -105,19 +105,29 @@
  }
 }
 
-.reseller_spinner_div{
+.reseller_spinner_div {
+  z-index: 999;
   position: absolute;
-  width: 70% !important;
+  width: 100% !important;
-  height: 80%;
+  height: 100%;
+  
   top: 50%;
   left: 40%;
   transform: translate(-50%, -50%);
-  background: var(--primary);
+  backdrop-filter: blur(1px); /* Adds the blur effect */
+  
   display: flex;
   align-items: center;
   justify-content: center;
 
   .ant-spin .ant-spin-dot-item {
-    background: white !important;
+    width: 25px;
+    height: 25px;
+    background: var(--primary) !important;
+  }
+  .ant-spin .ant-spin-dot{
+    font-size: 30px;
+    width: 60px;
+    height: 60px;
   }
 }

src/api/config.ts

@@ -1,4 +1,5 @@
 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 HEADER_KEY = "X-Custom-Query-Key";

src/api/helper/useAxios.ts

@@ -36,13 +36,14 @@ function useAxios() {
       const method = response.config.method;
   
       const key = response.config.headers[HEADER_KEY];
-      const isToasted = response.config.headers["X-Custom-Message"];
+      const isToasted = response.config.headers["X-Custom-Message"];      
-  
+      
       const ResponseMessage =
         responseMsg || t("validation.the_possess_done_successful");
       if (method !== AxiosQueryEnum?.GET) {
         queryClient.invalidateQueries(key);
         if (isToasted) {
+          
           toast.success(ResponseMessage);
         }
         setValidation([{}]);
@@ -52,15 +53,18 @@ function useAxios() {
     function (error) {
       // Reject errors with non-2xx status codes
       const status = error?.response?.status;
-      if (status >= 400) {
+      // console.log(status);
-        return Promise.reject(error);
+      
-      }
+      // if (status >= 400) {
+      //   return Promise.reject(error);
+      // }
   
       const errorMsg = error?.response?.data?.error;
       const errorField = error?.response?.data;
       const method = error.config.method;
   
       if (status === AxiosStatusEnum.VALIDATION) {
+        
         setValidation(errorMsg ?? errorField);
         const ErrorKey = Object?.keys(errorMsg)?.[0];
         const isString =
@@ -68,6 +72,7 @@ function useAxios() {
             ? errorMsg
             : errorMsg?.[ErrorKey]?.[0] ??
               t("validation.some_thing_went_wrong");
+              
         toast.error(t(`${isString}`));
         return;
       }
@@ -82,7 +87,7 @@ function useAxios() {
         return Promise.reject(error);
       }
   
-      return Promise.reject(error); // Important to reject the promise
+      // return Promise.reject(error); // Important to reject the promise
     }
   );
   

src/api/notification.ts

@@ -5,12 +5,14 @@ import useUpdateMutation from "./helper/useUpdateMutation";
 
 const API = {
   GET: "/notification",
+  GET_MINE: "/notification/mine",
   ADD: "/notification",
   DELETE: "/notification",
   UPDATE: "/notification",
 };
 
 const KEY = "notification";
+const KEY_Mine = "notification_mine";
 
 export const useGetAllNotification = (params?: any, options?: any) =>
   useGetQuery(KEY, API.GET, params, options);
@@ -18,3 +20,7 @@ export const useAddNotification = () => useAddMutation(KEY, API.ADD);
 export const useUpdateNotification = (params?: any) => useUpdateMutation(KEY, API.GET);
 export const useDeleteNotification = (params?: any) =>
   useDeleteMutation(KEY, API.DELETE);
+
+
+export const useGetAllNotificationMine = (params?: any, options?: any) =>
+  useGetQuery(KEY_Mine, API.GET_MINE, params, options);

src/lib/I18nProvider.tsx

@@ -10,4 +10,4 @@ const I18nProvider: React.FC<I18nProviderProps> = ({ children }) => {
   return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;
 };
 
-export default I18nProvider;
+export default I18nProvider;

src/translate/ar.json

@@ -244,7 +244,10 @@
     "lesson":"الدرس",
     "code":"رمز",
     "due_to":"صالح الى",
-    "question_name":"اسم السؤال"
+    "question_name":"اسم السؤال",
+    "body":"نص الإشعار",
+    "seen":"عدد المستخدمين",
+    "notifiable_type":"المستخدمون"
   },
   "practical": {
     "to_confirm_deletion_please_re_enter": "لتأكيد الحذف، يرجى إعادة الإدخال",
@@ -329,7 +332,9 @@
     "show_collection":"حصيلة",
     "does_not_exist_notification":"عذرا لا يوجد إشعارات...",
     "student_name":"اسم الطالب",
-    "report_content":"محتوى التقرير"
+    "report_content":"محتوى التقرير",
+    "with_report":"يوجد تقرير",
+    "add_notification":"إرسال إشعار"
   },
   "Table": {
     "header": "",
@@ -426,7 +431,7 @@
     "show_collection":"حصيلة",
     "city":"مدينة",
     "financialCollection":"التحصيلات",
-    "notification":"الاشعارات"
+    "notification":"إدارة الاشعارات"
   },
   "education_class_actions": {
     "Student_Records": "سجلات الطلاب",
@@ -570,7 +575,10 @@
     "expiration_date":"تاريخ الالغاء",
     "package":"حزمة",
     "contact_number":"رقم الهاتف",
-    "question_content":"محتوى السؤال"
+    "question_content":"محتوى السؤال",
+    "body":"النص",
+    "seen":"شوهدت",
+    "notifiable_type":"نوع الاشعار"
   },
   "select": {
     "enums": {
@@ -910,7 +918,7 @@
     "city":"مدينة",
     "coupon":"قسيمة",
     "financial_collection":"التحصيلات",
-    "notification":"الاشعارات"
+    "notification":"إدارة الاشعارات"
   },
   "message": {
     "some_thing_went_wrong": "حدث خطأ ما",
@@ -963,7 +971,7 @@
     "Coupon":"قسيمة",
     "financial_collection":"التحصيلات",
     "show_collection":"حصيلة",
-    "notification":"الاشعارات"
+    "notification":"إدارة الاشعارات"
   },
   "page_header": {
     "home": "لوحة القيادة",
@@ -1022,7 +1030,7 @@
     "questionBank":"بنك الأسئلة",
     "roles":"الدور",
     "coupon":"قسيمة",
-    "notification":"الاشعارات"
+    "notification":"إدارة الاشعارات"
   },
   "table": {
     "student": "قائمة الطلاب",

src/types/Notification.ts

@@ -9,6 +9,6 @@ export interface Notification {
   body:string;
   seen:string;
   notifiable_type:string;
-
+  created_at:string
 
 }

src/types/Notifications.ts

@@ -3,6 +3,4 @@ export type notifications = {
     name:string,
     date:string,
     image:string,
-    setPop?:any,
-    pop?:any,
 }

vite.config.mjs

@@ -1,7 +1,7 @@
 import { defineConfig } from "vite";
-
 import react from "@vitejs/plugin-react";
 import { visualizer } from "rollup-plugin-visualizer";
+import env from "vite-plugin-env-compatible";
 
 export default defineConfig(() => {
   return {
@@ -9,18 +9,27 @@ export default defineConfig(() => {
       outDir: "build",
       rollupOptions: {
         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: {
+      preprocessorOptions: {
+        scss: {
+          // Optionally add a global import here for variables or mixins
+          // additionalData: `@import "src/styles/variables.scss";`,
+        },
+      },
     },
-
     plugins: [
       react(),
+      env(),
       visualizer({
-        filename: "./bundle-analysis.html", // Output file
+        filename: "./bundle-analysis.html",
-        open: true, // Open the generated file automatically
+        open: true,
       }),
     ],
   };