#591 - profile, users and projects

resources/js/pages/servers/components/columns.tsx

@@ -1,11 +1,10 @@
-'use client';
-
 import { ColumnDef } from '@tanstack/react-table';
 import { Server } from '@/types/server';
 import { Link } from '@inertiajs/react';
 import { Button } from '@/components/ui/button';
 import { EyeIcon } from 'lucide-react';
 import ServerStatus from '@/pages/servers/components/status';
+import DateTime from '@/components/date-time';
 
 export const columns: ColumnDef<Server>[] = [
   {
@@ -27,6 +26,15 @@ export const columns: ColumnDef<Server>[] = [
     enableColumnFilter: true,
     enableSorting: true,
   },
+  {
+    accessorKey: 'created_at',
+    header: 'Created at',
+    enableColumnFilter: true,
+    enableSorting: true,
+    cell: ({ row }) => {
+      return <DateTime date={row.original.created_at} />;
+    },
+  },
   {
     accessorKey: 'status',
     header: 'Status',
@@ -43,7 +51,7 @@ export const columns: ColumnDef<Server>[] = [
     cell: ({ row }) => {
       return (
         <div className="flex items-center justify-end">
-          <Link href={route('servers.show', { server: row.original.id })}>
+          <Link href={route('servers.show', { server: row.original.id })} prefetch>
             <Button variant="outline" size="sm">
               <EyeIcon />
             </Button>

resources/js/pages/servers/components/delete-server.tsx

@@ -37,7 +37,7 @@ export default function DeleteServer({ server, children }: { server: Server; chi
           <DialogDescription>Delete server and its resources.</DialogDescription>
         </DialogHeader>
 
-        <Form id="delete-server-form" onSubmit={submit}>
+        <Form id="delete-server-form" onSubmit={submit} className="p-4">
           <FormFields>
             <FormField>
               <Label htmlFor="server-name">Name</Label>
@@ -49,7 +49,7 @@ export default function DeleteServer({ server, children }: { server: Server; chi
 
         <DialogFooter className="gap-2">
           <DialogClose asChild>
-            <Button variant="secondary">Cancel</Button>
+            <Button variant="outline">Cancel</Button>
           </DialogClose>
 
           <Button form="delete-server-form" variant="destructive" disabled={form.processing}>

resources/js/pages/servers/components/header.tsx

@@ -9,7 +9,7 @@ export default function ServerHeader({ server }: { server: Server }) {
   return (
     <div className="flex items-center justify-between border-b px-4 py-2">
       <div className="space-y-2">
-        <div className="text-accent-foreground/50 flex items-center space-x-2 text-xs">
+        <div className="flex items-center space-x-2 text-xs">
           <Tooltip>
             <TooltipTrigger asChild>
               <div className="flex items-center space-x-1">

resources/js/pages/servers/index.tsx

@@ -31,7 +31,7 @@ export default function Servers() {
           <Heading title="Servers" description="All of the servers of your project listed here" />
           <div className="flex items-center gap-2">
             <CreateServer>
-              <Button variant="outline">Create server</Button>
+              <Button>Create server</Button>
             </CreateServer>
           </div>
         </div>

resources/js/pages/servers/installing.tsx

@@ -14,7 +14,7 @@ export default function InstallingServer() {
   }>();
 
   return (
-    <Container className="max-w-3xl">
+    <Container className="max-w-5xl">
       <DataTable columns={columns} data={page.props.logs.data} />{' '}
     </Container>
   );

resources/js/pages/servers/overview.tsx

@@ -15,7 +15,7 @@ export default function ServerOverview() {
   }>();
 
   return (
-    <Container className="max-w-3xl">
+    <Container className="max-w-5xl">
       <Heading title="Overview" description="Here you can see an overview of your server" />
       <DataTable columns={columns} data={page.props.logs.data} />
     </Container>