kycnotme/web/src/pages/admin/users/[username].astro

---
import { Icon } from 'astro-icon/components'
import { actions, isInputError } from 'astro:actions'

import Tooltip from '../../../components/Tooltip.astro'
import BaseLayout from '../../../layouts/BaseLayout.astro'
import { prisma } from '../../../lib/prisma'
import { transformCase } from '../../../lib/strings'
import { timeAgo } from '../../../lib/timeAgo'

const { username } = Astro.params

if (!username) return Astro.rewrite('/404')

const updateResult = Astro.getActionResult(actions.admin.user.update)
Astro.locals.banners.addIfSuccess(updateResult, 'User updated successfully')
if (updateResult && !updateResult.error && username !== updateResult.data.updatedUser.name) {
  return Astro.redirect(`/admin/users/${updateResult.data.updatedUser.name}`)
}
const updateInputErrors = isInputError(updateResult?.error) ? updateResult.error.fields : {}

const addAffiliationResult = Astro.getActionResult(actions.admin.user.serviceAffiliations.add)
Astro.locals.banners.addIfSuccess(addAffiliationResult, 'Service affiliation added successfully')

const removeAffiliationResult = Astro.getActionResult(actions.admin.user.serviceAffiliations.remove)
Astro.locals.banners.addIfSuccess(removeAffiliationResult, 'Service affiliation removed successfully')

const addKarmaTransactionResult = Astro.getActionResult(actions.admin.user.karmaTransactions.add)
Astro.locals.banners.addIfSuccess(addKarmaTransactionResult, 'Karma transaction added successfully')

const [user, allServices] = await Astro.locals.banners.tryMany([
  [
    'Failed to load user profile',
    async () => {
      if (!username) return null

      return await prisma.user.findUnique({
        where: { name: username },
        select: {
          id: true,
          name: true,
          displayName: true,
          picture: true,
          link: true,
          admin: true,
          verified: true,
          verifier: true,
          spammer: true,
          verifiedLink: true,
          internalNotes: {
            select: {
              id: true,
              content: true,
              createdAt: true,
              addedByUser: {
                select: {
                  id: true,
                  name: true,
                },
              },
            },
            orderBy: {
              createdAt: 'desc',
            },
          },
          serviceAffiliations: {
            select: {
              id: true,
              role: true,
              createdAt: true,
              service: {
                select: {
                  id: true,
                  name: true,
                  slug: true,
                },
              },
            },
            orderBy: {
              createdAt: 'desc',
            },
          },
        },
      })
    },
    null,
  ],
  [
    'Failed to load services',
    async () => {
      return await prisma.service.findMany({
        select: {
          id: true,
          name: true,
        },
        orderBy: {
          name: 'asc',
        },
      })
    },
    [],
  ],
])

if (!user) return Astro.rewrite('/404')
---

