Show Page: Grouped Field Display

• Use Show to wrap the detail view.
• Group fields with UI components for better presentation.

src/customers/CustomersShow.tsx

import { Show, SimpleShowLayout, TextField, ReferenceField, RecordField, ArrayField, DataTable, ReferenceManyField, SingleFieldList, NumberField } from "@/components/admin";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

export const CustomersShow = () => (
  <Show>
    <div className="grid gap-6">
      <Card>
        <CardHeader>
          <CardTitle>Basic Info</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="text-sm font-medium text-gray-700">ID </label>
              <NumberField source="id" className="mt-1" />
            </div>
            <div>
              <label className="text-sm font-medium text-gray-700">Name </label>
              <TextField source="name" className="mt-1" />
            </div>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="text-sm font-medium text-gray-700">Age </label>
              <TextField source="age" className="mt-1" />
            </div>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="text-sm font-medium text-gray-700">Email </label>
              <TextField source="email" className="mt-1" />
            </div>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="text-sm font-medium text-gray-700">Created At </label>
              <TextField source="created_at" className="mt-1" />
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  </Show>
);

export default CustomersShow;