Statistics Table component has been added

client/package.json

@@ -22,7 +22,7 @@
     "sass": "^1.69.5"
   },
   "devDependencies": {
-    "@types/react": "^18.2.37",
+    "@types/react": "^18.2.37",   
     "@types/react-dom": "^18.2.15",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "eslint": "^8.53.0",

client/src/assets/styles/_vars.scss

@@ -8,4 +8,5 @@ $--Red-700: #C81E1E;
 $--green-700: #046C4E;
 $--Yellow-500: #C27803;
 $--Primary-900: #0e0218;
+$--Primary-600: #650DA6;
 $--text-color: #e2efee;

client/src/assets/styles/components/StatisitcTable.scss

@@ -0,0 +1,67 @@
+.table-box {
+    display: flex;
+    padding: 30px 4px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 11px;
+
+    border: 1px solid var(--Primary-600, #650DA6);
+    width: 90%;
+
+    justify-self: center;
+
+}
+
+table {
+    width: inherit;
+
+}
+
+.columns-name-box {
+    display: flex;
+    flex-direction: row;
+    justify-content: end;
+
+}
+
+.columns-title-box {
+
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    direction: rtl;
+
+}
+
+.columns-value-box {
+    display: flex;
+    flex-direction: column;
+}
+
+
+.single-row {
+    width: 100%;
+
+    direction: rtl;
+    display: flex;
+    flex-direction: row;
+
+    padding-bottom: 10px;
+
+    height: fit-content;
+
+}
+
+th,
+td {
+    text-align: center;
+    width: 100px;
+}
+
+.table-outlier {
+    direction: rtl;
+    width: 80%;
+    display: block;
+    overflow-x: scroll;
+}

client/src/assets/styles/global/_layout.scss

@@ -21,7 +21,7 @@ section,
   .col-1 {
     flex: 0 1 calc(25% - var(--side-spacing) * 2);
   }
-
+    
   .col-2 {
     flex: 0 1 calc(50% - var(--side-spacing) * 2);
   }
@@ -34,3 +34,13 @@ section,
     flex: 0 1 calc(100% - var(--side-spacing) * 2);
   }
 }
+
+.PopUp {
+  width: 80%;
+  height: fit-content;
+  border-radius: 14px;
+  background: linear-gradient(115deg, #201429 2.95%, #360C55 95.69%);
+
+  justify-content: center;
+  align-items: center;
+}

client/src/components/common/StatisticTable.jsx

@@ -0,0 +1,65 @@
+import React from "react";
+
+import "../../assets/styles/components/StatisitcTable.scss";
+
+const StatisticTable = ({ title, columnNames, dataRows }) => {
+  const columnsNo = Object.keys(dataRows[0]).length;
+
+  return (
+    <div className="table-box">
+      <h6>{title}</h6>
+
+      <div className="table-outlier">
+        <table>
+          {
+            <thead>
+              <tr className="columns-title-box">
+                {columnNames.map((col, index) => {
+                  return (
+                    <th className="column-title" key={index}>
+                      {col.name}
+                    </th>
+                  );
+                })}
+              </tr>
+            </thead>
+          }
+          <tr className="line">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              height="3"
+              width="100%"
+              viewBox="0 0 320 2"
+              fill="none"
+            >
+              <path
+                d="M0.5 1L319.218 0.778839"
+                stroke="#4B5563"
+                strokeLinecap="square"
+              />
+            </svg>
+          </tr>
+          {
+            <tbody className="columns-value-box">
+              <div className="values">
+                {dataRows.map((row, rowIndex) => (
+                  // Map over rows
+                  <tr key={rowIndex} className="single-row">
+                    {Object.values(row).map((cell, cellIndex) => (
+                      // Map over cells within each row
+                      <td key={cellIndex} className="row-item">
+                        {cell}
+                      </td>
+                    ))}
+                  </tr>
+                ))}
+              </div>
+            </tbody>
+          }
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default StatisticTable;

client/src/components/landingpage/LandingPage.jsx

@@ -2,9 +2,11 @@ import Button from "../common/Button";
 
 import FancyBlobs from "./FancyBlobs";
 
+import PageTitle from "../common/PageTitle";
+
 import "./LandingPage.scss";
 
-import PageTitle from "../common/PageTitle";
+import TestTable from "../testing/TestTable";
 
 import {
   FolderIcon,
@@ -79,6 +81,9 @@ export default function LandingPage() {
 
         <FancyBlobs />
       </section>
+
+      {/* uncomment to test statistics Table */}
+      {/* <TestTable /> */}
     </div>
   );
 }

client/src/components/landingpage/LandingPage.scss

@@ -16,14 +16,15 @@
       padding-inline: 5px;
       line-height: 1.5;
     }
+
     .btn__container {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       gap: 20px;
 
-      > * {
+      >* {
         min-width: 70%;
       }
     }
@@ -57,7 +58,8 @@
 
       .icon {
         color: var(--primary-100);
-        > * {
+
+        >* {
           width: var(--icon-size);
           height: var(--icon-size);
         }
@@ -70,3 +72,9 @@
     }
   }
 }
+
+.test-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

client/src/components/testing/TestTable.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+import StatisticTable from "../common/StatisticTable";
+
+const TestTable = () => {
+  const columnNames = [
+    { name: "الاسم" },
+    { name: "النوع" },
+    { name: "الحالة" },
+    { name: "الوضع" },
+    { name: "أهي ماشية" },
+  ];
+  const dataRows = [
+    {
+      name: "إسماعيل أحمد قنباوي",
+      type: "ذكر",
+      status: "مقيد",
+    },
+
+    {
+      name: "يعقوب غيتة",
+      type: "ذكر",
+      status: "غير مقيد",
+    },
+  ];
+
+  return (
+    <section className="test-box">
+      <StatisticTable
+        title="معلومات الكباتن"
+        columnNames={columnNames}
+        dataRows={dataRows}
+      />
+    </section>
+  );
+};
+
+export default TestTable;

server/database/db.js

@@ -1,15 +1,13 @@
-import pg from "pg";
-import dotenv from "dotenv";
+import pg from 'pg'
+import dotenv from 'dotenv'
 
-dotenv.config();
-dotenv.config();
+dotenv.config()
 const db = new pg.Pool({
-  host: process.env.DB_HOST,
-  port: process.env.DB_PORT,
-  user: process.env.DB_USER,
-  password: process.env.DB_PASS,
-  database: process.env.DB_DATABASE,
-});
+    host: process.env.DB_HOST,
+    port: process.env.DB_PORT,
+    user: process.env.DB_USER,
+    password: process.env.DB_PASS,
+    database: process.env.DB_DATABASE,
+})
 
-
-export default db;
+export default db