@hed-hog/core 0.0.185 → 0.0.190

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

@@ -0,0 +1,814 @@
+'use client';
+
+import {
+  PageHeader,
+  PaginationFooter,
+  SearchBar,
+  StatsCards,
+} from '@/components/entity-list';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+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,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Textarea } from '@/components/ui/textarea';
+import { Role } from '@hed-hog/api-types';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  FileText,
+  Menu,
+  Route,
+  Save,
+  ShieldCheck,
+  Trash2,
+  Users,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+import { RoleMenusSection } from './menus';
+import { RoleRoutesSection } from './routes';
+import { RoleUsersSection } from './users';
+
+type PaginatedResponse<T> = {
+  data: T[];
+  total: number;
+  page: number;
+  pageSize: number;
+};
+
+type RoleStats = {
+  totalRoles: number;
+};
+
+type Locale = {
+  code: string;
+  name: string;
+};
+
+type RoleLocale = {
+  name: string;
+  description?: string;
+};
+
+type RoleDetail = {
+  id: number;
+  slug: string;
+  role_locale?: Array<{
+    name: string;
+    description?: string;
+    locale?: {
+      code: string;
+    };
+  }>;
+  locale?: Record<string, RoleLocale>;
+};
+
+export default function RolePage() {
+  const t = useTranslations('core.RolePage');
+  const { request, currentLocaleCode, locales } = useApp();
+
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [editingRole, setEditingRole] = useState<RoleDetail | null>(null);
+  const [formError, setFormError] = useState<string | null>(null);
+  const [editFormError, setEditFormError] = useState<string | null>(null);
+  const [selectedLocale, setSelectedLocale] = useState(currentLocaleCode);
+
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(12);
+  const [activeTab, setActiveTab] = useState('basic-info');
+  const [openDeleteModal, setOpenDeleteModal] = useState(false);
+
+  const {
+    data: rolesResponse,
+    isLoading,
+    refetch,
+  } = useQuery<PaginatedResponse<Role>>({
+    queryKey: ['roles', page, pageSize, searchQuery, currentLocaleCode],
+    queryFn: async () => {
+      const params = new URLSearchParams();
+      params.set('page', String(page));
+      params.set('pageSize', String(pageSize));
+      if (searchQuery) params.set('search', searchQuery);
+
+      const response = await request<PaginatedResponse<Role>>({
+        url: `/role?${params.toString()}`,
+        method: 'GET',
+      });
+      return response.data;
+    },
+  });
+
+  const stats: RoleStats = {
+    totalRoles: Number(rolesResponse?.total || 0),
+  };
+
+  const addRoleSchema = z.object({
+    slug: z.string().min(2, t('errorSlug')),
+    name: z.string().min(2, t('errorName')),
+    description: z.string().optional(),
+  });
+
+  const form = useForm<z.infer<typeof addRoleSchema>>({
+    resolver: zodResolver(addRoleSchema),
+    defaultValues: {
+      slug: '',
+      name: '',
+      description: '',
+    },
+  });
+
+  const editRoleSchema = z.object({
+    slug: z.string().min(2, t('errorSlug')),
+    name: z.string().min(2, t('errorName')),
+    description: z.string().optional(),
+  });
+
+  const editForm = useForm<z.infer<typeof editRoleSchema>>({
+    resolver: zodResolver(editRoleSchema),
+    defaultValues: {
+      slug: '',
+      name: '',
+      description: '',
+    },
+  });
+
+  useEffect(() => {
+    if (editingRole && editingRole.locale && selectedLocale) {
+      const localeData = editingRole.locale[selectedLocale];
+      editForm.reset({
+        slug: editingRole.slug || '',
+        name: localeData?.name || '',
+        description: localeData?.description || '',
+      });
+    }
+  }, [editingRole, selectedLocale]);
+
+  useEffect(() => {
+    if (editingRole) {
+      setSelectedLocale(currentLocaleCode);
+      setActiveTab('basic-info');
+    }
+  }, [editingRole?.id]);
+
+  const onSubmit = async (values: z.infer<typeof addRoleSchema>) => {
+    try {
+      const localeData: Record<string, RoleLocale> = {};
+      localeData[currentLocaleCode] = {
+        name: values.name,
+        description: values.description || '',
+      };
+
+      await request({
+        url: '/role',
+        method: 'POST',
+        data: {
+          slug: values.slug,
+          locale: localeData,
+        },
+      });
+
+      form.reset();
+      refetch();
+      setIsDialogOpen(false);
+      setFormError(null);
+      toast.success(t('roleCreatedSuccess'));
+    } catch (err: any) {
+      const msg =
+        err?.response?.data?.message ||
+        err?.response?.data?.error ||
+        err?.message ||
+        t('serverError');
+
+      setFormError(String(msg));
+    }
+  };
+
+  const handleEdit = async (role: Role) => {
+    setEditFormError(null);
+
+    try {
+      const response = await request<RoleDetail>({
+        url: `/role/${role.role_id}`,
+        method: 'GET',
+      });
+
+      const fullRole = response.data;
+      const localeData: Record<string, RoleLocale> = {};
+      if (fullRole.role_locale && Array.isArray(fullRole.role_locale)) {
+        fullRole.role_locale.forEach((rl: any) => {
+          const localeCode = rl.locale?.code;
+          if (localeCode) {
+            localeData[localeCode] = {
+              name: rl.name || '',
+              description: rl.description || '',
+            };
+          }
+        });
+      }
+
+      locales?.forEach((locale: Locale) => {
+        if (!localeData[locale.code]) {
+          localeData[locale.code] = {
+            name: '',
+            description: '',
+          };
+        }
+      });
+
+      setEditingRole({
+        ...fullRole,
+        locale: localeData,
+      });
+    } catch (err) {
+      console.error('Error fetching role:', err);
+      toast.error(t('serverError'));
+    }
+  };
+
+  const onEditSubmit = async (values: z.infer<typeof editRoleSchema>) => {
+    if (!editingRole || !editingRole.locale) return;
+
+    try {
+      const updatedLocale = {
+        ...editingRole.locale,
+        [selectedLocale]: {
+          name: values.name,
+          description: values.description || '',
+        },
+      };
+
+      await request({
+        url: `/role/${editingRole.id}`,
+        method: 'PATCH',
+        data: {
+          slug: values.slug,
+          locale: updatedLocale,
+        },
+      });
+
+      toast.success(t('roleUpdatedSuccess'));
+      setEditFormError(null);
+      await refetch();
+      setEditingRole(null);
+    } catch (err: any) {
+      const msg =
+        err?.response?.data?.message ||
+        err?.response?.data?.error ||
+        err?.message ||
+        t('serverError');
+      setEditFormError(String(msg));
+    }
+  };
+
+  const onDelete = async () => {
+    try {
+      await request({
+        url: `/role`,
+        method: 'DELETE',
+        data: {
+          ids: [Number(editingRole?.id)],
+        },
+      });
+      refetch();
+      setOpenDeleteModal(false);
+      setEditingRole(null);
+      setEditFormError(null);
+      toast.success(t('roleDeletedSuccess'));
+    } catch (err: any) {
+      const msg =
+        err?.response?.data?.message ||
+        err?.response?.data?.error ||
+        err?.message ||
+        t('serverError');
+      setEditFormError(String(msg));
+    }
+  };
+
+  const handleRefreshEditingRole = async () => {
+    if (!editingRole?.id) return;
+
+    try {
+      const response = await request<RoleDetail>({
+        url: `/role/${editingRole.id}`,
+        method: 'GET',
+      });
+
+      const fullRole = response.data;
+      const localeData: Record<string, RoleLocale> = {};
+
+      if (fullRole.role_locale && Array.isArray(fullRole.role_locale)) {
+        fullRole.role_locale.forEach((rl: any) => {
+          const localeCode = rl.locale?.code;
+          if (localeCode) {
+            localeData[localeCode] = {
+              name: rl.name || '',
+              description: rl.description || '',
+            };
+          }
+        });
+      }
+
+      locales?.forEach((locale: Locale) => {
+        if (!localeData[locale.code]) {
+          localeData[locale.code] = {
+            name: '',
+            description: '',
+          };
+        }
+      });
+
+      setEditingRole({
+        ...fullRole,
+        locale: localeData,
+      });
+    } catch (err) {
+      console.error('Error refreshing role:', err);
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-screen px-4">
+      <PageHeader
+        breadcrumbs={[{ label: 'Home', href: '/' }, { label: t('roles') }]}
+        actions={[
+          {
+            label: t('buttonAddRole'),
+            onClick: () => setIsDialogOpen(true),
+            variant: 'default',
+          },
+        ]}
+        title={t('title')}
+        description={t('description')}
+      />
+
+      <StatsCards
+        className="sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-1"
+        stats={[
+          {
+            title: t('totalRoles'),
+            value: String(stats.totalRoles),
+            icon: <ShieldCheck className="h-5 w-5" />,
+            iconBgColor: 'bg-purple-50',
+            iconColor: 'text-purple-600',
+          },
+        ]}
+      />
+
+      <SearchBar
+        searchQuery={searchQuery}
+        onSearchChange={setSearchQuery}
+        onSearch={() => refetch()}
+        placeholder={t('searchPlaceholder')}
+        className="mt-4"
+      />
+
+      <div className="flex-1 pt-4">
+        {isLoading && (
+          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            {Array.from({ length: 3 }).map((_, i) => (
+              <Card
+                key={`skeleton-${i}`}
+                className="flex flex-col justify-between gap-2 rounded-2xl border border-border/60 bg-card p-4 shadow-sm animate-pulse"
+              >
+                <CardHeader className="p-0">
+                  <div className="space-y-2">
+                    <div className="h-4 w-40 rounded bg-muted" />
+                    <div className="h-3 w-32 rounded bg-muted" />
+                  </div>
+                </CardHeader>
+              </Card>
+            ))}
+          </div>
+        )}
+
+        {!isLoading &&
+        (!rolesResponse?.data || rolesResponse.data.length === 0) ? (
+          <p className="text-sm text-muted-foreground">{t('noRolesFound')}</p>
+        ) : (
+          <div className="grid gap-4 grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
+            {rolesResponse?.data?.map((role: Role & { role_id: number }) => (
+              <Card
+                key={String(role.role_id)}
+                onDoubleClick={() => handleEdit(role)}
+                className="cursor-pointer rounded-md flex flex-col justify-between gap-2 border border-border/60 bg-card p-4 shadow-sm transition hover:border-primary"
+              >
+                <CardHeader className="flex items-start justify-between gap-4 p-0">
+                  <div className="flex items-center gap-3 flex-1">
+                    <div className="h-12 w-12 shrink-0 rounded-full bg-primary/10 flex items-center justify-center">
+                      <ShieldCheck className="h-6 w-6 text-primary" />
+                    </div>
+                    <div className="flex-1">
+                      <CardTitle className="text-sm font-semibold">
+                        {role.name}
+                      </CardTitle>
+                      <CardDescription className="text-xs text-muted-foreground">
+                        {role.slug}
+                      </CardDescription>
+                    </div>
+                  </div>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => handleEdit(role)}
+                  >
+                    {t('buttonEditRole')}
+                  </Button>
+                </CardHeader>
+                {role.description && (
+                  <CardContent className="p-0">
+                    <p className="text-xs text-muted-foreground line-clamp-2">
+                      {role.description}
+                    </p>
+                    <div className="text-xs line-clamp-2 flex gap-2 py-2">
+                      <div>
+                        {(role as any).user_count}{' '}
+                        {(role as any).user_count === 1
+                          ? t('user')
+                          : t('users')}
+                      </div>
+                      <div>•</div>
+                      <div>
+                        {(role as any).menu_count}{' '}
+                        {(role as any).menu_count === 1
+                          ? t('menu')
+                          : t('menus')}
+                      </div>
+                      <div>•</div>
+                      <div>
+                        {(role as any).route_count}{' '}
+                        {(role as any).route_count === 1
+                          ? t('route')
+                          : t('routes')}
+                      </div>
+                    </div>
+                  </CardContent>
+                )}
+              </Card>
+            ))}
+          </div>
+        )}
+
+        <div className="w-full border-t pt-2 mt-4">
+          <PaginationFooter
+            currentPage={page}
+            pageSize={pageSize}
+            totalItems={rolesResponse?.total || 0}
+            onPageChange={setPage}
+            onPageSizeChange={(size) => {
+              setPageSize(size);
+              setPage(1);
+            }}
+            pageSizeOptions={[6, 12, 24, 48]}
+          />
+        </div>
+
+        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+          <DialogContent className="sm:max-w-lg">
+            <DialogHeader>
+              <DialogTitle>{t('dialogAddRoleTitle')}</DialogTitle>
+              <DialogDescription>
+                {t('dialogAddRoleDescription')}
+              </DialogDescription>
+            </DialogHeader>
+            <div className="w-full border-t pt-1 mt-1" />
+            <Form {...form}>
+              <form
+                onSubmit={form.handleSubmit(onSubmit)}
+                className="space-y-4"
+              >
+                <FormField
+                  control={form.control}
+                  name="slug"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('formSlugLabel')}</FormLabel>
+                      <FormControl>
+                        <Input
+                          placeholder={t('formSlugPlaceholder')}
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="name"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('formNameLabel')}</FormLabel>
+                      <FormControl>
+                        <Input
+                          placeholder={t('formNamePlaceholder')}
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="description"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('formDescriptionLabel')}</FormLabel>
+                      <FormControl>
+                        <Textarea
+                          placeholder={t('formDescriptionPlaceholder')}
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                {formError && (
+                  <Alert
+                    variant="destructive"
+                    className="border-red-300 bg-red-50 rounded-md p-4"
+                  >
+                    <AlertTitle className="text-sm">
+                      {t('verifyYourInput')}
+                    </AlertTitle>
+                    <AlertDescription className="text-sm">
+                      {formError}
+                    </AlertDescription>
+                  </Alert>
+                )}
+
+                <Button type="submit" className="w-full">
+                  {t('buttonAddRole')}
+                </Button>
+              </form>
+            </Form>
+          </DialogContent>
+        </Dialog>
+
+        {editingRole && (
+          <Sheet open={!!editingRole} onOpenChange={() => setEditingRole(null)}>
+            <SheetContent className="w-full sm:max-w-3xl overflow-y-auto gap-0">
+              <SheetHeader>
+                <SheetTitle>{t('titleEditRole')}</SheetTitle>
+                <SheetDescription>
+                  {editingRole.locale?.[currentLocaleCode]?.name ||
+                    editingRole.slug}
+                </SheetDescription>
+              </SheetHeader>
+
+              <Tabs value={activeTab} onValueChange={setActiveTab}>
+                <TabsList className="grid w-full grid-cols-4 bg-muted rounded-md text-muted-foreground text-sm">
+                  <TabsTrigger
+                    value="basic-info"
+                    className="flex items-center justify-center gap-2 px-3 data-[state=active]:bg-card data-[state=active]:text-primary data-[state=active]:font-medium"
+                  >
+                    <FileText className="h-4 w-4 min-h-4 min-w-4" />
+                    <span className="hidden md:inline">
+                      {t('tabBasicInfo')}
+                    </span>
+                  </TabsTrigger>
+                  <TabsTrigger
+                    value="users"
+                    className="flex items-center justify-center gap-2 px-3 data-[state=active]:bg-card data-[state=active]:text-primary data-[state=active]:font-medium"
+                  >
+                    <Users className="h-4 w-4 min-h-4 min-w-4" />
+                    <span className="hidden md:inline">{t('tabUsers')}</span>
+                  </TabsTrigger>
+                  <TabsTrigger
+                    value="menus"
+                    className="flex items-center justify-center gap-2 px-3 data-[state=active]:bg-card data-[state=active]:text-primary data-[state=active]:font-medium"
+                  >
+                    <Menu className="h-4 w-4 min-h-4 min-w-4" />
+                    <span className="hidden md:inline">{t('tabMenus')}</span>
+                  </TabsTrigger>
+                  <TabsTrigger
+                    value="routes"
+                    className="flex items-center justify-center gap-2 px-3 data-[state=active]:bg-card data-[state=active]:text-primary data-[state=active]:font-medium"
+                  >
+                    <Route className="h-4 w-4 min-h-4 min-w-4" />
+                    <span className="hidden md:inline">{t('tabRoutes')}</span>
+                  </TabsTrigger>
+                </TabsList>
+
+                <TabsContent
+                  value="basic-info"
+                  className="space-y-4 mt-4 p-4 pt-0"
+                >
+                  <div className="space-y-3">
+                    <div>
+                      <h4 className="text-sm font-semibold flex items-center gap-2">
+                        <Save className="h-4 w-4" />
+                        {t('basicInfoTitle')}
+                      </h4>
+                      <p className="text-xs text-muted-foreground mt-1">
+                        {t('basicInfoDescription')}
+                      </p>
+                    </div>
+
+                    <div className="flex items-center gap-2 p-3 bg-muted/50 rounded-md">
+                      <span className="text-xs font-medium text-muted-foreground">
+                        {t('editingInLocale')}:
+                      </span>
+                      <Select
+                        value={selectedLocale}
+                        onValueChange={(value) => setSelectedLocale(value)}
+                      >
+                        <SelectTrigger className="w-[180px] h-8">
+                          <SelectValue placeholder={t('selectLocale')} />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {locales?.map((locale: any) => (
+                            <SelectItem key={locale.code} value={locale.code}>
+                              {locale.name}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    <Form {...editForm}>
+                      <form
+                        onSubmit={editForm.handleSubmit(onEditSubmit)}
+                        className="space-y-4"
+                      >
+                        <FormField
+                          control={editForm.control}
+                          name="slug"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>{t('editSlugLabel')}</FormLabel>
+                              <FormControl>
+                                <Input {...field} />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                        <FormField
+                          control={editForm.control}
+                          name="name"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>{t('editNameLabel')}</FormLabel>
+                              <FormControl>
+                                <Input {...field} />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                        <FormField
+                          control={editForm.control}
+                          name="description"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>{t('editDescriptionLabel')}</FormLabel>
+                              <FormControl>
+                                <Textarea {...field} />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+
+                        {editFormError && (
+                          <Alert
+                            variant="destructive"
+                            className="border-red-300 bg-red-50 rounded-md p-4"
+                          >
+                            <AlertTitle className="text-sm">
+                              {t('verifyYourInput')}
+                            </AlertTitle>
+                            <AlertDescription className="text-sm">
+                              {editFormError}
+                            </AlertDescription>
+                          </Alert>
+                        )}
+
+                        <div className="flex flex-col w-full gap-2 pt-2">
+                          <Button type="submit" className="w-full">
+                            {t('saveChanges')}
+                          </Button>
+                          <Button
+                            className="w-full"
+                            type="button"
+                            variant="outline"
+                            onClick={() => setEditingRole(null)}
+                          >
+                            {t('cancel')}
+                          </Button>
+                        </div>
+                      </form>
+                    </Form>
+
+                    <div className="border-t pt-4">
+                      <Button
+                        className="w-full cursor-pointer"
+                        variant="destructive"
+                        onClick={() => setOpenDeleteModal(true)}
+                      >
+                        <Trash2 className="w-4 h-4" />
+                        <span>{t('buttonDeleteRole')}</span>
+                      </Button>
+                    </div>
+                  </div>
+                </TabsContent>
+
+                <TabsContent value="users" className="space-y-4 mt-4 p-4 pt-0">
+                  <RoleUsersSection
+                    roleId={editingRole.id!}
+                    onUserChange={handleRefreshEditingRole}
+                  />
+                </TabsContent>
+
+                <TabsContent value="menus" className="space-y-4 mt-4 p-4 pt-0">
+                  <RoleMenusSection
+                    roleId={editingRole.id!}
+                    onMenuChange={handleRefreshEditingRole}
+                  />
+                </TabsContent>
+
+                <TabsContent value="routes" className="space-y-4 mt-4 p-4 pt-0">
+                  <RoleRoutesSection
+                    roleId={editingRole.id!}
+                    onRouteChange={handleRefreshEditingRole}
+                  />
+                </TabsContent>
+              </Tabs>
+            </SheetContent>
+          </Sheet>
+        )}
+
+        <Dialog open={openDeleteModal} onOpenChange={setOpenDeleteModal}>
+          <DialogContent className="sm:max-w-lg">
+            <DialogHeader>
+              <DialogTitle>{t('dialogDeleteRoleTitle')}</DialogTitle>
+              <DialogDescription>
+                {t('dialogDeleteRoleDescription')}
+              </DialogDescription>
+            </DialogHeader>
+            <hr className="mt-4" />
+            <div className="flex justify-end">
+              <Button
+                type="button"
+                className="px-4 w-28 h-12 py-2 bg-gray-300 text-black hover:bg-gray-300 hover:text-black rounded-sm mr-2 text-md"
+                onClick={() => setOpenDeleteModal(false)}
+              >
+                {t('deleteRoleCancel')}
+              </Button>
+              <Button
+                onClick={onDelete}
+                variant="destructive"
+                className="px-4 w-32 h-12 py-2 text-white hover:text-white rounded-sm text-md cursor-pointer"
+              >
+                {t('deleteRoleConfirm')}
+              </Button>
+            </div>
+          </DialogContent>
+        </Dialog>
+      </div>
+    </div>
+  );
+}