feat: add workloads data table to dashboard

src/app/dashboard/page.tsx

@@ -11,6 +11,8 @@ import { ActionButton } from '@/app/dashboard/components/add-button'
 import TotalWorkloadsCard from './components/total-workloads-card'
 import TotalSolutionsCard from './components/total-solutions-card'
 import LoadingCard from './components/loading-card'
+import { Main } from '@/components/main'
+import WorkloadsListCard from '@/components/dashboard/workloads-card'
 
 export const metadata: Metadata = {
   title: 'Dashboard',
@@ -29,8 +31,8 @@ export default async function Page() {
           <ActionButton />
         </SubNavActions>
       </SubNav>
-      <main>
-        <div className="flex-1 space-y-4 p-8 pt-6">
+      <Main className="space-y-8 p-8">
+        <div className="flex-1 space-y-4">
           <div className="flex items-center justify-between space-y-2"></div>
           <Tabs defaultValue="overview" className="space-y-4">
             <TabsList>
@@ -54,10 +56,15 @@ export default async function Page() {
                   <TotalSolutionsCard />
                 </Suspense>
               </div>
+              <div className="grid gap-4">
+                <Suspense fallback={<LoadingCard />}>
+                  <WorkloadsListCard />
+                </Suspense>
+              </div>
             </TabsContent>
           </Tabs>
         </div>
-      </main>
+      </Main>
     </>
   )
 }

src/app/dashboard/workloads/page.tsx

@@ -1,12 +1,12 @@
-import { AddWorkloadButton } from './components/add-button'
+import { AddWorkloadButton } from '@/components/workloads/add-button'
 import {
   SubNav,
   SubNavTitle,
   SubNavActions,
   SubNavSubtitle
 } from '@/components/sub-nav'
 import { Main } from '@/components/main'
-import { WorkloadDataTable } from './components/data-table'
+import { WorkloadDataTable } from '@/components/workloads/data-table'
 
 export default function Page() {
   return (
@@ -20,7 +20,7 @@ export default function Page() {
           <AddWorkloadButton />
         </SubNavActions>
       </SubNav>
-      <Main>
+      <Main className="space-y-8 p-8">
         <WorkloadDataTable />
       </Main>
     </>

src/components/dashboard/workloads-card.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { use } from 'react'
+import { api } from '@/trpc/client'
+import { MagicWandIcon } from '@radix-ui/react-icons'
+import { WorkloadDataTable } from '@/components/workloads/data-table'
+
+export default function WorkloadsListCard() {
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle className="text-sm font-medium">Workloads</CardTitle>
+      </CardHeader>
+      <CardContent className="py-4">
+        <WorkloadDataTable />
+      </CardContent>
+    </Card>
+  )
+}

src/app/dashboard/workloads/components/columns.tsx → src/components/workloads/columns.tsx

@@ -9,7 +9,7 @@ import { buttonVariants } from '@/components/ui/button'
 import { Workload } from '@/db/models/workload'
 import type { Profile } from '@/db/models/profile'
 import { DataTableColumnHeader } from '@/components/data-table-column-header'
-import { DataTableRowActions } from '@/app/dashboard/workloads/components/data-rows-actions'
+import { DataTableRowActions } from '@/components/workloads/data-rows-actions'
 
 export const columns: ColumnDef<Workload>[] = [
   {

src/app/dashboard/workloads/components/data-table.tsx → src/components/workloads/data-table.tsx

@@ -27,7 +27,7 @@ export function WorkloadDataTable() {
   )
 
   return (
-    <div className="hidden h-full flex-1 flex-col space-y-8 p-8 md:flex">
+    <div className="h-full flex-1 flex-col md:flex">
       <DataTable columns={columns} query={query()} options={options} />
     </div>
   )