ui(admin): add "working" React admin ui

resources/scripts/components/App.tsx

@@ -11,10 +11,12 @@ import Spinner from '@/components/elements/Spinner';
 import { store } from '@/state';
 import { ServerContext } from '@/state/server';
 import { SiteSettings } from '@/state/settings';
+import { AdminContext } from '@/state/admin';
 
+const AdminRouter = lazy(() => import('@/routers/AdminRouter'));
+const AuthenticationRouter = lazy(() => import('@/routers/AuthenticationRouter'));
 const DashboardRouter = lazy(() => import('@/routers/DashboardRouter'));
 const ServerRouter = lazy(() => import('@/routers/ServerRouter'));
-const AuthenticationRouter = lazy(() => import('@/routers/AuthenticationRouter'));
 
 interface ExtendedWindow extends Window {
     SiteConfiguration?: SiteSettings;
@@ -86,6 +88,17 @@ function App() {
                                 }
                             />
 
+                            <Route
+                                path="/admin/*"
+                                element={
+                                    <Spinner.Suspense>
+                                        <AdminContext.Provider>
+                                            <AdminRouter />
+                                        </AdminContext.Provider>
+                                    </Spinner.Suspense>
+                                }
+                            />
+
                             <Route
                                 path="/*"
                                 element={

resources/scripts/components/admin/AdminBox.tsx

@@ -0,0 +1,36 @@
+import type { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type { ReactNode } from 'react';
+import tw from 'twin.macro';
+
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+
+interface Props {
+    icon?: IconProp;
+    isLoading?: boolean;
+    title: string | ReactNode;
+    className?: string;
+    noPadding?: boolean;
+    children: ReactNode;
+    button?: ReactNode;
+}
+
+const AdminBox = ({ icon, title, className, isLoading, children, button, noPadding }: Props) => (
+    <div css={tw`relative rounded shadow-md bg-neutral-700`} className={className}>
+        <SpinnerOverlay visible={isLoading || false} />
+        <div css={tw`flex flex-row bg-neutral-900 rounded-t px-4 xl:px-5 py-3 border-b border-black`}>
+            {typeof title === 'string' ? (
+                <p css={tw`text-sm uppercase`}>
+                    {icon && <FontAwesomeIcon icon={icon} css={tw`mr-2 text-neutral-300`} />}
+                    {title}
+                </p>
+            ) : (
+                title
+            )}
+            {button}
+        </div>
+        <div css={[!noPadding && tw`px-4 xl:px-5 py-5`]}>{children}</div>
+    </div>
+);
+
+export default AdminBox;

resources/scripts/components/admin/AdminCheckbox.tsx

@@ -0,0 +1,36 @@
+import type { ChangeEvent } from 'react';
+import tw, { styled } from 'twin.macro';
+
+import Input from '@/components/elements/Input';
+
+export const TableCheckbox = styled(Input)`
+    && {
+        ${tw`border-neutral-500 bg-transparent`};
+
+        &:not(:checked) {
+            ${tw`hover:border-neutral-300`};
+        }
+    }
+`;
+
+export default ({
+    name,
+    checked,
+    onChange,
+}: {
+    name: string;
+    checked: boolean;
+    onChange(e: ChangeEvent<HTMLInputElement>): void;
+}) => {
+    return (
+        <div css={tw`flex items-center`}>
+            <TableCheckbox
+                type={'checkbox'}
+                name={'selectedItems'}
+                value={name}
+                checked={checked}
+                onChange={onChange}
+            />
+        </div>
+    );
+};

resources/scripts/components/admin/AdminContentBlock.tsx

@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react';
+import { useEffect } from 'react';
+// import { CSSTransition } from 'react-transition-group';
+import tw from 'twin.macro';
+import FlashMessageRender from '@/components/FlashMessageRender';
+
+const AdminContentBlock: React.FC<{
+    children: ReactNode;
+    title?: string;
+    showFlashKey?: string;
+    className?: string;
+}> = ({ children, title, showFlashKey }) => {
+    useEffect(() => {
+        if (!title) {
+            return;
+        }
+
+        document.title = `Admin | ${title}`;
+    }, [title]);
+
+    return (
+        // <CSSTransition timeout={150} classNames={'fade'} appear in>
+        <>
+            {showFlashKey && <FlashMessageRender byKey={showFlashKey} css={tw`mb-4`} />}
+            {children}
+            {/* <p css={tw`text-center text-neutral-500 text-xs mt-4`}>
+                &copy; 2015 - 2021&nbsp;
+                <a
+                    rel={'noopener nofollow noreferrer'}
+                    href={'https://pterodactyl.io'}
+                    target={'_blank'}
+                    css={tw`no-underline text-neutral-500 hover:text-neutral-300`}
+                >
+                    Pterodactyl Software
+                </a>
+            </p> */}
+        </>
+        // </CSSTransition>
+    );
+};
+
+export default AdminContentBlock;

resources/scripts/components/admin/AdminTable.tsx

@@ -0,0 +1,348 @@
+import { debounce } from 'debounce';
+import type { ChangeEvent, MouseEvent, ReactNode } from 'react';
+import { useCallback, useState } from 'react';
+import tw, { styled } from 'twin.macro';
+
+import type { ListContext as TableHooks } from '@/api/admin';
+import type { PaginatedResult, PaginationDataSet } from '@/api/http';
+import { TableCheckbox } from '@/components/admin/AdminCheckbox';
+import Input from '@/components/elements/Input';
+import InputSpinner from '@/components/elements/InputSpinner';
+import Spinner from '@/components/elements/Spinner';
+
+export function useTableHooks<T>(initialState?: T | (() => T)): TableHooks<T> {
+    const [page, setPage] = useState<number>(1);
+    const [filters, setFilters] = useState<T | null>(initialState || null);
+    const [sort, setSortState] = useState<string | null>(null);
+    const [sortDirection, setSortDirection] = useState<boolean>(false);
+
+    const setSort = (newSort: string | null) => {
+        if (sort === newSort) {
+            setSortDirection(!sortDirection);
+        } else {
+            setSortState(newSort);
+            setSortDirection(false);
+        }
+    };
+
+    return { page, setPage, filters, setFilters, sort, setSort, sortDirection, setSortDirection };
+}
+
+export const TableHeader = ({
+    name,
+    onClick,
+    direction,
+}: {
+    name?: string;
+    onClick?: (e: MouseEvent) => void;
+    direction?: number | null;
+}) => {
+    if (!name) {
+        return <th css={tw`px-6 py-2`} />;
+    }
+
+    return (
+        <th css={tw`px-6 py-2`} onClick={onClick}>
+            <span css={tw`flex flex-row items-center cursor-pointer`}>
+                <span
+                    css={tw`text-xs font-medium tracking-wider uppercase text-neutral-300 whitespace-nowrap select-none`}
+                >
+                    {name}
+                </span>
+
+                {direction !== undefined ? (
+                    <div css={tw`ml-1`}>
+                        <svg fill="none" viewBox="0 0 20 20" css={tw`w-4 h-4 text-neutral-400`}>
+                            {direction === null || direction === 1 ? (
+                                <path
+                                    stroke="currentColor"
+                                    strokeWidth="2"
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    d="M13 7L10 4L7 7"
+                                />
+                            ) : null}
+                            {direction === null || direction === 2 ? (
+                                <path
+                                    stroke="currentColor"
+                                    strokeWidth="2"
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    d="M7 13L10 16L13 13"
+                                />
+                            ) : null}
+                        </svg>
+                    </div>
+                ) : null}
+            </span>
+        </th>
+    );
+};
+
+export const TableHead = ({ children }: { children: ReactNode }) => {
+    return (
+        <thead css={tw`bg-neutral-900 border-t border-b border-neutral-500`}>
+            <tr>
+                <TableHeader />
+                {children}
+            </tr>
+        </thead>
+    );
+};
+
+export const TableBody = ({ children }: { children: ReactNode }) => {
+    return <tbody>{children}</tbody>;
+};
+
+export const TableRow = ({ children }: { children: ReactNode }) => {
+    return <tr css={tw`h-12 hover:bg-neutral-600`}>{children}</tr>;
+};
+
+interface Props<T> {
+    data?: PaginatedResult<T>;
+    onPageSelect: (page: number) => void;
+
+    children: ReactNode;
+}
+
+const PaginationButton = styled.button<{ active?: boolean }>`
+    ${tw`relative items-center px-3 py-1 -ml-px text-sm font-normal leading-5 transition duration-150 ease-in-out border border-neutral-500 focus:z-10 focus:outline-none focus:border-primary-300 inline-flex`};
+
+    ${props =>
+        props.active ? tw`bg-neutral-500 text-neutral-50` : tw`bg-neutral-600 text-neutral-200 hover:text-neutral-50`};
+`;
+
+const PaginationArrow = styled.button`
+    ${tw`relative inline-flex items-center px-1 py-1 text-sm font-medium leading-5 transition duration-150 ease-in-out border border-neutral-500 bg-neutral-600 text-neutral-400 hover:text-neutral-50 focus:z-10 focus:outline-none focus:border-primary-300`};
+
+    &:disabled {
+        ${tw`bg-neutral-700`}
+    }
+
+    &:hover:disabled {
+        ${tw`text-neutral-400 cursor-default`};
+    }
+`;
+
+export function Pagination<T>({ data, onPageSelect, children }: Props<T>) {
+    let pagination: PaginationDataSet;
+    if (data === undefined) {
+        pagination = {
+            total: 0,
+            count: 0,
+            perPage: 0,
+            currentPage: 1,
+            totalPages: 1,
+        };
+    } else {
+        pagination = data.pagination;
+    }
+
+    const setPage = (page: number) => {
+        if (page < 1 || page > pagination.totalPages) {
+            return;
+        }
+
+        onPageSelect(page);
+    };
+
+    const isFirstPage = pagination.currentPage === 1;
+    const isLastPage = pagination.currentPage >= pagination.totalPages;
+
+    const pages = [];
+
+    if (pagination.totalPages < 7) {
+        for (let i = 1; i <= pagination.totalPages; i++) {
+            pages.push(i);
+        }
+    } else {
+        // Don't ask me how this works, all I know is that this code will always have 7 items in the pagination,
+        // and keeps the current page centered if it is not too close to the start or end.
+        let start = Math.max(pagination.currentPage - 3, 1);
+        const end = Math.min(
+            pagination.totalPages,
+            pagination.currentPage + (pagination.currentPage < 4 ? 7 - pagination.currentPage : 3),
+        );
+
+        while (start !== 1 && end - start !== 6) {
+            start--;
+        }
+
+        for (let i = start; i <= end; i++) {
+            pages.push(i);
+        }
+    }
+
+    return (
+        <>
+            {children}
+
+            <div css={tw`h-12 flex flex-row items-center w-full px-6 py-3 border-t border-neutral-500`}>
+                <p css={tw`text-sm leading-5 text-neutral-400`}>
+                    Showing{' '}
+                    <span css={tw`text-neutral-300`}>
+                        {(pagination.currentPage - 1) * pagination.perPage + (pagination.total > 0 ? 1 : 0)}
+                    </span>{' '}
+                    to{' '}
+                    <span css={tw`text-neutral-300`}>
+                        {(pagination.currentPage - 1) * pagination.perPage + pagination.count}
+                    </span>{' '}
+                    of <span css={tw`text-neutral-300`}>{pagination.total}</span> results
+                </p>
+
+                {isFirstPage && isLastPage ? null : (
+                    <div css={tw`flex flex-row ml-auto`}>
+                        <nav css={tw`relative z-0 inline-flex shadow-sm`}>
+                            <PaginationArrow
+                                type="button"
+                                css={tw`rounded-l-md`}
+                                aria-label="Previous"
+                                disabled={pagination.currentPage === 1}
+                                onClick={() => setPage(pagination.currentPage - 1)}
+                            >
+                                <svg
+                                    css={tw`w-5 h-5`}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    viewBox="0 0 20 20"
+                                    fill="currentColor"
+                                >
+                                    <path
+                                        clipRule="evenodd"
+                                        fillRule="evenodd"
+                                        d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+                                    />
+                                </svg>
+                            </PaginationArrow>
+
+                            {pages.map(page => (
+                                <PaginationButton
+                                    key={page}
+                                    type="button"
+                                    onClick={() => setPage(page)}
+                                    active={pagination.currentPage === page}
+                                >
+                                    {page}
+                                </PaginationButton>
+                            ))}
+
+                            <PaginationArrow
+                                type="button"
+                                css={tw`-ml-px rounded-r-md`}
+                                aria-label="Next"
+                                disabled={pagination.currentPage === pagination.totalPages}
+                                onClick={() => setPage(pagination.currentPage + 1)}
+                            >
+                                <svg
+                                    css={tw`w-5 h-5`}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    viewBox="0 0 20 20"
+                                    fill="currentColor"
+                                >
+                                    <path
+                                        clipRule="evenodd"
+                                        fillRule="evenodd"
+                                        d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                                    />
+                                </svg>
+                            </PaginationArrow>
+                        </nav>
+                    </div>
+                )}
+            </div>
+        </>
+    );
+}
+
+export const Loading = () => {
+    return (
+        <div css={tw`w-full flex flex-col items-center justify-center`} style={{ height: '3rem' }}>
+            <Spinner size={'base'} />
+        </div>
+    );
+};
+
+export const NoItems = ({ className }: { className?: string }) => {
+    return (
+        <div css={tw`w-full flex flex-col items-center justify-center py-6 px-8`} className={className}>
+            <div css={tw`h-48 flex`}>
+                <img src={'/assets/svgs/not_found.svg'} alt={'No Items'} css={tw`h-full select-none`} />
+            </div>
+
+            <p css={tw`text-lg text-neutral-300 text-center font-normal sm:mt-8`}>
+                No items could be found, it&apos;s almost like they are hiding.
+            </p>
+        </div>
+    );
+};
+
+interface Params {
+    checked: boolean;
+    onSelectAllClick: (e: ChangeEvent<HTMLInputElement>) => void;
+    onSearch?: (query: string) => Promise<void>;
+
+    children: ReactNode;
+}
+
+export const ContentWrapper = ({ checked, onSelectAllClick, onSearch, children }: Params) => {
+    const [loading, setLoading] = useState(false);
+    const [inputText, setInputText] = useState('');
+
+    const search = useCallback(
+        debounce((query: string) => {
+            if (onSearch === undefined) {
+                return;
+            }
+
+            setLoading(true);
+            onSearch(query).then(() => setLoading(false));
+        }, 200),
+        [],
+    );
+
+    return (
+        <>
+            <div css={tw`flex flex-row items-center h-12 px-6`}>
+                <div css={tw`flex flex-row items-center`}>
+                    <TableCheckbox type={'checkbox'} name={'selectAll'} checked={checked} onChange={onSelectAllClick} />
+
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                        css={tw`w-4 h-4 ml-1 text-neutral-200`}
+                    >
+                        <path
+                            clipRule="evenodd"
+                            fillRule="evenodd"
+                            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                        />
+                    </svg>
+                </div>
+
+                <div css={tw`flex flex-row items-center ml-auto`}>
+                    <InputSpinner visible={loading}>
+                        <Input
+                            value={inputText}
+                            css={tw`h-8`}
+                            placeholder="Search..."
+                            onChange={e => {
+                                setInputText(e.currentTarget.value);
+                                search(e.currentTarget.value);
+                            }}
+                        />
+                    </InputSpinner>
+                </div>
+            </div>
+
+            {children}
+        </>
+    );
+};
+
+export default ({ children }: { children: ReactNode }) => {
+    return (
+        <div css={tw`flex flex-col w-full`}>
+            <div css={tw`rounded-lg shadow-md bg-neutral-700`}>{children}</div>
+        </div>
+    );
+};

resources/scripts/components/admin/Sidebar.tsx

@@ -0,0 +1,87 @@
+import tw, { css, styled } from 'twin.macro';
+
+import { withSubComponents } from '@/components/helpers';
+
+const Wrapper = styled.div`
+    ${tw`w-full flex flex-col px-4`};
+
+    & > a {
+        ${tw`h-10 w-full flex flex-row items-center text-neutral-300 cursor-pointer select-none px-4`};
+        ${tw`hover:text-neutral-50`};
+
+        & > svg {
+            ${tw`h-6 w-6 flex flex-shrink-0`};
+        }
+
+        & > span {
+            ${tw`font-header font-medium text-lg whitespace-nowrap leading-none ml-3`};
+        }
+
+        &:active,
+        &.active {
+            ${tw`text-neutral-50 bg-neutral-800 rounded`};
+        }
+    }
+`;
+
+const Section = styled.div`
+    ${tw`h-[18px] font-header font-medium text-xs text-neutral-300 whitespace-nowrap uppercase ml-4 mb-1 select-none`};
+
+    &:not(:first-of-type) {
+        ${tw`mt-4`};
+    }
+`;
+
+const User = styled.div`
+    ${tw`h-16 w-full flex items-center bg-neutral-700 justify-center`};
+`;
+
+const Sidebar = styled.div<{ $collapsed?: boolean }>`
+    ${tw`h-screen hidden md:flex flex-col items-center flex-shrink-0 bg-neutral-900 overflow-x-hidden ease-linear`};
+    ${tw`transition-[width] duration-150 ease-in`};
+    ${tw`w-[17.5rem]`};
+
+    & > a {
+        ${tw`h-10 w-full flex flex-row items-center text-neutral-300 cursor-pointer select-none px-8`};
+        ${tw`hover:text-neutral-50`};
+
+        & > svg {
+            ${tw`transition-none h-6 w-6 flex flex-shrink-0`};
+        }
+
+        & > span {
+            ${tw`font-header font-medium text-lg whitespace-nowrap leading-none ml-3`};
+        }
+    }
+
+    ${props =>
+        props.$collapsed &&
+        css`
+            ${tw`w-20`};
+
+            ${Section} {
+                ${tw`invisible`};
+            }
+
+            ${Wrapper} {
+                ${tw`px-5`};
+
+                & > a {
+                    ${tw`justify-center px-0`};
+                }
+            }
+
+            & > a {
+                ${tw`justify-center px-4`};
+            }
+
+            & > a > span,
+            ${User} > div,
+            ${User} > a,
+            ${Wrapper} > a > span {
+                ${tw`hidden`};
+            }
+        `};
+`;
+
+export default withSubComponents(Sidebar, { Section, Wrapper, User });

resources/scripts/components/admin/SubNavigation.tsx

@@ -0,0 +1,42 @@
+import type { ComponentType, ReactNode } from 'react';
+import { NavLink } from 'react-router-dom';
+import tw, { styled } from 'twin.macro';
+
+export const SubNavigation = styled.div`
+    ${tw`flex flex-row items-center flex-shrink-0 h-12 mb-4 border-b border-neutral-700`};
+
+    & > a {
+        ${tw`flex flex-row items-center h-full px-4 border-b text-neutral-300 text-base whitespace-nowrap border-transparent`};
+
+        & > svg {
+            ${tw`w-6 h-6 mr-2`};
+        }
+
+        &:active,
+        &.active {
+            ${tw`text-primary-300 border-primary-300`};
+        }
+    }
+`;
+
+interface Props {
+    to: string;
+    name: string;
+}
+
+interface PropsWithIcon extends Props {
+    icon: ComponentType;
+    children?: never;
+}
+
+interface PropsWithoutIcon extends Props {
+    icon?: never;
+    children: ReactNode;
+}
+
+export const SubNavigationLink = ({ to, name, icon: IconComponent, children }: PropsWithIcon | PropsWithoutIcon) => (
+    <NavLink to={to}>
+        {IconComponent ? <IconComponent /> : children}
+        {name}
+    </NavLink>
+);

resources/scripts/components/admin/databases/DatabaseDeleteButton.tsx

@@ -0,0 +1,73 @@
+import { Actions, useStoreActions } from 'easy-peasy';
+import { useState } from 'react';
+import tw from 'twin.macro';
+
+import deleteDatabase from '@/api/admin/databases/deleteDatabase';
+import Button from '@/components/elements/Button';
+import ConfirmationModal from '@/components/elements/ConfirmationModal';
+import type { ApplicationStore } from '@/state';
+
+interface Props {
+    databaseId: number;
+    onDeleted: () => void;
+}
+
+export default ({ databaseId, onDeleted }: Props) => {
+    const [visible, setVisible] = useState(false);
+    const [loading, setLoading] = useState(false);
+
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions(
+        (actions: Actions<ApplicationStore>) => actions.flashes,
+    );
+
+    const onDelete = () => {
+        setLoading(true);
+        clearFlashes('database');
+
+        deleteDatabase(databaseId)
+            .then(() => {
+                setLoading(false);
+                onDeleted();
+            })
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'database', error });
+
+                setLoading(false);
+                setVisible(false);
+            });
+    };
+
+    return (
+        <>
+            <ConfirmationModal
+                visible={visible}
+                title={'Delete database host?'}
+                buttonText={'Yes, delete database host'}
+                onConfirmed={onDelete}
+                showSpinnerOverlay={loading}
+                onModalDismissed={() => setVisible(false)}
+            >
+                Are you sure you want to delete this database host? This action will delete all knowledge of databases
+                created on this host but not the databases themselves.
+            </ConfirmationModal>
+
+            <Button type={'button'} size={'xsmall'} color={'red'} onClick={() => setVisible(true)}>
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    css={tw`h-5 w-5`}
+                >
+                    <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                    />
+                </svg>
+            </Button>
+        </>
+    );
+};

resources/scripts/components/admin/databases/DatabaseEditContainer.tsx

@@ -0,0 +1,235 @@
+import type { Action, Actions } from 'easy-peasy';
+import { action, createContextStore, useStoreActions } from 'easy-peasy';
+import type { FormikHelpers } from 'formik';
+import { Form, Formik } from 'formik';
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import tw from 'twin.macro';
+import { number, object, string } from 'yup';
+
+import type { Database } from '@/api/admin/databases/getDatabases';
+import getDatabase from '@/api/admin/databases/getDatabase';
+import updateDatabase from '@/api/admin/databases/updateDatabase';
+import AdminContentBlock from '@/components/admin/AdminContentBlock';
+import Spinner from '@/components/elements/Spinner';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import AdminBox from '@/components/admin/AdminBox';
+import Button from '@/components/elements/Button';
+import Field from '@/components/elements/Field';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+import DatabaseDeleteButton from '@/components/admin/databases/DatabaseDeleteButton';
+import type { ApplicationStore } from '@/state';
+
+interface ctx {
+    database: Database | undefined;
+    setDatabase: Action<ctx, Database | undefined>;
+}
+
+export const Context = createContextStore<ctx>({
+    database: undefined,
+
+    setDatabase: action((state, payload) => {
+        state.database = payload;
+    }),
+});
+
+export interface Values {
+    name: string;
+    host: string;
+    port: number;
+    username: string;
+    password: string;
+}
+
+export interface Params {
+    title: string;
+    initialValues?: Values;
+    children?: React.ReactNode;
+
+    onSubmit: (values: Values, helpers: FormikHelpers<Values>) => void;
+}
+
+export const InformationContainer = ({ title, initialValues, children, onSubmit }: Params) => {
+    const submit = (values: Values, helpers: FormikHelpers<Values>) => {
+        onSubmit(values, helpers);
+    };
+
+    if (!initialValues) {
+        initialValues = {
+            name: '',
+            host: '',
+            port: 3306,
+            username: '',
+            password: '',
+        };
+    }
+
+    return (
+        <Formik
+            onSubmit={submit}
+            initialValues={initialValues}
+            validationSchema={object().shape({
+                name: string().required().max(191),
+                host: string().max(255),
+                port: number().min(2).max(65534),
+                username: string().min(1).max(32),
+                password: string(),
+            })}
+        >
+            {({ isSubmitting, isValid }) => (
+                <>
+                    <AdminBox title={title} css={tw`relative`}>
+                        <SpinnerOverlay visible={isSubmitting} />
+
+                        <Form css={tw`mb-0`}>
+                            <div>
+                                <Field id={'name'} name={'name'} label={'Name'} type={'text'} />
+                            </div>
+
+                            <div css={tw`md:w-full md:flex md:flex-row mt-6`}>
+                                <div css={tw`md:w-full md:flex md:flex-col md:mr-4 mt-6 md:mt-0`}>
+                                    <Field id={'host'} name={'host'} label={'Host'} type={'text'} />
+                                </div>
+
+                                <div css={tw`md:w-full md:flex md:flex-col md:ml-4 mt-6 md:mt-0`}>
+                                    <Field id={'port'} name={'port'} label={'Port'} type={'text'} />
+                                </div>
+                            </div>
+
+                            <div css={tw`md:w-full md:flex md:flex-row mt-6`}>
+                                <div css={tw`md:w-full md:flex md:flex-col md:mr-4 mt-6 md:mt-0`}>
+                                    <Field id={'username'} name={'username'} label={'Username'} type={'text'} />
+                                </div>
+
+                                <div css={tw`md:w-full md:flex md:flex-col md:ml-4 mt-6 md:mt-0`}>
+                                    <Field
+                                        id={'password'}
+                                        name={'password'}
+                                        label={'Password'}
+                                        type={'password'}
+                                        placeholder={'••••••••'}
+                                    />
+                                </div>
+                            </div>
+
+                            <div css={tw`w-full flex flex-row items-center mt-6`}>
+                                {children}
+                                <div css={tw`flex ml-auto`}>
+                                    <Button type={'submit'} disabled={isSubmitting || !isValid}>
+                                        Save Changes
+                                    </Button>
+                                </div>
+                            </div>
+                        </Form>
+                    </AdminBox>
+                </>
+            )}
+        </Formik>
+    );
+};
+
+const EditInformationContainer = () => {
+    const navigate = useNavigate();
+
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions(
+        (actions: Actions<ApplicationStore>) => actions.flashes,
+    );
+
+    const database = Context.useStoreState(state => state.database);
+    const setDatabase = Context.useStoreActions(actions => actions.setDatabase);
+
+    if (database === undefined) {
+        return <></>;
+    }
+
+    const submit = ({ name, host, port, username, password }: Values, { setSubmitting }: FormikHelpers<Values>) => {
+        clearFlashes('database');
+
+        updateDatabase(database.id, name, host, port, username, password || undefined)
+            .then(() => setDatabase({ ...database, name, host, port, username }))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'database', error });
+            })
+            .then(() => setSubmitting(false));
+    };
+
+    return (
+        <InformationContainer
+            title={'Edit Database'}
+            initialValues={{
+                name: database.name,
+                host: database.host,
+                port: database.port,
+                username: database.username,
+                password: '',
+            }}
+            onSubmit={submit}
+        >
+            <div css={tw`flex`}>
+                <DatabaseDeleteButton databaseId={database.id} onDeleted={() => navigate('/admin/databases')} />
+            </div>
+        </InformationContainer>
+    );
+};
+
+const DatabaseEditContainer = () => {
+    const params = useParams<'id'>();
+
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions(
+        (actions: Actions<ApplicationStore>) => actions.flashes,
+    );
+    const [loading, setLoading] = useState(true);
+
+    const database = Context.useStoreState(state => state.database);
+    const setDatabase = Context.useStoreActions(actions => actions.setDatabase);
+
+    useEffect(() => {
+        clearFlashes('database');
+
+        getDatabase(Number(params.id))
+            .then(database => setDatabase(database))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'database', error });
+            })
+            .then(() => setLoading(false));
+    }, []);
+
+    if (loading || database === undefined) {
+        return (
+            <AdminContentBlock>
+                <FlashMessageRender byKey={'database'} css={tw`mb-4`} />
+
+                <div css={tw`w-full flex flex-col items-center justify-center`} style={{ height: '24rem' }}>
+                    <Spinner size={'base'} />
+                </div>
+            </AdminContentBlock>
+        );
+    }
+
+    return (
+        <AdminContentBlock title={'Database - ' + database.name}>
+            <div css={tw`w-full flex flex-row items-center mb-8`}>
+                <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
+                    <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{database.name}</h2>
+                    <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>
+                        {database.getAddress()}
+                    </p>
+                </div>
+            </div>
+
+            <FlashMessageRender byKey={'database'} css={tw`mb-4`} />
+
+            <EditInformationContainer />
+        </AdminContentBlock>
+    );
+};
+
+export default () => {
+    return (
+        <Context.Provider>
+            <DatabaseEditContainer />
+        </Context.Provider>
+    );
+};

resources/scripts/components/admin/databases/DatabasesContainer.tsx

@@ -0,0 +1,194 @@
+import { useContext, useEffect } from 'react';
+import { NavLink } from 'react-router-dom';
+import tw from 'twin.macro';
+
+import type { Filters } from '@/api/admin/databases/getDatabases';
+import getDatabases, { Context as DatabasesContext } from '@/api/admin/databases/getDatabases';
+import useFlash from '@/plugins/useFlash';
+import { AdminContext } from '@/state/admin';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import AdminCheckbox from '@/components/admin/AdminCheckbox';
+import AdminContentBlock from '@/components/admin/AdminContentBlock';
+import AdminTable, {
+    TableBody,
+    TableHead,
+    TableHeader,
+    TableRow,
+    Pagination,
+    Loading,
+    NoItems,
+    ContentWrapper,
+    useTableHooks,
+} from '@/components/admin/AdminTable';
+import Button from '@/components/elements/Button';
+import CopyOnClick from '@/components/elements/CopyOnClick';
+
+const RowCheckbox = ({ id }: { id: number }) => {
+    const isChecked = AdminContext.useStoreState(state => state.databases.selectedDatabases.indexOf(id) >= 0);
+    const appendSelectedDatabase = AdminContext.useStoreActions(actions => actions.databases.appendSelectedDatabase);
+    const removeSelectedDatabase = AdminContext.useStoreActions(actions => actions.databases.removeSelectedDatabase);
+
+    return (
+        <AdminCheckbox
+            name={id.toString()}
+            checked={isChecked}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                if (e.currentTarget.checked) {
+                    appendSelectedDatabase(id);
+                } else {
+                    removeSelectedDatabase(id);
+                }
+            }}
+        />
+    );
+};
+
+const DatabasesContainer = () => {
+    const { page, setPage, setFilters, sort, setSort, sortDirection } = useContext(DatabasesContext);
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+    const { data: databases, error, isValidating } = getDatabases();
+
+    useEffect(() => {
+        if (!error) {
+            clearFlashes('databases');
+            return;
+        }
+
+        clearAndAddHttpError({ key: 'databases', error });
+    }, [error]);
+
+    const length = databases?.items?.length || 0;
+
+    const setSelectedDatabases = AdminContext.useStoreActions(actions => actions.databases.setSelectedDatabases);
+    const selectedDatabasesLength = AdminContext.useStoreState(state => state.databases.selectedDatabases.length);
+
+    const onSelectAllClick = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setSelectedDatabases(e.currentTarget.checked ? databases?.items?.map(database => database.id) || [] : []);
+    };
+
+    const onSearch = (query: string): Promise<void> => {
+        return new Promise(resolve => {
+            if (query.length < 2) {
+                setFilters(null);
+            } else {
+                setFilters({ name: query });
+            }
+            return resolve();
+        });
+    };
+
+    useEffect(() => {
+        setSelectedDatabases([]);
+    }, [page]);
+
+    return (
+        <AdminContentBlock title={'Databases'}>
+            <div css={tw`w-full flex flex-row items-center mb-8`}>
+                <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
+                    <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Database Hosts</h2>
+                    <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>
+                        Database hosts that servers can have databases created on.
+                    </p>
+                </div>
+
+                <div css={tw`flex ml-auto pl-4`}>
+                    <NavLink to="/admin/databases/new">
+                        <Button type={'button'} size={'large'} css={tw`h-10 px-4 py-0 whitespace-nowrap`}>
+                            New Database Host
+                        </Button>
+                    </NavLink>
+                </div>
+            </div>
+
+            <FlashMessageRender byKey={'databases'} css={tw`mb-4`} />
+
+            <AdminTable>
+                <ContentWrapper
+                    checked={selectedDatabasesLength === (length === 0 ? -1 : length)}
+                    onSelectAllClick={onSelectAllClick}
+                    onSearch={onSearch}
+                >
+                    <Pagination data={databases} onPageSelect={setPage}>
+                        <div css={tw`overflow-x-auto`}>
+                            <table css={tw`w-full table-auto`}>
+                                <TableHead>
+                                    <TableHeader
+                                        name={'ID'}
+                                        direction={sort === 'id' ? (sortDirection ? 1 : 2) : null}
+                                        onClick={() => setSort('id')}
+                                    />
+                                    <TableHeader
+                                        name={'Name'}
+                                        direction={sort === 'name' ? (sortDirection ? 1 : 2) : null}
+                                        onClick={() => setSort('name')}
+                                    />
+                                    <TableHeader name={'Address'} />
+                                    <TableHeader name={'Username'} />
+                                </TableHead>
+
+                                <TableBody>
+                                    {databases !== undefined &&
+                                        !error &&
+                                        !isValidating &&
+                                        length > 0 &&
+                                        databases.items.map(database => (
+                                            <TableRow key={database.id}>
+                                                <td css={tw`pl-6`}>
+                                                    <RowCheckbox id={database.id} />
+                                                </td>
+
+                                                <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                    <CopyOnClick text={database.id.toString()}>
+                                                        <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>
+                                                            {database.id}
+                                                        </code>
+                                                    </CopyOnClick>
+                                                </td>
+
+                                                <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                    <NavLink
+                                                        to={`/admin/databases/${database.id}`}
+                                                        css={tw`text-primary-400 hover:text-primary-300`}
+                                                    >
+                                                        {database.name}
+                                                    </NavLink>
+                                                </td>
+
+                                                <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                    <CopyOnClick text={database.getAddress()}>
+                                                        <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>
+                                                            {database.getAddress()}
+                                                        </code>
+                                                    </CopyOnClick>
+                                                </td>
+
+                                                <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                    {database.username}
+                                                </td>
+                                            </TableRow>
+                                        ))}
+                                </TableBody>
+                            </table>
+
+                            {databases === undefined || (error && isValidating) ? (
+                                <Loading />
+                            ) : length < 1 ? (
+                                <NoItems />
+                            ) : null}
+                        </div>
+                    </Pagination>
+                </ContentWrapper>
+            </AdminTable>
+        </AdminContentBlock>
+    );
+};
+
+export default () => {
+    const hooks = useTableHooks<Filters>();
+
+    return (
+        <DatabasesContext.Provider value={hooks}>
+            <DatabasesContainer />
+        </DatabasesContext.Provider>
+    );
+};

resources/scripts/components/admin/databases/NewDatabaseContainer.tsx

@@ -0,0 +1,48 @@
+import type { Actions } from 'easy-peasy';
+import { useStoreActions } from 'easy-peasy';
+import type { FormikHelpers } from 'formik';
+import { useNavigate } from 'react-router-dom';
+import tw from 'twin.macro';
+
+import createDatabase from '@/api/admin/databases/createDatabase';
+import AdminContentBlock from '@/components/admin/AdminContentBlock';
+import { InformationContainer, Values } from '@/components/admin/databases/DatabaseEditContainer';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import { ApplicationStore } from '@/state';
+
+export default () => {
+    const navigate = useNavigate();
+
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions(
+        (actions: Actions<ApplicationStore>) => actions.flashes,
+    );
+
+    const submit = ({ name, host, port, username, password }: Values, { setSubmitting }: FormikHelpers<Values>) => {
+        clearFlashes('database:create');
+
+        createDatabase(name, host, port, username, password)
+            .then(database => navigate(`/admin/databases/${database.id}`))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'database:create', error });
+            })
+            .then(() => setSubmitting(false));
+    };
+
+    return (
+        <AdminContentBlock title={'New Database'}>
+            <div css={tw`w-full flex flex-row items-center mb-8`}>
+                <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
+                    <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>New Database Host</h2>
+                    <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>
+                        Add a new database host to the panel.
+                    </p>
+                </div>
+            </div>
+
+            <FlashMessageRender byKey={'database:create'} css={tw`mb-4`} />
+
+            <InformationContainer title={'Create Database'} onSubmit={submit} />
+        </AdminContentBlock>
+    );
+};

resources/scripts/components/admin/locations/LocationDeleteButton.tsx

@@ -0,0 +1,74 @@
+import type { Actions } from 'easy-peasy';
+import { useStoreActions } from 'easy-peasy';
+import { useState } from 'react';
+import tw from 'twin.macro';
+
+import deleteLocation from '@/api/admin/locations/deleteLocation';
+import Button from '@/components/elements/Button';
+import ConfirmationModal from '@/components/elements/ConfirmationModal';
+import type { ApplicationStore } from '@/state';
+
+interface Props {
+    locationId: number;
+    onDeleted: () => void;
+}
+
+export default ({ locationId, onDeleted }: Props) => {
+    const [visible, setVisible] = useState(false);
+    const [loading, setLoading] = useState(false);
+
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions(
+        (actions: Actions<ApplicationStore>) => actions.flashes,
+    );
+
+    const onDelete = () => {
+        setLoading(true);
+        clearFlashes('location');
+
+        deleteLocation(locationId)
+            .then(() => {
+                setLoading(false);
+                onDeleted();
+            })
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'location', error });
+
+                setLoading(false);
+                setVisible(false);
+            });
+    };
+
+    return (
+        <>
+            <ConfirmationModal
+                visible={visible}
+                title={'Delete location?'}
+                buttonText={'Yes, delete location'}
+                onConfirmed={onDelete}
+                showSpinnerOverlay={loading}
+                onModalDismissed={() => setVisible(false)}
+            >
+                Are you sure you want to delete this location? You may only delete a location if no nodes are assigned
+                to it.
+            </ConfirmationModal>
+
+            <Button type={'button'} size={'xsmall'} color={'red'} onClick={() => setVisible(true)}>
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    css={tw`h-5 w-5`}
+                >
+                    <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                    />
+                </svg>
+            </Button>
+        </>
+    );
+};

resources/scripts/components/admin/locations/LocationEditContainer.tsx

@@ -0,0 +1,180 @@
+import type { Action, Actions } from 'easy-peasy';
+import { action, createContextStore, useStoreActions } from 'easy-peasy';
+import type { FormikHelpers } from 'formik';
+import { Form, Formik } from 'formik';
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import tw from 'twin.macro';
+import { object, string } from 'yup';
+
+import type { Location } from '@/api/admin/locations/getLocations';
+import getLocation from '@/api/admin/locations/getLocation';
+import updateLocation from '@/api/admin/locations/updateLocation';
+import AdminBox from '@/components/admin/AdminBox';
+import AdminContentBlock from '@/components/admin/AdminContentBlock';
+import LocationDeleteButton from '@/components/admin/locations/LocationDeleteButton';
+import Button from '@/components/elements/Button';
+import Field from '@/components/elements/Field';
+import Spinner from '@/components/elements/Spinner';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import type { ApplicationStore } from '@/state';
+
+interface ctx {
+    location: Location | undefined;
+    setLocation: Action<ctx, Location | undefined>;
+}
+
+export const Context = createContextStore<ctx>({
+    location: undefined,
+
+    setLocation: action((state, payload) => {
+        state.location = payload;
+    }),
+});
+
+interface Values {
+    short: string;
+    long: string;
+}
+
+const EditInformationContainer = () => {
+    const navigate = useNavigate();
+
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions(
+        (actions: Actions<ApplicationStore>) => actions.flashes,
+    );
+
+    const location = Context.useStoreState(state => state.location);
+    const setLocation = Context.useStoreActions(actions => actions.setLocation);
+
+    if (location === undefined) {
+        return <></>;
+    }
+
+    const submit = ({ short, long }: Values, { setSubmitting }: FormikHelpers<Values>) => {
+        clearFlashes('location');
+
+        updateLocation(location.id, short, long)
+            .then(() => setLocation({ ...location, short, long }))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'location', error });
+            })
+            .then(() => setSubmitting(false));
+    };
+
+    return (
+        <Formik
+            onSubmit={submit}
+            initialValues={{
+                short: location.short,
+                long: location.long || '',
+            }}
+            validationSchema={object().shape({
+                short: string().required().min(1),
+                long: string().max(255, ''),
+            })}
+        >
+            {({ isSubmitting, isValid }) => (
+                <>
+                    <AdminBox title={'Edit Location'} css={tw`relative`}>
+                        <SpinnerOverlay visible={isSubmitting} />
+
+                        <Form css={tw`mb-0`}>
+                            <div>
+                                <Field id={'short'} name={'short'} label={'Short Name'} type={'text'} />
+                            </div>
+
+                            <div css={tw`mt-6`}>
+                                <Field id={'long'} name={'long'} label={'Long Name'} type={'text'} />
+                            </div>
+
+                            <div css={tw`w-full flex flex-row items-center mt-6`}>
+                                <div css={tw`flex`}>
+                                    <LocationDeleteButton
+                                        locationId={location.id}
+                                        onDeleted={() => navigate('/admin/locations')}
+                                    />
+                                </div>
+
+                                <div css={tw`flex ml-auto`}>
+                                    <Button type={'submit'} disabled={isSubmitting || !isValid}>
+                                        Save Changes
+                                    </Button>
+                                </div>
+                            </div>
+                        </Form>
+                    </AdminBox>
+                </>
+            )}
+        </Formik>
+    );
+};
+
+const LocationEditContainer = () => {
+    const params = useParams<'id'>();
+
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions(
+        (actions: Actions<ApplicationStore>) => actions.flashes,
+    );
+    const [loading, setLoading] = useState(true);
+
+    const location = Context.useStoreState(state => state.location);
+    const setLocation = Context.useStoreActions(actions => actions.setLocation);
+
+    useEffect(() => {
+        clearFlashes('location');
+
+        getLocation(Number(params.id))
+            .then(location => setLocation(location))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'location', error });
+            })
+            .then(() => setLoading(false));
+    }, []);
+
+    if (loading || location === undefined) {
+        return (
+            <AdminContentBlock>
+                <FlashMessageRender byKey={'location'} css={tw`mb-4`} />
+
+                <div css={tw`w-full flex flex-col items-center justify-center`} style={{ height: '24rem' }}>
+                    <Spinner size={'base'} />
+                </div>
+            </AdminContentBlock>
+        );
+    }
+
+    return (
+        <AdminContentBlock title={'Location - ' + location.short}>
+            <div css={tw`w-full flex flex-row items-center mb-8`}>
+                <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
+                    <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{location.short}</h2>
+                    {(location.long || '').length < 1 ? (
+                        <p css={tw`text-base text-neutral-400`}>
+                            <span css={tw`italic`}>No long name</span>
+                        </p>
+                    ) : (
+                        <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>
+                            {location.long}
+                        </p>
+                    )}
+                </div>
+            </div>
+
+            <FlashMessageRender byKey={'location'} css={tw`mb-4`} />
+
+            <EditInformationContainer />
+        </AdminContentBlock>
+    );
+};
+
+export default () => {
+    return (
+        <Context.Provider>
+            <LocationEditContainer />
+        </Context.Provider>
+    );
+};

resources/scripts/components/admin/locations/LocationsContainer.tsx

@@ -0,0 +1,186 @@
+import type { ChangeEvent } from 'react';
+import { useContext, useEffect } from 'react';
+import { NavLink } from 'react-router-dom';
+import tw from 'twin.macro';
+
+import type { Filters } from '@/api/admin/locations/getLocations';
+import getLocations, { Context as LocationsContext } from '@/api/admin/locations/getLocations';
+import AdminContentBlock from '@/components/admin/AdminContentBlock';
+import AdminCheckbox from '@/components/admin/AdminCheckbox';
+import AdminTable, {
+    TableBody,
+    TableHead,
+    TableHeader,
+    TableRow,
+    Pagination,
+    Loading,
+    NoItems,
+    ContentWrapper,
+    useTableHooks,
+} from '@/components/admin/AdminTable';
+import NewLocationButton from '@/components/admin/locations/NewLocationButton';
+import CopyOnClick from '@/components/elements/CopyOnClick';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import useFlash from '@/plugins/useFlash';
+import { AdminContext } from '@/state/admin';
+
+const RowCheckbox = ({ id }: { id: number }) => {
+    const isChecked = AdminContext.useStoreState(state => state.locations.selectedLocations.indexOf(id) >= 0);
+    const appendSelectedLocation = AdminContext.useStoreActions(actions => actions.locations.appendSelectedLocation);
+    const removeSelectedLocation = AdminContext.useStoreActions(actions => actions.locations.removeSelectedLocation);
+
+    return (
+        <AdminCheckbox
+            name={id.toString()}
+            checked={isChecked}
+            onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                if (e.currentTarget.checked) {
+                    appendSelectedLocation(id);
+                } else {
+                    removeSelectedLocation(id);
+                }
+            }}
+        />
+    );
+};
+
+const LocationsContainer = () => {
+    const { page, setPage, setFilters, sort, setSort, sortDirection } = useContext(LocationsContext);
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+    const { data: locations, error, isValidating } = getLocations();
+
+    useEffect(() => {
+        if (!error) {
+            clearFlashes('locations');
+            return;
+        }
+
+        clearAndAddHttpError({ key: 'locations', error });
+    }, [error]);
+
+    const length = locations?.items?.length || 0;
+
+    const setSelectedLocations = AdminContext.useStoreActions(actions => actions.locations.setSelectedLocations);
+    const selectedLocationsLength = AdminContext.useStoreState(state => state.locations.selectedLocations.length);
+
+    const onSelectAllClick = (e: ChangeEvent<HTMLInputElement>) => {
+        setSelectedLocations(e.currentTarget.checked ? locations?.items?.map(location => location.id) || [] : []);
+    };
+
+    const onSearch = (query: string): Promise<void> => {
+        return new Promise(resolve => {
+            if (query.length < 2) {
+                setFilters(null);
+            } else {
+                setFilters({ short: query });
+            }
+            return resolve();
+        });
+    };
+
+    useEffect(() => {
+        setSelectedLocations([]);
+    }, [page]);
+
+    return (
+        <AdminContentBlock title={'Locations'}>
+            <div css={tw`w-full flex flex-row items-center mb-8`}>
+                <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
+                    <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Locations</h2>
+                    <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>
+                        All locations that nodes can be assigned to for easier categorization.
+                    </p>
+                </div>
+
+                <div css={tw`flex ml-auto pl-4`}>
+                    <NewLocationButton />
+                </div>
+            </div>
+
+            <FlashMessageRender byKey={'locations'} css={tw`mb-4`} />
+
+            <AdminTable>
+                <ContentWrapper
+                    checked={selectedLocationsLength === (length === 0 ? -1 : length)}
+                    onSelectAllClick={onSelectAllClick}
+                    onSearch={onSearch}
+                >
+                    <Pagination data={locations} onPageSelect={setPage}>
+                        <div css={tw`overflow-x-auto`}>
+                            <table css={tw`w-full table-auto`}>
+                                <TableHead>
+                                    <TableHeader
+                                        name={'ID'}
+                                        direction={sort === 'id' ? (sortDirection ? 1 : 2) : null}
+                                        onClick={() => setSort('id')}
+                                    />
+                                    <TableHeader
+                                        name={'Short Name'}
+                                        direction={sort === 'short' ? (sortDirection ? 1 : 2) : null}
+                                        onClick={() => setSort('short')}
+                                    />
+                                    <TableHeader
+                                        name={'Long Name'}
+                                        direction={sort === 'long' ? (sortDirection ? 1 : 2) : null}
+                                        onClick={() => setSort('long')}
+                                    />
+                                </TableHead>
+
+                                <TableBody>
+                                    {locations !== undefined &&
+                                        !error &&
+                                        !isValidating &&
+                                        length > 0 &&
+                                        locations.items.map(location => (
+                                            <TableRow key={location.id}>
+                                                <td css={tw`pl-6`}>
+                                                    <RowCheckbox id={location.id} />
+                                                </td>
+
+                                                <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                    <CopyOnClick text={location.id.toString()}>
+                                                        <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>
+                                                            {location.id}
+                                                        </code>
+                                                    </CopyOnClick>
+                                                </td>
+
+                                                <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                    <NavLink
+                                                        to={`/admin/locations/${location.id}`}
+                                                        css={tw`text-primary-400 hover:text-primary-300`}
+                                                    >
+                                                        {location.short}
+                                                    </NavLink>
+                                                </td>
+
+                                                <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                    {location.long}
+                                                </td>
+                                            </TableRow>
+                                        ))}
+                                </TableBody>
+                            </table>
+
+                            {locations === undefined || (error && isValidating) ? (
+                                <Loading />
+                            ) : length < 1 ? (
+                                <NoItems />
+                            ) : null}
+                        </div>
+                    </Pagination>
+                </ContentWrapper>
+            </AdminTable>
+        </AdminContentBlock>
+    );
+};
+
+export default () => {
+    const hooks = useTableHooks<Filters>();
+
+    return (
+        <LocationsContext.Provider value={hooks}>
+            <LocationsContainer />
+        </LocationsContext.Provider>
+    );
+};

resources/scripts/components/admin/locations/NewLocationButton.tsx

@@ -0,0 +1,112 @@
+import type { FormikHelpers } from 'formik';
+import { Form, Formik } from 'formik';
+import { useState } from 'react';
+import tw from 'twin.macro';
+import { object, string } from 'yup';
+
+import createLocation from '@/api/admin/locations/createLocation';
+import getLocations from '@/api/admin/locations/getLocations';
+import Button from '@/components/elements/Button';
+import Field from '@/components/elements/Field';
+import Modal from '@/components/elements/Modal';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import useFlash from '@/plugins/useFlash';
+
+interface Values {
+    short: string;
+    long: string;
+}
+
+const schema = object().shape({
+    short: string()
+        .required('A location short name must be provided.')
+        .max(32, 'Location short name must not exceed 32 characters.'),
+    long: string().max(255, 'Location long name must not exceed 255 characters.'),
+});
+
+export default () => {
+    const [visible, setVisible] = useState(false);
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+    const { mutate } = getLocations();
+
+    const submit = ({ short, long }: Values, { setSubmitting }: FormikHelpers<Values>) => {
+        clearFlashes('location:create');
+        setSubmitting(true);
+
+        createLocation(short, long)
+            .then(async location => {
+                await mutate(data => ({ ...data!, items: data!.items.concat(location) }), false);
+                setVisible(false);
+            })
+            .catch(error => {
+                clearAndAddHttpError({ key: 'location:create', error });
+                setSubmitting(false);
+            });
+    };
+
+    return (
+        <>
+            <Formik onSubmit={submit} initialValues={{ short: '', long: '' }} validationSchema={schema}>
+                {({ isSubmitting, resetForm }) => (
+                    <Modal
+                        visible={visible}
+                        dismissable={!isSubmitting}
+                        showSpinnerOverlay={isSubmitting}
+                        onDismissed={() => {
+                            resetForm();
+                            setVisible(false);
+                        }}
+                    >
+                        <FlashMessageRender byKey={'location:create'} css={tw`mb-6`} />
+
+                        <h2 css={tw`mb-6 text-2xl text-neutral-100`}>New Location</h2>
+
+                        <Form css={tw`m-0`}>
+                            <Field
+                                type={'text'}
+                                id={'short'}
+                                name={'short'}
+                                label={'Short'}
+                                description={'A short name used to identify this location.'}
+                                autoFocus
+                            />
+
+                            <div css={tw`mt-6`}>
+                                <Field
+                                    type={'text'}
+                                    id={'long'}
+                                    name={'long'}
+                                    label={'Long'}
+                                    description={'A long name for this location.'}
+                                />
+                            </div>
+
+                            <div css={tw`flex flex-wrap justify-end mt-6`}>
+                                <Button
+                                    type={'button'}
+                                    isSecondary
+                                    css={tw`w-full sm:w-auto sm:mr-2`}
+                                    onClick={() => setVisible(false)}
+                                >
+                                    Cancel
+                                </Button>
+                                <Button css={tw`w-full mt-4 sm:w-auto sm:mt-0`} type={'submit'}>
+                                    Create Location
+                                </Button>
+                            </div>
+                        </Form>
+                    </Modal>
+                )}
+            </Formik>
+
+            <Button
+                type={'button'}
+                size={'large'}
+                css={tw`h-10 px-4 py-0 whitespace-nowrap`}
+                onClick={() => setVisible(true)}
+            >
+                New Location
+            </Button>
+        </>
+    );
+};

resources/scripts/components/admin/mounts/MountDeleteButton.tsx

@@ -0,0 +1,73 @@
+import type { Actions } from 'easy-peasy';
+import { useStoreActions } from 'easy-peasy';
+import { useState } from 'react';
+import tw from 'twin.macro';
+
+import deleteMount from '@/api/admin/mounts/deleteMount';
+import Button from '@/components/elements/Button';
+import ConfirmationModal from '@/components/elements/ConfirmationModal';
+import type { ApplicationStore } from '@/state';
+
+interface Props {
+    mountId: number;
+    onDeleted: () => void;
+}
+
+export default ({ mountId, onDeleted }: Props) => {
+    const [visible, setVisible] = useState(false);
+    const [loading, setLoading] = useState(false);
+
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions(
+        (actions: Actions<ApplicationStore>) => actions.flashes,
+    );
+
+    const onDelete = () => {
+        setLoading(true);
+        clearFlashes('mount');
+
+        deleteMount(mountId)
+            .then(() => {
+                setLoading(false);
+                onDeleted();
+            })
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'mount', error });
+
+                setLoading(false);
+                setVisible(false);
+            });
+    };
+
+    return (
+        <>
+            <ConfirmationModal
+                visible={visible}
+                title={'Delete mount?'}
+                buttonText={'Yes, delete mount'}
+                onConfirmed={onDelete}
+                showSpinnerOverlay={loading}
+                onModalDismissed={() => setVisible(false)}
+            >
+                Are you sure you want to delete this mount? Deleting a mount will not delete files on any nodes.
+            </ConfirmationModal>
+
+            <Button type={'button'} size={'xsmall'} color={'red'} onClick={() => setVisible(true)}>
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    css={tw`h-5 w-5`}
+                >
+                    <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                    />
+                </svg>
+            </Button>
+        </>
+    );
+};

resources/scripts/components/admin/mounts/MountEditContainer.tsx

@@ -0,0 +1,142 @@
+import type { Action, Actions } from 'easy-peasy';
+import { action, createContextStore, useStoreActions } from 'easy-peasy';
+import type { FormikHelpers } from 'formik';
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import tw from 'twin.macro';
+
+import type { Mount } from '@/api/admin/mounts/getMounts';
+import getMount from '@/api/admin/mounts/getMount';
+import updateMount from '@/api/admin/mounts/updateMount';
+import AdminContentBlock from '@/components/admin/AdminContentBlock';
+import MountDeleteButton from '@/components/admin/mounts/MountDeleteButton';
+import MountForm from '@/components/admin/mounts/MountForm';
+import Spinner from '@/components/elements/Spinner';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import type { ApplicationStore } from '@/state';
+
+interface ctx {
+    mount: Mount | undefined;
+    setMount: Action<ctx, Mount | undefined>;
+}
+
+export const Context = createContextStore<ctx>({
+    mount: undefined,
+
+    setMount: action((state, payload) => {
+        state.mount = payload;
+    }),
+});
+
+const MountEditContainer = () => {
+    const navigate = useNavigate();
+    const params = useParams<'id'>();
+
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions(
+        (actions: Actions<ApplicationStore>) => actions.flashes,
+    );
+    const [loading, setLoading] = useState(true);
+
+    const mount = Context.useStoreState(state => state.mount);
+    const setMount = Context.useStoreActions(actions => actions.setMount);
+
+    const submit = (
+        { name, description, source, target, readOnly, userMountable }: any,
+        { setSubmitting }: FormikHelpers<any>,
+    ) => {
+        if (mount === undefined) {
+            return;
+        }
+
+        clearFlashes('mount');
+
+        updateMount(mount.id, name, description, source, target, readOnly === '1', userMountable === '1')
+            .then(() =>
+                setMount({
+                    ...mount,
+                    name,
+                    description,
+                    source,
+                    target,
+                    readOnly: readOnly === '1',
+                    userMountable: userMountable === '1',
+                }),
+            )
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'mount', error });
+            })
+            .then(() => setSubmitting(false));
+    };
+
+    useEffect(() => {
+        clearFlashes('mount');
+
+        getMount(Number(params.id))
+            .then(mount => setMount(mount))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'mount', error });
+            })
+            .then(() => setLoading(false));
+    }, []);
+
+    if (loading || mount === undefined) {
+        return (
+            <AdminContentBlock>
+                <FlashMessageRender byKey={'mount'} css={tw`mb-4`} />
+
+                <div css={tw`w-full flex flex-col items-center justify-center`} style={{ height: '24rem' }}>
+                    <Spinner size={'base'} />
+                </div>
+            </AdminContentBlock>
+        );
+    }
+
+    return (
+        <AdminContentBlock title={'Mount - ' + mount.name}>
+            <div css={tw`w-full flex flex-row items-center mb-8`}>
+                <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
+                    <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{mount.name}</h2>
+                    {(mount.description || '').length < 1 ? (
+                        <p css={tw`text-base text-neutral-400`}>
+                            <span css={tw`italic`}>No description</span>
+                        </p>
+                    ) : (
+                        <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>
+                            {mount.description}
+                        </p>
+                    )}
+                </div>
+            </div>
+
+            <FlashMessageRender byKey={'mount'} css={tw`mb-4`} />
+
+            <MountForm
+                action={'Save Changes'}
+                title={'Edit Mount'}
+                initialValues={{
+                    name: mount.name,
+                    description: mount.description || '',
+                    source: mount.source,
+                    target: mount.target,
+                    readOnly: mount.readOnly ? '1' : '0',
+                    userMountable: mount.userMountable ? '1' : '0',
+                }}
+                onSubmit={submit}
+            >
+                <div css={tw`flex`}>
+                    <MountDeleteButton mountId={mount.id} onDeleted={() => navigate('/admin/mounts')} />
+                </div>
+            </MountForm>
+        </AdminContentBlock>
+    );
+};
+
+export default () => {
+    return (
+        <Context.Provider>
+            <MountEditContainer />
+        </Context.Provider>
+    );
+};

resources/scripts/components/admin/mounts/MountForm.tsx

@@ -0,0 +1,133 @@
+import type { FormikHelpers } from 'formik';
+import { Field as FormikField, Form, Formik } from 'formik';
+import tw from 'twin.macro';
+import { boolean, object, string } from 'yup';
+
+import AdminBox from '@/components/admin/AdminBox';
+import Button from '@/components/elements/Button';
+import Field from '@/components/elements/Field';
+import Label from '@/components/elements/Label';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+
+interface Values {
+    name: string;
+    description: string;
+    source: string;
+    target: string;
+    readOnly: string;
+    userMountable: string;
+}
+
+interface Props {
+    action: string;
+    title: string;
+    initialValues?: Values;
+
+    onSubmit: (values: Values, helpers: FormikHelpers<Values>) => void;
+
+    children?: React.ReactNode;
+}
+
+function MountForm({ action, title, initialValues, children, onSubmit }: Props) {
+    const submit = (values: Values, helpers: FormikHelpers<Values>) => {
+        onSubmit(values, helpers);
+    };
+
+    if (!initialValues) {
+        initialValues = {
+            name: '',
+            description: '',
+            source: '',
+            target: '',
+            readOnly: '0',
+            userMountable: '0',
+        };
+    }
+
+    return (
+        <Formik
+            onSubmit={submit}
+            initialValues={initialValues}
+            validationSchema={object().shape({
+                name: string().required().min(1),
+                description: string().max(255, ''),
+                source: string().max(255, ''),
+                target: string().max(255, ''),
+                readOnly: boolean(),
+                userMountable: boolean(),
+            })}
+        >
+            {({ isSubmitting, isValid }) => (
+                <AdminBox title={title} css={tw`relative`}>
+                    <SpinnerOverlay visible={isSubmitting} />
+
+                    <Form css={tw`mb-0`}>
+                        <div>
+                            <Field id={'name'} name={'name'} label={'Name'} type={'text'} />
+                        </div>
+
+                        <div css={tw`mt-6`}>
+                            <Field id={'description'} name={'description'} label={'Description'} type={'text'} />
+                        </div>
+
+                        <div css={tw`md:w-full md:flex md:flex-row mt-6`}>
+                            <div css={tw`md:w-full md:flex md:flex-col md:mr-4 mt-6 md:mt-0`}>
+                                <Field id={'source'} name={'source'} label={'Source'} type={'text'} />
+                            </div>
+
+                            <div css={tw`md:w-full md:flex md:flex-col md:ml-4 mt-6 md:mt-0`}>
+                                <Field id={'target'} name={'target'} label={'Target'} type={'text'} />
+                            </div>
+                        </div>
+
+                        <div css={tw`md:w-full md:flex md:flex-row mt-6`}>
+                            <div css={tw`md:w-full md:flex md:flex-col md:mr-4 mt-6 md:mt-0`}>
+                                <Label htmlFor={'readOnly'}>Permissions</Label>
+
+                                <div>
+                                    <label css={tw`inline-flex items-center mr-2`}>
+                                        <FormikField name={'readOnly'} type={'radio'} value={'0'} />
+                                        <span css={tw`ml-2`}>Writable</span>
+                                    </label>
+
+                                    <label css={tw`inline-flex items-center ml-2`}>
+                                        <FormikField name={'readOnly'} type={'radio'} value={'1'} />
+                                        <span css={tw`ml-2`}>Read Only</span>
+                                    </label>
+                                </div>
+                            </div>
+
+                            <div css={tw`md:w-full md:flex md:flex-col md:ml-4 mt-6 md:mt-0`}>
+                                <Label htmlFor={'userMountable'}>User Mountable</Label>
+
+                                <div>
+                                    <label css={tw`inline-flex items-center mr-2`}>
+                                        <FormikField name={'userMountable'} type={'radio'} value={'0'} />
+                                        <span css={tw`ml-2`}>Admin Only</span>
+                                    </label>
+
+                                    <label css={tw`inline-flex items-center ml-2`}>
+                                        <FormikField name={'userMountable'} type={'radio'} value={'1'} />
+                                        <span css={tw`ml-2`}>Users</span>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div css={tw`w-full flex flex-row items-center mt-6`}>
+                            {children}
+
+                            <div css={tw`flex ml-auto`}>
+                                <Button type={'submit'} disabled={isSubmitting || !isValid}>
+                                    {action}
+                                </Button>
+                            </div>
+                        </div>
+                    </Form>
+                </AdminBox>
+            )}
+        </Formik>
+    );
+}
+
+export default MountForm;

resources/scripts/components/admin/mounts/MountsContainer.tsx

@@ -0,0 +1,241 @@
+import type { ChangeEvent } from 'react';
+import { useContext, useEffect } from 'react';
+import { NavLink } from 'react-router-dom';
+import tw from 'twin.macro';
+
+import type { Filters } from '@/api/admin/mounts/getMounts';
+import getMounts, { Context as MountsContext } from '@/api/admin/mounts/getMounts';
+import AdminCheckbox from '@/components/admin/AdminCheckbox';
+import AdminContentBlock from '@/components/admin/AdminContentBlock';
+import AdminTable, {
+    TableBody,
+    TableHead,
+    TableHeader,
+    TableRow,
+    Pagination,
+    Loading,
+    NoItems,
+    ContentWrapper,
+    useTableHooks,
+} from '@/components/admin/AdminTable';
+import Button from '@/components/elements/Button';
+import CopyOnClick from '@/components/elements/CopyOnClick';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import useFlash from '@/plugins/useFlash';
+import { AdminContext } from '@/state/admin';
+
+const RowCheckbox = ({ id }: { id: number }) => {
+    const isChecked = AdminContext.useStoreState(state => state.mounts.selectedMounts.indexOf(id) >= 0);
+    const appendSelectedMount = AdminContext.useStoreActions(actions => actions.mounts.appendSelectedMount);
+    const removeSelectedMount = AdminContext.useStoreActions(actions => actions.mounts.removeSelectedMount);
+
+    return (
+        <AdminCheckbox
+            name={id.toString()}
+            checked={isChecked}
+            onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                if (e.currentTarget.checked) {
+                    appendSelectedMount(id);
+                } else {
+                    removeSelectedMount(id);
+                }
+            }}
+        />
+    );
+};
+
+const MountsContainer = () => {
+    const { page, setPage, setFilters, sort, setSort, sortDirection } = useContext(MountsContext);
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+    const { data: mounts, error, isValidating } = getMounts();
+
+    useEffect(() => {
+        if (!error) {
+            clearFlashes('mounts');
+            return;
+        }
+
+        clearAndAddHttpError({ key: 'mounts', error });
+    }, [error]);
+
+    const length = mounts?.items?.length || 0;
+
+    const setSelectedMounts = AdminContext.useStoreActions(actions => actions.mounts.setSelectedMounts);
+    const selectedMountsLength = AdminContext.useStoreState(state => state.mounts.selectedMounts.length);
+
+    const onSelectAllClick = (e: ChangeEvent<HTMLInputElement>) => {
+        setSelectedMounts(e.currentTarget.checked ? mounts?.items?.map(mount => mount.id) || [] : []);
+    };
+
+    const onSearch = (query: string): Promise<void> => {
+        return new Promise(resolve => {
+            if (query.length < 2) {
+                setFilters(null);
+            } else {
+                setFilters({ name: query });
+            }
+            return resolve();
+        });
+    };
+
+    useEffect(() => {
+        setSelectedMounts([]);
+    }, [page]);
+
+    return (
+        <AdminContentBlock title={'Mounts'}>
+            <div css={tw`w-full flex flex-row items-center mb-8`}>
+                <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
+                    <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Mounts</h2>
+                    <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>
+                        Configure and manage additional mount points for servers.
+                    </p>
+                </div>
+
+                <div css={tw`flex ml-auto pl-4`}>
+                    <NavLink to={`/admin/mounts/new`}>
+                        <Button type={'button'} size={'large'} css={tw`h-10 px-4 py-0 whitespace-nowrap`}>
+                            New Mount
+                        </Button>
+                    </NavLink>
+                </div>
+            </div>
+
+            <FlashMessageRender byKey={'mounts'} css={tw`mb-4`} />
+
+            <AdminTable>
+                <ContentWrapper
+                    checked={selectedMountsLength === (length === 0 ? -1 : length)}
+                    onSelectAllClick={onSelectAllClick}
+                    onSearch={onSearch}
+                >
+                    <Pagination data={mounts} onPageSelect={setPage}>
+                        <div css={tw`overflow-x-auto`}>
+                            <table css={tw`w-full table-auto`}>
+                                <TableHead>
+                                    <TableHeader
+                                        name={'ID'}
+                                        direction={sort === 'id' ? (sortDirection ? 1 : 2) : null}
+                                        onClick={() => setSort('id')}
+                                    />
+                                    <TableHeader
+                                        name={'Name'}
+                                        direction={sort === 'name' ? (sortDirection ? 1 : 2) : null}
+                                        onClick={() => setSort('name')}
+                                    />
+                                    <TableHeader
+                                        name={'Source Path'}
+                                        direction={sort === 'source' ? (sortDirection ? 1 : 2) : null}
+                                        onClick={() => setSort('source')}
+                                    />
+                                    <TableHeader
+                                        name={'Target Path'}
+                                        direction={sort === 'target' ? (sortDirection ? 1 : 2) : null}
+                                        onClick={() => setSort('target')}
+                                    />
+                                    <th css={tw`px-6 py-2`} />
+                                    <th css={tw`px-6 py-2`} />
+                                </TableHead>
+
+                                <TableBody>
+                                    {mounts !== undefined &&
+                                        !error &&
+                                        !isValidating &&
+                                        length > 0 &&
+                                        mounts.items.map(mount => (
+                                            <TableRow key={mount.id}>
+                                                <td css={tw`pl-6`}>
+                                                    <RowCheckbox id={mount.id} />
+                                                </td>
+
+                                                <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                    <CopyOnClick text={mount.id.toString()}>
+                                                        <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>
+                                                            {mount.id}
+                                                        </code>
+                                                    </CopyOnClick>
+                                                </td>
+
+                                                <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                    <NavLink
+                                                        to={`/admin/mounts/${mount.id}`}
+                                                        css={tw`text-primary-400 hover:text-primary-300`}
+                                                    >
+                                                        {mount.name}
+                                                    </NavLink>
+                                                </td>
+
+                                                <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                    <CopyOnClick text={mount.source.toString()}>
+                                                        <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>
+                                                            {mount.source}
+                                                        </code>
+                                                    </CopyOnClick>
+                                                </td>
+
+                                                <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                    <CopyOnClick text={mount.target.toString()}>
+                                                        <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>
+                                                            {mount.target}
+                                                        </code>
+                                                    </CopyOnClick>
+                                                </td>
+
+                                                <td css={tw`px-6 whitespace-nowrap`}>
+                                                    {mount.readOnly ? (
+                                                        <span
+                                                            css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-green-100 text-green-800`}
+                                                        >
+                                                            Read Only
+                                                        </span>
+                                                    ) : (
+                                                        <span
+                                                            css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-yellow-200 text-yellow-800`}
+                                                        >
+                                                            Writable
+                                                        </span>
+                                                    )}
+                                                </td>
+
+                                                <td css={tw`px-6 whitespace-nowrap`}>
+                                                    {mount.userMountable ? (
+                                                        <span
+                                                            css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-green-100 text-green-800`}
+                                                        >
+                                                            Mountable
+                                                        </span>
+                                                    ) : (
+                                                        <span
+                                                            css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-yellow-200 text-yellow-800`}
+                                                        >
+                                                            Admin Only
+                                                        </span>
+                                                    )}
+                                                </td>
+                                            </TableRow>
+                                        ))}
+                                </TableBody>
+                            </table>
+
+                            {mounts === undefined || (error && isValidating) ? (
+                                <Loading />
+                            ) : length < 1 ? (
+                                <NoItems />
+                            ) : null}
+                        </div>
+                    </Pagination>
+                </ContentWrapper>
+            </AdminTable>
+        </AdminContentBlock>
+    );
+};
+
+export default () => {
+    const hooks = useTableHooks<Filters>();
+
+    return (
+        <MountsContext.Provider value={hooks}>
+            <MountsContainer />
+        </MountsContext.Provider>
+    );
+};

resources/scripts/components/admin/mounts/NewMountContainer.tsx

@@ -0,0 +1,51 @@
+import type { Actions } from 'easy-peasy';
+import { useStoreActions } from 'easy-peasy';
+import type { FormikHelpers } from 'formik';
+import { useNavigate } from 'react-router-dom';
+import tw from 'twin.macro';
+
+import AdminContentBlock from '@/components/admin/AdminContentBlock';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import MountForm from '@/components/admin/mounts/MountForm';
+import createMount from '@/api/admin/mounts/createMount';
+import type { ApplicationStore } from '@/state';
+
+export default () => {
+    const navigate = useNavigate();
+
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions(
+        (actions: Actions<ApplicationStore>) => actions.flashes,
+    );
+
+    const submit = (
+        { name, description, source, target, readOnly, userMountable }: any,
+        { setSubmitting }: FormikHelpers<any>,
+    ) => {
+        clearFlashes('mount:create');
+
+        createMount(name, description, source, target, readOnly === '1', userMountable === '1')
+            .then(mount => navigate(`/admin/mounts/${mount.id}`))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'mount:create', error });
+            })
+            .then(() => setSubmitting(false));
+    };
+
+    return (
+        <AdminContentBlock title={'New Mount'}>
+            <div css={tw`w-full flex flex-row items-center mb-8`}>
+                <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
+                    <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>New Mount</h2>
+                    <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>
+                        Add a new mount to the panel.
+                    </p>
+                </div>
+            </div>
+
+            <FlashMessageRender byKey={'mount:create'} css={tw`mb-4`} />
+
+            <MountForm action={'Create'} title={'Create Mount'} onSubmit={submit} />
+        </AdminContentBlock>
+    );
+};

resources/scripts/components/admin/nests/ImportEggButton.tsx

@@ -0,0 +1,82 @@
+import getEggs from '@/api/admin/nests/getEggs';
+import importEgg from '@/api/admin/nests/importEgg';
+import useFlash from '@/plugins/useFlash';
+// import { Editor } from '@/components/elements/editor';
+import { useState } from 'react';
+import Button from '@/components/elements/Button';
+import Modal from '@/components/elements/Modal';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import { useParams } from 'react-router-dom';
+import tw from 'twin.macro';
+
+export default ({ className }: { className?: string }) => {
+    const [visible, setVisible] = useState(false);
+
+    const { clearFlashes } = useFlash();
+
+    const params = useParams<'nestId'>();
+    const { mutate } = getEggs(Number(params.nestId));
+
+    let fetchFileContent: (() => Promise<string>) | null = null;
+
+    const submit = async () => {
+        clearFlashes('egg:import');
+
+        if (fetchFileContent === null) {
+            return;
+        }
+
+        const egg = await importEgg(Number(params.nestId), await fetchFileContent());
+        await mutate(data => ({ ...data!, items: [...data!.items!, egg] }));
+        setVisible(false);
+    };
+
+    return (
+        <>
+            <Modal
+                visible={visible}
+                onDismissed={() => {
+                    setVisible(false);
+                }}
+            >
+                <FlashMessageRender byKey={'egg:import'} css={tw`mb-6`} />
+
+                <h2 css={tw`mb-6 text-2xl text-neutral-100`}>Import Egg</h2>
+
+                {/*<Editor*/}
+                {/*    // overrides={tw`h-64 rounded`}*/}
+                {/*    initialContent={''}*/}
+                {/*    // language={jsonLanguage}*/}
+                {/*    fetchContent={value => {*/}
+                {/*        fetchFileContent = value;*/}
+                {/*    }}*/}
+                {/*/>*/}
+
+                <div css={tw`flex flex-wrap justify-end mt-4 sm:mt-6`}>
+                    <Button
+                        type={'button'}
+                        css={tw`w-full sm:w-auto sm:mr-2`}
+                        onClick={() => setVisible(false)}
+                        isSecondary
+                    >
+                        Cancel
+                    </Button>
+                    <Button css={tw`w-full sm:w-auto mt-4 sm:mt-0`} onClick={submit}>
+                        Import Egg
+                    </Button>
+                </div>
+            </Modal>
+
+            <Button
+                type={'button'}
+                size={'large'}
+                css={tw`h-10 px-4 py-0 whitespace-nowrap`}
+                className={className}
+                onClick={() => setVisible(true)}
+                isSecondary
+            >
+                Import
+            </Button>
+        </>
+    );
+};

resources/scripts/components/admin/nests/NestDeleteButton.tsx

@@ -0,0 +1,73 @@
+import type { Actions } from 'easy-peasy';
+import { useStoreActions } from 'easy-peasy';
+import { useState } from 'react';
+import tw from 'twin.macro';
+
+import deleteNest from '@/api/admin/nests/deleteNest';
+import Button from '@/components/elements/Button';
+import ConfirmationModal from '@/components/elements/ConfirmationModal';
+import type { ApplicationStore } from '@/state';
+
+interface Props {
+    nestId: number;
+    onDeleted: () => void;
+}
+
+export default ({ nestId, onDeleted }: Props) => {
+    const [visible, setVisible] = useState(false);
+    const [loading, setLoading] = useState(false);
+
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions(
+        (actions: Actions<ApplicationStore>) => actions.flashes,
+    );
+
+    const onDelete = () => {
+        setLoading(true);
+        clearFlashes('nest');
+
+        deleteNest(nestId)
+            .then(() => {
+                setLoading(false);
+                onDeleted();
+            })
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'nest', error });
+
+                setLoading(false);
+                setVisible(false);
+            });
+    };
+
+    return (
+        <>
+            <ConfirmationModal
+                visible={visible}
+                title={'Delete nest?'}
+                buttonText={'Yes, delete nest'}
+                onConfirmed={onDelete}
+                showSpinnerOverlay={loading}
+                onModalDismissed={() => setVisible(false)}
+            >
+                Are you sure you want to delete this nest? Deleting a nest will delete all eggs assigned to it.
+            </ConfirmationModal>
+
+            <Button type={'button'} size={'xsmall'} color={'red'} onClick={() => setVisible(true)}>
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    css={tw`h-5 w-5`}
+                >
+                    <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                    />
+                </svg>
+            </Button>
+        </>
+    );
+};

resources/scripts/components/admin/nests/NestEditContainer.tsx

@@ -0,0 +1,250 @@
+import type { Action, Actions } from 'easy-peasy';
+import { action, createContextStore, useStoreActions } from 'easy-peasy';
+import type { FormikHelpers } from 'formik';
+import { Form, Formik } from 'formik';
+import { useEffect, useState } from 'react';
+import { NavLink, useNavigate, useParams } from 'react-router-dom';
+import tw from 'twin.macro';
+import { object, string } from 'yup';
+
+import ImportEggButton from '@/components/admin/nests/ImportEggButton';
+import AdminContentBlock from '@/components/admin/AdminContentBlock';
+import Spinner from '@/components/elements/Spinner';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import type { Nest } from '@/api/admin/nests/getNests';
+import getNest from '@/api/admin/nests/getNest';
+import updateNest from '@/api/admin/nests/updateNest';
+import Button from '@/components/elements/Button';
+import Field from '@/components/elements/Field';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+import AdminBox from '@/components/admin/AdminBox';
+import CopyOnClick from '@/components/elements/CopyOnClick';
+import Input from '@/components/elements/Input';
+import Label from '@/components/elements/Label';
+import NestDeleteButton from '@/components/admin/nests/NestDeleteButton';
+import NestEggTable from '@/components/admin/nests/NestEggTable';
+import type { ApplicationStore } from '@/state';
+
+interface ctx {
+    nest: Nest | undefined;
+    setNest: Action<ctx, Nest | undefined>;
+
+    selectedEggs: number[];
+
+    setSelectedEggs: Action<ctx, number[]>;
+    appendSelectedEggs: Action<ctx, number>;
+    removeSelectedEggs: Action<ctx, number>;
+}
+
+export const Context = createContextStore<ctx>({
+    nest: undefined,
+
+    setNest: action((state, payload) => {
+        state.nest = payload;
+    }),
+
+    selectedEggs: [],
+
+    setSelectedEggs: action((state, payload) => {
+        state.selectedEggs = payload;
+    }),
+
+    appendSelectedEggs: action((state, payload) => {
+        state.selectedEggs = state.selectedEggs.filter(id => id !== payload).concat(payload);
+    }),
+
+    removeSelectedEggs: action((state, payload) => {
+        state.selectedEggs = state.selectedEggs.filter(id => id !== payload);
+    }),
+});
+
+interface Values {
+    name: string;
+    description: string;
+}
+
+const EditInformationContainer = () => {
+    const navigate = useNavigate();
+
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions(
+        (actions: Actions<ApplicationStore>) => actions.flashes,
+    );
+
+    const nest = Context.useStoreState(state => state.nest);
+    const setNest = Context.useStoreActions(actions => actions.setNest);
+
+    if (nest === undefined) {
+        return <></>;
+    }
+
+    const submit = ({ name, description }: Values, { setSubmitting }: FormikHelpers<Values>) => {
+        clearFlashes('nest');
+
+        updateNest(nest.id, name, description)
+            .then(() => setNest({ ...nest, name, description }))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'nest', error });
+            })
+            .then(() => setSubmitting(false));
+    };
+
+    return (
+        <Formik
+            onSubmit={submit}
+            initialValues={{
+                name: nest.name,
+                description: nest.description || '',
+            }}
+            validationSchema={object().shape({
+                name: string().required().min(1),
+                description: string().max(255, ''),
+            })}
+        >
+            {({ isSubmitting, isValid }) => (
+                <>
+                    <AdminBox title={'Edit Nest'} css={tw`flex-1 self-start w-full relative mb-8 lg:mb-0 mr-0 lg:mr-4`}>
+                        <SpinnerOverlay visible={isSubmitting} />
+
+                        <Form>
+                            <Field id={'name'} name={'name'} label={'Name'} type={'text'} css={tw`mb-6`} />
+
+                            <Field id={'description'} name={'description'} label={'Description'} type={'text'} />
+
+                            <div css={tw`w-full flex flex-row items-center mt-6`}>
+                                <div css={tw`flex`}>
+                                    <NestDeleteButton nestId={nest.id} onDeleted={() => navigate('/admin/nests')} />
+                                </div>
+
+                                <div css={tw`flex ml-auto`}>
+                                    <Button type={'submit'} disabled={isSubmitting || !isValid}>
+                                        Save Changes
+                                    </Button>
+                                </div>
+                            </div>
+                        </Form>
+                    </AdminBox>
+                </>
+            )}
+        </Formik>
+    );
+};
+
+const ViewDetailsContainer = () => {
+    const nest = Context.useStoreState(state => state.nest);
+
+    if (nest === undefined) {
+        return <></>;
+    }
+
+    return (
+        <AdminBox title={'Nest Details'} css={tw`flex-1 w-full relative ml-0 lg:ml-4`}>
+            <div>
+                <div>
+                    <div>
+                        <Label>ID</Label>
+                        <CopyOnClick text={nest.id.toString()}>
+                            <Input type={'text'} value={nest.id} readOnly />
+                        </CopyOnClick>
+                    </div>
+
+                    <div css={tw`mt-6`}>
+                        <Label>UUID</Label>
+                        <CopyOnClick text={nest.uuid}>
+                            <Input type={'text'} value={nest.uuid} readOnly />
+                        </CopyOnClick>
+                    </div>
+
+                    <div css={tw`mt-6 mb-2`}>
+                        <Label>Author</Label>
+                        <CopyOnClick text={nest.author}>
+                            <Input type={'text'} value={nest.author} readOnly />
+                        </CopyOnClick>
+                    </div>
+                </div>
+            </div>
+        </AdminBox>
+    );
+};
+
+const NestEditContainer = () => {
+    const params = useParams<'nestId'>();
+
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions(
+        (actions: Actions<ApplicationStore>) => actions.flashes,
+    );
+    const [loading, setLoading] = useState(true);
+
+    const nest = Context.useStoreState(state => state.nest);
+    const setNest = Context.useStoreActions(actions => actions.setNest);
+
+    useEffect(() => {
+        clearFlashes('nest');
+
+        getNest(Number(params.nestId), ['eggs'])
+            .then(nest => setNest(nest))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'nest', error });
+            })
+            .then(() => setLoading(false));
+    }, []);
+
+    if (loading || nest === undefined) {
+        return (
+            <AdminContentBlock>
+                <FlashMessageRender byKey={'nest'} css={tw`mb-4`} />
+
+                <div css={tw`w-full flex flex-col items-center justify-center`} style={{ height: '24rem' }}>
+                    <Spinner size={'base'} />
+                </div>
+            </AdminContentBlock>
+        );
+    }
+
+    return (
+        <AdminContentBlock title={'Nests - ' + nest.name}>
+            <div css={tw`w-full flex flex-row items-center mb-8`}>
+                <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
+                    <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{nest.name}</h2>
+                    {(nest.description || '').length < 1 ? (
+                        <p css={tw`text-base text-neutral-400`}>
+                            <span css={tw`italic`}>No description</span>
+                        </p>
+                    ) : (
+                        <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>
+                            {nest.description}
+                        </p>
+                    )}
+                </div>
+
+                <div css={tw`flex flex-row ml-auto pl-4`}>
+                    <ImportEggButton css={tw`mr-4`} />
+
+                    <NavLink to={`/admin/nests/${params.nestId}/new`}>
+                        <Button type={'button'} size={'large'} css={tw`h-10 px-4 py-0 whitespace-nowrap`}>
+                            New Egg
+                        </Button>
+                    </NavLink>
+                </div>
+            </div>
+
+            <FlashMessageRender byKey={'nest'} css={tw`mb-4`} />
+
+            <div css={tw`flex flex-col lg:flex-row mb-8`}>
+                <EditInformationContainer />
+                <ViewDetailsContainer />
+            </div>
+
+            <NestEggTable />
+        </AdminContentBlock>
+    );
+};
+
+export default () => {
+    return (
+        <Context.Provider>
+            <NestEditContainer />
+        </Context.Provider>
+    );
+};

resources/scripts/components/admin/nests/NestEggTable.tsx

@@ -0,0 +1,160 @@
+import type { ChangeEvent } from 'react';
+import { useContext, useEffect } from 'react';
+import { NavLink, useParams } from 'react-router-dom';
+import tw from 'twin.macro';
+
+import type { Filters } from '@/api/admin/nests/getEggs';
+import getEggs, { Context as EggsContext } from '@/api/admin/nests/getEggs';
+import AdminCheckbox from '@/components/admin/AdminCheckbox';
+import AdminTable, {
+    TableBody,
+    TableHead,
+    TableHeader,
+    TableRow,
+    Pagination,
+    Loading,
+    NoItems,
+    ContentWrapper,
+    useTableHooks,
+} from '@/components/admin/AdminTable';
+import { Context } from '@/components/admin/nests/NestEditContainer';
+import CopyOnClick from '@/components/elements/CopyOnClick';
+import useFlash from '@/plugins/useFlash';
+
+const RowCheckbox = ({ id }: { id: number }) => {
+    const isChecked = Context.useStoreState(state => state.selectedEggs.indexOf(id) >= 0);
+    const appendSelectedEggs = Context.useStoreActions(actions => actions.appendSelectedEggs);
+    const removeSelectedEggs = Context.useStoreActions(actions => actions.removeSelectedEggs);
+
+    return (
+        <AdminCheckbox
+            name={id.toString()}
+            checked={isChecked}
+            onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                if (e.currentTarget.checked) {
+                    appendSelectedEggs(id);
+                } else {
+                    removeSelectedEggs(id);
+                }
+            }}
+        />
+    );
+};
+
+const EggsTable = () => {
+    const params = useParams<'nestId' | 'id'>();
+
+    const { page, setPage, setFilters, sort, setSort, sortDirection } = useContext(EggsContext);
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+    const { data: eggs, error, isValidating } = getEggs(Number(params.nestId));
+
+    useEffect(() => {
+        if (!error) {
+            clearFlashes('nests');
+            return;
+        }
+
+        clearAndAddHttpError({ key: 'nests', error });
+    }, [error]);
+
+    const length = eggs?.items?.length || 0;
+
+    const setSelectedEggs = Context.useStoreActions(actions => actions.setSelectedEggs);
+    const selectedEggsLength = Context.useStoreState(state => state.selectedEggs.length);
+
+    const onSelectAllClick = (e: ChangeEvent<HTMLInputElement>) => {
+        setSelectedEggs(e.currentTarget.checked ? eggs?.items?.map(nest => nest.id) || [] : []);
+    };
+
+    const onSearch = (query: string): Promise<void> => {
+        return new Promise(resolve => {
+            if (query.length < 2) {
+                setFilters(null);
+            } else {
+                setFilters({ name: query });
+            }
+            return resolve();
+        });
+    };
+
+    useEffect(() => {
+        setSelectedEggs([]);
+    }, [page]);
+
+    return (
+        <AdminTable>
+            <ContentWrapper
+                checked={selectedEggsLength === (length === 0 ? -1 : length)}
+                onSelectAllClick={onSelectAllClick}
+                onSearch={onSearch}
+            >
+                <Pagination data={eggs} onPageSelect={setPage}>
+                    <div css={tw`overflow-x-auto`}>
+                        <table css={tw`w-full table-auto`}>
+                            <TableHead>
+                                <TableHeader
+                                    name={'ID'}
+                                    direction={sort === 'id' ? (sortDirection ? 1 : 2) : null}
+                                    onClick={() => setSort('id')}
+                                />
+                                <TableHeader
+                                    name={'Name'}
+                                    direction={sort === 'name' ? (sortDirection ? 1 : 2) : null}
+                                    onClick={() => setSort('name')}
+                                />
+                                <TableHeader name={'Description'} />
+                            </TableHead>
+
+                            <TableBody>
+                                {eggs !== undefined &&
+                                    !error &&
+                                    !isValidating &&
+                                    length > 0 &&
+                                    eggs.items.map(egg => (
+                                        <TableRow key={egg.id}>
+                                            <td css={tw`pl-6`}>
+                                                <RowCheckbox id={egg.id} />
+                                            </td>
+
+                                            <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                <CopyOnClick text={egg.id.toString()}>
+                                                    <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>
+                                                        {egg.id}
+                                                    </code>
+                                                </CopyOnClick>
+                                            </td>
+
+                                            <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                <NavLink
+                                                    to={`/admin/nests/${params.nestId}/eggs/${egg.id}`}
+                                                    css={tw`text-primary-400 hover:text-primary-300`}
+                                                >
+                                                    {egg.name}
+                                                </NavLink>
+                                            </td>
+
+                                            <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                {egg.description}
+                                            </td>
+                                        </TableRow>
+                                    ))}
+                            </TableBody>
+                        </table>
+
+                        {eggs === undefined || (error && isValidating) ? <Loading /> : length < 1 ? <NoItems /> : null}
+                    </div>
+                </Pagination>
+            </ContentWrapper>
+        </AdminTable>
+    );
+};
+
+export default () => {
+    const hooks = useTableHooks<Filters>();
+
+    return (
+        <EggsContext.Provider value={hooks}>
+            <EggsTable />
+        </EggsContext.Provider>
+    );
+};

resources/scripts/components/admin/nests/NestsContainer.tsx

@@ -0,0 +1,182 @@
+import type { ChangeEvent } from 'react';
+import { useContext, useEffect } from 'react';
+import { NavLink } from 'react-router-dom';
+import tw from 'twin.macro';
+
+import type { Filters } from '@/api/admin/nests/getNests';
+import getNests, { Context as NestsContext } from '@/api/admin/nests/getNests';
+import AdminContentBlock from '@/components/admin/AdminContentBlock';
+import AdminCheckbox from '@/components/admin/AdminCheckbox';
+import AdminTable, {
+    TableBody,
+    TableHead,
+    TableHeader,
+    TableRow,
+    Pagination,
+    Loading,
+    NoItems,
+    ContentWrapper,
+    useTableHooks,
+} from '@/components/admin/AdminTable';
+import CopyOnClick from '@/components/elements/CopyOnClick';
+import NewNestButton from '@/components/admin/nests/NewNestButton';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import useFlash from '@/plugins/useFlash';
+import { AdminContext } from '@/state/admin';
+
+const RowCheckbox = ({ id }: { id: number }) => {
+    const isChecked = AdminContext.useStoreState(state => state.nests.selectedNests.indexOf(id) >= 0);
+    const appendSelectedNest = AdminContext.useStoreActions(actions => actions.nests.appendSelectedNest);
+    const removeSelectedNest = AdminContext.useStoreActions(actions => actions.nests.removeSelectedNest);
+
+    return (
+        <AdminCheckbox
+            name={id.toString()}
+            checked={isChecked}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                if (e.currentTarget.checked) {
+                    appendSelectedNest(id);
+                } else {
+                    removeSelectedNest(id);
+                }
+            }}
+        />
+    );
+};
+
+const NestsContainer = () => {
+    const { page, setPage, setFilters, sort, setSort, sortDirection } = useContext(NestsContext);
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+    const { data: nests, error, isValidating } = getNests();
+
+    useEffect(() => {
+        if (!error) {
+            clearFlashes('nests');
+            return;
+        }
+
+        clearAndAddHttpError({ key: 'nests', error });
+    }, [error]);
+
+    const length = nests?.items?.length || 0;
+
+    const setSelectedNests = AdminContext.useStoreActions(actions => actions.nests.setSelectedNests);
+    const selectedNestsLength = AdminContext.useStoreState(state => state.nests.selectedNests.length);
+
+    const onSelectAllClick = (e: ChangeEvent<HTMLInputElement>) => {
+        setSelectedNests(e.currentTarget.checked ? nests?.items?.map(nest => nest.id) || [] : []);
+    };
+
+    const onSearch = (query: string): Promise<void> => {
+        return new Promise(resolve => {
+            if (query.length < 2) {
+                setFilters(null);
+            } else {
+                setFilters({ name: query });
+            }
+            return resolve();
+        });
+    };
+
+    useEffect(() => {
+        setSelectedNests([]);
+    }, [page]);
+
+    return (
+        <AdminContentBlock title={'Nests'}>
+            <div css={tw`w-full flex flex-row items-center mb-8`}>
+                <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
+                    <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Nests</h2>
+                    <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>
+                        All nests currently available on this system.
+                    </p>
+                </div>
+
+                <div css={tw`flex ml-auto pl-4`}>
+                    <NewNestButton />
+                </div>
+            </div>
+
+            <FlashMessageRender byKey={'nests'} css={tw`mb-4`} />
+
+            <AdminTable>
+                <ContentWrapper
+                    checked={selectedNestsLength === (length === 0 ? -1 : length)}
+                    onSelectAllClick={onSelectAllClick}
+                    onSearch={onSearch}
+                >
+                    <Pagination data={nests} onPageSelect={setPage}>
+                        <div css={tw`overflow-x-auto`}>
+                            <table css={tw`w-full table-auto`}>
+                                <TableHead>
+                                    <TableHeader
+                                        name={'ID'}
+                                        direction={sort === 'id' ? (sortDirection ? 1 : 2) : null}
+                                        onClick={() => setSort('id')}
+                                    />
+                                    <TableHeader
+                                        name={'Name'}
+                                        direction={sort === 'name' ? (sortDirection ? 1 : 2) : null}
+                                        onClick={() => setSort('name')}
+                                    />
+                                    <TableHeader name={'Description'} />
+                                </TableHead>
+
+                                <TableBody>
+                                    {nests !== undefined &&
+                                        !error &&
+                                        !isValidating &&
+                                        length > 0 &&
+                                        nests.items.map(nest => (
+                                            <TableRow key={nest.id}>
+                                                <td css={tw`pl-6`}>
+                                                    <RowCheckbox id={nest.id} />
+                                                </td>
+
+                                                <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                    <CopyOnClick text={nest.id.toString()}>
+                                                        <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>
+                                                            {nest.id}
+                                                        </code>
+                                                    </CopyOnClick>
+                                                </td>
+
+                                                <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                    <NavLink
+                                                        to={`/admin/nests/${nest.id}`}
+                                                        css={tw`text-primary-400 hover:text-primary-300`}
+                                                    >
+                                                        {nest.name}
+                                                    </NavLink>
+                                                </td>
+
+                                                <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                    {nest.description}
+                                                </td>
+                                            </TableRow>
+                                        ))}
+                                </TableBody>
+                            </table>
+
+                            {nests === undefined || (error && isValidating) ? (
+                                <Loading />
+                            ) : length < 1 ? (
+                                <NoItems />
+                            ) : null}
+                        </div>
+                    </Pagination>
+                </ContentWrapper>
+            </AdminTable>
+        </AdminContentBlock>
+    );
+};
+
+export default () => {
+    const hooks = useTableHooks<Filters>();
+
+    return (
+        <NestsContext.Provider value={hooks}>
+            <NestsContainer />
+        </NestsContext.Provider>
+    );
+};

resources/scripts/components/admin/nests/NewEggContainer.tsx

@@ -0,0 +1,115 @@
+import type { FormikHelpers } from 'formik';
+import { Form, Formik } from 'formik';
+import { useRef } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import tw from 'twin.macro';
+import { object } from 'yup';
+
+import createEgg from '@/api/admin/eggs/createEgg';
+import AdminContentBlock from '@/components/admin/AdminContentBlock';
+import {
+    EggImageContainer,
+    EggInformationContainer,
+    EggLifecycleContainer,
+    EggProcessContainer,
+    EggProcessContainerRef,
+    EggStartupContainer,
+} from '@/components/admin/nests/eggs/EggSettingsContainer';
+import Button from '@/components/elements/Button';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import useFlash from '@/plugins/useFlash';
+
+interface Values {
+    name: string;
+    description: string;
+    startup: string;
+    dockerImages: string;
+    configStop: string;
+    configStartup: string;
+    configFiles: string;
+}
+
+export default () => {
+    const navigate = useNavigate();
+    const params = useParams<{ nestId: string }>();
+
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+
+    const ref = useRef<EggProcessContainerRef>();
+
+    const submit = async (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
+        clearFlashes('egg:create');
+
+        const nestId = Number(params.nestId);
+
+        values.configStartup = (await ref.current?.getStartupConfiguration()) || '';
+        values.configFiles = (await ref.current?.getFilesConfiguration()) || '';
+
+        createEgg({ ...values, dockerImages: values.dockerImages.split('\n'), nestId })
+            .then(egg => navigate(`/admin/nests/${nestId}/eggs/${egg.id}`))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'egg:create', error });
+            })
+            .then(() => setSubmitting(false));
+    };
+
+    return (
+        <AdminContentBlock title={'New Egg'}>
+            <div css={tw`w-full flex flex-row items-center mb-8`}>
+                <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
+                    <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>New Egg</h2>
+                    <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>
+                        Add a new egg to the panel.
+                    </p>
+                </div>
+            </div>
+
+            <FlashMessageRender key={'egg:create'} css={tw`mb-4`} />
+
+            <Formik
+                onSubmit={submit}
+                initialValues={{
+                    name: '',
+                    description: '',
+                    startup: '',
+                    dockerImages: '',
+                    configStop: '',
+                    configStartup: '{}',
+                    configFiles: '{}',
+                }}
+                validationSchema={object().shape({})}
+            >
+                {({ isSubmitting, isValid }) => (
+                    <Form>
+                        <div css={tw`grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6 mb-6`}>
+                            <EggInformationContainer />
+                        </div>
+
+                        <EggStartupContainer css={tw`mb-6`} />
+
+                        <div css={tw`grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6 mb-6`}>
+                            <EggImageContainer />
+                            <EggLifecycleContainer />
+                        </div>
+
+                        <EggProcessContainer ref={ref} css={tw`mb-6`} />
+
+                        <div css={tw`bg-neutral-700 rounded shadow-md py-2 px-6 mb-16`}>
+                            <div css={tw`flex flex-row`}>
+                                <Button
+                                    type="submit"
+                                    size="small"
+                                    css={tw`ml-auto`}
+                                    disabled={isSubmitting || !isValid}
+                                >
+                                    Create
+                                </Button>
+                            </div>
+                        </div>
+                    </Form>
+                )}
+            </Formik>
+        </AdminContentBlock>
+    );
+};

resources/scripts/components/admin/nests/NewNestButton.tsx

@@ -0,0 +1,112 @@
+import React, { useState } from 'react';
+import createNest from '@/api/admin/nests/createNest';
+import getNests from '@/api/admin/nests/getNests';
+import Button from '@/components/elements/Button';
+import Field from '@/components/elements/Field';
+import Modal from '@/components/elements/Modal';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import useFlash from '@/plugins/useFlash';
+import { Form, Formik, FormikHelpers } from 'formik';
+import { object, string } from 'yup';
+import tw from 'twin.macro';
+
+interface Values {
+    name: string,
+    description: string,
+}
+
+const schema = object().shape({
+    name: string()
+        .required('A nest name must be provided.')
+        .max(32, 'Nest name must not exceed 32 characters.'),
+    description: string()
+        .max(255, 'Nest description must not exceed 255 characters.'),
+});
+
+export default () => {
+    const [ visible, setVisible ] = useState(false);
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+    const { mutate } = getNests();
+
+    const submit = ({ name, description }: Values, { setSubmitting }: FormikHelpers<Values>) => {
+        clearFlashes('nest:create');
+        setSubmitting(true);
+
+        createNest(name, description)
+            .then(async (nest) => {
+                await mutate(data => ({ ...data!, items: data!.items.concat(nest) }), false);
+                setVisible(false);
+            })
+            .catch(error => {
+                clearAndAddHttpError({ key: 'nest:create', error });
+                setSubmitting(false);
+            });
+    };
+
+    return (
+        <>
+            <Formik
+                onSubmit={submit}
+                initialValues={{ name: '', description: '' }}
+                validationSchema={schema}
+            >
+                {
+                    ({ isSubmitting, resetForm }) => (
+                        <Modal
+                            visible={visible}
+                            dismissable={!isSubmitting}
+                            showSpinnerOverlay={isSubmitting}
+                            onDismissed={() => {
+                                resetForm();
+                                setVisible(false);
+                            }}
+                        >
+                            <FlashMessageRender byKey={'nest:create'} css={tw`mb-6`}/>
+
+                            <h2 css={tw`mb-6 text-2xl text-neutral-100`}>New Nest</h2>
+
+                            <Form css={tw`m-0`}>
+                                <Field
+                                    type={'text'}
+                                    id={'name'}
+                                    name={'name'}
+                                    label={'Name'}
+                                    description={'A short name used to identify this nest.'}
+                                    autoFocus
+                                />
+
+                                <div css={tw`mt-6`}>
+                                    <Field
+                                        type={'text'}
+                                        id={'description'}
+                                        name={'description'}
+                                        label={'Description'}
+                                        description={'A description for this nest.'}
+                                    />
+                                </div>
+
+                                <div css={tw`flex flex-wrap justify-end mt-6`}>
+                                    <Button
+                                        type={'button'}
+                                        isSecondary
+                                        css={tw`w-full sm:w-auto sm:mr-2`}
+                                        onClick={() => setVisible(false)}
+                                    >
+                                        Cancel
+                                    </Button>
+                                    <Button css={tw`w-full mt-4 sm:w-auto sm:mt-0`} type={'submit'}>
+                                        Create Nest
+                                    </Button>
+                                </div>
+                            </Form>
+                        </Modal>
+                    )
+                }
+            </Formik>
+
+            <Button type={'button'} size={'large'} css={tw`h-10 px-4 py-0 whitespace-nowrap`} onClick={() => setVisible(true)}>
+                New Nest
+            </Button>
+        </>
+    );
+};

resources/scripts/components/admin/nests/eggs/EggDeleteButton.tsx

@@ -0,0 +1,73 @@
+import type { Actions } from 'easy-peasy';
+import { useStoreActions } from 'easy-peasy';
+import { useState } from 'react';
+import tw from 'twin.macro';
+
+import deleteEgg from '@/api/admin/eggs/deleteEgg';
+import Button from '@/components/elements/Button';
+import ConfirmationModal from '@/components/elements/ConfirmationModal';
+import type { ApplicationStore } from '@/state';
+
+interface Props {
+    eggId: number;
+    onDeleted: () => void;
+}
+
+export default ({ eggId, onDeleted }: Props) => {
+    const [visible, setVisible] = useState(false);
+    const [loading, setLoading] = useState(false);
+
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions(
+        (actions: Actions<ApplicationStore>) => actions.flashes,
+    );
+
+    const onDelete = () => {
+        setLoading(true);
+        clearFlashes('egg');
+
+        deleteEgg(eggId)
+            .then(() => {
+                setLoading(false);
+                onDeleted();
+            })
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'egg', error });
+
+                setLoading(false);
+                setVisible(false);
+            });
+    };
+
+    return (
+        <>
+            <ConfirmationModal
+                visible={visible}
+                title={'Delete egg?'}
+                buttonText={'Yes, delete egg'}
+                onConfirmed={onDelete}
+                showSpinnerOverlay={loading}
+                onModalDismissed={() => setVisible(false)}
+            >
+                Are you sure you want to delete this egg? You may only delete an egg with no servers using it.
+            </ConfirmationModal>
+
+            <Button type={'button'} size={'xsmall'} color={'red'} onClick={() => setVisible(true)}>
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    css={tw`h-5 w-5`}
+                >
+                    <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                    />
+                </svg>
+            </Button>
+        </>
+    );
+};

resources/scripts/components/admin/nests/eggs/EggExportButton.tsx

@@ -0,0 +1,85 @@
+import { exportEgg } from '@/api/admin/egg';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+import useFlash from '@/plugins/useFlash';
+// import { jsonLanguage } from '@codemirror/lang-json';
+// import Editor from '@/components/elements/Editor';
+import { useEffect, useState } from 'react';
+import Button from '@/components/elements/Button';
+import Modal from '@/components/elements/Modal';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import { useParams } from 'react-router-dom';
+import tw from 'twin.macro';
+
+export default ({ className }: { className?: string }) => {
+    const params = useParams<'id'>();
+    const { clearAndAddHttpError, clearFlashes } = useFlash();
+
+    const [visible, setVisible] = useState<boolean>(false);
+    const [loading, setLoading] = useState<boolean>(true);
+    const [_content, setContent] = useState<Record<string, any> | null>(null);
+
+    useEffect(() => {
+        if (!visible) {
+            return;
+        }
+
+        clearFlashes('egg:export');
+        setLoading(true);
+
+        exportEgg(Number(params.id))
+            .then(setContent)
+            .catch(error => clearAndAddHttpError({ key: 'egg:export', error }))
+            .then(() => setLoading(false));
+    }, [visible]);
+
+    return (
+        <>
+            <Modal
+                visible={visible}
+                onDismissed={() => {
+                    setVisible(false);
+                }}
+                css={tw`relative`}
+            >
+                <SpinnerOverlay visible={loading} />
+                <h2 css={tw`mb-6 text-2xl text-neutral-100`}>Export Egg</h2>
+                <FlashMessageRender byKey={'egg:export'} css={tw`mb-6`} />
+
+                {/*<Editor*/}
+                {/*    overrides={tw`h-[32rem] rounded`}*/}
+                {/*    initialContent={content !== null ? JSON.stringify(content, null, '\t') : ''}*/}
+                {/*    mode={jsonLanguage}*/}
+                {/*/>*/}
+
+                <div css={tw`flex flex-wrap justify-end mt-4 sm:mt-6`}>
+                    <Button
+                        type={'button'}
+                        css={tw`w-full sm:w-auto sm:mr-2`}
+                        onClick={() => setVisible(false)}
+                        isSecondary
+                    >
+                        Close
+                    </Button>
+                    <Button
+                        css={tw`w-full sm:w-auto mt-4 sm:mt-0`}
+                        // onClick={submit}
+                        // TODO: When clicked, save as a JSON file.
+                    >
+                        Save
+                    </Button>
+                </div>
+            </Modal>
+
+            <Button
+                type={'button'}
+                size={'small'}
+                css={tw`px-4 py-0 whitespace-nowrap`}
+                className={className}
+                onClick={() => setVisible(true)}
+                isSecondary
+            >
+                Export
+            </Button>
+        </>
+    );
+};

resources/scripts/components/admin/nests/eggs/EggInstallContainer.tsx

@@ -0,0 +1,110 @@
+import { useEggFromRoute } from '@/api/admin/egg';
+import updateEgg from '@/api/admin/eggs/updateEgg';
+import Field from '@/components/elements/Field';
+import useFlash from '@/plugins/useFlash';
+// import { shell } from '@codemirror/legacy-modes/mode/shell';
+import { faScroll } from '@fortawesome/free-solid-svg-icons';
+import { Form, Formik, FormikHelpers } from 'formik';
+import tw from 'twin.macro';
+import AdminBox from '@/components/admin/AdminBox';
+import Button from '@/components/elements/Button';
+// import Editor from '@/components/elements/Editor';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+
+interface Values {
+    scriptContainer: string;
+    scriptEntry: string;
+    scriptInstall: string;
+}
+
+export default function EggInstallContainer() {
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+
+    const { data: egg } = useEggFromRoute();
+
+    if (!egg) {
+        return null;
+    }
+
+    let fetchFileContent: (() => Promise<string>) | null = null;
+
+    const submit = async (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
+        if (fetchFileContent === null) {
+            return;
+        }
+
+        values.scriptInstall = await fetchFileContent();
+
+        clearFlashes('egg');
+
+        updateEgg(egg.id, values)
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'egg', error });
+            })
+            .then(() => setSubmitting(false));
+    };
+
+    return (
+        <Formik
+            onSubmit={submit}
+            initialValues={{
+                scriptContainer: egg.scriptContainer,
+                scriptEntry: egg.scriptEntry,
+                scriptInstall: '',
+            }}
+        >
+            {({ isSubmitting, isValid }) => (
+                <AdminBox icon={faScroll} title={'Install Script'} noPadding>
+                    <div css={tw`relative pb-4`}>
+                        <SpinnerOverlay visible={isSubmitting} />
+
+                        <Form>
+                            {/*<Editor*/}
+                            {/*    overrides={tw`h-96 mb-4`}*/}
+                            {/*    initialContent={egg.scriptInstall || ''}*/}
+                            {/*    mode={shell}*/}
+                            {/*    fetchContent={value => {*/}
+                            {/*        fetchFileContent = value;*/}
+                            {/*    }}*/}
+                            {/*/>*/}
+
+                            <div css={tw`mx-6 mb-4`}>
+                                <div css={tw`grid grid-cols-3 gap-x-8 gap-y-6`}>
+                                    <Field
+                                        id={'scriptContainer'}
+                                        name={'scriptContainer'}
+                                        label={'Install Container'}
+                                        type={'text'}
+                                        description={'The Docker image to use for running this installation script.'}
+                                    />
+
+                                    <Field
+                                        id={'scriptEntry'}
+                                        name={'scriptEntry'}
+                                        label={'Install Entrypoint'}
+                                        type={'text'}
+                                        description={
+                                            'The command that should be used to run this script inside of the installation container.'
+                                        }
+                                    />
+                                </div>
+                            </div>
+
+                            <div css={tw`flex flex-row border-t border-neutral-600`}>
+                                <Button
+                                    type={'submit'}
+                                    size={'small'}
+                                    css={tw`ml-auto mr-6 mt-4`}
+                                    disabled={isSubmitting || !isValid}
+                                >
+                                    Save Changes
+                                </Button>
+                            </div>
+                        </Form>
+                    </div>
+                </AdminBox>
+            )}
+        </Formik>
+    );
+}

resources/scripts/components/admin/nests/eggs/EggRouter.tsx

@@ -0,0 +1,90 @@
+import { useEffect } from 'react';
+import { Route, Routes, useParams } from 'react-router-dom';
+import tw from 'twin.macro';
+
+import { useEggFromRoute } from '@/api/admin/egg';
+import EggInstallContainer from '@/components/admin/nests/eggs/EggInstallContainer';
+import EggVariablesContainer from '@/components/admin/nests/eggs/EggVariablesContainer';
+import useFlash from '@/plugins/useFlash';
+import AdminContentBlock from '@/components/admin/AdminContentBlock';
+import Spinner from '@/components/elements/Spinner';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import { SubNavigation, SubNavigationLink } from '@/components/admin/SubNavigation';
+import EggSettingsContainer from '@/components/admin/nests/eggs/EggSettingsContainer';
+
+const EggRouter = () => {
+    const { id, nestId } = useParams<'nestId' | 'id'>();
+
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+    const { data: egg, error, isValidating, mutate } = useEggFromRoute();
+
+    useEffect(() => {
+        mutate();
+    }, []);
+
+    useEffect(() => {
+        if (!error) clearFlashes('egg');
+        if (error) clearAndAddHttpError({ key: 'egg', error });
+    }, [error]);
+
+    if (!egg || (error && isValidating)) {
+        return (
+            <AdminContentBlock showFlashKey={'egg'}>
+                <Spinner size={'large'} centered />
+            </AdminContentBlock>
+        );
+    }
+
+    return (
+        <AdminContentBlock title={'Egg - ' + egg.name}>
+            <div css={tw`w-full flex flex-row items-center mb-4`}>
+                <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
+                    <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{egg.name}</h2>
+                    <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>
+                        {egg.uuid}
+                    </p>
+                </div>
+            </div>
+
+            <FlashMessageRender byKey={'egg'} css={tw`mb-4`} />
+
+            <SubNavigation>
+                <SubNavigationLink to={`/admin/nests/${nestId ?? ''}/eggs/${id ?? ''}`} name={'About'}>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                        <path
+                            clipRule="evenodd"
+                            fillRule="evenodd"
+                            d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 110 2h-3a1 1 0 01-1-1v-2a1 1 0 00-1-1H9a1 1 0 00-1 1v2a1 1 0 01-1 1H4a1 1 0 110-2V4zm3 1h2v2H7V5zm2 4H7v2h2V9zm2-4h2v2h-2V5zm2 4h-2v2h2V9z"
+                        />
+                    </svg>
+                </SubNavigationLink>
+
+                <SubNavigationLink to={`/admin/nests/${nestId ?? ''}/eggs/${id ?? ''}/variables`} name={'Variables'}>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                        <path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z" />
+                    </svg>
+                </SubNavigationLink>
+
+                <SubNavigationLink to={`/admin/nests/${nestId ?? ''}/eggs/${id ?? ''}/install`} name={'Install Script'}>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                        <path
+                            clipRule="evenodd"
+                            fillRule="evenodd"
+                            d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3.293 1.293a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L7.586 10 5.293 7.707a1 1 0 010-1.414zM11 12a1 1 0 100 2h3a1 1 0 100-2h-3z"
+                        />
+                    </svg>
+                </SubNavigationLink>
+            </SubNavigation>
+
+            <Routes>
+                <Route path="" element={<EggSettingsContainer />} />
+                <Route path="variables" element={<EggVariablesContainer />} />
+                <Route path="install" element={<EggInstallContainer />} />
+            </Routes>
+        </AdminContentBlock>
+    );
+};
+
+export default () => {
+    return <EggRouter />;
+};

resources/scripts/components/admin/nests/eggs/EggSettingsContainer.tsx

@@ -0,0 +1,245 @@
+import { useEggFromRoute } from '@/api/admin/egg';
+import updateEgg from '@/api/admin/eggs/updateEgg';
+import EggDeleteButton from '@/components/admin/nests/eggs/EggDeleteButton';
+import EggExportButton from '@/components/admin/nests/eggs/EggExportButton';
+import Button from '@/components/elements/Button';
+// import Editor from '@/components/elements/Editor';
+import Field, { TextareaField } from '@/components/elements/Field';
+import Input from '@/components/elements/Input';
+import Label from '@/components/elements/Label';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+import useFlash from '@/plugins/useFlash';
+// import { jsonLanguage } from '@codemirror/lang-json';
+import { faDocker } from '@fortawesome/free-brands-svg-icons';
+import { faEgg, faFireAlt, faMicrochip, faTerminal } from '@fortawesome/free-solid-svg-icons';
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+import AdminBox from '@/components/admin/AdminBox';
+import { useNavigate } from 'react-router-dom';
+import tw from 'twin.macro';
+import { object } from 'yup';
+import { Form, Formik, FormikHelpers, useFormikContext } from 'formik';
+
+export function EggInformationContainer() {
+    const { isSubmitting } = useFormikContext();
+
+    return (
+        <AdminBox icon={faEgg} title={'Egg Information'} css={tw`relative`}>
+            <SpinnerOverlay visible={isSubmitting} />
+
+            <Field id={'name'} name={'name'} label={'Name'} type={'text'} css={tw`mb-6`} />
+
+            <Field id={'description'} name={'description'} label={'Description'} type={'text'} css={tw`mb-2`} />
+        </AdminBox>
+    );
+}
+
+function EggDetailsContainer() {
+    const { data: egg } = useEggFromRoute();
+
+    if (!egg) {
+        return null;
+    }
+
+    return (
+        <AdminBox icon={faEgg} title={'Egg Details'} css={tw`relative`}>
+            <div css={tw`mb-6`}>
+                <Label>UUID</Label>
+                <Input id={'uuid'} name={'uuid'} type={'text'} value={egg.uuid} readOnly />
+            </div>
+
+            <div css={tw`mb-2`}>
+                <Label>Author</Label>
+                <Input id={'author'} name={'author'} type={'text'} value={egg.author} readOnly />
+            </div>
+        </AdminBox>
+    );
+}
+
+export function EggStartupContainer({ className }: { className?: string }) {
+    const { isSubmitting } = useFormikContext();
+
+    return (
+        <AdminBox icon={faTerminal} title={'Startup Command'} css={tw`relative`} className={className}>
+            <SpinnerOverlay visible={isSubmitting} />
+
+            <Field id={'startup'} name={'startup'} label={'Startup Command'} type={'text'} css={tw`mb-1`} />
+        </AdminBox>
+    );
+}
+
+export function EggImageContainer() {
+    const { isSubmitting } = useFormikContext();
+
+    return (
+        <AdminBox icon={faDocker} title={'Docker'} css={tw`relative`}>
+            <SpinnerOverlay visible={isSubmitting} />
+
+            <TextareaField id={'dockerImages'} name={'dockerImages'} label={'Docker Images'} rows={5} />
+        </AdminBox>
+    );
+}
+
+export function EggLifecycleContainer() {
+    const { isSubmitting } = useFormikContext();
+
+    return (
+        <AdminBox icon={faFireAlt} title={'Lifecycle'} css={tw`relative`}>
+            <SpinnerOverlay visible={isSubmitting} />
+
+            <Field id={'configStop'} name={'configStop'} label={'Stop Command'} type={'text'} css={tw`mb-1`} />
+        </AdminBox>
+    );
+}
+
+interface EggProcessContainerProps {
+    className?: string;
+}
+
+export interface EggProcessContainerRef {
+    getStartupConfiguration: () => Promise<string | null>;
+    getFilesConfiguration: () => Promise<string | null>;
+}
+
+export const EggProcessContainer = forwardRef<any, EggProcessContainerProps>(function EggProcessContainer(
+    { className },
+    ref,
+) {
+    // const { isSubmitting, values } = useFormikContext<Values>();
+    const { isSubmitting } = useFormikContext<Values>();
+
+    let fetchStartupConfiguration: (() => Promise<string>) | null = null;
+    let fetchFilesConfiguration: (() => Promise<string>) | null = null;
+
+    useImperativeHandle<EggProcessContainerRef, EggProcessContainerRef>(ref, () => ({
+        getStartupConfiguration: async () => {
+            if (fetchStartupConfiguration === null) {
+                return new Promise<null>(resolve => resolve(null));
+            }
+            return await fetchStartupConfiguration();
+        },
+
+        getFilesConfiguration: async () => {
+            if (fetchFilesConfiguration === null) {
+                return new Promise<null>(resolve => resolve(null));
+            }
+            return await fetchFilesConfiguration();
+        },
+    }));
+
+    return (
+        <AdminBox icon={faMicrochip} title={'Process Configuration'} css={tw`relative`} className={className}>
+            <SpinnerOverlay visible={isSubmitting} />
+
+            <div css={tw`mb-5`}>
+                <Label>Startup Configuration</Label>
+                {/*<Editor*/}
+                {/*    mode={jsonLanguage}*/}
+                {/*    initialContent={values.configStartup}*/}
+                {/*    overrides={tw`h-32 rounded`}*/}
+                {/*    fetchContent={value => {*/}
+                {/*        fetchStartupConfiguration = value;*/}
+                {/*    }}*/}
+                {/*/>*/}
+            </div>
+
+            <div css={tw`mb-1`}>
+                <Label>Configuration Files</Label>
+                {/*<Editor*/}
+                {/*    mode={jsonLanguage}*/}
+                {/*    initialContent={values.configFiles}*/}
+                {/*    overrides={tw`h-48 rounded`}*/}
+                {/*    fetchContent={value => {*/}
+                {/*        fetchFilesConfiguration = value;*/}
+                {/*    }}*/}
+                {/*/>*/}
+            </div>
+        </AdminBox>
+    );
+});
+
+interface Values {
+    name: string;
+    description: string;
+    startup: string;
+    dockerImages: string;
+    configStop: string;
+    configStartup: string;
+    configFiles: string;
+}
+
+export default function EggSettingsContainer() {
+    const navigate = useNavigate();
+
+    const ref = useRef<EggProcessContainerRef>();
+
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+
+    const { data: egg } = useEggFromRoute();
+
+    if (!egg) {
+        return null;
+    }
+
+    const submit = async (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
+        clearFlashes('egg');
+
+        values.configStartup = (await ref.current?.getStartupConfiguration()) || '';
+        values.configFiles = (await ref.current?.getFilesConfiguration()) || '';
+
+        updateEgg(egg.id, {
+            ...values,
+            // TODO
+            dockerImages: {},
+        })
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'egg', error });
+            })
+            .then(() => setSubmitting(false));
+    };
+
+    return (
+        <Formik
+            onSubmit={submit}
+            initialValues={{
+                name: egg.name,
+                description: egg.description || '',
+                startup: egg.startup,
+                // TODO
+                dockerImages: egg.dockerImages.toString(),
+                configStop: egg.configStop || '',
+                configStartup: JSON.stringify(egg.configStartup, null, '\t') || '',
+                configFiles: JSON.stringify(egg.configFiles, null, '\t') || '',
+            }}
+            validationSchema={object().shape({})}
+        >
+            {({ isSubmitting, isValid }) => (
+                <Form>
+                    <div css={tw`grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6 mb-6`}>
+                        <EggInformationContainer />
+                        <EggDetailsContainer />
+                    </div>
+
+                    <EggStartupContainer css={tw`mb-6`} />
+
+                    <div css={tw`grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6 mb-6`}>
+                        <EggImageContainer />
+                        <EggLifecycleContainer />
+                    </div>
+
+                    <EggProcessContainer ref={ref} css={tw`mb-6`} />
+
+                    <div css={tw`bg-neutral-700 rounded shadow-md px-4 xl:px-5 py-4 mb-16`}>
+                        <div css={tw`flex flex-row`}>
+                            <EggDeleteButton eggId={egg.id} onDeleted={() => navigate('/admin/nests')} />
+                            <EggExportButton css={tw`ml-auto mr-4`} />
+                            <Button type="submit" size="small" disabled={isSubmitting || !isValid}>
+                                Save Changes
+                            </Button>
+                        </div>
+                    </div>
+                </Form>
+            )}
+        </Formik>
+    );
+}

resources/scripts/components/admin/nests/eggs/EggVariablesContainer.tsx

@@ -0,0 +1,218 @@
+import { TrashIcon } from '@heroicons/react/outline';
+import type { FormikHelpers } from 'formik';
+import { Form, Formik, useFormikContext } from 'formik';
+import { useState } from 'react';
+import tw from 'twin.macro';
+import { array, boolean, object, string } from 'yup';
+
+import deleteEggVariable from '@/api/admin/eggs/deleteEggVariable';
+import updateEggVariables from '@/api/admin/eggs/updateEggVariables';
+import { NoItems } from '@/components/admin/AdminTable';
+import ConfirmationModal from '@/components/elements/ConfirmationModal';
+import type { EggVariable } from '@/api/admin/egg';
+import { useEggFromRoute } from '@/api/admin/egg';
+import NewVariableButton from '@/components/admin/nests/eggs/NewVariableButton';
+import AdminBox from '@/components/admin/AdminBox';
+import Button from '@/components/elements/Button';
+import Checkbox from '@/components/elements/Checkbox';
+import Field, { FieldRow, TextareaField } from '@/components/elements/Field';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+import useFlash from '@/plugins/useFlash';
+
+export const validationSchema = object().shape({
+    name: string().required().min(1).max(191),
+    description: string(),
+    environmentVariable: string().required().min(1).max(191),
+    defaultValue: string(),
+    isUserViewable: boolean().required(),
+    isUserEditable: boolean().required(),
+    rules: string().required(),
+});
+
+export function EggVariableForm({ prefix }: { prefix: string }) {
+    return (
+        <>
+            <Field id={`${prefix}name`} name={`${prefix}name`} label={'Name'} type={'text'} css={tw`mb-6`} />
+
+            <TextareaField
+                id={`${prefix}description`}
+                name={`${prefix}description`}
+                label={'Description'}
+                rows={3}
+                css={tw`mb-4`}
+            />
+
+            <FieldRow>
+                <Field
+                    id={`${prefix}environmentVariable`}
+                    name={`${prefix}environmentVariable`}
+                    label={'Environment Variable'}
+                    type={'text'}
+                />
+
+                <Field
+                    id={`${prefix}defaultValue`}
+                    name={`${prefix}defaultValue`}
+                    label={'Default Value'}
+                    type={'text'}
+                />
+            </FieldRow>
+
+            <div css={tw`flex flex-row mb-6`}>
+                <Checkbox id={`${prefix}isUserViewable`} name={`${prefix}isUserViewable`} label={'User Viewable'} />
+
+                <Checkbox
+                    id={`${prefix}isUserEditable`}
+                    name={`${prefix}isUserEditable`}
+                    label={'User Editable'}
+                    css={tw`ml-auto`}
+                />
+            </div>
+
+            <Field
+                id={`${prefix}rules`}
+                name={`${prefix}rules`}
+                label={'Validation Rules'}
+                type={'text'}
+                css={tw`mb-2`}
+            />
+        </>
+    );
+}
+
+function EggVariableDeleteButton({ onClick }: { onClick: (success: () => void) => void }) {
+    const [visible, setVisible] = useState(false);
+    const [loading, setLoading] = useState(false);
+
+    const onDelete = () => {
+        setLoading(true);
+
+        onClick(() => {
+            //setLoading(false);
+        });
+    };
+
+    return (
+        <>
+            <ConfirmationModal
+                visible={visible}
+                title={'Delete variable?'}
+                buttonText={'Yes, delete variable'}
+                onConfirmed={onDelete}
+                showSpinnerOverlay={loading}
+                onModalDismissed={() => setVisible(false)}
+            >
+                Are you sure you want to delete this variable? Deleting this variable will delete it from every server
+                using this egg.
+            </ConfirmationModal>
+
+            <button
+                type={'button'}
+                css={tw`ml-auto text-neutral-500 hover:text-neutral-300`}
+                onClick={() => setVisible(true)}
+            >
+                <TrashIcon css={tw`h-5 w-5`} />
+            </button>
+        </>
+    );
+}
+
+function EggVariableBox({
+    onDeleteClick,
+    variable,
+    prefix,
+}: {
+    onDeleteClick: (success: () => void) => void;
+    variable: EggVariable;
+    prefix: string;
+}) {
+    const { isSubmitting } = useFormikContext();
+
+    return (
+        <AdminBox
+            css={tw`relative w-full`}
+            title={<p css={tw`text-sm uppercase`}>{variable.name}</p>}
+            button={<EggVariableDeleteButton onClick={onDeleteClick} />}
+        >
+            <SpinnerOverlay visible={isSubmitting} />
+
+            <EggVariableForm prefix={prefix} />
+        </AdminBox>
+    );
+}
+
+export default function EggVariablesContainer() {
+    const { clearAndAddHttpError } = useFlash();
+
+    const { data: egg, mutate } = useEggFromRoute();
+
+    if (!egg) {
+        return null;
+    }
+
+    const submit = (values: EggVariable[], { setSubmitting }: FormikHelpers<EggVariable[]>) => {
+        updateEggVariables(egg.id, values)
+            .then(async () => await mutate())
+            .catch(error => clearAndAddHttpError({ key: 'egg', error }))
+            .then(() => setSubmitting(false));
+    };
+
+    return (
+        <Formik
+            onSubmit={submit}
+            initialValues={egg.relationships.variables}
+            validationSchema={array().of(validationSchema)}
+        >
+            {({ isSubmitting, isValid }) => (
+                <Form>
+                    <div css={tw`flex flex-col mb-16`}>
+                        {egg.relationships.variables?.length === 0 ? (
+                            <NoItems css={tw`bg-neutral-700 rounded-md shadow-md`} />
+                        ) : (
+                            <div css={tw`grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-x-8 gap-y-6`}>
+                                {egg.relationships.variables.map((v, i) => (
+                                    <EggVariableBox
+                                        key={i}
+                                        prefix={`[${i}].`}
+                                        variable={v}
+                                        onDeleteClick={success => {
+                                            deleteEggVariable(egg.id, v.id)
+                                                .then(async () => {
+                                                    await mutate(egg => ({
+                                                        ...egg!,
+                                                        relationships: {
+                                                            ...egg!.relationships,
+                                                            variables: egg!.relationships.variables!.filter(
+                                                                v2 => v.id === v2.id,
+                                                            ),
+                                                        },
+                                                    }));
+                                                    success();
+                                                })
+                                                .catch(error => clearAndAddHttpError({ key: 'egg', error }));
+                                        }}
+                                    />
+                                ))}
+                            </div>
+                        )}
+
+                        <div css={tw`bg-neutral-700 rounded shadow-md py-2 px-4 mt-6`}>
+                            <div css={tw`flex flex-row`}>
+                                <NewVariableButton />
+
+                                <Button
+                                    type={'submit'}
+                                    size={'small'}
+                                    css={tw`ml-auto`}
+                                    disabled={isSubmitting || !isValid}
+                                >
+                                    Save Changes
+                                </Button>
+                            </div>
+                        </div>
+                    </div>
+                </Form>
+            )}
+        </Formik>
+    );
+}

resources/scripts/components/admin/nests/eggs/NewVariableButton.tsx

@@ -0,0 +1,103 @@
+import type { FormikHelpers } from 'formik';
+import { Form, Formik, useFormikContext } from 'formik';
+import { useState } from 'react';
+import tw from 'twin.macro';
+
+import type { CreateEggVariable } from '@/api/admin/eggs/createEggVariable';
+import createEggVariable from '@/api/admin/eggs/createEggVariable';
+import { useEggFromRoute } from '@/api/admin/egg';
+import { EggVariableForm, validationSchema } from '@/components/admin/nests/eggs/EggVariablesContainer';
+import Modal from '@/components/elements/Modal';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import Button from '@/components/elements/Button';
+import useFlash from '@/plugins/useFlash';
+
+export default function NewVariableButton() {
+    const { setValues } = useFormikContext();
+    const [visible, setVisible] = useState(false);
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+
+    const { data: egg, mutate } = useEggFromRoute();
+
+    if (!egg) {
+        return null;
+    }
+
+    const submit = (values: CreateEggVariable, { setSubmitting }: FormikHelpers<CreateEggVariable>) => {
+        clearFlashes('variable:create');
+
+        createEggVariable(egg.id, values)
+            .then(async variable => {
+                setValues([...egg.relationships.variables, variable]);
+                await mutate(egg => ({
+                    ...egg!,
+                    relationships: { ...egg!.relationships, variables: [...egg!.relationships.variables, variable] },
+                }));
+                setVisible(false);
+            })
+            .catch(error => {
+                clearAndAddHttpError({ key: 'variable:create', error });
+                setSubmitting(false);
+            });
+    };
+
+    return (
+        <>
+            <Formik
+                onSubmit={submit}
+                initialValues={{
+                    name: '',
+                    description: '',
+                    environmentVariable: '',
+                    defaultValue: '',
+                    isUserViewable: false,
+                    isUserEditable: false,
+                    rules: '',
+                }}
+                validationSchema={validationSchema}
+            >
+                {({ isSubmitting, isValid, resetForm }) => (
+                    <Modal
+                        visible={visible}
+                        dismissable={!isSubmitting}
+                        showSpinnerOverlay={isSubmitting}
+                        onDismissed={() => {
+                            resetForm();
+                            setVisible(false);
+                        }}
+                    >
+                        <FlashMessageRender byKey={'variable:create'} css={tw`mb-6`} />
+
+                        <h2 css={tw`mb-6 text-2xl text-neutral-100`}>New Variable</h2>
+
+                        <Form css={tw`m-0`}>
+                            <EggVariableForm prefix={''} />
+
+                            <div css={tw`flex flex-wrap justify-end mt-6`}>
+                                <Button
+                                    type={'button'}
+                                    isSecondary
+                                    css={tw`w-full sm:w-auto sm:mr-2`}
+                                    onClick={() => setVisible(false)}
+                                >
+                                    Cancel
+                                </Button>
+                                <Button
+                                    css={tw`w-full mt-4 sm:w-auto sm:mt-0`}
+                                    type={'submit'}
+                                    disabled={isSubmitting || !isValid}
+                                >
+                                    Create Variable
+                                </Button>
+                            </div>
+                        </Form>
+                    </Modal>
+                )}
+            </Formik>
+
+            <Button type={'button'} color={'green'} onClick={() => setVisible(true)}>
+                New Variable
+            </Button>
+        </>
+    );
+}

resources/scripts/components/admin/nodes/DatabaseSelect.tsx

@@ -0,0 +1,56 @@
+import { useFormikContext } from 'formik';
+import { useState } from 'react';
+
+import type { Database } from '@/api/admin/databases/getDatabases';
+import searchDatabases from '@/api/admin/databases/searchDatabases';
+import SearchableSelect, { Option } from '@/components/elements/SearchableSelect';
+
+export default ({ selected }: { selected: Database | null }) => {
+    const context = useFormikContext();
+
+    const [database, setDatabase] = useState<Database | null>(selected);
+    const [databases, setDatabases] = useState<Database[] | null>(null);
+
+    const onSearch = (query: string): Promise<void> => {
+        return new Promise((resolve, reject) => {
+            searchDatabases({ name: query })
+                .then(databases => {
+                    setDatabases(databases);
+                    return resolve();
+                })
+                .catch(reject);
+        });
+    };
+
+    const onSelect = (database: Database | null) => {
+        setDatabase(database);
+        context.setFieldValue('databaseHostId', database?.id || null);
+    };
+
+    const getSelectedText = (database: Database | null): string | undefined => {
+        return database?.name;
+    };
+
+    return (
+        <SearchableSelect
+            id={'databaseId'}
+            name={'databaseId'}
+            label={'Database Host'}
+            placeholder={'Select a database host...'}
+            items={databases}
+            selected={database}
+            setSelected={setDatabase}
+            setItems={setDatabases}
+            onSearch={onSearch}
+            onSelect={onSelect}
+            getSelectedText={getSelectedText}
+            nullable
+        >
+            {databases?.map(d => (
+                <Option key={d.id} selectId={'databaseId'} id={d.id} item={d} active={d.id === database?.id}>
+                    {d.name}
+                </Option>
+            ))}
+        </SearchableSelect>
+    );
+};

resources/scripts/components/admin/nodes/LocationSelect.tsx

@@ -0,0 +1,56 @@
+import { useFormikContext } from 'formik';
+import { useState } from 'react';
+
+import type { Location } from '@/api/admin/locations/getLocations';
+import searchLocations from '@/api/admin/locations/searchLocations';
+import SearchableSelect, { Option } from '@/components/elements/SearchableSelect';
+
+export default ({ selected }: { selected: Location | null }) => {
+    const context = useFormikContext();
+
+    const [location, setLocation] = useState<Location | null>(selected);
+    const [locations, setLocations] = useState<Location[] | null>(null);
+
+    const onSearch = (query: string): Promise<void> => {
+        return new Promise((resolve, reject) => {
+            searchLocations({ short: query })
+                .then(locations => {
+                    setLocations(locations);
+                    return resolve();
+                })
+                .catch(reject);
+        });
+    };
+
+    const onSelect = (location: Location | null) => {
+        setLocation(location);
+        context.setFieldValue('locationId', location?.id || null);
+    };
+
+    const getSelectedText = (location: Location | null): string | undefined => {
+        return location?.short;
+    };
+
+    return (
+        <SearchableSelect
+            id={'locationId'}
+            name={'locationId'}
+            label={'Location'}
+            placeholder={'Select a location...'}
+            items={locations}
+            selected={location}
+            setSelected={setLocation}
+            setItems={setLocations}
+            onSearch={onSearch}
+            onSelect={onSelect}
+            getSelectedText={getSelectedText}
+            nullable
+        >
+            {locations?.map(d => (
+                <Option key={d.id} selectId={'locationId'} id={d.id} item={d} active={d.id === location?.id}>
+                    {d.short}
+                </Option>
+            ))}
+        </SearchableSelect>
+    );
+};

resources/scripts/components/admin/nodes/NewNodeContainer.tsx

@@ -0,0 +1,127 @@
+import type { Actions } from 'easy-peasy';
+import { useStoreActions } from 'easy-peasy';
+import type { FormikHelpers } from 'formik';
+import { Form, Formik } from 'formik';
+import { useNavigate } from 'react-router-dom';
+import tw from 'twin.macro';
+import { number, object, string } from 'yup';
+
+import type { Values } from '@/api/admin/nodes/createNode';
+import createNode from '@/api/admin/nodes/createNode';
+import AdminContentBlock from '@/components/admin/AdminContentBlock';
+import NodeLimitContainer from '@/components/admin/nodes/NodeLimitContainer';
+import NodeListenContainer from '@/components/admin/nodes/NodeListenContainer';
+import NodeSettingsContainer from '@/components/admin/nodes/NodeSettingsContainer';
+import Button from '@/components/elements/Button';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import type { ApplicationStore } from '@/state';
+
+type Values2 = Omit<Omit<Values, 'behindProxy'>, 'public'> & { behindProxy: string; public: string };
+
+const initialValues: Values2 = {
+    name: '',
+    locationId: 0,
+    databaseHostId: null,
+    fqdn: '',
+    scheme: 'https',
+    behindProxy: 'false',
+    public: 'true',
+    daemonBase: '/var/lib/pterodactyl/volumes',
+
+    listenPortHTTP: 8080,
+    publicPortHTTP: 8080,
+    listenPortSFTP: 2022,
+    publicPortSFTP: 2022,
+
+    memory: 0,
+    memoryOverallocate: 0,
+    disk: 0,
+    diskOverallocate: 0,
+};
+
+export default () => {
+    const navigate = useNavigate();
+
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions(
+        (actions: Actions<ApplicationStore>) => actions.flashes,
+    );
+
+    const submit = (values2: Values2, { setSubmitting }: FormikHelpers<Values2>) => {
+        clearFlashes('node:create');
+
+        const values: Values = {
+            ...values2,
+            behindProxy: values2.behindProxy === 'true',
+            public: values2.public === 'true',
+        };
+
+        createNode(values)
+            .then(node => navigate(`/admin/nodes/${node.id}`))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'node:create', error });
+            })
+            .then(() => setSubmitting(false));
+    };
+
+    return (
+        <AdminContentBlock title={'New Node'}>
+            <div css={tw`w-full flex flex-row items-center mb-8`}>
+                <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
+                    <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>New Node</h2>
+                    <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>
+                        Add a new node to the panel.
+                    </p>
+                </div>
+            </div>
+
+            <FlashMessageRender byKey={'node:create'} />
+
+            <Formik
+                onSubmit={submit}
+                initialValues={initialValues}
+                validationSchema={object().shape({
+                    name: string().required().max(191),
+
+                    listenPortHTTP: number().required(),
+                    publicPortHTTP: number().required(),
+                    listenPortSFTP: number().required(),
+                    publicPortSFTP: number().required(),
+
+                    memory: number().required(),
+                    memoryOverallocate: number().required(),
+                    disk: number().required(),
+                    diskOverallocate: number().required(),
+                })}
+            >
+                {({ isSubmitting, isValid }) => (
+                    <Form>
+                        <div css={tw`flex flex-col lg:flex-row`}>
+                            <div css={tw`w-full lg:w-1/2 flex flex-col mr-0 lg:mr-2`}>
+                                <NodeSettingsContainer />
+                            </div>
+
+                            <div css={tw`w-full lg:w-1/2 flex flex-col ml-0 lg:ml-2 mt-4 lg:mt-0`}>
+                                <div css={tw`flex w-full`}>
+                                    <NodeListenContainer />
+                                </div>
+
+                                <div css={tw`flex w-full mt-4`}>
+                                    <NodeLimitContainer />
+                                </div>
+
+                                <div css={tw`rounded shadow-md bg-neutral-700 mt-4 py-2 pr-6`}>
+                                    <div css={tw`flex flex-row`}>
+                                        <Button type={'submit'} css={tw`ml-auto`} disabled={isSubmitting || !isValid}>
+                                            Create
+                                        </Button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </Form>
+                )}
+            </Formik>
+        </AdminContentBlock>
+    );
+};

resources/scripts/components/admin/nodes/NodeAboutContainer.tsx

@@ -0,0 +1,96 @@
+import type { Actions } from 'easy-peasy';
+import { useStoreActions } from 'easy-peasy';
+import type { ReactNode } from 'react';
+import { useEffect, useState } from 'react';
+import tw from 'twin.macro';
+
+import type { NodeInformation } from '@/api/admin/nodes/getNodeInformation';
+import getNodeInformation from '@/api/admin/nodes/getNodeInformation';
+import AdminBox from '@/components/admin/AdminBox';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+import { Context } from '@/components/admin/nodes/NodeRouter';
+import type { ApplicationStore } from '@/state';
+
+const Code = ({ className, children }: { className?: string; children: ReactNode }) => {
+    return (
+        <code css={tw`text-sm font-mono bg-neutral-900 rounded`} style={{ padding: '2px 6px' }} className={className}>
+            {children}
+        </code>
+    );
+};
+
+export default () => {
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions(
+        (actions: Actions<ApplicationStore>) => actions.flashes,
+    );
+
+    const [loading, setLoading] = useState(true);
+    const [info, setInfo] = useState<NodeInformation | null>(null);
+
+    const node = Context.useStoreState(state => state.node);
+
+    if (node === undefined) {
+        return <></>;
+    }
+
+    useEffect(() => {
+        clearFlashes('node');
+
+        getNodeInformation(node.id)
+            .then(info => setInfo(info))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'node', error });
+            })
+            .then(() => setLoading(false));
+    }, []);
+
+    if (loading) {
+        return (
+            <AdminBox title={'Node Information'} css={tw`relative`}>
+                <SpinnerOverlay visible={loading} />
+            </AdminBox>
+        );
+    }
+
+    return (
+        <AdminBox title={'Node Information'}>
+            <table>
+                <tbody>
+                    <tr>
+                        <td css={tw`py-1 pr-6`}>Wings Version</td>
+                        <td css={tw`py-1`}>
+                            <Code css={tw`ml-auto`}>{info?.version}</Code>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td css={tw`py-1 pr-6`}>Operating System</td>
+                        <td css={tw`py-1`}>
+                            <Code css={tw`ml-auto`}>{info?.system.type}</Code>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td css={tw`py-1 pr-6`}>Architecture</td>
+                        <td css={tw`py-1`}>
+                            <Code css={tw`ml-auto`}>{info?.system.arch}</Code>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td css={tw`py-1 pr-6`}>Kernel</td>
+                        <td css={tw`py-1`}>
+                            <Code css={tw`ml-auto`}>{info?.system.release}</Code>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td css={tw`py-1 pr-6`}>CPU Threads</td>
+                        <td css={tw`py-1`}>
+                            <Code css={tw`ml-auto`}>{info?.system.cpus}</Code>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+
+            {/* TODO: Description code-block with edit option */}
+        </AdminBox>
+    );
+};

resources/scripts/components/admin/nodes/NodeAllocationContainer.tsx

@@ -0,0 +1,27 @@
+import { faNetworkWired } from '@fortawesome/free-solid-svg-icons';
+import { useParams } from 'react-router-dom';
+import tw from 'twin.macro';
+
+import AdminBox from '@/components/admin/AdminBox';
+import AllocationTable from '@/components/admin/nodes/allocations/AllocationTable';
+import CreateAllocationForm from '@/components/admin/nodes/allocations/CreateAllocationForm';
+
+export default () => {
+    const params = useParams<'id'>();
+
+    return (
+        <>
+            <div css={tw`w-full grid grid-cols-12 gap-x-8`}>
+                <div css={tw`w-full flex col-span-8`}>
+                    <AllocationTable nodeId={Number(params.id)} />
+                </div>
+
+                <div css={tw`w-full flex col-span-4`}>
+                    <AdminBox icon={faNetworkWired} title={'Allocations'} css={tw`h-auto w-full`}>
+                        <CreateAllocationForm nodeId={Number(params.id)} />
+                    </AdminBox>
+                </div>
+            </div>
+        </>
+    );
+};

resources/scripts/components/admin/nodes/NodeConfigurationContainer.tsx

@@ -0,0 +1,70 @@
+import { faCode, faDragon } from '@fortawesome/free-solid-svg-icons';
+import type { Actions } from 'easy-peasy';
+import { useStoreActions } from 'easy-peasy';
+import { useEffect, useState } from 'react';
+import tw from 'twin.macro';
+
+import getNodeConfiguration from '@/api/admin/nodes/getNodeConfiguration';
+import AdminBox from '@/components/admin/AdminBox';
+import { Context } from '@/components/admin/nodes/NodeRouter';
+import CopyOnClick from '@/components/elements/CopyOnClick';
+import type { ApplicationStore } from '@/state';
+
+export default () => {
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions(
+        (actions: Actions<ApplicationStore>) => actions.flashes,
+    );
+
+    const [configuration, setConfiguration] = useState('');
+
+    const node = Context.useStoreState(state => state.node);
+
+    if (node === undefined) {
+        return <></>;
+    }
+
+    useEffect(() => {
+        clearFlashes('node');
+
+        getNodeConfiguration(node.id)
+            .then(configuration => setConfiguration(configuration))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'node', error });
+            });
+    }, []);
+
+    return (
+        <>
+            <AdminBox title={'Configuration'} icon={faCode} css={tw`mb-4`}>
+                <div css={tw`relative`}>
+                    <div css={tw`absolute top-0 right-0`}>
+                        <CopyOnClick text={configuration} showInNotification={false}>
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke="currentColor"
+                                css={tw`h-5 w-5 text-neutral-500 hover:text-neutral-400 cursor-pointer mt-1 mr-1`}
+                            >
+                                <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth={2}
+                                    d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"
+                                />
+                            </svg>
+                        </CopyOnClick>
+                    </div>
+                    <pre css={tw`text-sm rounded font-mono bg-neutral-900 shadow-md px-4 py-3 overflow-x-auto`}>
+                        {configuration}
+                    </pre>
+                </div>
+            </AdminBox>
+
+            <AdminBox title={'Auto Deploy'} icon={faDragon}>
+                Never&trade;
+            </AdminBox>
+        </>
+    );
+};

resources/scripts/components/admin/nodes/NodeDeleteButton.tsx

@@ -0,0 +1,73 @@
+import type { Actions } from 'easy-peasy';
+import { useStoreActions } from 'easy-peasy';
+import { useState } from 'react';
+import tw from 'twin.macro';
+
+import deleteNode from '@/api/admin/nodes/deleteNode';
+import Button from '@/components/elements/Button';
+import ConfirmationModal from '@/components/elements/ConfirmationModal';
+import type { ApplicationStore } from '@/state';
+
+interface Props {
+    nodeId: number;
+    onDeleted: () => void;
+}
+
+export default ({ nodeId, onDeleted }: Props) => {
+    const [visible, setVisible] = useState(false);
+    const [loading, setLoading] = useState(false);
+
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions(
+        (actions: Actions<ApplicationStore>) => actions.flashes,
+    );
+
+    const onDelete = () => {
+        setLoading(true);
+        clearFlashes('node');
+
+        deleteNode(nodeId)
+            .then(() => {
+                setLoading(false);
+                onDeleted();
+            })
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'node', error });
+
+                setLoading(false);
+                setVisible(false);
+            });
+    };
+
+    return (
+        <>
+            <ConfirmationModal
+                visible={visible}
+                title={'Delete node?'}
+                buttonText={'Yes, delete node'}
+                onConfirmed={onDelete}
+                showSpinnerOverlay={loading}
+                onModalDismissed={() => setVisible(false)}
+            >
+                Are you sure you want to delete this node?
+            </ConfirmationModal>
+
+            <Button type={'button'} size={'xsmall'} color={'red'} onClick={() => setVisible(true)}>
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    css={tw`h-5 w-5`}
+                >
+                    <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                    />
+                </svg>
+            </Button>
+        </>
+    );
+};

resources/scripts/components/admin/nodes/NodeEditContainer.tsx

@@ -0,0 +1,134 @@
+import type { Actions } from 'easy-peasy';
+import { useStoreActions } from 'easy-peasy';
+import type { FormikHelpers } from 'formik';
+import { Form, Formik } from 'formik';
+import { useNavigate } from 'react-router-dom';
+import tw from 'twin.macro';
+import { number, object, string } from 'yup';
+
+import updateNode from '@/api/admin/nodes/updateNode';
+import NodeDeleteButton from '@/components/admin/nodes/NodeDeleteButton';
+import NodeLimitContainer from '@/components/admin/nodes/NodeLimitContainer';
+import NodeListenContainer from '@/components/admin/nodes/NodeListenContainer';
+import { Context } from '@/components/admin/nodes/NodeRouter';
+import NodeSettingsContainer from '@/components/admin/nodes/NodeSettingsContainer';
+import Button from '@/components/elements/Button';
+import type { ApplicationStore } from '@/state';
+
+interface Values {
+    name: string;
+    locationId: number;
+    databaseHostId: number | null;
+    fqdn: string;
+    scheme: string;
+    behindProxy: string; // Yes, this is technically a boolean.
+    public: string; // Yes, this is technically a boolean.
+    daemonBase: string; // This value cannot be updated once a node has been created.
+
+    memory: number;
+    memoryOverallocate: number;
+    disk: number;
+    diskOverallocate: number;
+
+    listenPortHTTP: number;
+    publicPortHTTP: number;
+    listenPortSFTP: number;
+    publicPortSFTP: number;
+}
+
+export default () => {
+    const navigate = useNavigate();
+
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions(
+        (actions: Actions<ApplicationStore>) => actions.flashes,
+    );
+
+    const node = Context.useStoreState(state => state.node);
+    const setNode = Context.useStoreActions(actions => actions.setNode);
+
+    if (node === undefined) {
+        return <></>;
+    }
+
+    const submit = (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
+        clearFlashes('node');
+
+        const v = { ...values, behindProxy: values.behindProxy === 'true', public: values.public === 'true' };
+
+        updateNode(node.id, v)
+            .then(() => setNode({ ...node, ...v }))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'node', error });
+            })
+            .then(() => setSubmitting(false));
+    };
+
+    return (
+        <Formik
+            onSubmit={submit}
+            initialValues={{
+                name: node.name,
+                locationId: node.locationId,
+                databaseHostId: node.databaseHostId,
+                fqdn: node.fqdn,
+                scheme: node.scheme,
+                behindProxy: node.behindProxy ? 'true' : 'false',
+                public: node.public ? 'true' : 'false',
+                daemonBase: node.daemonBase,
+
+                listenPortHTTP: node.listenPortHTTP,
+                publicPortHTTP: node.publicPortHTTP,
+                listenPortSFTP: node.listenPortSFTP,
+                publicPortSFTP: node.publicPortSFTP,
+
+                memory: node.memory,
+                memoryOverallocate: node.memoryOverallocate,
+                disk: node.disk,
+                diskOverallocate: node.diskOverallocate,
+            }}
+            validationSchema={object().shape({
+                name: string().required().max(191),
+
+                listenPortHTTP: number().required(),
+                publicPortHTTP: number().required(),
+                listenPortSFTP: number().required(),
+                publicPortSFTP: number().required(),
+
+                memory: number().required(),
+                memoryOverallocate: number().required(),
+                disk: number().required(),
+                diskOverallocate: number().required(),
+            })}
+        >
+            {({ isSubmitting, isValid }) => (
+                <Form>
+                    <div css={tw`flex flex-col lg:flex-row`}>
+                        <div css={tw`w-full lg:w-1/2 flex flex-col mr-0 lg:mr-2`}>
+                            <NodeSettingsContainer node={node} />
+                        </div>
+
+                        <div css={tw`w-full lg:w-1/2 flex flex-col ml-0 lg:ml-2 mt-4 lg:mt-0`}>
+                            <div css={tw`flex w-full`}>
+                                <NodeListenContainer />
+                            </div>
+
+                            <div css={tw`flex w-full mt-4`}>
+                                <NodeLimitContainer />
+                            </div>
+
+                            <div css={tw`rounded shadow-md bg-neutral-700 mt-4 py-2 px-6`}>
+                                <div css={tw`flex flex-row`}>
+                                    <NodeDeleteButton nodeId={node?.id} onDeleted={() => navigate('/admin/nodes')} />
+                                    <Button type={'submit'} css={tw`ml-auto`} disabled={isSubmitting || !isValid}>
+                                        Save Changes
+                                    </Button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </Form>
+            )}
+        </Formik>
+    );
+};

resources/scripts/components/admin/nodes/NodeLimitContainer.tsx

@@ -0,0 +1,47 @@
+import { faMicrochip } from '@fortawesome/free-solid-svg-icons';
+import { useFormikContext } from 'formik';
+import tw from 'twin.macro';
+
+import AdminBox from '@/components/admin/AdminBox';
+import Field from '@/components/elements/Field';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+
+export default () => {
+    const { isSubmitting } = useFormikContext();
+
+    return (
+        <AdminBox icon={faMicrochip} title={'Limits'} css={tw`w-full relative`}>
+            <SpinnerOverlay visible={isSubmitting} />
+
+            <div css={tw`md:w-full md:flex md:flex-row mb-6`}>
+                <div css={tw`md:w-full md:flex md:flex-col md:mr-4 mb-6 md:mb-0`}>
+                    <Field id={'memory'} name={'memory'} label={'Memory'} type={'number'} />
+                </div>
+
+                <div css={tw`md:w-full md:flex md:flex-col md:ml-4 mb-6 md:mb-0`}>
+                    <Field
+                        id={'memoryOverallocate'}
+                        name={'memoryOverallocate'}
+                        label={'Memory Overallocate'}
+                        type={'number'}
+                    />
+                </div>
+            </div>
+
+            <div css={tw`md:w-full md:flex md:flex-row mb-6`}>
+                <div css={tw`md:w-full md:flex md:flex-col md:mr-4 mb-6 md:mb-0`}>
+                    <Field id={'disk'} name={'disk'} label={'Disk'} type={'number'} />
+                </div>
+
+                <div css={tw`md:w-full md:flex md:flex-col md:ml-4 mb-6 md:mb-0`}>
+                    <Field
+                        id={'diskOverallocate'}
+                        name={'diskOverallocate'}
+                        label={'Disk Overallocate'}
+                        type={'number'}
+                    />
+                </div>
+            </div>
+        </AdminBox>
+    );
+};

resources/scripts/components/admin/nodes/NodeListenContainer.tsx

@@ -0,0 +1,37 @@
+import { faNetworkWired } from '@fortawesome/free-solid-svg-icons';
+import { useFormikContext } from 'formik';
+import tw from 'twin.macro';
+
+import AdminBox from '@/components/admin/AdminBox';
+import Field from '@/components/elements/Field';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+
+export default () => {
+    const { isSubmitting } = useFormikContext();
+
+    return (
+        <AdminBox icon={faNetworkWired} title={'Listen'} css={tw`w-full relative`}>
+            <SpinnerOverlay visible={isSubmitting} />
+
+            <div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
+                <div css={tw`mb-6 md:w-full md:flex md:flex-col md:mr-4 md:mb-0`}>
+                    <Field id={'listenPortHTTP'} name={'listenPortHTTP'} label={'HTTP Listen Port'} type={'number'} />
+                </div>
+
+                <div css={tw`mb-6 md:w-full md:flex md:flex-col md:ml-4 md:mb-0`}>
+                    <Field id={'publicPortHTTP'} name={'publicPortHTTP'} label={'HTTP Public Port'} type={'number'} />
+                </div>
+            </div>
+
+            <div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
+                <div css={tw`mb-6 md:w-full md:flex md:flex-col md:mr-4 md:mb-0`}>
+                    <Field id={'listenPortSFTP'} name={'listenPortSFTP'} label={'SFTP Listen Port'} type={'number'} />
+                </div>
+
+                <div css={tw`mb-6 md:w-full md:flex md:flex-col md:ml-4 md:mb-0`}>
+                    <Field id={'publicPortSFTP'} name={'publicPortSFTP'} label={'SFTP Public Port'} type={'number'} />
+                </div>
+            </div>
+        </AdminBox>
+    );
+};

resources/scripts/components/admin/nodes/NodeRouter.tsx

@@ -0,0 +1,146 @@
+import type { Action, Actions } from 'easy-peasy';
+import { action, createContextStore, useStoreActions } from 'easy-peasy';
+import { useEffect, useState } from 'react';
+import { Route, Routes, useParams } from 'react-router-dom';
+import tw from 'twin.macro';
+
+import type { Node } from '@/api/admin/nodes/getNodes';
+import getNode from '@/api/admin/nodes/getNode';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import AdminContentBlock from '@/components/admin/AdminContentBlock';
+import NodeEditContainer from '@/components/admin/nodes/NodeEditContainer';
+import Spinner from '@/components/elements/Spinner';
+import { SubNavigation, SubNavigationLink } from '@/components/admin/SubNavigation';
+import NodeAboutContainer from '@/components/admin/nodes/NodeAboutContainer';
+import NodeConfigurationContainer from '@/components/admin/nodes/NodeConfigurationContainer';
+import NodeAllocationContainer from '@/components/admin/nodes/NodeAllocationContainer';
+import NodeServers from '@/components/admin/nodes/NodeServers';
+import type { ApplicationStore } from '@/state';
+
+interface ctx {
+    node: Node | undefined;
+    setNode: Action<ctx, Node | undefined>;
+}
+
+export const Context = createContextStore<ctx>({
+    node: undefined,
+
+    setNode: action((state, payload) => {
+        state.node = payload;
+    }),
+});
+
+const NodeRouter = () => {
+    const params = useParams<'id'>();
+
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions(
+        (actions: Actions<ApplicationStore>) => actions.flashes,
+    );
+    const [loading, setLoading] = useState(true);
+
+    const node = Context.useStoreState(state => state.node);
+    const setNode = Context.useStoreActions(actions => actions.setNode);
+
+    useEffect(() => {
+        clearFlashes('node');
+
+        getNode(Number(params.id), ['database_host', 'location'])
+            .then(node => setNode(node))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'node', error });
+            })
+            .then(() => setLoading(false));
+    }, []);
+
+    if (loading || node === undefined) {
+        return (
+            <AdminContentBlock>
+                <FlashMessageRender byKey={'node'} css={tw`mb-4`} />
+
+                <div css={tw`w-full flex flex-col items-center justify-center`} style={{ height: '24rem' }}>
+                    <Spinner size={'base'} />
+                </div>
+            </AdminContentBlock>
+        );
+    }
+
+    return (
+        <AdminContentBlock title={'Node - ' + node.name}>
+            <div css={tw`w-full flex flex-row items-center mb-4`}>
+                <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
+                    <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{node.name}</h2>
+                    <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>
+                        {node.uuid}
+                    </p>
+                </div>
+            </div>
+
+            <FlashMessageRender byKey={'node'} css={tw`mb-4`} />
+
+            <SubNavigation>
+                <SubNavigationLink to={`/admin/nodes/${node.id}`} name={'About'}>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                        <path
+                            clipRule="evenodd"
+                            fillRule="evenodd"
+                            d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 110 2h-3a1 1 0 01-1-1v-2a1 1 0 00-1-1H9a1 1 0 00-1 1v2a1 1 0 01-1 1H4a1 1 0 110-2V4zm3 1h2v2H7V5zm2 4H7v2h2V9zm2-4h2v2h-2V5zm2 4h-2v2h2V9z"
+                        />
+                    </svg>
+                </SubNavigationLink>
+
+                <SubNavigationLink to={`/admin/nodes/${node.id}/settings`} name={'Settings'}>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                        <path
+                            clipRule="evenodd"
+                            fillRule="evenodd"
+                            d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
+                        />
+                    </svg>
+                </SubNavigationLink>
+
+                <SubNavigationLink to={`/admin/nodes/${node.id}/configuration`} name={'Configuration'}>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                        <path
+                            clipRule="evenodd"
+                            fillRule="evenodd"
+                            d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z"
+                        />
+                    </svg>
+                </SubNavigationLink>
+
+                <SubNavigationLink to={`/admin/nodes/${node.id}/allocations`} name={'Allocations'}>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                        <path d="M5.5 16a3.5 3.5 0 01-.369-6.98 4 4 0 117.753-1.977A4.5 4.5 0 1113.5 16h-8z" />
+                    </svg>
+                </SubNavigationLink>
+
+                <SubNavigationLink to={`/admin/nodes/${node.id}/servers`} name={'Servers'}>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                        <path
+                            clipRule="evenodd"
+                            fillRule="evenodd"
+                            d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3.293 1.293a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L7.586 10 5.293 7.707a1 1 0 010-1.414zM11 12a1 1 0 100 2h3a1 1 0 100-2h-3z"
+                        />
+                    </svg>
+                </SubNavigationLink>
+            </SubNavigation>
+
+            <Routes>
+                <Route path="" element={<NodeAboutContainer />} />
+                <Route path="settings" element={<NodeEditContainer />} />
+                <Route path="configuration" element={<NodeConfigurationContainer />} />
+                <Route path="allocations" element={<NodeAllocationContainer />} />
+                <Route path="servers" element={<NodeServers />} />
+            </Routes>
+        </AdminContentBlock>
+    );
+};
+
+export default () => {
+    return (
+        <Context.Provider>
+            <NodeRouter />
+        </Context.Provider>
+    );
+};

resources/scripts/components/admin/nodes/NodeServers.tsx

@@ -0,0 +1,10 @@
+import { Context } from '@/components/admin/nodes/NodeRouter';
+import ServersTable from '@/components/admin/servers/ServersTable';
+
+function NodeServers() {
+    const node = Context.useStoreState(state => state.node);
+
+    return <ServersTable filters={{ node_id: node?.id?.toString() }} />;
+}
+
+export default NodeServers;

resources/scripts/components/admin/nodes/NodeSettingsContainer.tsx

@@ -0,0 +1,95 @@
+import { faDatabase } from '@fortawesome/free-solid-svg-icons';
+import { Field as FormikField, useFormikContext } from 'formik';
+import tw from 'twin.macro';
+
+import type { Node } from '@/api/admin/nodes/getNodes';
+import AdminBox from '@/components/admin/AdminBox';
+import DatabaseSelect from '@/components/admin/nodes/DatabaseSelect';
+import LocationSelect from '@/components/admin/nodes/LocationSelect';
+import Label from '@/components/elements/Label';
+import Field from '@/components/elements/Field';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+
+export default function NodeSettingsContainer({ node }: { node?: Node }) {
+    const { isSubmitting } = useFormikContext();
+
+    return (
+        <AdminBox icon={faDatabase} title={'Settings'} css={tw`w-full relative`}>
+            <SpinnerOverlay visible={isSubmitting} />
+
+            <div css={tw`mb-6`}>
+                <Field id={'name'} name={'name'} label={'Name'} type={'text'} />
+            </div>
+
+            <div css={tw`mb-6`}>
+                <LocationSelect selected={node?.relations.location || null} />
+            </div>
+
+            <div css={tw`mb-6`}>
+                <DatabaseSelect selected={node?.relations.databaseHost || null} />
+            </div>
+
+            <div css={tw`mb-6`}>
+                <Field id={'fqdn'} name={'fqdn'} label={'FQDN'} type={'text'} />
+            </div>
+
+            <div css={tw`mb-6`}>
+                <Field
+                    id={'daemonBase'}
+                    name={'daemonBase'}
+                    label={'Data Directory'}
+                    type={'text'}
+                    disabled={node !== undefined}
+                />
+            </div>
+
+            <div css={tw`mt-6`}>
+                <Label htmlFor={'scheme'}>SSL</Label>
+
+                <div>
+                    <label css={tw`inline-flex items-center mr-2`}>
+                        <FormikField name={'scheme'} type={'radio'} value={'https'} />
+                        <span css={tw`text-neutral-300 ml-2`}>Enabled</span>
+                    </label>
+
+                    <label css={tw`inline-flex items-center ml-2`}>
+                        <FormikField name={'scheme'} type={'radio'} value={'http'} />
+                        <span css={tw`text-neutral-300 ml-2`}>Disabled</span>
+                    </label>
+                </div>
+            </div>
+
+            <div css={tw`mt-6`}>
+                <Label htmlFor={'behindProxy'}>Behind Proxy</Label>
+
+                <div>
+                    <label css={tw`inline-flex items-center mr-2`}>
+                        <FormikField name={'behindProxy'} type={'radio'} value={'false'} />
+                        <span css={tw`text-neutral-300 ml-2`}>No</span>
+                    </label>
+
+                    <label css={tw`inline-flex items-center ml-2`}>
+                        <FormikField name={'behindProxy'} type={'radio'} value={'true'} />
+                        <span css={tw`text-neutral-300 ml-2`}>Yes</span>
+                    </label>
+                </div>
+            </div>
+
+            <div css={tw`mt-6`}>
+                <Label htmlFor={'public'}>Automatic Allocation</Label>
+
+                <div>
+                    <label css={tw`inline-flex items-center mr-2`}>
+                        <FormikField name={'public'} type={'radio'} value={'false'} />
+                        <span css={tw`text-neutral-300 ml-2`}>Disabled</span>
+                    </label>
+
+                    <label css={tw`inline-flex items-center ml-2`}>
+                        <FormikField name={'public'} type={'radio'} value={'true'} />
+                        <span css={tw`text-neutral-300 ml-2`}>Enabled</span>
+                    </label>
+                </div>
+            </div>
+        </AdminBox>
+    );
+}

resources/scripts/components/admin/nodes/NodesContainer.tsx

@@ -0,0 +1,271 @@
+import type { ChangeEvent } from 'react';
+import { useContext, useEffect } from 'react';
+import type { Filters } from '@/api/admin/servers/getServers';
+import getNodes, { Context as NodesContext } from '@/api/admin/nodes/getNodes';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import useFlash from '@/plugins/useFlash';
+import { AdminContext } from '@/state/admin';
+import { NavLink } from 'react-router-dom';
+import tw from 'twin.macro';
+import AdminContentBlock from '@/components/admin/AdminContentBlock';
+import AdminCheckbox from '@/components/admin/AdminCheckbox';
+import AdminTable, {
+    TableBody,
+    TableHead,
+    TableHeader,
+    TableRow,
+    Pagination,
+    Loading,
+    NoItems,
+    ContentWrapper,
+    useTableHooks,
+} from '@/components/admin/AdminTable';
+import Button from '@/components/elements/Button';
+import CopyOnClick from '@/components/elements/CopyOnClick';
+import { bytesToString, mbToBytes } from '@/lib/formatters';
+
+const RowCheckbox = ({ id }: { id: number }) => {
+    const isChecked = AdminContext.useStoreState(state => state.nodes.selectedNodes.indexOf(id) >= 0);
+    const appendSelectedNode = AdminContext.useStoreActions(actions => actions.nodes.appendSelectedNode);
+    const removeSelectedNode = AdminContext.useStoreActions(actions => actions.nodes.removeSelectedNode);
+
+    return (
+        <AdminCheckbox
+            name={id.toString()}
+            checked={isChecked}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                if (e.currentTarget.checked) {
+                    appendSelectedNode(id);
+                } else {
+                    removeSelectedNode(id);
+                }
+            }}
+        />
+    );
+};
+
+const NodesContainer = () => {
+    const { page, setPage, setFilters, sort, setSort, sortDirection } = useContext(NodesContext);
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+    const { data: nodes, error, isValidating } = getNodes(['location']);
+
+    useEffect(() => {
+        if (!error) {
+            clearFlashes('nodes');
+            return;
+        }
+
+        clearAndAddHttpError({ key: 'nodes', error });
+    }, [error]);
+
+    const length = nodes?.items?.length || 0;
+
+    const setSelectedNodes = AdminContext.useStoreActions(actions => actions.nodes.setSelectedNodes);
+    const selectedNodesLength = AdminContext.useStoreState(state => state.nodes.selectedNodes.length);
+
+    const onSelectAllClick = (e: ChangeEvent<HTMLInputElement>) => {
+        setSelectedNodes(e.currentTarget.checked ? nodes?.items?.map(node => node.id) || [] : []);
+    };
+
+    const onSearch = (query: string): Promise<void> => {
+        return new Promise(resolve => {
+            if (query.length < 2) {
+                setFilters(null);
+            } else {
+                setFilters({ name: query });
+            }
+            return resolve();
+        });
+    };
+
+    useEffect(() => {
+        setSelectedNodes([]);
+    }, [page]);
+
+    return (
+        <AdminContentBlock title={'Nodes'}>
+            <div css={tw`w-full flex flex-row items-center mb-8`}>
+                <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
+                    <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Nodes</h2>
+                    <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>
+                        All nodes available on the system.
+                    </p>
+                </div>
+
+                <div css={tw`flex ml-auto pl-4`}>
+                    <NavLink to={`/admin/nodes/new`}>
+                        <Button type={'button'} size={'large'} css={tw`h-10 px-4 py-0 whitespace-nowrap`}>
+                            New Node
+                        </Button>
+                    </NavLink>
+                </div>
+            </div>
+
+            <FlashMessageRender byKey={'nodes'} css={tw`mb-4`} />
+
+            <AdminTable>
+                <ContentWrapper
+                    checked={selectedNodesLength === (length === 0 ? -1 : length)}
+                    onSelectAllClick={onSelectAllClick}
+                    onSearch={onSearch}
+                >
+                    <Pagination data={nodes} onPageSelect={setPage}>
+                        <div css={tw`overflow-x-auto`}>
+                            <table css={tw`w-full table-auto`}>
+                                <TableHead>
+                                    <TableHeader
+                                        name={'ID'}
+                                        direction={sort === 'id' ? (sortDirection ? 1 : 2) : null}
+                                        onClick={() => setSort('id')}
+                                    />
+                                    <TableHeader
+                                        name={'Name'}
+                                        direction={sort === 'name' ? (sortDirection ? 1 : 2) : null}
+                                        onClick={() => setSort('name')}
+                                    />
+                                    <TableHeader
+                                        name={'Location'}
+                                        direction={sort === 'location_id' ? (sortDirection ? 1 : 2) : null}
+                                        onClick={() => setSort('location_id')}
+                                    />
+                                    <TableHeader
+                                        name={'FQDN'}
+                                        direction={sort === 'fqdn' ? (sortDirection ? 1 : 2) : null}
+                                        onClick={() => setSort('fqdn')}
+                                    />
+                                    <TableHeader
+                                        name={'Total Memory'}
+                                        direction={sort === 'memory' ? (sortDirection ? 1 : 2) : null}
+                                        onClick={() => setSort('memory')}
+                                    />
+                                    <TableHeader
+                                        name={'Total Disk'}
+                                        direction={sort === 'disk' ? (sortDirection ? 1 : 2) : null}
+                                        onClick={() => setSort('disk')}
+                                    />
+                                    <TableHeader />
+                                    <TableHeader />
+                                </TableHead>
+
+                                <TableBody>
+                                    {nodes !== undefined &&
+                                        !error &&
+                                        !isValidating &&
+                                        length > 0 &&
+                                        nodes.items.map(node => (
+                                            <TableRow key={node.id}>
+                                                <td css={tw`pl-6`}>
+                                                    <RowCheckbox id={node.id} />
+                                                </td>
+
+                                                <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                    <CopyOnClick text={node.id.toString()}>
+                                                        <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>
+                                                            {node.id}
+                                                        </code>
+                                                    </CopyOnClick>
+                                                </td>
+
+                                                <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                    <NavLink
+                                                        to={`/admin/nodes/${node.id}`}
+                                                        css={tw`text-primary-400 hover:text-primary-300`}
+                                                    >
+                                                        {node.name}
+                                                    </NavLink>
+                                                </td>
+
+                                                {/* TODO: Have permission check for displaying location information. */}
+                                                <td css={tw`px-6 text-sm text-left whitespace-nowrap`}>
+                                                    <NavLink
+                                                        to={`/admin/locations/${node.relations.location?.id}`}
+                                                        css={tw`text-primary-400 hover:text-primary-300`}
+                                                    >
+                                                        <div css={tw`text-sm text-neutral-200`}>
+                                                            {node.relations.location?.short}
+                                                        </div>
+
+                                                        <div css={tw`text-sm text-neutral-400`}>
+                                                            {node.relations.location?.long}
+                                                        </div>
+                                                    </NavLink>
+                                                </td>
+
+                                                <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                    <CopyOnClick text={node.fqdn}>
+                                                        <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>
+                                                            {node.fqdn}
+                                                        </code>
+                                                    </CopyOnClick>
+                                                </td>
+
+                                                <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                    {bytesToString(mbToBytes(node.memory))}
+                                                </td>
+                                                <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                    {bytesToString(mbToBytes(node.disk))}
+                                                </td>
+
+                                                <td css={tw`px-6 whitespace-nowrap`}>
+                                                    {node.scheme === 'https' ? (
+                                                        <span
+                                                            css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-green-100 text-green-800`}
+                                                        >
+                                                            Secure
+                                                        </span>
+                                                    ) : (
+                                                        <span
+                                                            css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-red-200 text-red-800`}
+                                                        >
+                                                            Non-Secure
+                                                        </span>
+                                                    )}
+                                                </td>
+
+                                                <td css={tw`px-6 whitespace-nowrap`}>
+                                                    {/* TODO: Change color based off of online/offline status */}
+                                                    <svg
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                        viewBox="0 0 20 20"
+                                                        fill="currentColor"
+                                                        css={[
+                                                            tw`h-5 w-5`,
+                                                            node.scheme === 'https'
+                                                                ? tw`text-green-200`
+                                                                : tw`text-red-300`,
+                                                        ]}
+                                                    >
+                                                        <path
+                                                            clipRule="evenodd"
+                                                            fillRule="evenodd"
+                                                            d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
+                                                        />
+                                                    </svg>
+                                                </td>
+                                            </TableRow>
+                                        ))}
+                                </TableBody>
+                            </table>
+
+                            {nodes === undefined || (error && isValidating) ? (
+                                <Loading />
+                            ) : length < 1 ? (
+                                <NoItems />
+                            ) : null}
+                        </div>
+                    </Pagination>
+                </ContentWrapper>
+            </AdminTable>
+        </AdminContentBlock>
+    );
+};
+
+export default () => {
+    const hooks = useTableHooks<Filters>();
+
+    return (
+        <NodesContext.Provider value={hooks}>
+            <NodesContainer />
+        </NodesContext.Provider>
+    );
+};

resources/scripts/components/admin/nodes/allocations/AllocationTable.tsx

@@ -0,0 +1,216 @@
+import type { ChangeEvent } from 'react';
+import { useContext, useEffect } from 'react';
+import { NavLink } from 'react-router-dom';
+import tw from 'twin.macro';
+
+import type { Filters } from '@/api/admin/nodes/allocations/getAllocations';
+import getAllocations, { Context as AllocationsContext } from '@/api/admin/nodes/allocations/getAllocations';
+import AdminCheckbox from '@/components/admin/AdminCheckbox';
+import AdminTable, {
+    ContentWrapper,
+    Loading,
+    NoItems,
+    Pagination,
+    TableBody,
+    TableHead,
+    TableHeader,
+    useTableHooks,
+} from '@/components/admin/AdminTable';
+import DeleteAllocationButton from '@/components/admin/nodes/allocations/DeleteAllocationButton';
+import CopyOnClick from '@/components/elements/CopyOnClick';
+import useFlash from '@/plugins/useFlash';
+import { AdminContext } from '@/state/admin';
+
+function RowCheckbox({ id }: { id: number }) {
+    const isChecked = AdminContext.useStoreState(state => state.allocations.selectedAllocations.indexOf(id) >= 0);
+    const appendSelectedAllocation = AdminContext.useStoreActions(
+        actions => actions.allocations.appendSelectedAllocation,
+    );
+    const removeSelectedAllocation = AdminContext.useStoreActions(
+        actions => actions.allocations.removeSelectedAllocation,
+    );
+
+    return (
+        <AdminCheckbox
+            name={id.toString()}
+            checked={isChecked}
+            onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                if (e.currentTarget.checked) {
+                    appendSelectedAllocation(id);
+                } else {
+                    removeSelectedAllocation(id);
+                }
+            }}
+        />
+    );
+}
+
+interface Props {
+    nodeId: number;
+    filters?: Filters;
+}
+
+function AllocationsTable({ nodeId, filters }: Props) {
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+
+    const { page, setPage, setFilters, sort, setSort, sortDirection } = useContext(AllocationsContext);
+    const { data: allocations, error, isValidating, mutate } = getAllocations(nodeId, ['server']);
+
+    const length = allocations?.items?.length || 0;
+
+    const setSelectedAllocations = AdminContext.useStoreActions(actions => actions.allocations.setSelectedAllocations);
+    const selectedAllocationLength = AdminContext.useStoreState(state => state.allocations.selectedAllocations.length);
+
+    const onSelectAllClick = (e: ChangeEvent<HTMLInputElement>) => {
+        setSelectedAllocations(
+            e.currentTarget.checked ? allocations?.items?.map?.(allocation => allocation.id) || [] : [],
+        );
+    };
+
+    const onSearch = (query: string): Promise<void> => {
+        return new Promise(resolve => {
+            if (query.length < 2) {
+                setFilters(filters || null);
+            } else {
+                setFilters({ ...filters, ip: query });
+            }
+            return resolve();
+        });
+    };
+
+    useEffect(() => {
+        setSelectedAllocations([]);
+    }, [page]);
+
+    useEffect(() => {
+        if (!error) {
+            clearFlashes('allocations');
+            return;
+        }
+
+        clearAndAddHttpError({ key: 'allocations', error });
+    }, [error]);
+
+    return (
+        <AdminTable>
+            <ContentWrapper
+                checked={selectedAllocationLength === (length === 0 ? -1 : length)}
+                onSelectAllClick={onSelectAllClick}
+                onSearch={onSearch}
+            >
+                <Pagination data={allocations} onPageSelect={setPage}>
+                    <div css={tw`overflow-x-auto`}>
+                        <table css={tw`w-full table-auto`}>
+                            <TableHead>
+                                <TableHeader
+                                    name={'IP Address'}
+                                    direction={sort === 'ip' ? (sortDirection ? 1 : 2) : null}
+                                    onClick={() => setSort('ip')}
+                                />
+                                <TableHeader name={'Alias'} />
+                                <TableHeader
+                                    name={'Port'}
+                                    direction={sort === 'port' ? (sortDirection ? 1 : 2) : null}
+                                    onClick={() => setSort('port')}
+                                />
+                                <TableHeader name={'Assigned To'} />
+                                <TableHeader />
+                            </TableHead>
+
+                            <TableBody>
+                                {allocations !== undefined &&
+                                    !error &&
+                                    !isValidating &&
+                                    length > 0 &&
+                                    allocations.items.map(allocation => (
+                                        <tr key={allocation.id} css={tw`h-10 hover:bg-neutral-600`}>
+                                            <td css={tw`pl-6`}>
+                                                <RowCheckbox id={allocation.id} />
+                                            </td>
+
+                                            <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                <CopyOnClick text={allocation.ip}>
+                                                    <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>
+                                                        {allocation.ip}
+                                                    </code>
+                                                </CopyOnClick>
+                                            </td>
+
+                                            {allocation.alias !== null ? (
+                                                <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                    <CopyOnClick text={allocation.alias}>
+                                                        <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>
+                                                            {allocation.alias}
+                                                        </code>
+                                                    </CopyOnClick>
+                                                </td>
+                                            ) : (
+                                                <td />
+                                            )}
+
+                                            <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                <CopyOnClick text={allocation.port}>
+                                                    <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>
+                                                        {allocation.port}
+                                                    </code>
+                                                </CopyOnClick>
+                                            </td>
+
+                                            {allocation.relations.server !== undefined ? (
+                                                <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                    <NavLink
+                                                        to={`/admin/servers/${allocation.serverId}`}
+                                                        css={tw`text-primary-400 hover:text-primary-300`}
+                                                    >
+                                                        {allocation.relations.server.name}
+                                                    </NavLink>
+                                                </td>
+                                            ) : (
+                                                <td />
+                                            )}
+
+                                            <td>
+                                                <DeleteAllocationButton
+                                                    nodeId={nodeId}
+                                                    allocationId={allocation.id}
+                                                    onDeleted={async () => {
+                                                        await mutate(allocations => ({
+                                                            pagination: allocations!.pagination,
+                                                            items: allocations!.items.filter(
+                                                                a => a.id === allocation.id,
+                                                            ),
+                                                        }));
+
+                                                        // Go back a page if no more items will exist on the current page.
+                                                        if (allocations?.items.length - (1 % 10) === 0) {
+                                                            setPage(p => p - 1);
+                                                        }
+                                                    }}
+                                                />
+                                            </td>
+                                        </tr>
+                                    ))}
+                            </TableBody>
+                        </table>
+
+                        {allocations === undefined || (error && isValidating) ? (
+                            <Loading />
+                        ) : length < 1 ? (
+                            <NoItems />
+                        ) : null}
+                    </div>
+                </Pagination>
+            </ContentWrapper>
+        </AdminTable>
+    );
+}
+
+export default (props: Props) => {
+    const hooks = useTableHooks<Filters>(props.filters);
+
+    return (
+        <AllocationsContext.Provider value={hooks}>
+            <AllocationsTable {...props} />
+        </AllocationsContext.Provider>
+    );
+};

resources/scripts/components/admin/nodes/allocations/CreateAllocationForm.tsx

@@ -0,0 +1,118 @@
+import type { FormikHelpers } from 'formik';
+import { Form, Formik } from 'formik';
+import { useEffect, useState } from 'react';
+import tw from 'twin.macro';
+import { array, number, object, string } from 'yup';
+
+import createAllocation from '@/api/admin/nodes/allocations/createAllocation';
+import getAllocations from '@/api/admin/nodes/getAllocations';
+import getAllocations2 from '@/api/admin/nodes/allocations/getAllocations';
+import Button from '@/components/elements/Button';
+import Field from '@/components/elements/Field';
+import type { Option } from '@/components/elements/SelectField';
+import SelectField from '@/components/elements/SelectField';
+
+interface Values {
+    ips: string[];
+    ports: number[];
+    alias: string;
+}
+
+const distinct = (value: any, index: any, self: any) => {
+    return self.indexOf(value) === index;
+};
+
+function CreateAllocationForm({ nodeId }: { nodeId: number }) {
+    const [ips, setIPs] = useState<Option[]>([]);
+    const [ports] = useState<Option[]>([]);
+
+    const { mutate } = getAllocations2(nodeId, ['server']);
+
+    useEffect(() => {
+        getAllocations(nodeId).then(allocations => {
+            setIPs(
+                allocations
+                    .map(a => a.ip)
+                    .filter(distinct)
+                    .map(ip => {
+                        return { value: ip, label: ip };
+                    }),
+            );
+        });
+    }, [nodeId]);
+
+    const isValidIP = (inputValue: string): boolean => {
+        // TODO: Better way of checking for a valid ip (and CIDR)
+        return inputValue.match(/^([0-9a-f.:/]+)$/) !== null;
+    };
+
+    const isValidPort = (inputValue: string): boolean => {
+        // TODO: Better way of checking for a valid port (and port range)
+        return inputValue.match(/^([0-9-]+)$/) !== null;
+    };
+
+    const submit = ({ ips, ports, alias }: Values, { setSubmitting }: FormikHelpers<Values>) => {
+        setSubmitting(false);
+
+        ips.forEach(async ip => {
+            const allocations = await createAllocation(nodeId, { ip, ports, alias }, ['server']);
+            await mutate(data => ({ ...data!, items: { ...data!.items!, ...allocations } }));
+        });
+    };
+
+    return (
+        <Formik
+            onSubmit={submit}
+            initialValues={{
+                ips: [] as string[],
+                ports: [] as number[],
+                alias: '',
+            }}
+            validationSchema={object().shape({
+                ips: array(string()).min(1, 'You must select at least one ip address.'),
+                ports: array(number()).min(1, 'You must select at least one port.'),
+            })}
+        >
+            {({ isSubmitting, isValid }) => (
+                <Form>
+                    <SelectField
+                        id={'ips'}
+                        name={'ips'}
+                        label={'IPs and CIDRs'}
+                        options={ips}
+                        isValidNewOption={isValidIP}
+                        isMulti
+                        isSearchable
+                        isCreatable
+                        css={tw`mb-6`}
+                    />
+
+                    <SelectField
+                        id={'ports'}
+                        name={'ports'}
+                        label={'Ports'}
+                        options={ports}
+                        isValidNewOption={isValidPort}
+                        isMulti
+                        isSearchable
+                        isCreatable
+                    />
+
+                    <div css={tw`mt-6`}>
+                        <Field id={'alias'} name={'alias'} label={'Alias'} type={'text'} />
+                    </div>
+
+                    <div css={tw`w-full flex flex-row items-center mt-6`}>
+                        <div css={tw`flex ml-auto`}>
+                            <Button type={'submit'} disabled={isSubmitting || !isValid}>
+                                Create Allocations
+                            </Button>
+                        </div>
+                    </div>
+                </Form>
+            )}
+        </Formik>
+    );
+}
+
+export default CreateAllocationForm;

resources/scripts/components/admin/nodes/allocations/DeleteAllocationButton.tsx

@@ -0,0 +1,77 @@
+import type { Actions } from 'easy-peasy';
+import { useStoreActions } from 'easy-peasy';
+import { useState } from 'react';
+import tw from 'twin.macro';
+
+import deleteAllocation from '@/api/admin/nodes/allocations/deleteAllocation';
+import Button from '@/components/elements/Button';
+import ConfirmationModal from '@/components/elements/ConfirmationModal';
+import type { ApplicationStore } from '@/state';
+
+interface Props {
+    nodeId: number;
+    allocationId: number;
+    onDeleted?: () => void;
+}
+
+export default ({ nodeId, allocationId, onDeleted }: Props) => {
+    const [visible, setVisible] = useState(false);
+    const [loading, setLoading] = useState(false);
+
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions(
+        (actions: Actions<ApplicationStore>) => actions.flashes,
+    );
+
+    const onDelete = () => {
+        setLoading(true);
+        clearFlashes('allocation');
+
+        deleteAllocation(nodeId, allocationId)
+            .then(() => {
+                setLoading(false);
+                setVisible(false);
+                if (onDeleted !== undefined) {
+                    onDeleted();
+                }
+            })
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'allocation', error });
+
+                setLoading(false);
+                setVisible(false);
+            });
+    };
+
+    return (
+        <>
+            <ConfirmationModal
+                visible={visible}
+                title={'Delete allocation?'}
+                buttonText={'Yes, delete allocation'}
+                onConfirmed={onDelete}
+                showSpinnerOverlay={loading}
+                onModalDismissed={() => setVisible(false)}
+            >
+                Are you sure you want to delete this allocation?
+            </ConfirmationModal>
+
+            <Button type={'button'} size={'inline'} color={'red'} onClick={() => setVisible(true)}>
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    css={tw`h-5 w-5`}
+                >
+                    <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                    />
+                </svg>
+            </Button>
+        </>
+    );
+};

resources/scripts/components/admin/overview/OverviewContainer.tsx

@@ -0,0 +1,103 @@
+import type { ReactNode } from 'react';
+import { useEffect, useState } from 'react';
+import tw from 'twin.macro';
+
+import type { VersionData } from '@/api/admin/getVersion';
+import getVersion from '@/api/admin/getVersion';
+import AdminContentBlock from '@/components/admin/AdminContentBlock';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import Spinner from '@/components/elements/Spinner';
+import useFlash from '@/plugins/useFlash';
+
+const Code = ({ children }: { children: ReactNode }) => {
+    return (
+        <code css={tw`text-sm font-mono bg-neutral-900 rounded`} style={{ padding: '2px 6px' }}>
+            {children}
+        </code>
+    );
+};
+
+export default () => {
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+    const [loading, setLoading] = useState<boolean>(true);
+    const [versionData, setVersionData] = useState<VersionData | undefined>(undefined);
+
+    useEffect(() => {
+        clearFlashes('overview');
+
+        getVersion()
+            .then(versionData => setVersionData(versionData))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'overview', error });
+            })
+            .then(() => setLoading(false));
+    }, []);
+
+    return (
+        <AdminContentBlock title={'Overview'}>
+            <div css={tw`w-full flex flex-row items-center mb-8`}>
+                <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
+                    <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Overview</h2>
+                    <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>
+                        A quick glance at your system.
+                    </p>
+                </div>
+            </div>
+
+            <FlashMessageRender byKey={'overview'} css={tw`mb-4`} />
+
+            <div css={tw`flex flex-col w-full rounded-lg shadow-md bg-neutral-700`}>
+                {loading ? (
+                    <div css={tw`w-full flex flex-col items-center justify-center`} style={{ height: '16rem' }}>
+                        <Spinner size={'base'} />
+                    </div>
+                ) : (
+                    <div css={tw`rounded shadow-md bg-neutral-700`}>
+                        <div css={tw`bg-neutral-900 rounded-t border-b border-black px-4 py-3`}>
+                            <p css={tw`text-sm uppercase`}>
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    fill="none"
+                                    viewBox="0 0 24 24"
+                                    stroke="currentColor"
+                                    css={tw`inline-block mr-2`}
+                                    style={{ height: '1rem' }}
+                                >
+                                    <path
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        strokeWidth={2}
+                                        d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"
+                                    />
+                                </svg>
+                                System Information
+                            </p>
+                        </div>
+
+                        <div css={tw`px-4 py-4`}>
+                            {versionData?.panel.current === 'canary' ? (
+                                <p css={tw`text-neutral-200`}>
+                                    I hope you enjoy living on the edge because you are running a{' '}
+                                    <Code>{versionData?.panel.current}</Code> version of Pterodactyl.
+                                </p>
+                            ) : versionData?.panel.latest === versionData?.panel.current ? (
+                                <p css={tw`text-neutral-200`}>
+                                    Your panel is <span css={tw`text-neutral-100`}>up-to-date</span>. The latest version
+                                    is <Code>{versionData?.panel.latest}</Code> and you are running version{' '}
+                                    <Code>{versionData?.panel.current}</Code>.
+                                </p>
+                            ) : (
+                                <p css={tw`text-neutral-200`}>
+                                    Your panel is <span css={tw`text-neutral-100`}>not up-to-date</span>. The latest
+                                    version is <Code>{versionData?.panel.latest}</Code> and you are running version{' '}
+                                    <Code>{versionData?.panel.current}</Code>.
+                                </p>
+                            )}
+                        </div>
+                    </div>
+                )}
+            </div>
+        </AdminContentBlock>
+    );
+};

resources/scripts/components/admin/roles/NewRoleButton.tsx

@@ -0,0 +1,107 @@
+import type { FormikHelpers } from 'formik';
+import { Form, Formik } from 'formik';
+import { useState } from 'react';
+import tw from 'twin.macro';
+import { object, string } from 'yup';
+
+import { getRoles, createRole } from '@/api/admin/roles';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import Button from '@/components/elements/Button';
+import Field from '@/components/elements/Field';
+import Modal from '@/components/elements/Modal';
+import useFlash from '@/plugins/useFlash';
+
+interface Values {
+    name: string;
+    description: string;
+}
+
+const schema = object().shape({
+    name: string().required('A role name must be provided.').max(32, 'Role name must not exceed 32 characters.'),
+    description: string().max(255, 'Role description must not exceed 255 characters.'),
+});
+
+export default () => {
+    const [visible, setVisible] = useState(false);
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+    const { mutate } = getRoles();
+
+    const submit = ({ name, description }: Values, { setSubmitting }: FormikHelpers<Values>) => {
+        clearFlashes('role:create');
+        setSubmitting(true);
+
+        createRole(name, description)
+            .then(async role => {
+                await mutate(data => ({ ...data!, items: data!.items.concat(role) }), false);
+                setVisible(false);
+            })
+            .catch(error => {
+                clearAndAddHttpError({ key: 'role:create', error });
+                setSubmitting(false);
+            });
+    };
+
+    return (
+        <>
+            <Formik onSubmit={submit} initialValues={{ name: '', description: '' }} validationSchema={schema}>
+                {({ isSubmitting, resetForm }) => (
+                    <Modal
+                        visible={visible}
+                        dismissable={!isSubmitting}
+                        showSpinnerOverlay={isSubmitting}
+                        onDismissed={() => {
+                            resetForm();
+                            setVisible(false);
+                        }}
+                    >
+                        <FlashMessageRender byKey={'role:create'} css={tw`mb-6`} />
+                        <h2 css={tw`mb-6 text-2xl text-neutral-100`}>New Role</h2>
+                        <Form css={tw`m-0`}>
+                            <Field
+                                type={'text'}
+                                id={'name'}
+                                name={'name'}
+                                label={'Name'}
+                                description={'A short name used to identify this role.'}
+                                autoFocus
+                            />
+
+                            <div css={tw`mt-6`}>
+                                <Field
+                                    type={'text'}
+                                    id={'description'}
+                                    name={'description'}
+                                    label={'Description'}
+                                    description={'A description for this role.'}
+                                />
+                            </div>
+
+                            <div css={tw`flex flex-wrap justify-end mt-6`}>
+                                <Button
+                                    type={'button'}
+                                    isSecondary
+                                    css={tw`w-full sm:w-auto sm:mr-2`}
+                                    onClick={() => setVisible(false)}
+                                >
+                                    Cancel
+                                </Button>
+                                <Button css={tw`w-full mt-4 sm:w-auto sm:mt-0`} type={'submit'}>
+                                    Create Role
+                                </Button>
+                            </div>
+                        </Form>
+                    </Modal>
+                )}
+            </Formik>
+
+            <Button
+                type={'button'}
+                size={'large'}
+                css={tw`h-10 px-4 py-0 whitespace-nowrap`}
+                onClick={() => setVisible(true)}
+            >
+                New Role
+            </Button>
+        </>
+    );
+};

resources/scripts/components/admin/roles/RoleDeleteButton.tsx

@@ -0,0 +1,73 @@
+import type { Actions } from 'easy-peasy';
+import { useStoreActions } from 'easy-peasy';
+import { useState } from 'react';
+import tw from 'twin.macro';
+
+import { deleteRole } from '@/api/admin/roles';
+import Button from '@/components/elements/Button';
+import ConfirmationModal from '@/components/elements/ConfirmationModal';
+import type { ApplicationStore } from '@/state';
+
+interface Props {
+    roleId: number;
+    onDeleted: () => void;
+}
+
+export default ({ roleId, onDeleted }: Props) => {
+    const [visible, setVisible] = useState(false);
+    const [loading, setLoading] = useState(false);
+
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions(
+        (actions: Actions<ApplicationStore>) => actions.flashes,
+    );
+
+    const onDelete = () => {
+        setLoading(true);
+        clearFlashes('role');
+
+        deleteRole(roleId)
+            .then(() => {
+                setLoading(false);
+                onDeleted();
+            })
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'role', error });
+
+                setLoading(false);
+                setVisible(false);
+            });
+    };
+
+    return (
+        <>
+            <ConfirmationModal
+                visible={visible}
+                title={'Delete role?'}
+                buttonText={'Yes, delete role'}
+                onConfirmed={onDelete}
+                showSpinnerOverlay={loading}
+                onModalDismissed={() => setVisible(false)}
+            >
+                Are you sure you want to delete this role?
+            </ConfirmationModal>
+
+            <Button type={'button'} size={'xsmall'} color={'red'} onClick={() => setVisible(true)}>
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    css={tw`h-5 w-5`}
+                >
+                    <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                    />
+                </svg>
+            </Button>
+        </>
+    );
+};

resources/scripts/components/admin/roles/RoleEditContainer.tsx

@@ -0,0 +1,176 @@
+import type { Action, Actions } from 'easy-peasy';
+import { action, createContextStore, useStoreActions } from 'easy-peasy';
+import type { FormikHelpers } from 'formik';
+import { Form, Formik } from 'formik';
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import tw from 'twin.macro';
+import { object, string } from 'yup';
+
+import { getRole, updateRole } from '@/api/admin/roles';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import AdminBox from '@/components/admin/AdminBox';
+import AdminContentBlock from '@/components/admin/AdminContentBlock';
+import RoleDeleteButton from '@/components/admin/roles/RoleDeleteButton';
+import Button from '@/components/elements/Button';
+import Field from '@/components/elements/Field';
+import Spinner from '@/components/elements/Spinner';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+import type { UserRole } from '@definitions/admin';
+import type { ApplicationStore } from '@/state';
+
+interface ctx {
+    role: UserRole | undefined;
+    setRole: Action<ctx, UserRole | undefined>;
+}
+
+export const Context = createContextStore<ctx>({
+    role: undefined,
+
+    setRole: action((state, payload) => {
+        state.role = payload;
+    }),
+});
+
+interface Values {
+    name: string;
+    description: string;
+}
+
+const EditInformationContainer = () => {
+    const navigate = useNavigate();
+
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions(
+        (actions: Actions<ApplicationStore>) => actions.flashes,
+    );
+
+    const role = Context.useStoreState(state => state.role);
+    const setRole = Context.useStoreActions(actions => actions.setRole);
+
+    if (role === undefined) {
+        return <></>;
+    }
+
+    const submit = ({ name, description }: Values, { setSubmitting }: FormikHelpers<Values>) => {
+        clearFlashes('role');
+
+        updateRole(role.id, name, description)
+            .then(() => setRole({ ...role, name, description }))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'role', error });
+            })
+            .then(() => setSubmitting(false));
+    };
+
+    return (
+        <Formik
+            onSubmit={submit}
+            initialValues={{
+                name: role.name,
+                description: role.description || '',
+            }}
+            validationSchema={object().shape({
+                name: string().required().min(1),
+                description: string().max(255, ''),
+            })}
+        >
+            {({ isSubmitting, isValid }) => (
+                <>
+                    <AdminBox title={'Edit Role'} css={tw`relative`}>
+                        <SpinnerOverlay visible={isSubmitting} />
+
+                        <Form css={tw`mb-0`}>
+                            <div>
+                                <Field id={'name'} name={'name'} label={'Name'} type={'text'} />
+                            </div>
+
+                            <div css={tw`mt-6`}>
+                                <Field id={'description'} name={'description'} label={'description'} type={'text'} />
+                            </div>
+
+                            <div css={tw`w-full flex flex-row items-center mt-6`}>
+                                <div css={tw`flex`}>
+                                    <RoleDeleteButton roleId={role.id} onDeleted={() => navigate('/admin/roles')} />
+                                </div>
+
+                                <div css={tw`flex ml-auto`}>
+                                    <Button type={'submit'} disabled={isSubmitting || !isValid}>
+                                        Save Changes
+                                    </Button>
+                                </div>
+                            </div>
+                        </Form>
+                    </AdminBox>
+                </>
+            )}
+        </Formik>
+    );
+};
+
+const RoleEditContainer = () => {
+    const params = useParams<'id'>();
+
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions(
+        (actions: Actions<ApplicationStore>) => actions.flashes,
+    );
+    const [loading, setLoading] = useState(true);
+
+    const role = Context.useStoreState(state => state.role);
+    const setRole = Context.useStoreActions(actions => actions.setRole);
+
+    useEffect(() => {
+        clearFlashes('role');
+
+        getRole(Number(params.id))
+            .then(role => setRole(role))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'role', error });
+            })
+            .then(() => setLoading(false));
+    }, []);
+
+    if (loading || role === undefined) {
+        return (
+            <AdminContentBlock>
+                <FlashMessageRender byKey={'role'} css={tw`mb-4`} />
+
+                <div css={tw`w-full flex flex-col items-center justify-center`} style={{ height: '24rem' }}>
+                    <Spinner size={'base'} />
+                </div>
+            </AdminContentBlock>
+        );
+    }
+
+    return (
+        <AdminContentBlock title={'Role - ' + role.name}>
+            <div css={tw`w-full flex flex-row items-center mb-8`}>
+                <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
+                    <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{role.name}</h2>
+                    {(role.description || '').length < 1 ? (
+                        <p css={tw`text-base text-neutral-400`}>
+                            <span css={tw`italic`}>No description</span>
+                        </p>
+                    ) : (
+                        <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>
+                            {role.description}
+                        </p>
+                    )}
+                </div>
+            </div>
+
+            <FlashMessageRender byKey={'role'} css={tw`mb-4`} />
+
+            <EditInformationContainer />
+        </AdminContentBlock>
+    );
+};
+
+export default () => {
+    return (
+        <Context.Provider>
+            <RoleEditContainer />
+        </Context.Provider>
+    );
+};

resources/scripts/components/admin/roles/RolesContainer.tsx

@@ -0,0 +1,182 @@
+import type { ChangeEvent } from 'react';
+import { useContext, useEffect } from 'react';
+import { NavLink } from 'react-router-dom';
+import tw from 'twin.macro';
+
+import type { Filters } from '@/api/admin/roles';
+import { getRoles, Context as RolesContext } from '@/api/admin/roles';
+import { AdminContext } from '@/state/admin';
+import NewRoleButton from '@/components/admin/roles/NewRoleButton';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import AdminContentBlock from '@/components/admin/AdminContentBlock';
+import AdminCheckbox from '@/components/admin/AdminCheckbox';
+import AdminTable, {
+    TableBody,
+    TableHead,
+    TableHeader,
+    TableRow,
+    Pagination,
+    Loading,
+    NoItems,
+    ContentWrapper,
+    useTableHooks,
+} from '@/components/admin/AdminTable';
+import CopyOnClick from '@/components/elements/CopyOnClick';
+import useFlash from '@/plugins/useFlash';
+
+const RowCheckbox = ({ id }: { id: number }) => {
+    const isChecked = AdminContext.useStoreState(state => state.roles.selectedRoles.indexOf(id) >= 0);
+    const appendSelectedRole = AdminContext.useStoreActions(actions => actions.roles.appendSelectedRole);
+    const removeSelectedRole = AdminContext.useStoreActions(actions => actions.roles.removeSelectedRole);
+
+    return (
+        <AdminCheckbox
+            name={id.toString()}
+            checked={isChecked}
+            onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                if (e.currentTarget.checked) {
+                    appendSelectedRole(id);
+                } else {
+                    removeSelectedRole(id);
+                }
+            }}
+        />
+    );
+};
+
+const RolesContainer = () => {
+    const { page, setPage, setFilters, sort, setSort, sortDirection } = useContext(RolesContext);
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+    const { data: roles, error, isValidating } = getRoles();
+
+    useEffect(() => {
+        if (!error) {
+            clearFlashes('roles');
+            return;
+        }
+
+        clearAndAddHttpError({ key: 'roles', error });
+    }, [error]);
+
+    const length = roles?.items?.length || 0;
+
+    const setSelectedRoles = AdminContext.useStoreActions(actions => actions.roles.setSelectedRoles);
+    const selectedRolesLength = AdminContext.useStoreState(state => state.roles.selectedRoles.length);
+
+    const onSelectAllClick = (e: ChangeEvent<HTMLInputElement>) => {
+        setSelectedRoles(e.currentTarget.checked ? roles?.items?.map(role => role.id) || [] : []);
+    };
+
+    const onSearch = (query: string): Promise<void> => {
+        return new Promise(resolve => {
+            if (query.length < 2) {
+                setFilters(null);
+            } else {
+                setFilters({ name: query });
+            }
+            return resolve();
+        });
+    };
+
+    useEffect(() => {
+        setSelectedRoles([]);
+    }, [page]);
+
+    return (
+        <AdminContentBlock title={'Roles'}>
+            <div css={tw`w-full flex flex-row items-center mb-8`}>
+                <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
+                    <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Roles</h2>
+                    <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>
+                        Soon&trade;
+                    </p>
+                </div>
+
+                <div css={tw`flex ml-auto pl-4`}>
+                    <NewRoleButton />
+                </div>
+            </div>
+
+            <FlashMessageRender byKey={'roles'} css={tw`mb-4`} />
+
+            <AdminTable>
+                <ContentWrapper
+                    checked={selectedRolesLength === (length === 0 ? -1 : length)}
+                    onSelectAllClick={onSelectAllClick}
+                    onSearch={onSearch}
+                >
+                    <Pagination data={roles} onPageSelect={setPage}>
+                        <div css={tw`overflow-x-auto`}>
+                            <table css={tw`w-full table-auto`}>
+                                <TableHead>
+                                    <TableHeader
+                                        name={'ID'}
+                                        direction={sort === 'id' ? (sortDirection ? 1 : 2) : null}
+                                        onClick={() => setSort('id')}
+                                    />
+                                    <TableHeader
+                                        name={'Name'}
+                                        direction={sort === 'name' ? (sortDirection ? 1 : 2) : null}
+                                        onClick={() => setSort('name')}
+                                    />
+                                    <TableHeader name={'Description'} />
+                                </TableHead>
+
+                                <TableBody>
+                                    {roles !== undefined &&
+                                        !error &&
+                                        !isValidating &&
+                                        length > 0 &&
+                                        roles.items.map(role => (
+                                            <TableRow key={role.id}>
+                                                <td css={tw`pl-6`}>
+                                                    <RowCheckbox id={role.id} />
+                                                </td>
+
+                                                <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                    <CopyOnClick text={role.id.toString()}>
+                                                        <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>
+                                                            {role.id}
+                                                        </code>
+                                                    </CopyOnClick>
+                                                </td>
+
+                                                <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                    <NavLink
+                                                        to={`/admin/roles/${role.id}`}
+                                                        css={tw`text-primary-400 hover:text-primary-300`}
+                                                    >
+                                                        {role.name}
+                                                    </NavLink>
+                                                </td>
+
+                                                <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                    {role.description}
+                                                </td>
+                                            </TableRow>
+                                        ))}
+                                </TableBody>
+                            </table>
+
+                            {roles === undefined || (error && isValidating) ? (
+                                <Loading />
+                            ) : length < 1 ? (
+                                <NoItems />
+                            ) : null}
+                        </div>
+                    </Pagination>
+                </ContentWrapper>
+            </AdminTable>
+        </AdminContentBlock>
+    );
+};
+
+export default () => {
+    const hooks = useTableHooks<Filters>();
+
+    return (
+        <RolesContext.Provider value={hooks}>
+            <RolesContainer />
+        </RolesContext.Provider>
+    );
+};

resources/scripts/components/admin/servers/EggSelect.tsx

@@ -0,0 +1,75 @@
+import { useField } from 'formik';
+import type { ChangeEvent } from 'react';
+import { useEffect, useState } from 'react';
+
+import type { WithRelationships } from '@/api/admin';
+import type { Egg } from '@/api/admin/egg';
+import { searchEggs } from '@/api/admin/egg';
+import Label from '@/components/elements/Label';
+import Select from '@/components/elements/Select';
+
+interface Props {
+    nestId?: number;
+    selectedEggId?: number;
+    onEggSelect: (egg: Egg | null) => void;
+}
+
+export default ({ nestId, selectedEggId, onEggSelect }: Props) => {
+    const [, , { setValue, setTouched }] = useField<Record<string, string | undefined>>('environment');
+    const [eggs, setEggs] = useState<WithRelationships<Egg, 'variables'>[] | null>(null);
+
+    const selectEgg = (egg: Egg | null) => {
+        if (egg === null) {
+            onEggSelect(null);
+            return;
+        }
+
+        // Clear values
+        setValue({});
+        setTouched(true);
+
+        onEggSelect(egg);
+
+        const values: Record<string, any> = {};
+        egg.relationships.variables?.forEach(v => {
+            values[v.environmentVariable] = v.defaultValue;
+        });
+        setValue(values);
+        setTouched(true);
+    };
+
+    useEffect(() => {
+        if (!nestId) {
+            setEggs(null);
+            return;
+        }
+
+        searchEggs(nestId, {})
+            .then(eggs => {
+                setEggs(eggs);
+                selectEgg(eggs[0] || null);
+            })
+            .catch(error => console.error(error));
+    }, [nestId]);
+
+    const onSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {
+        selectEgg(eggs?.find(egg => egg.id.toString() === e.currentTarget.value) || null);
+    };
+
+    return (
+        <>
+            <Label>Egg</Label>
+            <Select id={'eggId'} name={'eggId'} defaultValue={selectedEggId} onChange={onSelectChange}>
+                {!eggs ? (
+                    <option disabled>Loading...</option>
+                ) : (
+                    eggs.map(v => (
+                        <option key={v.id} value={v.id.toString()}>
+                            {v.name}
+                        </option>
+                    ))
+                )}
+            </Select>
+        </>
+    );
+};

resources/scripts/components/admin/servers/NestSelector.tsx

@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react';
+
+import type { Nest } from '@/api/admin/nest';
+import { searchNests } from '@/api/admin/nest';
+import Label from '@/components/elements/Label';
+import Select from '@/components/elements/Select';
+
+interface Props {
+    selectedNestId?: number;
+    onNestSelect: (nest: number) => void;
+}
+
+export default ({ selectedNestId, onNestSelect }: Props) => {
+    const [nests, setNests] = useState<Nest[] | null>(null);
+
+    useEffect(() => {
+        searchNests({})
+            .then(nests => {
+                setNests(nests);
+                if (selectedNestId === 0 && nests.length > 0) {
+                    // @ts-expect-error go away
+                    onNestSelect(nests[0].id);
+                }
+            })
+            .catch(error => console.error(error));
+    }, []);
+
+    return (
+        <>
+            <Label>Nest</Label>
+            <Select value={selectedNestId} onChange={e => onNestSelect(Number(e.currentTarget.value))}>
+                {!nests ? (
+                    <option disabled>Loading...</option>
+                ) : (
+                    nests?.map(v => (
+                        <option key={v.uuid} value={v.id.toString()}>
+                            {v.name}
+                        </option>
+                    ))
+                )}
+            </Select>
+        </>
+    );
+};

resources/scripts/components/admin/servers/NewServerContainer.tsx

@@ -0,0 +1,225 @@
+import { faNetworkWired } from '@fortawesome/free-solid-svg-icons';
+import type { FormikHelpers } from 'formik';
+import { Form, Formik, useFormikContext } from 'formik';
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import tw from 'twin.macro';
+import { object } from 'yup';
+
+import type { Egg } from '@/api/admin/egg';
+import type { CreateServerRequest } from '@/api/admin/servers/createServer';
+import createServer from '@/api/admin/servers/createServer';
+import type { Allocation, Node } from '@/api/admin/node';
+import { getAllocations } from '@/api/admin/node';
+import AdminBox from '@/components/admin/AdminBox';
+import NodeSelect from '@/components/admin/servers/NodeSelect';
+import {
+    ServerImageContainer,
+    ServerServiceContainer,
+    ServerVariableContainer,
+} from '@/components/admin/servers/ServerStartupContainer';
+import BaseSettingsBox from '@/components/admin/servers/settings/BaseSettingsBox';
+import FeatureLimitsBox from '@/components/admin/servers/settings/FeatureLimitsBox';
+import ServerResourceBox from '@/components/admin/servers/settings/ServerResourceBox';
+import Button from '@/components/elements/Button';
+import Field from '@/components/elements/Field';
+import FormikSwitch from '@/components/elements/FormikSwitch';
+import Label from '@/components/elements/Label';
+import Select from '@/components/elements/Select';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import useFlash from '@/plugins/useFlash';
+import AdminContentBlock from '@/components/admin/AdminContentBlock';
+
+function InternalForm() {
+    const {
+        isSubmitting,
+        isValid,
+        setFieldValue,
+        values: { environment },
+    } = useFormikContext<CreateServerRequest>();
+
+    const [egg, setEgg] = useState<Egg | null>(null);
+    const [node, setNode] = useState<Node | null>(null);
+    const [allocations, setAllocations] = useState<Allocation[] | null>(null);
+
+    useEffect(() => {
+        if (egg === null) {
+            return;
+        }
+
+        setFieldValue('eggId', egg.id);
+        setFieldValue('startup', '');
+        setFieldValue('image', egg.dockerImages.length > 0 ? egg.dockerImages[0] : '');
+    }, [egg]);
+
+    useEffect(() => {
+        if (node === null) {
+            return;
+        }
+
+        // server_id: 0 filters out assigned allocations
+        getAllocations(node.id, { filters: { server_id: '0' } }).then(setAllocations);
+    }, [node]);
+
+    return (
+        <Form>
+            <div css={tw`grid grid-cols-2 gap-y-6 gap-x-8 mb-16`}>
+                <div css={tw`grid grid-cols-1 gap-y-6 col-span-2 md:col-span-1`}>
+                    <BaseSettingsBox>
+                        <NodeSelect node={node} setNode={setNode} />
+                        <div css={tw`xl:col-span-2 bg-neutral-800 border border-neutral-900 shadow-inner p-4 rounded`}>
+                            <FormikSwitch
+                                name={'startOnCompletion'}
+                                label={'Start after installation'}
+                                description={'Should the server be automatically started after it has been installed?'}
+                            />
+                        </div>
+                    </BaseSettingsBox>
+                    <FeatureLimitsBox />
+                    <ServerServiceContainer egg={egg} setEgg={setEgg} nestId={0} />
+                </div>
+                <div css={tw`grid grid-cols-1 gap-y-6 col-span-2 md:col-span-1`}>
+                    <AdminBox icon={faNetworkWired} title={'Networking'} isLoading={isSubmitting}>
+                        <div css={tw`grid grid-cols-1 gap-4 lg:gap-6`}>
+                            <div>
+                                <Label htmlFor={'allocation.default'}>Primary Allocation</Label>
+                                <Select
+                                    id={'allocation.default'}
+                                    name={'allocation.default'}
+                                    disabled={node === null}
+                                    onChange={e => setFieldValue('allocation.default', Number(e.currentTarget.value))}
+                                >
+                                    {node === null ? (
+                                        <option value="">Select a node...</option>
+                                    ) : (
+                                        <option value="">Select an allocation...</option>
+                                    )}
+                                    {allocations?.map(a => (
+                                        <option key={a.id} value={a.id.toString()}>
+                                            {a.getDisplayText()}
+                                        </option>
+                                    ))}
+                                </Select>
+                            </div>
+                            {/*<div>*/}
+                            {/*    /!* TODO: Multi-select *!/*/}
+                            {/*    <Label htmlFor={'allocation.additional'}>Additional Allocations</Label>*/}
+                            {/*    <Select id={'allocation.additional'} name={'allocation.additional'} disabled={node === null}>*/}
+                            {/*        {node === null ? <option value="">Select a node...</option> : <option value="">Select additional allocations...</option>}*/}
+                            {/*        {allocations?.map(a => <option key={a.id} value={a.id.toString()}>{a.getDisplayText()}</option>)}*/}
+                            {/*    </Select>*/}
+                            {/*</div>*/}
+                        </div>
+                    </AdminBox>
+                    <ServerResourceBox />
+                    <ServerImageContainer />
+                </div>
+
+                <AdminBox title={'Startup Command'} css={tw`relative w-full col-span-2`}>
+                    <SpinnerOverlay visible={isSubmitting} />
+
+                    <Field
+                        id={'startup'}
+                        name={'startup'}
+                        label={'Startup Command'}
+                        type={'text'}
+                        description={
+                            "Edit your server's startup command here. The following variables are available by default: {{SERVER_MEMORY}}, {{SERVER_IP}}, and {{SERVER_PORT}}."
+                        }
+                        placeholder={egg?.startup || ''}
+                    />
+                </AdminBox>
+
+                <div css={tw`col-span-2 grid grid-cols-1 md:grid-cols-2 gap-y-6 gap-x-8`}>
+                    {/* This ensures that no variables are rendered unless the environment has a value for the variable. */}
+                    {egg?.relationships.variables
+                        ?.filter(v => Object.keys(environment).find(e => e === v.environmentVariable) !== undefined)
+                        .map((v, i) => (
+                            <ServerVariableContainer key={i} variable={v} />
+                        ))}
+                </div>
+
+                <div css={tw`bg-neutral-700 rounded shadow-md px-4 py-3 col-span-2`}>
+                    <div css={tw`flex flex-row`}>
+                        <Button type="submit" size="small" css={tw`ml-auto`} disabled={isSubmitting || !isValid}>
+                            Create Server
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        </Form>
+    );
+}
+
+export default () => {
+    const navigate = useNavigate();
+
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+
+    const submit = (r: CreateServerRequest, { setSubmitting }: FormikHelpers<CreateServerRequest>) => {
+        clearFlashes('server:create');
+
+        createServer(r)
+            .then(s => navigate(`/admin/servers/${s.id}`))
+            .catch(error => clearAndAddHttpError({ key: 'server:create', error }))
+            .then(() => setSubmitting(false));
+    };
+
+    return (
+        <AdminContentBlock title={'New Server'}>
+            <div css={tw`w-full flex flex-row items-center mb-8`}>
+                <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
+                    <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>New Server</h2>
+                    <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>
+                        Add a new server to the panel.
+                    </p>
+                </div>
+            </div>
+
+            <FlashMessageRender byKey={'server:create'} css={tw`mb-4`} />
+
+            <Formik
+                onSubmit={submit}
+                initialValues={
+                    {
+                        externalId: '',
+                        name: '',
+                        description: '',
+                        ownerId: 0,
+                        nodeId: 0,
+                        limits: {
+                            memory: 1024,
+                            swap: 0,
+                            disk: 4096,
+                            io: 500,
+                            cpu: 0,
+                            threads: '',
+                            // This value is inverted to have the switch be on when the
+                            // OOM Killer is enabled, rather than when disabled.
+                            oomDisabled: false,
+                        },
+                        featureLimits: {
+                            allocations: 1,
+                            backups: 0,
+                            databases: 0,
+                        },
+                        allocation: {
+                            default: 0,
+                            additional: [] as number[],
+                        },
+                        startup: '',
+                        environment: [],
+                        eggId: 0,
+                        image: '',
+                        skipScripts: false,
+                        startOnCompletion: true,
+                    } as CreateServerRequest
+                }
+                validationSchema={object().shape({})}
+            >
+                <InternalForm />
+            </Formik>
+        </AdminContentBlock>
+    );
+};

resources/scripts/components/admin/servers/NodeSelect.tsx

@@ -0,0 +1,46 @@
+import { useFormikContext } from 'formik';
+import { useState } from 'react';
+
+import type { Node } from '@/api/admin/node';
+import { searchNodes } from '@/api/admin/node';
+import SearchableSelect, { Option } from '@/components/elements/SearchableSelect';
+
+export default ({ node, setNode }: { node: Node | null; setNode: (_: Node | null) => void }) => {
+    const { setFieldValue } = useFormikContext();
+
+    const [nodes, setNodes] = useState<Node[] | null>(null);
+
+    const onSearch = async (query: string) => {
+        setNodes(await searchNodes({ filters: { name: query } }));
+    };
+
+    const onSelect = (node: Node | null) => {
+        setNode(node);
+        setFieldValue('nodeId', node?.id || null);
+    };
+
+    const getSelectedText = (node: Node | null): string => node?.name || '';
+
+    return (
+        <SearchableSelect
+            id={'nodeId'}
+            name={'nodeId'}
+            label={'Node'}
+            placeholder={'Select a node...'}
+            items={nodes}
+            selected={node}
+            setSelected={setNode}
+            setItems={setNodes}
+            onSearch={onSearch}
+            onSelect={onSelect}
+            getSelectedText={getSelectedText}
+            nullable
+        >
+            {nodes?.map(d => (
+                <Option key={d.id} selectId={'nodeId'} id={d.id} item={d} active={d.id === node?.id}>
+                    {d.name}
+                </Option>
+            ))}
+        </SearchableSelect>
+    );
+};

resources/scripts/components/admin/servers/OwnerSelect.tsx

@@ -0,0 +1,47 @@
+import { useFormikContext } from 'formik';
+import { useState } from 'react';
+
+import { searchUserAccounts } from '@/api/admin/users';
+import SearchableSelect, { Option } from '@/components/elements/SearchableSelect';
+import type { User } from '@definitions/admin';
+
+export default ({ selected }: { selected?: User }) => {
+    const { setFieldValue } = useFormikContext();
+
+    const [user, setUser] = useState<User | null>(selected || null);
+    const [users, setUsers] = useState<User[] | null>(null);
+
+    const onSearch = async (query: string) => {
+        setUsers(await searchUserAccounts({ filters: { username: query, email: query } }));
+    };
+
+    const onSelect = (user: User | null) => {
+        setUser(user);
+        setFieldValue('ownerId', user?.id || null);
+    };
+
+    const getSelectedText = (user: User | null): string => user?.email || '';
+
+    return (
+        <SearchableSelect
+            id={'ownerId'}
+            name={'ownerId'}
+            label={'Owner'}
+            placeholder={'Select a user...'}
+            items={users}
+            selected={user}
+            setSelected={setUser}
+            setItems={setUsers}
+            onSearch={onSearch}
+            onSelect={onSelect}
+            getSelectedText={getSelectedText}
+            nullable
+        >
+            {users?.map(d => (
+                <Option key={d.id} selectId={'ownerId'} id={d.id} item={d} active={d.id === user?.id}>
+                    {d.email}
+                </Option>
+            ))}
+        </SearchableSelect>
+    );
+};

resources/scripts/components/admin/servers/ServerDeleteButton.tsx

@@ -0,0 +1,66 @@
+import { TrashIcon } from '@heroicons/react/outline';
+import type { Actions } from 'easy-peasy';
+import { useStoreActions } from 'easy-peasy';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import tw from 'twin.macro';
+
+import Button from '@/components/elements/Button';
+import ConfirmationModal from '@/components/elements/ConfirmationModal';
+import deleteServer from '@/api/admin/servers/deleteServer';
+import { useServerFromRoute } from '@/api/admin/server';
+import type { ApplicationStore } from '@/state';
+
+export default () => {
+    const navigate = useNavigate();
+    const [visible, setVisible] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const { data: server } = useServerFromRoute();
+
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions(
+        (actions: Actions<ApplicationStore>) => actions.flashes,
+    );
+
+    const onDelete = () => {
+        if (!server) return;
+
+        setLoading(true);
+        clearFlashes('server');
+
+        deleteServer(server.id)
+            .then(() => navigate('/admin/servers'))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'server', error });
+
+                setLoading(false);
+                setVisible(false);
+            });
+    };
+
+    if (!server) return null;
+
+    return (
+        <>
+            <ConfirmationModal
+                visible={visible}
+                title={'Delete server?'}
+                buttonText={'Yes, delete server'}
+                onConfirmed={onDelete}
+                showSpinnerOverlay={loading}
+                onModalDismissed={() => setVisible(false)}
+            >
+                Are you sure you want to delete this server?
+            </ConfirmationModal>
+            <Button
+                type={'button'}
+                size={'small'}
+                color={'red'}
+                onClick={() => setVisible(true)}
+                css={tw`flex items-center justify-center`}
+            >
+                <TrashIcon css={tw`w-5 h-5 mr-2`} /> Delete Server
+            </Button>
+        </>
+    );
+};

resources/scripts/components/admin/servers/ServerManageContainer.tsx

@@ -0,0 +1,60 @@
+import tw from 'twin.macro';
+
+import { useServerFromRoute } from '@/api/admin/server';
+import AdminBox from '@/components/admin/AdminBox';
+import Button from '@/components/elements/Button';
+
+export default () => {
+    const { data: server } = useServerFromRoute();
+
+    if (!server) return null;
+
+    return (
+        <div css={tw`grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-x-2 gap-y-2`}>
+            <div css={tw`h-auto flex flex-col`}>
+                <AdminBox title={'Reinstall Server'} css={tw`relative w-full`}>
+                    <div css={tw`flex flex-row text-red-500 justify-start items-center mb-4`}>
+                        <div css={tw`w-12 mr-2`}>
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                <path
+                                    fillRule="evenodd"
+                                    d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
+                                    clipRule="evenodd"
+                                />
+                            </svg>
+                        </div>
+                        <p css={tw`text-sm`}>Danger! This could overwrite server data.</p>
+                    </div>
+                    <Button size={'large'} color={'red'} css={tw`w-full`}>
+                        Reinstall Server
+                    </Button>
+                    <p css={tw`text-xs text-neutral-400 mt-2`}>
+                        This will reinstall the server with the assigned service scripts.
+                    </p>
+                </AdminBox>
+            </div>
+            <div css={tw`h-auto flex flex-col`}>
+                <AdminBox title={'Install Status'} css={tw`relative w-full`}>
+                    <Button size={'large'} color={'primary'} css={tw`w-full`}>
+                        Set Server as Installing
+                    </Button>
+                    <p css={tw`text-xs text-neutral-400 mt-2`}>
+                        If you need to change the install status from uninstalled to installed, or vice versa, you may
+                        do so with the button below.
+                    </p>
+                </AdminBox>
+            </div>
+            <div css={tw`h-auto flex flex-col`}>
+                <AdminBox title={'Suspend Server '} css={tw`relative w-full`}>
+                    <Button size={'large'} color={'primary'} css={tw`w-full`}>
+                        Suspend Server
+                    </Button>
+                    <p css={tw`text-xs text-neutral-400 mt-2`}>
+                        This will suspend the server, stop any running processes, and immediately block the user from
+                        being able to access their files or otherwise manage the server through the panel or API.
+                    </p>
+                </AdminBox>
+            </div>
+        </div>
+    );
+};

resources/scripts/components/admin/servers/ServerRouter.tsx

@@ -0,0 +1,76 @@
+import { useEffect } from 'react';
+import { Route, Routes, useParams } from 'react-router-dom';
+import tw from 'twin.macro';
+
+import ServerManageContainer from '@/components/admin/servers/ServerManageContainer';
+import ServerStartupContainer from '@/components/admin/servers/ServerStartupContainer';
+import AdminContentBlock from '@/components/admin/AdminContentBlock';
+import Spinner from '@/components/elements/Spinner';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import { SubNavigation, SubNavigationLink } from '@/components/admin/SubNavigation';
+import ServerSettingsContainer from '@/components/admin/servers/ServerSettingsContainer';
+import useFlash from '@/plugins/useFlash';
+import { useServerFromRoute } from '@/api/admin/server';
+import { AdjustmentsIcon, CogIcon, DatabaseIcon, FolderIcon, ShieldExclamationIcon } from '@heroicons/react/outline';
+
+export default () => {
+    const params = useParams<'id'>();
+
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+    const { data: server, error, isValidating, mutate } = useServerFromRoute();
+
+    useEffect(() => {
+        mutate();
+    }, []);
+
+    useEffect(() => {
+        if (!error) clearFlashes('server');
+        if (error) clearAndAddHttpError({ key: 'server', error });
+    }, [error]);
+
+    if (!server || (error && isValidating)) {
+        return (
+            <AdminContentBlock showFlashKey={'server'}>
+                <Spinner size={'large'} centered />
+            </AdminContentBlock>
+        );
+    }
+
+    return (
+        <AdminContentBlock title={'Server - ' + server.name}>
+            <FlashMessageRender byKey={'backups'} css={tw`mb-4`} />
+            <div css={tw`w-full flex flex-row items-center mb-4`}>
+                <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
+                    <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{server.name}</h2>
+                    <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>
+                        {server.uuid}
+                    </p>
+                </div>
+            </div>
+
+            <FlashMessageRender byKey={'server'} css={tw`mb-4`} />
+
+            <SubNavigation>
+                <SubNavigationLink to={`/admin/servers/${params.id}`} name={'Settings'} icon={CogIcon} />
+                <SubNavigationLink to={`/admin/servers/${params.id}/startup`} name={'Startup'} icon={AdjustmentsIcon} />
+                <SubNavigationLink
+                    to={`/admin/servers/${params.id}/databases`}
+                    name={'Databases'}
+                    icon={DatabaseIcon}
+                />
+                <SubNavigationLink to={`/admin/servers/${params.id}/mounts`} name={'Mounts'} icon={FolderIcon} />
+                <SubNavigationLink
+                    to={`/admin/servers/${params.id}/manage`}
+                    name={'Manage'}
+                    icon={ShieldExclamationIcon}
+                />
+            </SubNavigation>
+
+            <Routes>
+                <Route path="" element={<ServerSettingsContainer />} />
+                <Route path="startup" element={<ServerStartupContainer />} />
+                <Route path="manage" element={<ServerManageContainer />} />
+            </Routes>
+        </AdminContentBlock>
+    );
+};

resources/scripts/components/admin/servers/ServerSettingsContainer.tsx

@@ -0,0 +1,103 @@
+import { useStoreActions } from 'easy-peasy';
+import type { FormikHelpers } from 'formik';
+import { Form, Formik } from 'formik';
+import tw from 'twin.macro';
+import { object } from 'yup';
+
+import { useServerFromRoute } from '@/api/admin/server';
+import type { Values } from '@/api/admin/servers/updateServer';
+import updateServer from '@/api/admin/servers/updateServer';
+import ServerDeleteButton from '@/components/admin/servers/ServerDeleteButton';
+import BaseSettingsBox from '@/components/admin/servers/settings/BaseSettingsBox';
+import FeatureLimitsBox from '@/components/admin/servers/settings/FeatureLimitsBox';
+import NetworkingBox from '@/components/admin/servers/settings/NetworkingBox';
+import ServerResourceBox from '@/components/admin/servers/settings/ServerResourceBox';
+import Button from '@/components/elements/Button';
+
+export default () => {
+    const { data: server } = useServerFromRoute();
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions(actions => actions.flashes);
+
+    if (!server) return null;
+
+    const submit = (values: Values, { setSubmitting, setFieldValue }: FormikHelpers<Values>) => {
+        clearFlashes('server');
+
+        // This value is inverted to have the switch be on when the
+        // OOM Killer is enabled, rather than when disabled.
+        values.limits.oomDisabled = !values.limits.oomDisabled;
+
+        updateServer(server.id, values)
+            .then(() => {
+                // setServer({ ...server, ...s });
+
+                // TODO: Figure out how to properly clear react-selects for allocations.
+                setFieldValue('addAllocations', []);
+                setFieldValue('removeAllocations', []);
+            })
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'server', error });
+            })
+            .then(() => setSubmitting(false));
+    };
+
+    return (
+        <Formik
+            onSubmit={submit}
+            initialValues={{
+                externalId: server.externalId || '',
+                name: server.name,
+                ownerId: server.userId,
+                limits: {
+                    memory: server.limits.memory,
+                    swap: server.limits.swap,
+                    disk: server.limits.disk,
+                    io: server.limits.io,
+                    cpu: server.limits.cpu,
+                    threads: server.limits.threads || '',
+                    // This value is inverted to have the switch be on when the
+                    // OOM Killer is enabled, rather than when disabled.
+                    oomDisabled: !server.limits.oomDisabled,
+                },
+                featureLimits: {
+                    allocations: server.featureLimits.allocations,
+                    backups: server.featureLimits.backups,
+                    databases: server.featureLimits.databases,
+                },
+                allocationId: server.allocationId,
+                addAllocations: [] as number[],
+                removeAllocations: [] as number[],
+            }}
+            validationSchema={object().shape({})}
+        >
+            {({ isSubmitting, isValid }) => (
+                <Form>
+                    <div css={tw`grid grid-cols-1 md:grid-cols-2 gap-y-6 gap-x-8 mb-16`}>
+                        <div css={tw`grid grid-cols-1 gap-y-6`}>
+                            <BaseSettingsBox />
+                            <FeatureLimitsBox />
+                            <NetworkingBox />
+                        </div>
+                        <div css={tw`flex flex-col`}>
+                            <ServerResourceBox />
+                            <div css={tw`bg-neutral-700 rounded shadow-md px-4 xl:px-5 py-4 mt-6`}>
+                                <div css={tw`flex flex-row`}>
+                                    <ServerDeleteButton />
+                                    <Button
+                                        type="submit"
+                                        size="small"
+                                        css={tw`ml-auto`}
+                                        disabled={isSubmitting || !isValid}
+                                    >
+                                        Save Changes
+                                    </Button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </Form>
+            )}
+        </Formik>
+    );
+};

resources/scripts/components/admin/servers/ServerStartupContainer.tsx

@@ -0,0 +1,258 @@
+import type { Actions } from 'easy-peasy';
+import { useStoreActions } from 'easy-peasy';
+import type { FormikHelpers } from 'formik';
+import { Form, Formik, useField, useFormikContext } from 'formik';
+import { useEffect, useState } from 'react';
+import tw from 'twin.macro';
+import { object } from 'yup';
+
+import type { InferModel } from '@/api/admin';
+import type { Egg, EggVariable } from '@/api/admin/egg';
+import { getEgg } from '@/api/admin/egg';
+import type { Server } from '@/api/admin/server';
+import { useServerFromRoute } from '@/api/admin/server';
+import type { Values } from '@/api/admin/servers/updateServerStartup';
+import updateServerStartup from '@/api/admin/servers/updateServerStartup';
+import EggSelect from '@/components/admin/servers/EggSelect';
+import NestSelector from '@/components/admin/servers/NestSelector';
+import FormikSwitch from '@/components/elements/FormikSwitch';
+import Button from '@/components/elements/Button';
+import Input from '@/components/elements/Input';
+import AdminBox from '@/components/admin/AdminBox';
+import Field from '@/components/elements/Field';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+import Label from '@/components/elements/Label';
+import type { ApplicationStore } from '@/state';
+
+function ServerStartupLineContainer({ egg, server }: { egg: Egg | null; server: Server }) {
+    const { isSubmitting, setFieldValue } = useFormikContext();
+
+    useEffect(() => {
+        if (egg === null) {
+            return;
+        }
+
+        if (server.eggId === egg.id) {
+            setFieldValue('image', server.container.image);
+            setFieldValue('startup', server.container.startup || '');
+            return;
+        }
+
+        // Whenever the egg is changed, set the server's startup command to the egg's default.
+        setFieldValue('image', egg.dockerImages.length > 0 ? egg.dockerImages[0] : '');
+        setFieldValue('startup', '');
+    }, [egg]);
+
+    return (
+        <AdminBox title={'Startup Command'} css={tw`relative w-full`}>
+            <SpinnerOverlay visible={isSubmitting} />
+
+            <div css={tw`mb-6`}>
+                <Field
+                    id={'startup'}
+                    name={'startup'}
+                    label={'Startup Command'}
+                    type={'text'}
+                    description={
+                        "Edit your server's startup command here. The following variables are available by default: {{SERVER_MEMORY}}, {{SERVER_IP}}, and {{SERVER_PORT}}."
+                    }
+                    placeholder={egg?.startup || ''}
+                />
+            </div>
+
+            <div>
+                <Label>Default Startup Command</Label>
+                <Input value={egg?.startup || ''} readOnly />
+            </div>
+        </AdminBox>
+    );
+}
+
+export function ServerServiceContainer({
+    egg,
+    setEgg,
+    nestId: _nestId,
+}: {
+    egg: Egg | null;
+    setEgg: (value: Egg | null) => void;
+    nestId: number;
+}) {
+    const { isSubmitting } = useFormikContext();
+
+    const [nestId, setNestId] = useState<number>(_nestId);
+
+    return (
+        <AdminBox title={'Service Configuration'} isLoading={isSubmitting} css={tw`w-full`}>
+            <div css={tw`mb-6`}>
+                <NestSelector selectedNestId={nestId} onNestSelect={setNestId} />
+            </div>
+            <div css={tw`mb-6`}>
+                <EggSelect nestId={nestId} selectedEggId={egg?.id} onEggSelect={setEgg} />
+            </div>
+            <div css={tw`bg-neutral-800 border border-neutral-900 shadow-inner p-4 rounded`}>
+                <FormikSwitch name={'skipScripts'} label={'Skip Egg Install Script'} description={'Soon™'} />
+            </div>
+        </AdminBox>
+    );
+}
+
+export function ServerImageContainer() {
+    const { isSubmitting } = useFormikContext();
+
+    return (
+        <AdminBox title={'Image Configuration'} css={tw`relative w-full`}>
+            <SpinnerOverlay visible={isSubmitting} />
+
+            <div css={tw`md:w-full md:flex md:flex-col`}>
+                <div>
+                    <Field id={'image'} name={'image'} label={'Docker Image'} type={'text'} />
+                </div>
+            </div>
+        </AdminBox>
+    );
+}
+
+export function ServerVariableContainer({ variable, value }: { variable: EggVariable; value?: string }) {
+    const key = 'environment.' + variable.environmentVariable;
+
+    const [, , { setValue, setTouched }] = useField<string | undefined>(key);
+
+    const { isSubmitting } = useFormikContext();
+
+    useEffect(() => {
+        if (value === undefined) {
+            return;
+        }
+
+        setValue(value);
+        setTouched(true);
+    }, [value]);
+
+    return (
+        <AdminBox css={tw`relative w-full`} title={<p css={tw`text-sm uppercase`}>{variable.name}</p>}>
+            <SpinnerOverlay visible={isSubmitting} />
+
+            <Field
+                id={key}
+                name={key}
+                type={'text'}
+                placeholder={variable.defaultValue}
+                description={variable.description}
+            />
+        </AdminBox>
+    );
+}
+
+function ServerStartupForm({
+    egg,
+    setEgg,
+    server,
+}: {
+    egg: Egg | null;
+    setEgg: (value: Egg | null) => void;
+    server: Server;
+}) {
+    const {
+        isSubmitting,
+        isValid,
+        values: { environment },
+    } = useFormikContext<Values>();
+
+    return (
+        <Form>
+            <div css={tw`flex flex-col mb-16`}>
+                <div css={tw`flex flex-row mb-6`}>
+                    <ServerStartupLineContainer egg={egg} server={server} />
+                </div>
+
+                <div css={tw`grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6 mb-6`}>
+                    <div css={tw`flex`}>
+                        <ServerServiceContainer egg={egg} setEgg={setEgg} nestId={server.nestId} />
+                    </div>
+
+                    <div css={tw`flex`}>
+                        <ServerImageContainer />
+                    </div>
+                </div>
+
+                <div css={tw`grid grid-cols-1 md:grid-cols-2 gap-y-6 gap-x-8`}>
+                    {/* This ensures that no variables are rendered unless the environment has a value for the variable. */}
+                    {egg?.relationships.variables
+                        ?.filter(v => Object.keys(environment).find(e => e === v.environmentVariable) !== undefined)
+                        .map((v, i) => (
+                            <ServerVariableContainer
+                                key={i}
+                                variable={v}
+                                value={
+                                    server.relationships.variables?.find(
+                                        v2 => v.eggId === v2.eggId && v.environmentVariable === v2.environmentVariable,
+                                    )?.serverValue
+                                }
+                            />
+                        ))}
+                </div>
+
+                <div css={tw`bg-neutral-700 rounded shadow-md py-2 pr-6 mt-6`}>
+                    <div css={tw`flex flex-row`}>
+                        <Button type="submit" size="small" css={tw`ml-auto`} disabled={isSubmitting || !isValid}>
+                            Save Changes
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        </Form>
+    );
+}
+
+export default () => {
+    const { data: server } = useServerFromRoute();
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions(
+        (actions: Actions<ApplicationStore>) => actions.flashes,
+    );
+    const [egg, setEgg] = useState<InferModel<typeof getEgg> | null>(null);
+
+    useEffect(() => {
+        if (!server) return;
+
+        getEgg(server.eggId)
+            .then(egg => setEgg(egg))
+            .catch(error => console.error(error));
+    }, [server?.eggId]);
+
+    if (!server) return null;
+
+    const submit = (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
+        clearFlashes('server');
+
+        updateServerStartup(server.id, values)
+            // .then(s => {
+            //     mutate(data => { ...data, ...s });
+            // })
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'server', error });
+            })
+            .then(() => setSubmitting(false));
+    };
+
+    return (
+        <Formik
+            onSubmit={submit}
+            initialValues={{
+                startup: server.container.startup || '',
+                environment: [] as Record<string, any>,
+                image: server.container.image,
+                eggId: server.eggId,
+                skipScripts: false,
+            }}
+            validationSchema={object().shape({})}
+        >
+            <ServerStartupForm
+                egg={egg}
+                // @ts-ignore
+                setEgg={setEgg}
+                server={server}
+            />
+        </Formik>
+    );
+};

resources/scripts/components/admin/servers/ServersContainer.tsx

@@ -0,0 +1,36 @@
+import { NavLink } from 'react-router-dom';
+import tw from 'twin.macro';
+
+import FlashMessageRender from '@/components/FlashMessageRender';
+import AdminContentBlock from '@/components/admin/AdminContentBlock';
+import ServersTable from '@/components/admin/servers/ServersTable';
+import Button from '@/components/elements/Button';
+
+function ServersContainer() {
+    return (
+        <AdminContentBlock title={'Servers'}>
+            <div css={tw`w-full flex flex-row items-center mb-8`}>
+                <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
+                    <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Servers</h2>
+                    <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>
+                        All servers available on the system.
+                    </p>
+                </div>
+
+                <div css={tw`flex ml-auto pl-4`}>
+                    <NavLink to={`/admin/servers/new`}>
+                        <Button type={'button'} size={'large'} css={tw`h-10 px-4 py-0 whitespace-nowrap`}>
+                            New Server
+                        </Button>
+                    </NavLink>
+                </div>
+            </div>
+
+            <FlashMessageRender byKey={'servers'} css={tw`mb-4`} />
+
+            <ServersTable />
+        </AdminContentBlock>
+    );
+}
+
+export default ServersContainer;

resources/scripts/components/admin/servers/ServersTable.tsx

@@ -0,0 +1,236 @@
+import type { ChangeEvent } from 'react';
+import { useContext, useEffect } from 'react';
+import { NavLink } from 'react-router-dom';
+import tw from 'twin.macro';
+
+import type { Filters } from '@/api/admin/servers/getServers';
+import getServers, { Context as ServersContext } from '@/api/admin/servers/getServers';
+import AdminCheckbox from '@/components/admin/AdminCheckbox';
+import AdminTable, {
+    ContentWrapper,
+    Loading,
+    NoItems,
+    Pagination,
+    TableBody,
+    TableHead,
+    TableHeader,
+    useTableHooks,
+} from '@/components/admin/AdminTable';
+import CopyOnClick from '@/components/elements/CopyOnClick';
+import { AdminContext } from '@/state/admin';
+import useFlash from '@/plugins/useFlash';
+
+function RowCheckbox({ id }: { id: number }) {
+    const isChecked = AdminContext.useStoreState(state => state.servers.selectedServers.indexOf(id) >= 0);
+    const appendSelectedServer = AdminContext.useStoreActions(actions => actions.servers.appendSelectedServer);
+    const removeSelectedServer = AdminContext.useStoreActions(actions => actions.servers.removeSelectedServer);
+
+    return (
+        <AdminCheckbox
+            name={id.toString()}
+            checked={isChecked}
+            onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                if (e.currentTarget.checked) {
+                    appendSelectedServer(id);
+                } else {
+                    removeSelectedServer(id);
+                }
+            }}
+        />
+    );
+}
+
+interface Props {
+    filters?: Filters;
+}
+
+function ServersTable({ filters }: Props) {
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+
+    const { page, setPage, setFilters, sort, setSort, sortDirection } = useContext(ServersContext);
+    const { data: servers, error, isValidating } = getServers(['node', 'user']);
+
+    const length = servers?.items?.length || 0;
+
+    const setSelectedServers = AdminContext.useStoreActions(actions => actions.servers.setSelectedServers);
+    const selectedServerLength = AdminContext.useStoreState(state => state.servers.selectedServers.length);
+
+    const onSelectAllClick = (e: ChangeEvent<HTMLInputElement>) => {
+        setSelectedServers(e.currentTarget.checked ? servers?.items?.map(server => server.id) || [] : []);
+    };
+
+    const onSearch = (query: string): Promise<void> => {
+        return new Promise(resolve => {
+            if (query.length < 2) {
+                setFilters(filters || null);
+            } else {
+                setFilters({ ...filters, name: query });
+            }
+            return resolve();
+        });
+    };
+
+    useEffect(() => {
+        setSelectedServers([]);
+    }, [page]);
+
+    useEffect(() => {
+        if (!error) {
+            clearFlashes('servers');
+            return;
+        }
+
+        clearAndAddHttpError({ key: 'servers', error });
+    }, [error]);
+
+    return (
+        <AdminTable>
+            <ContentWrapper
+                checked={selectedServerLength === (length === 0 ? -1 : length)}
+                onSelectAllClick={onSelectAllClick}
+                onSearch={onSearch}
+            >
+                <Pagination data={servers} onPageSelect={setPage}>
+                    <div css={tw`overflow-x-auto`}>
+                        <table css={tw`w-full table-auto`}>
+                            <TableHead>
+                                <TableHeader
+                                    name={'Identifier'}
+                                    direction={sort === 'uuidShort' ? (sortDirection ? 1 : 2) : null}
+                                    onClick={() => setSort('uuidShort')}
+                                />
+                                <TableHeader
+                                    name={'Name'}
+                                    direction={sort === 'name' ? (sortDirection ? 1 : 2) : null}
+                                    onClick={() => setSort('name')}
+                                />
+                                <TableHeader
+                                    name={'Owner'}
+                                    direction={sort === 'owner_id' ? (sortDirection ? 1 : 2) : null}
+                                    onClick={() => setSort('owner_id')}
+                                />
+                                <TableHeader
+                                    name={'Node'}
+                                    direction={sort === 'node_id' ? (sortDirection ? 1 : 2) : null}
+                                    onClick={() => setSort('node_id')}
+                                />
+                                <TableHeader
+                                    name={'Status'}
+                                    direction={sort === 'status' ? (sortDirection ? 1 : 2) : null}
+                                    onClick={() => setSort('status')}
+                                />
+                            </TableHead>
+
+                            <TableBody>
+                                {servers !== undefined &&
+                                    !error &&
+                                    !isValidating &&
+                                    length > 0 &&
+                                    servers.items.map(server => (
+                                        <tr key={server.id} css={tw`h-14 hover:bg-neutral-600`}>
+                                            <td css={tw`pl-6`}>
+                                                <RowCheckbox id={server.id} />
+                                            </td>
+
+                                            <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                <CopyOnClick text={server.identifier}>
+                                                    <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>
+                                                        {server.identifier}
+                                                    </code>
+                                                </CopyOnClick>
+                                            </td>
+
+                                            <td css={tw`px-6 text-sm text-left whitespace-nowrap`}>
+                                                <NavLink
+                                                    to={`/admin/servers/${server.id}`}
+                                                    css={tw`text-primary-400 hover:text-primary-300`}
+                                                >
+                                                    {server.name}
+                                                </NavLink>
+                                            </td>
+
+                                            {/* TODO: Have permission check for displaying user information. */}
+                                            <td css={tw`px-6 text-sm text-left whitespace-nowrap`}>
+                                                <NavLink
+                                                    to={`/admin/users/${server.relations.user?.id}`}
+                                                    css={tw`text-primary-400 hover:text-primary-300`}
+                                                >
+                                                    <div css={tw`text-sm text-neutral-200`}>
+                                                        {server.relations.user?.email}
+                                                    </div>
+
+                                                    <div css={tw`text-sm text-neutral-400`}>
+                                                        {server.relations.user?.uuid.split('-')[0]}
+                                                    </div>
+                                                </NavLink>
+                                            </td>
+
+                                            {/* TODO: Have permission check for displaying node information. */}
+                                            <td css={tw`px-6 text-sm text-left whitespace-nowrap`}>
+                                                <NavLink
+                                                    to={`/admin/nodes/${server.relations.node?.id}`}
+                                                    css={tw`text-primary-400 hover:text-primary-300`}
+                                                >
+                                                    <div css={tw`text-sm text-neutral-200`}>
+                                                        {server.relations.node?.name}
+                                                    </div>
+
+                                                    <div css={tw`text-sm text-neutral-400`}>
+                                                        {server.relations.node?.fqdn}
+                                                    </div>
+                                                </NavLink>
+                                            </td>
+
+                                            <td css={tw`px-6 whitespace-nowrap`}>
+                                                {server.status === 'installing' ? (
+                                                    <span
+                                                        css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-yellow-200 text-yellow-800`}
+                                                    >
+                                                        Installing
+                                                    </span>
+                                                ) : server.status === 'transferring' ? (
+                                                    <span
+                                                        css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-yellow-200 text-yellow-800`}
+                                                    >
+                                                        Transferring
+                                                    </span>
+                                                ) : server.status === 'suspended' ? (
+                                                    <span
+                                                        css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-red-200 text-red-800`}
+                                                    >
+                                                        Suspended
+                                                    </span>
+                                                ) : (
+                                                    <span
+                                                        css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-green-100 text-green-800`}
+                                                    >
+                                                        Active
+                                                    </span>
+                                                )}
+                                            </td>
+                                        </tr>
+                                    ))}
+                            </TableBody>
+                        </table>
+
+                        {servers === undefined || (error && isValidating) ? (
+                            <Loading />
+                        ) : length < 1 ? (
+                            <NoItems />
+                        ) : null}
+                    </div>
+                </Pagination>
+            </ContentWrapper>
+        </AdminTable>
+    );
+}
+
+export default ({ filters }: Props) => {
+    const hooks = useTableHooks<Filters>(filters);
+
+    return (
+        <ServersContext.Provider value={hooks}>
+            <ServersTable />
+        </ServersContext.Provider>
+    );
+};

resources/scripts/components/admin/servers/settings/BaseSettingsBox.tsx

@@ -0,0 +1,31 @@
+import { faCogs } from '@fortawesome/free-solid-svg-icons';
+import { useFormikContext } from 'formik';
+import type { ReactNode } from 'react';
+import tw from 'twin.macro';
+
+import { useServerFromRoute } from '@/api/admin/server';
+import AdminBox from '@/components/admin/AdminBox';
+import OwnerSelect from '@/components/admin/servers/OwnerSelect';
+import Field from '@/components/elements/Field';
+
+export default ({ children }: { children?: ReactNode }) => {
+    const { data: server } = useServerFromRoute();
+    const { isSubmitting } = useFormikContext();
+
+    return (
+        <AdminBox icon={faCogs} title={'Settings'} isLoading={isSubmitting}>
+            <div css={tw`grid grid-cols-1 xl:grid-cols-2 gap-4 lg:gap-6`}>
+                <Field
+                    id={'name'}
+                    name={'name'}
+                    label={'Server Name'}
+                    type={'text'}
+                    placeholder={'My Amazing Server'}
+                />
+                <Field id={'externalId'} name={'externalId'} label={'External Identifier'} type={'text'} />
+                <OwnerSelect selected={server?.relationships.user} />
+                {children}
+            </div>
+        </AdminBox>
+    );
+};

resources/scripts/components/admin/servers/settings/FeatureLimitsBox.tsx

@@ -0,0 +1,38 @@
+import { faConciergeBell } from '@fortawesome/free-solid-svg-icons';
+import { useFormikContext } from 'formik';
+import tw from 'twin.macro';
+
+import AdminBox from '@/components/admin/AdminBox';
+import Field from '@/components/elements/Field';
+
+export default () => {
+    const { isSubmitting } = useFormikContext();
+
+    return (
+        <AdminBox icon={faConciergeBell} title={'Feature Limits'} isLoading={isSubmitting}>
+            <div css={tw`grid grid-cols-1 xl:grid-cols-2 gap-4 lg:gap-6`}>
+                <Field
+                    id={'featureLimits.allocations'}
+                    name={'featureLimits.allocations'}
+                    label={'Allocation Limit'}
+                    type={'number'}
+                    description={'The total number of allocations a user is allowed to create for this server.'}
+                />
+                <Field
+                    id={'featureLimits.backups'}
+                    name={'featureLimits.backups'}
+                    label={'Backup Limit'}
+                    type={'number'}
+                    description={'The total number of backups that can be created for this server.'}
+                />
+                <Field
+                    id={'featureLimits.databases'}
+                    name={'featureLimits.databases'}
+                    label={'Database Limit'}
+                    type={'number'}
+                    description={'The total number of databases a user is allowed to create for this server.'}
+                />
+            </div>
+        </AdminBox>
+    );
+};

resources/scripts/components/admin/servers/settings/NetworkingBox.tsx

@@ -0,0 +1,68 @@
+import { faNetworkWired } from '@fortawesome/free-solid-svg-icons';
+import { useFormikContext } from 'formik';
+import tw from 'twin.macro';
+
+import getAllocations from '@/api/admin/nodes/getAllocations';
+import { useServerFromRoute } from '@/api/admin/server';
+import AdminBox from '@/components/admin/AdminBox';
+import Label from '@/components/elements/Label';
+import Select from '@/components/elements/Select';
+import type { Option } from '@/components/elements/SelectField';
+import SelectField, { AsyncSelectField } from '@/components/elements/SelectField';
+
+export default () => {
+    const { isSubmitting } = useFormikContext();
+    const { data: server } = useServerFromRoute();
+
+    const loadOptions = async (inputValue: string, callback: (options: Option[]) => void) => {
+        if (!server) {
+            // eslint-disable-next-line node/no-callback-literal
+            callback([] as Option[]);
+            return;
+        }
+
+        const allocations = await getAllocations(server.nodeId, { ip: inputValue, server_id: '0' });
+
+        callback(
+            allocations.map(a => {
+                return { value: a.id.toString(), label: a.getDisplayText() };
+            }),
+        );
+    };
+
+    return (
+        <AdminBox icon={faNetworkWired} title={'Networking'} isLoading={isSubmitting}>
+            <div css={tw`grid grid-cols-1 gap-4 lg:gap-6`}>
+                <div>
+                    <Label htmlFor={'allocationId'}>Primary Allocation</Label>
+                    <Select id={'allocationId'} name={'allocationId'}>
+                        {server?.relationships.allocations?.map(a => (
+                            <option key={a.id} value={a.id}>
+                                {a.getDisplayText()}
+                            </option>
+                        ))}
+                    </Select>
+                </div>
+                <AsyncSelectField
+                    id={'addAllocations'}
+                    name={'addAllocations'}
+                    label={'Add Allocations'}
+                    loadOptions={loadOptions}
+                    isMulti
+                />
+                <SelectField
+                    id={'removeAllocations'}
+                    name={'removeAllocations'}
+                    label={'Remove Allocations'}
+                    options={
+                        server?.relationships.allocations?.map(a => {
+                            return { value: a.id.toString(), label: a.getDisplayText() };
+                        }) || []
+                    }
+                    isMulti
+                    isSearchable
+                />
+            </div>
+        </AdminBox>
+    );
+};

resources/scripts/components/admin/servers/settings/ServerResourceBox.tsx

@@ -0,0 +1,73 @@
+import { faBalanceScale } from '@fortawesome/free-solid-svg-icons';
+import { useFormikContext } from 'formik';
+import tw from 'twin.macro';
+
+import AdminBox from '@/components/admin/AdminBox';
+import Field from '@/components/elements/Field';
+import FormikSwitch from '@/components/elements/FormikSwitch';
+
+export default () => {
+    const { isSubmitting } = useFormikContext();
+
+    return (
+        <AdminBox icon={faBalanceScale} title={'Resources'} isLoading={isSubmitting}>
+            <div css={tw`grid grid-cols-1 xl:grid-cols-2 gap-4 lg:gap-6`}>
+                <Field
+                    id={'limits.cpu'}
+                    name={'limits.cpu'}
+                    label={'CPU Limit'}
+                    type={'text'}
+                    description={
+                        'Each thread on the system is considered to be 100%. Setting this value to 0 will allow the server to use CPU time without restriction.'
+                    }
+                />
+                <Field
+                    id={'limits.threads'}
+                    name={'limits.threads'}
+                    label={'CPU Pinning'}
+                    type={'text'}
+                    description={
+                        'Advanced: Enter the specific CPU cores that this server can run on, or leave blank to allow all cores. This can be a single number, and or a comma seperated list, and or a dashed range. Example: 0, 0-1,3, or 0,1,3,4.  It is recommended to leave this value blank and let the CPU handle balancing the load.'
+                    }
+                />
+                <Field
+                    id={'limits.memory'}
+                    name={'limits.memory'}
+                    label={'Memory Limit'}
+                    type={'number'}
+                    description={
+                        'The maximum amount of memory allowed for this container. Setting this to 0 will allow unlimited memory in a container.'
+                    }
+                />
+                <Field id={'limits.swap'} name={'limits.swap'} label={'Swap Limit'} type={'number'} />
+                <Field
+                    id={'limits.disk'}
+                    name={'limits.disk'}
+                    label={'Disk Limit'}
+                    type={'number'}
+                    description={
+                        'This server will not be allowed to boot if it is using more than this amount of space. If a server goes over this limit while running it will be safely stopped and locked until enough space is available. Set to 0 to allow unlimited disk usage.'
+                    }
+                />
+                <Field
+                    id={'limits.io'}
+                    name={'limits.io'}
+                    label={'Block IO Proportion'}
+                    type={'number'}
+                    description={
+                        'Advanced: The IO performance of this server relative to other running containers on the system. Value should be between 10 and 1000.'
+                    }
+                />
+                <div css={tw`xl:col-span-2 bg-neutral-800 border border-neutral-900 shadow-inner p-4 rounded`}>
+                    <FormikSwitch
+                        name={'limits.oomDisabled'}
+                        label={'Out of Memory Killer'}
+                        description={
+                            'Enabling the Out of Memory Killer may cause server processes to exit unexpectedly.'
+                        }
+                    />
+                </div>
+            </div>
+        </AdminBox>
+    );
+};

resources/scripts/components/admin/settings/GeneralSettings.tsx

@@ -0,0 +1,37 @@
+import { Form, Formik } from 'formik';
+import tw from 'twin.macro';
+
+import AdminBox from '@/components/admin/AdminBox';
+import Field, { FieldRow } from '@/components/elements/Field';
+
+export default () => {
+    const submit = () => {
+        //
+    };
+
+    return (
+        <Formik onSubmit={submit} initialValues={{}}>
+            <Form>
+                <div css={tw`grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6`}>
+                    <AdminBox title="Branding">
+                        <FieldRow>
+                            <Field id={'appName'} name={'appName'} type={'text'} label={'App Name'} description={''} />
+                        </FieldRow>
+                    </AdminBox>
+
+                    <AdminBox title="Analytics">
+                        <FieldRow>
+                            <Field
+                                id={'googleAnalytics'}
+                                name={'googleAnalytics'}
+                                type={'text'}
+                                label={'Google Analytics'}
+                                description={''}
+                            />
+                        </FieldRow>
+                    </AdminBox>
+                </div>
+            </Form>
+        </Formik>
+    );
+};

resources/scripts/components/admin/settings/MailSettings.tsx

@@ -0,0 +1,102 @@
+import { Form, Formik } from 'formik';
+import tw from 'twin.macro';
+
+import AdminBox from '@/components/admin/AdminBox';
+import Button from '@/components/elements/Button';
+import Field, { FieldRow } from '@/components/elements/Field';
+import Label from '@/components/elements/Label';
+import Select from '@/components/elements/Select';
+
+export default () => {
+    const submit = () => {
+        //
+    };
+
+    return (
+        <Formik
+            onSubmit={submit}
+            initialValues={{
+                smtpHost: 'smtp.example.com',
+                smtpPort: 587,
+                smtpEncryption: 'tls',
+                username: '',
+                password: '',
+                mailFrom: 'no-reply@example.com',
+                mailFromName: 'Pterodactyl Panel',
+            }}
+        >
+            {({ isSubmitting, isValid }) => (
+                <Form>
+                    <AdminBox title="Mail">
+                        <FieldRow css={tw`lg:grid-cols-3`}>
+                            <Field
+                                id={'smtpHost'}
+                                name={'smtpHost'}
+                                type={'text'}
+                                label={'SMTP Host'}
+                                description={''}
+                            />
+                            <Field
+                                id={'smtpPort'}
+                                name={'smtpPort'}
+                                type={'number'}
+                                label={'SMTP Port'}
+                                description={''}
+                            />
+                            <div>
+                                <Label>Encryption</Label>
+                                <Select id={'smtpEncryption'} name={'smtpEncryption'} defaultValue={'tls'}>
+                                    <option value="">None</option>
+                                    <option value="ssl">Secure Sockets Layer (SSL)</option>
+                                    <option value="tls">Transport Layer Security (TLS)</option>
+                                </Select>
+                            </div>
+                        </FieldRow>
+
+                        <FieldRow>
+                            <Field
+                                id={'username'}
+                                name={'username'}
+                                type={'text'}
+                                label={'Username'}
+                                description={''}
+                            />
+                            <Field
+                                id={'password'}
+                                name={'password'}
+                                type={'password'}
+                                label={'Password'}
+                                description={''}
+                            />
+                        </FieldRow>
+
+                        <FieldRow>
+                            <Field
+                                id={'mailFrom'}
+                                name={'mailFrom'}
+                                type={'text'}
+                                label={'Mail From'}
+                                description={''}
+                            />
+                            <Field
+                                id={'mailFromName'}
+                                name={'mailFromName'}
+                                type={'text'}
+                                label={'Mail From Name'}
+                                description={''}
+                            />
+                        </FieldRow>
+                    </AdminBox>
+
+                    <div css={tw`bg-neutral-700 rounded shadow-md px-4 xl:px-5 py-4 mt-6`}>
+                        <div css={tw`flex flex-row`}>
+                            <Button type="submit" size="small" css={tw`ml-auto`} disabled={isSubmitting || !isValid}>
+                                Save Changes
+                            </Button>
+                        </div>
+                    </div>
+                </Form>
+            )}
+        </Formik>
+    );
+};

resources/scripts/components/admin/settings/SettingsContainer.tsx

@@ -0,0 +1,52 @@
+import { AdjustmentsIcon, ChipIcon, CodeIcon, MailIcon, ShieldCheckIcon } from '@heroicons/react/outline';
+import { Route, Routes } from 'react-router-dom';
+import tw from 'twin.macro';
+
+import AdminContentBlock from '@/components/admin/AdminContentBlock';
+import MailSettings from '@/components/admin/settings/MailSettings';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import { SubNavigation, SubNavigationLink } from '@/components/admin/SubNavigation';
+import GeneralSettings from '@/components/admin/settings/GeneralSettings';
+
+export default () => {
+    return (
+        <AdminContentBlock title={'Settings'}>
+            <div css={tw`w-full flex flex-row items-center mb-8`}>
+                <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
+                    <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Settings</h2>
+                    <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>
+                        Configure and manage settings for Pterodactyl.
+                    </p>
+                </div>
+            </div>
+
+            <FlashMessageRender byKey={'admin:settings'} css={tw`mb-4`} />
+
+            <SubNavigation>
+                <SubNavigationLink to="/admin/settings" name="General">
+                    <ChipIcon />
+                </SubNavigationLink>
+                <SubNavigationLink to="/admin/settings/mail" name="Mail">
+                    <MailIcon />
+                </SubNavigationLink>
+                <SubNavigationLink to="/admin/settings/security" name="Security">
+                    <ShieldCheckIcon />
+                </SubNavigationLink>
+                <SubNavigationLink to="/admin/settings/features" name="Features">
+                    <AdjustmentsIcon />
+                </SubNavigationLink>
+                <SubNavigationLink to="/admin/settings/advanced" name="Advanced">
+                    <CodeIcon />
+                </SubNavigationLink>
+            </SubNavigation>
+
+            <Routes>
+                <Route path="/admin/settings" element={<GeneralSettings />} />
+                <Route path="/admin/settings/mail" element={<MailSettings />} />
+                <Route path="/admin/settings/security" element={<p>Security</p>} />
+                <Route path="/admin/settings/features" element={<p>Features</p>} />
+                <Route path="/admin/settings/advanced" element={<p>Advanced</p>} />
+            </Routes>
+        </AdminContentBlock>
+    );
+};

resources/scripts/components/admin/users/NewUserContainer.tsx

@@ -0,0 +1,49 @@
+import type { Actions } from 'easy-peasy';
+import { useStoreActions } from 'easy-peasy';
+import type { FormikHelpers } from 'formik';
+import { useNavigate } from 'react-router-dom';
+import tw from 'twin.macro';
+
+import type { UpdateUserValues } from '@/api/admin/users';
+import { createUser } from '@/api/admin/users';
+import AdminContentBlock from '@/components/admin/AdminContentBlock';
+import UserForm from '@/components/admin/users/UserForm';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import type { ApplicationStore } from '@/state';
+
+export default () => {
+    const navigate = useNavigate();
+
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions(
+        (actions: Actions<ApplicationStore>) => actions.flashes,
+    );
+
+    const submit = (values: UpdateUserValues, { setSubmitting }: FormikHelpers<UpdateUserValues>) => {
+        clearFlashes('user:create');
+
+        createUser(values)
+            .then(user => navigate(`/admin/users/${user.id}`))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'user:create', error });
+            })
+            .then(() => setSubmitting(false));
+    };
+
+    return (
+        <AdminContentBlock title={'New User'}>
+            <div css={tw`w-full flex flex-row items-center mb-8`}>
+                <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
+                    <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>New User</h2>
+                    <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>
+                        Add a new user to the panel.
+                    </p>
+                </div>
+            </div>
+
+            <FlashMessageRender byKey={'user:create'} css={tw`mb-4`} />
+
+            <UserForm title={'Create User'} onSubmit={submit} role={null} />
+        </AdminContentBlock>
+    );
+};

resources/scripts/components/admin/users/RoleSelect.tsx

@@ -0,0 +1,56 @@
+import { useFormikContext } from 'formik';
+import { useState } from 'react';
+
+import { searchRoles } from '@/api/admin/roles';
+import SearchableSelect, { Option } from '@/components/elements/SearchableSelect';
+import type { UserRole } from '@definitions/admin';
+
+export default ({ selected }: { selected: UserRole | null }) => {
+    const context = useFormikContext();
+
+    const [role, setRole] = useState<UserRole | null>(selected);
+    const [roles, setRoles] = useState<UserRole[] | null>(null);
+
+    const onSearch = (query: string): Promise<void> => {
+        return new Promise((resolve, reject) => {
+            searchRoles({ name: query })
+                .then(roles => {
+                    setRoles(roles);
+                    return resolve();
+                })
+                .catch(reject);
+        });
+    };
+
+    const onSelect = (role: UserRole | null) => {
+        setRole(role);
+        context.setFieldValue('adminRoleId', role?.id || null);
+    };
+
+    const getSelectedText = (role: UserRole | null): string | undefined => {
+        return role?.name;
+    };
+
+    return (
+        <SearchableSelect
+            id={'adminRoleId'}
+            name={'adminRoleId'}
+            label={'Role'}
+            placeholder={'Select a role...'}
+            items={roles}
+            selected={role}
+            setSelected={setRole}
+            setItems={setRoles}
+            onSearch={onSearch}
+            onSelect={onSelect}
+            getSelectedText={getSelectedText}
+            nullable
+        >
+            {roles?.map(d => (
+                <Option key={d.id} selectId={'adminRoleId'} id={d.id} item={d} active={d.id === role?.id}>
+                    {d.name}
+                </Option>
+            ))}
+        </SearchableSelect>
+    );
+};

resources/scripts/components/admin/users/UserAboutContainer.tsx

@@ -0,0 +1,62 @@
+import type { Actions } from 'easy-peasy';
+import { useStoreActions } from 'easy-peasy';
+import type { FormikHelpers } from 'formik';
+import { useNavigate } from 'react-router-dom';
+
+import type { UpdateUserValues } from '@/api/admin/users';
+import { updateUser } from '@/api/admin/users';
+import UserDeleteButton from '@/components/admin/users/UserDeleteButton';
+import UserForm from '@/components/admin/users/UserForm';
+import { Context } from '@/components/admin/users/UserRouter';
+import type { ApplicationStore } from '@/state';
+import tw from 'twin.macro';
+
+const UserAboutContainer = () => {
+    const navigate = useNavigate();
+
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions(
+        (actions: Actions<ApplicationStore>) => actions.flashes,
+    );
+
+    const user = Context.useStoreState(state => state.user);
+    const setUser = Context.useStoreActions(actions => actions.setUser);
+
+    if (user === undefined) {
+        return <></>;
+    }
+
+    const submit = (values: UpdateUserValues, { setSubmitting }: FormikHelpers<UpdateUserValues>) => {
+        clearFlashes('user');
+
+        updateUser(user.id, values)
+            .then(() => setUser({ ...user, ...values }))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'user', error });
+            })
+            .then(() => setSubmitting(false));
+    };
+
+    return (
+        <UserForm
+            title={'Edit User'}
+            initialValues={{
+                externalId: user.externalId,
+                username: user.username,
+                email: user.email,
+                adminRoleId: user.adminRoleId,
+                password: '',
+                rootAdmin: user.isRootAdmin,
+            }}
+            onSubmit={submit}
+            uuid={user.uuid}
+            role={user.relationships.role || null}
+        >
+            <div css={tw`flex`}>
+                <UserDeleteButton userId={user.id} onDeleted={() => navigate('/admin/users')} />
+            </div>
+        </UserForm>
+    );
+};
+
+export default UserAboutContainer;

resources/scripts/components/admin/users/UserDeleteButton.tsx

@@ -0,0 +1,73 @@
+import type { Actions } from 'easy-peasy';
+import { useStoreActions } from 'easy-peasy';
+import { useState } from 'react';
+import tw from 'twin.macro';
+
+import { deleteUser } from '@/api/admin/users';
+import Button from '@/components/elements/Button';
+import ConfirmationModal from '@/components/elements/ConfirmationModal';
+import type { ApplicationStore } from '@/state';
+
+interface Props {
+    userId: number;
+    onDeleted: () => void;
+}
+
+export default ({ userId, onDeleted }: Props) => {
+    const [visible, setVisible] = useState(false);
+    const [loading, setLoading] = useState(false);
+
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions(
+        (actions: Actions<ApplicationStore>) => actions.flashes,
+    );
+
+    const onDelete = () => {
+        setLoading(true);
+        clearFlashes('user');
+
+        deleteUser(userId)
+            .then(() => {
+                setLoading(false);
+                onDeleted();
+            })
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'user', error });
+
+                setLoading(false);
+                setVisible(false);
+            });
+    };
+
+    return (
+        <>
+            <ConfirmationModal
+                visible={visible}
+                title={'Delete user?'}
+                buttonText={'Yes, delete user'}
+                onConfirmed={onDelete}
+                showSpinnerOverlay={loading}
+                onModalDismissed={() => setVisible(false)}
+            >
+                Are you sure you want to delete this user?
+            </ConfirmationModal>
+
+            <Button type={'button'} size={'xsmall'} color={'red'} onClick={() => setVisible(true)}>
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    css={tw`h-5 w-5`}
+                >
+                    <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                    />
+                </svg>
+            </Button>
+        </>
+    );
+};

resources/scripts/components/admin/users/UserForm.tsx

@@ -0,0 +1,148 @@
+import type { Action } from 'easy-peasy';
+import { action, createContextStore } from 'easy-peasy';
+import type { FormikHelpers } from 'formik';
+import { Form, Formik } from 'formik';
+import tw from 'twin.macro';
+import { bool, object, string } from 'yup';
+
+import type { UpdateUserValues } from '@/api/admin/users';
+import AdminBox from '@/components/admin/AdminBox';
+import RoleSelect from '@/components/admin/users/RoleSelect';
+import CopyOnClick from '@/components/elements/CopyOnClick';
+import FormikSwitch from '@/components/elements/FormikSwitch';
+import Input from '@/components/elements/Input';
+import Label from '@/components/elements/Label';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+import Button from '@/components/elements/Button';
+import Field, { FieldRow } from '@/components/elements/Field';
+import type { User, UserRole } from '@definitions/admin';
+
+interface ctx {
+    user: User | undefined;
+    setUser: Action<ctx, User | undefined>;
+}
+
+export const Context = createContextStore<ctx>({
+    user: undefined,
+
+    setUser: action((state, payload) => {
+        state.user = payload;
+    }),
+});
+
+export interface Params {
+    title: string;
+    initialValues?: UpdateUserValues;
+    children?: React.ReactNode;
+
+    onSubmit: (values: UpdateUserValues, helpers: FormikHelpers<UpdateUserValues>) => void;
+
+    uuid?: string;
+    role: UserRole | null;
+}
+
+export default function UserForm({ title, initialValues, children, onSubmit, uuid, role }: Params) {
+    const submit = (values: UpdateUserValues, helpers: FormikHelpers<UpdateUserValues>) => {
+        onSubmit(values, helpers);
+    };
+
+    if (!initialValues) {
+        initialValues = {
+            externalId: '',
+            username: '',
+            email: '',
+            password: '',
+            adminRoleId: null,
+            rootAdmin: false,
+        };
+    }
+
+    return (
+        <Formik
+            onSubmit={submit}
+            initialValues={initialValues}
+            validationSchema={object().shape({
+                username: string().min(1).max(32),
+                email: string(),
+                rootAdmin: bool().required(),
+            })}
+        >
+            {({ isSubmitting, isValid }) => (
+                <>
+                    <AdminBox title={title} css={tw`relative`}>
+                        <SpinnerOverlay visible={isSubmitting} />
+
+                        <Form css={tw`mb-0`}>
+                            <FieldRow>
+                                {uuid && (
+                                    <div>
+                                        <Label>UUID</Label>
+                                        <CopyOnClick text={uuid}>
+                                            <Input type={'text'} value={uuid} readOnly />
+                                        </CopyOnClick>
+                                    </div>
+                                )}
+                                <Field
+                                    id={'externalId'}
+                                    name={'externalId'}
+                                    label={'External ID'}
+                                    type={'text'}
+                                    description={
+                                        'Used by external integrations, this field should not be modified unless you know what you are doing.'
+                                    }
+                                />
+                                <Field
+                                    id={'username'}
+                                    name={'username'}
+                                    label={'Username'}
+                                    type={'text'}
+                                    description={"The user's username, what else would go here?"}
+                                />
+                                <Field
+                                    id={'email'}
+                                    name={'email'}
+                                    label={'Email Address'}
+                                    type={'email'}
+                                    description={"The user's email address, what else would go here?"}
+                                />
+                                <Field
+                                    id={'password'}
+                                    name={'password'}
+                                    label={'Password'}
+                                    type={'password'}
+                                    placeholder={'••••••••'}
+                                    autoComplete={'new-password'}
+                                    /* TODO: Change description depending on if user is being created or updated. */
+                                    description={
+                                        'Leave empty to email the user a link where they will be required to set a password.'
+                                    }
+                                />
+                                <RoleSelect selected={role} />
+                            </FieldRow>
+
+                            {/* TODO: Remove toggle once role permissions are implemented. */}
+                            <div css={tw`w-full flex flex-row mb-6`}>
+                                <div css={tw`w-full bg-neutral-800 border border-neutral-900 shadow-inner p-4 rounded`}>
+                                    <FormikSwitch
+                                        name={'rootAdmin'}
+                                        label={'Root Admin'}
+                                        description={'Should this user be a root administrator?'}
+                                    />
+                                </div>
+                            </div>
+
+                            <div css={tw`w-full flex flex-row items-center mt-6`}>
+                                {children}
+                                <div css={tw`flex ml-auto`}>
+                                    <Button type={'submit'} disabled={isSubmitting || !isValid}>
+                                        Save Changes
+                                    </Button>
+                                </div>
+                            </div>
+                        </Form>
+                    </AdminBox>
+                </>
+            )}
+        </Formik>
+    );
+}

resources/scripts/components/admin/users/UserRouter.tsx

@@ -0,0 +1,114 @@
+import type { Action, Actions } from 'easy-peasy';
+import { action, createContextStore, useStoreActions } from 'easy-peasy';
+import { useEffect, useState } from 'react';
+import { Route, Routes, useParams } from 'react-router-dom';
+import tw from 'twin.macro';
+
+import { getUser } from '@/api/admin/users';
+import AdminContentBlock from '@/components/admin/AdminContentBlock';
+import { SubNavigation, SubNavigationLink } from '@/components/admin/SubNavigation';
+import UserAboutContainer from '@/components/admin/users/UserAboutContainer';
+import UserServers from '@/components/admin/users/UserServers';
+import Spinner from '@/components/elements/Spinner';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import type { ApplicationStore } from '@/state';
+import type { User } from '@definitions/admin';
+
+interface ctx {
+    user: User | undefined;
+    setUser: Action<ctx, User | undefined>;
+}
+
+export const Context = createContextStore<ctx>({
+    user: undefined,
+
+    setUser: action((state, payload) => {
+        state.user = payload;
+    }),
+});
+
+const UserRouter = () => {
+    const params = useParams<'id'>();
+
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions(
+        (actions: Actions<ApplicationStore>) => actions.flashes,
+    );
+    const [loading, setLoading] = useState(true);
+
+    const user = Context.useStoreState(state => state.user);
+    const setUser = Context.useStoreActions(actions => actions.setUser);
+
+    useEffect(() => {
+        clearFlashes('user');
+
+        getUser(Number(params.id), ['role'])
+            .then(user => setUser(user))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'user', error });
+            })
+            .then(() => setLoading(false));
+    }, []);
+
+    if (loading || user === undefined) {
+        return (
+            <AdminContentBlock>
+                <FlashMessageRender byKey={'user'} css={tw`mb-4`} />
+
+                <div css={tw`w-full flex flex-col items-center justify-center`} style={{ height: '24rem' }}>
+                    <Spinner size={'base'} />
+                </div>
+            </AdminContentBlock>
+        );
+    }
+
+    return (
+        <AdminContentBlock title={'User - ' + user.id}>
+            <div css={tw`w-full flex flex-row items-center mb-4`}>
+                <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
+                    <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{user.email}</h2>
+                    <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>
+                        {user.uuid}
+                    </p>
+                </div>
+            </div>
+
+            <FlashMessageRender byKey={'user'} css={tw`mb-4`} />
+
+            <SubNavigation>
+                <SubNavigationLink to={`/admin/users/${params.id}`} name={'About'}>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                        <path
+                            clipRule="evenodd"
+                            fillRule="evenodd"
+                            d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 110 2h-3a1 1 0 01-1-1v-2a1 1 0 00-1-1H9a1 1 0 00-1 1v2a1 1 0 01-1 1H4a1 1 0 110-2V4zm3 1h2v2H7V5zm2 4H7v2h2V9zm2-4h2v2h-2V5zm2 4h-2v2h2V9z"
+                        />
+                    </svg>
+                </SubNavigationLink>
+
+                <SubNavigationLink to={`/admin/users/${params.id}/servers`} name={'Servers'}>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                        <path
+                            clipRule="evenodd"
+                            fillRule="evenodd"
+                            d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3.293 1.293a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L7.586 10 5.293 7.707a1 1 0 010-1.414zM11 12a1 1 0 100 2h3a1 1 0 100-2h-3z"
+                        />
+                    </svg>
+                </SubNavigationLink>
+            </SubNavigation>
+
+            <Routes>
+                <Route path="" element={<UserAboutContainer />} />
+                <Route path="servers" element={<UserServers />} />
+            </Routes>
+        </AdminContentBlock>
+    );
+};
+
+export default () => {
+    return (
+        <Context.Provider>
+            <UserRouter />
+        </Context.Provider>
+    );
+};

resources/scripts/components/admin/users/UserServers.tsx

@@ -0,0 +1,10 @@
+import ServersTable from '@/components/admin/servers/ServersTable';
+import { Context } from '@/components/admin/users/UserRouter';
+
+function UserServers() {
+    const user = Context.useStoreState(state => state.user);
+
+    return <ServersTable filters={{ owner_id: user?.id?.toString?.() }} />;
+}
+
+export default UserServers;

resources/scripts/components/admin/users/UserTableRow.tsx

@@ -0,0 +1,79 @@
+import { BanIcon, DotsVerticalIcon, LockOpenIcon, PencilIcon, SupportIcon, TrashIcon } from '@heroicons/react/solid';
+import { useState } from 'react';
+
+import Checkbox from '@/components/elements/inputs/Checkbox';
+import { Dropdown } from '@/components/elements/dropdown';
+import { Dialog } from '@/components/elements/dialog';
+import { Button } from '@/components/elements/button';
+import { User } from '@definitions/admin';
+
+interface Props {
+    user: User;
+    selected?: boolean;
+    onRowChange: (user: User, selected: boolean) => void;
+}
+
+const UserTableRow = ({ user, selected, onRowChange }: Props) => {
+    const [visible, setVisible] = useState(false);
+
+    return (
+        <>
+            <Dialog title={'Delete account'} visible={visible} onDismissed={() => setVisible(false)}>
+                <Dialog.Icon type={'danger'} />
+                This account will be permanently deleted.
+                <Dialog.Buttons>
+                    <Button.Text onClick={() => setVisible(false)}>Cancel</Button.Text>
+                    <Button.Danger>Delete</Button.Danger>
+                </Dialog.Buttons>
+            </Dialog>
+            <tr>
+                <td className={'whitespace-nowrap'}>
+                    <div className={'flex justify-end items-center w-8'}>
+                        <Checkbox checked={selected} onChange={e => onRowChange(user, e.currentTarget.checked)} />
+                    </div>
+                </td>
+                <td className={'pl-6 py-4 whitespace-nowrap'}>
+                    <div className={'flex items-center'}>
+                        <div className={'w-10 h-10'}>
+                            <img src={user.avatarUrl} className={'w-10 h-10 rounded-full'} alt={'User avatar'} />
+                        </div>
+                        <div className={'ml-4'}>
+                            <p className={'font-medium'}>{user.email}</p>
+                            <p className={'text-sm text-neutral-400'}>{user.uuid}</p>
+                        </div>
+                    </div>
+                </td>
+                <td className={'pl-2 py-4 whitespace-nowrap'}>
+                    {user.isUsingTwoFactor && (
+                        <span
+                            className={
+                                'bg-green-100 uppercase text-green-700 font-semibold text-xs px-2 py-0.5 rounded'
+                            }
+                        >
+                            2-FA Enabled
+                        </span>
+                    )}
+                </td>
+                <td className={'px-6 py-4 whitespace-nowrap'}>
+                    <Dropdown>
+                        <Dropdown.Button className={'px-2'}>
+                            <DotsVerticalIcon />
+                        </Dropdown.Button>
+                        <Dropdown.Item icon={<PencilIcon />}>Edit</Dropdown.Item>
+                        <Dropdown.Item icon={<SupportIcon />}>Reset Password</Dropdown.Item>
+                        <Dropdown.Item icon={<LockOpenIcon />} disabled={!user.isUsingTwoFactor}>
+                            Disable 2-FA
+                        </Dropdown.Item>
+                        <Dropdown.Item icon={<BanIcon />}>Suspend</Dropdown.Item>
+                        <Dropdown.Gap />
+                        <Dropdown.Item icon={<TrashIcon />} onClick={() => setVisible(true)} danger>
+                            Delete Account
+                        </Dropdown.Item>
+                    </Dropdown>
+                </td>
+            </tr>
+        </>
+    );
+};
+
+export default UserTableRow;

resources/scripts/components/admin/users/UsersContainer.tsx

@@ -0,0 +1,119 @@
+import { LockOpenIcon, PlusIcon, SupportIcon, TrashIcon } from '@heroicons/react/solid';
+import { Fragment, useEffect, useState } from 'react';
+
+import { useGetUsers } from '@/api/admin/users';
+import type { UUID } from '@/api/definitions';
+import { Transition } from '@/components/elements/transitions';
+import { Button } from '@/components/elements/button/index';
+import Checkbox from '@/components/elements/inputs/Checkbox';
+import InputField from '@/components/elements/inputs/InputField';
+import UserTableRow from '@/components/admin/users/UserTableRow';
+import TFootPaginated from '@/components/elements/table/TFootPaginated';
+import type { User } from '@definitions/admin';
+import extractSearchFilters from '@/helpers/extractSearchFilters';
+import useDebouncedState from '@/plugins/useDebouncedState';
+
+const filters = ['id', 'uuid', 'external_id', 'username', 'email'] as const;
+
+const UsersContainer = () => {
+    const [search, setSearch] = useDebouncedState('', 500);
+    const [selected, setSelected] = useState<UUID[]>([]);
+    const { data: users } = useGetUsers(
+        extractSearchFilters(search, filters, {
+            splitUnmatched: true,
+            returnUnmatched: true,
+        }),
+    );
+
+    useEffect(() => {
+        document.title = 'Admin | Users';
+    }, []);
+
+    const onRowChange = (user: User, checked: boolean) => {
+        setSelected(state => {
+            return checked ? [...state, user.uuid] : selected.filter(uuid => uuid !== user.uuid);
+        });
+    };
+
+    const selectAllChecked = users && users.items.length > 0 && selected.length > 0;
+    const onSelectAll = () =>
+        setSelected(state => (state.length > 0 ? [] : users?.items.map(({ uuid }) => uuid) || []));
+
+    return (
+        <div>
+            <div className={'flex justify-end mb-4'}>
+                <Button className={'shadow focus:ring-offset-2 focus:ring-offset-neutral-800'}>
+                    Add User <PlusIcon className={'ml-2 w-5 h-5'} />
+                </Button>
+            </div>
+            <div className={'relative flex items-center rounded-t bg-neutral-700 px-4 py-2'}>
+                <div className={'mr-6'}>
+                    <Checkbox
+                        checked={selectAllChecked}
+                        disabled={!users?.items.length}
+                        indeterminate={selected.length !== users?.items.length}
+                        onChange={onSelectAll}
+                    />
+                </div>
+                <div className={'flex-1'}>
+                    <InputField
+                        type={'text'}
+                        name={'filter'}
+                        placeholder={'Begin typing to filter...'}
+                        className={'w-56 focus:w-96'}
+                        onChange={e => setSearch(e.currentTarget.value)}
+                    />
+                </div>
+                <Transition.Fade as={Fragment} show={selected.length > 0} duration={'duration-75'}>
+                    <div
+                        className={
+                            'absolute rounded-t bg-neutral-700 w-full h-full top-0 left-0 flex items-center justify-end space-x-4 px-4'
+                        }
+                    >
+                        <div className={'flex-1'}>
+                            <Checkbox
+                                checked={selectAllChecked}
+                                indeterminate={selected.length !== users?.items.length}
+                                onChange={onSelectAll}
+                            />
+                        </div>
+                        <Button.Text square>
+                            <SupportIcon className={'w-4 h-4'} />
+                        </Button.Text>
+                        <Button.Text square>
+                            <LockOpenIcon className={'w-4 h-4'} />
+                        </Button.Text>
+                        <Button.Text square>
+                            <TrashIcon className={'w-4 h-4'} />
+                        </Button.Text>
+                    </div>
+                </Transition.Fade>
+            </div>
+            <table className={'min-w-full rounded bg-neutral-700'}>
+                <thead className={'bg-neutral-900'}>
+                    <tr>
+                        <th scope={'col'} className={'w-8'} />
+                        <th scope={'col'} className={'text-left px-6 py-2 w-full'}>
+                            Email
+                        </th>
+                        <th scope={'col'} />
+                        <th scope={'col'} />
+                    </tr>
+                </thead>
+                <tbody>
+                    {users?.items.map(user => (
+                        <UserTableRow
+                            key={user.uuid}
+                            user={user}
+                            selected={selected.includes(user.uuid)}
+                            onRowChange={onRowChange}
+                        />
+                    ))}
+                </tbody>
+                {users && <TFootPaginated span={4} pagination={users.pagination} />}
+            </table>
+        </div>
+    );
+};
+
+export default UsersContainer;

resources/scripts/components/dashboard/activity/ActivityLogContainer.tsx

@@ -47,7 +47,7 @@ export default () => {
             {!data && isValidating ? (
                 <Spinner centered />
             ) : (
-                <div className={'bg-gray-700'}>
+                <div className={'bg-slate-700'}>
                     {data?.items.map(activity => (
                         <ActivityLogEntry key={activity.id} activity={activity}>
                             {typeof activity.properties.useragent === 'string' && (

resources/scripts/components/dashboard/forms/RecoveryTokensDialog.tsx

@@ -28,13 +28,13 @@ export default ({ tokens, open, onClose }: RecoveryTokenDialogProps) => {
         >
             <Dialog.Icon position={'container'} type={'success'} />
             <CopyOnClick text={tokens.join('\n')} showInNotification={false}>
-                <pre className={'bg-gray-800 rounded p-2 mt-6'}>
+                <pre className={'bg-slate-800 rounded p-2 mt-6'}>
                     {grouped.map(value => (
                         <span key={value.join('_')} className={'block'}>
                             {value[0]}
-                            <span className={'mx-2 selection:bg-gray-800'}>&nbsp;</span>
+                            <span className={'mx-2 selection:bg-slate-800'}>&nbsp;</span>
                             {value[1]}
-                            <span className={'selection:bg-gray-800'}>&nbsp;</span>
+                            <span className={'selection:bg-slate-800'}>&nbsp;</span>
                         </span>
                     ))}
                 </pre>

resources/scripts/components/dashboard/forms/SetupTOTPDialog.tsx

@@ -62,7 +62,7 @@ const ConfigureTwoFactorForm = ({ onTokens }: Props) => {
     return (
         <form id={'enable-totp-form'} onSubmit={submit}>
             <FlashMessageRender byKey={'account:two-step'} className={'mt-4'} />
-            <div className={'flex items-center justify-center w-56 h-56 p-2 bg-gray-50 shadow mx-auto mt-6'}>
+            <div className={'flex items-center justify-center w-56 h-56 p-2 bg-slate-50 shadow mx-auto mt-6'}>
                 {!token ? (
                     <Spinner />
                 ) : (
@@ -70,7 +70,7 @@ const ConfigureTwoFactorForm = ({ onTokens }: Props) => {
                 )}
             </div>
             <CopyOnClick text={token?.secret}>
-                <p className={'font-mono text-sm text-gray-100 text-center mt-2'}>
+                <p className={'font-mono text-sm text-slate-100 text-center mt-2'}>
                     {token?.secret.match(/.{1,4}/g)!.join(' ') || 'Loading...'}
                 </p>
             </CopyOnClick>

resources/scripts/components/elements/Code.tsx

@@ -11,7 +11,7 @@ export default ({ dark, className, children }: CodeProps) => (
     <code
         className={classNames('font-mono text-sm px-2 py-1 inline-block rounded', className, {
             'bg-neutral-700': !dark,
-            'bg-neutral-900 text-gray-100': dark,
+            'bg-neutral-900 text-slate-100': dark,
         })}
     >
         {children}

resources/scripts/components/elements/CopyOnClick.tsx

@@ -51,7 +51,7 @@ const CopyOnClick = ({ text, showInNotification = true, children }: CopyOnClickP
                 <Portal>
                     <FadeTransition show duration="duration-250" key={copied ? 'visible' : 'invisible'}>
                         <div className="fixed z-50 bottom-0 right-0 m-4">
-                            <div className="rounded-md py-3 px-4 text-gray-200 bg-neutral-600/95 shadow">
+                            <div className="rounded-md py-3 px-4 text-slate-200 bg-neutral-600/95 shadow">
                                 <p>
                                     {showInNotification
                                         ? `Copied "${String(text)}" to clipboard.`

resources/scripts/components/elements/Editor.tsx

@@ -0,0 +1,318 @@
+import { autocompletion, completionKeymap } from '@codemirror/autocomplete';
+import { closeBrackets, closeBracketsKeymap } from '@codemirror/closebrackets';
+import { defaultKeymap, indentWithTab } from '@codemirror/commands';
+import { commentKeymap } from '@codemirror/comment';
+import { foldGutter, foldKeymap } from '@codemirror/fold';
+import { lineNumbers, highlightActiveLineGutter } from '@codemirror/gutter';
+import { defaultHighlightStyle } from '@codemirror/highlight';
+import { history, historyKeymap } from '@codemirror/history';
+import { indentOnInput, LanguageSupport, LRLanguage, indentUnit } from '@codemirror/language';
+import { lintKeymap } from '@codemirror/lint';
+import { bracketMatching } from '@codemirror/matchbrackets';
+import { rectangularSelection } from '@codemirror/rectangular-selection';
+import { searchKeymap, highlightSelectionMatches } from '@codemirror/search';
+import { Compartment, Extension, EditorState } from '@codemirror/state';
+import { StreamLanguage, StreamParser } from '@codemirror/stream-parser';
+import { keymap, highlightSpecialChars, drawSelection, highlightActiveLine, EditorView } from '@codemirror/view';
+import { clike } from '@codemirror/legacy-modes/mode/clike';
+import { cpp } from '@codemirror/lang-cpp';
+import { css } from '@codemirror/lang-css';
+import { Cassandra, MariaSQL, MSSQL, MySQL, PostgreSQL, sql, SQLite, StandardSQL } from '@codemirror/lang-sql';
+import { diff } from '@codemirror/legacy-modes/mode/diff';
+import { dockerFile } from '@codemirror/legacy-modes/mode/dockerfile';
+import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
+import { go } from '@codemirror/legacy-modes/mode/go';
+import { html } from '@codemirror/lang-html';
+import { http } from '@codemirror/legacy-modes/mode/http';
+import { javascript, typescriptLanguage } from '@codemirror/lang-javascript';
+import { json } from '@codemirror/lang-json';
+import { lua } from '@codemirror/legacy-modes/mode/lua';
+import { properties } from '@codemirror/legacy-modes/mode/properties';
+import { python } from '@codemirror/legacy-modes/mode/python';
+import { ruby } from '@codemirror/legacy-modes/mode/ruby';
+import { rust } from '@codemirror/lang-rust';
+import { shell } from '@codemirror/legacy-modes/mode/shell';
+import { toml } from '@codemirror/legacy-modes/mode/toml';
+import { xml } from '@codemirror/lang-xml';
+import { yaml } from '@codemirror/legacy-modes/mode/yaml';
+import React, { useCallback, useEffect, useState } from 'react';
+import tw, { styled, TwStyle } from 'twin.macro';
+import { ayuMirage } from '@/components/elements/EditorTheme';
+
+type EditorMode = LanguageSupport | LRLanguage | StreamParser<unknown>;
+
+export interface Mode {
+    name: string;
+    mime: string;
+    mimes?: string[];
+    mode?: EditorMode;
+    ext?: string[];
+    alias?: string[];
+    file?: RegExp;
+}
+
+export const modes: Mode[] = [
+    { name: 'C', mime: 'text/x-csrc', mode: clike({}), ext: [ 'c', 'h', 'ino' ] },
+    { name: 'C++', mime: 'text/x-c++src', mode: cpp(), ext: [ 'cpp', 'c++', 'cc', 'cxx', 'hpp', 'h++', 'hh', 'hxx' ], alias: [ 'cpp' ] },
+    { name: 'C#', mime: 'text/x-csharp', mode: clike({}), ext: [ 'cs' ], alias: [ 'csharp', 'cs' ] },
+    { name: 'CSS', mime: 'text/css', mode: css(), ext: [ 'css' ] },
+    { name: 'CQL', mime: 'text/x-cassandra', mode: sql({ dialect: Cassandra }), ext: [ 'cql' ] },
+    { name: 'Diff', mime: 'text/x-diff', mode: diff, ext: [ 'diff', 'patch' ] },
+    { name: 'Dockerfile', mime: 'text/x-dockerfile', mode: dockerFile, file: /^Dockerfile$/ },
+    { name: 'Git Markdown', mime: 'text/x-gfm', mode: markdown({ defaultCodeLanguage: markdownLanguage }), file: /^(readme|contributing|history|license).md$/i },
+    { name: 'Golang', mime: 'text/x-go', mode: go, ext: [ 'go' ] },
+    { name: 'HTML', mime: 'text/html', mode: html(), ext: [ 'html', 'htm', 'handlebars', 'hbs' ], alias: [ 'xhtml' ] },
+    { name: 'HTTP', mime: 'message/http', mode: http },
+    { name: 'JavaScript', mime: 'text/javascript', mimes: [ 'text/javascript', 'text/ecmascript', 'application/javascript', 'application/x-javascript', 'application/ecmascript' ], mode: javascript(), ext: [ 'js' ], alias: [ 'ecmascript', 'js', 'node' ] },
+    { name: 'JSON', mime: 'application/json', mimes: [ 'application/json', 'application/x-json' ], mode: json(), ext: [ 'json', 'json5', 'map' ], alias: [ 'json5' ] },
+    { name: 'Lua', mime: 'text/x-lua', mode: lua, ext: [ 'lua' ] },
+    { name: 'Markdown', mime: 'text/x-markdown', mode: markdown({ defaultCodeLanguage: markdownLanguage }), ext: [ 'markdown', 'md', 'mkd' ] },
+    { name: 'MariaDB', mime: 'text/x-mariadb', mode: sql({ dialect: MariaSQL }) },
+    { name: 'MS SQL', mime: 'text/x-mssql', mode: sql({ dialect: MSSQL }) },
+    { name: 'MySQL', mime: 'text/x-mysql', mode: sql({ dialect: MySQL }) },
+    { name: 'Plain Text', mime: 'text/plain', mode: undefined, ext: [ 'txt', 'text', 'conf', 'def', 'list', 'log' ] },
+    { name: 'PostgreSQL', mime: 'text/x-pgsql', mode: sql({ dialect: PostgreSQL }) },
+    { name: 'Properties', mime: 'text/x-properties', mode: properties, ext: [ 'properties', 'ini', 'in' ], alias: [ 'ini', 'properties' ] },
+    { name: 'Python', mime: 'text/x-python', mode: python, ext: [ 'BUILD', 'bzl', 'py', 'pyw' ], file: /^(BUCK|BUILD)$/ },
+    { name: 'Ruby', mime: 'text/x-ruby', mode: ruby, ext: [ 'rb' ], alias: [ 'jruby', 'macruby', 'rake', 'rb', 'rbx' ] },
+    { name: 'Rust', mime: 'text/x-rustsrc', mode: rust(), ext: [ 'rs' ] },
+    { name: 'Sass', mime: 'text/x-sass', mode: css(), ext: [ 'sass' ] },
+    { name: 'SCSS', mime: 'text/x-scss', mode: css(), ext: [ 'scss' ] },
+    { name: 'Shell', mime: 'text/x-sh', mimes: [ 'text/x-sh', 'application/x-sh' ], mode: shell, ext: [ 'sh', 'ksh', 'bash' ], alias: [ 'bash', 'sh', 'zsh' ], file: /^PKGBUILD$/ },
+    { name: 'SQL', mime: 'text/x-sql', mode: sql({ dialect: StandardSQL }), ext: [ 'sql' ] },
+    { name: 'SQLite', mime: 'text/x-sqlite', mode: sql({ dialect: SQLite }) },
+    { name: 'TOML', mime: 'text/x-toml', mode: toml, ext: [ 'toml' ] },
+    { name: 'TypeScript', mime: 'application/typescript', mode: typescriptLanguage, ext: [ 'ts' ], alias: [ 'ts' ] },
+    { name: 'XML', mime: 'application/xml', mimes: [ 'application/xml', 'text/xml' ], mode: xml(), ext: [ 'xml', 'xsl', 'xsd', 'svg' ], alias: [ 'rss', 'wsdl', 'xsd' ] },
+    { name: 'YAML', mime: 'text/x-yaml', mimes: [ 'text/x-yaml', 'text/yaml' ], mode: yaml, ext: [ 'yaml', 'yml' ], alias: [ 'yml' ] },
+];
+
+export const modeToExtension = (m: EditorMode): Extension => {
+    if (m instanceof LanguageSupport) {
+        return m;
+    }
+
+    if (m instanceof LRLanguage) {
+        return m;
+    }
+
+    return StreamLanguage.define(m);
+};
+
+const findModeByFilename = (filename: string): Mode => {
+    for (let i = 0; i < modes.length; i++) {
+        const info = modes[i];
+
+        if (info.file && info.file.test(filename)) {
+            return info;
+        }
+    }
+
+    const dot = filename.lastIndexOf('.');
+    const ext = dot > -1 && filename.substring(dot + 1, filename.length);
+
+    if (ext) {
+        for (let i = 0; i < modes.length; i++) {
+            const info = modes[i];
+            if (info.ext) {
+                for (let j = 0; j < info.ext.length; j++) {
+                    if (info.ext[j] === ext) {
+                        return info;
+                    }
+                }
+            }
+        }
+    }
+
+    const plainText = modes.find(m => m.mime === 'text/plain');
+    if (plainText === undefined) {
+        throw new Error('failed to find \'text/plain\' mode');
+    }
+    return plainText;
+};
+
+const findLanguageExtensionByMode = (mode: Mode): Extension => {
+    if (mode.mode === undefined) {
+        return [];
+    }
+    return modeToExtension(mode.mode);
+};
+
+const defaultExtensions: Extension = [
+    ayuMirage,
+
+    lineNumbers(),
+    highlightActiveLineGutter(),
+    highlightSpecialChars(),
+    history(),
+    foldGutter(),
+    drawSelection(),
+    EditorState.allowMultipleSelections.of(true),
+    indentOnInput(),
+    defaultHighlightStyle.fallback,
+    bracketMatching(),
+    closeBrackets(),
+    autocompletion(),
+    rectangularSelection(),
+    highlightActiveLine(),
+    highlightSelectionMatches(),
+    keymap.of([
+        ...closeBracketsKeymap,
+        ...defaultKeymap,
+        ...searchKeymap,
+        ...historyKeymap,
+        ...foldKeymap,
+        ...commentKeymap,
+        ...completionKeymap,
+        ...lintKeymap,
+        indentWithTab,
+    ]),
+    EditorState.tabSize.of(4),
+    // This is gonna piss people off, but that isn't my problem.
+    indentUnit.of('\t'),
+];
+
+const EditorContainer = styled.div<{ overrides?: TwStyle }>`
+    //min-height: 12rem;
+    ${tw`relative`};
+
+    & > div {
+        ${props => props.overrides};
+
+        &.cm-focused {
+            outline: none;
+        }
+    }
+`;
+
+export interface Props {
+    className?: string;
+    style?: React.CSSProperties;
+    overrides?: TwStyle;
+
+    initialContent?: string;
+    extensions?: Extension[];
+    mode?: EditorMode;
+
+    filename?: string;
+    onModeChanged?: (mode: Mode) => void;
+    fetchContent?: (callback: () => Promise<string>) => void;
+    onContentSaved?: () => void;
+}
+
+export default ({ className, style, overrides, initialContent, extensions, mode, filename, onModeChanged, fetchContent, onContentSaved }: Props) => {
+    const [ languageConfig ] = useState<Compartment>(new Compartment());
+    const [ keybinds ] = useState<Compartment>(new Compartment());
+    const [ view, setView ] = useState<EditorView>();
+
+    const createEditorState = () => {
+        return EditorState.create({
+            doc: initialContent,
+            extensions: [
+                ...defaultExtensions,
+                ...(extensions !== undefined ? extensions : []),
+
+                languageConfig.of(mode !== undefined ? modeToExtension(mode) : findLanguageExtensionByMode(findModeByFilename(filename || ''))),
+                keybinds.of([]),
+            ],
+        });
+    };
+
+    const ref = useCallback((node) => {
+        if (!node) {
+            return;
+        }
+
+        const view = new EditorView({
+            state: createEditorState(),
+            parent: node,
+        });
+        setView(view);
+    }, []);
+
+    // This useEffect is required to send the proper mode back to the parent element
+    // due to the initial language being set with EditorState#create, rather than in
+    // an useEffect like this one, or one watching `filename`.
+    useEffect(() => {
+        if (onModeChanged === undefined) {
+            return;
+        }
+
+        onModeChanged(findModeByFilename(filename || ''));
+    }, []);
+
+    useEffect(() => {
+        if (view === undefined) {
+            return;
+        }
+
+        if (mode === undefined) {
+            return;
+        }
+
+        view.dispatch({
+            effects: languageConfig.reconfigure(modeToExtension(mode)),
+        });
+    }, [ mode ]);
+
+    useEffect(() => {
+        if (view === undefined) {
+            return;
+        }
+
+        if (filename === undefined) {
+            return;
+        }
+
+        const mode = findModeByFilename(filename || '');
+
+        view.dispatch({
+            effects: languageConfig.reconfigure(findLanguageExtensionByMode(mode)),
+        });
+
+        if (onModeChanged !== undefined) {
+            onModeChanged(mode);
+        }
+    }, [ filename ]);
+
+    useEffect(() => {
+        if (view === undefined) {
+            return;
+        }
+
+        // We could dispatch a view update to replace the content, but this would keep the edit history,
+        // and previously would duplicate the content of the editor.
+        view.setState(createEditorState());
+    }, [ initialContent ]);
+
+    useEffect(() => {
+        if (fetchContent === undefined) {
+            return;
+        }
+
+        if (!view) {
+            fetchContent(() => Promise.reject(new Error('no editor session has been configured')));
+            return;
+        }
+
+        if (onContentSaved !== undefined) {
+            view.dispatch({
+                effects: keybinds.reconfigure(keymap.of([
+                    {
+                        key: 'Mod-s',
+                        run: () => {
+                            onContentSaved();
+                            return true;
+                        },
+                    },
+                ])),
+            });
+        }
+
+        fetchContent(() => Promise.resolve(view.state.doc.toString()));
+    }, [ view, fetchContent, onContentSaved ]);
+
+    return (
+        <EditorContainer className={className} style={style} overrides={overrides} ref={ref}/>
+    );
+};

resources/scripts/components/elements/Field.tsx

@@ -1,8 +1,12 @@
+import type { FieldProps } from 'formik';
+import { Field as FormikField } from 'formik';
+import type { InputHTMLAttributes, TextareaHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
-import { Field as FormikField, FieldProps } from 'formik';
-import Input from '@/components/elements/Input';
+import tw, { styled } from 'twin.macro';
+
 import Label from '@/components/elements/Label';
+import Input, { Textarea } from '@/components/elements/Input';
+import InputError from '@/components/elements/InputError';
 
 interface OwnProps {
     name: string;
@@ -12,7 +16,7 @@ interface OwnProps {
     validate?: (value: any) => undefined | string | Promise<any>;
 }
 
-type Props = OwnProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'name'>;
+type Props = OwnProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'name'>;
 
 const Field = forwardRef<HTMLInputElement, Props>(
     ({ id, name, light = false, label, description, validate, ...props }, ref) => (
@@ -47,3 +51,42 @@ const Field = forwardRef<HTMLInputElement, Props>(
 Field.displayName = 'Field';
 
 export default Field;
+
+type TextareaProps = OwnProps & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'name'>;
+
+export const TextareaField = forwardRef<HTMLTextAreaElement, TextareaProps>(function TextareaField(
+    { id, name, light = false, label, description, validate, className, ...props },
+    ref,
+) {
+    return (
+        <FormikField innerRef={ref} name={name} validate={validate}>
+            {({ field, form: { errors, touched } }: FieldProps) => (
+                <div className={className}>
+                    {label && (
+                        <Label htmlFor={id} isLight={light}>
+                            {label}
+                        </Label>
+                    )}
+                    <Textarea
+                        id={id}
+                        {...field}
+                        {...props}
+                        isLight={light}
+                        hasError={!!(touched[field.name] && errors[field.name])}
+                    />
+                    <InputError errors={errors} touched={touched} name={field.name}>
+                        {description || null}
+                    </InputError>
+                </div>
+            )}
+        </FormikField>
+    );
+});
+TextareaField.displayName = 'TextareaField';
+
+export const FieldRow = styled.div`
+    ${tw`grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-6 mb-6`};
+    & > div {
+        ${tw`sm:w-full sm:flex sm:flex-col`};
+    }
+`;

resources/scripts/components/elements/SearchableSelect.tsx

@@ -0,0 +1,315 @@
+import { debounce } from 'debounce';
+import React, { createRef, ReactElement, useEffect, useState } from 'react';
+import tw, { styled } from 'twin.macro';
+import Input from '@/components/elements/Input';
+import InputSpinner from '@/components/elements/InputSpinner';
+import Label from '@/components/elements/Label';
+
+const Dropdown = styled.div<{ expanded: boolean }>`
+    ${tw`absolute z-10 w-full mt-1 rounded-md shadow-lg bg-neutral-900`};
+    ${props => !props.expanded && tw`hidden`};
+`;
+
+interface OptionProps<T> {
+    selectId: string;
+    id: number;
+    item: T;
+    active: boolean;
+
+    isHighlighted?: boolean;
+    onClick?: (item: T) => (e: React.MouseEvent) => void;
+
+    children: React.ReactNode;
+}
+
+interface IdObj {
+    id: number;
+}
+
+export const Option = <T extends IdObj>({ selectId, id, item, active, isHighlighted, onClick, children }: OptionProps<T>) => {
+    if (isHighlighted === undefined) {
+        isHighlighted = false;
+    }
+
+    // This should never be true, but just in-case we set it to an empty function to make sure shit doesn't blow up.
+    if (onClick === undefined) {
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        onClick = () => () => {};
+    }
+
+    if (active) {
+        return (
+            <li id={selectId + '-select-item-' + id} role="option" css={[ tw`relative py-2 pl-3 cursor-pointer select-none text-neutral-200 pr-9 hover:bg-neutral-700`, isHighlighted ? tw`bg-neutral-700` : null ]} onClick={onClick(item)}>
+                <div css={tw`flex items-center`}>
+                    <span css={tw`block font-medium truncate`}>
+                        {children}
+                    </span>
+                </div>
+
+                <span css={tw`absolute inset-y-0 right-0 flex items-center pr-4`}>
+                    <svg css={tw`w-5 h-5 text-primary-400`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                        <path clipRule="evenodd" fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/>
+                    </svg>
+                </span>
+            </li>
+        );
+    }
+
+    return (
+        <li id={selectId + 'select-item-' + id} role="option" css={[ tw`relative py-2 pl-3 cursor-pointer select-none text-neutral-200 pr-9 hover:bg-neutral-700`, isHighlighted ? tw`bg-neutral-700` : null ]} onClick={onClick(item)}>
+            <div css={tw`flex items-center`}>
+                <span css={tw`block font-normal truncate`}>
+                    {children}
+                </span>
+            </div>
+        </li>
+    );
+};
+
+interface SearchableSelectProps<T> {
+    id: string;
+    name: string;
+    label: string;
+    placeholder?: string;
+    nullable?: boolean;
+
+    selected: T | null;
+    setSelected: (item: T | null) => void;
+
+    items: T[] | null;
+    setItems: (items: T[] | null) => void;
+
+    onSearch: (query: string) => Promise<void>;
+    onSelect: (item: T | null) => void;
+
+    getSelectedText: (item: T | null) => string | undefined;
+
+    children: React.ReactNode;
+    className?: string;
+}
+
+export const SearchableSelect = <T extends IdObj>({ id, name, label, placeholder, selected, setSelected, items, setItems, onSearch, onSelect, getSelectedText, children, className }: SearchableSelectProps<T>) => {
+    const [ loading, setLoading ] = useState(false);
+    const [ expanded, setExpanded ] = useState(false);
+
+    const [ inputText, setInputText ] = useState('');
+
+    const [ highlighted, setHighlighted ] = useState<number | null>(null);
+
+    const searchInput = createRef<HTMLInputElement>();
+    const itemsList = createRef<HTMLDivElement>();
+
+    const onFocus = () => {
+        setInputText('');
+        setItems(null);
+        setExpanded(true);
+        setHighlighted(null);
+    };
+
+    const onBlur = () => {
+        setInputText(getSelectedText(selected) || '');
+        setItems(null);
+        setExpanded(false);
+        setHighlighted(null);
+    };
+
+    const search = debounce((query: string) => {
+        if (!expanded) {
+            return;
+        }
+
+        if (query === '' || query.length < 2) {
+            setItems(null);
+            setHighlighted(null);
+            return;
+        }
+
+        setLoading(true);
+        onSearch(query).then(() => setLoading(false));
+    }, 250);
+
+    const handleInputKeydown = (e: React.KeyboardEvent) => {
+        if (e.key === 'Tab' || e.key === 'Escape') {
+            onBlur();
+            return;
+        }
+
+        if (!items) {
+            return;
+        }
+
+        if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+            // Prevent up and down arrows from moving the cursor in the input.
+            e.preventDefault();
+
+            if (highlighted === null) {
+                setHighlighted(items[0].id);
+                return;
+            }
+
+            const item = items.find(i => i.id === highlighted);
+            if (!item) {
+                return;
+            }
+
+            let index = items.indexOf(item);
+            if (e.key === 'ArrowUp') {
+                if (--index < 0) {
+                    return;
+                }
+            } else {
+                if (++index >= items.length) {
+                    return;
+                }
+            }
+
+            setHighlighted(items[index].id);
+            return;
+        }
+
+        // Prevent the form from being submitted if the user accidentally hits enter
+        // while focused on the select.
+        if (e.key === 'Enter') {
+            e.preventDefault();
+
+            const item = items.find(i => i.id === highlighted);
+            if (!item) {
+                return;
+            }
+
+            setSelected(item);
+            onSelect(item);
+        }
+    };
+
+    useEffect(() => {
+        const clickHandler = (e: MouseEvent) => {
+            const input = searchInput.current;
+            const menu = itemsList.current;
+
+            if (e.button === 2 || !expanded || !input || !menu) {
+                return;
+            }
+
+            if (e.target === input || input.contains(e.target as Node)) {
+                return;
+            }
+
+            if (e.target === menu || menu.contains(e.target as Node)) {
+                return;
+            }
+
+            if (e.target === input || input.contains(e.target as Node)) {
+                return;
+            }
+
+            if (e.target === menu || menu.contains(e.target as Node)) {
+                return;
+            }
+
+            onBlur();
+        };
+
+        const contextmenuHandler = () => {
+            onBlur();
+        };
+
+        window.addEventListener('mousedown', clickHandler);
+        window.addEventListener('contextmenu', contextmenuHandler);
+        return () => {
+            window.removeEventListener('mousedown', clickHandler);
+            window.removeEventListener('contextmenu', contextmenuHandler);
+        };
+    }, [ expanded ]);
+
+    const onClick = (item: T) => () => {
+        onSelect(item);
+
+        setExpanded(false);
+        setInputText(getSelectedText(selected) || '');
+    };
+
+    useEffect(() => {
+        if (expanded) {
+            return;
+        }
+
+        setInputText(getSelectedText(selected) || '');
+    }, [ selected ]);
+
+    // This shit is really stupid but works, so is it really stupid?
+    const c = React.Children.map(children, child => React.cloneElement(child as ReactElement, {
+        isHighlighted: ((child as ReactElement).props as OptionProps<T>).id === highlighted,
+        onClick: onClick.bind(child),
+    }));
+
+    return (
+        <div className={className}>
+            <div css={tw`flex flex-row`}>
+                <Label htmlFor={id + '-select-label'}>{label}</Label>
+            </div>
+
+            <div css={tw`relative`}>
+                <InputSpinner visible={loading}>
+                    <Input
+                        ref={searchInput}
+                        type={'search'}
+                        id={id}
+                        name={name}
+                        value={inputText}
+                        readOnly={!expanded}
+                        onFocus={onFocus}
+                        onChange={e => {
+                            setInputText(e.currentTarget.value);
+                            search(e.currentTarget.value);
+                        }}
+                        onKeyDown={handleInputKeydown}
+                        className={'ignoreReadOnly'}
+                        placeholder={placeholder}
+                    />
+                </InputSpinner>
+
+                <div css={[ tw`absolute inset-y-0 right-0 flex items-center pr-2 ml-3`, !expanded && tw`pointer-events-none` ]}>
+                    {inputText !== '' && expanded &&
+                    <svg css={tw`w-5 h-5 text-neutral-400 cursor-pointer`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
+                        onMouseDown={e => {
+                            e.preventDefault();
+                            setInputText('');
+                        }}
+                    >
+                        <path clipRule="evenodd" fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"/>
+                    </svg>
+                    }
+                    <svg css={tw`w-5 h-5 text-neutral-400 pointer-events-none`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                        <path clipRule="evenodd" fillRule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"/>
+                    </svg>
+                </div>
+
+                <Dropdown ref={itemsList} expanded={expanded}>
+                    {items === null || items.length < 1 ?
+                        items === null || inputText.length < 2 ?
+                            <div css={tw`flex flex-row items-center h-10 px-3`}>
+                                <p css={tw`text-sm`}>Please type 2 or more characters.</p>
+                            </div>
+                            :
+                            <div css={tw`flex flex-row items-center h-10 px-3`}>
+                                <p css={tw`text-sm`}>No results found.</p>
+                            </div>
+                        :
+                        <ul
+                            tabIndex={-1}
+                            role={id + '-select'}
+                            aria-labelledby={id + '-select-label'}
+                            aria-activedescendant={id + '-select-item-' + selected?.id}
+                            css={tw`py-2 overflow-auto text-base rounded-md max-h-56 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm`}
+                        >
+                            {c}
+                        </ul>
+                    }
+                </Dropdown>
+            </div>
+        </div>
+    );
+};
+
+export default SearchableSelect;

resources/scripts/components/elements/SelectField.tsx

@@ -0,0 +1,347 @@
+import { CSSObject } from '@emotion/serialize';
+import { Field as FormikField, FieldProps } from 'formik';
+import React, { forwardRef } from 'react';
+import Select, { ContainerProps, ControlProps, GroupProps, IndicatorContainerProps, IndicatorProps, InputProps, MenuListComponentProps, MenuProps, MultiValueProps, OptionProps, PlaceholderProps, SingleValueProps, StylesConfig, ValueContainerProps } from 'react-select';
+import Async from 'react-select/async';
+import Creatable from 'react-select/creatable';
+import tw, { theme } from 'twin.macro';
+import Label from '@/components/elements/Label';
+import { ValueType } from 'react-select/src/types';
+import { GroupHeadingProps } from 'react-select/src/components/Group';
+import { MenuPortalProps, NoticeProps } from 'react-select/src/components/Menu';
+import { LoadingIndicatorProps } from 'react-select/src/components/indicators';
+import { MultiValueRemoveProps } from 'react-select/src/components/MultiValue';
+
+type T = any;
+
+export const SelectStyle: StylesConfig<T, any, any> = {
+    clearIndicator: (base: CSSObject, props: IndicatorProps<T, any, any>): CSSObject => {
+        return {
+            ...base,
+            color: props.isFocused ? theme`colors.neutral.300` : theme`colors.neutral.400`,
+
+            ':hover': {
+                color: theme`colors.neutral.100`,
+            },
+        };
+    },
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    container: (base: CSSObject, props: ContainerProps<T, any, any>): CSSObject => {
+        return {
+            ...base,
+        };
+    },
+
+    control: (base: CSSObject, props: ControlProps<T, any, any>): CSSObject => {
+        return {
+            ...base,
+            height: '3rem',
+            background: theme`colors.neutral.600`,
+            borderColor: !props.isFocused ? theme`colors.neutral.500` : theme`colors.primary.300`,
+            borderWidth: '2px',
+            color: theme`colors.neutral.200`,
+            cursor: 'pointer',
+            boxShadow: props.isFocused ?
+                'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(36, 135, 235, 0.5) 0px 0px 0px 2px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px'
+                :
+                undefined,
+
+            ':hover': {
+                borderColor: !props.isFocused ? theme`colors.neutral.400` : theme`colors.primary.300`,
+            },
+        };
+    },
+
+    dropdownIndicator: (base: CSSObject, props: IndicatorProps<T, any, any>): CSSObject => {
+        return {
+            ...base,
+            color: props.isFocused ? theme`colors.neutral.300` : theme`colors.neutral.400`,
+            transform: props.isFocused ? 'rotate(180deg)' : undefined,
+
+            ':hover': {
+                color: theme`colors.neutral.300`,
+            },
+        };
+    },
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    group: (base: CSSObject, props: GroupProps<T, any, any>): CSSObject => {
+        return {
+            ...base,
+        };
+    },
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    groupHeading: (base: CSSObject, props: GroupHeadingProps<T, any, any>): CSSObject => {
+        return {
+            ...base,
+        };
+    },
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    indicatorsContainer: (base: CSSObject, props: IndicatorContainerProps<T, any, any>): CSSObject => {
+        return {
+            ...base,
+        };
+    },
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    indicatorSeparator: (base: CSSObject, props: IndicatorProps<T, any, any>): CSSObject => {
+        return {
+            ...base,
+            backgroundColor: theme`colors.neutral.500`,
+        };
+    },
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    input: (base: CSSObject, props: InputProps): CSSObject => {
+        return {
+            ...base,
+            color: theme`colors.neutral.200`,
+            fontSize: '0.875rem',
+        };
+    },
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    loadingIndicator: (base: CSSObject, props: LoadingIndicatorProps<T, any, any>): CSSObject => {
+        return {
+            ...base,
+        };
+    },
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    loadingMessage: (base: CSSObject, props: NoticeProps<T, any, any>): CSSObject => {
+        return {
+            ...base,
+        };
+    },
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    menu: (base: CSSObject, props: MenuProps<T, any, any>): CSSObject => {
+        return {
+            ...base,
+            background: theme`colors.neutral.900`,
+            color: theme`colors.neutral.200`,
+        };
+    },
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    menuList: (base: CSSObject, props: MenuListComponentProps<T, any, any>): CSSObject => {
+        return {
+            ...base,
+        };
+    },
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    menuPortal: (base: CSSObject, props: MenuPortalProps<T, any, any>): CSSObject => {
+        return {
+            ...base,
+        };
+    },
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    multiValue: (base: CSSObject, props: MultiValueProps<T, any>): CSSObject => {
+        return {
+            ...base,
+            background: theme`colors.neutral.900`,
+            color: theme`colors.neutral.200`,
+        };
+    },
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    multiValueLabel: (base: CSSObject, props: MultiValueProps<T, any>): CSSObject => {
+        return {
+            ...base,
+            color: theme`colors.neutral.200`,
+        };
+    },
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    multiValueRemove: (base: CSSObject, props: MultiValueRemoveProps<T, any>): CSSObject => {
+        return {
+            ...base,
+        };
+    },
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    noOptionsMessage: (base: CSSObject, props: NoticeProps<T, any, any>): CSSObject => {
+        return {
+            ...base,
+        };
+    },
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    option: (base: CSSObject, props: OptionProps<T, any, any>): CSSObject => {
+        return {
+            ...base,
+            background: theme`colors.neutral.900`,
+
+            ':hover': {
+                background: theme`colors.neutral.700`,
+                cursor: 'pointer',
+            },
+        };
+    },
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    placeholder: (base: CSSObject, props: PlaceholderProps<T, any, any>): CSSObject => {
+        return {
+            ...base,
+            color: theme`colors.neutral.300`,
+            fontSize: '0.875rem',
+        };
+    },
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    singleValue: (base: CSSObject, props: SingleValueProps<T, any>): CSSObject => {
+        return {
+            ...base,
+            color: '#00000',
+        };
+    },
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    valueContainer: (base: CSSObject, props: ValueContainerProps<T, any>): CSSObject => {
+        return {
+            ...base,
+        };
+    },
+};
+
+export interface Option {
+    value: string;
+    label: string;
+}
+
+interface SelectFieldProps {
+    id?: string;
+    name: string;
+    label?: string;
+    description?: string;
+    placeholder?: string;
+    validate?: (value: any) => undefined | string | Promise<any>;
+
+    options: Array<Option>;
+
+    isMulti?: boolean;
+    isSearchable?: boolean;
+
+    isCreatable?: boolean;
+    isValidNewOption?: ((
+        inputValue: string,
+        value: ValueType<any, boolean>,
+        options: ReadonlyArray<any>,
+    ) => boolean) | undefined;
+
+    className?: string;
+}
+
+const SelectField = forwardRef<HTMLElement, SelectFieldProps>(
+    function Select2 ({ id, name, label, description, validate, className, isMulti, isCreatable, ...props }, ref) {
+        const { options } = props;
+
+        const onChange = (options: Option | Option[], name: string, setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void) => {
+            if (isMulti) {
+                setFieldValue(name, (options as Option[]).map(o => o.value));
+                return;
+            }
+
+            setFieldValue(name, (options as Option).value);
+        };
+
+        return (
+            <FormikField innerRef={ref} name={name} validate={validate}>
+                {({ field, form: { errors, touched, setFieldValue } }: FieldProps) => (
+                    <div className={className}>
+                        {label && <Label htmlFor={id}>{label}</Label>}
+                        {isCreatable ?
+                            <Creatable
+                                {...field}
+                                {...props}
+                                styles={SelectStyle}
+                                options={options}
+                                value={(options ? options.find(o => o.value === field.value) : '') as any}
+                                onChange={o => onChange(o, name, setFieldValue)}
+                                isMulti={isMulti}
+                            />
+                            :
+                            <Select
+                                {...field}
+                                {...props}
+                                styles={SelectStyle}
+                                options={options}
+                                value={(options ? options.find(o => o.value === field.value) : '') as any}
+                                onChange={o => onChange(o, name, setFieldValue)}
+                                isMulti={isMulti}
+                            />
+                        }
+                        {touched[field.name] && errors[field.name] ?
+                            <p css={tw`text-red-200 text-xs mt-1`}>
+                                {(errors[field.name] as string).charAt(0).toUpperCase() + (errors[field.name] as string).slice(1)}
+                            </p>
+                            :
+                            description ? <p css={tw`text-neutral-400 text-xs mt-1`}>{description}</p> : null
+                        }
+                    </div>
+                )}
+            </FormikField>
+        );
+    }
+);
+
+interface AsyncSelectFieldProps {
+    id?: string;
+    name: string;
+    label?: string;
+    description?: string;
+    placeholder?: string;
+    validate?: (value: any) => undefined | string | Promise<any>;
+
+    isMulti?: boolean;
+
+    className?: string;
+
+    loadOptions(inputValue: string, callback: (options: Array<Option>) => void): void;
+}
+
+const AsyncSelectField = forwardRef<HTMLElement, AsyncSelectFieldProps>(
+    function AsyncSelect2 ({ id, name, label, description, validate, className, isMulti, ...props }, ref) {
+        const onChange = (options: Option | Option[], name: string, setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void) => {
+            if (isMulti) {
+                setFieldValue(name, (options as Option[]).map(o => Number(o.value)));
+                return;
+            }
+
+            setFieldValue(name, Number((options as Option).value));
+        };
+
+        return (
+            <FormikField innerRef={ref} name={name} validate={validate}>
+                {({ field, form: { errors, touched, setFieldValue } }: FieldProps) => (
+                    <div className={className}>
+                        {label && <Label htmlFor={id}>{label}</Label>}
+                        <Async
+                            {...props}
+                            id={id}
+                            name={name}
+                            styles={SelectStyle}
+                            onChange={o => onChange(o, name, setFieldValue)}
+                            isMulti={isMulti}
+                        />
+                        {touched[field.name] && errors[field.name] ?
+                            <p css={tw`text-red-200 text-xs mt-1`}>
+                                {(errors[field.name] as string).charAt(0).toUpperCase() + (errors[field.name] as string).slice(1)}
+                            </p>
+                            :
+                            description ? <p css={tw`text-neutral-400 text-xs mt-1`}>{description}</p> : null
+                        }
+                    </div>
+                )}
+            </FormikField>
+        );
+    }
+);
+
+export default SelectField;
+export { AsyncSelectField };

resources/scripts/components/elements/activity/ActivityLogEntry.tsx

@@ -44,26 +44,26 @@ export default ({ activity, children }: Props) => {
     const properties = wrapProperties(activity.properties);
 
     return (
-        <div className={'grid grid-cols-10 py-4 border-b-2 border-gray-800 last:rounded-b last:border-0 group'}>
+        <div className={'grid grid-cols-10 py-4 border-b-2 border-slate-800 last:rounded-b last:border-0 group'}>
             <div className={'hidden sm:flex sm:col-span-1 items-center justify-center select-none'}>
-                <div className={'flex items-center w-10 h-10 rounded-full bg-gray-600 overflow-hidden'}>
+                <div className={'flex items-center w-10 h-10 rounded-full bg-slate-600 overflow-hidden'}>
                     <Avatar name={actor?.uuid || 'system'} />
                 </div>
             </div>
             <div className={'col-span-10 sm:col-span-9 flex'}>
                 <div className={'flex-1 px-4 sm:px-0'}>
-                    <div className={'flex items-center text-gray-50'}>
+                    <div className={'flex items-center text-slate-50'}>
                         <Tooltip placement={'top'} content={actor?.email || 'System User'}>
                             <span>{actor?.username || 'System'}</span>
                         </Tooltip>
-                        <span className={'text-gray-400'}>&nbsp;&mdash;&nbsp;</span>
+                        <span className={'text-slate-400'}>&nbsp;&mdash;&nbsp;</span>
                         <Link
                             to={`#${pathTo({ event: activity.event })}`}
                             className={'transition-colors duration-75 active:text-cyan-400 hover:text-cyan-400'}
                         >
                             {activity.event}
                         </Link>
-                        <div className={classNames(style.icons, 'group-hover:text-gray-300')}>
+                        <div className={classNames(style.icons, 'group-hover:text-slate-300')}>
                             {activity.isApi && (
                                 <Tooltip placement={'top'} content={'Using API Key'}>
                                     <TerminalIcon />
@@ -84,7 +84,7 @@ export default ({ activity, children }: Props) => {
                         {activity.ip && (
                             <span>
                                 {activity.ip}
-                                <span className={'text-gray-400'}>&nbsp;|&nbsp;</span>
+                                <span className={'text-slate-400'}>&nbsp;|&nbsp;</span>
                             </span>
                         )}
                         <Tooltip placement={'right'} content={format(activity.timestamp, 'MMM do, yyyy H:mm:ss')}>

resources/scripts/components/elements/activity/ActivityLogMetaButton.tsx

@@ -11,7 +11,7 @@ export default ({ meta }: { meta: Record<string, unknown> }) => {
             <Dialog open={open} onClose={() => setOpen(false)} hideCloseIcon title={'Metadata'}>
                 <pre
                     className={
-                        'bg-gray-900 rounded p-2 font-mono text-sm leading-relaxed overflow-x-scroll whitespace-pre-wrap'
+                        'bg-slate-900 rounded p-2 font-mono text-sm leading-relaxed overflow-x-scroll whitespace-pre-wrap'
                     }
                 >
                     {JSON.stringify(meta, null, 2)}
@@ -23,7 +23,7 @@ export default ({ meta }: { meta: Record<string, unknown> }) => {
             <button
                 aria-describedby={'View additional event metadata'}
                 className={
-                    'p-2 transition-colors duration-100 text-gray-400 group-hover:text-gray-300 group-hover:hover:text-gray-50'
+                    'p-2 transition-colors duration-100 text-slate-400 group-hover:text-slate-300 group-hover:hover:text-slate-50'
                 }
                 onClick={() => setOpen(true)}
             >

resources/scripts/components/elements/activity/style.module.css

@@ -1,8 +1,8 @@
 .icons {
-    @apply flex space-x-1 mx-2 transition-colors duration-100 text-gray-400;
+    @apply flex space-x-1 mx-2 transition-colors duration-100 text-slate-400;
 
     & svg {
-        @apply px-1 py-px cursor-pointer hover:text-gray-50 h-5 w-auto;
+        @apply px-1 py-px cursor-pointer hover:text-slate-50 h-5 w-auto;
     }
 }
 
@@ -10,6 +10,6 @@
     @apply mt-1 text-sm break-words line-clamp-2 pr-4;
 
     & strong {
-        @apply text-gray-50 font-semibold break-all;
+        @apply text-slate-50 font-semibold break-all;
     }
 }

resources/scripts/components/elements/alert/Alert.tsx

@@ -12,7 +12,7 @@ export default ({ type, className, children }: AlertProps) => {
     return (
         <div
             className={classNames(
-                'flex items-center border-l-8 text-gray-50 rounded-md shadow px-4 py-3',
+                'flex items-center border-l-8 text-slate-50 rounded-md shadow px-4 py-3',
                 {
                     ['border-red-500 bg-red-500/25']: type === 'danger',
                     ['border-yellow-500 bg-yellow-500/25']: type === 'warning',

resources/scripts/components/elements/button/style.module.css

@@ -1,7 +1,7 @@
 .button {
     @apply px-4 py-2 inline-flex items-center justify-center;
     @apply rounded text-base font-semibold transition-all duration-100;
-    @apply focus:ring-[3px] focus:ring-offset-2 focus:ring-offset-gray-700 focus:ring-opacity-50;
+    @apply focus:ring-[3px] focus:ring-offset-2 focus:ring-offset-slate-700 focus:ring-opacity-50;
 
     /* Sizing Controls */
     &.small {
@@ -13,7 +13,7 @@
     }
 
     &.secondary {
-        @apply text-gray-50 bg-transparent;
+        @apply text-slate-50 bg-transparent;
 
         &:disabled {
             background: transparent !important;
@@ -47,20 +47,20 @@
 }
 
 .text {
-    @apply bg-gray-500 text-gray-50;
-    @apply hover:bg-gray-400 active:bg-gray-400 focus:ring-gray-300 focus:ring-opacity-50;
+    @apply bg-slate-500 text-slate-50;
+    @apply hover:bg-slate-400 active:bg-slate-400 focus:ring-slate-300 focus:ring-opacity-50;
 
     &.secondary {
-        @apply hover:bg-gray-500 active:bg-gray-500;
+        @apply hover:bg-slate-500 active:bg-slate-500;
     }
 
     &:disabled {
-        @apply bg-gray-500/75 text-gray-200/75;
+        @apply bg-slate-500/75 text-slate-200/75;
     }
 }
 
 .danger {
-    @apply bg-red-600 text-gray-50;
+    @apply bg-red-600 text-slate-50;
     @apply hover:bg-red-500 active:bg-red-500 focus:ring-red-400 focus:ring-opacity-75;
 
     &.secondary {

resources/scripts/components/elements/dialog/Dialog.tsx

@@ -73,7 +73,7 @@ export default ({
                         open={open}
                         onClose={onDialogClose}
                     >
-                        <div className={'fixed inset-0 bg-gray-900/50 z-40'} />
+                        <div className={'fixed inset-0 bg-slate-900/50 z-40'} />
                         <div className={'fixed inset-0 overflow-y-auto z-50'}>
                             <div
                                 ref={container}

resources/scripts/components/elements/dialog/DialogFooter.tsx

@@ -8,7 +8,9 @@ export default ({ children }: { children: React.ReactNode }) => {
 
     useDeepCompareEffect(() => {
         setFooter(
-            <div className={'px-6 py-3 bg-gray-700 flex items-center justify-end space-x-3 rounded-b'}>{children}</div>,
+            <div className={'px-6 py-3 bg-slate-700 flex items-center justify-end space-x-3 rounded-b'}>
+                {children}
+            </div>,
         );
     }, [children]);