@hed-hog/ticket 0.0.285

package/hedhog/frontend/app/roles/page.tsx.ejs

@@ -0,0 +1,110 @@
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { useTranslations } from 'next-intl';
+import { ticketRolePermissions } from '../_lib/mock-data';
+
+function Mark({ value }: { value: boolean }) {
+  const t = useTranslations('ticket.TicketModule');
+
+  return (
+    <Badge variant={value ? 'default' : 'secondary'}>
+      {value ? t('common.yes') : t('common.no')}
+    </Badge>
+  );
+}
+
+export default function TicketRolesPage() {
+  const t = useTranslations('ticket.TicketModule');
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('roles.title')}
+        description={t('roles.description')}
+        breadcrumbs={[
+          { label: t('common.home'), href: '/' },
+          { label: t('common.tickets'), href: '/ticket' },
+          { label: t('roles.breadcrumb') },
+        ]}
+      />
+
+      <div className="grid gap-4 lg:grid-cols-3">
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">{t('roles.cards.adminTitle')}</CardTitle>
+          </CardHeader>
+          <CardContent className="text-sm text-muted-foreground">
+            {t('roles.cards.adminDesc')}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">
+              {t('roles.cards.operatorTitle')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="text-sm text-muted-foreground">
+            {t('roles.cards.operatorDesc')}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">
+              {t('roles.cards.analystTitle')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="text-sm text-muted-foreground">
+            {t('roles.cards.analystDesc')}
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">{t('roles.tableTitle')}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t('roles.columns.permission')}</TableHead>
+                <TableHead>{t('roles.columns.admin')}</TableHead>
+                <TableHead>{t('roles.columns.operator')}</TableHead>
+                <TableHead>{t('roles.columns.analyst')}</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {ticketRolePermissions.map((item) => (
+                <TableRow key={item.permission}>
+                  <TableCell>{item.permission}</TableCell>
+                  <TableCell>
+                    <Mark value={item.ticketAdmin} />
+                  </TableCell>
+                  <TableCell>
+                    <Mark value={item.ticketOperator} />
+                  </TableCell>
+                  <TableCell>
+                    <Mark value={item.ticketAnalyst} />
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </Page>
+  );
+}

package/hedhog/frontend/app/settings/page.tsx.ejs

@@ -0,0 +1,484 @@
+'use client';
+
+import { Page, PageHeader } 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 { Switch } from '@/components/ui/switch';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useTranslations } from 'next-intl';
+import { ReactNode, useMemo } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+function SettingRow({
+  title,
+  description,
+  control,
+}: {
+  title: string;
+  description: string;
+  control: ReactNode;
+}) {
+  return (
+    <div className="grid gap-2 rounded border p-3 md:grid-cols-[1fr_auto] md:items-center">
+      <div>
+        <div className="text-sm font-semibold">{title}</div>
+        <div className="text-xs text-muted-foreground">{description}</div>
+      </div>
+      <div>{control}</div>
+    </div>
+  );
+}
+
+export default function TicketSettingsPage() {
+  const t = useTranslations('ticket.TicketModule');
+
+  const settingsSchema = useMemo(
+    () =>
+      z.object({
+        enabled: z.boolean(),
+        codePrefix: z
+          .string()
+          .trim()
+          .min(1, t('settings.validation.codePrefixRequired')),
+        aiMode: z.enum(['disabled', 'optional', 'required']),
+        visibility: z.enum(['private', 'public']),
+        autoAssign: z.boolean(),
+        owner: z
+          .string()
+          .trim()
+          .min(1, t('settings.validation.ownerRequired'))
+          .regex(/^\d+$/, t('settings.validation.ownerNumeric')),
+        publicReply: z.boolean(),
+        internalNotes: z.boolean(),
+        reopen: z.boolean(),
+        closeAfter: z
+          .string()
+          .trim()
+          .min(1, t('settings.validation.closeAfterRequired'))
+          .regex(/^\d+$/, t('settings.validation.closeAfterNumeric')),
+      }),
+    [t]
+  );
+
+  type SettingsForm = z.infer<typeof settingsSchema>;
+
+  const form = useForm<SettingsForm>({
+    resolver: zodResolver(settingsSchema),
+    defaultValues: {
+      enabled: true,
+      codePrefix: 'TCK',
+      aiMode: 'optional',
+      visibility: 'private',
+      autoAssign: false,
+      owner: '101',
+      publicReply: true,
+      internalNotes: true,
+      reopen: true,
+      closeAfter: '15',
+    },
+  });
+
+  const handleSubmit = async (values: SettingsForm) => {
+    console.log('ticket settings payload', values);
+    toast.success(t('settings.messages.saved'));
+  };
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('settings.title')}
+        description={t('settings.description')}
+        breadcrumbs={[
+          { label: t('common.home'), href: '/' },
+          { label: t('common.tickets'), href: '/ticket' },
+          { label: t('settings.breadcrumb') },
+        ]}
+      />
+
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">
+                {t('settings.general')}
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              <FormField
+                control={form.control}
+                name="enabled"
+                render={({ field }) => (
+                  <SettingRow
+                    title={t('settings.rows.enabledTitle')}
+                    description={t('settings.rows.enabledDesc')}
+                    control={
+                      <FormItem>
+                        <FormLabel className="sr-only">enabled</FormLabel>
+                        <FormControl>
+                          <Switch
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    }
+                  />
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="codePrefix"
+                render={({ field }) => (
+                  <SettingRow
+                    title={t('settings.rows.codePrefixTitle')}
+                    description={t('settings.rows.codePrefixDesc')}
+                    control={
+                      <FormItem>
+                        <FormLabel className="sr-only">codePrefix</FormLabel>
+                        <FormControl>
+                          <Input {...field} className="w-[180px]" />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    }
+                  />
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="aiMode"
+                render={({ field }) => (
+                  <SettingRow
+                    title={t('settings.rows.aiModeTitle')}
+                    description={t('settings.rows.aiModeDesc')}
+                    control={
+                      <FormItem>
+                        <FormLabel className="sr-only">aiMode</FormLabel>
+                        <FormControl>
+                          <Select
+                            value={field.value}
+                            onValueChange={field.onChange}
+                          >
+                            <SelectTrigger className="w-[180px]">
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="disabled">
+                                {t('settings.values.disabled')}
+                              </SelectItem>
+                              <SelectItem value="optional">
+                                {t('settings.values.optional')}
+                              </SelectItem>
+                              <SelectItem value="required">
+                                {t('settings.values.required')}
+                              </SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    }
+                  />
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="visibility"
+                render={({ field }) => (
+                  <SettingRow
+                    title={t('settings.rows.visibilityTitle')}
+                    description={t('settings.rows.visibilityDesc')}
+                    control={
+                      <FormItem>
+                        <FormLabel className="sr-only">visibility</FormLabel>
+                        <FormControl>
+                          <Select
+                            value={field.value}
+                            onValueChange={field.onChange}
+                          >
+                            <SelectTrigger className="w-[180px]">
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="private">
+                                {t('settings.values.private')}
+                              </SelectItem>
+                              <SelectItem value="public">
+                                {t('settings.values.public')}
+                              </SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    }
+                  />
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="autoAssign"
+                render={({ field }) => (
+                  <SettingRow
+                    title={t('settings.rows.autoAssignTitle')}
+                    description={t('settings.rows.autoAssignDesc')}
+                    control={
+                      <FormItem>
+                        <FormLabel className="sr-only">autoAssign</FormLabel>
+                        <FormControl>
+                          <Switch
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    }
+                  />
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="owner"
+                render={({ field }) => (
+                  <SettingRow
+                    title={t('settings.rows.ownerTitle')}
+                    description={t('settings.rows.ownerDesc')}
+                    control={
+                      <FormItem>
+                        <FormLabel className="sr-only">owner</FormLabel>
+                        <FormControl>
+                          <Input {...field} className="w-[180px]" />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    }
+                  />
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="publicReply"
+                render={({ field }) => (
+                  <SettingRow
+                    title={t('settings.rows.publicReplyTitle')}
+                    description={t('settings.rows.publicReplyDesc')}
+                    control={
+                      <FormItem>
+                        <FormLabel className="sr-only">publicReply</FormLabel>
+                        <FormControl>
+                          <Switch
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    }
+                  />
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="internalNotes"
+                render={({ field }) => (
+                  <SettingRow
+                    title={t('settings.rows.internalNotesTitle')}
+                    description={t('settings.rows.internalNotesDesc')}
+                    control={
+                      <FormItem>
+                        <FormLabel className="sr-only">internalNotes</FormLabel>
+                        <FormControl>
+                          <Switch
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    }
+                  />
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="reopen"
+                render={({ field }) => (
+                  <SettingRow
+                    title={t('settings.rows.reopenTitle')}
+                    description={t('settings.rows.reopenDesc')}
+                    control={
+                      <FormItem>
+                        <FormLabel className="sr-only">reopen</FormLabel>
+                        <FormControl>
+                          <Switch
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    }
+                  />
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="closeAfter"
+                render={({ field }) => (
+                  <SettingRow
+                    title={t('settings.rows.closeAfterTitle')}
+                    description={t('settings.rows.closeAfterDesc')}
+                    control={
+                      <FormItem>
+                        <FormLabel className="sr-only">closeAfter</FormLabel>
+                        <FormControl>
+                          <Input {...field} className="w-[180px]" />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    }
+                  />
+                )}
+              />
+
+              <Button type="submit">{t('settings.actions.save')}</Button>
+            </CardContent>
+          </Card>
+        </form>
+      </Form>
+
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">
+              {t('settings.groups.email')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2 text-sm">
+            <Badge variant="outline">ticket.channel.email.*</Badge>
+            <p className="text-muted-foreground">
+              {t('settings.descriptions.emailControls')}
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">
+              {t('settings.groups.whatsapp')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2 text-sm">
+            <Badge variant="outline">ticket.channel.whatsapp.*</Badge>
+            <p className="text-muted-foreground">
+              {t('settings.descriptions.whatsappControls')}
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">
+              {t('settings.groups.portal')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2 text-sm">
+            <Badge variant="outline">ticket.channel.portal.*</Badge>
+            <p className="text-muted-foreground">
+              {t('settings.descriptions.portalControls')}
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">
+              {t('settings.groups.marketplace')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2 text-sm">
+            <Badge variant="outline">ticket.channel.marketplace.*</Badge>
+            <p className="text-muted-foreground">
+              {t('settings.descriptions.marketplaceControls')}
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">
+              {t('settings.groups.social')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2 text-sm">
+            <Badge variant="outline">ticket.channel.social.*</Badge>
+            <p className="text-muted-foreground">
+              {t('settings.descriptions.socialControls')}
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">
+              {t('settings.groups.accounts')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2 text-sm">
+            <Badge variant="outline">
+              ticket.channel_account.suporte_hcode_com_br.*
+            </Badge>
+            <Badge variant="outline">
+              ticket.channel_account.whatsapp_hcode.*
+            </Badge>
+            <p className="text-muted-foreground">
+              {t('settings.descriptions.accountsControls')}
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">
+            {t('settings.groups.help')}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-2 text-sm text-muted-foreground">
+          <p>{t('settings.descriptions.helpLine1')}</p>
+          <p>{t('settings.descriptions.helpLine2')}</p>
+        </CardContent>
+      </Card>
+    </Page>
+  );
+}