#591 - profile, users and projects

resources/js/pages/profile/components/delete-user.tsx

@@ -1,105 +0,0 @@
-import { useForm } from '@inertiajs/react';
-import { FormEventHandler, useRef } from 'react';
-
-import InputError from '@/components/ui/input-error';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-
-import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-
-export default function DeleteUser() {
-  const passwordInput = useRef<HTMLInputElement>(null);
-  const {
-    data,
-    setData,
-    delete: destroy,
-    processing,
-    reset,
-    errors,
-    clearErrors,
-  } = useForm<
-    Required<{
-      password: string;
-    }>
-  >({ password: '' });
-
-  const deleteUser: FormEventHandler = (e) => {
-    e.preventDefault();
-
-    destroy(route('profile.destroy'), {
-      preserveScroll: true,
-      onSuccess: () => closeModal(),
-      onError: () => passwordInput.current?.focus(),
-      onFinish: () => reset(),
-    });
-  };
-
-  const closeModal = () => {
-    clearErrors();
-    reset();
-  };
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Delete account</CardTitle>
-        <CardDescription>Delete your account and all of its resources</CardDescription>
-      </CardHeader>
-
-      <CardContent className="space-y-6">
-        <div className="space-y-4 rounded-lg border border-red-100 bg-red-50 p-4 dark:border-red-200/10 dark:bg-red-700/10">
-          <div className="relative space-y-0.5 text-red-600 dark:text-red-100">
-            <p className="font-medium">Warning</p>
-            <p className="text-sm">Please proceed with caution, this cannot be undone.</p>
-          </div>
-        </div>
-        <Dialog>
-          <DialogTrigger asChild>
-            <Button variant="destructive">Delete account</Button>
-          </DialogTrigger>
-          <DialogContent>
-            <DialogTitle>Are you sure you want to delete your account?</DialogTitle>
-            <DialogDescription>
-              Once your account is deleted, all of its resources and data will also be permanently deleted. Please enter your password to confirm you
-              would like to permanently delete your account.
-            </DialogDescription>
-            <form className="space-y-6" onSubmit={deleteUser}>
-              <div className="grid gap-2">
-                <Label htmlFor="password" className="sr-only">
-                  Password
-                </Label>
-
-                <Input
-                  id="password"
-                  type="password"
-                  name="password"
-                  ref={passwordInput}
-                  value={data.password}
-                  onChange={(e) => setData('password', e.target.value)}
-                  placeholder="Password"
-                  autoComplete="current-password"
-                />
-
-                <InputError message={errors.password} />
-              </div>
-
-              <DialogFooter className="gap-2">
-                <DialogClose asChild>
-                  <Button variant="secondary" onClick={closeModal}>
-                    Cancel
-                  </Button>
-                </DialogClose>
-
-                <Button variant="destructive" disabled={processing} asChild>
-                  <button type="submit">Delete account</button>
-                </Button>
-              </DialogFooter>
-            </form>
-          </DialogContent>
-        </Dialog>
-      </CardContent>
-    </Card>
-  );
-}

resources/js/pages/profile/components/update-password.tsx

