@hed-hog/ticket 0.0.285

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

@@ -0,0 +1,406 @@
+'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 {
+  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 { ticketChannels } from '../_lib/mock-data';
+
+const PAGE_SIZE_OPTIONS = [10, 20, 30, 50];
+const DEFAULT_PAGE_SIZE = PAGE_SIZE_OPTIONS[0] ?? 10;
+
+export default function TicketChannelsPage() {
+  const t = useTranslations('ticket.TicketModule');
+  const [channels, setChannels] = useState(ticketChannels);
+  const [search, setSearch] = useState('');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE);
+  const [isSheetOpen, setIsSheetOpen] = useState(false);
+  const [editingId, setEditingId] = useState<number | null>(null);
+
+  const channelSchema = useMemo(
+    () =>
+      z.object({
+        code: z.string().trim().min(1, t('channels.validation.codeRequired')),
+        name: z.string().trim().min(1, t('channels.validation.nameRequired')),
+        kind: z.enum([
+          'portal',
+          'marketplace',
+          'social',
+          'form',
+          'email',
+          'whatsapp',
+          'api',
+          'other',
+        ]),
+        status: z.enum(['active', 'inactive']),
+      }),
+    [t]
+  );
+
+  type ChannelForm = z.infer<typeof channelSchema>;
+
+  const form = useForm<ChannelForm>({
+    resolver: zodResolver(channelSchema),
+    defaultValues: {
+      code: '',
+      name: '',
+      kind: 'portal',
+      status: 'active',
+    },
+  });
+
+  const filteredChannels = useMemo(() => {
+    const query = search.toLowerCase();
+    return channels.filter((item) =>
+      `${item.code} ${item.name} ${item.kind}`.toLowerCase().includes(query)
+    );
+  }, [channels, search]);
+
+  const totalPages = Math.max(1, Math.ceil(filteredChannels.length / pageSize));
+  const safePage = Math.min(page, totalPages);
+  const paginatedChannels = filteredChannels.slice(
+    (safePage - 1) * pageSize,
+    safePage * pageSize
+  );
+
+  const handleOpenCreate = () => {
+    setEditingId(null);
+    form.reset({
+      code: '',
+      name: '',
+      kind: 'portal',
+      status: 'active',
+    });
+    setIsSheetOpen(true);
+  };
+
+  const handleOpenEdit = (id: number) => {
+    const current = channels.find((item) => item.id === id);
+    if (!current) return;
+
+    setEditingId(id);
+    form.reset({
+      code: current.code,
+      name: current.name,
+      kind: current.kind,
+      status: current.status,
+    });
+    setIsSheetOpen(true);
+  };
+
+  const handleSave = async (values: ChannelForm) => {
+    if (editingId) {
+      setChannels((current) =>
+        current.map((item) =>
+          item.id === editingId ? { ...item, ...values } : item
+        )
+      );
+      toast.success(t('channels.messages.updated'));
+    } else {
+      setChannels((current) => [
+        ...current,
+        {
+          id: Math.max(0, ...current.map((item) => item.id)) + 1,
+          ...values,
+        },
+      ]);
+      toast.success(t('channels.messages.created'));
+    }
+
+    setIsSheetOpen(false);
+  };
+
+  const handleToggleStatus = (id: number) => {
+    setChannels((current) =>
+      current.map((item) =>
+        item.id === id
+          ? {
+              ...item,
+              status: item.status === 'active' ? 'inactive' : 'active',
+            }
+          : item
+      )
+    );
+  };
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('channels.title')}
+        description={t('channels.description')}
+        breadcrumbs={[
+          { label: t('common.home'), href: '/' },
+          { label: t('common.tickets'), href: '/ticket' },
+          { label: t('channels.breadcrumb') },
+        ]}
+        actions={[{ label: t('channels.new'), onClick: handleOpenCreate }]}
+      />
+
+      <SearchBar
+        searchQuery={search}
+        onSearchChange={(value) => {
+          setSearch(value);
+          setPage(1);
+        }}
+        onSearch={() => setPage(1)}
+        placeholder={t('channels.searchPlaceholder')}
+      />
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">
+            {t('channels.tableTitle')}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {filteredChannels.length === 0 ? (
+            <EmptyState
+              icon={<Layers className="h-6 w-6" />}
+              title={t('channels.emptyState.title')}
+              description={t('channels.emptyState.description')}
+              actionLabel={t('channels.emptyState.action')}
+              onAction={handleOpenCreate}
+            />
+          ) : (
+            <>
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>{t('common.code')}</TableHead>
+                    <TableHead>{t('common.name')}</TableHead>
+                    <TableHead>{t('channels.kind')}</TableHead>
+                    <TableHead>{t('common.status')}</TableHead>
+                    <TableHead>{t('common.actions')}</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {paginatedChannels.map((item) => (
+                    <TableRow key={item.id}>
+                      <TableCell className="font-medium">{item.code}</TableCell>
+                      <TableCell>{item.name}</TableCell>
+                      <TableCell>{item.kind}</TableCell>
+                      <TableCell>
+                        <Badge
+                          variant={
+                            item.status === 'active' ? 'default' : 'secondary'
+                          }
+                        >
+                          {item.status === 'active'
+                            ? 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={() => handleToggleStatus(item.id)}
+                          >
+                            {item.status === 'active'
+                              ? t('channels.disable')
+                              : t('common.enabled')}
+                          </Button>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+
+              <PaginationFooter
+                currentPage={safePage}
+                pageSize={pageSize}
+                totalItems={filteredChannels.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('channels.sheet.editTitle')
+                : t('channels.sheet.createTitle')}
+            </SheetTitle>
+            <SheetDescription>
+              {editingId
+                ? t('channels.sheet.editDescription')
+                : t('channels.sheet.createDescription')}
+            </SheetDescription>
+          </SheetHeader>
+
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(handleSave)}
+              className="mt-6 space-y-4"
+            >
+              <FormField
+                control={form.control}
+                name="code"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('common.code')}</FormLabel>
+                    <FormControl>
+                      <Input
+                        {...field}
+                        placeholder={t('channels.form.codePlaceholder')}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('common.name')}</FormLabel>
+                    <FormControl>
+                      <Input
+                        {...field}
+                        placeholder={t('channels.form.namePlaceholder')}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="kind"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('channels.kind')}</FormLabel>
+                    <FormControl>
+                      <Select
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      >
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="portal">portal</SelectItem>
+                          <SelectItem value="marketplace">
+                            marketplace
+                          </SelectItem>
+                          <SelectItem value="social">social</SelectItem>
+                          <SelectItem value="form">form</SelectItem>
+                          <SelectItem value="email">email</SelectItem>
+                          <SelectItem value="whatsapp">whatsapp</SelectItem>
+                          <SelectItem value="api">api</SelectItem>
+                          <SelectItem value="other">other</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </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>
+                )}
+              />
+
+              <SheetFooter>
+                <Button type="submit" className="w-full">
+                  {editingId
+                    ? t('channels.form.submitUpdate')
+                    : t('channels.form.submitCreate')}
+                </Button>
+              </SheetFooter>
+            </form>
+          </Form>
+        </SheetContent>
+      </Sheet>
+    </Page>
+  );
+}

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

