From 7e110edd91240b93866aa9058a1cdebc89789b15 Mon Sep 17 00:00:00 2001
From: kimthu09 <21521495@gm.uit.edu.vn>
Date: Mon, 15 Jan 2024 22:27:17 +0700
Subject: [PATCH] fix: invoice details

---
 .../app/invoice/[invoiceId]/detail-layout.tsx | 66 ++++++++++++++-----
 frontend/app/sale/page-layout.tsx             |  1 +
 frontend/app/setting/detail-layout.tsx        | 15 ++++-
 .../invoice/invoice-detail-table.tsx          | 12 ++--
 frontend/components/invoice/print-invoice.tsx | 56 ++++++++++++----
 frontend/components/invoice/table-layout.tsx  |  1 -
 frontend/components/sale/bill-tab.tsx         |  6 +-
 frontend/components/staff/change-image.tsx    |  2 +
 .../components/staff/create-staff-dialog.tsx  |  2 +
 .../components/supplier-manage/create.tsx     |  3 -
 frontend/lib/shop-general/getShopGeneral.ts   |  1 -
 11 files changed, 121 insertions(+), 44 deletions(-)

diff --git a/frontend/app/invoice/[invoiceId]/detail-layout.tsx b/frontend/app/invoice/[invoiceId]/detail-layout.tsx
index 976b168..8f80b73 100644
--- a/frontend/app/invoice/[invoiceId]/detail-layout.tsx
+++ b/frontend/app/invoice/[invoiceId]/detail-layout.tsx
@@ -43,31 +43,59 @@ const DetailLayout = (responseData: any) => {
                 width={36}
                 height={36}
               ></Image>
-              <h1 className="text-3xl uppercase font-medium">{shop.name}</h1>
+              <h1 className="xl:text-3xl text-2xl uppercase font-medium">
+                {shop.name}
+              </h1>
             </div>
             {shop.address && shop.address !== "" ? (
-              <span className="text-lg uppercase font-medium">
+              <span className="text-base uppercase font-medium printScreen">
                 Địa chỉ: {shop.address}
               </span>
             ) : null}
             {shop.phone && shop.phone !== "" ? (
-              <span className="text-base font-medium">
+              <span className="text-base font-medium printScreen">
                 Số điện thoại: {shop.phone}
               </span>
             ) : null}
             {shop.wifiPass && shop.wifiPass !== "" ? (
-              <span className="text-base font-light">
+              <span className="text-base font-light printScreen">
                 Wifi: {shop.wifiPass}
               </span>
             ) : null}
           </div>
 
           <div className="flex flex-row justify-between p-4 mb-6 border rounded-md">
-            <div className="flex flex-col items-end gap-2 text-sm">
+            <div className="flex flex-col items-stretch gap-2 text-sm">
               <div className="flex gap-2">
-                <span className="font-light">Mã hóa đơn:</span>
+                <span className="font-light w-[6rem]">Mã hóa đơn:</span>
                 <span className="font-semibold">{responseData.invoice.id}</span>
               </div>
+              {responseData.invoice.customer && (
+                <>
+                  <div className="flex gap-2">
+                    <span className="font-light w-[6rem] whitespace-nowrap">
+                      Khách hàng:
+                    </span>
+                    <div className="font-semibold flex flex-col">
+                      {responseData.invoice.customer.name}
+                      <span className="font-normal">
+                        ({responseData.invoice.customer.phone})
+                      </span>
+                    </div>
+                  </div>
+                  <div className="flex gap-2">
+                    <span className="font-light w-[6rem] whitespace-nowrap">
+                      Điểm:
+                    </span>
+                    <div className="font-semibold flex gap-2 text-green-700">
+                      +{" "}
+                      {responseData.invoice.pointReceive.toLocaleString(
+                        "vi-VN"
+                      )}
+                    </div>
+                  </div>
+                </>
+              )}
             </div>
 
             <div className="flex flex-col items-end gap-2 text-sm">
@@ -90,19 +118,21 @@ const DetailLayout = (responseData: any) => {
           <div className="flex flex-col gap-4">
             <InvoiceDetailTable details={details} />
             <div className="flex flex-col gap-2">
-              <div className="grid grid-cols-2  space-x-2 font-semibold">
-                <span className="min-w-[6rem]">Tổng tiền: </span>
-                <span className="text-right">
-                  {toVND(responseData.invoice.totalPrice)}
-                </span>
-              </div>
               {responseData.invoice.amountPriceUsePoint !== 0 ? (
-                <div className="grid grid-cols-2  space-x-2 font-semibold">
-                  <span className="min-w-[6rem]">Giảm: </span>
-                  <span className="text-right">
-                    - {toVND(responseData.invoice.amountPriceUsePoint)}
-                  </span>
-                </div>
+                <>
+                  <div className="grid grid-cols-2  space-x-2 font-semibold">
+                    <span className="min-w-[6rem]">Tổng tiền: </span>
+                    <span className="text-right">
+                      {toVND(responseData.invoice.totalPrice)}
+                    </span>
+                  </div>
+                  <div className="grid grid-cols-2  space-x-2 font-semibold">
+                    <span className="min-w-[6rem]">Giảm: </span>
+                    <span className="text-right">
+                      - {toVND(responseData.invoice.amountPriceUsePoint)}
+                    </span>
+                  </div>
+                </>
               ) : null}
               <div className="grid grid-cols-2  space-x-2 font-semibold">
                 <span className="min-w-[6rem]">Thành tiền: </span>
diff --git a/frontend/app/sale/page-layout.tsx b/frontend/app/sale/page-layout.tsx
index 4e632d7..6781b68 100644
--- a/frontend/app/sale/page-layout.tsx
+++ b/frontend/app/sale/page-layout.tsx
@@ -123,6 +123,7 @@ const SaleScreen = () => {
         details: [],
       });
       mutate(`${endPoint}/v1/customers/all`);
+      mutate(`${endPoint}/v1/books/all`);
       router.refresh();
     }
   };
