From 9e3520784128436f84c2215f495b1b458ee2d8f2 Mon Sep 17 00:00:00 2001
From: Moaz Dawalibi <moaazaldwalibi@gmail.com>
Date: Sun, 15 Sep 2024 10:15:30 +0300
Subject: [PATCH] show reseller

---
 .../Admin/Reseller/show/Model/FilterForm.tsx  | 22 +++++++
 src/Pages/Admin/Reseller/show/Page.tsx        | 44 +++++++++++++
 src/Pages/Admin/Reseller/show/StudentTabs.tsx | 61 +++++++++++++++++++
 src/Pages/Admin/Reseller/show/Table.tsx       |  8 +++
 src/Pages/Admin/Reseller/show/index.tsx       |  9 +++
 .../Admin/Reseller/show/useTableColumns.tsx   | 48 +++++++++++++++
 src/Pages/Admin/Reseller/useTableColumns.tsx  | 10 ++-
 src/Pages/Admin/Student/show/StudentTabs.tsx  |  4 +-
 src/Routes.tsx                                |  9 +++
 src/Styles/Pages/StudentInfoCard.scss         | 25 ++++----
 src/Styles/Tables/Table.scss                  |  8 +--
 11 files changed, 228 insertions(+), 20 deletions(-)
 create mode 100644 src/Pages/Admin/Reseller/show/Model/FilterForm.tsx
 create mode 100644 src/Pages/Admin/Reseller/show/Page.tsx
 create mode 100644 src/Pages/Admin/Reseller/show/StudentTabs.tsx
 create mode 100644 src/Pages/Admin/Reseller/show/Table.tsx
 create mode 100644 src/Pages/Admin/Reseller/show/index.tsx
 create mode 100644 src/Pages/Admin/Reseller/show/useTableColumns.tsx

