improve styte

MatinDehghanian · Oct 15, 2024 · fd8507c · fd8507c
1 parent 4035a8c
commit fd8507c
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 123 deletions.
diff --git a/src/components/ClientTab/ServiceComponents/InfoRow.jsx b/src/components/ClientTab/ServiceComponents/InfoRow.jsx
@@ -1,18 +1,23 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Col, Stack } from "react-bootstrap";
 
-const InfoRow = ({ icon, label, value, extraIcon, extraColor, extend }) => (
+const InfoRow = ({
+  icon,
+  label,
+  value,
+  extraIcon,
+  extraColor,
+  extend,
+  rtl,
+}) => (
   <Col xs="12" md={!extend ? "6" : ""} className={"item " + extend}>
     <Stack direction="horizontal" gap={3}>
       <div className="icon-holder">
         <FontAwesomeIcon size="lg" icon={icon} />
       </div>
       <div className="text-c">
         <div className="p-2 ms-auto">{label}</div>
-        <div
-          className="p-2 text-op"
-          style={{ direction: label === "تاریخ اتمام :" ? "rtl" : "ltr" }}
-        >
+        <div className="p-2 text-op" style={{ direction: rtl ? "rtl" : "ltr" }}>
           {value}
           {extraIcon && (
             <FontAwesomeIcon

diff --git a/src/components/ServiceInfo.jsx b/src/components/ServiceInfo.jsx
@@ -2,27 +2,23 @@ import {
   faCalendar,
   faCircle,
   faCircleInfo,
-  faCircleXmark,
   faDesktop,
   faInfinity,
   faPenToSquare,
   faPowerOff,
-  faQrcode,
   faSpinner,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useEffect, useState } from "react";
-import { Container, Modal, Row, Stack } from "react-bootstrap";
+import { Container, Row, Stack } from "react-bootstrap";
 import {
   formatDate,
   formatExpireDate,
   calculateRemainingTime,
   formatTraffic,
-  handleCopyToClipboard,
 } from "../utils/Helper";
 import InfoRow from "./ClientTab/ServiceComponents/InfoRow";
 import InfoCard from "./ClientTab/ServiceComponents/InfoCard";
-import QRCode from "react-qr-code";
 
 const ServiceInfo = ({ data }) => {
   const [serviceInfo, setServiceInfo] = useState({
@@ -36,7 +32,7 @@ const ServiceInfo = ({ data }) => {
   });
 
   const statusMapping = {
-    on_hold: { color: "yellow", detail: "در انتظار اتصال" },
+    on_hold: { color: "yellow", detail: "متوقف شده" },
     expired: { color: "orange", detail: "منقضی شده" },
     limited: { color: "brown", detail: "محدود شده" },
     active: { color: "green", detail: "فعال" },
@@ -83,12 +79,6 @@ const ServiceInfo = ({ data }) => {
       });
     }
   }, [data]);
-  const [show, setShow] = useState(false);
-
-  const handleClose = () => setShow(false);
-  const handleShow = () => {
-    setShow(true);
-  };
 
   const {
     formattedDate,
@@ -101,114 +91,66 @@ const ServiceInfo = ({ data }) => {
   } = serviceInfo;
 
   return (
-    <>
-      <Container className="mt-5 p-lg-5 p-4 box">
-        <div
-          className="w-100"
-          style={{
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center",
-          }}
-        >
-          <div className="info-title">
-            <FontAwesomeIcon
-              className="px-2 flashdot"
-              size="sm"
-              icon={faCircle}
-            />
-            <h3 className="mt-1">{"اطلاعات سرویس"}</h3>
-          </div>
-          <FontAwesomeIcon
-            cursor={"pointer"}
-            color="#94143a"
-            className="ps-3"
-            size="2xl"
-            icon={faQrcode}
-            onClick={(e) => {
-              e.stopPropagation();
-              handleShow();
-            }}
-          />
-        </div>
-
-        <Row className="items pt-4 mt-4">
-          <InfoRow
-            icon={faPenToSquare}
-            label={"نام سرویس :"}
-            value={data?.username}
-          />
-          <InfoRow
-            icon={faCircleInfo}
-            label={"آخرین اتصال :"}
-            value={formattedDate}
-          />
-          <InfoRow
-            icon={faCalendar}
-            label={"تاریخ اتمام :"}
-            value={formattedExpireDate}
-          />
-          <InfoRow
-            icon={faPowerOff}
-            label={"وضعیت سرویس :"}
-            value={statusDetail}
-            extraIcon={faCircle}
-            extraColor={statusColor}
-          />
-          <InfoRow
-            icon={faDesktop}
-            label={"آخرین برنامه متصل شده :"}
-            value={data?.sub_last_user_agent}
-            extend="sys"
-          />
-          <InfoRow
-            icon={faCalendar}
-            label={"تاریخ خرید :"}
-            value={createdDate}
-          />
-          <InfoRow
-            icon={faSpinner}
-            label={"حجم خریداری شده :"}
-            value={totalTraffic}
-          />
-        </Row>
+    <Container className="mt-5 p-lg-5 p-4 box">
+      <div className="info-title">
+        <FontAwesomeIcon className="px-2 flashdot" size="sm" icon={faCircle} />
+        <h3 className="mt-1">{"اطلاعات سرویس"}</h3>
+      </div>
 
-        <Row className="cards pt-3">
-          <InfoCard title={"مدت باقی مانده از اعتبار"} value={remainingTime} />
-          <InfoCard
-            title={"تعداد کاربر"}
-            value={<FontAwesomeIcon size="lg" icon={faInfinity} />}
-          />
-          <InfoCard title={"حجم مصرف شده"} value={formattedTraffic} ltr />
-          <InfoCard title={"حجم باقی مانده"} value={remainingTraffic} ltr />
-        </Row>
-      </Container>
+      <Row className="items pt-4 mt-4">
+        <InfoRow
+          icon={faPenToSquare}
+          label={"نام سرویس :"}
+          value={data?.username}
+        />
+        <InfoRow
+          icon={faCircleInfo}
+          label={"آخرین اتصال :"}
+          value={formattedDate}
+          rtl
+        />
+        <InfoRow
+          icon={faCalendar}
+          label={"تاریخ اتمام :"}
+          value={formattedExpireDate}
+          rtl
+        />
+        <InfoRow
+          icon={faPowerOff}
+          label={"وضعیت سرویس :"}
+          value={statusDetail}
+          extraIcon={faCircle}
+          extraColor={statusColor}
+        />
+        <InfoRow
+          icon={faDesktop}
+          label={"آخرین برنامه متصل شده :"}
+          value={data?.sub_last_user_agent}
+          extend="sys"
+        />
+        <InfoRow
+          icon={faCalendar}
+          label={"تاریخ خرید :"}
+          value={createdDate}
+          rtl
+        />
+        <InfoRow
+          icon={faSpinner}
+          label={"حجم خریداری شده :"}
+          value={totalTraffic}
+        />
+      </Row>
 
-      <Modal show={show} onHide={handleClose}>
-        <Modal.Header dir="rtl" className="justify-content-between no-border">
-          <Modal.Title>لینک ساب</Modal.Title>
-          <FontAwesomeIcon
-            size="xl"
-            color="rgb(160, 21, 62)"
-            style={{ cursor: "pointer" }}
-            icon={faCircleXmark}
-            onClick={handleClose}
-          />
-        </Modal.Header>
-        <Modal.Body className="text-center mb-3">
-          <QRCode
-            className="img-fluid"
-            value={window.location.origin + data?.subscription_url}
-            cursor={"pointer"}
-            onClick={() =>
-              handleCopyToClipboard(
-                window.location.origin + data?.subscription_url
-              )
-            }
-          />
-        </Modal.Body>
-      </Modal>
-    </>
+      <Row className="cards pt-3">
+        <InfoCard title={"مدت باقی مانده از اعتبار"} value={remainingTime} />
+        <InfoCard
+          title={"تعداد کاربر"}
+          value={<FontAwesomeIcon size="lg" icon={faInfinity} />}
+        />
+        <InfoCard title={"حجم مصرف شده"} value={formattedTraffic} ltr />
+        <InfoCard title={"حجم باقی مانده"} value={remainingTraffic} ltr />
+      </Row>
+    </Container>
   );
 };