Packages

phoenix_kit

1.7.4
1.7.210 1.7.209 1.7.208 1.7.207 1.7.206 1.7.205 1.7.204 1.7.203 1.7.202 1.7.201 1.7.200 1.7.199 1.7.198 1.7.197 1.7.196 1.7.194 1.7.193 1.7.192 1.7.191 1.7.190 1.7.189 1.7.187 1.7.186 1.7.185 1.7.184 1.7.183 1.7.182 1.7.181 1.7.180 1.7.179 1.7.178 1.7.177 1.7.176 1.7.175 1.7.174 1.7.173 1.7.172 1.7.171 1.7.170 1.7.169 1.7.168 1.7.167 1.7.166 1.7.165 1.7.164 1.7.162 1.7.161 1.7.160 1.7.159 1.7.157 1.7.156 1.7.155 1.7.154 1.7.153 1.7.152 1.7.151 1.7.150 1.7.149 1.7.146 1.7.145 1.7.144 1.7.143 1.7.138 1.7.133 1.7.132 1.7.131 1.7.130 1.7.128 1.7.126 1.7.125 1.7.121 1.7.120 1.7.119 1.7.118 1.7.117 1.7.116 1.7.115 1.7.114 1.7.113 1.7.112 1.7.111 1.7.110 1.7.109 1.7.108 1.7.107 1.7.106 1.7.105 1.7.104 1.7.103 1.7.102 1.7.101 1.7.100 1.7.99 1.7.98 1.7.97 1.7.96 1.7.95 1.7.94 1.7.93 1.7.92 1.7.91 1.7.90 1.7.89 1.7.88 1.7.87 1.7.86 1.7.85 1.7.84 1.7.83 1.7.82 1.7.81 1.7.80 1.7.79 1.7.78 1.7.77 1.7.76 1.7.75 1.7.74 1.7.71 1.7.70 1.7.69 1.7.66 1.7.65 1.7.64 1.7.63 1.7.62 1.7.61 1.7.59 1.7.58 1.7.57 1.7.56 1.7.55 1.7.54 1.7.53 1.7.52 1.7.51 1.7.49 1.7.44 1.7.43 1.7.42 1.7.41 1.7.39 1.7.38 1.7.37 1.7.36 1.7.34 1.7.33 1.7.31 1.7.30 1.7.29 1.7.28 1.7.27 1.7.26 1.7.25 1.7.24 1.7.23 1.7.22 1.7.21 1.7.20 1.7.19 1.7.18 1.7.17 1.7.16 1.7.15 1.7.14 1.7.13 1.7.12 1.7.11 1.7.10 1.7.9 1.7.8 1.7.7 1.7.6 1.7.5 1.7.4 1.7.3 1.7.2 1.7.1 1.7.0 1.6.20 1.6.19 1.6.18 1.6.17 1.6.16 1.6.15 1.6.14 1.6.13 1.6.12 1.6.11 1.6.10 1.6.9 1.6.8 1.6.7 1.6.6 1.6.5 1.6.4 1.6.3 1.5.2 1.5.1 1.5.0 1.4.9 1.4.8 1.4.7 1.4.6 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2 1.3.1 1.3.0 1.2.10 1.2.9 1.2.8 1.2.7 1.2.5 1.2.4 1.2.2 1.2.1 1.2.0 1.1.0 1.0.0

A foundation for building Elixir Phoenix apps — SaaS, social networks, ERP systems, marketplaces, and more

HexDocs

Current section

Files

Jump to
Readme
224 Versions
36 Dependencies
Dependants
Files
Activity
phoenix_kit lib phoenix_kit_web live modules ai accounts.html.heex
Raw

lib/phoenix_kit_web/live/modules/ai/accounts.html.heex 

<PhoenixKitWeb.Components.LayoutWrapper.app_layout

  flash={@flash}

  page_title={@page_title}

  current_path={@current_path}

  project_title={@project_title}

  phoenix_kit_current_scope={@phoenix_kit_current_scope}

  current_locale={assigns[:current_locale]}