@@ -0,0 +1,178 @@
+'use client';
+
+import { Page, PageHeader, StatsCards } from '@/components/entity-list';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  AlertTriangle,
+  Bot,
+  CheckCircle2,
+  Clock3,
+  Inbox,
+  Timer,
+} from 'lucide-react';
+import {
+  dashboardSummary,
+  latestActivity,
+  ticketPeople,
+  ticketsByChannel,
+  ticketsByCourse,
+} from '../_lib/mock-data';
+import { useTranslations } from 'next-intl';
+
+export default function TicketDashboardPage() {
+  const t = useTranslations('ticket.TicketModule');
+  const maxChannel = Math.max(...ticketsByChannel.map((item) => item.value));
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('dashboard.title')}
+        description={t('dashboard.description')}
+        breadcrumbs={[
+          { label: t('common.home'), href: '/' },
+          { label: t('common.tickets'), href: '/ticket' },
+          { label: t('dashboard.breadcrumb') },
+        ]}
+      />
+
+      <StatsCards
+        stats={[
+          {
+            title: t('dashboard.stats.totalOpen'),
+            value: dashboardSummary.totalOpen,
+            icon: <Inbox className="h-5 w-5" />,
+            iconBgColor: 'bg-blue-50',
+            iconColor: 'text-blue-600',
+          },
+          {
+            title: t('dashboard.stats.pending'),
+            value: dashboardSummary.pending,
+            icon: <Clock3 className="h-5 w-5" />,
+            iconBgColor: 'bg-amber-50',
+            iconColor: 'text-amber-600',
+          },
+          {
+            title: t('dashboard.stats.resolvedToday'),
+            value: dashboardSummary.resolvedToday,
+            icon: <CheckCircle2 className="h-5 w-5" />,
+            iconBgColor: 'bg-emerald-50',
+            iconColor: 'text-emerald-600',
+          },
+          {
+            title: t('dashboard.stats.aiPendingReview'),
+            value: dashboardSummary.aiPendingReview,
+            icon: <Bot className="h-5 w-5" />,
+            iconBgColor: 'bg-fuchsia-50',
+            iconColor: 'text-fuchsia-600',
+          },
+          {
+            title: t('dashboard.stats.waitingCustomer'),
+            value: dashboardSummary.waitingCustomer,
+            icon: <Timer className="h-5 w-5" />,
+            iconBgColor: 'bg-violet-50',
+            iconColor: 'text-violet-600',
+          },
+          {
+            title: t('dashboard.stats.urgent'),
+            value: dashboardSummary.urgent,
+            icon: <AlertTriangle className="h-5 w-5" />,
+            iconBgColor: 'bg-rose-50',
+            iconColor: 'text-rose-600',
+          },
+        ]}
+        className="sm:grid-cols-3 lg:grid-cols-6"
+      />
+
+      <div className="grid gap-4 lg:grid-cols-3">
+        <Card className="lg:col-span-1">
+          <CardHeader>
+            <CardTitle className="text-base">
+              {t('dashboard.cards.byChannel')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {ticketsByChannel.map((item) => (
+              <div key={item.label}>
+                <div className="mb-1 flex items-center justify-between text-sm">
+                  <span>{item.label}</span>
+                  <span className="font-semibold">{item.value}</span>
+                </div>
+                <div className="h-2 rounded bg-slate-100">
+                  <div
+                    className={`h-2 rounded ${item.color}`}
+                    style={{
+                      width: `${Math.round((item.value / maxChannel) * 100)}%`,
+                    }}
+                  />
+                </div>
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+
+        <Card className="lg:col-span-1">
+          <CardHeader>
+            <CardTitle className="text-base">
+              {t('dashboard.cards.byCourse')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2">
+            {ticketsByCourse.map((item) => (
+              <div
+                key={item.label}
+                className="flex items-center justify-between rounded border p-2 text-sm"
+              >
+                <span>{item.label}</span>
+                <span className="font-semibold">{item.value}</span>
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+
+        <Card className="lg:col-span-1">
+          <CardHeader>
+            <CardTitle className="text-base">
+              {t('dashboard.cards.byOwner')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2">
+            {ticketPeople
+              .filter((person) => person.roleLabel !== 'Requester')
+              .map((person, index) => (
+                <div
+                  key={person.id}
+                  className="flex items-center justify-between rounded border p-2 text-sm"
+                >
+                  <span>{person.name}</span>
+                  <span className="font-semibold">
+                    {index === 0 ? 44 : index === 1 ? 39 : 21}
+                  </span>
+                </div>
+              ))}
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">
+            {t('dashboard.cards.latestActivity')}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-2">
+          {latestActivity.map((item) => (
+            <div
+              key={item.time + item.label}
+              className="flex gap-3 rounded border p-3 text-sm"
+            >
+              <span className="w-14 font-semibold text-blue-600">
+                {item.time}
+              </span>
+              <span>{item.label}</span>
+            </div>
+          ))}
+        </CardContent>
+      </Card>
+    </Page>
+  );
+}