Part 28 : Logout/Timestamps/OrderEmail/ProductDetails (Backend Part 11)

shubham9511s · May 12, 2023 · d51582e · d51582e
1 parent 93752e8
commit d51582e
Show file tree

Hide file tree

Showing 7 changed files with 739 additions and 511 deletions.
diff --git a/src/features/admin/components/AdminOrders.js b/src/features/admin/components/AdminOrders.js
@@ -83,7 +83,7 @@ function AdminOrders() {
               <thead>
                 <tr className="bg-gray-200 text-gray-600 uppercase text-sm leading-normal">
                   <th
-                    className="py-3 px-6 text-left cursor-pointer"
+                    className="py-3 px-0 text-left cursor-pointer"
                     onClick={(e) =>
                       handleSort({
                         sort: 'id',
@@ -99,9 +99,9 @@ function AdminOrders() {
                         <ArrowDownIcon className="w-4 h-4 inline"></ArrowDownIcon>
                       ))}
                   </th>
-                  <th className="py-3 px-6 text-left">Items</th>
+                  <th className="py-3 px-0 text-left">Items</th>
                   <th
-                    className="py-3 px-6 text-left cursor-pointer"
+                    className="py-3 px-0 text-left cursor-pointer"
                     onClick={(e) =>
                       handleSort({
                         sort: 'totalAmount',
@@ -117,12 +117,45 @@ function AdminOrders() {
                         <ArrowDownIcon className="w-4 h-4 inline"></ArrowDownIcon>
                       ))}
                   </th>
-                  <th className="py-3 px-6 text-center">Shipping Address</th>
-                  <th className="py-3 px-6 text-center">Order Status</th>
-                  <th className="py-3 px-6 text-center">Payment Method</th>
-                  <th className="py-3 px-6 text-center">Payment Status</th>
-
-                  <th className="py-3 px-6 text-center">Actions</th>
+                  <th className="py-3 px-0 text-center">Shipping Address</th>
+                  <th className="py-3 px-0 text-center">Order Status</th>
+                  <th className="py-3 px-0 text-center">Payment Method</th>
+                  <th className="py-3 px-0 text-center">Payment Status</th>
+                  <th
+                    className="py-3 px-0 text-left cursor-pointer"
+                    onClick={(e) =>
+                      handleSort({
+                        sort: 'createdAt',
+                        order: sort?._order === 'asc' ? 'desc' : 'asc',
+                      })
+                    }
+                  >
+                    Order Time{' '}
+                    {sort._sort === 'createdAt' &&
+                      (sort._order === 'asc' ? (
+                        <ArrowUpIcon className="w-4 h-4 inline"></ArrowUpIcon>
+                      ) : (
+                        <ArrowDownIcon className="w-4 h-4 inline"></ArrowDownIcon>
+                      ))}
+                  </th>
+                  <th
+                    className="py-3 px-0 text-left cursor-pointer"
+                    onClick={(e) =>
+                      handleSort({
+                        sort: 'updatedAt',
+                        order: sort?._order === 'asc' ? 'desc' : 'asc',
+                      })
+                    }
+                  >
+                    Last Updated{' '}
+                    {sort._sort === 'updatedAt' &&
+                      (sort._order === 'asc' ? (
+                        <ArrowUpIcon className="w-4 h-4 inline"></ArrowUpIcon>
+                      ) : (
+                        <ArrowDownIcon className="w-4 h-4 inline"></ArrowDownIcon>
+                      ))}
+                  </th>
+                  <th className="py-3 px-0 text-center">Actions</th>
                 </tr>
               </thead>
               <tbody className="text-gray-600 text-sm font-light">
@@ -131,13 +164,13 @@ function AdminOrders() {
                     key={order.id}
                     className="border-b border-gray-200 hover:bg-gray-100"
                   >
-                    <td className="py-3 px-6 text-left whitespace-nowrap">
+                    <td className="py-3 px-0 text-left whitespace-nowrap">
                       <div className="flex items-center">
                         <div className="mr-2"></div>
                         <span className="font-medium">{order.id}</span>
                       </div>
                     </td>
-                    <td className="py-3 px-6 text-left">
+                    <td className="py-3 px-0 text-left">
                       {order.items.map((item, index) => (
                         <div key={index} className="flex items-center">
                           <div className="mr-2">
@@ -154,12 +187,12 @@ function AdminOrders() {
                         </div>
                       ))}
                     </td>
-                    <td className="py-3 px-6 text-center">
+                    <td className="py-3 px-0 text-center">
                       <div className="flex items-center justify-center">
                         ${order.totalAmount}
                       </div>
                     </td>
-                    <td className="py-3 px-6 text-center">
+                    <td className="py-3 px-0 text-center">
                       <div className="">
                         <div>
                           <strong>{order.selectedAddress.name}</strong>,
@@ -171,7 +204,7 @@ function AdminOrders() {
                         <div>{order.selectedAddress.phone}, </div>
                       </div>
                     </td>
-                    <td className="py-3 px-6 text-center">
+                    <td className="py-3 px-0 text-center">
                       {order.id === editableOrderId ? (
                         <select onChange={(e) => handleOrderStatus(e, order)}>
                           <option value="pending">Pending</option>
@@ -190,13 +223,13 @@ function AdminOrders() {
                       )}
                     </td>
 
-                    <td className="py-3 px-6 text-center">
+                    <td className="py-3 px-0 text-center">
                       <div className="flex items-center justify-center">
                         {order.paymentMethod}
                       </div>
                     </td>
 
-                    <td className="py-3 px-6 text-center">
+                    <td className="py-3 px-0 text-center">
                       {order.id === editableOrderId ? (
                         <select
                           onChange={(e) => handleOrderPaymentStatus(e, order)}
@@ -215,7 +248,20 @@ function AdminOrders() {
                       )}
                     </td>
 
-                    <td className="py-3 px-6 text-center">
+                    <td className="py-3 px-0 text-center">
+                      <div className="flex items-center justify-center">
+                        {order.createdAt? new Date(order.createdAt).toLocaleString():null }
+                      </div>
+                    </td>
+
+
+                    <td className="py-3 px-0 text-center">
+                      <div className="flex items-center justify-center">
+                      {order.updatedAt? new Date(order.updatedAt).toLocaleString():null }
+                      </div>
+                    </td>
+
+                    <td className="py-3 px-0 text-center">
                       <div className="flex item-center justify-center">
                         <div className="w-6 mr-4 transform hover:text-purple-500 hover:scale-120">
                           <EyeIcon