postbase 0.1.0

package/admin/package.json

@@ -0,0 +1,27 @@
+{
+    "name": "postbase-admin",
+    "version": "0.1.0",
+    "license": "MIT",
+    "author": "Umair Ashraf",
+    "url": "http://github.com/umrashrf/postbase",
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "preview": "vite preview"
+    },
+    "dependencies": {
+        "@postbase/frontend": "file:../frontend/lib/postbase",
+        "@tailwindcss/vite": "^4.1.11",
+        "better-auth": "^1.3.34",
+        "flowbite": "^4.0.1",
+        "moment": "^2.30.1",
+        "preact": "^10.27.0",
+        "preact-iso": "^2.9.1",
+        "preact-router": "^4.1.2",
+        "tailwindcss": "^4.1.11"
+    },
+    "devDependencies": {
+        "@preact/preset-vite": "^2.9.3",
+        "vite": "^6.0.4"
+    }
+}

package/admin/src/App.jsx

@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'preact/hooks';
+import { Router } from 'preact-router';
+import Header from './components/Header';
+import Home from './pages/Home';
+import Dashboard from './pages/Dashboard';
+import Login from './pages/Login';
+import { getSession } from './auth';
+import Users from './pages/authentication/Users';
+import Database from './pages/firestore/Database';
+import Files from './pages/storage/files';
+
+export default function App() {
+    const [user, setUser] = useState(null);
+
+    useEffect(() => {
+        (async () => {
+            const { data } = await getSession();
+            if (data && data.hasOwnProperty('user')) {
+                setUser(data.user);
+            }
+        })();
+    }, []);
+
+    return (
+        <div className="bg-[#131312] text-white">
+            <div class="flex">
+                <Header user={user} />
+
+                <div class="w-full">
+                    <Router>
+                        <Home path="/" user={user} />
+                        <Dashboard path="/dashboard" user={user} />
+                        <Login path="/login" user={user} />
+                        <Users path="/project/0/authentication/users" user={user} />
+                        <Database path="/project/0/firestore/databases/-default-/data" user={user} />
+                        <Files path="/project/0/storage" user={user} />
+                    </Router>
+
+                    <footer className="bg-[#131312] text-white py-6">
+                        <div className="container mx-auto text-center text-sm">
+                            © {new Date().getFullYear()} Postbase Demo
+                        </div>
+                    </footer>
+                </div>
+            </div>
+        </div>
+    );
+}

package/admin/src/auth.js

@@ -0,0 +1,11 @@
+import { createAuthClient } from 'better-auth/client';
+import { adminClient } from "better-auth/client/plugins"
+
+export const authClient = createAuthClient({
+    baseURL: import.meta.env.VITE_API_BASE + '/auth', // Specify if on a different domain/path,
+    plugins: [
+        adminClient()
+    ],
+});
+
+export const { signUp, signIn, signOut, getSession } = authClient;

package/admin/src/common/formatDateTime.js

@@ -0,0 +1,18 @@
+import moment from 'moment';
+
+export const formatDateTime = (datetime, timezoneOffset) => {
+    const mDate = moment(datetime);
+    let today = moment();
+
+    if (timezoneOffset) {
+        today = today.utcOffset(timezoneOffset);
+    }
+
+    if (mDate.isSame(today, "day")) {
+        return "Today, " + mDate.format("MMM D") + " at " + mDate.format("hh:mma");
+    } else if (mDate.isSame(today.clone().add(1, "day"), "day")) {
+        return "Tomorrow, " + mDate.format("MMM D") + " at " + mDate.format("hh:mma");
+    } else {
+        return mDate.format("ddd, MMM D") + " at " + mDate.format("hh:mma");
+    }
+};

package/admin/src/components/AuthPanel.jsx

