feat: Manage & analytics pages (#28)

Co-authored-by: Thanh Quy - wolf <524H0124@student.tdtu.edu.vn> Reviewed-on: #28 Reviewed-by: TakahashiNguyen <takahashi.ng@icloud.com> Co-authored-by: TaNguyenThanhQuy <tanguyenthanhquy@noreply.localhost> Co-committed-by: TaNguyenThanhQuy <tanguyenthanhquy@noreply.localhost>
2026-04-06 14:09:45 +00:00
parent 68930cfd9c
commit fd57a35820
105 changed files with 6776 additions and 1008 deletions
@@ -0,0 +1,91 @@
+import Button from "@/components/atoms/buttons/Button";
+import Link from "next/link";
+
+import { ReviewModal } from "@/components/organisms/modals";
+import { useState } from "react";
+
+import type { PaymentSummaryCardProps } from "./Card.types";
+
+const formatPrice = (value: number) =>
+  value.toLocaleString("vi-VN", { style: "currency", currency: "VND" });
+
+export default function PaymentSummaryCard({
+  totalPrice,
+  isCustomer = false,
+  backHref,
+}: PaymentSummaryCardProps) {
+
+    const [isReviewOpen, setIsReviewOpen] = useState(false);
+    const handlePayment = () => {
+    // UI-only: open review modal after "payment"
+    if (isCustomer) {
+        setIsReviewOpen(true);
+  }
+};
+  return (
+    <aside className="shrink-0 xl:w-85">
+      <div className="bg-card sticky top-[calc(var(--spacing-header-height)+1rem)] rounded-2xl border border-(--color-border-light) p-4 md:p-5">
+        <h2 className="mb-4 text-lg font-bold">Hóa đơn</h2>
+
+        <div className="flex items-center justify-between border-b border-(--color-border-light) pb-4">
+          <span className="text-(--color-text-muted)">Tổng cộng</span>
+          <span className="text-xl font-bold text-(--color-primary)">
+            {formatPrice(totalPrice)}
+          </span>
+        </div>
+
+        <div className="mt-4 grid grid-cols-2 gap-3">
+          <Button
+            style="payment"
+            onClick={handlePayment}
+            icon="fa-solid fa-money-bill-wave"
+            size="md"
+            variant="primary"
+          >
+            Tiền mặt
+          </Button>
+
+          <Button
+            style="payment"
+            onClick={handlePayment}
+            icon="fa-solid fa-qrcode"
+            size="md"
+            variant="secondary"
+          >
+            QR Code
+          </Button>
+
+          {isCustomer && (
+            <Button
+              style="payment"
+              onClick={handlePayment}
+              icon="fa-solid fa-star"
+              size="md"
+              variant="primary"
+            >
+              Đánh giá
+            </Button>
+          )}
+
+          <Link href={backHref || "/"}  className={isCustomer ? "" : "col-span-2"}>
+            <Button
+              style="payment"
+              onClick={() => setIsReviewOpen(false)}
+              icon="fa-solid fa-arrow-rotate-left"
+              size="md"
+              variant="secondary"
+              className="w-full"
+            >
+              Quay về
+            </Button>
+          </Link>
+        </div>
+      </div>
+
+      <ReviewModal
+        isOpen={isReviewOpen}
+        onClose={() => setIsReviewOpen(false)}
+      />
+    </aside>
+  );
+}