dashboard improvements

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/dashboards/list-dashboards/index.tsx

@@ -16,12 +16,7 @@ interface Props {
 const ListDashboardsServer = async ({ projectId }: Props) => {
   const dashboards = await getDashboardsByProjectId(projectId);
 
-  return (
+  return <ListDashboards dashboards={dashboards} />;
-    <>
-      {dashboards.length > 0 && <HeaderDashboards />}
-      <ListDashboards dashboards={dashboards} />
-    </>
-  );
 };
 
 export default withSuspense(ListDashboardsServer, FullPageLoadingState);

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/dashboards/list-dashboards/list-dashboards.tsx

@@ -20,7 +20,6 @@ import {
   Pencil,
   PieChartIcon,
   PlusIcon,
-  SquarePenIcon,
   Trash,
 } from 'lucide-react';
 import Link from 'next/link';
@@ -86,14 +85,13 @@ export function ListDashboards({ dashboards }: ListDashboardsProps) {
             <Card key={item.id} hover>
               <div>
                 <Link
-                  prefetch={false}
                   href={`/${organizationSlug}/${projectId}/dashboards/${item.id}`}
                   className="flex flex-col p-4 @container"
                 >
                   <div>
                     <div className="font-medium">{item.name}</div>
                     <div className="text-xs text-muted-foreground">
-                      {item.updatedAt.toLocaleString()}
+                      {format(item.updatedAt, 'HH:mm · MMM d')}
                     </div>
                   </div>
                   <div

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/dashboards/page.tsx

@@ -1,6 +1,7 @@
 import PageLayout from '@/app/(app)/[organizationSlug]/[projectId]/page-layout';
 
 import ListDashboardsServer from './list-dashboards';
+import { HeaderDashboards } from './list-dashboards/header';
 
 interface PageProps {
   params: {
@@ -15,6 +16,7 @@ export default function Page({
   return (
     <>
       <PageLayout title="Dashboards" organizationSlug={organizationSlug} />
+      <HeaderDashboards />
       <ListDashboardsServer projectId={projectId} />
     </>
   );

apps/dashboard/src/components/full-page-empty-state.tsx

@@ -16,7 +16,12 @@ export function FullPageEmptyState({
   className,
 }: FullPageEmptyStateProps) {
   return (
-    <div className={cn('flex items-center justify-center p-4', className)}>
+    <div
+      className={cn(
+        'flex items-center justify-center p-4 text-center',
+        className
+      )}
+    >
       <div className="flex w-full max-w-xl flex-col items-center justify-center p-8">
         <div className="mb-6 flex h-24 w-24 items-center justify-center rounded-full bg-background shadow-sm">
           <Icon size={60} strokeWidth={1} />