show-data

Show Data

Displays saved data in a styled, readable format. Turns raw database rows into cards, tables, or dashboard views.

Process

Step 1: Identify What to Show

From context, determine:

• Which table/data source (what did save-data create?)
• Who sees it (public visitors or admin only?)
• How many items expected (handful or hundreds?)

Step 2: Choose Display Format

Best for	Format	Use when
Few items with details	Cards	Portfolio items, testimonials, team members
Many items to scan	Table	Admin view of submissions, orders, bookings
Stats overview	Dashboard	Counts, recent activity, key numbers
Timeline	List	Activity log, blog posts, updates

Don't ask the designer which format — pick the best one for their data. They'll say "actually, can it be cards instead?" if they want something different.

Step 3: Build the View

Server component that fetches data (Next.js App Router):

import { createClient } from '@/utils/supabase/server'

export default async function DashboardPage() {
  const supabase = await createClient()
  const { data: items } = await supabase
    .from('table_name')
    .select('*')
    .order('created_at', { ascending: false })

  return (
    <div className="max-w-4xl mx-auto px-4 py-12">
      <h1 className="text-3xl font-bold mb-8">Your [Items]</h1>

      {items?.length === 0 ? (
        <EmptyState />
      ) : (
        <div className="space-y-4">
          {items?.map((item) => (
            <ItemCard key={item.id} item={item} />
          ))}
        </div>
      )}
    </div>
  )
}

Step 4: Empty State

Never show a blank page. Always show an empty state:

function EmptyState() {
  return (
    <div className="text-center py-16">
      <p className="text-gray-400 text-lg">No entries yet.</p>
      <p className="text-gray-400 text-sm mt-2">
        When someone submits the form, their entry will appear here.
      </p>
    </div>
  )
}

Step 5: Test