Model.View.tsx Implementation Guide

1// File structure example
2export interface ProductViewProps {
3  product: cnst.Product;
4  className?: string;
5}
6
7// General view (standard)
8export const General = ({ product, className }: ProductViewProps) => (
9  <div className={clsx("space-y-6", className)}>
10    <h1 className="text-2xl font-bold">{product.name}</h1>
11    {/* Product details */}
12  </div>
13);
14
15// Dashboard view (condensed)
16export const Dashboard = ({ product }: ProductViewProps) => (
17  <div className="bg-base-100 p-4 rounded-lg">
18    <h2 className="text-lg font-bold">{product.name}</h2>
19    {/* Key metrics */}
20  </div>
21);
22
23// Timeline view (specialized)
24export const Timeline = ({ project }: ProjectViewProps) => (
25  <div className="project-timeline">
26    {/* Timeline visualization */}
27  </div>
28);

1// Consistent layout structure
2export const OrderView = ({ order }: OrderViewProps) => (
3  <div className="space-y-6">
4    {/* Header section */}
5    <div className="flex items-center justify-between">
6      <h1 className="text-2xl font-bold">Order #{order.number}</h1>
7      <span className="badge badge-lg">{order.status}</span>
8    </div>
9
10    {/* Responsive design */}
11    <div className="flex flex-col gap-6 lg:flex-row">
12      <div className="w-full lg:w-2/3">
13        {/* Order items table */}
14      </div>
15      <div className="w-full lg:w-1/3">
16        {/* Order summary card */}
17      </div>
18    </div>
19
20    {/* Conditional rendering */}
21    {order.status === 'delivered' && (
22      <div className="bg-success text-success-content p-4 rounded-lg">
23        <h2 className="text-lg font-medium">Delivery Information</h2>
24        {/* Delivery details */}
25      </div>
26    )}
27  </div>
28);

1// Status-based visualization
2export const ProjectStatusView = ({ project }: { project: cnst.Project }) => {
3  const statusColors = {
4    planning: 'bg-info text-info-content',
5    active: 'bg-success text-success-content',
6    onHold: 'bg-warning text-warning-content',
7    completed: 'bg-accent text-accent-content',
8    cancelled: 'bg-error text-error-content',
9  };
10
11  return (
12    <div className="flex items-center gap-2">
13      <span className={`badge ${statusColors[project.status] || 'bg-neutral'}`}>
14        {project.status}
15      </span>
16      <progress 
17        className="progress progress-primary w-64" 
18        value={project.progress} 
19        max="100" 
20      />
21      <span>{project.progress}%</span>
22    </div>
23  );
24};
25
26// Component composition
27const OrderHeader = ({ order }: { order: cnst.Order }) => (
28  <div className="flex justify-between items-center p-4 bg-base-200 rounded-t-lg">
29    <h1 className="text-xl font-bold">Order #{order.number}</h1>
30    <StatusBadge status={order.status} />
31  </div>
32);
33
34const OrderItems = ({ items }: { items: cnst.OrderItem[] }) => (
35  <div className="p-4">
36    {/* Render order items */}
37  </div>
38);
39
40const OrderSummary = ({ totals }: { totals: any }) => (
41  <div className="p-4 bg-base-100">
42    {/* Render order summary */}
43  </div>
44);
45
46export const OrderView = ({ order }: { order: cnst.Order }) => (
47  <div className="border rounded-lg overflow-hidden">
48    <OrderHeader order={order} />
49    <OrderItems items={order.items} />
50    <OrderSummary totals={order.totals} />
51  </div>
52);