user

src/Pages/Admin/User/Model/EditModel.tsx

@@ -16,6 +16,7 @@ const EditModel: React.FC = () => {
       ...values,
     });
   };
+
   return (
     <>
       <LayoutModel
@@ -27,7 +28,7 @@ const EditModel: React.FC = () => {
         getValidationSchema={getValidationSchema}
         isAddModal={false}
       >
-        <ModelForm />
+        <ModelForm isEdit={true} />
       </LayoutModel>
     </>
   );

src/Pages/Admin/User/Model/ModelForm.tsx

@@ -1,16 +1,30 @@
 import { Col, Row } from "reactstrap";
 import ValidationField from "../../../../Components/ValidationField/ValidationField";
+import { convert_data_to_select } from "../../../../Components/ValidationField";
+import useFormatDataToSelect from "../../../../utils/useFormatDataToSelect";
 
-const Form = () => {
+const Form = ({isEdit}:{isEdit?:boolean}) => {
+
+  const typeOptions = [
+    { id: "student", name: "student" },
+    { id: "reseller", name: "reseller" },
+    { id: "admin", name: "admin" },
+  ]
+  const typeArray = useFormatDataToSelect(typeOptions)
+  
   return (
     <Row className="w-100">
       <Col>
-        <ValidationField
-          placeholder="name"
-          label="name"
-          name="name"
-          type="Number"
-        />
+        <ValidationField placeholder="username" label="username" name="username" />
+        {isEdit ? ""
+          : 
+        <ValidationField placeholder="password" label="password" name="password" />}
+        <ValidationField placeholder="phone_number" label="phone_number" name="phone_number" />
+      </Col>
+      <Col>
+        <ValidationField type="Select" option={typeArray} placeholder="type" label="type" name="type" />
+        {/* <ValidationField type="Select" option={typeArray} placeholder="type" label="type" name="type" />
+        <ValidationField type="Select" option={typeArray} placeholder="type" label="type" name="type" /> */}
       </Col>
     </Row>
   );

src/Pages/Admin/User/Model/formUtil.ts

@@ -2,12 +2,21 @@ import * as Yup from "yup";
 export const getInitialValues = (objectToEdit: any): any => {
   return {
     id: objectToEdit?.id ?? null,
-    name: objectToEdit?.name ?? null,
+    username: objectToEdit?.username ?? null,
+    password: objectToEdit?.password ?? null,
+    phone_number: objectToEdit?.phone_number ?? null,
+    type: objectToEdit?.type ?? null,
+
   };
 };
 
 export const getValidationSchema = () => {
   return Yup.object().shape({
-    name: Yup.string().required("validation.required"),
+    username: Yup.string().required("validation.required"),
+    // password: Yup.string().required("validation.required"),
+    phone_number: Yup.string()
+      .required("validation.required")
+      .min(10, "Phone number must be at least 10 characters long"), 
+    type: Yup.string().required("validation.required"),
   });
-};
+};

src/Pages/Admin/User/Page.tsx

@@ -8,6 +8,7 @@ import { useDeleteTag } from "../../../api/tags";
 import PageHeader from "../../../Layout/Dashboard/PageHeader";
 import FilterLayout from "../../../Layout/Dashboard/FilterLayout";
 import FilterForm from "./Model/FilterForm";
+import { useDeleteUser } from "../../../api/user";
 const Table = lazy(() => import("./Table"));
 const AddModalForm = lazy(() => import("./Model/AddModel"));
 const EditModalForm = lazy(() => import("./Model/EditModel"));
@@ -17,8 +18,10 @@ const DeleteModalForm = lazy(
 
 const TableHeader = () => {
   const [t] = useTranslation();
-  useSetPageTitle(t(`page_header.user`));
-  const deleteMutation = useDeleteTag();
+  useSetPageTitle(
+    t(`page_header.user`),
+  );
+  const deleteMutation = useDeleteUser();
   return (
     <div className="TableWithHeader">
       <Suspense fallback={<Spin />}>

src/Pages/Admin/User/Table.tsx

@@ -11,7 +11,7 @@ const App: React.FC = () => {
     name: searchQuery,
     pagination: true,
   });
-
+    
   return <DataTable response={response} useColumns={useColumns} />;
 };
 

src/Pages/Admin/User/useTableColumns.tsx

@@ -30,12 +30,23 @@ export const useColumns = () => {
       align: "center",
     },
     {
-      title: t("columns.name"),
-      dataIndex: "name",
-      key: "name",
+      title: t("columns.username"),
+      dataIndex: "username",
+      key: "username",
+      align: "center",
+    },
+    {
+      title: t("columns.phone_number"),
+      dataIndex: "phone_number",
+      key: "phone_number",
+      align: "center",
+    },
+    {
+      title: t("columns.type"),
+      dataIndex: "type",
+      key: "type",
       align: "center",
     },
-
     {
       title: t("columns.procedure"),
       key: "actions",

src/translate/ar.json

@@ -158,9 +158,9 @@
     "isBase": "سؤال رئيسي",
     "question_options_count": "عدد الخيارات",
     "procedure": "اجراء",
-    "icon": "الايقونة",
-    "canAnswersBeShuffled": "يمكن خلط الإجابات",
-    "first_name":"الاسم الأول"
+    "icon":"الايقونة",
+    "canAnswersBeShuffled":"يمكن خلط الإجابات",
+    "phone_number":"رقم الهاتف"
   },
   "practical": {
     "to_confirm_deletion_please_re_enter": "لتأكيد الحذف، يرجى إعادة الإدخال",