projects

resources/js/components/project-switch.tsx

@@ -13,6 +13,7 @@ import { Button } from '@/components/ui/button';
 import { ChevronsUpDownIcon, PlusIcon } from 'lucide-react';
 import { useInitials } from '@/hooks/use-initials';
 import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import CreateProject from '@/pages/projects/components/create-project';
 
 export function ProjectSwitch() {
   const page = usePage<SharedData>();
@@ -25,7 +26,7 @@ export function ProjectSwitch() {
     const selectedProject = auth.projects.find((project) => project.id.toString() === projectId);
     if (selectedProject) {
       setSelectedProject(selectedProject.id.toString());
-      form.post(route('projects.switch', { project: projectId }));
+      form.post(route('projects.switch', { project: projectId, currentPath: window.location.pathname }));
     }
   };
 
@@ -39,7 +40,7 @@ export function ProjectSwitch() {
           <span className="hidden lg:flex">{auth.currentProject?.name}</span>
         </Button>
       </Link>
-      <DropdownMenu>
+      <DropdownMenu modal={false}>
         <DropdownMenuTrigger asChild>
           <Button variant="ghost" className="px-1!">
             <ChevronsUpDownIcon size={5} />
@@ -56,10 +57,14 @@ export function ProjectSwitch() {
             </DropdownMenuCheckboxItem>
           ))}
           <DropdownMenuSeparator />
-          <DropdownMenuItem className="gap-0">
-            <PlusIcon size={5} />
-            <span className="ml-2">Create new project</span>
-          </DropdownMenuItem>
+          <CreateProject>
+            <DropdownMenuItem className="gap-0" asChild onSelect={(e) => e.preventDefault()}>
+              <div className="flex items-center">
+                <PlusIcon size={5} />
+                <span className="ml-2">Create new project</span>
+              </div>
+            </DropdownMenuItem>
+          </CreateProject>
         </DropdownMenuContent>
       </DropdownMenu>
     </div>

resources/js/components/server-switch.tsx

@@ -14,6 +14,7 @@ import { useInitials } from '@/hooks/use-initials';
 import { Avatar, AvatarFallback } from '@/components/ui/avatar';
 import { type Server } from '@/types/server';
 import type { SharedData } from '@/types';
+import CreateServer from '@/pages/servers/components/create-server';
 
 export function ServerSwitch() {
   const page = usePage<SharedData>();
@@ -48,31 +49,35 @@ export function ServerSwitch() {
         </Button>
       )}
 
-      <DropdownMenu>
+      <DropdownMenu modal={false}>
         <DropdownMenuTrigger asChild>
           <Button variant="ghost" className="px-1!">
             <ChevronsUpDownIcon size={5} />
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent className="w-56" align="start">
-          {page.props.projectServers.map((server) => (
-            <DropdownMenuCheckboxItem
-              key={`server-${server.id.toString()}`}
-              checked={selectedServer?.id === server.id}
-              onCheckedChange={() => handleServerChange(server)}
-            >
-              {server.name}
-            </DropdownMenuCheckboxItem>
-          ))}
+          {page.props.projectServers.length > 0 ? (
+            page.props.projectServers.map((server) => (
+              <DropdownMenuCheckboxItem
+                key={`server-${server.id.toString()}`}
+                checked={selectedServer?.id === server.id}
+                onCheckedChange={() => handleServerChange(server)}
+              >
+                {server.name}
+              </DropdownMenuCheckboxItem>
+            ))
+          ) : (
+            <DropdownMenuItem disabled>No servers</DropdownMenuItem>
+          )}
           <DropdownMenuSeparator />
-          <DropdownMenuItem className="gap-0">
-            <Link href={route('servers', { action: 'create' })}>
+          <CreateServer>
+            <DropdownMenuItem className="gap-0" onSelect={(e) => e.preventDefault()}>
               <div className="flex items-center">
                 <PlusIcon size={5} />
                 <span className="ml-2">Create new server</span>
               </div>
-            </Link>
-          </DropdownMenuItem>
+            </DropdownMenuItem>
+          </CreateServer>
         </DropdownMenuContent>
       </DropdownMenu>
     </div>

