@hed-hog/ticket 0.0.285

package/hedhog/frontend/app/ai-review/page.tsx.ejs

@@ -0,0 +1,205 @@
+'use client';
+
+import {
+  Page,
+  PageHeader,
+  PaginationFooter,
+  SearchBar,
+} from '@/components/entity-list';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { useMemo, useState } from 'react';
+import { useTranslations } from 'next-intl';
+import { AIDraftEditorDialog } from '../_components/ai-draft-editor-dialog';
+import { ticketDrafts } from '../_lib/mock-data';
+
+export default function TicketAiReviewPage() {
+  const t = useTranslations('ticket.TicketModule');
+  const [search, setSearch] = useState('');
+  const [status, setStatus] = useState('pending_review');
+  const [reviewStatus, setReviewStatus] = useState<
+    Record<number, 'pending_review' | 'approved' | 'rejected'>
+  >({});
+  const [openEditor, setOpenEditor] = useState(false);
+  const [selectedDraftId, setSelectedDraftId] = useState<number | null>(null);
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+
+  const filtered = useMemo(
+    () =>
+      ticketDrafts.filter((draft) => {
+        const effectiveStatus = reviewStatus[draft.id] ?? draft.status;
+        const matchesSearch =
+          `${draft.ticketCode} ${draft.context} ${draft.channel}`
+            .toLowerCase()
+            .includes(search.toLowerCase());
+
+        return (
+          matchesSearch && (status === 'all' || effectiveStatus === status)
+        );
+      }),
+    [search, status, reviewStatus]
+  );
+
+  const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));
+  const safePage = Math.min(page, totalPages);
+  const paged = filtered.slice((safePage - 1) * pageSize, safePage * pageSize);
+
+  const getDraftStatus = (
+    id: number,
+    fallback: (typeof ticketDrafts)[number]['status']
+  ) => reviewStatus[id] ?? fallback;
+
+  const selectedDraft = ticketDrafts.find(
+    (item) => item.id === selectedDraftId
+  );
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('aiReview.title')}
+        description={t('aiReview.description')}
+        breadcrumbs={[
+          { label: t('common.home'), href: '/' },
+          { label: t('common.tickets'), href: '/ticket' },
+          { label: t('aiReview.breadcrumb') },
+        ]}
+      />
+
+      <SearchBar
+        searchQuery={search}
+        onSearchChange={(value) => {
+          setSearch(value);
+          setPage(1);
+        }}
+        onSearch={() => setPage(1)}
+        placeholder={t('aiReview.searchPlaceholder')}
+        controls={[
+          {
+            id: 'status',
+            type: 'select',
+            value: status,
+            onChange: (value) => {
+              setStatus(value);
+              setPage(1);
+            },
+            options: [
+              { value: 'all', label: t('aiReview.allStatus') },
+              { value: 'pending_review', label: t('aiReview.pendingReview') },
+              { value: 'approved', label: t('aiReview.approved') },
+              { value: 'rejected', label: t('aiReview.rejected') },
+            ],
+          },
+        ]}
+      />
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">{t('aiReview.tableTitle')}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t('aiReview.columns.ticket')}</TableHead>
+                <TableHead>{t('aiReview.columns.channel')}</TableHead>
+                <TableHead>{t('aiReview.columns.context')}</TableHead>
+                <TableHead>{t('aiReview.columns.model')}</TableHead>
+                <TableHead>{t('aiReview.columns.status')}</TableHead>
+                <TableHead>{t('aiReview.columns.original')}</TableHead>
+                <TableHead>{t('aiReview.columns.suggestion')}</TableHead>
+                <TableHead>{t('aiReview.columns.actions')}</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {paged.map((draft) => {
+                const currentStatus = getDraftStatus(draft.id, draft.status);
+
+                return (
+                  <TableRow key={draft.id}>
+                    <TableCell>{draft.ticketCode}</TableCell>
+                    <TableCell>{draft.channel}</TableCell>
+                    <TableCell>{draft.context}</TableCell>
+                    <TableCell>{draft.modelName}</TableCell>
+                    <TableCell>
+                      {currentStatus === 'pending_review'
+                        ? t('aiReview.pendingReview')
+                        : currentStatus === 'approved'
+                          ? t('aiReview.approved')
+                          : t('aiReview.rejected')}
+                    </TableCell>
+                    <TableCell className="max-w-[220px] text-xs text-muted-foreground">
+                      {draft.originalSnippet}
+                    </TableCell>
+                    <TableCell className="max-w-[260px] text-xs text-muted-foreground">
+                      {draft.suggestion}
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex gap-2">
+                        <Button
+                          size="sm"
+                          onClick={() =>
+                            setReviewStatus((current) => ({
+                              ...current,
+                              [draft.id]: 'approved',
+                            }))
+                          }
+                        >
+                          {t('aiReview.actions.approve')}
+                        </Button>
+                        <Button
+                          size="sm"
+                          variant="destructive"
+                          onClick={() =>
+                            setReviewStatus((current) => ({
+                              ...current,
+                              [draft.id]: 'rejected',
+                            }))
+                          }
+                        >
+                          {t('aiReview.actions.reject')}
+                        </Button>
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          onClick={() => {
+                            setSelectedDraftId(draft.id);
+                            setOpenEditor(true);
+                          }}
+                        >
+                          {t('aiReview.actions.edit')}
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+
+          <PaginationFooter
+            currentPage={safePage}
+            pageSize={pageSize}
+            totalItems={filtered.length}
+            onPageChange={setPage}
+            onPageSizeChange={setPageSize}
+          />
+        </CardContent>
+      </Card>
+
+      <AIDraftEditorDialog
+        open={openEditor}
+        onOpenChange={setOpenEditor}
+        draft={selectedDraft}
+      />
+    </Page>
+  );
+}

package/hedhog/frontend/app/channel-accounts/page.tsx.ejs

@@ -0,0 +1,476 @@
+'use client';
+
+import {
+  EmptyState,
+  Page,
+  PageHeader,
+  PaginationFooter,
+  SearchBar,
+} from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Switch } from '@/components/ui/switch';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Layers } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+import {
+  getChannelById,
+  ticketChannelAccounts,
+  ticketChannels,
+} from '../_lib/mock-data';
+
+const PAGE_SIZE_OPTIONS = [10, 20, 30, 50];
+
+export default function TicketChannelAccountsPage() {
+  const t = useTranslations('ticket.TicketModule');
+  const [accounts, setAccounts] = useState(ticketChannelAccounts);
+  const [search, setSearch] = useState('');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(PAGE_SIZE_OPTIONS[0]);
+  const [isSheetOpen, setIsSheetOpen] = useState(false);
+  const [editingId, setEditingId] = useState<number | null>(null);
+
+  const accountSchema = useMemo(
+    () =>
+      z.object({
+        code: z
+          .string()
+          .trim()
+          .min(1, t('channelAccounts.validation.codeRequired')),
+        channelId: z
+          .string()
+          .trim()
+          .min(1, t('channelAccounts.validation.channelRequired')),
+        name: z
+          .string()
+          .trim()
+          .min(1, t('channelAccounts.validation.nameRequired')),
+        externalIdentifier: z
+          .string()
+          .trim()
+          .min(1, t('channelAccounts.validation.externalIdentifierRequired')),
+        status: z.enum(['active', 'inactive']),
+        aiEnabled: z.boolean(),
+      }),
+    [t]
+  );
+
+  type AccountForm = z.infer<typeof accountSchema>;
+
+  const form = useForm<AccountForm>({
+    resolver: zodResolver(accountSchema),
+    defaultValues: {
+      code: '',
+      channelId: String(ticketChannels[0]?.id ?? 1),
+      name: '',
+      externalIdentifier: '',
+      status: 'active',
+      aiEnabled: true,
+    },
+  });
+
+  const filteredAccounts = useMemo(() => {
+    const query = search.toLowerCase();
+    return accounts.filter((item) => {
+      const channelName = getChannelById(item.channelId)?.name ?? '';
+      return `${item.code} ${item.name} ${item.externalIdentifier} ${channelName}`
+        .toLowerCase()
+        .includes(query);
+    });
+  }, [accounts, search]);
+
+  const totalPages = Math.max(1, Math.ceil(filteredAccounts.length / pageSize));
+  const safePage = Math.min(page, totalPages);
+  const paginatedAccounts = filteredAccounts.slice(
+    (safePage - 1) * pageSize,
+    safePage * pageSize
+  );
+
+  const handleOpenCreate = () => {
+    setEditingId(null);
+    form.reset({
+      code: '',
+      channelId: String(ticketChannels[0]?.id ?? 1),
+      name: '',
+      externalIdentifier: '',
+      status: 'active',
+      aiEnabled: true,
+    });
+    setIsSheetOpen(true);
+  };
+
+  const handleOpenEdit = (id: number) => {
+    const current = accounts.find((item) => item.id === id);
+    if (!current) return;
+
+    setEditingId(id);
+    form.reset({
+      code: current.code,
+      channelId: String(current.channelId),
+      name: current.name,
+      externalIdentifier: current.externalIdentifier,
+      status: current.status,
+      aiEnabled: current.aiEnabled,
+    });
+    setIsSheetOpen(true);
+  };
+
+  const handleSave = async (values: AccountForm) => {
+    const payload = {
+      code: values.code,
+      channelId: Number(values.channelId),
+      name: values.name,
+      externalIdentifier: values.externalIdentifier,
+      status: values.status,
+      aiEnabled: values.aiEnabled,
+      aiModel: values.aiEnabled ? 'gpt-5.3-mini' : 'disabled',
+    };
+
+    if (editingId) {
+      setAccounts((current) =>
+        current.map((item) =>
+          item.id === editingId ? { ...item, ...payload } : item
+        )
+      );
+      toast.success(t('channelAccounts.messages.updated'));
+    } else {
+      setAccounts((current) => [
+        ...current,
+        {
+          id: Math.max(0, ...current.map((item) => item.id)) + 1,
+          ...payload,
+        },
+      ]);
+      toast.success(t('channelAccounts.messages.created'));
+    }
+
+    setIsSheetOpen(false);
+  };
+
+  const handleTestConnection = () => {
+    toast.success(t('channelAccounts.messages.connectionTested'));
+  };
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('channelAccounts.title')}
+        description={t('channelAccounts.description')}
+        breadcrumbs={[
+          { label: t('common.home'), href: '/' },
+          { label: t('common.tickets'), href: '/ticket' },
+          { label: t('channelAccounts.breadcrumb') },
+        ]}
+        actions={[
+          { label: t('channelAccounts.new'), onClick: handleOpenCreate },
+        ]}
+      />
+
+      <SearchBar
+        searchQuery={search}
+        onSearchChange={(value) => {
+          setSearch(value);
+          setPage(1);
+        }}
+        onSearch={() => setPage(1)}
+        placeholder={t('channelAccounts.searchPlaceholder')}
+      />
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">
+            {t('channelAccounts.tableTitle')}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {filteredAccounts.length === 0 ? (
+            <EmptyState
+              icon={<Layers className="h-6 w-6" />}
+              title={t('channelAccounts.emptyState.title')}
+              description={t('channelAccounts.emptyState.description')}
+              actionLabel={t('channelAccounts.emptyState.action')}
+              onAction={handleOpenCreate}
+            />
+          ) : (
+            <>
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>{t('common.code')}</TableHead>
+                    <TableHead>{t('common.channel')}</TableHead>
+                    <TableHead>{t('common.name')}</TableHead>
+                    <TableHead>
+                      {t('channelAccounts.externalIdentifier')}
+                    </TableHead>
+                    <TableHead>{t('common.status')}</TableHead>
+                    <TableHead>{t('channelAccounts.aiEnabled')}</TableHead>
+                    <TableHead>{t('common.actions')}</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {paginatedAccounts.map((item) => (
+                    <TableRow key={item.id}>
+                      <TableCell className="font-medium">{item.code}</TableCell>
+                      <TableCell>
+                        {getChannelById(item.channelId)?.name}
+                      </TableCell>
+                      <TableCell>{item.name}</TableCell>
+                      <TableCell>{item.externalIdentifier}</TableCell>
+                      <TableCell>
+                        <Badge
+                          variant={
+                            item.status === 'active' ? 'default' : 'secondary'
+                          }
+                        >
+                          {item.status === 'active'
+                            ? t('common.enabled')
+                            : t('common.disabled')}
+                        </Badge>
+                      </TableCell>
+                      <TableCell>
+                        <Badge
+                          variant={item.aiEnabled ? 'default' : 'secondary'}
+                        >
+                          {item.aiEnabled
+                            ? t('common.enabled')
+                            : t('common.disabled')}
+                        </Badge>
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex gap-2">
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            onClick={() => handleOpenEdit(item.id)}
+                          >
+                            {t('common.edit')}
+                          </Button>
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            onClick={handleTestConnection}
+                          >
+                            {t('channelAccounts.testConnection')}
+                          </Button>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+
+              <PaginationFooter
+                currentPage={safePage}
+                pageSize={pageSize}
+                totalItems={filteredAccounts.length}
+                onPageChange={setPage}
+                onPageSizeChange={setPageSize}
+                pageSizeOptions={PAGE_SIZE_OPTIONS}
+              />
+            </>
+          )}
+        </CardContent>
+      </Card>
+
+      <Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
+        <SheetContent className="w-full sm:max-w-lg">
+          <SheetHeader>
+            <SheetTitle>
+              {editingId
+                ? t('channelAccounts.sheet.editTitle')
+                : t('channelAccounts.sheet.createTitle')}
+            </SheetTitle>
+            <SheetDescription>
+              {editingId
+                ? t('channelAccounts.sheet.editDescription')
+                : t('channelAccounts.sheet.createDescription')}
+            </SheetDescription>
+          </SheetHeader>
+
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(handleSave)}
+              className="mt-6 space-y-4"
+            >
+              <FormField
+                control={form.control}
+                name="channelId"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('common.channel')}</FormLabel>
+                    <FormControl>
+                      <Select
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      >
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {ticketChannels.map((channel) => (
+                            <SelectItem
+                              key={channel.id}
+                              value={String(channel.id)}
+                            >
+                              {channel.name}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="code"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('common.code')}</FormLabel>
+                    <FormControl>
+                      <Input
+                        {...field}
+                        placeholder={t('channelAccounts.form.codePlaceholder')}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('common.name')}</FormLabel>
+                    <FormControl>
+                      <Input
+                        {...field}
+                        placeholder={t('channelAccounts.form.namePlaceholder')}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="externalIdentifier"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      {t('channelAccounts.externalIdentifier')}
+                    </FormLabel>
+                    <FormControl>
+                      <Input
+                        {...field}
+                        placeholder={t(
+                          'channelAccounts.form.externalIdentifierPlaceholder'
+                        )}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="status"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('common.status')}</FormLabel>
+                    <FormControl>
+                      <Select
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      >
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="active">
+                            {t('common.enabled')}
+                          </SelectItem>
+                          <SelectItem value="inactive">
+                            {t('common.disabled')}
+                          </SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="aiEnabled"
+                render={({ field }) => (
+                  <FormItem className="flex items-center justify-between rounded border p-3">
+                    <FormLabel>{t('channelAccounts.aiEnabled')}</FormLabel>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                      />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+
+              <SheetFooter>
+                <Button type="submit" className="w-full">
+                  {editingId
+                    ? t('channelAccounts.form.submitUpdate')
+                    : t('channelAccounts.form.submitCreate')}
+                </Button>
+              </SheetFooter>
+            </form>
+          </Form>
+        </SheetContent>
+      </Sheet>
+    </Page>
+  );
+}