robodev 0.24.0 → 0.25.0

package/templates/marketplace/apps/fe/src/components/features/marketplace/OrderStatusTag.tsx

@@ -0,0 +1,24 @@
+import { Tag } from "@povio/ui";
+import { useTranslation } from "react-i18next";
+
+type OrderStatus = "paid" | "shipped" | "completed";
+
+const STATUS_COLOR: Record<OrderStatus, "warning" | "primary" | "success"> = {
+  paid: "warning",
+  shipped: "primary",
+  completed: "success",
+};
+
+interface OrderStatusTagProps {
+  status: string;
+}
+
+export function OrderStatusTag({ status }: OrderStatusTagProps) {
+  const { t } = useTranslation();
+  const known = status === "paid" || status === "shipped" || status === "completed" ? status : null;
+  if (!known) {
+    return null;
+  }
+
+  return <Tag color={STATUS_COLOR[known]}>{t(($) => $.orders.status[known])}</Tag>;
+}

package/templates/marketplace/apps/fe/src/components/features/marketplace/OrderSummaryCard.tsx

@@ -0,0 +1,39 @@
+import { Button, Typography } from "@povio/ui/tanstack";
+import { useTranslation } from "react-i18next";
+
+import { Card } from "@/components/shared/ui/Card";
+import type { OrderModels } from "@/openapi/order/order.models";
+import { formatCents } from "@/utils/listing-form";
+
+import { OrderStatusTag } from "./OrderStatusTag";
+
+interface OrderSummaryCardProps {
+  order: OrderModels.OrderDto;
+}
+
+export function OrderSummaryCard({ order }: OrderSummaryCardProps) {
+  const { t } = useTranslation();
+
+  return (
+    <Card>
+      <Typography size="title-5">{order.items.map((item) => item.title).join(", ")}</Typography>
+      <div className="flex flex-wrap items-center gap-2">
+        <OrderStatusTag status={order.status} />
+        <Typography
+          size="label-3"
+          className="text-text-default-2"
+        >
+          {formatCents(order.totalCents)}
+        </Typography>
+      </div>
+      <Button
+        size="xs"
+        variant="outlined"
+        color="secondary"
+        link={{ to: "/orders/$id", params: { id: order.id } }}
+      >
+        {t(($) => $.orders.view)}
+      </Button>
+    </Card>
+  );
+}

package/templates/marketplace/apps/fe/src/components/features/marketplace/OrdersPage.tsx

@@ -1,12 +1,4 @@
-import {
-  Button,
-  TextArea,
-  TextInput,
-  Typography,
-  useForm,
-  useFormValue,
-  useToast,
-} from "@povio/ui/tanstack";
+import { Button, TextArea, TextInput, Typography, useForm, useFormValue, useToast } from "@povio/ui/tanstack";
 import { useQueryClient } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
 import { z } from "zod";
@@ -21,6 +13,9 @@ import { ReviewQueries } from "@/openapi/review/review.queries";
 import { SaleQueries } from "@/openapi/sale/sale.queries";
 import { formatCents } from "@/utils/listing-form";
 
+import { OrderStatusTag } from "./OrderStatusTag";
+import { OrderSummaryCard } from "./OrderSummaryCard";
+
 export function OrdersPage() {
   const { t } = useTranslation();
   const { data: purchases, isLoading: loadingPurchases } = PurchaseQueries.useGetAll();
@@ -30,58 +25,59 @@ export function OrdersPage() {
     <div className="flex flex-col gap-8">
       <PageHeader title={t(($) => $.orders.title)} />
       <section className="flex flex-col gap-3">
-        <Typography size="title-5" variant="prominent-1">
+        <Typography
+          size="title-5"
+          variant="prominent-1"
+        >
           {t(($) => $.orders.purchases)}
         </Typography>
         {loadingPurchases ? (
           <LoadingState />
         ) : !purchases || purchases.length === 0 ? (
-          <Typography size="body-3" className="text-text-default-2">
+          <Typography
+            size="body-3"
+            className="text-text-default-2"
+          >
             {t(($) => $.orders.emptyPurchases)}
           </Typography>
         ) : (
-          purchases.map((order) => <OrderSummary key={order.id} order={order} />)
+          purchases.map((order) => (
+            <OrderSummaryCard
+              key={order.id}
+              order={order}
+            />
+          ))
         )}
       </section>
       <section className="flex flex-col gap-3">
-        <Typography size="title-5" variant="prominent-1">
+        <Typography
+          size="title-5"
+          variant="prominent-1"
+        >
           {t(($) => $.orders.sales)}
         </Typography>
         {loadingSales ? (
           <LoadingState />
         ) : !sales || sales.length === 0 ? (
-          <Typography size="body-3" className="text-text-default-2">
+          <Typography
+            size="body-3"
+            className="text-text-default-2"
+          >
             {t(($) => $.orders.emptySales)}
           </Typography>
         ) : (
-          sales.map((order) => <OrderSummary key={order.id} order={order} />)
+          sales.map((order) => (
+            <OrderSummaryCard
+              key={order.id}
+              order={order}
+            />
+          ))
         )}
       </section>
     </div>
   );
 }
 
