- {/* Search Input */}
-
-
-
- setSearchQuery(e.target.value)} className={cn('pl-8 pr-10', dir === 'rtl' && 'pl-10 pr-8')} />
- {searchQuery && (
-
- )}
-
-
-
-
-
{
- if (!open) {
- setEditingUserTemplate(null)
- form.reset(userTemplateFormDefaultValues)
- }
- setIsDialogOpen(open)
- }}
- form={form}
- editingUserTemplate={!!editingUserTemplate}
- editingUserTemplateId={editingUserTemplate?.id}
- />
)
}
-
diff --git a/dashboard/src/pages/_dashboard.templates.user.tsx b/dashboard/src/pages/_dashboard.templates.user.tsx
new file mode 100644
index 000000000..86b7b843f
--- /dev/null
+++ b/dashboard/src/pages/_dashboard.templates.user.tsx
@@ -0,0 +1,221 @@
+import UserTemplate from '../components/templates/user-template'
+import { useGetUserTemplates, useModifyUserTemplate, UserTemplateResponse } from '@/service/api'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Card, CardContent } from '@/components/ui/card'
+
+import UserTemplateModal from '@/components/dialogs/user-template-modal.tsx'
+import { userTemplateFormDefaultValues, userTemplateFormSchema, type UserTemplatesFromValueInput } from '@/components/forms/user-template-form'
+import { useState, useMemo, useEffect } from 'react'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { queryClient } from '@/utils/query-client.ts'
+import { toast } from 'sonner'
+import { useTranslation } from 'react-i18next'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+import { RefreshCw, Search, X } from 'lucide-react'
+import useDirDetection from '@/hooks/use-dir-detection'
+import { cn } from '@/lib/utils'
+import ViewToggle from '@/components/common/view-toggle'
+import { ListGenerator } from '@/components/common/list-generator'
+import { useUserTemplatesListColumns } from '@/components/templates/use-user-templates-list-columns'
+import { usePersistedViewMode } from '@/hooks/use-persisted-view-mode'
+
+export default function UserTemplates() {
+ const [isDialogOpen, setIsDialogOpen] = useState(false)
+ const [editingUserTemplate, setEditingUserTemplate] = useState
(null)
+ const [searchQuery, setSearchQuery] = useState('')
+ const [viewMode, setViewMode] = usePersistedViewMode('view-mode:templates')
+ const { data: userTemplates, isLoading, isFetching, refetch } = useGetUserTemplates()
+ const form = useForm({
+ resolver: zodResolver(userTemplateFormSchema),
+ defaultValues: userTemplateFormDefaultValues,
+ })
+ const { t } = useTranslation()
+ const modifyUserTemplateMutation = useModifyUserTemplate()
+ const dir = useDirDetection()
+
+ useEffect(() => {
+ const handleOpenDialog = () => {
+ setEditingUserTemplate(null)
+ form.reset(userTemplateFormDefaultValues)
+ setIsDialogOpen(true)
+ }
+ window.addEventListener('openUserTemplateDialog', handleOpenDialog)
+ return () => window.removeEventListener('openUserTemplateDialog', handleOpenDialog)
+ }, [form])
+
+ const handleEdit = (userTemplate: UserTemplateResponse) => {
+ setEditingUserTemplate(userTemplate)
+ form.reset({
+ name: userTemplate.name || undefined,
+ status: userTemplate.status || undefined,
+ data_limit: userTemplate.data_limit || undefined,
+ expire_duration: userTemplate.expire_duration || undefined,
+ method: userTemplate.extra_settings?.method || undefined,
+ flow: userTemplate.extra_settings?.flow || undefined,
+ groups: userTemplate.group_ids || undefined,
+ username_prefix: userTemplate.username_prefix || undefined,
+ username_suffix: userTemplate.username_suffix || undefined,
+ on_hold_timeout: typeof userTemplate.on_hold_timeout === 'number' ? userTemplate.on_hold_timeout : undefined,
+ data_limit_reset_strategy: userTemplate.data_limit_reset_strategy || undefined,
+ reset_usages: userTemplate.reset_usages || false,
+ })
+
+ setIsDialogOpen(true)
+ }
+
+ const handleToggleStatus = async (template: UserTemplateResponse) => {
+ try {
+ await modifyUserTemplateMutation.mutateAsync({
+ templateId: template.id,
+ data: {
+ name: template.name,
+ data_limit: template.data_limit,
+ expire_duration: template.expire_duration,
+ username_prefix: template.username_prefix,
+ username_suffix: template.username_suffix,
+ group_ids: template.group_ids,
+ status: template.status,
+ reset_usages: template.reset_usages,
+ is_disabled: !template.is_disabled,
+ data_limit_reset_strategy: template.data_limit_reset_strategy,
+ on_hold_timeout: template.on_hold_timeout,
+ extra_settings: template.extra_settings,
+ },
+ })
+
+ toast.success(t('success', { defaultValue: 'Success' }), {
+ description: t(template.is_disabled ? 'templates.enableSuccess' : 'templates.disableSuccess', {
+ name: template.name,
+ defaultValue: `Template "{name}" has been ${template.is_disabled ? 'enabled' : 'disabled'} successfully`,
+ }),
+ })
+
+ queryClient.invalidateQueries({
+ queryKey: ['/api/user_templates'],
+ })
+ } catch {
+ toast.error(t('error', { defaultValue: 'Error' }), {
+ description: t(template.is_disabled ? 'templates.enableFailed' : 'templates.disableFailed', {
+ name: template.name,
+ defaultValue: `Failed to ${template.is_disabled ? 'enable' : 'disable'} Template "{name}"`,
+ }),
+ })
+ }
+ }
+
+ const filteredTemplates = useMemo(() => {
+ if (!userTemplates || !searchQuery.trim()) return userTemplates
+ const query = searchQuery.toLowerCase().trim()
+ return userTemplates.filter(
+ (template: UserTemplateResponse) =>
+ template.name?.toLowerCase().includes(query) || template.username_prefix?.toLowerCase().includes(query) || template.username_suffix?.toLowerCase().includes(query),
+ )
+ }, [userTemplates, searchQuery])
+
+ const listColumns = useUserTemplatesListColumns({ onEdit: handleEdit, onToggleStatus: handleToggleStatus })
+
+ const isCurrentlyLoading = isLoading || (isFetching && !userTemplates)
+ const isEmpty = !isCurrentlyLoading && (!filteredTemplates || filteredTemplates.length === 0) && !searchQuery.trim()
+ const isSearchEmpty = !isCurrentlyLoading && (!filteredTemplates || filteredTemplates.length === 0) && searchQuery.trim() !== ''
+
+ return (
+
+
+
+
+
+ setSearchQuery(e.target.value)} className={cn('pl-8 pr-10', dir === 'rtl' && 'pl-10 pr-8')} />
+ {searchQuery && (
+
+ )}
+
+
+
+
+
+
+
+ {(isCurrentlyLoading || (filteredTemplates && filteredTemplates.length > 0)) && (
+
template.id}
+ isLoading={isCurrentlyLoading}
+ loadingRows={6}
+ className="gap-3"
+ onRowClick={handleEdit}
+ mode={viewMode}
+ showEmptyState={false}
+ gridClassName="transform-gpu animate-slide-up"
+ gridStyle={{ animationDuration: '500ms', animationDelay: '100ms', animationFillMode: 'both' }}
+ renderGridItem={template => }
+ renderGridSkeleton={i => (
+
+
+
+ )}
+ />
+ )}
+ {isEmpty && !isCurrentlyLoading && (
+
+
+
+
{t('templates.noTemplates')}
+
{t('templates.noTemplatesDescription')}
+
+
{t('noResults')}
+
{t('templates.noSearchResults')}
+
+
+
{
+ if (!open) {
+ setEditingUserTemplate(null)
+ form.reset(userTemplateFormDefaultValues)
+ }
+ setIsDialogOpen(open)
+ }}
+ form={form}
+ editingUserTemplate={!!editingUserTemplate}
+ editingUserTemplateId={editingUserTemplate?.id}
+ />
+