@@ -6,7 +6,9 @@ import { FormEventHandler, useRef } from 'react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import { Form, FormField, FormFields } from '@/components/ui/form';
+import { CheckIcon, LoaderCircleIcon } from 'lucide-react';
 
 export default function UpdatePassword() {
   const passwordInput = useRef<HTMLInputElement>(null);
@@ -44,73 +46,62 @@ export default function UpdatePassword() {
         <CardTitle>Update password</CardTitle>
         <CardDescription>Ensure your account is using a long, random password to stay secure.</CardDescription>
       </CardHeader>
-      <CardContent>
-        <form onSubmit={updatePassword} className="space-y-6">
-          <div className="grid gap-2">
-            <Label htmlFor="current_password">Current password</Label>
-
-            <Input
-              id="current_password"
-              ref={currentPasswordInput}
-              value={data.current_password}
-              onChange={(e) => setData('current_password', e.target.value)}
-              type="password"
-              className="mt-1 block w-full"
-              autoComplete="current-password"
-              placeholder="Current password"
-            />
-
-            <InputError message={errors.current_password} />
-          </div>
-
-          <div className="grid gap-2">
-            <Label htmlFor="password">New password</Label>
-
-            <Input
-              id="password"
-              ref={passwordInput}
-              value={data.password}
-              onChange={(e) => setData('password', e.target.value)}
-              type="password"
-              className="mt-1 block w-full"
-              autoComplete="new-password"
-              placeholder="New password"
-            />
-
-            <InputError message={errors.password} />
-          </div>
-
-          <div className="grid gap-2">
-            <Label htmlFor="password_confirmation">Confirm password</Label>
-
-            <Input
-              id="password_confirmation"
-              value={data.password_confirmation}
-              onChange={(e) => setData('password_confirmation', e.target.value)}
-              type="password"
-              className="mt-1 block w-full"
-              autoComplete="new-password"
-              placeholder="Confirm password"
-            />
-
-            <InputError message={errors.password_confirmation} />
-          </div>
-
-          <div className="flex items-center gap-4">
-            <Button disabled={processing}>Save password</Button>
-
-            <Transition
-              show={recentlySuccessful}
-              enter="transition ease-in-out"
-              enterFrom="opacity-0"
-              leave="transition ease-in-out"
-              leaveTo="opacity-0"
-            >
-              <p className="text-sm text-neutral-600">Saved</p>
-            </Transition>
-          </div>
-        </form>
+      <CardContent className="p-4">
+        <Form id="update-password-form" onSubmit={updatePassword}>
+          <FormFields>
+            <FormField>
+              <Label htmlFor="current_password">Current password</Label>
+              <Input
+                id="current_password"
+                ref={currentPasswordInput}
+                value={data.current_password}
+                onChange={(e) => setData('current_password', e.target.value)}
+                type="password"
+                className="mt-1 block w-full"
+                autoComplete="current-password"
+                placeholder="Current password"
+              />
+              <InputError message={errors.current_password} />
+            </FormField>
+            <FormField>
+              <Label htmlFor="password">New password</Label>
+              <Input
+                id="password"
+                ref={passwordInput}
+                value={data.password}
+                onChange={(e) => setData('password', e.target.value)}
+                type="password"
+                className="mt-1 block w-full"
+                autoComplete="new-password"
+                placeholder="New password"
+              />
+              <InputError message={errors.password} />
+            </FormField>
+            <FormField>
+              <Label htmlFor="password_confirmation">Confirm password</Label>
+              <Input
+                id="password_confirmation"
+                value={data.password_confirmation}
+                onChange={(e) => setData('password_confirmation', e.target.value)}
+                type="password"
+                className="mt-1 block w-full"
+                autoComplete="new-password"
+                placeholder="Confirm password"
+              />
+              <InputError message={errors.password_confirmation} />
+            </FormField>
+          </FormFields>
+        </Form>
       </CardContent>
+      <CardFooter className="gap-2">
+        <Button form="update-password-form" disabled={processing}>
+          {processing && <LoaderCircleIcon className="animate-spin" />}
+          Save password
+        </Button>
+        <Transition show={recentlySuccessful} enter="transition ease-in-out" enterFrom="opacity-0" leave="transition ease-in-out" leaveTo="opacity-0">
+          <CheckIcon className="text-success" />
+        </Transition>
+      </CardFooter>
     </Card>
   );
 }

resources/js/pages/profile/components/update-user.tsx

@@ -1,19 +1,21 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
 import { Label } from '@/components/ui/label';
 import { Input } from '@/components/ui/input';
 import InputError from '@/components/ui/input-error';
-import { Link, useForm, usePage } from '@inertiajs/react';
+import { useForm, usePage } from '@inertiajs/react';
 import { Button } from '@/components/ui/button';
 import { Transition } from '@headlessui/react';
 import type { SharedData } from '@/types';
 import { FormEventHandler } from 'react';
+import { Form, FormField, FormFields } from '@/components/ui/form';
+import { CheckIcon, LoaderCircleIcon } from 'lucide-react';
 
 type ProfileForm = {
   name: string;
   email: string;
 };
 