-function OrderSummary({ order }: { order: OrderModels.OrderDto }) {
-  const { t } = useTranslation();
-  return (
-    <Card>
-      <Typography size="title-5">{order.items.map((item) => item.title).join(", ")}</Typography>
-      <Typography size="label-3" className="text-text-default-2">
-        {t(($) => $.orders.status[order.status as "paid" | "shipped" | "completed"])} ·{" "}
-        {formatCents(order.totalCents)}
-      </Typography>
-      <Button
-        size="xs"
-        variant="outlined"
-        color="secondary"
-        link={{ to: "/orders/$id", params: { id: order.id } }}
-      >
-        {order.id.slice(0, 8)}
-      </Button>
-    </Card>
-  );
-}
-
 interface OrderDetailPageProps {
   order: OrderModels.OrderDto;
   role: "buyer" | "seller";
@@ -159,34 +155,47 @@ export function OrderDetailPage({ order, role }: OrderDetailPageProps) {
         title={t(($) => $.orders.title)}
       />
       <Card>
-        <Typography size="label-3" className="text-text-default-2">
-          {t(($) => $.orders.status[order.status as "paid" | "shipped" | "completed"])}
-        </Typography>
+        <OrderStatusTag status={order.status} />
         {order.items.map((item) => (
-          <Typography key={item.id} size="body-3">
+          <Typography
+            key={item.id}
+            size="body-3"
+          >
             {item.qty} × {item.title} · {formatCents(item.unitPriceCents)}
           </Typography>
         ))}
         <Typography size="body-3">
           {t(($) => $.orders.total)}: {formatCents(order.totalCents)}
         </Typography>
-        <Typography size="label-3" className="text-text-default-2">
+        <Typography
+          size="label-3"
+          className="text-text-default-2"
+        >
           {order.shippingName}, {order.shippingLine1}, {order.shippingCity}
         </Typography>
         {role === "seller" && order.status === "paid" ? (
-          <Button size="xs" onPress={() => void onShip()}>
+          <Button
+            size="xs"
+            onPress={() => void onShip()}
+          >
             {t(($) => $.orders.ship)}
           </Button>
         ) : null}
         {role === "buyer" && order.status === "shipped" ? (
-          <Button size="xs" onPress={() => void onComplete()}>
+          <Button
+            size="xs"
+            onPress={() => void onComplete()}
+          >
             {t(($) => $.orders.complete)}
           </Button>
         ) : null}
       </Card>
 
       {role === "buyer" && order.status === "completed" ? (
-        <form onSubmit={reviewForm.handleSubmit(onReview)} className="flex max-w-xl flex-col gap-3">
+        <form
+          onSubmit={reviewForm.handleSubmit(onReview)}
+          className="flex max-w-xl flex-col gap-3"
+        >
           <Typography size="title-5">{t(($) => $.orders.review)}</Typography>
           <div className="flex flex-wrap gap-1">
             {order.items.map((item) => (
@@ -214,7 +223,10 @@ export function OrderDetailPage({ order, role }: OrderDetailPageProps) {
             field={{ form: reviewForm, name: "body" }}
             label={t(($) => $.orders.reviewBody)}
           />
-          <Button type="submit" size="xs">
+          <Button
+            type="submit"
+            size="xs"
+          >
             {t(($) => $.orders.reviewSubmit)}
           </Button>
         </form>

package/templates/marketplace/apps/fe/src/pages/(private)/my-listings.tsx

@@ -1,22 +1,32 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { useTranslation } from "react-i18next";
+import { z } from "zod";
 
 import { MyListingsPage } from "@/components/features/marketplace/MyListingsPage";
 import { AppHead } from "@/components/shared/head/AppHead";
 
+const myListingsSearchSchema = z.object({
+  create: z
+    .union([z.boolean(), z.string()])
+    .optional()
+    .transform((value) => value === true || value === "true"),
+});
+
 function PageComponent() {
   const { t } = useTranslation();
+  const { create } = Route.useSearch();
   return (
     <>
       <AppHead
         title={t(($) => $.sell.head.title)}
         description={t(($) => $.sell.head.description)}
       />
-      <MyListingsPage />
+      <MyListingsPage openCreate={create} />
     </>
   );
 }
 
 export const Route = createFileRoute("/(private)/my-listings")({
   component: PageComponent,
+  validateSearch: myListingsSearchSchema,
 });

package/templates/marketplace/apps/fe/src/pages/(private)/sell/index.tsx

@@ -1,16 +1,12 @@
-import { createFileRoute } from "@tanstack/react-router";
-import { useTranslation } from "react-i18next";
-
-import { ListingFormPage } from "@/components/features/marketplace/ListingFormPage";
-import { AppHead } from "@/components/shared/head/AppHead";
+import { Navigate, createFileRoute } from "@tanstack/react-router";
 
 function PageComponent() {
-  const { t } = useTranslation();
   return (
-    <>
-      <AppHead title={t(($) => $.listingForm.createTitle)} />
-      <ListingFormPage />
-    </>
+    <Navigate
+      to="/my-listings"
+      search={{ create: true }}
+      replace
+    />
   );
 }
 

package/templates/marketplace/package.json

@@ -11,7 +11,7 @@
     "@robodev-ai/sdk": "^0.6.0"
   },
   "devDependencies": {
-    "robodev": "^0.24.0",
+    "robodev": "^0.25.0",
     "rulesync": "^8.18.0",
     "typescript": "^5.9.2"
   }

package/templates/space/package.json

@@ -11,7 +11,7 @@
     "@robodev-ai/sdk": "^0.6.0"
   },
   "devDependencies": {
-    "robodev": "^0.24.0",
+    "robodev": "^0.25.0",
     "rulesync": "^8.18.0",
     "typescript": "^5.9.2"
   }