diff --git a/src/Pages/Admin/Reseller/show/Model/FilterForm.tsx b/src/Pages/Admin/Reseller/show/Model/FilterForm.tsx
new file mode 100644
index 0000000..e1925e4
--- /dev/null
+++ b/src/Pages/Admin/Reseller/show/Model/FilterForm.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import ValidationField from "../../../../../Components/ValidationField/ValidationField";
+import { Col, Row } from "reactstrap";
+import { userTypeOptions } from "../../../../../config/userTypeOptions";
+
+const FilterForm = () => {
+  return (
+    <div>
+      <Row>
+        <Col>
+          <ValidationField placeholder="username" label="username" name="username" />
+          <ValidationField placeholder="phone_number" label="phone_number" name="phone_number" />
+        </Col>
+        <Col>
+          <ValidationField type="Select" option={userTypeOptions} placeholder="type" label="type" name="type" />
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+export default FilterForm;
diff --git a/src/Pages/Admin/Reseller/show/Page.tsx b/src/Pages/Admin/Reseller/show/Page.tsx
new file mode 100644
index 0000000..d5ad396
--- /dev/null
+++ b/src/Pages/Admin/Reseller/show/Page.tsx
@@ -0,0 +1,44 @@
+import { useTranslation } from "react-i18next";
+import { Suspense } from "react";
+import { Spin } from "antd";
+import useSetPageTitle from "../../../../Hooks/useSetPageTitle";
+import PageHeader from "../../../../Layout/Dashboard/PageHeader";
+import FilterLayout from "../../../../Layout/Dashboard/FilterLayout";
+import FilterForm from "./Model/FilterForm";
+import StudentInfoCard from "../../../../Components/student/StudentInfoCard";
+import StudentAddressCard from "../../../../Components/student/AddressCard";
+import { studentParamInfo } from "../../../../Components/student/StudentParam";
+import StudentTabs from "./StudentTabs";
+
+const TableHeader = () => {
+  const [t] = useTranslation();
+  useSetPageTitle(
+    t(`page_header.users`) +
+    "/ " +
+    t(`PageTitle.students`)
+    +
+    " / " +
+    t(`PageTitle.students_details`),
+  );
+  return (
+    <div className="TableWithHeader single_student">
+      <Suspense fallback={<Spin />}>
+        <PageHeader
+          pageTitle="users"
+        />
+        <div className="single_student_body">
+          <div className="student_info">
+            <StudentInfoCard data={studentParamInfo} name={"moaz dawalibi"} status={"subs"}/>
+            <StudentAddressCard address={"adawi tjara dar alshfaa askn akan an aksn akn"}  />
+          </div>
+          <div className="student_table">
+            <StudentTabs/>
+          </div>
+
+        </div>
+      </Suspense>
+    </div>
+  );
+};
+
+export default TableHeader;
diff --git a/src/Pages/Admin/Reseller/show/StudentTabs.tsx b/src/Pages/Admin/Reseller/show/StudentTabs.tsx
new file mode 100644
index 0000000..b889809
--- /dev/null
+++ b/src/Pages/Admin/Reseller/show/StudentTabs.tsx
@@ -0,0 +1,61 @@
+import { useTranslation } from 'react-i18next';
+import { Tabs } from 'antd';
+import type { TabsProps } from 'antd';
+import FilterLayout from '../../../../Layout/Dashboard/FilterLayout';
+import FilterForm from './Model/FilterForm';
+import { lazy } from 'react';
+import { BsQuestionSquare } from "react-icons/bs";
+import { IoStatsChartOutline } from "react-icons/io5";
+import { useGetAllUser } from '../../../../api/user';
+import useSearchQuery from '../../../../api/utils/useSearchQuery';
+import { useFilterState } from '../../../../Components/Utils/Filter/FilterState';
+
+const Table = lazy(() => import("./Table"));
+
+const StudentTabs = () => {
+    const {t} = useTranslation();
+
+    const [searchQuery] = useSearchQuery("name");
+    const { filterState } = useFilterState();
+    const response = useGetAllUser({
+        name: searchQuery,
+        pagination: true,
+        ...filterState,
+      });
+
+    const items: TabsProps['items'] = [
+        {
+          key: '1',
+          label: t("practical.quiz"),
+          icon:<BsQuestionSquare/>,
+          children:
+          <>
+            <FilterLayout
+              sub_children={<FilterForm />}
+              filterTitle="sidebar.quiz"
+            />
+            <Table response={response}/>
+          </>,
+        },
+        {
+            key: '2',
+            label: t("practical.hightes_quiz"),
+            icon:<IoStatsChartOutline/>,
+            children:
+            <>
+              <FilterLayout
+                sub_children={<FilterForm />}
+                filterTitle="practical.hightes_quiz"
+              />
+              <Table response={response}/>
+            </>,
+          },
+      ];
+  return (
+    <>
+        <Tabs defaultActiveKey="1" items={items} />
+    </>
+)
+}
+
+export default StudentTabs
\ No newline at end of file
diff --git a/src/Pages/Admin/Reseller/show/Table.tsx b/src/Pages/Admin/Reseller/show/Table.tsx
new file mode 100644
index 0000000..f416400
--- /dev/null
+++ b/src/Pages/Admin/Reseller/show/Table.tsx
@@ -0,0 +1,8 @@
+import DataTable from "../../../../Layout/Dashboard/Table/DataTable";
+import { useColumns } from "./useTableColumns";
+const App = ({response}:{response:any}) => {
+    
+  return <DataTable response={response} useColumns={useColumns} />;
+};
+
+export default App;
diff --git a/src/Pages/Admin/Reseller/show/index.tsx b/src/Pages/Admin/Reseller/show/index.tsx
new file mode 100644
index 0000000..7f045ab
--- /dev/null
+++ b/src/Pages/Admin/Reseller/show/index.tsx
@@ -0,0 +1,9 @@
+import { useColumns } from "./useTableColumns";
+import Table from "./Table";
+import { FaPlus } from "react-icons/fa";
+
+export {
+  Table,
+  useColumns,
+  FaPlus,
+};
diff --git a/src/Pages/Admin/Reseller/show/useTableColumns.tsx b/src/Pages/Admin/Reseller/show/useTableColumns.tsx
new file mode 100644
index 0000000..3c6b583
--- /dev/null
+++ b/src/Pages/Admin/Reseller/show/useTableColumns.tsx
@@ -0,0 +1,48 @@
+import { TableColumnsType } from "antd";
+import { user } from "../../../../types/Item";
+import { useTranslation } from "react-i18next";
+
+export const useColumns = () => {
+  const [t] = useTranslation();
+
+  const columns: TableColumnsType<user> = [
+    {
+      title: t("columns.quiz_date"),
+      dataIndex: "id",
+      key: "id",
+      align: "center",
+    },
+    {
+      title: t("columns.subject"),
+      dataIndex: "username",
+      key: "username",
+      align: "center",
+    },
+    {
+      title: t("columns.quiz_address"),
+      dataIndex: "phone_number",
+      key: "phone_number",
+      align: "center",
+    },
+    {
+      title: t("columns.created_by"),
+      dataIndex: "type",
+      key: "type",
+      align: "center",
+    },
+    {
+      title: t("columns.creator_name"),
+      dataIndex: "type",
+      key: "type",
+      align: "center",
+    },
+    {
+      title: t("columns.quiz_status"),
+      dataIndex: "type",
+      key: "type",
+      align: "center",
+    },
+  ];
+
+  return columns;
+};
diff --git a/src/Pages/Admin/Reseller/useTableColumns.tsx b/src/Pages/Admin/Reseller/useTableColumns.tsx
index 09a7394..43a4cd2 100644
--- a/src/Pages/Admin/Reseller/useTableColumns.tsx
+++ b/src/Pages/Admin/Reseller/useTableColumns.tsx
@@ -11,6 +11,8 @@ import {
   canAddReSeller,
   canDeleteReSeller,
   canEditReSeller,
+  canShowReSeller,
+  canShowStudent,
 } from "../../../utils/hasAbilityFn";
 import ActionButtons from "../../../Components/Table/ActionButtons";
 import ColumnsImage from "../../../Components/Columns/ColumnsImage";
@@ -21,6 +23,10 @@ export const useColumns = () => {
   const { setObjectToEdit } = useObjectToEdit((state) => state);
   const navigate = useNavigate();
 
+  const handelShow = (record: ReSeller) => {
+    navigate(`${record?.id}`);    
+  };
+
   const handelDelete = (data: ReSeller) => {
     setObjectToEdit(data);
     handel_open_model(ModalEnum?.RE_SELLER_DELETE);
@@ -71,7 +77,9 @@ export const useColumns = () => {
           <ActionButtons
             canDelete={canDeleteReSeller}
             canEdit={canEditReSeller}
-            index={index}
+            canShow={canShowReSeller}
+            index={index}            
+            onShow={() => handelShow(record)}
             onDelete={() => handelDelete(record)}
             onEdit={() => handleEdit(record)}
           />
diff --git a/src/Pages/Admin/Student/show/StudentTabs.tsx b/src/Pages/Admin/Student/show/StudentTabs.tsx
index 3ff820c..b889809 100644
--- a/src/Pages/Admin/Student/show/StudentTabs.tsx
+++ b/src/Pages/Admin/Student/show/StudentTabs.tsx
@@ -26,7 +26,7 @@ const StudentTabs = () => {
     const items: TabsProps['items'] = [
         {
           key: '1',
-          label: <span>{t("practical.quiz")} </span>,
+          label: t("practical.quiz"),
           icon:<BsQuestionSquare/>,
           children:
           <>
@@ -39,7 +39,7 @@ const StudentTabs = () => {
         },
         {
             key: '2',
-            label: <span>{t("practical.hightes_quiz")} </span>,
+            label: t("practical.hightes_quiz"),
             icon:<IoStatsChartOutline/>,
             children:
             <>
diff --git a/src/Routes.tsx b/src/Routes.tsx
index fcd53d0..c390885 100644
--- a/src/Routes.tsx
+++ b/src/Routes.tsx
@@ -24,6 +24,7 @@ const Student = React.lazy(() => import("./Pages/Admin/Student/Page"));
 const ShowStudent = React.lazy(() => import("./Pages/Admin/Student/show/Page"));
 
 const ReSeller = React.lazy(() => import("./Pages/Admin/Reseller/Page"));
+const ShowReSeller = React.lazy(() => import("./Pages/Admin/Reseller/show/Page"));
 const AddReSeller = React.lazy(() => import("./Pages/Admin/Reseller/Add/Page"));
 const EditReSeller = React.lazy(
   () => import("./Pages/Admin/Reseller/Edit/Page"),
@@ -211,6 +212,14 @@ export const CrudRoute: TCrudRoute[] = [
     abilities_value: ABILITIES_VALUES_ENUM.INDEX,
     prevPath: 0,
   },
+  {
+    header: "page_header.reSeller",
+    element: <ShowReSeller />,
+    path: `/${ABILITIES_ENUM?.RE_SELLER}/:id`,
+    abilities: ABILITIES_ENUM?.RE_SELLER,
+    abilities_value: ABILITIES_VALUES_ENUM.INDEX,
+    prevPath: 0,
+  },
   {
     header: "page_header.student",
     element: <ShowStudent />,
diff --git a/src/Styles/Pages/StudentInfoCard.scss b/src/Styles/Pages/StudentInfoCard.scss
index efe2635..0faed1c 100644
--- a/src/Styles/Pages/StudentInfoCard.scss
+++ b/src/Styles/Pages/StudentInfoCard.scss
@@ -13,11 +13,18 @@
 }
 
 
-.student_info_card{
+
+
+
+.student_info_card,
+.student_address_card{
     width: 24vw;
     box-shadow: 2px 2px 8px 3px rgba(0, 0, 0, 0.1);
     border-radius: 10px;
     padding: 20px 15px ;
+    p{
+        color: #6A7287;
+    }
     .student_info_card_header{
         display: flex;
         gap: 10px;
@@ -42,19 +49,13 @@
             h4{
                 color: #202C4B;
                 font-size: 20px;
-            }
-            p{
-                color: #6A7287;
-            }
+            } 
         }
     }
 }
 
-.student_address_card{
-    width: 24vw;
-    box-shadow: 2px 2px 8px 3px rgba(0, 0, 0, 0.1);
-    border-radius: 10px;
-    padding: 20px 15px ;    
+
+.student_address_card{   
     margin-top: 30px;
     .student_address_card_body{
         display: flex;align-items: center;
@@ -66,14 +67,12 @@
             width: 40px;height: 40px;
             padding: 7px;
         }
-        p{
-            color: #6A7287;
-        }
     }
 }
 
 
 
+
 @media screen and (max-width:1250px) {
     .single_student{
         display: flex;
diff --git a/src/Styles/Tables/Table.scss b/src/Styles/Tables/Table.scss
index 026cd85..3b59b1a 100644
--- a/src/Styles/Tables/Table.scss
+++ b/src/Styles/Tables/Table.scss
@@ -55,10 +55,10 @@
   margin-left: 29px;
 }
 
-/* Ant tabs nav list */
-.ant-tabs-nav .ant-tabs-nav-wrap .ant-tabs-nav-list {
-  width: 100%;
-}
+// /* Ant tabs nav list */
+// .ant-tabs-nav .ant-tabs-nav-wrap .ant-tabs-nav-list {
+//   width: 100%;
+// }
 
 .ant-tabs > .ant-tabs-nav,
 .ant-tabs > div > .ant-tabs-nav {