-export default function UpdateUser({ mustVerifyEmail, status }: { mustVerifyEmail: boolean; status?: string }) {
+export default function UpdateUser() {
   const { auth } = usePage<SharedData>().props;
 
   const { data, setData, patch, errors, processing, recentlySuccessful } = useForm<Required<ProfileForm>>({
@@ -35,76 +37,46 @@ export default function UpdateUser({ mustVerifyEmail, status }: { mustVerifyEmai
         <CardTitle>Profile information</CardTitle>
         <CardDescription>Update your profile information and email address.</CardDescription>
       </CardHeader>
-      <CardContent>
-        <form onSubmit={submit} className="space-y-6">
-          <div className="grid gap-2">
-            <Label htmlFor="name">Name</Label>
-
-            <Input
-              id="name"
-              className="mt-1 block w-full"
-              value={data.name}
-              onChange={(e) => setData('name', e.target.value)}
-              required
-              autoComplete="name"
-              placeholder="Full name"
-            />
-
-            <InputError className="mt-2" message={errors.name} />
-          </div>
-
-          <div className="grid gap-2">
-            <Label htmlFor="email">Email address</Label>
-
-            <Input
-              id="email"
-              type="email"
-              className="mt-1 block w-full"
-              value={data.email}
-              onChange={(e) => setData('email', e.target.value)}
-              required
-              autoComplete="username"
-              placeholder="Email address"
-            />
-
-            <InputError className="mt-2" message={errors.email} />
-          </div>
-
-          {mustVerifyEmail && auth.user.email_verified_at === null && (
-            <div>
-              <p className="text-muted-foreground -mt-4 text-sm">
-                Your email address is unverified.{' '}
-                <Link
-                  href={route('verification.send')}
-                  method="post"
-                  as="button"
-                  className="text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"
-                >
-                  Click here to resend the verification email.
-                </Link>
-              </p>
-
-              {status === 'verification-link-sent' && (
-                <div className="mt-2 text-sm font-medium text-green-600">A new verification link has been sent to your email address.</div>
-              )}
-            </div>
-          )}
-
-          <div className="flex items-center gap-4">
-            <Button disabled={processing}>Save</Button>
-
-            <Transition
-              show={recentlySuccessful}
-              enter="transition ease-in-out"
-              enterFrom="opacity-0"
-              leave="transition ease-in-out"
-              leaveTo="opacity-0"
-            >
-              <p className="text-sm text-neutral-600">Saved</p>
-            </Transition>
-          </div>
-        </form>
+      <CardContent className="p-4">
+        <Form id="update-profile-form" onSubmit={submit}>
+          <FormFields>
+            <FormField>
+              <Label htmlFor="name">Name</Label>
+              <Input
+                id="name"
+                value={data.name}
+                onChange={(e) => setData('name', e.target.value)}
+                required
+                autoComplete="name"
+                placeholder="Full name"
+              />
+              <InputError message={errors.name} />
+            </FormField>
+            <FormField>
+              <Label htmlFor="email">Email address</Label>
+              <Input
+                id="email"
+                type="email"
+                value={data.email}
+                onChange={(e) => setData('email', e.target.value)}
+                required
+                autoComplete="username"
+                placeholder="Email address"
+              />
+              <InputError message={errors.email} />
+            </FormField>
+          </FormFields>
+        </Form>
       </CardContent>
+      <CardFooter className="gap-2">
+        <Button form="update-profile-form" disabled={processing}>
+          {processing && <LoaderCircleIcon className="animate-spin" />}
+          Save
+        </Button>
+        <Transition show={recentlySuccessful} enter="transition ease-in-out" enterFrom="opacity-0" leave="transition ease-in-out" leaveTo="opacity-0">
+          <CheckIcon className="text-success" />
+        </Transition>
+      </CardFooter>
     </Card>
   );
 }

resources/js/pages/profile/index.tsx

@@ -1,20 +1,18 @@
 import { Head } from '@inertiajs/react';
-import DeleteUser from '@/pages/profile/components/delete-user';
 import SettingsLayout from '@/layouts/settings/layout';
 import Container from '@/components/container';
 import UpdatePassword from '@/pages/profile/components/update-password';
 import UpdateUser from '@/pages/profile/components/update-user';
 import Heading from '@/components/heading';
 
-export default function Profile({ mustVerifyEmail, status }: { mustVerifyEmail: boolean; status?: string }) {
+export default function Profile() {
   return (
     <SettingsLayout>
       <Head title="Profile settings" />
-      <Container className="max-w-xl">
+      <Container className="max-w-5xl">
         <Heading title="Profile settings" description="Manage your profile settings." />
-        <UpdateUser mustVerifyEmail={mustVerifyEmail} status={status} />
+        <UpdateUser />
         <UpdatePassword />
-        <DeleteUser />
       </Container>
     </SettingsLayout>
   );

resources/js/pages/projects/components/actions.tsx

@@ -4,6 +4,7 @@ import { MoreVerticalIcon } from 'lucide-react';
 import { Project } from '@/types/project';
 import DeleteProject from '@/pages/projects/components/delete-project';
 import UsersAction from '@/pages/projects/components/users-action';
+import ProjectForm from '@/pages/projects/components/project-form';
 
 export default function ProjectActions({ project }: { project: Project }) {
   return (
@@ -15,6 +16,9 @@ export default function ProjectActions({ project }: { project: Project }) {
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
+        <ProjectForm project={project}>
+          <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Edit</DropdownMenuItem>
+        </ProjectForm>
         <UsersAction project={project}>
           <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Users</DropdownMenuItem>
         </UsersAction>

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

@@ -1,11 +1,10 @@
-'use client';
-
 import { ColumnDef } from '@tanstack/react-table';
 import type { Project } from '@/types/project';
 import ProjectActions from '@/pages/projects/components/actions';
 import { usePage } from '@inertiajs/react';
 import { SharedData } from '@/types';
 import { Badge } from '@/components/ui/badge';
+import DateTime from '@/components/date-time';
 
 const CurrentProject = ({ project }: { project: Project }) => {
   const page = usePage<SharedData>();
@@ -34,10 +33,13 @@ export const columns: ColumnDef<Project>[] = [
     },
   },
   {
-    accessorKey: 'created_at_by_timezone',
+    accessorKey: 'created_at',
     header: 'Created at',
     enableColumnFilter: true,
     enableSorting: true,
+    cell: ({ row }) => {
+      return <DateTime date={row.original.created_at} />;
+    },
   },
   {
     id: 'actions',

resources/js/pages/projects/components/delete-project.tsx

@@ -34,10 +34,11 @@ export default function DeleteProject({ project, children }: { project: Project;
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Delete {project.name}</DialogTitle>
-          <DialogDescription>Delete project and all its resources.</DialogDescription>
+          <DialogDescription className="sr-only">Delete project and all its resources.</DialogDescription>
         </DialogHeader>
 
-        <Form id="delete-project-form" onSubmit={submit}>
+        <Form id="delete-project-form" onSubmit={submit} className="p-4">
+          <p>Are you sure you want to delete this project? This action cannot be undone.</p>
           <FormFields>
             <FormField>
               <Label htmlFor="project-name">Name</Label>
@@ -49,7 +50,7 @@ export default function DeleteProject({ project, children }: { project: Project;
 
         <DialogFooter className="gap-2">
           <DialogClose asChild>
-            <Button variant="secondary">Cancel</Button>
+            <Button variant="outline">Cancel</Button>
           </DialogClose>
 
           <Button form="delete-project-form" variant="destructive" disabled={form.processing}>

resources/js/pages/projects/components/project-form.tsx

@@ -10,23 +10,30 @@ import {
 } from '@/components/ui/dialog';
 import { FormEventHandler, ReactNode, useState } from 'react';
 import { Button } from '@/components/ui/button';
-import { LoaderCircle } from 'lucide-react';
+import { CheckIcon, LoaderCircle } from 'lucide-react';
 import { useForm } from '@inertiajs/react';
 import { Form, FormField, FormFields } from '@/components/ui/form';
 import { Label } from '@/components/ui/label';
 import { Input } from '@/components/ui/input';
 import InputError from '@/components/ui/input-error';
+import { Project } from '@/types/project';
+import { Transition } from '@headlessui/react';
 
-export default function CreateProject({ children }: { children: ReactNode }) {
+export default function ProjectForm({ project, children }: { project?: Project; children: ReactNode }) {
   const [open, setOpen] = useState(false);
 
   const form = useForm({
-    name: '',
+    name: project?.name || '',
   });
 
   const submit: FormEventHandler = (e) => {
     e.preventDefault();
 
+    if (project) {
+      form.patch(route('projects.update', project.id));
+      return;
+    }
+
     form.post(route('projects.store'), {
       onSuccess() {
         setOpen(false);
@@ -39,10 +46,10 @@ export default function CreateProject({ children }: { children: ReactNode }) {
       <DialogTrigger asChild>{children}</DialogTrigger>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Create project</DialogTitle>
-          <DialogDescription>Fill the form to create a new project</DialogDescription>
+          <DialogTitle>{project ? 'Edit Project' : 'Create Project'}</DialogTitle>
+          <DialogDescription className="sr-only">{project ? 'Edit the project details.' : 'Create a new project.'}</DialogDescription>
         </DialogHeader>
-        <Form id="create-project-form" onSubmit={submit}>
+        <Form id="project-form" onSubmit={submit} className="p-4">
           <FormFields>
             <FormField>
               <Label htmlFor="name">Name</Label>
@@ -51,15 +58,24 @@ export default function CreateProject({ children }: { children: ReactNode }) {
             </FormField>
           </FormFields>
         </Form>
-        <DialogFooter>
+        <DialogFooter className="items-center">
+          <Transition
+            show={form.recentlySuccessful}
+            enter="transition ease-in-out"
+            enterFrom="opacity-0"
+            leave="transition ease-in-out"
+            leaveTo="opacity-0"
+          >
+            <CheckIcon className="text-success" />
+          </Transition>
           <DialogClose asChild>
             <Button type="button" variant="outline">
               Cancel
             </Button>
           </DialogClose>
-          <Button form="create-project-form" type="button" onClick={submit} disabled={form.processing}>
+          <Button form="project-form" type="button" onClick={submit} disabled={form.processing}>
             {form.processing && <LoaderCircle className="animate-spin" />}
-            Create
+            Save
           </Button>
         </DialogFooter>
       </DialogContent>

resources/js/pages/projects/components/users-action.tsx

@@ -20,17 +20,7 @@ import InputError from '@/components/ui/input-error';
 import UserSelect from '@/components/user-select';
 import { useForm } from '@inertiajs/react';
 import { LoaderCircleIcon, TrashIcon } from 'lucide-react';
-import {
-  AlertDialog,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-  AlertDialogCancel,
-  AlertDialogAction,
-} from '@/components/ui/alert-dialog';
+import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
 
 function AddUser({ project }: { project: Project }) {
   const [open, setOpen] = useState(false);
@@ -41,7 +31,7 @@ function AddUser({ project }: { project: Project }) {
 
   const submit = (e: FormEvent) => {
     e.preventDefault();
-    form.post(route('projects.users', project.id), {
+    form.post(route('projects.users.store', { project: project.id }), {
       onSuccess: () => {
         setOpen(false);
       },
@@ -51,14 +41,14 @@ function AddUser({ project }: { project: Project }) {
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <Button variant="outline">Add user</Button>
+        <Button>Add user</Button>
       </DialogTrigger>
       <DialogContent className="sm:max-w-xl">
         <DialogHeader>
           <DialogTitle>Add user</DialogTitle>
-          <DialogDescription>Here you can add new user to {project.name}</DialogDescription>
+          <DialogDescription className="sr-only">Here you can add new user to {project.name}</DialogDescription>
         </DialogHeader>
-        <Form id="add-user-form" onSubmit={submit}>
+        <Form id="add-user-form" onSubmit={submit} className="p-4">
           <FormFields>
             <FormField>
               <Label htmlFor="user">User</Label>
@@ -71,7 +61,10 @@ function AddUser({ project }: { project: Project }) {
           <DialogClose asChild>
             <Button variant="outline">Cancel</Button>
           </DialogClose>
-          <Button form="add-user-form">Add</Button>
+          <Button form="add-user-form" disabled={form.processing}>
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
+            Add
+          </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
@@ -81,13 +74,11 @@ function AddUser({ project }: { project: Project }) {
 function RemoveUser({ project, user }: { project: Project; user: User }) {
   const [open, setOpen] = useState(false);
 
-  const form = useForm({
-    user: user.id,
-  });
+  const form = useForm();
 
   const submit = (e: FormEvent) => {
     e.preventDefault();
-    form.delete(route('projects.users', project.id), {
+    form.delete(route('projects.users.destroy', { project: project.id, user: user.id }), {
       onSuccess: () => {
         setOpen(false);
       },
@@ -95,27 +86,33 @@ function RemoveUser({ project, user }: { project: Project; user: User }) {
   };
 
   return (
-    <AlertDialog open={open} onOpenChange={setOpen}>
-      <AlertDialogTrigger asChild>
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
         <Button variant="outline" size="sm">
           <TrashIcon />
         </Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>Remove user</AlertDialogTitle>
-          <AlertDialogDescription>Remove user from {project.name}.</AlertDialogDescription>
-        </AlertDialogHeader>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Remove user</DialogTitle>
+          <DialogDescription className="sr-only">Remove user from {project.name}.</DialogDescription>
+        </DialogHeader>
 
-        <AlertDialogFooter className="gap-2">
-          <AlertDialogCancel>Cancel</AlertDialogCancel>
+        <p className="p-4">
+          Are you sure you want to remove <b>{user.name}</b> from this project?
+        </p>
+
+        <DialogFooter className="gap-2">
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
           <Button onClick={submit} variant="destructive" disabled={form.processing}>
             {form.processing && <LoaderCircleIcon className="animate-spin" />}
             Remove user
           </Button>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 }
 
@@ -155,18 +152,20 @@ const getColumns = (project: Project): ColumnDef<User>[] => [
 
 export default function UsersAction({ project, children }: { project: Project; children: ReactNode }) {
   return (
-    <Dialog>
-      <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent className="sm:max-w-3xl">
-        <DialogHeader>
-          <DialogTitle>Users</DialogTitle>
-          <DialogDescription>Users assigned to this project</DialogDescription>
-        </DialogHeader>
-        <DataTable columns={getColumns(project)} data={project.users} />
-        <DialogFooter className="gap-2">
-          <AddUser project={project} />
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <Sheet>
+      <SheetTrigger asChild>{children}</SheetTrigger>
+      <SheetContent className="sm:max-w-3xl">
+        <SheetHeader>
+          <SheetTitle>Project users</SheetTitle>
+          <SheetDescription className="sr-only">Users assigned to this project</SheetDescription>
+        </SheetHeader>
+        <DataTable columns={getColumns(project)} data={project.users} modal />
+        <SheetFooter className="gap-2">
+          <div className="flex items-center">
+            <AddUser project={project} />
+          </div>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
   );
 }

resources/js/pages/projects/index.tsx

@@ -6,7 +6,7 @@ import { Project } from '@/types/project';
 import Container from '@/components/container';
 import Heading from '@/components/heading';
 import React from 'react';
-import CreateProject from '@/pages/projects/components/create-project';
+import ProjectForm from '@/pages/projects/components/project-form';
 import { Button } from '@/components/ui/button';
 
 export default function Projects() {
@@ -20,13 +20,13 @@ export default function Projects() {
     <SettingsLayout>
       <Head title="Projects" />
 
-      <Container className="max-w-3xl">
+      <Container className="max-w-5xl">
         <div className="flex items-start justify-between">
           <Heading title="Projects" description="Here you can manage your projects" />
           <div className="flex items-center gap-2">
-            <CreateProject>
-              <Button variant="outline">Create project</Button>
-            </CreateProject>
+            <ProjectForm>
+              <Button>Create project</Button>
+            </ProjectForm>
           </div>
         </div>
         <DataTable columns={columns} data={page.props.projects.data} />

resources/js/pages/server-logs/components/columns.tsx

@@ -1,13 +1,12 @@
-'use client';
-
 import { ColumnDef, Row } from '@tanstack/react-table';
 import { Button } from '@/components/ui/button';
 import { EyeIcon, LoaderCircleIcon } from 'lucide-react';
 import type { ServerLog } from '@/types/server-log';
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
 import { useState } from 'react';
 import axios from 'axios';
 import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
+import DateTime from '@/components/date-time';
 
 const LogActionCell = ({ row }: { row: Row<ServerLog> }) => {
   const [open, setOpen] = useState(false);
@@ -40,15 +39,18 @@ const LogActionCell = ({ row }: { row: Row<ServerLog> }) => {
             {loading ? <LoaderCircleIcon className="animate-spin" /> : <EyeIcon />}
           </Button>
         </DialogTrigger>
-        <DialogContent className="sm:max-w-3xl">
+        <DialogContent className="sm:max-w-5xl">
           <DialogHeader>
             <DialogTitle>View Log</DialogTitle>
-            <DialogDescription>This is all content of the log</DialogDescription>
+            <DialogDescription className="sr-only">This is all content of the log</DialogDescription>
           </DialogHeader>
-          <ScrollArea className="border-border bg-accent text-accent-foreground relative h-[500px] w-full rounded-md border p-3 font-mono text-sm whitespace-pre-line">
+          <ScrollArea className="bg-accent text-accent-foreground relative h-[500px] w-full p-4 font-mono text-sm whitespace-pre-line">
             {content}
             <ScrollBar orientation="vertical" />
           </ScrollArea>
+          <DialogFooter>
+            <Button variant="outline">Download</Button>
+          </DialogFooter>
         </DialogContent>
       </Dialog>
     </div>
@@ -62,9 +64,12 @@ export const columns: ColumnDef<ServerLog>[] = [
     enableColumnFilter: true,
   },
   {
-    accessorKey: 'created_at_by_timezone',
+    accessorKey: 'created_at',
     header: 'Created At',
     enableSorting: true,
+    cell: ({ row }) => {
+      return <DateTime date={row.original.created_at} />;
+    },
   },
   {
     id: 'actions',

resources/js/pages/server-providers/components/create-server-provider.tsx

@@ -81,7 +81,7 @@ export default function CreateServerProvider({
           <DialogTitle>Connect</DialogTitle>
           <DialogDescription>Connect to a new server provider</DialogDescription>
         </DialogHeader>
-        <Form id="create-server-provider-form" onSubmit={submit} className="py-4">
+        <Form id="create-server-provider-form" onSubmit={submit} className="p-4">
           <FormFields>
             <FormField>
               <Label htmlFor="provider">Provider</Label>

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>

resources/js/pages/users/components/actions.tsx

@@ -0,0 +1,34 @@
+import { User } from '@/types/user';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { Button } from '@/components/ui/button';
+import { MoreVerticalIcon } from 'lucide-react';
+import DeleteUser from '@/pages/users/components/delete-user';
+import Projects from '@/pages/users/components/projects';
+import UserForm from '@/pages/users/components/form';
+
+export default function UserActions({ user }: { user: User }) {
+  return (
+    <DropdownMenu modal={false}>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="h-8 w-8 p-0">
+          <span className="sr-only">Open menu</span>
+          <MoreVerticalIcon />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <UserForm user={user}>
+          <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Edit</DropdownMenuItem>
+        </UserForm>
+        <Projects user={user}>
+          <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Projects</DropdownMenuItem>
+        </Projects>
+        <DropdownMenuSeparator />
+        <DeleteUser user={user}>
+          <DropdownMenuItem onSelect={(e) => e.preventDefault()} variant="destructive">
+            Delete
+          </DropdownMenuItem>
+        </DeleteUser>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

resources/js/pages/users/components/delete-user.tsx

@@ -0,0 +1,58 @@
+import { User } from '@/types/user';
+import { FormEvent, ReactNode, useState } from 'react';
+import { useForm } from '@inertiajs/react';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { LoaderCircleIcon } from 'lucide-react';
+
+export default function DeleteUser({ user, children }: { user: User; children: ReactNode }) {
+  const [open, setOpen] = useState(false);
+  const form = useForm();
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    form.delete(route('users.destroy', user.id), {
+      onSuccess: () => {
+        setOpen(false);
+      },
+    });
+  };
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Delete user</DialogTitle>
+          <DialogDescription className="sr-only">
+            Delete {user.name}[{user.email}]
+          </DialogDescription>
+        </DialogHeader>
+        <p className="p-4">
+          Are you sure you want to delete{' '}
+          <b>
+            {user.name} [{user.email}]
+          </b>
+          ? This action cannot be undone.
+        </p>
+        <DialogFooter className="gap-2">
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button onClick={submit} variant="destructive" disabled={form.processing}>
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
+            Delete user
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

resources/js/pages/users/components/form.tsx

@@ -0,0 +1,125 @@
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { FormEventHandler, ReactNode, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { CheckIcon, LoaderCircle } from 'lucide-react';
+import { useForm } from '@inertiajs/react';
+import { Form, FormField, FormFields } from '@/components/ui/form';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import InputError from '@/components/ui/input-error';
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { User } from '@/types/user';
+import { Transition } from '@headlessui/react';
+
+export default function UserForm({ user, children }: { user?: User; children: ReactNode }) {
+  const [open, setOpen] = useState(false);
+
+  const form = useForm({
+    name: user?.name || '',
+    email: user?.email || '',
+    password: '',
+    role: user?.role || 'user',
+  });
+
+  const submit: FormEventHandler = (e) => {
+    e.preventDefault();
+
+    if (user) {
+      form.patch(route('users.update', user.id));
+      return;
+    }
+
+    form.post(route('users.store'), {
+      onSuccess() {
+        setOpen(false);
+      },
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{user ? `Edit ${user.name}` : 'Create user'}</DialogTitle>
+          <DialogDescription className="sr-only">
+            {user ? `Fill the form to edit ${user.name}` : 'Fill the form to create a new user'}
+          </DialogDescription>
+        </DialogHeader>
+        <Form id="user-form" onSubmit={submit} className="p-4">
+          <FormFields>
+            <FormField>
+              <Label htmlFor="name">Name</Label>
+              <Input type="text" id="name" name="name" value={form.data.name} onChange={(e) => form.setData('name', e.target.value)} />
+              <InputError message={form.errors.name} />
+            </FormField>
+            <FormField>
+              <Label htmlFor="email">Email</Label>
+              <Input type="email" id="email" name="email" value={form.data.email} onChange={(e) => form.setData('email', e.target.value)} />
+              <InputError message={form.errors.email} />
+            </FormField>
+            <FormField>
+              <Label htmlFor="password">Password</Label>
+              <Input
+                type="password"
+                id="password"
+                name="password"
+                value={form.data.password}
+                onChange={(e) => form.setData('password', e.target.value)}
+              />
+              <InputError message={form.errors.password} />
+            </FormField>
+            <FormField>
+              <Label htmlFor="role">Role</Label>
+              <Select value={form.data.role} onValueChange={(value) => form.setData('role', value)}>
+                <SelectTrigger id="role">
+                  <SelectValue placeholder="Select a role" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectItem key="role-user" value="user">
+                      user
+                    </SelectItem>
+                    <SelectItem key="role-admin" value="admin">
+                      admin
+                    </SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+              <InputError message={form.errors.role} />
+            </FormField>
+          </FormFields>
+        </Form>
+        <DialogFooter className="items-center">
+          <Transition
+            show={form.recentlySuccessful}
+            enter="transition ease-in-out"
+            enterFrom="opacity-0"
+            leave="transition ease-in-out"
+            leaveTo="opacity-0"
+          >
+            <CheckIcon className="text-success" />
+          </Transition>
+          <DialogClose asChild>
+            <Button type="button" variant="outline">
+              Cancel
+            </Button>
+          </DialogClose>
+          <Button form="create-user-form" type="button" onClick={submit} disabled={form.processing}>
+            {form.processing && <LoaderCircle className="animate-spin" />}
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

resources/js/pages/users/components/list.tsx

@@ -0,0 +1,47 @@
+import { ColumnDef } from '@tanstack/react-table';
+import type { User } from '@/types/user';
+import { DataTable } from '@/components/data-table';
+import { usePage } from '@inertiajs/react';
+import UserActions from '@/pages/users/components/actions';
+import DateTime from '@/components/date-time';
+
+const columns: ColumnDef<User>[] = [
+  {
+    accessorKey: 'name',
+    header: 'Name',
+    enableColumnFilter: true,
+  },
+  {
+    accessorKey: 'email',
+    header: 'Email',
+    enableColumnFilter: true,
+  },
+  {
+    accessorKey: 'created_at',
+    header: 'Created At',
+    enableSorting: true,
+    cell: ({ row }) => <DateTime date={row.original.created_at} />,
+  },
+  {
+    id: 'actions',
+    enableColumnFilter: false,
+    enableSorting: false,
+    cell: ({ row }) => (
+      <div className="flex items-center justify-end">
+        <UserActions user={row.original} />
+      </div>
+    ),
+  },
+];
+
+type Page = {
+  users: {
+    data: User[];
+  };
+};
+
+export default function UsersList() {
+  const page = usePage<Page>();
+
+  return <DataTable columns={columns} data={page.props.users.data} />;
+}

resources/js/pages/users/components/projects.tsx

@@ -0,0 +1,176 @@
+import { User } from '@/types/user';
+import { FormEvent, ReactNode, useState } from 'react';
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { DialogTrigger } from '@radix-ui/react-dialog';
+import { ColumnDef } from '@tanstack/react-table';
+import type { Project } from '@/types/project';
+import { DataTable } from '@/components/data-table';
+import { useForm, usePage } from '@inertiajs/react';
+import { Button } from '@/components/ui/button';
+import { LoaderCircleIcon, TrashIcon } from 'lucide-react';
+import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
+import { Form, FormField, FormFields } from '@/components/ui/form';
+import { Label } from '@/components/ui/label';
+import InputError from '@/components/ui/input-error';
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { SharedData } from '@/types';
+
+function RemoveProject({ user, project }: { user: User; project: Project }) {
+  const [open, setOpen] = useState(false);
+  const form = useForm();
+
+  const submit = () => {
+    form.delete(route('users.projects.destroy', { user: user.id, project: project.id }), {
+      preserveScroll: true,
+      onSuccess: () => {
+        form.reset();
+      },
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button key={`remove-user-${user.id}`} variant="outline" size="sm" tabIndex={-1}>
+          <TrashIcon />
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Remove from project</DialogTitle>
+          <DialogDescription className="sr-only">
+            Remove <b>{user.name}</b> from <b>{project.name}</b>
+          </DialogDescription>
+        </DialogHeader>
+        <p className="p-4">
+          Are you sure you want to remove <b>{user.name}</b> from <b>{project.name}</b>?
+        </p>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button variant="destructive" disabled={form.processing} onClick={submit}>
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
+            Remove
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function AddToProject({ user }: { user: User }) {
+  const page = usePage<SharedData>();
+  const [open, setOpen] = useState(false);
+  const form = useForm({
+    project: '',
+  });
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    form.post(route('users.projects.store', { user: user.id }), {
+      onSuccess: () => {
+        setOpen(false);
+      },
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button key={`add-project-${user.id}`}>Add to project</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Add to project</DialogTitle>
+          <DialogDescription className="sr-only">
+            Add <b>{user.name}</b> to a project
+          </DialogDescription>
+        </DialogHeader>
+        <Form id="add-to-project-form" className="p-4" onSubmit={submit}>
+          <FormFields>
+            <FormField>
+              <Label htmlFor="project">Project</Label>
+              <Select value={form.data.project} onValueChange={(value) => form.setData('project', value)}>
+                <SelectTrigger id="project">
+                  <SelectValue placeholder="Select a project" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    {page.props.auth.projects.map((project: Project) => (
+                      <SelectItem key={`project-${project.id}`} value={project.id.toString()}>
+                        {project.name}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+              <InputError message={form.errors.project} />
+            </FormField>
+          </FormFields>
+        </Form>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button form="add-to-project-form" disabled={form.processing} onClick={submit}>
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
+            Add
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+const columns = (user: User): ColumnDef<Project>[] => {
+  return [
+    {
+      accessorKey: 'id',
+      header: 'ID',
+      enableColumnFilter: true,
+      enableSorting: true,
+      enableHiding: true,
+    },
+    {
+      accessorKey: 'name',
+      header: 'Name',
+      enableColumnFilter: true,
+      enableSorting: true,
+    },
+    {
+      id: 'actions',
+      enableColumnFilter: false,
+      enableSorting: false,
+      cell: ({ row }) => {
+        return (
+          <div className="flex items-center justify-end" key={row.id}>
+            <RemoveProject user={user} project={row.original} />
+          </div>
+        );
+      },
+    },
+  ];
+};
+
+export default function Projects({ user, children }: { user: User; children: ReactNode }) {
+  return (
+    <Sheet>
+      <SheetTrigger asChild>{children}</SheetTrigger>
+      <SheetContent className="sm:max-w-3xl">
+        <SheetHeader>
+          <SheetTitle>Projects</SheetTitle>
+          <SheetDescription className="sr-only">
+            All projects that <b>{user.name}</b> has access
+          </SheetDescription>
+        </SheetHeader>
+        {user.projects && <DataTable columns={columns(user)} data={user.projects} modal />}
+        <SheetFooter>
+          <div className="flex items-center">
+            <AddToProject user={user} />
+          </div>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

resources/js/pages/users/index.tsx

@@ -0,0 +1,25 @@
+import SettingsLayout from '@/layouts/settings/layout';
+import { Head } from '@inertiajs/react';
+import Container from '@/components/container';
+import Heading from '@/components/heading';
+import UsersList from '@/pages/users/components/list';
+import { Button } from '@/components/ui/button';
+import UserForm from '@/pages/users/components/form';
+
+export default function Users() {
+  return (
+    <SettingsLayout>
+      <Head title="Users" />
+
+      <Container className="max-w-5xl">
+        <div className="flex items-start justify-between">
+          <Heading title="Users" description="Here you can manage all users" />
+          <UserForm>
+            <Button>Create user</Button>
+          </UserForm>
+        </div>
+        <UsersList />
+      </Container>
+    </SettingsLayout>
+  );
+}