From 259c781476b46c3c7c617c08545203d536776ce8 Mon Sep 17 00:00:00 2001
From: ahttan <94210764+meimei2548@users.noreply.github.com>
Date: Thu, 20 Jun 2024 12:16:00 +0700
Subject: [PATCH 1/2] responsive for admin/status

---
 src/app/admin/status/bokking_status.tsx | 105 +++++++++++++-----------
 1 file changed, 55 insertions(+), 50 deletions(-)

diff --git a/src/app/admin/status/bokking_status.tsx b/src/app/admin/status/bokking_status.tsx
index ebb1873..2fb0943 100644
--- a/src/app/admin/status/bokking_status.tsx
+++ b/src/app/admin/status/bokking_status.tsx
@@ -103,69 +103,74 @@ function Sta({
   return (
     <div className="flex h-full w-full flex-col items-center gap-2 font-noto-sans">
       <Navbar />
-      <div className="flex-grid flex w-4/6">
+      <div className="flex-grid mx-5 flex w-full sm:w-5/6 lg:w-4/6">
         <Dropdown setSelectedProjectId={setSelectedProjectId} />
         <StatusDropdown setSelectedStatus={setSelectedStatus} />
       </div>
       {filteredParcelsProjects?.map((parcelsProject) => (
         <div
           key={parcelsProject.id}
-          className="flex w-4/6 flex-grow flex-col rounded-lg border-gray-300 px-6 py-4 shadow-md"
+          className="flex w-full mx-20 lg:w-4/6 flex-grow flex-col rounded-lg border-gray-300 px-6 py-4 shadow-md"
         >
           <h1 className="mb-3 border-b border-gray-300 pb-2">
             {parcelsProject.project.project_id} | {parcelsProject.project.title}
           </h1>
-          <div className="text-md grid grid-cols-5 items-center justify-center gap-3 border-black">
-            <div>
-              <Image
-                src={parcelsProject.parcel.image_url}
-                alt={parcelsProject.id}
-                width={100}
-                height={100}
+
+          <div className="text-md grid grid-cols-2 sm:grid-cols-5 items-center justify-center 
+          gap-3 border-black">
+
+            <div className="sm:col-span-1">
+              <img src={parcelsProject.parcel.image_url} alt={parcelsProject.id}
+                className="object-contain h-full w-full"
                 loading="eager"
               />
             </div>
-            <div>
-              <p>
-                {parcelsProject.parcel.parcel_id} |{" "}
-                {parcelsProject.parcel.title}
-              </p>
-            </div>
-            <div>
-              <p>{parcelsProject.amount}</p>
-            </div>
-            <div>
-              <p>{formatDate(parcelsProject.startDate.toString())}</p>
-              <p>{formatDate(parcelsProject.endDate.toString())}</p>
-            </div>
-            <div>
-              <Button
-                type="button"
-                onClick={() => openPopup(parcelsProject)}
-                className={`text-base font-bold text-white ${
-                  parcelsProject.status === "BORROWING"
-                    ? "text-blue-700"
-                    : parcelsProject.status === "REJECT"
-                      ? "text-red-700"
-                      : parcelsProject.status === "PENDING"
-                        ? "text-yellow02"
-                        : "text-green-700"
-                }`}
-              >
-                {parcelsProject.status}
-              </Button>
-              {isOpen && currentParcelProject?.id === parcelsProject.id && (
-                <PopupCard
-                  onClose={closePopup}
-                  onAccept={() => updateAccept(parcelsProject.id)}
-                  onReject={() => updateReject(parcelsProject.id)}
-                  onReturn={(quantity: number) =>
-                    updateTostock(parcelsProject.id, quantity)
-                  }
-                  parcelProject={currentParcelProject}
-                />
-              )}
+
+            <div className="flex flex-col sm:grid sm:grid-cols-4 sm:col-span-4 justify-items-center ">
+              <div>
+                <p>
+                  {parcelsProject.parcel.parcel_id} |{" "}
+                  {parcelsProject.parcel.title}
+                </p>
+              </div>
+              <div>
+                <p>{parcelsProject.amount}</p>
+              </div>
+              <div>
+                <p>{formatDate(parcelsProject.startDate.toString())}</p>
+                <p>{formatDate(parcelsProject.endDate.toString())}</p>
+              </div>
+              <div>
+                <Button
+                  type="button"
+                  onClick={() => openPopup(parcelsProject)}
+                  className={`text-base font-bold text-white ${
+                    parcelsProject.status === "BORROWING"
+                      ? "text-blue-700"
+                      : parcelsProject.status === "REJECT"
+                        ? "text-red-700"
+                        : parcelsProject.status === "PENDING"
+                          ? "text-yellow02"
+                          : "text-green-700"
+                  }`}
+                >
+                  {parcelsProject.status}
+                </Button>
+                {isOpen && currentParcelProject?.id === parcelsProject.id && (
+                  <PopupCard
+                    onClose={closePopup}
+                    onAccept={() => updateAccept(parcelsProject.id)}
+                    onReject={() => updateReject(parcelsProject.id)}
+                    onReturn={(quantity: number) =>
+                      updateTostock(parcelsProject.id, quantity)
+                    }
+                    parcelProject={currentParcelProject}
+                  />
+                )}
+              </div>
+
             </div>
+
           </div>
         </div>
       ))}
@@ -173,4 +178,4 @@ function Sta({
   );
 }
 
-export default Sta;
\ No newline at end of file
+export default Sta;

From bcbc55ca361fa43603185417b4e3b6ed7234b03e Mon Sep 17 00:00:00 2001
From: ahttan <94210764+meimei2548@users.noreply.github.com>
Date: Thu, 20 Jun 2024 13:39:52 +0700
Subject: [PATCH 2/2] text area for description_admin

---
 src/app/_components/popCard.tsx          | 22 ++++++++++++++----
 src/app/admin/status/bokking_status.tsx  | 29 +++++++++++++-----------
 src/server/api/routers/parcel_Project.ts |  4 ++++
 3 files changed, 38 insertions(+), 17 deletions(-)

diff --git a/src/app/_components/popCard.tsx b/src/app/_components/popCard.tsx
index 464a189..115960e 100644
--- a/src/app/_components/popCard.tsx
+++ b/src/app/_components/popCard.tsx
@@ -7,8 +7,8 @@ import { Input } from "~/components/ui/input";
 
 interface PopupCardProps {
   onClose: () => void;
-  onAccept: () => void;
-  onReject: () => void;
+  onAccept: (description: string) => void;
+  onReject: (description: string) => void;
   onReturn: (quantity: number) => void;
   parcelProject: ParcelProjectWithDetails;
 }
@@ -29,8 +29,10 @@ const PopupCard: React.FC<PopupCardProps> = ({
   onReturn,
   parcelProject,
 }) => {
+
   const [returnQuantity, setReturnQuantity] = useState<number>(0);
   const [error, setError] = useState<string | null>(null);
+  const [description, setDescription] = useState<string>("");
 
   const handleQuantityChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = parseInt(e.target.value, 10);
@@ -42,23 +44,35 @@ const PopupCard: React.FC<PopupCardProps> = ({
     }
   };
 
+  const handleDescriptionChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setDescription(e.target.value);
+  };
+
   const renderButton = () => {
     switch (parcelProject.status) {
       case "PENDING":
         return (
           <>
+            <div className="">
+            <textarea
+                className="form-textarea border border-gray-300 px-2"
+                placeholder="หมายเหตุ"
+                value={description}
+                onChange={handleDescriptionChange}
+              />
+            </div>
             <div className="grid grid-cols-2 gap-2">
               <Button
                 type="button"
                 className="bg-green01 text-white"
-                onClick={onAccept}
+                onClick={() => onAccept(description)}
               >
                 Accept
               </Button>
               <Button
                 type="button"
                 className="bg-red01 text-white"
-                onClick={onReject}
+                onClick={() => onReject(description)}
               >
                 Reject
               </Button>
diff --git a/src/app/admin/status/bokking_status.tsx b/src/app/admin/status/bokking_status.tsx
index 2fb0943..07e7920 100644
--- a/src/app/admin/status/bokking_status.tsx
+++ b/src/app/admin/status/bokking_status.tsx
@@ -63,17 +63,19 @@ function Sta({
     setCurrentParcelProject(null);
   };
 
-  const updateAccept = async (id: string) => {
+  const updateAccept = async (id: string, description_input: string) => {
     setIsOpen(false);
     updateparcel.mutate({
       parcel_project_id: id,
+      description: description_input,
     });
   };
 
-  const updateReject = async (id: string) => {
+  const updateReject = async (id: string, description_input: string) => {
     setIsOpen(false);
     rejectParcel.mutate({
       parcel_project_id: id,
+      description: description_input,
     });
   };
 
@@ -110,23 +112,26 @@ function Sta({
       {filteredParcelsProjects?.map((parcelsProject) => (
         <div
           key={parcelsProject.id}
-          className="flex w-full mx-20 lg:w-4/6 flex-grow flex-col rounded-lg border-gray-300 px-6 py-4 shadow-md"
+          className="mx-20 flex w-full flex-grow flex-col rounded-lg border-gray-300 px-6 py-4 shadow-md lg:w-4/6"
         >
           <h1 className="mb-3 border-b border-gray-300 pb-2">
             {parcelsProject.project.project_id} | {parcelsProject.project.title}
           </h1>
 
-          <div className="text-md grid grid-cols-2 sm:grid-cols-5 items-center justify-center 
-          gap-3 border-black">
-
+          <div
+            className="text-md grid grid-cols-2 items-center justify-center gap-3 
+          border-black sm:grid-cols-5"
+          >
             <div className="sm:col-span-1">
-              <img src={parcelsProject.parcel.image_url} alt={parcelsProject.id}
-                className="object-contain h-full w-full"
+              <img
+                src={parcelsProject.parcel.image_url}
+                alt={parcelsProject.id}
+                className="h-full w-full object-contain"
                 loading="eager"
               />
             </div>
 
-            <div className="flex flex-col sm:grid sm:grid-cols-4 sm:col-span-4 justify-items-center ">
+            <div className="flex flex-col justify-items-center sm:col-span-4 sm:grid sm:grid-cols-4 ">
               <div>
                 <p>
                   {parcelsProject.parcel.parcel_id} |{" "}
@@ -159,8 +164,8 @@ function Sta({
                 {isOpen && currentParcelProject?.id === parcelsProject.id && (
                   <PopupCard
                     onClose={closePopup}
-                    onAccept={() => updateAccept(parcelsProject.id)}
-                    onReject={() => updateReject(parcelsProject.id)}
+                    onAccept={(description_input:string) => updateAccept(parcelsProject.id,description_input)}
+                    onReject={(description_input:string) => updateReject(parcelsProject.id,description_input)}
                     onReturn={(quantity: number) =>
                       updateTostock(parcelsProject.id, quantity)
                     }
@@ -168,9 +173,7 @@ function Sta({
                   />
                 )}
               </div>
-
             </div>
-
           </div>
         </div>
       ))}
diff --git a/src/server/api/routers/parcel_Project.ts b/src/server/api/routers/parcel_Project.ts
index 6383b38..841d503 100644
--- a/src/server/api/routers/parcel_Project.ts
+++ b/src/server/api/routers/parcel_Project.ts
@@ -45,6 +45,7 @@ export const Parcel_projectRouter = createTRPCRouter({
     .input(
       z.object({
         parcel_project_id: z.string(),
+        description: z.string(),
       }),
     )
     .mutation(async ({ ctx, input }) => {
@@ -55,6 +56,7 @@ export const Parcel_projectRouter = createTRPCRouter({
         },
         data: {
           status: BORROWING_STATUS.BORROWING,
+          description_admin: input.description,
         },
       });
     }),
@@ -63,6 +65,7 @@ export const Parcel_projectRouter = createTRPCRouter({
     .input(
       z.object({
         parcel_project_id: z.string(),
+        description: z.string(),
       }),
     )
     .mutation(async ({ ctx, input }) => {
@@ -82,6 +85,7 @@ export const Parcel_projectRouter = createTRPCRouter({
           },
           data: {
             status: BORROWING_STATUS.REJECT,
+            description_admin: input.description,
           },
         });
         const current_amount = parcel?.parcel.amount ?? 0;