feat(MED-50): initial analysis package orders table

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

@@ -0,0 +1,44 @@
+import {
+  TableCell,
+  TableRow,
+} from '@kit/ui/table';
+import { Eye } from "lucide-react";
+import Link from "next/link";
+import { formatDate } from "date-fns";
+import { IAnalysisPackageOrder } from "./types";
+
+export default function OrdersItem({ orderItem }: {
+  orderItem: IAnalysisPackageOrder,
+}) {
+  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>
+
+      {orderItem.orderStatus && (
+        <TableCell className="px-6">
+          {orderItem.orderStatus}
+        </TableCell>
+      )}
+
+      <TableCell className="text-right px-6">
+        <span className="flex gap-x-1 justify-end w-[60px]">
+          <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>
+  )
+}

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

@@ -0,0 +1,46 @@
+import { Trans } from '@kit/ui/trans';
+import {
+  Table,
+  TableBody,
+  TableHead,
+  TableRow,
+  TableHeader,
+} from '@kit/ui/table';
+import OrdersItem from "./orders-item";
+import { IAnalysisPackageOrder } from "./types";
+
+const IS_SHOWN_ORDER_STATUS = true as boolean;
+
+export default function OrdersTable({ orderItems }: {
+  orderItems: IAnalysisPackageOrder[];
+}) {
+  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="orders:table.analysisPackage" />
+          </TableHead>
+          <TableHead className="px-6">
+            <Trans i18nKey="orders:table.createdAt" />
+          </TableHead>
+          {IS_SHOWN_ORDER_STATUS && (
+            <TableHead className="px-6">
+            </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>
+  )
+}

app/home/(user)/_components/orders/types.ts

@@ -0,0 +1,7 @@
+import { StoreOrderLineItem } from "@medusajs/types";
+
+export interface IAnalysisPackageOrder {
+  item: StoreOrderLineItem;
+  orderId: string;
+  orderStatus: string;
+}