add city and area pages

src/Pages/Admin/Area/Model/AddModel.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { getInitialValues, getValidationSchema } from "./formUtil";
+import { ModalEnum } from "../../../../enums/Model";
+import LayoutModel from "../../../../Layout/Dashboard/LayoutModel";
+import { QueryStatusEnum } from "../../../../enums/QueryStatus";
+import ModelForm from "./ModelForm";
+import { useAddArea } from "../../../../api/Area";
+import { useParams } from "react-router-dom";
+import { ParamsEnum } from "../../../../enums/params";
+
+const AddModel: React.FC = () => {
+  const { mutate, status } = useAddArea();
+  const {city_id} = useParams<ParamsEnum>()
+  const handleSubmit = (values: any) => {
+    mutate({
+      ...values,
+      city_id
+    });
+  };
+  return (
+    <>
+      <LayoutModel
+        status={status as QueryStatusEnum}
+        ModelEnum={ModalEnum.AREA_ADD}
+        modelTitle="Area"
+        handleSubmit={handleSubmit}
+        getInitialValues={getInitialValues({})}
+        getValidationSchema={getValidationSchema}
+      >
+        <ModelForm />
+      </LayoutModel>
+    </>
+  );
+};
+
+export default AddModel;

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

@@ -0,0 +1,38 @@
+import React from "react";
+import { getInitialValues, getValidationSchema } from "./formUtil";
+import { ModalEnum } from "../../../../enums/Model";
+import LayoutModel from "../../../../Layout/Dashboard/LayoutModel";
+import ModelForm from "./ModelForm";
+import { QueryStatusEnum } from "../../../../enums/QueryStatus";
+import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
+import { useUpdateArea } from "../../../../api/Area";
+import { useParams } from "react-router-dom";
+import { ParamsEnum } from "../../../../enums/params";
+
+const EditModel: React.FC = () => {
+  const { mutate, status } = useUpdateArea();
+  const { objectToEdit } = useObjectToEdit((state) => state);
+  const {city_id} = useParams<ParamsEnum>()
+  const handleSubmit = (values: any) => {
+    const Data_to_send = { ...values,city_id };
+    mutate(Data_to_send);
+  };
+
+  return (
+    <>
+      <LayoutModel
+        status={status as QueryStatusEnum}
+        ModelEnum={ModalEnum.AREA_EDIT}
+        modelTitle="Area"
+        handleSubmit={handleSubmit}
+        getInitialValues={getInitialValues(objectToEdit)}
+        getValidationSchema={getValidationSchema}
+        isAddModal={false}
+      >
+        <ModelForm />
+      </LayoutModel>
+    </>
+  );
+};
+
+export default EditModel;