<BaseLayout pageTitle={`User: ${user.name}`} htmx>
  <div class="container mx-auto max-w-2xl py-8">
    <div class="mb-6 flex items-center justify-between">
      <h1 class="font-title text-2xl text-green-400">User Profile: {user.name}</h1>
      <a
        href="/admin/users"
        class="font-title inline-flex items-center justify-center rounded-md border border-green-500/30 bg-green-500/10 px-4 py-2 text-sm text-green-400 shadow-xs transition-colors duration-200 hover:bg-green-500/20 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-black focus:outline-hidden"
      >
        <Icon name="ri:arrow-left-line" class="mr-1 size-4" />
        Back to Users
      </a>
    </div>

    <section
      class="rounded-lg border border-green-500/30 bg-black/40 p-6 shadow-[0_0_15px_rgba(34,197,94,0.2)] backdrop-blur-xs"
    >
      <div class="mb-6 flex items-center gap-4">
        {
          user.picture ? (
            <img src={user.picture} alt="" class="h-16 w-16 rounded-full ring-2 ring-green-500/30" />
          ) : (
            <div class="flex h-16 w-16 items-center justify-center rounded-full bg-green-500/10 ring-2 ring-green-500/30">
              <span class="font-title text-2xl text-green-500">{user.name.charAt(0) || 'A'}</span>
            </div>
          )
        }
        <div>
          <h2 class="font-title text-lg text-green-400">{user.name}</h2>
          <div class="mt-1 flex gap-2">
            {
              user.admin && (
                <span class="font-title rounded-full border border-red-500/50 bg-red-500/20 px-2 py-0.5 text-xs text-red-400">
                  admin
                </span>
              )
            }
            {
              user.verified && (
                <span class="font-title rounded-full border border-blue-500/50 bg-blue-500/20 px-2 py-0.5 text-xs text-blue-400">
                  verified
                </span>
              )
            }
            {
              user.verifier && (
                <span class="font-title rounded-full border border-green-500/50 bg-green-500/20 px-2 py-0.5 text-xs text-green-400">
                  verifier
                </span>
              )
            }
          </div>
        </div>
      </div>

      <form
        method="POST"
        action={actions.admin.user.update}
        class="space-y-4 border-t border-green-500/30 pt-6"
        enctype="multipart/form-data"
      >
        <input type="hidden" name="id" value={user.id} />

        <div>
          <label class="font-title mb-2 block text-sm text-green-500" for="name"> Name </label>
          <input
            transition:persist
            type="text"
            name="name"
            id="name"
            value={user.name}
            required
            class="font-title w-full rounded-md border border-green-500/30 bg-black/50 text-gray-300 placeholder-gray-500 focus:border-green-500 focus:ring-green-500"
          />
          {
            updateInputErrors.name && (
              <p class="font-title mt-1 text-sm text-red-500">{updateInputErrors.name.join(', ')}</p>
            )
          }
        </div>

        <div>
          <label class="font-title mb-2 block text-sm text-green-500" for="displayName"> Display Name </label>
          <input
            transition:persist
            type="text"
            name="displayName"
            maxlength={50}
            id="displayName"
            value={user.displayName ?? ''}
            class="font-title w-full rounded-md border border-green-500/30 bg-black/50 text-gray-300 placeholder-gray-500 focus:border-green-500 focus:ring-green-500"
          />
          {
            Array.isArray(updateInputErrors.displayName) && updateInputErrors.displayName.length > 0 && (
              <p class="font-title mt-1 text-sm text-red-500">{updateInputErrors.displayName.join(', ')}</p>
            )
          }
        </div>

        <div>
          <label class="font-title mb-2 block text-sm text-green-500" for="link"> Link </label>
          <input
            transition:persist
            type="url"
            name="link"
            id="link"
            value={user.link ?? ''}
            class="font-title w-full rounded-md border border-green-500/30 bg-black/50 text-gray-300 placeholder-gray-500 focus:border-green-500 focus:ring-green-500"
          />
          {
            updateInputErrors.link && (
              <p class="font-title mt-1 text-sm text-red-500">{updateInputErrors.link.join(', ')}</p>
            )
          }
        </div>

        <div>
          <label class="font-title mb-2 block text-sm text-green-500" for="picture">
            Picture url or path
          </label>
          <input
            transition:persist
            type="text"
            name="picture"
            id="picture"
            value={user.picture ?? ''}
            class="font-title w-full rounded-md border border-green-500/30 bg-black/50 text-gray-300 placeholder-gray-500 focus:border-green-500 focus:ring-green-500"
          />
          {
            updateInputErrors.picture && (
              <p class="font-title mt-1 text-sm text-red-500">{updateInputErrors.picture.join(', ')}</p>
            )
          }
        </div>

        <div>
          <label class="font-title mb-2 block text-sm text-green-500" for="pictureFile">
            Profile Picture Upload
          </label>
          <input
            transition:persist
            type="file"
            name="pictureFile"
            id="pictureFile"
            accept="image/*"
            class="font-title file:font-title block w-full rounded-md border border-green-500/30 bg-black/50 p-2 text-gray-300 file:mr-3 file:rounded-md file:border-0 file:bg-green-500/30 file:px-3 file:py-1 file:text-gray-300 focus:border-green-500 focus:ring-green-500"
          />
          <p class="font-title text-xs text-gray-400">
            Upload a square image for best results. Supported formats: JPG, PNG, WebP, AVIF, JXL. Max size:
            5MB.
          </p>
        </div>

        <div class="flex gap-6">
          <label class="flex items-center gap-2">
            <input
              transition:persist
              type="checkbox"
              name="admin"
              checked={user.admin}
              class="rounded-sm border-green-500/30 bg-black/50 text-green-500 focus:ring-green-500 focus:ring-offset-black"
            />
            <span class="font-title text-sm text-green-500">Admin</span>
          </label>

          <Tooltip
            as="label"
            class="flex cursor-not-allowed items-center gap-2"
            text="Automatically set based on verified link"
          >
            <input
              type="checkbox"
              name="verified"
              checked={user.verified}
              class="rounded-sm border-green-500/30 bg-black/50 text-green-500 focus:ring-green-500 focus:ring-offset-black"
              disabled
            />
            <span class="font-title text-sm text-green-500">Verified</span>
          </Tooltip>

          <label class="flex items-center gap-2">
            <input
              transition:persist
              type="checkbox"
              name="verifier"
              checked={user.verifier}
              class="rounded-sm border-green-500/30 bg-black/50 text-green-500 focus:ring-green-500 focus:ring-offset-black"
            />
            <span class="font-title text-sm text-green-500">Verifier</span>
          </label>

          <label class="flex items-center gap-2">
            <input
              transition:persist
              type="checkbox"
              name="spammer"
              checked={user.spammer}
              class="rounded-sm border-red-500/30 bg-black/50 text-red-500 focus:ring-red-500 focus:ring-offset-black"
            />
            <span class="font-title text-sm text-red-500">Spammer</span>
          </label>
        </div>

        {
          updateInputErrors.admin && (
            <p class="font-title mt-1 text-sm text-red-500">{updateInputErrors.admin.join(', ')}</p>
          )
        }
        {
          updateInputErrors.verifier && (
            <p class="font-title mt-1 text-sm text-red-500">{updateInputErrors.verifier.join(', ')}</p>
          )
        }
        {
          updateInputErrors.spammer && (
            <p class="font-title mt-1 text-sm text-red-500">{updateInputErrors.spammer.join(', ')}</p>
          )
        }

        <div>
          <label class="font-title mb-2 block text-sm text-green-500" for="verifiedLink">
            Verified Link
          </label>
          <input
            transition:persist
            type="url"
            name="verifiedLink"
            id="verifiedLink"
            value={user.verifiedLink}
            class="font-title w-full rounded-md border border-green-500/30 bg-black/50 text-gray-300 placeholder-gray-500 focus:border-green-500 focus:ring-green-500"
          />
          {
            updateInputErrors.verifiedLink && (
              <p class="font-title mt-1 text-sm text-red-500">{updateInputErrors.verifiedLink.join(', ')}</p>
            )
          }
        </div>

        <div class="flex gap-4 pt-4">
          <button
            type="submit"
            class="font-title inline-flex items-center justify-center rounded-md border border-green-500/30 bg-green-500/10 px-4 py-2 text-sm text-green-400 shadow-xs transition-colors duration-200 hover:bg-green-500/20 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-black focus:outline-hidden"
          >
            <Icon name="ri:save-line" class="mr-2 size-4" />
            Save
          </button>
        </div>
      </form>
      {
        Astro.locals.user && user.id !== Astro.locals.user.id && (
          <a
            href={`/account/impersonate?targetUserId=${user.id}&redirect=/account`}
            class="font-title mt-4 inline-flex items-center justify-center rounded-md border border-yellow-500/30 bg-yellow-500/10 px-4 py-2 text-sm text-yellow-400 shadow-xs transition-colors duration-200 hover:bg-yellow-500/20 focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 focus:ring-offset-black focus:outline-hidden"
          >
            <Icon name="ri:spy-line" class="mr-2 size-4" />
            Impersonate
          </a>
        )
      }
    </section>

    <section
      class="mt-8 rounded-lg border border-green-500/30 bg-black/40 p-6 shadow-[0_0_15px_rgba(34,197,94,0.2)] backdrop-blur-xs"
    >
      <h2 class="font-title mb-4 text-lg text-green-500">Internal Notes</h2>

      {
        user.internalNotes.length === 0 ? (
          <p class="text-gray-400">No internal notes yet.</p>
        ) : (
          <div class="space-y-4">
            {user.internalNotes.map((note) => (
              <div data-note-id={note.id} class="rounded-lg border border-green-500/30 bg-black/50 p-4">
                <div class="mb-2 flex items-center justify-between">
                  <div class="flex items-center gap-2">
                    <span class="font-title text-xs text-gray-200">
                      {note.addedByUser ? note.addedByUser.name : 'System'}
                    </span>
                    <span class="font-title text-xs text-gray-500">
                      {transformCase(timeAgo.format(note.createdAt, 'twitter-minute-now'), 'sentence')}
                    </span>
                  </div>

                  <div class="flex items-center gap-2">
                    <label class="font-title inline-flex cursor-pointer items-center justify-center rounded-md border border-yellow-500/30 bg-yellow-500/10 px-2 py-1 text-xs text-yellow-400 shadow-xs transition-colors duration-200 hover:bg-yellow-500/20 focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 focus:ring-offset-black focus:outline-hidden">
                      <input
                        type="checkbox"
                        class="peer sr-only"
                        data-edit-note-checkbox
                        data-note-id={note.id}
                      />
                      <Icon name="ri:edit-line" class="size-3" />
                    </label>

                    <form method="POST" action={actions.admin.user.internalNotes.delete} class="inline-flex">
                      <input type="hidden" name="noteId" value={note.id} />
                      <button
                        type="submit"
                        class="font-title inline-flex items-center justify-center rounded-md border border-red-500/30 bg-red-500/10 px-2 py-1 text-xs text-red-400 shadow-xs transition-colors duration-200 hover:bg-red-500/20 focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-black focus:outline-hidden"
                      >
                        <Icon name="ri:delete-bin-line" class="size-3" />
                      </button>
                    </form>
                  </div>
                </div>
                <div data-note-content>
                  <p class="font-title text-sm whitespace-pre-wrap text-gray-300">{note.content}</p>
                </div>
                <form
                  method="POST"
                  action={actions.admin.user.internalNotes.update}
                  data-note-edit-form
                  class="mt-2 hidden"
                >
                  <input type="hidden" name="noteId" value={note.id} />
                  <textarea
                    name="content"
                    rows="3"
                    class="font-title min-h-12 w-full rounded-md border border-green-500/30 bg-black/50 p-2 text-sm text-gray-300 placeholder-gray-500 focus:border-green-500 focus:ring-green-500"
                    data-trim-content
                  >
                    {note.content}
                  </textarea>

                  <div class="mt-2 flex justify-end gap-2">
                    <button
                      type="button"
                      data-cancel-edit
                      class="font-title inline-flex items-center justify-center rounded-md border border-gray-500/30 bg-gray-500/10 px-3 py-1 text-xs text-gray-400 shadow-xs transition-colors duration-200 hover:bg-gray-500/20 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-black focus:outline-hidden"
                    >
                      Cancel
                    </button>
                    <button
                      type="submit"
                      class="font-title inline-flex items-center justify-center rounded-md border border-green-500/30 bg-green-500/10 px-3 py-1 text-xs text-green-400 shadow-xs transition-colors duration-200 hover:bg-green-500/20 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-black focus:outline-hidden"
                    >
                      Save
                    </button>
                  </div>
                </form>
              </div>
            ))}
          </div>
        )
      }

      <form method="POST" action={actions.admin.user.internalNotes.add} class="mt-4 space-y-2">
        <input type="hidden" name="userId" value={user.id} />
        <textarea
          name="content"
          placeholder="Add a note..."
          rows="3"
          class="font-title min-h-12 w-full rounded-md border border-green-500/30 bg-black/50 p-2 text-sm text-gray-300 placeholder-gray-500 focus:border-green-500 focus:ring-green-500"
        ></textarea>
        <button
          type="submit"
          class="font-title inline-flex items-center justify-center rounded-md border border-green-500/30 bg-green-500/10 px-4 py-2 text-sm text-green-400 shadow-xs transition-colors duration-200 hover:bg-green-500/20 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-black focus:outline-hidden"
        >
          <Icon name="ri:add-line" class="mr-1 size-4" />
          Add
        </button>
      </form>
    </section>

    <section
      class="mt-8 rounded-lg border border-green-500/30 bg-black/40 p-6 shadow-[0_0_15px_rgba(34,197,94,0.2)] backdrop-blur-xs"
    >
      <h2 class="font-title mb-4 text-lg text-green-500">Service Affiliations</h2>

      {
        user.serviceAffiliations.length === 0 ? (
          <p class="text-gray-400">No service affiliations yet.</p>
        ) : (
          <div class="space-y-4">
            {user.serviceAffiliations.map((affiliation) => (
              <div class="flex items-center justify-between rounded-lg border border-green-500/30 bg-black/50 p-4">
                <div>
                  <div class="flex items-center gap-2">
                    <a
                      href={`/service/${affiliation.service.slug}`}
                      class="font-title text-sm text-green-400 hover:underline"
                    >
                      {affiliation.service.name}
                    </a>
                    <span
                      class={`font-title rounded-full px-2 py-0.5 text-xs ${
                        affiliation.role === 'OWNER'
                          ? 'border border-purple-500/50 bg-purple-500/20 text-purple-400'
                          : affiliation.role === 'ADMIN'
                            ? 'border border-red-500/50 bg-red-500/20 text-red-400'
                            : affiliation.role === 'MODERATOR'
                              ? 'border border-orange-500/50 bg-orange-500/20 text-orange-400'
                              : affiliation.role === 'SUPPORT'
                                ? 'border border-blue-500/50 bg-blue-500/20 text-blue-400'
                                : 'border border-green-500/50 bg-green-500/20 text-green-400'
                      }`}
                    >
                      {affiliation.role.toLowerCase()}
                    </span>
                  </div>
                  <div class="mt-1 flex items-center gap-2">
                    <span class="font-title text-xs text-gray-500">
                      {transformCase(timeAgo.format(affiliation.createdAt, 'twitter-minute-now'), 'sentence')}
                    </span>
                  </div>
                </div>

                <form
                  method="POST"
                  action={actions.admin.user.serviceAffiliations.remove}
                  class="inline-flex"
                  data-astro-reload
                >
                  <input type="hidden" name="id" value={affiliation.id} />
                  <button
                    type="submit"
                    class="font-title inline-flex items-center justify-center rounded-md border border-red-500/30 bg-red-500/10 px-2 py-1 text-xs text-red-400 shadow-xs transition-colors duration-200 hover:bg-red-500/20 focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-black focus:outline-hidden"
                  >
                    <Icon name="ri:delete-bin-line" class="size-3" />
                  </button>
                </form>
              </div>
            ))}
          </div>
        )
      }

      <form
        method="POST"
        action={actions.admin.user.serviceAffiliations.add}
        class="mt-6 space-y-4 border-t border-green-500/30 pt-6"
        data-astro-reload
      >
        <input type="hidden" name="userId" value={user.id} />

        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
          <div>
            <label class="font-title mb-2 block text-sm text-green-500" for="serviceId"> Service </label>
            <select
              name="serviceId"
              id="serviceId"
              required
              class="font-title w-full rounded-md border border-green-500/30 bg-black/50 text-gray-300 focus:border-green-500 focus:ring-green-500"
            >
              <option value="">Select a service</option>
              {allServices.map((service) => <option value={service.id}>{service.name}</option>)}
            </select>
          </div>

          <div>
            <label class="font-title mb-2 block text-sm text-green-500" for="role"> Role </label>
            <select
              name="role"
              id="role"
              required
              class="font-title w-full rounded-md border border-green-500/30 bg-black/50 text-gray-300 focus:border-green-500 focus:ring-green-500"
            >
              <option value="OWNER">Owner</option>
              <option value="ADMIN">Admin</option>
              <option value="MODERATOR">Moderator</option>
              <option value="SUPPORT">Support</option>
              <option value="TEAM_MEMBER">Team Member</option>
            </select>
          </div>
        </div>

        <div>
          <button
            type="submit"
            class="font-title inline-flex items-center justify-center rounded-md border border-green-500/30 bg-green-500/10 px-4 py-2 text-sm text-green-400 shadow-xs transition-colors duration-200 hover:bg-green-500/20 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-black focus:outline-hidden"
          >
            <Icon name="ri:link" class="mr-1 size-4" />
            Add Service Affiliation
          </button>
        </div>
      </form>
    </section>

    <section
      class="mt-8 rounded-lg border border-green-500/30 bg-black/40 p-6 shadow-[0_0_15px_rgba(34,197,94,0.2)] backdrop-blur-xs"
    >
      <h2 class="font-title mb-4 text-lg text-green-500">Add Karma Transaction</h2>

      <form
        method="POST"
        action={actions.admin.user.karmaTransactions.add}
        class="mt-6 space-y-4 border-t border-green-500/30 pt-6"
        data-astro-reload
      >
        <input type="hidden" name="userId" value={user.id} />

        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
          <div>
            <label class="font-title mb-2 block text-sm text-green-500" for="points"> Points </label>
            <input
              type="number"
              name="points"
              id="points"
              required
              class="font-title w-full rounded-md border border-green-500/30 bg-black/50 text-gray-300 focus:border-green-500 focus:ring-green-500"
            />
          </div>

          <div>
            <label class="font-title mb-2 block text-sm text-green-500" for="action"> Action </label>
            <input
              type="text"
              name="action"
              id="action"
              required
              class="font-title w-full rounded-md border border-green-500/30 bg-black/50 text-gray-300 focus:border-green-500 focus:ring-green-500"
            />
          </div>
        </div>

        <div>
          <label class="font-title mb-2 block text-sm text-green-500" for="description"> Description </label>
          <textarea
            name="description"
            id="description"
            required
            rows="3"
            class="font-title w-full rounded-md border border-green-500/30 bg-black/50 text-gray-300 focus:border-green-500 focus:ring-green-500"
          ></textarea>
        </div>

        <div>
          <button
            type="submit"
            class="font-title inline-flex items-center justify-center rounded-md border border-green-500/30 bg-green-500/10 px-4 py-2 text-sm text-green-400 shadow-xs transition-colors duration-200 hover:bg-green-500/20 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-black focus:outline-hidden"
          >
            <Icon name="ri:add-line" class="mr-1 size-4" />
            Add Karma Transaction
          </button>
        </div>
      </form>
    </section>
  </div>
