feat: add backpex admin dashboard

.formatter.exs

@@ -1,5 +1,5 @@
 [
-  import_deps: [:ecto, :ecto_sql, :phoenix],
+  import_deps: [:ecto, :ecto_sql, :backpex, :phoenix],
   subdirectories: ["priv/*/migrations"],
   plugins: [Phoenix.LiveView.HTMLFormatter],
   inputs: ["*.{heex,ex,exs}", "{config,lib,test}/**/*.{heex,ex,exs}", "priv/*/seeds.exs"]

assets/css/app.css

@@ -1,10 +1,13 @@
-@import "tailwindcss";
-@import "tw-animate-css";
+@import 'tailwindcss';
+@import 'tw-animate-css';
 
-@plugin "@tailwindcss/forms";
 @plugin "./lucide.plugin.js";
 
 @custom-variant dark (&:where(.dark, .dark *));
+@plugin "daisyui" {
+  themes:
+    light --default, dark
+}
 
 @custom-variant phx-click-loading ([".phx-click-loading&", ".phx-click-loading &"]);
 @custom-variant phx-submit-loading ([".phx-submit-loading&", ".phx-submit-loading &"]);
@@ -15,6 +18,8 @@
 @source "../../lib/katana_web/**/*.html.heex";
 @source "../vue/**/*.vue";
 @source "../../lib/**/*.vue";
+@source "../../deps/backpex/**/*.*ex";
+@source "../../deps/backpex/assets/js/**/*.*js";
 
 @theme inline {
   --color-background: var(--background);

assets/js/app.js

@@ -1,44 +1,29 @@
-// If you want to use Phoenix channels, run `mix help phx.gen.channel`
-// to get started and then uncomment the line below.
-// import "./user_socket.js"
+import 'phoenix_html';
+import '../css/app.css';
 
-// You can include dependencies in two ways.
-//
-// The simplest option is to put them in assets/vendor and
-// import them using relative paths:
-//
-//     import "../vendor/some-package.js"
-//
-// Alternatively, you can `npm install some-package --prefix assets` and import
-// them using a path starting with the package name:
-//
-//     import "some-package"
-//
-
-// Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
-import "phoenix_html";
-// Establish Phoenix Socket and LiveView configuration.
-import { Socket } from "phoenix";
-import { LiveSocket } from "phoenix_live_view";
-import topbar from "topbar";
-import { getHooks } from "live_vue";
-import liveVueApp from "../vue";
-
-import "../css/app.css";
+import { Hooks as BackpexHooks } from './../../deps/backpex/assets/js/backpex.js';
+import { LiveSocket } from 'phoenix_live_view';
+import { Socket } from 'phoenix';
+import { getHooks } from 'live_vue';
+import liveVueApp from '../vue';
+import topbar from 'topbar';
 
 let csrfToken = document
   .querySelector("meta[name='csrf-token']")
-  .getAttribute("content");
-let liveSocket = new LiveSocket("/live", Socket, {
+  .getAttribute('content');
+
+const VueHooks = getHooks(liveVueApp);
+
+const liveSocket = new LiveSocket('/live', Socket, {
   longPollFallbackMs: 2500,
   params: { _csrf_token: csrfToken },
-  hooks: getHooks(liveVueApp),
+  hooks: { ...VueHooks, ...BackpexHooks },
 });
 
 // Show progress bar on live navigation and form submits
-topbar.config({ barColors: { 0: "#29d" }, shadowColor: "rgba(0, 0, 0, .3)" });
-window.addEventListener("phx:page-loading-start", (_info) => topbar.show(300));
-window.addEventListener("phx:page-loading-stop", (_info) => topbar.hide());
+topbar.config({ barColors: { 0: '#29d' }, shadowColor: 'rgba(0, 0, 0, .3)' });
+window.addEventListener('phx:page-loading-start', (_info) => topbar.show(300));
+window.addEventListener('phx:page-loading-stop', (_info) => topbar.hide());
 
 // connect if there are any LiveViews on the page
 liveSocket.connect();

assets/package.json

@@ -12,6 +12,7 @@
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/vite": "^4.1.11",
     "@vitejs/plugin-vue": "^5.0.4",
+    "daisyui": "^5.0.50",
     "prettier": "3.6.2",
     "tailwindcss": "^4.1.11",
     "typescript": "^5.4.5",

config/config.exs

@@ -39,6 +39,9 @@ config :logger, :console,
 # Use Jason for JSON parsing in Phoenix
 config :phoenix, :json_library, Jason
 
+# COnfigure backpex
+config :backpex, :pubsub_server, Katana.PubSub
+
 # Import environment specific config. This must remain at the bottom
 # of this file so it overrides the configuration defined above.
 import_config "#{config_env()}.exs"

lib/katana_web/layouts/admin.html.heex

@@ -0,0 +1,22 @@
+<Backpex.HTML.Layout.app_shell fluid={@fluid?}>
+  <:topbar>
+    <Backpex.HTML.Layout.topbar_dropdown class="mr-2 md:mr-0">
+      <:label>
+        <label tabindex="0" class="btn btn-square btn-ghost">
+          <Backpex.HTML.CoreComponents.icon name="hero-user" class="size-6" />
+        </label>
+      </:label>
+      <li>
+        <.link href="/" class="text-error flex justify-between hover:bg-base-200">
+          <p>Logout</p>
+          <Backpex.HTML.CoreComponents.icon name="hero-arrow-right-on-rectangle" class="size-5" />
+        </.link>
+      </li>
+    </Backpex.HTML.Layout.topbar_dropdown>
+  </:topbar>
+  <:sidebar>
+    <!-- Sidebar Content -->
+  </:sidebar>
+  <Backpex.HTML.Layout.flash_messages flash={@flash} />
+  {@inner_content}
+</Backpex.HTML.Layout.app_shell>

lib/katana_web/layouts/root.html.heex

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="[scrollbar-gutter:stable]">
+<html lang="en" class="[scrollbar-gutter:stable]" data-theme="">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -13,7 +13,7 @@
       </script>
     </LiveVue.Reload.vite_assets>
   </head>
-  <body class="bg-white">
+  <body class="">
     <.flash_group flash={@flash} />
     {@inner_content}
   </body>

lib/katana_web/live/admin/user_live.ex

@@ -0,0 +1,37 @@
+defmodule KatanaWeb.UserLive do
+  use Backpex.LiveResource,
+    adapter_config: [
+      schema: Katana.Accounts.User,
+      repo: Katana.Repo,
+      update_changeset: &Katana.Accounts.User.update_changeset/3,
+      create_changeset: &Katana.Accounts.User.registration_changeset/3
+    ],
+    layout: {KatanaWeb.Layouts, :admin}
+
+  @impl Backpex.LiveResource
+  def singular_name, do: "User"
+
+  @impl Backpex.LiveResource
+  def plural_name, do: "Users"
+
+  @impl Backpex.LiveResource
+  def fields do
+    [
+      name: %{
+        module: Backpex.Fields.Text,
+        label: "Name",
+        placeholder: "Enter full name"
+      },
+      email: %{
+        module: Backpex.Fields.Text,
+        label: "Email",
+        placeholder: "Enter email address"
+      },
+      password: %{
+        module: Backpex.Fields.Text,
+        label: "Password",
+        placeholder: "Enter password"
+      },
+    ]
+  end
+end

lib/katana_web/router.ex

@@ -21,6 +21,20 @@ defmodule KatanaWeb.Router do
     live "/", HomeLive, :index
   end
 
+  ## Admin Panel
+
+  import Backpex.Router
+
+  scope "/admin", KatanaWeb do
+    pipe_through :browser
+
+    backpex_routes()
+
+    live_session :default, on_mount: Backpex.InitAssigns do
+      live_resources "/users", UserLive
+    end
+  end
+
   # Enable LiveDashboard and Swoosh mailbox preview in development
   if Application.compile_env(:katana, :dev_routes) do
     # If you want to use the LiveDashboard in production, you should put

mix.exs

@@ -65,6 +65,9 @@ defmodule Katana.MixProject do
       {:swoosh, "~> 1.5"},
       {:finch, "~> 0.13"},
 
+      # admin panel
+      {:backpex, "~> 0.14.0"},
+
       # telemetry
       {:phoenix_live_dashboard, "~> 0.8.3"},
       {:telemetry_metrics, "~> 1.0"},