resources/js/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {

resources/js/components/ui/command.tsx

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import { Command as CommandPrimitive } from 'cmdk';
+import { SearchIcon } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+
+function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn('bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md', className)}
+      {...props}
+    />
+  );
+}
+
+function CommandDialog({
+  title = 'Command Palette',
+  description = 'Search for a command to run...',
+  children,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string;
+  description?: string;
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent className="overflow-hidden p-0">
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div data-slot="command-input-wrapper" className="flex h-9 items-center gap-2 border-b px-3">
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', className)}
+      {...props}
+    />
+  );
+}
+
+function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return <CommandPrimitive.Empty data-slot="command-empty" className="py-6 text-center text-sm" {...props} />;
+}
+
+function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return <CommandPrimitive.Separator data-slot="command-separator" className={cn('bg-border -mx-1 h-px', className)} {...props} />;
+}
+
+function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandShortcut({ className, ...props }: React.ComponentProps<'span'>) {
+  return <span data-slot="command-shortcut" className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)} {...props} />;
+}
+
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator };

resources/js/components/ui/dropdown-menu.tsx

@@ -51,7 +51,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}

resources/js/components/ui/popover.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+import { cn } from '@/lib/utils';
+
+function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+function PopoverContent({ className, align = 'center', sideOffset = 4, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+          className,
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+}
+
+function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

resources/js/components/ui/select.tsx

@@ -72,7 +72,7 @@ function SelectItem({ className, children, ...props }: React.ComponentProps<type
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "hover:bg-accent focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className,
       )}
       {...props}

resources/js/components/user-select.tsx

