Release 2025-05-25-ELtG

This commit is contained in:
pluja
2025-05-25 10:07:02 +00:00
parent 970622d061
commit ac9a2f428a
24 changed files with 776 additions and 564 deletions

View File

@@ -143,9 +143,9 @@ if (toggleResult?.error) {
}
---
<BaseLayout pageTitle="Announcement Management" widthClassName="max-w-screen-xl">
<BaseLayout pageTitle="Announcements" widthClassName="max-w-screen-xl">
<div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between">
<h1 class="font-title text-2xl font-bold text-white">Announcement Management</h1>
<h1 class="font-title text-2xl font-bold text-white">Announcements</h1>
<div class="mt-2 flex items-center gap-4 sm:mt-0">
<span class="text-sm text-zinc-400">{announcements.length} announcements</span>
</div>
@@ -193,12 +193,17 @@ if (toggleResult?.error) {
<option value="active" selected={filters.status === 'active'}>Active</option>
<option value="inactive" selected={filters.status === 'inactive'}>Inactive</option>
</select>
<button
<Button
as="button"
type="submit"
class="inline-flex items-center rounded-r-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
>
<Icon name="ri:search-2-line" class="h-4 w-4" />
</button>
color="info"
variant="solid"
size="md"
iconOnly
icon="ri:search-2-line"
label="Search"
class="rounded-l-none"
/>
</div>
</div>
</form>
@@ -206,13 +211,16 @@ if (toggleResult?.error) {
<!-- Create New Announcement Form -->
<div class="mb-6">
<button
<Button
as="button"
id="toggle-new-announcement-form"
class="mb-4 inline-flex items-center rounded-md bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-700 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
>
<Icon name="ri:add-line" class="mr-1 h-4 w-4" />
Create New Announcement
</button>
color="success"
variant="solid"
size="md"
icon="ri:add-line"
label="Create"
class="mb-4"
/>
<div
id="new-announcement-form"
@@ -306,13 +314,16 @@ if (toggleResult?.error) {
<div class="pt-4">
<InputSubmitButton label="Create Announcement" icon="ri:save-line" hideCancel />
<button
<Button
as="button"
type="button"
id="cancel-create"
class="ml-2 inline-flex items-center rounded-md border border-zinc-600 bg-zinc-800 px-4 py-2 text-sm font-medium text-zinc-300 hover:bg-zinc-700 focus:ring-2 focus:ring-zinc-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
>
Cancel
</button>
color="gray"
variant="faded"
size="md"
label="Cancel"
class="ml-2"
/>
</div>
</div>
</form>
@@ -339,19 +350,24 @@ if (toggleResult?.error) {
<form method="POST" action={actions.admin.announcement.delete} id="delete-form">
<input type="hidden" name="id" id="delete-id" />
<div class="flex justify-end gap-2">
<button
<Button
as="button"
type="button"
class="close-modal inline-flex items-center rounded-md border border-zinc-600 bg-zinc-800 px-4 py-2 text-sm font-medium text-zinc-300 hover:bg-zinc-700 focus:ring-2 focus:ring-zinc-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
>
Cancel
</button>
<button
class="close-modal"
color="gray"
variant="faded"
size="md"
label="Cancel"
/>
<Button
as="button"
type="submit"
class="inline-flex items-center rounded-md bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700 focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
>
<Icon name="ri:delete-bin-line" class="mr-1 h-4 w-4" />
Delete
</button>
color="danger"
variant="solid"
size="md"
icon="ri:delete-bin-line"
label="Delete"
/>
</div>
</form>
</div>
@@ -497,60 +513,64 @@ if (toggleResult?.error) {
</td>
<td class="px-4 py-3">
<div class="flex justify-center gap-2">
<Tooltip
as="button"
type="button"
data-id={announcement.id}
class="edit-button inline-flex items-center rounded-md border border-blue-500/50 bg-blue-500/20 px-1 py-1 text-xs text-blue-400 transition-colors hover:bg-blue-500/30"
text="Edit"
onclick={`document.getElementById('edit-announcement-form-${announcement.id}').classList.toggle('hidden')`}
>
<Icon name="ri:edit-line" class="size-4" />
<Tooltip text="Edit">
<Button
as="button"
type="button"
data-id={announcement.id}
class="edit-button"
color="info"
variant="faded"
size="sm"
iconOnly
icon="ri:edit-line"
label="Edit"
onclick={`document.getElementById('edit-announcement-form-${announcement.id}').classList.toggle('hidden')`}
/>
</Tooltip>
<form
method="POST"
action={actions.admin.announcement.toggleActive}
class="inline-block"
data-confirm={`Are you sure you want to ${announcement.isActive ? 'deactivate' : 'activate'} this announcement?`}
>
<input type="hidden" name="id" value={announcement.id} />
<input type="hidden" name="isActive" value={String(!announcement.isActive)} />
<button
type="submit"
class={`rounded-md border px-1 py-1 text-xs transition-colors ${
announcement.isActive
? 'border-yellow-500/50 bg-yellow-500/20 text-yellow-400 hover:bg-yellow-500/30'
: 'border-green-500/50 bg-green-500/20 text-green-400 hover:bg-green-500/30'
}`}
<Tooltip text={announcement.isActive ? 'Deactivate' : 'Activate'}>
<form
method="POST"
action={actions.admin.announcement.toggleActive}
class="inline-block"
data-confirm={`Are you sure you want to ${announcement.isActive ? 'deactivate' : 'activate'} this announcement?`}
>
<Tooltip text={announcement.isActive ? 'Deactivate' : 'Activate'}>
<Icon
name={
announcement.isActive ? 'ri:pause-circle-line' : 'ri:play-circle-line'
}
class="size-4"
/>
</Tooltip>
</button>
</form>
<input type="hidden" name="id" value={announcement.id} />
<input type="hidden" name="isActive" value={String(!announcement.isActive)} />
<Button
as="button"
type="submit"
color={announcement.isActive ? 'warning' : 'success'}
variant="faded"
size="sm"
iconOnly
icon={announcement.isActive ? 'ri:pause-circle-line' : 'ri:play-circle-line'}
label={announcement.isActive ? 'Deactivate' : 'Activate'}
/>
</form>
</Tooltip>
<form
method="POST"
action={actions.admin.announcement.delete}
class="inline-block"
data-confirm="Are you sure you want to delete this announcement?"
>
<input type="hidden" name="id" value={announcement.id} />
<button
type="submit"
class="rounded-md border border-red-500/50 bg-red-500/20 px-1 py-1 text-xs text-red-400 transition-colors hover:bg-red-500/30"
<Tooltip text="Delete">
<form
method="POST"
action={actions.admin.announcement.delete}
class="inline-block"
data-confirm="Are you sure you want to delete this announcement?"
>
<Tooltip text="Delete">
<Icon name="ri:delete-bin-line" class="size-4" />
</Tooltip>
</button>
</form>
<input type="hidden" name="id" value={announcement.id} />
<Button
as="button"
type="submit"
color="danger"
variant="faded"
size="sm"
iconOnly
icon="ri:delete-bin-line"
label="Delete"
/>
</form>
</Tooltip>
</div>
</td>
</tr>
@@ -648,9 +668,12 @@ if (toggleResult?.error) {
<div class="pt-4">
<InputSubmitButton label="Save Changes" icon="ri:save-line" hideCancel />
<Button
as="button"
type="button"
label="Cancel"
color="gray"
variant="faded"
size="md"
onclick={`document.getElementById('edit-announcement-form-${announcement.id}').classList.toggle('hidden')`}
class="ml-2"
/>

View File

@@ -5,7 +5,9 @@ import { actions, isInputError } from 'astro:actions'
import { z } from 'astro:content'
import { orderBy as lodashOrderBy } from 'lodash-es'
import Button from '../../components/Button.astro'
import SortArrowIcon from '../../components/SortArrowIcon.astro'
import Tooltip from '../../components/Tooltip.astro'
import { getAttributeCategoryInfo } from '../../constants/attributeCategories'
import { getAttributeTypeInfo } from '../../constants/attributeTypes'
import BaseLayout from '../../layouts/BaseLayout.astro'
@@ -136,14 +138,15 @@ const makeSortUrl = (slug: NonNullable<(typeof filters)['sort-by']>) => {
<h1 class="font-title text-2xl font-bold text-white">Attribute Management</h1>
<div class="mt-2 flex items-center gap-4 sm:mt-0">
<span class="text-sm text-zinc-400">{attributeCount} attributes</span>
<button
type="button"
class="inline-flex items-center gap-2 rounded-md bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-700 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:outline-none"
<Button
as="button"
color="success"
variant="solid"
size="md"
icon="ri:add-line"
label="New Attribute"
onclick="document.getElementById('create-attribute-form').classList.toggle('hidden')"
>
<Icon name="ri:add-line" class="size-4" />
<span>New Attribute</span>
</button>
/>
</div>
</div>
@@ -286,12 +289,15 @@ const makeSortUrl = (slug: NonNullable<(typeof filters)['sort-by']>) => {
</div>
</div>
<button
<Button
as="button"
type="submit"
class="w-full rounded-md bg-green-600 py-2 text-sm font-medium text-white hover:bg-green-700 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
>
Create Attribute
</button>
color="success"
variant="solid"
size="md"
label="Create Attribute"
class="w-full"
/>
</form>
</div>
@@ -343,12 +349,17 @@ const makeSortUrl = (slug: NonNullable<(typeof filters)['sort-by']>) => {
))
}
</select>
<button
<Button
as="button"
type="submit"
class="inline-flex items-center rounded-r-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
>
<Icon name="ri:search-2-line" class="h-4 w-4" />
</button>
color="info"
variant="solid"
size="md"
iconOnly
icon="ri:search-2-line"
label="Search"
class="rounded-l-none"
/>
</div>
</div>
</form>
@@ -519,25 +530,34 @@ const makeSortUrl = (slug: NonNullable<(typeof filters)['sort-by']>) => {
</td>
<td class="px-4 py-3 text-right">
<div class="flex justify-end gap-2">
<button
type="button"
class="inline-flex items-center justify-center rounded-md border border-blue-500/50 bg-blue-500/20 p-1.5 text-blue-400 transition-colors hover:bg-blue-500/30 focus:outline-none"
onclick={`document.getElementById('edit-form-${index}').classList.toggle('hidden')`}
title="Edit attribute"
>
<Icon name="ri:edit-line" class="size-3.5" />
</button>
<form method="POST" action={actions.admin.attribute.delete} class="inline-block">
<input type="hidden" name="id" value={attribute.id} />
<button
type="submit"
class="inline-flex items-center justify-center rounded-md border border-red-500/50 bg-red-500/20 p-1.5 text-red-400 transition-colors hover:bg-red-500/30 focus:outline-none"
onclick="return confirm('Are you sure you want to delete this attribute?')"
title="Delete attribute"
>
<Icon name="ri:delete-bin-line" class="size-3.5" />
</button>
</form>
<Tooltip text="Edit">
<Button
as="button"
color="info"
variant="faded"
size="sm"
iconOnly
icon="ri:edit-line"
label="Edit"
onclick={`document.getElementById('edit-form-${index}').classList.toggle('hidden')`}
/>
</Tooltip>
<Tooltip text="Delete">
<form method="POST" action={actions.admin.attribute.delete} class="inline-block">
<input type="hidden" name="id" value={attribute.id} />
<Button
as="button"
type="submit"
color="danger"
variant="faded"
size="sm"
iconOnly
icon="ri:delete-bin-line"
label="Delete"
onclick="return confirm('Are you sure you want to delete this attribute?')"
/>
</form>
</Tooltip>
</div>
</td>
</tr>
@@ -673,19 +693,23 @@ const makeSortUrl = (slug: NonNullable<(typeof filters)['sort-by']>) => {
</div>
<div class="flex justify-end space-x-3">
<button
type="button"
class="rounded-md border border-zinc-600 bg-zinc-800 px-3 py-2 text-sm font-medium text-zinc-300 hover:bg-zinc-700 focus:outline-none"
<Button
as="button"
color="gray"
variant="faded"
size="sm"
label="Cancel"
onclick={`document.getElementById('edit-form-${index}').classList.toggle('hidden')`}
>
Cancel
</button>
<button
/>
<Button
as="button"
type="submit"
class="rounded-md bg-blue-600 px-3 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
>
Save Changes
</button>
color="info"
variant="solid"
size="sm"
icon="ri:save-line"
label="Save"
/>
</div>
</form>
</td>

View File

@@ -2,10 +2,14 @@
import { Icon } from 'astro-icon/components'
import { actions } from 'astro:actions'
import Button from '../../../components/Button.astro'
import Chat from '../../../components/Chat.astro'
import ServiceCard from '../../../components/ServiceCard.astro'
import UserBadge from '../../../components/UserBadge.astro'
import { getServiceSuggestionStatusInfo } from '../../../constants/serviceSuggestionStatus'
import {
getServiceSuggestionStatusInfo,
serviceSuggestionStatuses,
} from '../../../constants/serviceSuggestionStatus'
import BaseLayout from '../../../layouts/BaseLayout.astro'
import { cn } from '../../../lib/cn'
import { parseIntWithFallback } from '../../../lib/numbers'
@@ -96,13 +100,15 @@ const statusInfo = getServiceSuggestionStatusInfo(serviceSuggestion.status)
widthClassName="max-w-screen-md"
>
<div class="mb-4 flex items-center gap-4">
<a
<Button
as="a"
href="/admin/service-suggestions"
class="font-title inline-flex items-center justify-center rounded-md border border-green-500/30 bg-green-500/10 px-3 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-s-line" class="mr-1 size-4" />
Back
</a>
color="success"
variant="faded"
size="md"
icon="ri:arrow-left-s-line"
label="Back"
/>
<h1 class="font-title text-xl text-green-500">Service Suggestion</h1>
</div>
@@ -170,17 +176,23 @@ const statusInfo = getServiceSuggestionStatusInfo(serviceSuggestion.status)
name="status"
class="font-title 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 disabled:opacity-50"
>
<option value="PENDING" selected={serviceSuggestion.status === 'PENDING'}> Pending </option>
<option value="APPROVED" selected={serviceSuggestion.status === 'APPROVED'}> Approve </option>
<option value="REJECTED" selected={serviceSuggestion.status === 'REJECTED'}> Reject </option>
<option value="WITHDRAWN" selected={serviceSuggestion.status === 'WITHDRAWN'}> Withdrawn </option>
{
serviceSuggestionStatuses.map((status) => (
<option value={status.value} selected={serviceSuggestion.status === status.value}>
{status.label}
</option>
))
}
</select>
<button
<Button
as="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-1 size-4" /> Update
</button>
color="success"
variant="faded"
size="md"
icon="ri:save-line"
label="Update"
/>
</form>
</div>

View File

@@ -4,8 +4,10 @@ import { actions } from 'astro:actions'
import { z } from 'astro:content'
import { orderBy } from 'lodash-es'
import Button from '../../../components/Button.astro'
import SortArrowIcon from '../../../components/SortArrowIcon.astro'
import TimeFormatted from '../../../components/TimeFormatted.astro'
import Tooltip from '../../../components/Tooltip.astro'
import UserBadge from '../../../components/UserBadge.astro'
import {
getServiceSuggestionStatusInfo,
@@ -183,12 +185,16 @@ const makeSortUrl = (slug: string) => {
</select>
</div>
<div class="flex items-end">
<button
<Button
as="button"
type="submit"
class="inline-flex items-center rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
>
<Icon name="ri:search-2-line" class="h-4 w-4" />
</button>
color="info"
variant="solid"
size="md"
iconOnly
icon="ri:search-2-line"
label="Search"
/>
</div>
</form>
</div>
@@ -317,13 +323,18 @@ const makeSortUrl = (slug: string) => {
</td>
<td class="px-4 py-3 text-right">
<div class="flex justify-end gap-1">
<a
href={`/admin/service-suggestions/${suggestion.id}`}
class="inline-flex items-center justify-center rounded-full border border-green-500/40 bg-green-500/10 p-1.5 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"
title="View"
>
<Icon name="ri:external-link-line" class="size-4" />
</a>
<Tooltip text="Manage">
<Button
as="a"
href={`/admin/service-suggestions/${suggestion.id}`}
color="success"
variant="faded"
size="sm"
iconOnly
icon="ri:arrow-right-line"
label="Manage"
/>
</Tooltip>
</div>
</td>
</tr>

View File

@@ -27,46 +27,54 @@ import { eventTypes, getEventTypeInfo } from '../../../../constants/eventTypes'
import { kycLevels } from '../../../../constants/kycLevels'
import { serviceVisibilities } from '../../../../constants/serviceVisibility'
import { verificationStatuses } from '../../../../constants/verificationStatus'
import { getVerificationStepStatusInfo } from '../../../../constants/verificationStepStatus'
import {
getVerificationStepStatusInfo,
verificationStepStatuses,
} from '../../../../constants/verificationStepStatus'
import BaseLayout from '../../../../layouts/BaseLayout.astro'
import { pluralize } from '../../../../lib/pluralize'
import { prisma } from '../../../../lib/prisma'
const { slug } = Astro.params
const serviceResult = Astro.getActionResult(actions.admin.service.update)
const eventCreateResult = Astro.getActionResult(actions.admin.event.create)
const eventToggleResult = Astro.getActionResult(actions.admin.event.toggle)
const eventDeleteResult = Astro.getActionResult(actions.admin.event.delete)
const eventUpdateResult = Astro.getActionResult(actions.admin.event.update)
const verificationStepCreateResult = Astro.getActionResult(actions.admin.verificationStep.create)
const verificationStepUpdateResult = Astro.getActionResult(actions.admin.verificationStep.update)
const verificationStepDeleteResult = Astro.getActionResult(actions.admin.verificationStep.delete)
if (!slug) return Astro.rewrite('/404')
const serviceResult = Astro.getActionResult(actions.admin.service.update)
Astro.locals.banners.addIfSuccess(serviceResult, 'Service updated successfully')
Astro.locals.banners.addIfSuccess(eventCreateResult, 'Event created successfully')
Astro.locals.banners.addIfSuccess(eventToggleResult, 'Event visibility updated successfully')
Astro.locals.banners.addIfSuccess(eventDeleteResult, 'Event deleted successfully')
Astro.locals.banners.addIfSuccess(eventUpdateResult, 'Event updated successfully')
Astro.locals.banners.addIfSuccess(verificationStepCreateResult, 'Verification step added successfully')
Astro.locals.banners.addIfSuccess(verificationStepUpdateResult, 'Verification step updated successfully')
Astro.locals.banners.addIfSuccess(verificationStepDeleteResult, 'Verification step deleted successfully')
const serviceInputErrors = isInputError(serviceResult?.error) ? serviceResult.error.fields : {}
if (serviceResult && !serviceResult.error && slug !== serviceResult.data.service.slug) {
return Astro.redirect(`/admin/services/${serviceResult.data.service.slug}/edit`)
}
const serviceInputErrors = isInputError(serviceResult?.error) ? serviceResult.error.fields : {}
const eventCreateResult = Astro.getActionResult(actions.admin.event.create)
Astro.locals.banners.addIfSuccess(eventCreateResult, 'Event created successfully')
const eventInputErrors = isInputError(eventCreateResult?.error) ? eventCreateResult.error.fields : {}
const eventUpdateResult = Astro.getActionResult(actions.admin.event.update)
Astro.locals.banners.addIfSuccess(eventUpdateResult, 'Event updated successfully')
const eventUpdateInputErrors = isInputError(eventUpdateResult?.error) ? eventUpdateResult.error.fields : {}
const eventToggleResult = Astro.getActionResult(actions.admin.event.toggle)
Astro.locals.banners.addIfSuccess(eventToggleResult, 'Event visibility updated successfully')
const eventDeleteResult = Astro.getActionResult(actions.admin.event.delete)
Astro.locals.banners.addIfSuccess(eventDeleteResult, 'Event deleted successfully')
const verificationStepCreateResult = Astro.getActionResult(actions.admin.verificationStep.create)
Astro.locals.banners.addIfSuccess(verificationStepCreateResult, 'Verification step added successfully')
const verificationStepInputErrors = isInputError(verificationStepCreateResult?.error)
? verificationStepCreateResult.error.fields
: {}
const verificationStepUpdateResult = Astro.getActionResult(actions.admin.verificationStep.update)
Astro.locals.banners.addIfSuccess(verificationStepUpdateResult, 'Verification step updated successfully')
const verificationStepUpdateInputErrors = isInputError(verificationStepUpdateResult?.error)
? verificationStepUpdateResult.error.fields
: {}
if (!slug) return Astro.rewrite('/404')
const verificationStepDeleteResult = Astro.getActionResult(actions.admin.verificationStep.delete)
Astro.locals.banners.addIfSuccess(verificationStepDeleteResult, 'Verification step deleted successfully')
const [service, categories, attributes] = await Astro.locals.banners.tryMany([
[
@@ -715,7 +723,7 @@ if (!service) return Astro.rewrite('/404')
<InputSelect
label="Status"
name="status"
options={verificationStatuses.map((status) => ({
options={verificationStepStatuses.map((status) => ({
label: status.label,
value: status.value,
}))}
@@ -763,7 +771,7 @@ if (!service) return Astro.rewrite('/404')
<InputSelect
label="Status"
name="status"
options={verificationStatuses.map((status) => ({
options={verificationStepStatuses.map((status) => ({
label: status.label,
value: status.value,
}))}

View File

@@ -3,8 +3,10 @@ import { ServiceVisibility, VerificationStatus, type Prisma } from '@prisma/clie
import { z } from 'astro/zod'
import { Icon } from 'astro-icon/components'
import Button from '../../../components/Button.astro'
import MyPicture from '../../../components/MyPicture.astro'
import SortArrowIcon from '../../../components/SortArrowIcon.astro'
import Tooltip from '../../../components/Tooltip.astro'
import { getKycLevelInfo } from '../../../constants/kycLevels'
import { getVerificationStatusInfo } from '../../../constants/verificationStatus'
import BaseLayout from '../../../layouts/BaseLayout.astro'
@@ -171,13 +173,15 @@ const truncate = (text: string, length: number) => {
<h1 class="font-title text-2xl font-bold text-white">Service Management</h1>
<div class="mt-2 flex items-center gap-4 sm:mt-0">
<span class="text-sm text-zinc-400">{totalServicesCount} services</span>
<a
<Button
as="a"
href="/admin/services/new"
class="inline-flex items-center gap-2 rounded-md bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-700 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:outline-none"
>
<Icon name="ri:add-line" class="size-4" />
<span>New Service</span>
</a>
color="success"
variant="solid"
size="md"
icon="ri:add-line"
label="New Service"
/>
</div>
</div>
@@ -250,12 +254,17 @@ const truncate = (text: string, length: number) => {
))
}
</select>
<button
<Button
as="button"
type="submit"
class="ml-2 inline-flex items-center rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
>
<Icon name="ri:search-2-line" class="h-4 w-4" />
</button>
color="info"
variant="solid"
size="md"
iconOnly
icon="ri:search-2-line"
label="Search"
class="ml-2"
/>
</div>
</div>
</form>
@@ -437,20 +446,30 @@ const truncate = (text: string, length: number) => {
<td class="px-4 py-3 text-center text-xs text-zinc-400">{service.formattedDate}</td>
<td class="px-4 py-3 text-right">
<div class="flex justify-end space-x-2">
<a
href={`/service/${service.slug}`}
target="_blank"
class="inline-flex items-center rounded-md border border-zinc-600 bg-zinc-800 px-2 py-1 text-xs text-zinc-300 transition-colors hover:bg-zinc-700"
title="View on site"
>
<Icon name="ri:external-link-line" class="size-3.5" />
</a>
<a
href={`/admin/services/${service.slug}/edit`}
class="inline-flex items-center rounded-md border border-blue-500/50 bg-blue-500/20 px-2 py-1 text-xs text-blue-400 transition-colors hover:bg-blue-500/30"
>
Edit
</a>
<Tooltip text="View">
<Button
as="a"
href={`/service/${service.slug}`}
color="success"
variant="faded"
size="sm"
iconOnly
icon="ri:global-line"
label="View"
/>
</Tooltip>
<Tooltip text="Edit">
<Button
as="a"
href={`/admin/services/${service.slug}/edit`}
color="info"
variant="faded"
size="sm"
iconOnly
icon="ri:edit-line"
label="Edit"
/>
</Tooltip>
</div>
</td>
</tr>

View File

@@ -3,6 +3,7 @@ import { Icon } from 'astro-icon/components'
import { z } from 'astro:content'
import { orderBy as lodashOrderBy } from 'lodash-es'
import Button from '../../../components/Button.astro'
import SortArrowIcon from '../../../components/SortArrowIcon.astro'
import TimeFormatted from '../../../components/TimeFormatted.astro'
import Tooltip from '../../../components/Tooltip.astro'
@@ -151,12 +152,17 @@ const makeSortUrl = (sortBy: NonNullable<(typeof filters)['sort-by']>) => {
<option value="verified" selected={filters.role === 'verified'}>Verified Users</option>
<option value="spammer" selected={filters.role === 'spammer'}>Spammers</option>
</select>
<button
<Button
as="button"
type="submit"
class="inline-flex items-center rounded-r-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
>
<Icon name="ri:search-2-line" class="h-4 w-4" />
</button>
color="info"
variant="solid"
size="md"
iconOnly
icon="ri:search-2-line"
label="Search"
class="rounded-l-none"
/>
</div>
</div>
</form>
@@ -320,30 +326,43 @@ const makeSortUrl = (sortBy: NonNullable<(typeof filters)['sort-by']>) => {
</td>
<td class="px-4 py-3">
<div class="flex justify-center gap-2">
<Tooltip
as="a"
href={`/account/impersonate?targetUserId=${user.id}&redirect=/account`}
data-astro-prefetch="tap"
class="inline-flex items-center rounded-md border border-orange-500/50 bg-orange-500/20 px-1 py-1 text-xs text-orange-400 transition-colors hover:bg-orange-500/30"
text="Impersonate"
>
<Icon name="ri:spy-line" class="size-4" />
<Tooltip text="Impersonate">
<Button
as="a"
href={`/account/impersonate?targetUserId=${user.id}&redirect=/account`}
data-astro-prefetch="tap"
color="warning"
variant="faded"
size="sm"
iconOnly
icon="ri:spy-line"
label="Impersonate"
disabled={user.admin}
/>
</Tooltip>
<Tooltip
as="a"
href={`/admin/users/${user.name}`}
class="inline-flex items-center rounded-md border border-blue-500/50 bg-blue-500/20 px-1 py-1 text-xs text-blue-400 transition-colors hover:bg-blue-500/30"
text="Edit"
>
<Icon name="ri:edit-line" class="size-4" />
<Tooltip text="Edit">
<Button
as="a"
href={`/admin/users/${user.name}`}
color="info"
variant="faded"
size="sm"
iconOnly
icon="ri:edit-line"
label="Edit"
/>
</Tooltip>
<Tooltip
as="a"
href={`/u/${user.name}`}
class="inline-flex items-center rounded-md border border-green-500/50 bg-green-500/20 px-1 py-1 text-xs text-green-400 transition-colors hover:bg-green-500/30"
text="Public profile"
>
<Icon name="ri:global-line" class="size-4" />
<Tooltip text="Public profile">
<Button
as="a"
href={`/u/${user.name}`}
color="success"
variant="faded"
size="sm"
iconOnly
icon="ri:global-line"
label="Public profile"
/>
</Tooltip>
</div>
</td>