Model.View.tsx Implementation Guide

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

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

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