@@ -0,0 +1,66 @@
+import { User } from '@/types/user';
+import { useEffect, useState } from 'react';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Button } from '@/components/ui/button';
+import { CheckIcon, ChevronsUpDownIcon } from 'lucide-react';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command';
+import { cn } from '@/lib/utils';
+import axios from 'axios';
+
+export default function UserSelect({ onChange }: { onChange: (selectedUser: User) => void }) {
+  const [query, setQuery] = useState('');
+  const [users, setUsers] = useState<User[]>([]);
+  const [open, setOpen] = useState(false);
+  const [value, setValue] = useState<string>();
+
+  const fetchUsers = async () => {
+    const response = await axios.get(route('users', { query: query }));
+
+    if (response.status === 200) {
+      setUsers(response.data as User[]);
+      return;
+    }
+
+    setUsers([]);
+  };
+
+  useEffect(() => {
+    fetchUsers();
+  }, [query]);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button variant="outline" role="combobox" aria-expanded={open} className="w-full justify-between">
+          {value ? users.find((user) => user.id === parseInt(value))?.name : 'Select user...'}
+          <ChevronsUpDownIcon className="opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" align="start">
+        <Command shouldFilter={false}>
+          <CommandInput placeholder="Search user..." value={query} onValueChange={setQuery} />
+          <CommandList>
+            <CommandEmpty>{query === '' ? 'Start typing to load results' : 'No results found.'}</CommandEmpty>
+            <CommandGroup>
+              {users.map((user) => (
+                <CommandItem
+                  key={`user-select-${user.id}`}
+                  value={user.id.toString()}
+                  onSelect={(currentValue) => {
+                    setValue(currentValue === value ? '' : currentValue);
+                    setOpen(false);
+                    onChange(users.find((u) => u.id.toString() === currentValue) as User);
+                  }}
+                  className="truncate"
+                >
+                  {user.name} ({user.email})
+                  <CheckIcon className={cn('ml-auto', value && parseInt(value) === user.id ? 'opacity-100' : 'opacity-0')} />
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

resources/js/layouts/auth/auth-simple-layout.tsx

@@ -16,7 +16,7 @@ export default function AuthSimpleLayout({ children, title, description }: Props
           <div className="flex flex-col items-center gap-4">
             <Link href={route('home')} className="flex flex-col items-center gap-2 font-medium">
               <div className="mb-1 flex h-9 w-9 items-center justify-center rounded-md">
-                <AppLogoIcon className="size-9 fill-current text-[var(--foreground)] dark:text-white" />
+                <AppLogoIcon className="size-9 rounded-sm fill-current text-[var(--foreground)] dark:text-white" />
               </div>
               <span className="sr-only">{title}</span>
             </Link>

resources/js/layouts/server/layout.tsx

@@ -16,7 +16,7 @@ import {
 } from 'lucide-react';
 import { ReactNode } from 'react';
 import { Server } from '@/types/server';
-import ServerHeader from '@/pages/servers/partials/header';
+import ServerHeader from '@/pages/servers/components/header';
 import Layout from '@/layouts/app/layout';
 
 export default function ServerLayout({ server, children }: { server: Server; children: ReactNode }) {
@@ -96,7 +96,7 @@ export default function ServerLayout({ server, children }: { server: Server; chi
     <Layout secondNavItems={sidebarNavItems} secondNavTitle={server.name}>
       <ServerHeader server={server} />
 
-      <div className="p-4">{children}</div>
+      <div>{children}</div>
     </Layout>
   );
 }

resources/js/layouts/settings/layout.tsx

@@ -11,7 +11,7 @@ const sidebarNavItems: NavItem[] = [
   },
   {
     title: 'Projects',
-    href: '/',
+    href: route('projects'),
     icon: ListIcon,
   },
 ];

resources/js/pages/profile/index.tsx

@@ -1,15 +1,17 @@
 import { Head } from '@inertiajs/react';
-import DeleteUser from '@/pages/settings/profile/partials/delete-user';
+import DeleteUser from '@/pages/profile/components/delete-user';
 import SettingsLayout from '@/layouts/settings/layout';
 import Container from '@/components/container';
-import UpdatePassword from '@/pages/settings/profile/partials/update-password';
-import UpdateUser from '@/pages/settings/profile/partials/update-user';
+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 }) {
   return (
     <SettingsLayout>
       <Head title="Profile settings" />
       <Container className="max-w-xl">
+        <Heading title="Profile settings" description="Manage your profile settings." />
         <UpdateUser mustVerifyEmail={mustVerifyEmail} status={status} />
         <UpdatePassword />
         <DeleteUser />

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

@@ -0,0 +1,30 @@
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { Button } from '@/components/ui/button';
+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';
+
+export default function ProjectActions({ project }: { project: Project }) {
+  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">
+        <UsersAction project={project}>
+          <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Users</DropdownMenuItem>
+        </UsersAction>
+        <DropdownMenuSeparator />
+        <DeleteProject project={project}>
+          <DropdownMenuItem onSelect={(e) => e.preventDefault()} variant="destructive">
+            Delete Project
+          </DropdownMenuItem>
+        </DeleteProject>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

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

@@ -0,0 +1,54 @@
+'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';
+
+const CurrentProject = ({ project }: { project: Project }) => {
+  const page = usePage<SharedData>();
+  return <>{project.id === page.props.auth.currentProject?.id && <Badge variant="default">current</Badge>}</>;
+};
+
+export const columns: ColumnDef<Project>[] = [
+  {
+    accessorKey: 'id',
+    header: 'ID',
+    enableColumnFilter: true,
+    enableSorting: true,
+    enableHiding: true,
+  },
+  {
+    accessorKey: 'name',
+    header: 'Name',
+    enableColumnFilter: true,
+    enableSorting: true,
+    cell: ({ row }) => {
+      return (
+        <div className="flex items-center space-x-1">
+          <span>{row.original.name}</span> <CurrentProject project={row.original} />
+        </div>
+      );
+    },
+  },
+  {
+    accessorKey: 'created_at_by_timezone',
+    header: 'Created at',
+    enableColumnFilter: true,
+    enableSorting: true,
+  },
+  {
+    id: 'actions',
+    enableColumnFilter: false,
+    enableSorting: false,
+    cell: ({ row }) => {
+      return (
+        <div className="flex items-center justify-end">
+          <ProjectActions project={row.original} />
+        </div>
+      );
+    },
+  },
+];

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

@@ -0,0 +1,68 @@
+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 { 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';
+
+export default function CreateProject({ children }: { children: ReactNode }) {
+  const [open, setOpen] = useState(false);
+
+  const form = useForm({
+    name: '',
+  });
+
+  const submit: FormEventHandler = (e) => {
+    e.preventDefault();
+
+    form.post(route('projects.store'), {
+      onSuccess() {
+        setOpen(false);
+      },
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create project</DialogTitle>
+          <DialogDescription>Fill the form to create a new project</DialogDescription>
+        </DialogHeader>
+        <Form id="create-project-form" onSubmit={submit}>
+          <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>
+          </FormFields>
+        </Form>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button type="button" variant="outline">
+              Cancel
+            </Button>
+          </DialogClose>
+          <Button form="create-project-form" type="button" onClick={submit} disabled={form.processing}>
+            {form.processing && <LoaderCircle className="animate-spin" />}
+            Create
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,63 @@
+import { FormEvent, ReactNode } from 'react';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+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 { LoaderCircleIcon } from 'lucide-react';
+import { Project } from '@/types/project';
+
+export default function DeleteProject({ project, children }: { project: Project; children: ReactNode }) {
+  const form = useForm({
+    name: '',
+  });
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    form.delete(route('projects.destroy', project.id));
+  };
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Delete {project.name}</DialogTitle>
+          <DialogDescription>Delete project and all its resources.</DialogDescription>
+        </DialogHeader>
+
+        <Form id="delete-project-form" onSubmit={submit}>
+          <FormFields>
+            <FormField>
+              <Label htmlFor="project-name">Name</Label>
+              <Input id="project-name" value={form.data.name} onChange={(e) => form.setData('name', e.target.value)} />
+              <InputError message={form.errors.name} />
+            </FormField>
+          </FormFields>
+        </Form>
+
+        <DialogFooter className="gap-2">
+          <DialogClose asChild>
+            <Button variant="secondary">Cancel</Button>
+          </DialogClose>
+
+          <Button form="delete-project-form" variant="destructive" disabled={form.processing}>
+            {form.processing && <LoaderCircleIcon className="size-4 animate-spin" />}
+            Delete Project
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,164 @@
+import { Project } from '@/types/project';
+import { ColumnDef } from '@tanstack/react-table';
+import { User } from '@/types/user';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { FormEvent, ReactNode, useState } from 'react';
+import { DataTable } from '@/components/data-table';
+import { Button } from '@/components/ui/button';
+import { Form, FormField, FormFields } from '@/components/ui/form';
+import { Label } from '@/components/ui/label';
+import InputError from '@/components/ui/input-error';
+import UserSelect from '@/components/user-select';
+import { useForm } from '@inertiajs/react';
+import { LoaderCircleIcon, TrashIcon } from 'lucide-react';
+
+function AddUser({ project }: { project: Project }) {
+  const [open, setOpen] = useState(false);
+
+  const form = useForm({
+    user: 0,
+  });
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    form.post(route('projects.users', project.id), {
+      onSuccess: () => {
+        setOpen(false);
+      },
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="outline">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>
+        </DialogHeader>
+        <Form id="add-user-form" onSubmit={submit}>
+          <FormFields>
+            <FormField>
+              <Label htmlFor="user">User</Label>
+              <UserSelect onChange={(user: User) => form.setData('user', user.id)} />
+              <InputError message={form.errors.user} />
+            </FormField>
+          </FormFields>
+        </Form>
+        <DialogFooter className="gap-2">
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button form="add-user-form">Add</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function RemoveUser({ project, user }: { project: Project; user: User }) {
+  const [open, setOpen] = useState(false);
+
+  const form = useForm({
+    user: user.id,
+  });
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    form.delete(route('projects.users', project.id), {
+      onSuccess: () => {
+        setOpen(false);
+      },
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="outline" size="sm">
+          <TrashIcon />
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Remove user</DialogTitle>
+          <DialogDescription>Remove user from {project.name}.</DialogDescription>
+        </DialogHeader>
+
+        <DialogFooter className="gap-2">
+          <DialogClose asChild>
+            <Button variant="secondary">Cancel</Button>
+          </DialogClose>
+
+          <Button onClick={submit} variant="destructive" disabled={form.processing}>
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
+            Remove user
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+const getColumns = (project: Project): ColumnDef<User>[] => [
+  {
+    accessorKey: 'id',
+    header: 'ID',
+    enableColumnFilter: true,
+    enableSorting: true,
+    enableHiding: true,
+  },
+  {
+    accessorKey: 'name',
+    header: 'Name',
+    enableColumnFilter: true,
+    enableSorting: true,
+  },
+  {
+    accessorKey: 'email',
+    header: 'Email',
+    enableColumnFilter: true,
+    enableSorting: true,
+  },
+  {
+    id: 'actions',
+    enableColumnFilter: false,
+    enableSorting: false,
+    cell: ({ row }) => {
+      return (
+        <div className="flex items-center justify-end">
+          <RemoveUser user={row.original} project={project} />
+        </div>
+      );
+    },
+  },
+];
+
+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>
+  );
+}

resources/js/pages/projects/index.tsx

@@ -0,0 +1,36 @@
+import SettingsLayout from '@/layouts/settings/layout';
+import { Head, usePage } from '@inertiajs/react';
+import { DataTable } from '@/components/data-table';
+import { columns } from '@/pages/projects/components/columns';
+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 { Button } from '@/components/ui/button';
+
+export default function Projects() {
+  const page = usePage<{
+    projects: {
+      data: Project[];
+    };
+  }>();
+
+  return (
+    <SettingsLayout>
+      <Head title="Projects" />
+
+      <Container className="max-w-3xl">
+        <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>
+          </div>
+        </div>
+        <DataTable columns={columns} data={page.props.projects.data} />
+      </Container>
+    </SettingsLayout>
+  );
+}

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

@@ -2,11 +2,11 @@ import { Server } from '@/types/server';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 import { Button } from '@/components/ui/button';
 import { MoreVerticalIcon } from 'lucide-react';
-import DeleteServer from '@/pages/servers/partials/delete-server';
+import DeleteServer from '@/pages/servers/components/delete-server';
 
 export default function ServerActions({ server }: { server: Server }) {
   return (
-    <DropdownMenu>
+    <DropdownMenu modal={false}>
       <DropdownMenuTrigger asChild>
         <Button variant="ghost" className="h-8 w-8 p-0">
           <span className="sr-only">Open menu</span>

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

@@ -5,7 +5,7 @@ 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/partials/status';
+import ServerStatus from '@/pages/servers/components/status';
 
 export const columns: ColumnDef<Server>[] = [
   {

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

@@ -9,7 +9,7 @@ import InputError from '@/components/ui/input-error';
 import { Input } from '@/components/ui/input';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { ServerProvider } from '@/types/server-provider';
-import CreateServerProvider from '@/pages/server-providers/partials/create-server-provider';
+import CreateServerProvider from '@/pages/server-providers/components/create-server-provider';
 import axios from 'axios';
 import { Form, FormField, FormFields } from '@/components/ui/form';
 import type { SharedData } from '@/types';

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

@@ -1,8 +1,8 @@
 import { Server } from '@/types/server';
 import { CloudIcon, IdCardIcon, LoaderCircleIcon, MapPinIcon, SlashIcon } from 'lucide-react';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
-import ServerStatus from '@/pages/servers/partials/status';
-import ServerActions from '@/pages/servers/partials/actions';
+import ServerStatus from '@/pages/servers/components/status';
+import ServerActions from '@/pages/servers/components/actions';
 import { cn } from '@/lib/utils';
 
 export default function ServerHeader({ server }: { server: Server }) {

resources/js/pages/servers/index.tsx

@@ -3,12 +3,11 @@ import { Head, usePage } from '@inertiajs/react';
 import { type Configs } from '@/types';
 
 import { DataTable } from '@/components/data-table';
-import { columns } from '@/pages/servers/partials/columns';
+import { columns } from '@/pages/servers/components/columns';
 import { Server } from '@/types/server';
 import Heading from '@/components/heading';
-import CreateServer from '@/pages/servers/partials/create-server';
+import CreateServer from '@/pages/servers/components/create-server';
 import Container from '@/components/container';
-import { PlusIcon } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import React from 'react';
 import Layout from '@/layouts/app/layout';
@@ -29,12 +28,10 @@ export default function Servers() {
 
       <Container className="max-w-5xl">
         <div className="flex items-start justify-between">
-          <Heading title="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">
-                <PlusIcon /> Create new server
-              </Button>
+              <Button variant="outline">Create server</Button>
             </CreateServer>
           </div>
         </div>

resources/js/pages/servers/installing.tsx

@@ -2,7 +2,7 @@ import type { Server } from '@/types/server';
 import type { ServerLog } from '@/types/server-log';
 import Container from '@/components/container';
 import { DataTable } from '@/components/data-table';
-import { columns } from '@/pages/server-logs/partials/columns';
+import { columns } from '@/pages/server-logs/components/columns';
 import { usePage } from '@inertiajs/react';
 
 export default function InstallingServer() {

resources/js/pages/servers/overview.tsx

@@ -1,9 +1,10 @@
 import type { Server } from '@/types/server';
 import type { ServerLog } from '@/types/server-log';
 import { DataTable } from '@/components/data-table';
-import { columns } from '@/pages/server-logs/partials/columns';
+import { columns } from '@/pages/server-logs/components/columns';
 import { usePage } from '@inertiajs/react';
 import Container from '@/components/container';
+import Heading from '@/components/heading';
 
 export default function ServerOverview() {
   const page = usePage<{
@@ -15,6 +16,7 @@ export default function ServerOverview() {
 
   return (
     <Container className="max-w-3xl">
+      <Heading title="Overview" description="Here you can see an overview of your server" />
       <DataTable columns={columns} data={page.props.logs.data} />
     </Container>
   );

resources/js/types/index.d.ts

@@ -1,6 +1,8 @@
 import { LucideIcon } from 'lucide-react';
 import type { Config } from 'ziggy-js';
 import type { Server } from '@/types/server';
+import { Project } from '@/types/project';
+import { User } from '@/types/user';
 
 export interface Auth {
   user: User;

resources/js/types/project.d.ts

@@ -1,7 +1,12 @@
+import { User } from '@/types/user';
+
 export interface Project {
   id: number;
   name: string;
+  users: User[];
   created_at: string;
   updated_at: string;
+  created_at_by_timezone: string;
+  updated_at_by_timezone: string;
   [key: string]: unknown;
 }