>

  <div class="max-w-4xl mx-auto p-6">

    <%!-- Header --%>

    <div class="mb-6">

      <.link navigate={Routes.path("/admin/ai")} class="btn btn-ghost btn-sm gap-2 mb-4">

        <.icon name="hero-arrow-left" class="w-4 h-4" /> Back to AI

      </.link>



      <div class="flex justify-between items-center">

        <div>

          <h1 class="text-2xl font-bold">{@page_title}</h1>

          <p class="text-base-content/70 mt-1">

            Manage your AI provider accounts.

          </p>

        </div>

        <.link navigate={Routes.path("/admin/ai/accounts/new")} class="btn btn-primary btn-sm">

          <.icon name="hero-plus" class="w-4 h-4 mr-1" /> Add Account

        </.link>

      </div>

    </div>



    <%!-- Accounts List --%>

    <%= if length(@accounts) > 0 do %>

      <div class="space-y-4">

        <%= for account <- @accounts do %>

          <div class="card bg-base-100 shadow-lg">

            <div class="card-body p-4">

              <div class="flex items-center justify-between">

                <div>

                  <h3 class="font-semibold text-lg">{account.name}</h3>

                  <div class="text-sm text-base-content/70 space-y-1">

                    <p>

                      <span class="badge badge-outline badge-sm mr-2">

                        {PhoenixKit.AI.Account.provider_label(account.provider)}

                      </span>

                      <span class="font-mono text-xs">

                        {PhoenixKit.AI.Account.masked_api_key(account.api_key)}

                      </span>

                    </p>

                    <%= if account.last_validated_at do %>

                      <p class="text-xs">

                        Last validated: {Calendar.strftime(

                          account.last_validated_at,

                          "%Y-%m-%d %H:%M"

                        )}

                      </p>

                    <% end %>

                  </div>

                </div>



                <div class="flex items-center gap-2">

                  <span class={"badge #{if account.enabled, do: "badge-success", else: "badge-neutral"}"}>

                    {if account.enabled, do: "Active", else: "Disabled"}

                  </span>



                  <div class="dropdown dropdown-end">

                    <label tabindex="0" class="btn btn-ghost btn-sm">

                      <.icon name="hero-ellipsis-vertical" class="w-5 h-5" />

                    </label>

                    <ul

                      tabindex="0"

                      class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52"

                    >

                      <li>

                        <.link navigate={Routes.path("/admin/ai/accounts/#{account.id}/edit")}>

                          <.icon name="hero-pencil" class="w-4 h-4" /> Edit

                        </.link>

                      </li>

                      <li>

                        <button phx-click="toggle_account" phx-value-id={account.id}>

                          <.icon name="hero-power" class="w-4 h-4" />

                          {if account.enabled, do: "Disable", else: "Enable"}

                        </button>

                      </li>

                      <li>

                        <button

                          phx-click="delete_account"

                          phx-value-id={account.id}

                          data-confirm="Are you sure you want to delete this account?"

                          class="text-error"

                        >

                          <.icon name="hero-trash" class="w-4 h-4" /> Delete

                        </button>

                      </li>

                    </ul>

                  </div>

                </div>

              </div>

            </div>

          </div>

        <% end %>

      </div>

    <% else %>

      <div class="card bg-base-100 shadow-lg">

        <div class="card-body text-center py-12">

          <.icon name="hero-key" class="w-12 h-12 mx-auto text-base-content/30 mb-4" />

          <h3 class="text-lg font-medium mb-2">No accounts yet</h3>

          <p class="text-base-content/70 mb-4">

            Add your first AI provider account to get started.

          </p>

          <.link navigate={Routes.path("/admin/ai/accounts/new")} class="btn btn-primary">

            <.icon name="hero-plus" class="w-4 h-4 mr-1" /> Add Account

          </.link>

        </div>

      </div>

    <% end %>

  </div>

</PhoenixKitWeb.Components.LayoutWrapper.app_layout>