src/Pages/Admin/Area/Model/FilterForm.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import ValidationField from "../../../../Components/ValidationField/ValidationField";
+import { Col, Row } from "reactstrap";
+import { useFormikContext } from "formik";
+
+const FilterForm = () => {
+  const formik = useFormikContext();
+
+  return (
+    <div>
+      <Row>
+        <Col>
+          <ValidationField placeholder="name" label="name" name="name" />
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+export default FilterForm;

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

@@ -0,0 +1,15 @@
+import { Col, Row } from "reactstrap";
+import ValidationField from "../../../../Components/ValidationField/ValidationField";
+
+const Form = () => {
+  return (
+    <Row className="w-100">
+      <Col>
+        <ValidationField name="name" placeholder="name" label="name" />
+      </Col>
+
+    </Row>
+  );
+};
+
+export default Form;

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

@@ -0,0 +1,18 @@
+import * as Yup from "yup";
+import { Area, AreaInitialValues } from "../../../../types/Area";
+
+export const getInitialValues = (
+  objectToEdit: Partial<Area>,
+): AreaInitialValues => {
+  return {
+    id: objectToEdit?.id,
+    name: objectToEdit?.name ?? "",
+  };
+};
+
+export const getValidationSchema = () => {
+  // validate input
+  return Yup.object().shape({
+    name: Yup.string().required("validation.required"),
+  });
+};

src/Pages/Admin/Area/Page.tsx

@@ -0,0 +1,51 @@
+import { useTranslation } from "react-i18next";
+import { lazy, Suspense } from "react";
+import { Spin } from "antd";
+import useSetPageTitle from "../../../Hooks/useSetPageTitle";
+import { ModalEnum } from "../../../enums/Model";
+import { useDeleteArea } from "../../../api/Area";
+import PageHeader from "../../../Layout/Dashboard/PageHeader";
+import FilterLayout from "../../../Layout/Dashboard/FilterLayout";
+import FilterForm from "./Model/FilterForm";
+import { canAddArea } from "../../../utils/hasAbilityFn";
+import { ParamsEnum } from "../../../enums/params";
+import { useParams } from "react-router-dom";
+
+const Table = lazy(() => import("./Table"));
+const AddModalForm = lazy(() => import("./Model/AddModel"));
+const EditModalForm = lazy(() => import("./Model/EditModel"));
+const DeleteModalForm = lazy(
+  () => import("../../../Layout/Dashboard/DeleteModels"),
+);
+
+const TableHeader = () => {
+  const [t] = useTranslation();
+  const deleteMutation = useDeleteArea();
+  const {city_id} = useParams<ParamsEnum>()
+  useSetPageTitle([
+    {name:`${t(`page_header.home`)}`, path:"/"},
+    {name:`${t(`page_header.Area`)}`, path:`city/${city_id}`},
+  ]);
+
+  return (
+    <div className="TableWithHeader">
+      <Suspense fallback={<Spin />}>
+        <PageHeader
+          pageTitle="Area"
+          ModelAbility={ModalEnum?.AREA_ADD}
+          canAdd={canAddArea}
+        />
+        <FilterLayout sub_children={<FilterForm />} filterTitle="table.Area" haveFilter={false} />
+        <Table />
+        <AddModalForm />
+        <EditModalForm />
+        <DeleteModalForm
+          deleteMutation={deleteMutation}
+          ModelEnum={ModalEnum?.AREA_DELETE}
+        />
+      </Suspense>
+    </div>
+  );
+};
+
+export default TableHeader;

src/Pages/Admin/Area/Table.tsx

@@ -0,0 +1,28 @@
+import { useColumns } from "./useTableColumns";
+import React from "react";
+import DataTable from "../../../Layout/Dashboard/Table/DataTable";
+import { useGetAllArea } from "../../../api/Area";
+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 {city_id} = useParams<ParamsEnum>()
+  const name = Filter?.name ; 
+  const sort_by = Filter?.sort_by ; 
+  const response = useGetAllArea({
+    pagination: true,
+    ...filterState,
+    city_id,
+    name,
+
+    sort_by
+  });
+
+  return <DataTable response={response} useColumns={useColumns}  />;
+};
+
+export default App;

src/Pages/Admin/Area/useTableColumns.tsx

@@ -0,0 +1,80 @@
+import { TableColumnsType } from "antd";
+import useModalHandler from "../../../utils/useModalHandler";
+import { ModalEnum } from "../../../enums/Model";
+import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import {
+  canDeleteArea,
+  canEditArea,
+  canShowArea,
+} from "../../../utils/hasAbilityFn";
+import ActionButtons from "../../../Components/Table/ActionButtons";
+import ColumnsImage from "../../../Components/Columns/ColumnsImage";
+import { Area } from "../../../types/Area";
+import { useFilterStateState } from "../../../zustand/Filter";
+
+export const useColumns = () => {
+  const { handel_open_model } = useModalHandler();
+
+  const { setObjectToEdit } = useObjectToEdit((state) => state);
+  const navigate = useNavigate();
+  const { setFilter } = useFilterStateState();
+
+
+  
+  const handelShow = (record: Area) => {
+    setFilter({})
+    navigate(`${record?.id}`);
+  };
+
+  const handelDelete = (data: Area) => {
+    setObjectToEdit(data);
+    handel_open_model(ModalEnum?.AREA_DELETE);
+  };
+
+  const handleEdit = (record: Area) => {
+    setObjectToEdit(record);
+    handel_open_model(ModalEnum?.AREA_EDIT);
+  };
+  const [t] = useTranslation();
+
+  const columns: TableColumnsType<Area> = [
+    {
+      title: t("columns.id"),
+      dataIndex: "id",
+      key: "id",
+      align: "center",
+      render: (_text, record) => record?.id,
+    },
+    {
+      title: `${t("columns.name")}`,
+      dataIndex: "name",
+      key: "name",
+      align: "center",
+      render: (_text, record) => record?.name,
+      ellipsis:true
+    },
+    {
+
+      title: t("columns.procedure"),
+      key: "actions",
+      align: "center",
+      width: "25vw",
+      render: (_text, record, index) => {
+        return (
+          <ActionButtons
+            canDelete={canDeleteArea}
+            canEdit={canEditArea}
+            canShow={false}
+            index={index}
+            onDelete={() => handelDelete(record)}
+            onEdit={() => handleEdit(record)}
+          />
+        );
+      },
+    },
+  ];
+
+  return columns;
+};

src/Pages/Admin/City/Model/AddModel.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { getInitialValues, getValidationSchema } from "./formUtil";
+import { ModalEnum } from "../../../../enums/Model";
+import LayoutModel from "../../../../Layout/Dashboard/LayoutModel";
+import { QueryStatusEnum } from "../../../../enums/QueryStatus";
+import ModelForm from "./ModelForm";
+import { useAddCity } from "../../../../api/City";
+
+const AddModel: React.FC = () => {
+  const { mutate, status } = useAddCity();
+
+  const handleSubmit = (values: any) => {
+    mutate({
+      ...values,
+    });
+  };
+  return (
+    <>
+      <LayoutModel
+        status={status as QueryStatusEnum}
+        ModelEnum={ModalEnum.CITY_ADD}
+        modelTitle="City"
+        handleSubmit={handleSubmit}
+        getInitialValues={getInitialValues({})}
+        getValidationSchema={getValidationSchema}
+      >
+        <ModelForm />
+      </LayoutModel>
+    </>
+  );
+};
+
+export default AddModel;

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

@@ -0,0 +1,37 @@
+import React from "react";
+import { getInitialValues, getValidationSchema } from "./formUtil";
+import { ModalEnum } from "../../../../enums/Model";
+import LayoutModel from "../../../../Layout/Dashboard/LayoutModel";
+import ModelForm from "./ModelForm";
+import { QueryStatusEnum } from "../../../../enums/QueryStatus";
+import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
+import { useUpdateCity } from "../../../../api/City";
+import { handelImageState } from "../../../../utils/DataToSendImageState";
+
+const EditModel: React.FC = () => {
+  const { mutate, status } = useUpdateCity();
+  const { objectToEdit } = useObjectToEdit((state) => state);
+
+  const handleSubmit = (values: any) => {
+    const Data_to_send = { ...values };
+    mutate(Data_to_send);
+  };
+
+  return (
+    <>
+      <LayoutModel
+        status={status as QueryStatusEnum}
+        ModelEnum={ModalEnum.CITY_EDIT}
+        modelTitle="City"
+        handleSubmit={handleSubmit}
+        getInitialValues={getInitialValues(objectToEdit)}
+        getValidationSchema={getValidationSchema}
+        isAddModal={false}
+      >
+        <ModelForm />
+      </LayoutModel>
+    </>
+  );
+};
+
+export default EditModel;

src/Pages/Admin/City/Model/FilterForm.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import ValidationField from "../../../../Components/ValidationField/ValidationField";
+import { Col, Row } from "reactstrap";
+import { useFormikContext } from "formik";
+
+const FilterForm = () => {
+  const formik = useFormikContext();
+
+  return (
+    <div>
+      <Row>
+        <Col>
+          <ValidationField placeholder="name" label="name" name="name" />
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+export default FilterForm;

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

@@ -0,0 +1,15 @@
+import { Col, Row } from "reactstrap";
+import ValidationField from "../../../../Components/ValidationField/ValidationField";
+
+const Form = () => {
+  return (
+    <Row className="w-100">
+      <Col>
+        <ValidationField name="name" placeholder="name" label="name" />
+      </Col>
+
+    </Row>
+  );
+};
+
+export default Form;

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

@@ -0,0 +1,18 @@
+import * as Yup from "yup";
+import { City, CityInitialValues } from "../../../../types/City";
+
+export const getInitialValues = (
+  objectToEdit: Partial<City>,
+): CityInitialValues => {
+  return {
+    id: objectToEdit?.id,
+    name: objectToEdit?.name ?? "",
+  };
+};
+
+export const getValidationSchema = () => {
+  // validate input
+  return Yup.object().shape({
+    name: Yup.string().required("validation.required"),
+  });
+};

src/Pages/Admin/City/Page.tsx

@@ -0,0 +1,49 @@
+import { useTranslation } from "react-i18next";
+import { lazy, Suspense } from "react";
+import { Spin } from "antd";
+import useSetPageTitle from "../../../Hooks/useSetPageTitle";
+import { ModalEnum } from "../../../enums/Model";
+import { useDeleteCity } from "../../../api/City";
+import PageHeader from "../../../Layout/Dashboard/PageHeader";
+import FilterLayout from "../../../Layout/Dashboard/FilterLayout";
+import FilterForm from "./Model/FilterForm";
+import { canAddCity } from "../../../utils/hasAbilityFn";
+
+const Table = lazy(() => import("./Table"));
+const AddModalForm = lazy(() => import("./Model/AddModel"));
+const EditModalForm = lazy(() => import("./Model/EditModel"));
+const DeleteModalForm = lazy(
+  () => import("../../../Layout/Dashboard/DeleteModels"),
+);
+
+const TableHeader = () => {
+  const [t] = useTranslation();
+  const deleteMutation = useDeleteCity();
+
+  useSetPageTitle([
+    {name:`${t(`page_header.home`)}`, path:"/"},
+    {name:`${t(`page_header.City`)}`, path:"City"}
+  ]);
+
+  return (
+    <div className="TableWithHeader">
+      <Suspense fallback={<Spin />}>
+        <PageHeader
+          pageTitle="City"
+          ModelAbility={ModalEnum?.CITY_ADD}
+          canAdd={canAddCity}
+        />
+        <FilterLayout sub_children={<FilterForm />} filterTitle="table.City" />
+        <Table />
+        <AddModalForm />
+        <EditModalForm />
+        <DeleteModalForm
+          deleteMutation={deleteMutation}
+          ModelEnum={ModalEnum?.CITY_DELETE}
+        />
+      </Suspense>
+    </div>
+  );
+};
+
+export default TableHeader;

src/Pages/Admin/City/Table.tsx

@@ -0,0 +1,23 @@
+import { useColumns } from "./useTableColumns";
+import React from "react";
+import DataTable from "../../../Layout/Dashboard/Table/DataTable";
+import { useGetAllCity } from "../../../api/City";
+import { useFilterState } from "../../../Components/Utils/Filter/FilterState";
+import { useFilterStateState } from "../../../zustand/Filter";
+
+const App: React.FC = () => {
+  const { filterState } = useFilterState();
+  const { Filter } = useFilterStateState();
+  const name = Filter?.name ; 
+  const sort_by = Filter?.sort_by ; 
+  const response = useGetAllCity({
+    pagination: true,
+    ...filterState,
+    name,
+    sort_by
+  });
+
+  return <DataTable response={response} useColumns={useColumns}  />;
+};
+
+export default App;

src/Pages/Admin/City/useTableColumns.tsx

@@ -0,0 +1,81 @@
+import { TableColumnsType } from "antd";
+import useModalHandler from "../../../utils/useModalHandler";
+import { ModalEnum } from "../../../enums/Model";
+import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import {
+  canDeleteCity,
+  canEditCity,
+  canShowCity,
+} from "../../../utils/hasAbilityFn";
+import ActionButtons from "../../../Components/Table/ActionButtons";
+import ColumnsImage from "../../../Components/Columns/ColumnsImage";
+import { City } from "../../../types/City";
+import { useFilterStateState } from "../../../zustand/Filter";
+
+export const useColumns = () => {
+  const { handel_open_model } = useModalHandler();
+
+  const { setObjectToEdit } = useObjectToEdit((state) => state);
+  const navigate = useNavigate();
+  const { setFilter } = useFilterStateState();
+
+
+  
+  const handelShow = (record: City) => {
+    setFilter({})
+    navigate(`${record?.id}`);
+  };
+
+  const handelDelete = (data: City) => {
+    setObjectToEdit(data);
+    handel_open_model(ModalEnum?.CITY_DELETE);
+  };
+
+  const handleEdit = (record: City) => {
+    setObjectToEdit(record);
+    handel_open_model(ModalEnum?.CITY_EDIT);
+  };
+  const [t] = useTranslation();
+
+  const columns: TableColumnsType<City> = [
+    {
+      title: t("columns.id"),
+      dataIndex: "id",
+      key: "id",
+      align: "center",
+      render: (_text, record) => record?.id,
+    },
+    {
+      title: `${t("columns.name")}`,
+      dataIndex: "name",
+      key: "name",
+      align: "center",
+      render: (_text, record) => record?.name,
+      ellipsis:true
+    },
+    {
+
+      title: t("columns.procedure"),
+      key: "actions",
+      align: "center",
+      width: "25vw",
+      render: (_text, record, index) => {
+        return (
+          <ActionButtons
+            canDelete={canDeleteCity}
+            canEdit={canEditCity}
+            canShow={canShowCity}
+            index={index}
+            onDelete={() => handelDelete(record)}
+            onEdit={() => handleEdit(record)}
+            onShow={() => handelShow(record)}
+          />
+        );
+      },
+    },
+  ];
+
+  return columns;
+};

src/Pages/Admin/Roles/useTableColumns.tsx

@@ -44,12 +44,6 @@ export const useColumns = () => {
       key: "name",
       align: "center",
     },
-    {
-      title: t("columns.created_at"),
-      dataIndex: "created_at",
-      key: "created_at",
-      align: "center",
-    },
 
     {
       title: t("columns.procedure"),

src/Routes.tsx

@@ -1,5 +1,5 @@
 import { TCrudRoute, TMenuItem } from "./types/App";
-import { FaCashRegister, FaHome, FaMoneyBill, FaPaperclip, FaSellcast, FaTag, FaUser, FaUserShield } from "react-icons/fa";
+import { FaCashRegister, FaCity, FaHome, FaMoneyBill, FaPaperclip, FaSellcast, FaTag, FaUser, FaUserShield } from "react-icons/fa";
 import { GoDotFill } from "react-icons/go";
 import { GrGroup } from "react-icons/gr";
 import React from "react";
@@ -7,7 +7,9 @@ import React from "react";
 const Dummy = React.lazy(() => import("./Pages/Home/Dummy"));
 
 const Grade = React.lazy(() => import("./Pages/Admin/Grade/Page"));
-const Curriculum = React.lazy(() => import("./Pages/Admin/Curriculum/Page"));
+const City = React.lazy(() => import("./Pages/Admin/City/Page"));
+const Area = React.lazy(() => import("./Pages/Admin/Area/Page"));
+
 const Subject = React.lazy(() => import("./Pages/Admin/subject/Table/Page"));
 const Tags = React.lazy(() => import("./Pages/Admin/Tags/Page"));
 const Unit = React.lazy(() => import("./Pages/Admin/Unit/Page"));
@@ -133,7 +135,19 @@ export const menuItems: TMenuItem[] = [
     abilities: ABILITIES_ENUM?.RE_SELLER,
     abilities_value: ABILITIES_VALUES_ENUM.INDEX,
     prevPath: 0,
+    
   },
+  {
+    header: "page_header.city",
+    element: <City />,
+    icon: <FaCity />,
+    text: "sidebar.city",
+    path: `/${ABILITIES_ENUM?.CITY}`,
+    abilities: ABILITIES_ENUM?.CITY,
+    abilities_value: ABILITIES_VALUES_ENUM.INDEX,
+    prevPath: 0,
+  },
+
   // {
   //   header: "page_header.report",
   //   element: <Report />,
@@ -357,6 +371,15 @@ export const CrudRoute: TCrudRoute[] = [
     prevPath: 0,
     type: UserTypeEnum.RE_SELLER,
   },
+  {
+    header: "page_header.Area",
+    element: <Area />,
+    path: `/${ABILITIES_ENUM?.CITY}/:${ParamsEnum?.CITY_ID}`,
+    abilities: ABILITIES_ENUM?.AREA,
+    abilities_value: ABILITIES_VALUES_ENUM.INDEX,
+    prevPath: 1,
+  },
+  
 ];
 
 export const AppRoutes: Record<string, string> = Object.fromEntries(

src/api/Area.ts

@@ -0,0 +1,20 @@
+import useAddMutation from "./helper/useAddMutation";
+import useDeleteMutation from "./helper/useDeleteMutation";
+import useGetQuery from "./helper/useGetQuery";
+import useUpdateMutation from "./helper/useUpdateMutation";
+
+const API = {
+  GET: "/area",
+  ADD: "/area",
+  DELETE: "/area",
+  UPDATE: "/area",
+};
+
+const KEY = "Area";
+
+export const useGetAllArea = (params?: any, options?: any) =>
+  useGetQuery(KEY, API.GET, params, options);
+export const useAddArea = () => useAddMutation(KEY, API.ADD);
+export const useUpdateArea = (params?: any) => useUpdateMutation(KEY, API.GET);
+export const useDeleteArea = (params?: any) =>
+  useDeleteMutation(KEY, API.DELETE);

src/api/City.ts

@@ -0,0 +1,20 @@
+import useAddMutation from "./helper/useAddMutation";
+import useDeleteMutation from "./helper/useDeleteMutation";
+import useGetQuery from "./helper/useGetQuery";
+import useUpdateMutation from "./helper/useUpdateMutation";
+
+const API = {
+  GET: "/city",
+  ADD: "/city",
+  DELETE: "/city",
+  UPDATE: "/city",
+};
+
+const KEY = "city";
+
+export const useGetAllCity = (params?: any, options?: any) =>
+  useGetQuery(KEY, API.GET, params, options);
+export const useAddCity = () => useAddMutation(KEY, API.ADD);
+export const useUpdateCity = (params?: any) => useUpdateMutation(KEY, API.GET);
+export const useDeleteCity = (params?: any) =>
+  useDeleteMutation(KEY, API.DELETE);

src/enums/Model.ts

@@ -211,6 +211,20 @@ export enum ModalEnum {
   PERMISSION_ADD = "PERMISSION.add",
   PERMISSION_DELETE = "PERMISSION.delete",
   
+    /// CITY
+
+    CITY_EDIT = "CITY.edit",
+    CITY_ADD = "CITY.add",
+    CITY_DELETE = "CITY.delete",
+
+
+        /// AREA
+
+    AREA_EDIT = "AREA.edit",
+    AREA_ADD = "AREA.add",
+    AREA_DELETE = "AREA.delete",
+
+
 
   /// sales
 

src/enums/abilities.ts

@@ -58,7 +58,9 @@ export enum ABILITIES_ENUM {
   Collections = "collections",
   SETTING = "setting",
   Email = "email",
-  Phone = "phone"
+  Phone = "phone",
+    CITY = "city",
+       AREA = "area"
   ////
 }
 

src/enums/params.ts

@@ -13,4 +13,5 @@ export enum ParamsEnum {
   CHILDREN_QUESTION_ID = "children_question_id",
   RE_SELLER_ID = "re_seller_id",
   ROLE_ID = "role_id",
+  CITY_ID = "city_id",
 }

src/translate/ar.json

@@ -393,10 +393,11 @@
     "ability": "القدرات",
     "answer": "إجابة",
     "area": "منطقة",
-    "city": "مدينة",
     "coupon": "قسيمة",
     "package": "حزمة",
-    "packageItem": "عنصر الحزمة"
+    "packageItem": "عنصر الحزمة",
+    "Area":"المنطقة",
+    "City":"مدينة"
   },
   "education_class_actions": {
     "Student_Records": "سجلات الطلاب",
@@ -860,7 +861,9 @@
     "users":"المستخدمون",
     "managers":"مدراء",
     "sales":"المبيعات",
-    "collections": "التحصيلات"
+    "collections": "التحصيلات",
+    "Area":"المنطقة",
+    "city":"مدينة"
   },
   "message": {
     "some_thing_went_wrong": "حدث خطأ ما",
@@ -906,6 +909,8 @@
     "collections": "التحصيلات",
     "sales":"المبيعات",
     "edit_manager":"تعديل مدير",
+    "City":"مدينة",
+    "Area":"المنطقة",
     "setting":"الإعدادات"
   },
   "page_header": {
@@ -953,7 +958,9 @@
     "managers":"مدراء",
     "collections": "التحصيلات",
     "sales":"المبيعات",
-    "setting":"الإعدادات"
+    "setting":"الإعدادات",
+    "City":"مدينة",
+    "Area":"المنطقة"
   },
   "table": {
     "student": "قائمة الطلاب",
@@ -968,6 +975,8 @@
     "setting":"الإعدادات",
     "file_setting":"إعدادات الملف",
     "security_setting":"إعدادات الأمان",
+    "Area":"المنطقة",
+    "City":"مدينة",
     "notification":"الاشعارات",
     "upload_your_photo_and_personal_data_here":"قم بتحميل صورتك وبياناتك الشخصية هنا",
     "get_notified_of_whats_happening_now_you_can_turn_it_off_at_any_time":"احصل على إشعار بما يحدث الآن ، يمكنك إيقاف تشغيله في أي وقت"

src/types/Area.ts

@@ -0,0 +1,17 @@
+import { Nullable } from "./App";
+
+// Define the Teacher interface
+
+export interface Area {
+  id: number; // Unique identifier for the user
+  name: string; // Name of the user
+
+}
+
+export interface InitialValues {
+  id: number; // Unique identifier for the user
+  name: string; // Name of the user
+
+}
+
+export type AreaInitialValues = Partial<Nullable<InitialValues>>;

src/types/City.ts

@@ -0,0 +1,17 @@
+import { Nullable } from "./App";
+
+// Define the Teacher interface
+
+export interface City {
+  id: number; // Unique identifier for the user
+  name: string; // Name of the user
+
+}
+
+export interface InitialValues {
+  id: number; // Unique identifier for the user
+  name: string; // Name of the user
+
+}
+
+export type CityInitialValues = Partial<Nullable<InitialValues>>;

src/utils/hasAbilityFn.ts

@@ -24,6 +24,57 @@ export const canIndexEduClass = hasAbility(
   ABILITIES_VALUES_ENUM.INDEX,
 );
 
+///// City
+
+export const canAddCity = hasAbility(
+  ABILITIES_ENUM.EDUCATION_CLASS,
+  ABILITIES_VALUES_ENUM.STORE,
+);
+export const canEditCity = hasAbility(
+  ABILITIES_ENUM.EDUCATION_CLASS,
+  ABILITIES_VALUES_ENUM.UPDATE,
+);
+export const canDeleteCity = hasAbility(
+  ABILITIES_ENUM.EDUCATION_CLASS,
+  ABILITIES_VALUES_ENUM.DELETE,
+);
+export const canShowCity = hasAbility(
+  ABILITIES_ENUM.EDUCATION_CLASS,
+  ABILITIES_VALUES_ENUM.SHOW,
+);
+export const canIndexCity = hasAbility(
+  ABILITIES_ENUM.EDUCATION_CLASS,
+  ABILITIES_VALUES_ENUM.INDEX,
+);
+
+
+///// Area
+
+export const canAddArea = hasAbility(
+  ABILITIES_ENUM.EDUCATION_CLASS,
+  ABILITIES_VALUES_ENUM.STORE,
+);
+export const canEditArea = hasAbility(
+  ABILITIES_ENUM.EDUCATION_CLASS,
+  ABILITIES_VALUES_ENUM.UPDATE,
+);
+export const canDeleteArea = hasAbility(
+  ABILITIES_ENUM.EDUCATION_CLASS,
+  ABILITIES_VALUES_ENUM.DELETE,
+);
+export const canShowArea = hasAbility(
+  ABILITIES_ENUM.EDUCATION_CLASS,
+  ABILITIES_VALUES_ENUM.SHOW,
+);
+export const canIndexArea = hasAbility(
+  ABILITIES_ENUM.EDUCATION_CLASS,
+  ABILITIES_VALUES_ENUM.INDEX,
+);
+
+
+
+
+
 ///// Course
 
 export const canAddCourse = hasAbility(
@@ -273,15 +324,6 @@ export const canShowStudent = hasAbility(
   ABILITIES_VALUES_ENUM.SHOW,
 );
 
-export const canImportStudent = hasAbility(
-  ABILITIES_ENUM.STUDENT,
-  ABILITIES_VALUES_ENUM.IMPORT_STUDENTS,
-);
-export const canMoveStudent = hasAbility(
-  ABILITIES_ENUM.STUDENT,
-  ABILITIES_VALUES_ENUM.MOVE_STUDENTS,
-);
-
 
 /// Manager