@@ -0,0 +1,88 @@
+import { useState } from 'preact/hooks';
+import { signUp, signIn, signOut } from '../auth';
+
+export default function AuthPanel({ user }) {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+
+    const loginWithGoogle = async () => {
+        alert("Finish setting up Sign in with Google. Learn more at https://www.better-auth.com/docs/authentication/google");
+        await signIn.social({
+            provider: "google",
+            callbackURL: import.meta.env.VITE_FRONTEND_URL + '/dashboard'
+        });
+    };
+
+    return (
+        <div class="px-4">
+            <h2 class="text-3xl py-4">Login</h2>
+            <div className="text-white border rounded-lg p-4">
+                <h3 className="font-semibold">Account</h3>
+                {!user ? (
+                    <div className="mt-3 space-y-3">
+                        <button onClick={loginWithGoogle} className="w-full bg-red-600 py-2 rounded">Sign in with Google</button>
+
+                        <div className="flex gap-2">
+                            <input className="flex-1 border p-2 rounded bg-transparent" type="text" placeholder="email" value={email} onInput={e => setEmail(e.target.value)} />
+                            <input className="flex-1 border p-2 rounded bg-transparent" type="password" placeholder="password" value={password} onInput={e => setPassword(e.target.value)} />
+                        </div>
+
+                        <div className="flex gap-2">
+                            <button className="px-3 py-2 border rounded"
+                                onClick={async () => {
+                                    alert("Setup PostgreSQL (migration, connection string). Learn more at https://www.better-auth.com/docs/installation#create-database-tables");
+                                    await signUp.email(
+                                        { email, password, name: email.split('@', 1)[0], callbackURL: "/dashboard" },
+                                        {
+                                            onRequest: (ctx) => {
+                                                //show loading
+                                            },
+                                            onSuccess: (ctx) => {
+                                                //redirect to the dashboard or sign in page
+                                                window.location = import.meta.env.VITE_FRONTEND_URL;
+                                            },
+                                            onError: (ctx) => {
+                                                // display the error message
+                                                console.error('Sign up failed', ctx);
+                                                alert('Sign up failed');
+                                            },
+                                        });
+                                }}>
+                                Sign up
+                            </button>
+                            <button className="px-3 py-2 border rounded"
+                                onClick={async () => {
+                                    alert("Setup PostgreSQL (migration, connection string). Learn more at https://www.better-auth.com/docs/installation#create-database-tables");
+                                    await signIn.email({ email, password, callbackURL: '/dashboard' });
+                                }}>
+                                Login
+                            </button>
+                        </div>
+                    </div>
+                ) : (
+                    <div className="mt-3">
+                        <div className="flex items-center gap-3">
+                            <img src={user.image} className="w-10 h-10 rounded-full" />
+                            <div>
+                                <div className="font-medium">{user.name || user.email}</div>
+                                <div className="text-sm text-gray-500">{user.email}</div>
+                            </div>
+                        </div>
+
+                        <div className="mt-3 flex gap-2">
+                            <a href="/dashboard" className="px-3 py-2 border rounded">Dashboard</a>
+                            <a href="/billing" className="px-3 py-2 border rounded">Billing</a>
+                            <button onClick={() => signOut({
+                                fetchOptions: {
+                                    onSuccess: () => {
+                                        location.href = import.meta.env.VITE_FRONTEND_URL;
+                                    },
+                                },
+                            })} className="px-3 py-2 border rounded cursor-pointer">Logout</button>
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

package/admin/src/components/Header.jsx

@@ -0,0 +1,67 @@
+import { useState, useEffect } from 'preact/hooks';
+import { signOut } from '../auth';
+
+export default function Header({ user }) {
+    const [menu, setMenu] = useState(false);
+    const [scrolled, setScrolled] = useState(false);
+
+    useEffect(() => {
+        const onScroll = () => setScrolled(window.scrollY > 30);
+        window.addEventListener('scroll', onScroll);
+        return () => window.removeEventListener('scroll', onScroll);
+    }, []);
+
+    return (
+        <header className={`max-w-[50px] md:max-w-[200px] min-h-screen z-40 transition-all bg-[#212020] text-white ${scrolled ? 'shadow' : ''} backdrop-blur`}>
+            <div className="max-w-6xl mx-auto px-2 md:px-4 py-4 flex gap-8 flex-col justify-between">
+                <a href="/" className="text-2xl font-extrabold">
+                    <img src="/assets/img/icon-transparent.png" class="max-w-[40px] md:w-auto" />
+                    <span class="hidden md:inline">Postbase Admin</span>
+                </a>
+                <nav className="flex flex-col gap-2 text-sm font-medium">
+                    <a href="/project/0/authentication/users" className="hover:text-blue-600">
+                        <span class="md:hidden">Auth</span>
+                        <span class="hidden md:inline">Authentication</span>
+                    </a>
+                    <a href="/project/0/firestore/databases/-default-/data" className="hover:text-blue-600">
+                        <span class="md:hidden">DB</span>
+                        <span class="hidden md:inline">Firestore</span>
+                    </a>
+                    <a href="/project/0/storage" className="hover:text-blue-600">
+                        <span class="md:hidden">Store</span>
+                        <span class="hidden md:inline">Storage</span>
+                    </a>
+                </nav>
+
+                <div className="flex items-center gap-4">
+                    {user ? (
+                        <div className="relative">
+                            <button onClick={() => setMenu(!menu)} className="flex items-center gap-2 px-3 py-1 border rounded-md hover:bg-gray-500">
+                                <img src={user.image} className="w-8 h-8 rounded-full" alt="profile" />
+                                <span className="hidden sm:inline text-sm">{user.name || user.email}</span>
+                            </button>
+                            {menu && (
+                                <div className="absolute right-0 mt-2 border rounded-md shadow-lg w-48 z-50">
+                                    <a href="/dashboard" className="block px-4 py-2 hover:bg-gray-500">Dashboard</a>
+                                    <a href="/billing" className="block px-4 py-2 hover:bg-gray-500">Billing</a>
+                                    <button onClick={() => signOut({
+                                        fetchOptions: {
+                                            onSuccess: () => {
+                                                location.href = import.meta.env.VITE_FRONTEND_URL;
+                                            },
+                                        },
+                                    })} className="w-full text-left px-4 py-2 hover:bg-gray-700 cursor-pointer">Logout</button>
+                                </div>
+                            )}
+                        </div>
+                    ) : (
+                        <a href="/login" className="bg-blue-600 text-white px-3 md:px-4 py-2 rounded-md font-medium hover:bg-blue-700 transition">
+                            <span class="md:hidden">&gt;</span>
+                            <span class="hidden md:inline">Sign In</span>
+                        </a>
+                    )}
+                </div>
+            </div>
+        </header>
+    );
+}

package/admin/src/main.jsx

@@ -0,0 +1,6 @@
+import 'flowbite';
+import { render } from 'preact';
+import App from './App';
+import './styles.css';
+
+render(<App />, document.getElementById('app'));

package/admin/src/pages/Dashboard.jsx

@@ -0,0 +1,24 @@
+import { authClient } from '../auth';
+
+export default function Dashboard({ user }) {
+    if (!user) {
+        return (
+            <div className="container mx-auto py-10 text-center">
+                <p className="text-gray-600">Please sign in to view your dashboard.</p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="container mx-auto py-10">
+            <h1 className="text-2xl font-semibold mb-6">Dashboard</h1>
+            <div className="mt-2">
+                <button className="w-full bg-red-600 text-white py-2 rounded cursor-pointer"
+                    onClick={async e => {
+                        await authClient.deleteUser();
+                        location.href = '/';
+                    }}>Close Account</button>
+            </div>
+        </div>
+    );
+}

package/admin/src/pages/Home.jsx

@@ -0,0 +1,52 @@
+import AuthPanel from '../components/AuthPanel';
+
+export default function Home({ user }) {
+    return (
+        <main className="">
+            {/* HERO */}
+            <section className="bg-[#131312] text-white pt-24 pb-32">
+                <div className="max-w-6xl mx-auto px-6 grid md:grid-cols-2 gap-10 items-center">
+                    <div>
+                        <h1 className="text-5xl font-extrabold leading-tight">
+                            Active Users
+                        </h1>
+
+                        <img src="assets/img/chart-active-users.png" />
+                    </div>
+
+                    <div className="relative">
+                        <div>
+                            <h1 className="text-5xl font-extrabold leading-tight">
+                                Live Users
+                            </h1>
+
+                            <img src="assets/img/chart-active-users.png" />
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section className="bg-[#131312] text-white pt-24 pb-32">
+                <div className="max-w-6xl mx-auto px-6 grid md:grid-cols-2 gap-10 items-center">
+                    <div>
+                        <h1 className="text-5xl font-extrabold leading-tight">
+                            Active Users
+                        </h1>
+
+                        <img src="assets/img/chart-active-users.png" />
+                    </div>
+
+                    <div className="relative">
+                        <div>
+                            <h1 className="text-5xl font-extrabold leading-tight">
+                                Live Users
+                            </h1>
+
+                            <img src="assets/img/chart-active-users.png" />
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </main>
+    );
+}

package/admin/src/pages/Login.jsx

@@ -0,0 +1,10 @@
+import { h } from 'preact';
+import AuthPanel from '../components/AuthPanel';
+
+export default function Login({ user }) {
+    return (
+        <div className="container mx-auto py-10">
+            <AuthPanel user={user} />
+        </div>
+    );
+}

package/admin/src/pages/authentication/Users.jsx

@@ -0,0 +1,199 @@
+import { useEffect, useState } from "preact/hooks";
+import { authClient } from "../../auth";
+import { formatDateTime } from "../../common/formatDateTime";
+
+export default function Users({ user }) {
+    const [users, setUsers] = useState(null);
+
+    useEffect(() => {
+        (async () => {
+            const { data, error } = await authClient.admin.listUsers({
+                query: {
+                    limit: 100,
+                    offset: 0,
+                    sortBy: "createdAt",
+                    sortDirection: "desc",
+                },
+            });
+            setUsers(data.users);
+        })();
+    }, []);
+
+    return <div class="p-4">
+        <h2 class="text-3xl">Authentication</h2>
+
+        <div class="text-sm font-medium text-center text-body border-b border-default">
+            <ul class="flex flex-wrap -mb-px" data-tabs-toggle="#default-styled-tab-content" data-tabs-active-classes="text-purple hover:text-purple border-purple" data-tabs-inactive-classes="dark:border-transparent text-body hover:text-fg-brand border-default hover:border-brand">
+                <li class="me-2">
+                    <a href="#" class="inline-block p-4 border-b border-transparent rounded-t-base hover:text-fg-brand hover:border-brand" aria-current="page">Users</a>
+                </li>
+                <li class="me-2">
+                    <a href="#" class="inline-block p-4 text-fg-brand border-b border-brand rounded-t-base active">Sign-in method</a>
+                </li>
+                <li class="me-2">
+                    <a href="#" class="inline-block p-4 border-b border-transparent rounded-t-base hover:text-fg-brand hover:border-brand">Templates</a>
+                </li>
+                <li class="me-2">
+                    <a href="#" class="inline-block p-4 border-b border-transparent rounded-t-base hover:text-fg-brand hover:border-brand">Usage</a>
+                </li>
+                <li>
+                    <a class="inline-block p-4 text-fg-disabled rounded-t-base cursor-not-allowed dark:text-body">Settings</a>
+                </li>
+            </ul>
+        </div>
+
+        <div>
+            {users && users.length > 0 &&
+                <div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
+                    <div class="flex items-center justify-between flex-column md:flex-row flex-wrap space-y-4 md:space-y-0 p-4">
+                        <div>
+                            <button id="dropdownDefaultButton2" data-dropdown-toggle="dropdown-2" class="inline-flex items-center justify-center text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-4 focus:ring-neutral-tertiary shadow-xs font-medium leading-5 rounded-base text-sm px-3 py-2 focus:outline-none" type="button">
+                                Action
+                                <svg class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7" /></svg>
+                            </button>
+                            <div id="dropdown-2" class="z-10 hidden bg-neutral-primary-medium border border-default-medium rounded-base shadow-lg w-32">
+                                <ul class="p-2 text-sm text-body font-medium" aria-labelledby="dropdownDefaultButton2">
+                                    <li>
+                                        <a href="#" class="inline-flex items-center w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded">Reward</a>
+                                    </li>
+                                    <li>
+                                        <a href="#" class="inline-flex items-center w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded">Promote</a>
+                                    </li>
+                                    <li>
+                                        <a href="#" class="inline-flex items-center w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded">Archive</a>
+                                    </li>
+                                    <li>
+                                        <a href="#" class="inline-flex items-center w-full p-2 text-fg-danger hover:bg-neutral-tertiary-medium rounded">Delete</a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                        <label for="input-group-1" class="sr-only">Search</label>
+                        <div class="relative">
+                            <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
+                                <svg class="w-4 h-4 text-body" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="m21 21-3.5-3.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z" /></svg>
+                            </div>
+                            <input type="text" id="input-group-1" class="block w-full max-w-96 ps-9 pe-3 py-2 bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand shadow-xs placeholder:text-body" placeholder="Search" />
+                        </div>
+                    </div>
+                    <table class="w-full text-sm text-left rtl:text-right text-body">
+                        <thead class="text-sm text-body bg-neutral-secondary-medium border-b border-t border-default-medium">
+                            <tr>
+                                <th scope="col" class="p-4">
+                                    <div class="flex items-center">
+                                        <input id="table-checkbox-51" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft" />
+                                        <label for="table-checkbox-51" class="sr-only">Table checkbox</label>
+                                    </div>
+                                </th>
+                                <th scope="col" class="px-6 py-3 font-medium">
+                                    Name
+                                </th>
+                                <th scope="col" class="px-6 py-3 font-medium">
+                                    Providers
+                                </th>
+                                <th scope="col" class="px-6 py-3 font-medium">
+                                    Created
+                                </th>
+                                <th scope="col" class="px-6 py-3 font-medium">
+                                    Signed In
+                                </th>
+                                <th scope="col" class="px-6 py-3 font-medium">
+                                    User UID
+                                </th>
+                                <th scope="col" class="px-6 py-3 font-medium">
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {users.map(u => <tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
+                                <td class="w-4 p-4">
+                                    <div class="flex items-center">
+                                        <input id="table-checkbox-52" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft" />
+                                        <label for="table-checkbox-52" class="sr-only">Table checkbox</label>
+                                    </div>
+                                </td>
+                                <td scope="row" class="flex items-center px-6 py-4 text-heading whitespace-nowrap">
+                                    <img class="w-10 h-10 rounded-full" src={u.image} alt="Jese image" />
+                                    <div class="ps-3">
+                                        <div class="text-base font-semibold">{u.name}</div>
+                                        <div class="font-normal text-body">{u.email}</div>
+                                    </div>
+                                </td>
+                                <td class="px-6 py-4">
+                                    {u.image.includes('googleusercontent.com') ? 'Google' : 'Email'}
+                                </td>
+                                <td class="px-6 py-4">
+                                    <div class="flex items-center">
+                                        <div class="h-2.5 w-2.5 rounded-full bg-success me-2"></div> {formatDateTime(u.createdAt)}
+                                    </div>
+                                </td>
+                                <td class="px-6 py-4">
+                                    <div class="flex items-center">
+                                        <div class="h-2.5 w-2.5 rounded-full bg-success me-2"></div> {formatDateTime(u.updatedAt)}
+                                    </div>
+                                </td>
+                                <td class="px-6 py-4">
+                                    <div class="flex items-center">
+                                        <div class="h-2.5 w-2.5 rounded-full bg-success me-2"></div> {u.id}
+                                    </div>
+                                </td>
+                                <td class="px-6 py-4">
+                                    <a href="#" type="button" data-modal-target="editUserModal" data-modal-show="editUserModal" class="font-medium text-fg-brand hover:underline">Edit user</a>
+                                </td>
+                            </tr>)}
+                        </tbody>
+                    </table>
+
+                    <div id="editUserModal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
+                        <div class="relative p-4 w-full max-w-md max-h-full">
+
+                            <div class="relative bg-neutral-primary-soft border border-default rounded-base shadow-sm p-4 md:p-6">
+
+                                <div class="flex items-center justify-between border-b border-default pb-4 md:pb-5">
+                                    <h3 class="text-lg font-medium text-heading">
+                                        Create new product
+                                    </h3>
+                                    <button type="button" class="text-body bg-transparent hover:bg-neutral-tertiary hover:text-heading rounded-base text-sm w-9 h-9 ms-auto inline-flex justify-center items-center" data-modal-hide="editUserModal">
+                                        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6" /></svg>
+                                        <span class="sr-only">Close modal</span>
+                                    </button>
+                                </div>
+
+                                <form action="#">
+                                    <div class="grid gap-4 grid-cols-2 py-4 md:py-6">
+                                        <div class="col-span-2">
+                                            <label for="name" class="block mb-2.5 text-sm font-medium text-heading">Name</label>
+                                            <input type="text" name="name" id="name" class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full px-3 py-2.5 shadow-xs placeholder:text-body" placeholder="Bonnie Green" required="" />
+                                        </div>
+                                        <div class="col-span-2 sm:col-span-1">
+                                            <label for="position" class="block mb-2.5 text-sm font-medium text-heading">Position</label>
+                                            <input type="text" name="position" id="position" class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full px-3 py-2.5 shadow-xs placeholder:text-body" placeholder="React Developer" required="" />
+                                        </div>
+                                        <div class="col-span-2 sm:col-span-1">
+                                            <label for="category" class="block mb-2.5 text-sm font-medium text-heading">Status</label>
+                                            <select id="category" class="block w-full px-3 py-2.5 bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand px-3 py-2.5 shadow-xs placeholder:text-body">
+                                                <option selected="">Online</option>
+                                                <option value="offline">Offline</option>
+                                                <option value="archived">Archived</option>
+                                            </select>
+                                        </div>
+                                        <div class="col-span-2">
+                                            <label for="biography" class="block mb-2.5 text-sm font-medium text-heading">Biography</label>
+                                            <textarea id="biography" rows="4" class="block bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full p-3.5 shadow-xs placeholder:text-body" placeholder="Write a short biography here"></textarea>
+                                        </div>
+                                    </div>
+                                    <div class="flex items-center space-x-4 border-t border-default pt-4 md:pt-6">
+                                        <button type="submit" class="inline-flex items-center  text-white bg-brand hover:bg-brand-strong box-border border border-transparent focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">
+                                            Update user
+                                        </button>
+                                        <button data-modal-hide="crud-modal" type="button" class="text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-4 focus:ring-neutral-tertiary shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">Cancel</button>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            }
+        </div>
+    </div>;
+}

package/admin/src/pages/firestore/Database.jsx

@@ -0,0 +1,29 @@
+export default function Database({ user }) {
+    return <div class="p-4">
+        <h2 class="text-3xl">Database</h2>
+
+        <div class="text-sm font-medium text-center text-body border-b border-default">
+            <ul class="flex flex-wrap -mb-px" data-tabs-toggle="#default-styled-tab-content" data-tabs-active-classes="text-purple hover:text-purple border-purple" data-tabs-inactive-classes="dark:border-transparent text-body hover:text-fg-brand border-default hover:border-brand">
+                <li class="me-2">
+                    <a href="#" class="inline-block p-4 border-b border-transparent rounded-t-base hover:text-fg-brand hover:border-brand" aria-current="page">Data</a>
+                </li>
+                <li class="me-2">
+                    <a href="#" class="inline-block p-4 text-fg-brand border-b border-brand rounded-t-base active">Rules</a>
+                </li>
+                <li class="me-2">
+                    <a href="#" class="inline-block p-4 border-b border-transparent rounded-t-base hover:text-fg-brand hover:border-brand">Indexes</a>
+                </li>
+                <li class="me-2">
+                    <a href="#" class="inline-block p-4 border-b border-transparent rounded-t-base hover:text-fg-brand hover:border-brand">Disaster Recovery</a>
+                </li>
+                <li>
+                    <a class="inline-block p-4 text-fg-disabled rounded-t-base cursor-not-allowed dark:text-body">Usage</a>
+                </li>
+                <li>
+                    <a class="inline-block p-4 text-fg-disabled rounded-t-base cursor-not-allowed dark:text-body">Query Insights</a>
+                </li>
+            </ul>
+        </div>
+
+    </div>;
+}

package/admin/src/pages/storage/files.jsx

@@ -0,0 +1,29 @@
+export default function Files({ user }) {
+    return <div class="p-4">
+        <h2 class="text-3xl">Files</h2>
+
+        <div class="text-sm font-medium text-center text-body border-b border-default">
+            <ul class="flex flex-wrap -mb-px" data-tabs-toggle="#default-styled-tab-content" data-tabs-active-classes="text-purple hover:text-purple border-purple" data-tabs-inactive-classes="dark:border-transparent text-body hover:text-fg-brand border-default hover:border-brand">
+                <li class="me-2">
+                    <a href="#" class="inline-block p-4 border-b border-transparent rounded-t-base hover:text-fg-brand hover:border-brand" aria-current="page">Data</a>
+                </li>
+                <li class="me-2">
+                    <a href="#" class="inline-block p-4 text-fg-brand border-b border-brand rounded-t-base active">Rules</a>
+                </li>
+                <li class="me-2">
+                    <a href="#" class="inline-block p-4 border-b border-transparent rounded-t-base hover:text-fg-brand hover:border-brand">Indexes</a>
+                </li>
+                <li class="me-2">
+                    <a href="#" class="inline-block p-4 border-b border-transparent rounded-t-base hover:text-fg-brand hover:border-brand">Disaster Recovery</a>
+                </li>
+                <li>
+                    <a class="inline-block p-4 text-fg-disabled rounded-t-base cursor-not-allowed dark:text-body">Usage</a>
+                </li>
+                <li>
+                    <a class="inline-block p-4 text-fg-disabled rounded-t-base cursor-not-allowed dark:text-body">Query Insights</a>
+                </li>
+            </ul>
+        </div>
+
+    </div>;
+}