diff --git a/frontend/app/setting/detail-layout.tsx b/frontend/app/setting/detail-layout.tsx
index a6d9184..aa28cf5 100644
--- a/frontend/app/setting/detail-layout.tsx
+++ b/frontend/app/setting/detail-layout.tsx
@@ -1,6 +1,5 @@
 "use client";
 import ConfirmDialog from "@/components/confirm-dialog";
-import Loading from "@/components/loading";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
@@ -255,6 +254,20 @@ const DetailLayout = () => {
                     )}
                   </div>
                 </div>
+                <div className="basis-2/3">
+                  <Label htmlFor="add">Địa chỉ</Label>
+                  <Input
+                    id="add"
+                    readOnly={readOnly}
+                    defaultValue={shop?.address ?? ""}
+                    {...register("address")}
+                  ></Input>
+                  {errors.address && (
+                    <span className="error___message">
+                      {errors.address.message}
+                    </span>
+                  )}
+                </div>
                 <div className="flex gap-4 lg:flex-row flex-col">
                   <div className="basis-1/2">
                     <Label htmlFor="accumulatePointPercent">
diff --git a/frontend/components/invoice/invoice-detail-table.tsx b/frontend/components/invoice/invoice-detail-table.tsx
index d09dfae..0abc8ef 100644
--- a/frontend/components/invoice/invoice-detail-table.tsx
+++ b/frontend/components/invoice/invoice-detail-table.tsx
@@ -56,10 +56,12 @@ export const columns: ColumnDef<InvoiceDetailProps>[] = [
   {
     accessorKey: "name",
     header: () => {
-      return <span className="font-semibold">Tên sách</span>;
+      return <span className="font-semibold ">Tên sách</span>;
     },
     cell: ({ row }) => (
-      <div className="leading-6 flex flex-col">{row.original.book.name}</div>
+      <div className="leading-6 flex flex-col 2xl:max-w-[20rem] xl:max-w-[14rem] max-w-[8rem]">
+        {row.original.book.name}
+      </div>
     ),
     size: 4,
   },
@@ -67,7 +69,7 @@ export const columns: ColumnDef<InvoiceDetailProps>[] = [
     accessorKey: "amountImport",
     header: ({ column }) => (
       <div className="flex justify-end whitespace-normal">
-        <span className="font-semibold">Số lượng</span>
+        <span className="font-semibold">SL</span>
       </div>
     ),
     cell: ({ row }) => {
@@ -145,8 +147,8 @@ export function InvoiceDetailTable({
     },
   });
   return (
-    <div className="rounded-md border w-full">
-      <Table>
+    <div className="rounded-md border overflow-x-auto min-w-full max-w-[40vw]">
+      <Table className="min-w-full w-max">
         <TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (
             <TableRow key={headerGroup.id}>
diff --git a/frontend/components/invoice/print-invoice.tsx b/frontend/components/invoice/print-invoice.tsx
index 1ecb1d0..89d5010 100644
--- a/frontend/components/invoice/print-invoice.tsx
+++ b/frontend/components/invoice/print-invoice.tsx
@@ -67,13 +67,39 @@ const PrintInvoice = ({
             </div>
 
             <div className="flex flex-row justify-between p-4 mb-6 border rounded-md">
-              <div className="flex flex-col items-end gap-2 text-sm">
+              <div className="flex flex-col items-stretch gap-2 text-sm">
                 <div className="flex gap-2">
-                  <span className="font-light">Mã hóa đơn:</span>
+                  <span className="font-light w-[6rem]">Mã hóa đơn:</span>
                   <span className="font-semibold">
                     {responseData.invoice.id}
                   </span>
                 </div>
+                {responseData.invoice.customer && (
+                  <>
+                    <div className="flex gap-2">
+                      <span className="font-light w-[6rem] whitespace-nowrap">
+                        Khách hàng:
+                      </span>
+                      <div className="font-semibold flex flex-col">
+                        {responseData.invoice.customer.name}
+                        <span className="font-normal">
+                          ({responseData.invoice.customer.phone})
+                        </span>
+                      </div>
+                    </div>
+                    <div className="flex gap-2">
+                      <span className="font-light w-[6rem] whitespace-nowrap">
+                        Điểm:
+                      </span>
+                      <div className="font-semibold flex gap-2 text-green-700">
+                        +{" "}
+                        {responseData.invoice.pointReceive.toLocaleString(
+                          "vi-VN"
+                        )}
+                      </div>
+                    </div>
+                  </>
+                )}
               </div>
 
               <div className="flex flex-col items-end gap-2 text-sm">
@@ -96,19 +122,21 @@ const PrintInvoice = ({
             <div className="flex flex-col gap-4">
               <InvoiceDetailTable details={details} />
               <div className="flex flex-col gap-2">
-                <div className="grid grid-cols-2  space-x-2 font-semibold">
-                  <span className="min-w-[6rem]">Tổng tiền: </span>
-                  <span className="text-right">
-                    {toVND(responseData.invoice.totalPrice)}
-                  </span>
-                </div>
                 {responseData.invoice.amountPriceUsePoint !== 0 ? (
-                  <div className="grid grid-cols-2  space-x-2 font-semibold">
-                    <span className="min-w-[6rem]">Giảm: </span>
-                    <span className="text-right">
-                      - {toVND(responseData.invoice.amountPriceUsePoint)}
-                    </span>
-                  </div>
+                  <>
+                    <div className="grid grid-cols-2  space-x-2 font-semibold">
+                      <span className="min-w-[6rem]">Tổng tiền: </span>
+                      <span className="text-right">
+                        {toVND(responseData.invoice.totalPrice)}
+                      </span>
+                    </div>
+                    <div className="grid grid-cols-2  space-x-2 font-semibold">
+                      <span className="min-w-[6rem]">Giảm: </span>
+                      <span className="text-right">
+                        - {toVND(responseData.invoice.amountPriceUsePoint)}
+                      </span>
+                    </div>
+                  </>
                 ) : null}
                 <div className="grid grid-cols-2  space-x-2 font-semibold">
                   <span className="min-w-[6rem]">Thành tiền: </span>
diff --git a/frontend/components/invoice/table-layout.tsx b/frontend/components/invoice/table-layout.tsx
index 0e4b749..67abc1f 100644
--- a/frontend/components/invoice/table-layout.tsx
+++ b/frontend/components/invoice/table-layout.tsx
@@ -22,7 +22,6 @@ const TableLayout = async ({
       search: search?.toString(),
     });
   const staffs = await staffsData;
-  console.log(staffs);
   const totalPage = Math.ceil(staffs.paging.total / staffs.paging.limit);
   return <InvoiceTable data={staffs.data} totalPage={totalPage} />;
 };
diff --git a/frontend/components/sale/bill-tab.tsx b/frontend/components/sale/bill-tab.tsx
index 9e0416e..60f2759 100644
--- a/frontend/components/sale/bill-tab.tsx
+++ b/frontend/components/sale/bill-tab.tsx
@@ -255,7 +255,11 @@ const BillTab = ({
                           field.value.customerId !== "" &&
                           shop && (
                             <Label>
-                              Dùng {field.value.customerPoint} điểm (giảm{" "}
+                              Dùng{" "}
+                              {field.value.customerPoint.toLocaleString(
+                                "vi-VN"
+                              )}{" "}
+                              điểm (giảm{" "}
                               {toVND(
                                 field.value.customerPoint *
                                   (shop?.usePointPercent ?? 0)
diff --git a/frontend/components/staff/change-image.tsx b/frontend/components/staff/change-image.tsx
index 4fd6054..2ff81d0 100644
--- a/frontend/components/staff/change-image.tsx
+++ b/frontend/components/staff/change-image.tsx
@@ -45,6 +45,8 @@ const ChangeImage = ({
         });
         console.log("file không hợp lệ");
       }
+    } else {
+      setImage(null);
     }
   };
   const [open, setOpen] = useState(false);
diff --git a/frontend/components/staff/create-staff-dialog.tsx b/frontend/components/staff/create-staff-dialog.tsx
index 7e3cce7..d717e1a 100644
--- a/frontend/components/staff/create-staff-dialog.tsx
+++ b/frontend/components/staff/create-staff-dialog.tsx
@@ -125,6 +125,8 @@ const CreateStaffDialog = () => {
         });
         console.log("file không hợp lệ");
       }
+    } else {
+      setImage(null);
     }
   };
 
diff --git a/frontend/components/supplier-manage/create.tsx b/frontend/components/supplier-manage/create.tsx
index 0b0ad04..095be3c 100644
--- a/frontend/components/supplier-manage/create.tsx
+++ b/frontend/components/supplier-manage/create.tsx
@@ -66,15 +66,12 @@ const CreateDialog = ({
     const responseData = await response;
     hideLoading();
     if (responseData.hasOwnProperty("errorKey")) {
-      console.log("hi");
       toast({
         variant: "destructive",
         title: "Có lỗi",
         description: responseData.message,
       });
     } else {
-      console.log("there");
-
       toast({
         variant: "success",
         title: "Thành công",
diff --git a/frontend/lib/shop-general/getShopGeneral.ts b/frontend/lib/shop-general/getShopGeneral.ts
index 7e2fe10..cc70d9d 100644
--- a/frontend/lib/shop-general/getShopGeneral.ts
+++ b/frontend/lib/shop-general/getShopGeneral.ts
@@ -3,7 +3,6 @@ import { getApiKey } from "../auth/action";
 
 export default async function getShopGeneral() {
   const url = `${endPoint}/v1/shop`;
-  console.log(url);
   const token = await getApiKey();
   const res = await fetch(url, {
     headers: {