</BaseLayout>

<script>
  document.addEventListener('astro:page-load', () => {
    document.querySelectorAll<HTMLDivElement>('[data-note-id]').forEach((noteDiv) => {
      const checkbox = noteDiv.querySelector<HTMLInputElement>('input[data-edit-note-checkbox]')
      if (!checkbox) return

      checkbox.addEventListener('change', (e) => {
        const target = e.target as HTMLInputElement
        if (!target) return

        const noteContent = noteDiv.querySelector<HTMLDivElement>('[data-note-content]')
        const editForm = noteDiv.querySelector<HTMLFormElement>('[data-note-edit-form]')
        const cancelButton = noteDiv.querySelector<HTMLButtonElement>('[data-cancel-edit]')

        if (noteContent && editForm) {
          if (target.checked) {
            noteContent.classList.add('hidden')
            editForm.classList.remove('hidden')
          } else {
            noteContent.classList.remove('hidden')
            editForm.classList.add('hidden')
          }
        }

        if (cancelButton) {
          cancelButton.addEventListener('click', () => {
            target.checked = false
            noteContent?.classList.remove('hidden')
            editForm?.classList.add('hidden')
          })
        }
      })
    })
  })
</script>

<script>
  document.addEventListener('astro:page-load', () => {
    document.querySelectorAll<HTMLTextAreaElement>('[data-trim-content]').forEach((textarea) => {
      textarea.value = textarea.value.trim()
    })
  })
</script>