show payment info

api.saladeaula.digital/app/routes/orders/__init__.py

@@ -23,7 +23,7 @@ def get_order(order_id: str):
     order = dyn.collection.get_items(
         TransactKey(order_id)
         + SortKey('0')
-        + SortKey('ITEMS', rename_key='items')
+        + SortKey('ITEMS', rename_key='items', path_spec='items')
         + SortKey('CREATED_BY', rename_key='created_by')
         + SortKey('ADDRESS', rename_key='address')
         + SortKey('CREDIT_CARD', rename_key='credit_card')
@@ -45,5 +45,7 @@ def get_order(order_id: str):
             'payment_attempts': attempts['items'],
             'enrollments': enrollments['items'],
         }
+        # Post-migration (orders): remove the following lines
+        | ({'created_at': order['create_date']} if 'create_date' in order else {})
         | ({'paid_at': order['payment_date']} if 'payment_date' in order else {})
     )

apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.buy/route.tsx

@@ -149,7 +149,7 @@ export default function Route({
         </BreadcrumbList>
       </Breadcrumb>
 
-      <div className="lg:max-w-4xl mx-auto space-y-2.5">
+      <div className="lg:max-w-4xl mx-auto">
         <Card>
           <CardHeader>
             <CardTitle className="text-2xl">Comprar matrículas</CardTitle>

apps/admin.saladeaula.digital/app/routes/_.$orgid.payments.$id._index/route.tsx

@@ -1,11 +1,12 @@
 import type { Route } from './+types/route'
 
 import { formatCEP } from '@brazilian-utils/brazilian-utils'
-import { Suspense, useEffect } from 'react'
-import { Await, Link } from 'react-router'
+import { CalendarClockIcon, CalendarIcon, UserIcon } from 'lucide-react'
+import { useEffect } from 'react'
+import { Link } from 'react-router'
 
 import { Currency } from '@repo/ui/components/currency'
-import { Skeleton } from '@repo/ui/components/skeleton'
+import { DateTime } from '@repo/ui/components/datetime'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -17,6 +18,8 @@ import {
 import {
   Card,
   CardContent,
+  CardDescription,
+  CardFooter,
   CardHeader,
   CardTitle
 } from '@repo/ui/components/ui/card'
@@ -27,6 +30,15 @@ import {
   ItemGroup,
   ItemTitle
 } from '@repo/ui/components/ui/item'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '@repo/ui/components/ui/table'
 import { paymentMethods } from '@repo/ui/routes/orders/data'
 import { request as req } from '@repo/util/request'
 import { useWizardStore } from '../_.$orgid.enrollments.buy/store'
@@ -51,8 +63,22 @@ export async function loader({ context, request, params }: Route.LoaderArgs) {
 
 export default function Route({ loaderData: { order } }: Route.ComponentProps) {
   const { reset } = useWizardStore()
-  const { address, total, credit_card, payment_method, invoice, installments } =
-    order
+  const {
+    status,
+    address,
+    total,
+    credit_card,
+    payment_method,
+    due_date,
+    created_at,
+    invoice,
+    installments,
+    interest_amount,
+    discount,
+    subtotal,
+    items = [],
+    created_by
+  } = order
 
   useEffect(() => {
     reset()
@@ -74,12 +100,19 @@ export default function Route({ loaderData: { order } }: Route.ComponentProps) {
         </BreadcrumbList>
       </Breadcrumb>
 
-      <Card className="lg:max-w-4xl mx-auto space-y-2.5">
+      <Card className="lg:max-w-4xl mx-auto">
         <CardHeader>
           <CardTitle className="text-2xl">Detalhes do pagamento</CardTitle>
+          <CardDescription>
+            <ul className="flex gap-2.5 *:flex *:gap-1 *:items-center [&_svg]:size-3.5">
+              <li>
+                <CalendarClockIcon /> <DateTime>{due_date}</DateTime>
+              </li>
+            </ul>
+          </CardDescription>
         </CardHeader>
 
-        <CardContent>
+        <CardContent className="space-y-4">
           <ItemGroup className="grid lg:grid-cols-2 gap-4">
             <Item variant="outline">
               <ItemContent>
@@ -120,7 +153,88 @@ export default function Route({ loaderData: { order } }: Route.ComponentProps) {
             </Item>
           </ItemGroup>
           {/*<pre>{JSON.stringify(order, null, 2)}</pre>*/}
+
+          <Table className="pointer-events-none">
+            <TableHeader>
+              <TableRow>
+                <TableHead>Curso</TableHead>
+                <TableHead>Quantidade</TableHead>
+                <TableHead>Valor unit.</TableHead>
+                <TableHead>Total</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {items?.map(({ name, unit_price, quantity }, index) => {
+                return (
+                  <TableRow key={index}>
+                    <TableCell>{name}</TableCell>
+                    <TableCell>{quantity}</TableCell>
+                    <TableCell>
+                      <Currency>{unit_price}</Currency>
+                    </TableCell>
+                    <TableCell>
+                      <Currency>{unit_price * quantity}</Currency>
+                    </TableCell>
+                  </TableRow>
+                )
+              })}
+            </TableBody>
+
+            {/* Summary */}
+            <TableFooter>
+              <TableRow>
+                <TableCell className="text-right" colSpan={3}>
+                  Subtotal
+                </TableCell>
+                <TableCell>
+                  <Currency>{subtotal}</Currency>
+                </TableCell>
+              </TableRow>
+              {/* Discount */}
+              <TableRow>
+                <TableCell className="text-right" colSpan={3}>
+                  Descontos
+                </TableCell>
+                <TableCell>
+                  <Currency>{discount}</Currency>
+                </TableCell>
+              </TableRow>
+              {/* Interest */}
+              {interest_amount ? (
+                <TableRow>
+                  <TableCell className="text-right" colSpan={3}>
+                    Juros
+                  </TableCell>
+                  <TableCell>
+                    <Currency>{interest_amount}</Currency>
+                  </TableCell>
+                </TableRow>
+              ) : (
+                <></>
+              )}
+              {/* Total */}
+              <TableRow>
+                <TableCell className="text-right" colSpan={3}>
+                  Total
+                </TableCell>
+                <TableCell>
+                  <Currency>{total}</Currency>
+                </TableCell>
+              </TableRow>
+            </TableFooter>
+          </Table>
         </CardContent>
+
+        {/*        <CardFooter>
+          <ul className="flex gap-2.5 *:flex *:gap-1 *:items-center [&_svg]:size-3.5">
+            <li>
+              <CalendarIcon /> <DateTime>{created_at}</DateTime>
+            </li>{' '}
+            <li>
+              <UserIcon /> {created_by.name}
+            </li>
+          </ul>
+        </CardFooter>*/}
       </Card>
     </div>
   )