Description (optional)

setData('description', e.target.value)}
                    placeholder="Why would this feature be useful?"
                    rows={4}
                    maxLength={1000}
                  />
                  <InputError message={errors.description} />
                </div>
                <div className="flex justify-end gap-2">
                  <Button type="button" variant="outline" onClick={() => setOpen(false)}>
                    Cancel
                  </Button>
                  <LoadingButton type="submit" loading={processing}>
                    Submit Request
                  </LoadingButton>
                </div>
              </form>
            </DialogContent>
          </Dialog>
        }
      />

{/* Roadmap status tabs */}
      <div className="mt-6 flex flex-wrap gap-2 border-b border-border pb-3">
        {ROADMAP_TABS.map((tab) => {
          const count = tabCount(tab);
          const isActive = status_filter === tab.value;
          return (
            <button
              key={tab.value}
              onClick={() => handleTabChange(tab.value)}
              className={`flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium transition-colors ${
                isActive
                  ? 'bg-primary text-primary-foreground'
                  : 'bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground'
              }`}
            >
              {tab.label}
              {count > 0 && (
                <span
                  className={`rounded-full px-1.5 py-0.5 text-xs ${
                    isActive ? 'bg-primary-foreground/20 text-primary-foreground' : 'bg-background text-foreground'
                  }`}
                >
                  {count}
                </span>
              )}
            </button>
          );
        })}
      </div>

<div className="mt-4 space-y-3">
        {feature_requests.data.length === 0 ? (
          <EmptyState
            title="No feature requests yet"
            description={
              status_filter
                ? `No requests with status "${STATUS_LABELS[status_filter] ?? status_filter}" found.`
                : 'Be the first to suggest a feature you\'d like to see.'
            }
          />
        ) : (
          feature_requests.data.map((request) => (
            <Card key={request.id} className="transition-shadow hover:shadow-sm">
              <CardHeader className="pb-2">
                <div className="flex items-start justify-between gap-4">
                  <div className="flex-1 space-y-1">
                    <div className="flex flex-wrap items-center gap-2">
                      <CardTitle className="text-base">{request.title}</CardTitle>
                      {myRequestSet.has(request.id) && (
                        <span className="rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground">
                          Your request
                        </span>
                      )}
                    </div>
                    {request.description && (
                      <CardDescription>{request.description}</CardDescription>
                    )}
                  </div>
                  <div className="flex items-center gap-2">
                    <Badge variant={STATUS_VARIANTS[request.status] ?? 'outline'}>
                      {STATUS_LABELS[request.status] ?? request.status}
                    </Badge>
                    <Button
                      variant={votedSet.has(request.id) ? 'default' : 'outline'}
                      size="sm"
                      className="flex h-14 w-14 flex-col gap-0.5"
                      onClick={() => handleVote(request.id)}
                      aria-label={`Upvote ${request.title}`}
                      aria-pressed={votedSet.has(request.id)}
                    >
                      <ChevronUp className="h-4 w-4" />
                      <span className="text-xs font-semibold">{request.vote_count}</span>
                    </Button>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <p className="text-muted-foreground text-xs">Suggested by {request.user.name}</p>
              </CardContent>
            </Card>
          ))
        )}
      </div>
    </DashboardLayout>
  );
}