wallet/src/components/AppointmentDashboard/AppointmentDashboard.jsx

import { Card, Accordion, ProgressBar } from "react-bootstrap";

const AppointmentDashboard = ({ ...props }) => {
  return (
    <>
      <Card {...props}>
        <Card.Body>
          <h3
            className="mb-3 fw-bolder"
            style={{ fontSize: "1.1rem", fontWeight: 700 }}
          >
            Appointment
          </h3>
          <Accordion defaultActiveKey="">
            <Accordion.Item eventKey="0" className="p-0">
              <Accordion.Header className="p-0">
                <div className="p-0" style={{ fontSize: "30px" }}>
                  <div>&#128512;</div>
                </div>
                <div className="d-flex flex-column p-0 justify-content-start align-items-start w-100">
                  <div className="d-flex justify-content-between w-100">
                    <h3 className="mb-0" style={{ fontSize: "1.1rem" }}>
                      Cash loan
                    </h3>
                    <h3
                      className="mb-0 fw-bolder"
                      style={{ fontSize: "1.1rem", fontWeight: 700 }}
                    >
                      21531,00 ₽
                    </h3>
                  </div>
                  <div className="d-flex w-100 align-items-end gap-2">
                    <ProgressBar
                      now={75}
                      className="mt-2 w-100"
                      style={{ height: "5px" }}
                    />
                    <div
                      className="d-flex text-muted small mb-0"
                      style={{ fontSize: "0.8rem" }}
                    >
                      75%
                    </div>
                  </div>
                </div>
              </Accordion.Header>
              <Accordion.Body>
                <div className="d-flex align-items-center">
                  <div
                    className="p-2 justify-content-start align-items-start d-flex flex-column"
                    style={{ fontSize: "30px" }}
                  >
                    <div>&#10142;</div>
                  </div>
                  <div className="d-flex flex-column p-0 justify-content-start align-items-start w-100">
                    <div className="d-flex justify-content-between w-100">
                      <h3 className="mb-0" style={{ fontSize: "0.8rem" }}>
                        Cash loan
                      </h3>
                      <h3
                        className="mb-0 fw-bolder"
                        style={{ fontSize: "0.8rem", fontWeight: 700 }}
                      >
                        21531,00 ₽
                      </h3>
                    </div>
                    <div className="d-flex w-100 align-items-end gap-2">
                      <ProgressBar
                        now={100}
                        className="mt-2 w-100"
                        style={{ height: "5px" }}
                      />
                      <div
                        className="d-flex text-muted small mb-0"
                        style={{ fontSize: "0.8rem" }}
                      >
                        100%
                      </div>
                    </div>
                  </div>
                </div>
                <hr />
                <div className="d-flex align-items-center">
                  <div
                    className="p-2 justify-content-start align-items-start d-flex flex-column"
                    style={{ fontSize: "30px" }}
                  >
                    <div>&#10142;</div>
                  </div>
                  <div className="d-flex flex-column p-0 justify-content-start align-items-start w-100">
                    <div className="d-flex justify-content-between w-100">
                      <h3 className="mb-0" style={{ fontSize: "0.8rem" }}>
                        Cash loan
                      </h3>
                      <h3
                        className="mb-0 fw-bolder"
                        style={{ fontSize: "0.8rem", fontWeight: 700 }}
                      >
                        21531,00 ₽
                      </h3>
                    </div>
                    <div className="d-flex w-100 align-items-end gap-2">
                      <ProgressBar
                        now={100}
                        className="mt-2 w-100"
                        style={{ height: "5px" }}
                      />
                      <div
                        className="d-flex text-muted small mb-0"
                        style={{ fontSize: "0.8rem" }}
                      >
                        100%
                      </div>
                    </div>
                  </div>
                </div>
                <hr />
              </Accordion.Body>
            </Accordion.Item>
          </Accordion>
          {/* <div>
            <div className="d-flex flex-row gap-3 p-2">
              <div
                className="p-2 justify-content-start align-items-start d-flex flex-column"
                style={{ fontSize: "30px" }}
              >
                <div>&#128512;</div>
              </div>
              <div className="d-flex flex-column p-0 justify-content-start align-items-start w-100">
                <h3
                  className="mb-0 fw-bolder"
                  style={{ fontSize: "1.1rem", fontWeight: 700 }}
                >
                  -63.00 ₽
                </h3>
                <div
                  className="text-muted small mb-1"
                  style={{ fontSize: "0.8rem" }}
                >
                  Transport
                </div>
                <div
                  className="text-muted small mb-1"
                  style={{ fontSize: "0.8rem" }}
                >
                  Note
                </div>
              </div>
              <div
                className="p-0 m-0"
                style={{ width: "100%", height: "100%" }}
              >
                <div
                  className="text-muted small mb-1 text-end"
                  style={{ fontSize: "0.8rem" }}
                >
                  09:14
                </div>
              </div>
            </div>
          </div> */}
        </Card.Body>
      </Card>
    </>
  );
};
export default AppointmentDashboard;