k4rli/medreport_mrb2b
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(MED-105): update orders table to be by each separate order

Browse Source
This commit is contained in:
Karli
2025-08-14 12:59:42 +03:00
parent 465d2e0a00
commit 4c5ec1cfac
6 changed files with 138 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
app/home/(user)/_components/orders/order-block.tsx Normal file
View File

@@ -0,0 +1,36 @@
import { AnalysisOrder } from "~/lib/services/order.service";
import { Trans } from '@kit/ui/makerkit/trans';
import { StoreOrderLineItem } from "@medusajs/types";
import OrderItemsTable from "./order-items-table";
import Link from "next/link";
import { Eye } from "lucide-react";
export default function OrderBlock({ analysisOrder, itemsAnalysisPackage, itemsOther }: {
analysisOrder: AnalysisOrder,
itemsAnalysisPackage: StoreOrderLineItem[],
itemsOther: StoreOrderLineItem[],
}) {
return (
<div className="flex flex-col gap-4">
<h4>
<Trans i18nKey="analysis-results:orderTitle" values={{ orderNumber: analysisOrder.medusa_order_id }} />
</h4>
<div className="flex gap-2">
<h5>
<Trans i18nKey={`orders:status.${analysisOrder.status}`} />
</h5>
<Link href={`/home/order/${analysisOrder.id}`} className="flex items-center justify-between text-small-regular">
<button
className="flex gap-x-1 text-ui-fg-subtle hover:text-ui-fg-base cursor-pointer"
>
<Eye />
</button>
</Link>
</div>
<div className="flex flex-col gap-4">
<OrderItemsTable items={itemsAnalysisPackage} title="orders:table.analysisPackage" analysisOrder={analysisOrder} />
<OrderItemsTable items={itemsOther} title="orders:table.otherOrders" analysisOrder={analysisOrder} />
</div>
</div>
)
}

77
app/home/(user)/_components/orders/order-items-table.tsx Normal file
View File

@@ -0,0 +1,77 @@
import { Trans } from '@kit/ui/trans';
import {
Table,
TableBody,
TableHead,
TableRow,
TableHeader,
TableCell,
} from '@kit/ui/table';
import { StoreOrderLineItem } from "@medusajs/types";
import { AnalysisOrder } from '~/lib/services/order.service';
import { formatDate } from 'date-fns';
import Link from 'next/link';
import { Eye } from 'lucide-react';
export default function OrderItemsTable({ items, title, analysisOrder }: {
items: StoreOrderLineItem[];
title: string;
analysisOrder: AnalysisOrder;
}) {
if (!items || items.length === 0) {
return null;
}
return (
<Table className="rounded-lg border border-separate">
<TableHeader className="text-ui-fg-subtle txt-medium-plus">
<TableRow>
<TableHead className="px-6">
<Trans i18nKey={title} />
</TableHead>
<TableHead className="px-6">
<Trans i18nKey="orders:table.createdAt" />
</TableHead>
<TableHead className="px-6">
<Trans i18nKey="orders:table.status" />
</TableHead>
<TableHead className="px-6">
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{items
.sort((a, b) => (a.created_at ?? "") > (b.created_at ?? "") ? -1 : 1)
.map((orderItem) => (
<TableRow className="w-full" key={orderItem.id}>
<TableCell className="text-left w-[100%] px-6">
<p className="txt-medium-plus text-ui-fg-base">
{orderItem.product_title}
</p>
</TableCell>
<TableCell className="px-6 whitespace-nowrap">
{formatDate(orderItem.created_at, 'dd.MM.yyyy HH:mm')}
</TableCell>
<TableCell className="px-6 min-w-[180px]">
<Trans i18nKey={`orders:status.${analysisOrder.status}`} />
</TableCell>
<TableCell className="text-right px-6">
<span className="flex gap-x-1 justify-end w-[30px]">
<Link href={`/home/analysis-results`} className="flex items-center justify-between text-small-regular">
<button
className="flex gap-x-1 text-ui-fg-subtle hover:text-ui-fg-base cursor-pointer"
>
<Eye />
</button>
</Link>
</span>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
)
}

43
app/home/(user)/_components/orders/orders-item.tsx
View File

@@ -1,43 +0,0 @@
import {
TableCell,
TableRow,
} from '@kit/ui/table';
import { Eye } from "lucide-react";
import Link from "next/link";
import { formatDate } from "date-fns";
import { IOrderLineItem } from "./types";
import { Trans } from '@kit/ui/trans';
export default function OrdersItem({ orderItem }: {
orderItem: IOrderLineItem,
}) {
return (
<TableRow className="w-full">
<TableCell className="text-left w-[100%] px-6">
<p className="txt-medium-plus text-ui-fg-base">
{orderItem.item.product_title}
</p>
</TableCell>
<TableCell className="px-6 whitespace-nowrap">
{formatDate(orderItem.item.created_at, 'dd.MM.yyyy HH:mm')}
</TableCell>
<TableCell className="px-6 whitespace-nowrap">
<Trans i18nKey={`orders:status.${orderItem.orderStatus}`} />
</TableCell>
<TableCell className="text-right px-6">
<span className="flex gap-x-1 justify-end w-[60px]">
<Link href={`/home/order/${orderItem.orderId}`} className="flex items-center justify-between text-small-regular">
<button
className="flex gap-x-1 text-ui-fg-subtle hover:text-ui-fg-base cursor-pointer"
>
<Eye />
</button>
</Link>
</span>
</TableCell>
</TableRow>
)
}

44
app/home/(user)/_components/orders/orders-table.tsx
View File

@@ -1,44 +0,0 @@
import { Trans } from '@kit/ui/trans';
import {
Table,
TableBody,
TableHead,
TableRow,
TableHeader,
} from '@kit/ui/table';
import OrdersItem from "./orders-item";
import { IOrderLineItem } from "./types";
export default function OrdersTable({ orderItems, title }: {
orderItems: IOrderLineItem[];
title: string;
}) {
if (!orderItems || orderItems.length === 0) {
return null;
}
return (
<Table className="rounded-lg border border-separate">
<TableHeader className="text-ui-fg-subtle txt-medium-plus">
<TableRow>
<TableHead className="px-6">
<Trans i18nKey={title} />
</TableHead>
<TableHead className="px-6">
<Trans i18nKey="orders:table.createdAt" />
</TableHead>
<TableHead className="px-6">
<Trans i18nKey="orders:table.status" />
</TableHead>
<TableHead className="px-6">
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{orderItems
.sort((a, b) => (a.item.created_at ?? "") > (b.item.created_at ?? "") ? -1 : 1)
.map((orderItem) => (<OrdersItem key={orderItem.item.id} orderItem={orderItem} />))}
</TableBody>
</Table>
)
}

8
app/home/(user)/_components/orders/types.ts
View File

@@ -1,8 +0,0 @@
import { StoreOrderLineItem } from "@medusajs/types";
export interface IOrderLineItem {
item: StoreOrderLineItem;
medusaOrderId: string;
orderId: number;
orderStatus: string;
}