Order Summaries

export const orderItems = [
  {
    id: "1",
    name: "Custom Notebook",
    price: 20.0,
    variant: "Brown / B5 / Grid",
    quantity: 1,
    image: "/images/products/list1.png"
  },
  {
    id: "2",
    name: "Custom T-shirt",
    price: 10.0,
    variant: "Blue / Medium",
    quantity: 1,
    image: "/images/products/list2.png"
  }
];

import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Trash2 } from "lucide-react";

interface OrderItemProps {
  id: string;
  name: string;
  price: number;
  variant: string;
  quantity: number;
  image: string;
}

export const OrderItem = ({ name, price, variant, quantity, image }: OrderItemProps) => {
  return (
    <div className="flex items-start gap-4 border-b py-6 last:border-b-0">
      <img src={image} alt={name} className="h-20 w-20 rounded border object-cover" />
      <div className="flex-1 space-y-1">
        <h3 className="font-medium">{name}</h3>
        <p className="text-2xl font-semibold">${price.toFixed(2)}</p>
        <p className="text-muted-foreground text-sm">{variant}</p>
      </div>
      <div className="flex items-center gap-4">
        <Input type="number" value={quantity} className="w-24 text-center" readOnly />
        <div className="min-w-[80px] text-right">
          <p className="text-lg font-semibold">${(price * quantity).toFixed(2)}</p>
        </div>
        <Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground">
          <Trash2 className="h-4 w-4" />
        </Button>
      </div>
    </div>
  );
};

import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";

import { OrderItem } from "./order-item";
import { orderItems } from "./data";

export const OrderItems = () => {
  return (
    <Card className="shadow-none">
      <CardContent>
        <div className="">
          <div className="mb-6 flex items-center justify-between gap-3">
            <h2 className="text-xl font-semibold">Order Items</h2>
            <Badge variant="destructive">Unfulfilled</Badge>
          </div>
        </div>

        <div className="divide-y">
          {orderItems.map((item) => (
            <OrderItem key={item.id} {...item} />
          ))}
        </div>

        <div className="mt-6 flex items-center justify-between">
          <p className="text-muted-foreground text-sm">
            Effortlessly manage your orders with our intuitive Order List page.
          </p>
          <div className="flex gap-3">
            <Button variant="outline">Fulfill item</Button>
            <Button>Create shipping label</Button>
          </div>
        </div>
      </CardContent>
    </Card>
  );
};

import { Card } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { ChevronDown } from "lucide-react";

interface OrderSummaryProps {
  subtotal: number;
  discount: number;
  shipping: number;
  total: number;
  paidAmount: number;
}

export const OrderSummary = ({
  subtotal,
  discount,
  shipping,
  total,
  paidAmount
}: OrderSummaryProps) => {
  return (
    <Card className="p-6">
      <div className="mb-6 flex items-start justify-between">
        <div className="flex items-center gap-3">
          <h2 className="text-xl font-semibold">Order Summary</h2>
          <Badge variant="secondary" className="bg-orange-100 text-orange-800 hover:bg-orange-100">
            Payment pending
          </Badge>
        </div>
        <div className="text-muted-foreground flex items-center gap-2 text-sm">
          <span>Use this personalized guide to get your store up and running.</span>
          <ChevronDown className="h-4 w-4" />
        </div>
      </div>

      <div className="space-y-4">
        <div className="flex justify-between">
          <span className="text-muted-foreground">Subtotal</span>
          <div className="text-right">
            <span className="text-muted-foreground mr-8">2 item</span>
            <span className="font-medium">${subtotal.toFixed(2)}</span>
          </div>
        </div>

        <div className="flex justify-between">
          <span className="text-muted-foreground">Discount</span>
          <div className="text-right">
            <span className="text-muted-foreground mr-8">New customer</span>
            <span className="font-medium">-${discount.toFixed(2)}</span>
          </div>
        </div>

        <div className="flex justify-between border-b pb-4">
          <span className="text-muted-foreground">Shipping</span>
          <div className="text-right">
            <span className="text-muted-foreground mr-8">Free shipping</span>
            <span className="font-medium">${shipping.toFixed(2)}</span>
          </div>
        </div>

        <div className="flex justify-between pt-2 text-lg font-semibold">
          <span>Total</span>
          <span>${total.toFixed(2)}</span>
        </div>

        <div className="flex justify-between border-t pt-4">
          <span className="text-muted-foreground">Paid by customer</span>
          <span className="font-medium">${paidAmount.toFixed(2)}</span>
        </div>

        <div className="flex items-center justify-between">
          <span className="text-muted-foreground">Payment due when invoice is sent</span>
          <Button variant="link" className="h-auto p-0">
            Edit
          </Button>
        </div>
      </div>

      <div className="mt-6 flex items-center justify-between">
        <p className="text-muted-foreground text-sm">
          Review your order at a glance on the Order Summary page.
        </p>
        <div className="flex gap-3">
          <Button variant="outline">Send invoice</Button>
          <Button>Collect payment</Button>
        </div>
      </div>
    </Card>
  );
};

import { Badge } from "@/components/ui/badge";

import { OrderItems } from "./order-items";
import { OrderSummary } from "./order-summary";

export default function Page() {
  return (
    <div className="bg-background min-h-screen p-4 md:p-8">
      <div className="mx-auto max-w-4xl space-y-6">
        <header className="space-y-2">
          <div className="flex flex-wrap items-center gap-3">
            <h1 className="text-2xl font-semibold">Order ID: #430011564329</h1>
            <Badge
              variant="secondary"
              className="bg-orange-100 text-orange-800 hover:bg-orange-100">
              Payment pending
            </Badge>
            <Badge variant="destructive">Unfulfilled</Badge>
          </div>
          <p className="text-muted-foreground text-sm">
            January 12, 2024 at 10:30 pm from Draft Orders
          </p>
        </header>

        <OrderItems />

        <OrderSummary subtotal={30.0} discount={2.0} shipping={0.0} total={28.0} paidAmount={0.0} />
      </div>
    </div>
  );
}