@carlonicora/nextjs-jsonapi 1.0.3 → 1.0.5

package/src/features/company/components/forms/CompanyConfigurationEditor.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Settings2Icon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useEffect, useMemo, useState } from "react";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { toast } from "sonner";
+import z from "zod";
+import { CommonEditorButtons, errorToast } from "../../../../components";
+import { getRoleId } from "../../../../roles";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  Form,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "../../../../shadcnui";
+import { UserInterface, UserService } from "../../../user";
+import { useCurrentUserContext } from "../../../user/contexts";
+import { CompanyInput, CompanyInterface, CompanyService } from "../../data";
+import { CompanyConfigurationSecurityForm } from "./CompanyConfigurationSecurityForm";
+
+type CompanyConfigurationEditorProps = {
+  company: CompanyInterface;
+};
+
+function CompanyConfigurationEditorInternal({ company }: CompanyConfigurationEditorProps) {
+  const [open, setOpen] = useState<boolean>(false);
+  const t = useTranslations();
+  const { setUser } = useCurrentUserContext<UserInterface>();
+
+  const defaultValues = useMemo(() => {
+    return {
+      isManagedKnowledge: company.configurations?.isManagedKnowledge ?? false,
+      allowPublicBot: company.configurations?.allowPublicBot ?? false,
+    };
+  }, [company.configurations]);
+
+  const close = () => {
+    setOpen(false);
+    form.reset();
+  };
+
+  const formSchema = z.object({
+    isManagedKnowledge: z.boolean().optional(),
+    allowPublicBot: z.boolean().optional(),
+  });
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: defaultValues,
+    shouldUnregister: false,
+  });
+
+  useEffect(() => {
+    if (open) {
+      form.reset({
+        isManagedKnowledge: company.configurations?.isManagedKnowledge ?? false,
+        allowPublicBot: company.configurations?.allowPublicBot ?? false,
+      });
+    }
+  }, [company, open]);
+
+  const onSubmit: SubmitHandler<z.infer<typeof formSchema>> = async (values) => {
+    const payload: CompanyInput = {
+      id: company.id,
+      configurations: {
+        isManagedKnowledge: values.isManagedKnowledge ?? false,
+        allowPublicBot: values.allowPublicBot ?? false,
+      },
+    };
+
+    try {
+      await CompanyService.updateConfigurations(payload);
+
+      // Refresh user data to update localStorage with new company configurations
+      const fullUser = await UserService.findFullUser();
+      if (fullUser) {
+        setUser(fullUser);
+      }
+
+      toast.message("Configurations Updated", {
+        description: `The system configurations have been updated successfully.`,
+      });
+      close();
+    } catch (error) {
+      errorToast({
+        title: t(`generic.errors.update`),
+        error,
+      });
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button size="sm" variant={`ghost`} className="cursor-pointer">
+          <Settings2Icon className="h-3.5 w-3.5" />
+        </Button>
+      </DialogTrigger>
+      <DialogContent className={`flex max-h-[70vh] max-w-4xl flex-col overflow-y-auto`}>
+        <DialogHeader>
+          <DialogTitle>{t(`types.configurations`, { count: 2 })}</DialogTitle>
+          <DialogDescription className="text-destructive">
+            {t(`features.configuration.warning_description`)}
+          </DialogDescription>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className={`flex w-full flex-col gap-y-4`}>
+            <div className={`flex flex-row gap-x-4`}>
+              <div className={`flex w-full flex-col justify-start gap-y-4`}>
+                <Tabs defaultValue={process.env.NEXT_PUBLIC_PRIVATE_INSTALLATION ? "security" : "ai"}>
+                  <TabsList>
+                    <TabsTrigger value="security">Privacy & Security</TabsTrigger>
+                  </TabsList>
+                  <TabsContent value="features">
+                    <div className="space-y-4">
+                      <p className="text-muted-foreground text-sm">
+                        Feature configuration will be implemented in future updates.
+                      </p>
+                    </div>
+                  </TabsContent>
+                  <TabsContent value="security">
+                    <CompanyConfigurationSecurityForm form={form} />
+                  </TabsContent>
+                </Tabs>
+              </div>
+            </div>
+            <CommonEditorButtons form={form} setOpen={setOpen} isEdit={true} />
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export function CompanyConfigurationEditor(props: CompanyConfigurationEditorProps) {
+  const { hasRole } = useCurrentUserContext<UserInterface>();
+
+  if (hasRole(getRoleId().Administrator)) return <CompanyConfigurationEditorInternal {...props} />;
+
+  return <CompanyConfigurationEditorInternal {...props} />;
+}

package/src/features/company/components/forms/CompanyConfigurationSecurityForm.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { UseFormReturn } from "react-hook-form";
+import { Checkbox, FormControl, FormField, FormItem, FormLabel, FormMessage, Input } from "../../../../shadcnui";
+
+type SecurityConfigurationFormProps = {
+  form: UseFormReturn<any>;
+};
+
+type Fields = {
+  fields: string[];
+  defaults: Record<string, any>;
+};
+
+const providerConfig: Fields = {
+  fields: ["isManagedKnowledge", "allowPublicBot"],
+  defaults: {},
+};
+
+export function CompanyConfigurationSecurityForm({ form }: SecurityConfigurationFormProps) {
+  const t = useTranslations();
+
+  const renderProviderFields = () => {
+    const config = providerConfig;
+    if (!config) return null;
+
+    return config.fields.map((currentField) => {
+      const isRequired = currentField === "";
+
+      let label = "";
+      let placeholder = "";
+      let type = "text";
+
+      switch (currentField) {
+        case "isManagedKnowledge":
+          label = "Limit Require structured knowledge management";
+          placeholder =
+            "Enforce single-nesting expertises, require expertise associations to content, and enable knowledge manager roles for better long-term organization.";
+          type = "checkbox";
+          break;
+        case "allowPublicBot":
+          label = "Allow Public Bot";
+          placeholder = "Enable this to allow the public to access public information.";
+          type = "checkbox";
+          break;
+      }
+
+      return (
+        <FormField
+          key={currentField}
+          control={form.control}
+          name={currentField}
+          render={({ field: formField }) =>
+            type === "checkbox" ? (
+              <FormItem className="flex items-start space-x-4">
+                <FormControl>
+                  <Checkbox
+                    id={currentField}
+                    checked={formField.value}
+                    onCheckedChange={(checked) => {
+                      return checked ? formField.onChange(true) : formField.onChange(false);
+                    }}
+                  />
+                </FormControl>
+                <div className="grid gap-2">
+                  <FormLabel htmlFor={currentField}>
+                    {label} {isRequired && <span className="text-destructive">*</span>}
+                  </FormLabel>
+                  <p className="text-muted-foreground text-sm">{placeholder}</p>
+                </div>
+                <FormLabel></FormLabel>
+                <FormMessage />
+              </FormItem>
+            ) : (
+              <FormItem>
+                <FormLabel>
+                  {label} {isRequired && <span className="text-destructive">*</span>}
+                </FormLabel>
+                <FormControl>
+                  <Input type={type} placeholder={placeholder} {...formField} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )
+          }
+        />
+      );
+    });
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="space-y-4 border-t pt-4">{renderProviderFields()}</div>
+    </div>
+  );
+}

package/src/features/company/components/forms/CompanyDeleter.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { LoaderCircleIcon, Trash2Icon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+import { errorToast } from "../../../../components";
+import { Modules } from "../../../../core";
+import { useI18nRouter } from "../../../../i18n";
+import { Action } from "../../../../permissions";
+import { getRoleId } from "../../../../roles";
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  Button,
+  Input,
+  Label,
+} from "../../../../shadcnui";
+import { UserInterface } from "../../../user";
+import { useCurrentUserContext } from "../../../user/contexts";
+import { CompanyInterface, CompanyService } from "../../data";
+
+type CompanyDeleterProps = {
+  company: CompanyInterface;
+};
+
+function CompanyDeleterInternal({ company }: CompanyDeleterProps) {
+  const t = useTranslations();
+  const router = useI18nRouter();
+  const [open, setOpen] = useState<boolean>(false);
+  const [isDeleting, setIsDeleting] = useState<boolean>(false);
+  const [companyName, setCompanyName] = useState<string>("");
+
+  const handleDelete = async () => {
+    setIsDeleting(true);
+    try {
+      await CompanyService.delete({ companyId: company.id });
+      router.push("/");
+    } catch (error) {
+      errorToast({ title: t(`generic.errors.delete`), error: error });
+    }
+    setIsDeleting(false);
+  };
+
+  return (
+    <AlertDialog open={open} onOpenChange={setOpen}>
+      <AlertDialogTrigger asChild>
+        <Button size="sm" variant={"destructive"}>
+          <Trash2Icon className="mr-3 h-3.5 w-3.5" />
+          {t(`generic.buttons.delete`)}
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent className={`flex max-h-[70vh] max-w-3xl flex-col overflow-y-auto`}>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{t(`generic.delete.title`, { type: t(`types.companies`, { count: 1 }) })}</AlertDialogTitle>
+          <AlertDialogDescription>
+            {t(`generic.delete.subtitle`, { type: t(`types.companies`, { count: 1 }) })}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <div className="text-destructive p-4 text-sm">
+          {t(`generic.delete.description`, { type: t(`types.companies`, { count: 1 }) })}
+        </div>
+        <div className="flex w-full flex-col gap-y-2">
+          <div>{t(`generic.delete.confirmation`, { type: t(`types.companies`, { count: 1 }) })}</div>
+          <div className="flex w-full flex-col">
+            <Label className="flex items-center">
+              {t(`foundations.company.fields.name.label`)}
+              <span className="text-destructive ml-2 font-semibold">*</span>
+            </Label>
+            <Input
+              className={`w-full`}
+              placeholder={t(`foundations.company.fields.name.placeholder`)}
+              onChange={(e) => setCompanyName(e.target.value)}
+            />
+          </div>
+        </div>
+        <div className="flex justify-end">
+          <Button
+            className="mr-2"
+            variant={"outline"}
+            type={`button`}
+            onClick={() => setOpen(false)}
+            disabled={isDeleting}
+          >
+            {t(`generic.buttons.cancel`)}
+          </Button>
+          <Button
+            type="submit"
+            onClick={(e) => {
+              e.preventDefault();
+              handleDelete();
+            }}
+            variant={"destructive"}
+            disabled={company.name !== companyName || isDeleting}
+          >
+            {isDeleting ? (
+              <>
+                {t(`generic.buttons.is_deleting`)}
+                <LoaderCircleIcon className="animate-spin-slow h-5 w-5" />
+              </>
+            ) : (
+              t(`generic.buttons.delete`)
+            )}
+          </Button>
+        </div>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
+
+export function CompanyDeleter({ company }: CompanyDeleterProps) {
+  const { hasPermissionToModule, hasRole } = useCurrentUserContext<UserInterface>();
+
+  if (!hasRole(getRoleId().Administrator) && !hasPermissionToModule({ module: Modules.Company, action: Action.Delete }))
+    return null;
+
+  return <CompanyDeleterInternal company={company} />;
+}

package/src/features/company/components/forms/CompanyEditor.tsx

@@ -0,0 +1,245 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { setCookie } from "cookies-next";
+import { UploadIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import Image from "next/image";
+import { useEffect, useState } from "react";
+import { DropzoneOptions } from "react-dropzone";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { v4 } from "uuid";
+import { z } from "zod";
+import {
+  CommonEditorButtons,
+  CommonEditorHeader,
+  CommonEditorTrigger,
+  errorToast,
+  FileInput,
+  FileUploader,
+  FormFeatures,
+  FormInput,
+} from "../../../../components";
+import { Modules } from "../../../../core";
+import { usePageUrlGenerator } from "../../../../hooks";
+import { useI18nRouter } from "../../../../i18n";
+import { getRoleId } from "../../../../roles";
+import { Dialog, DialogContent, Form, ScrollArea } from "../../../../shadcnui";
+import { FeatureInterface, FeatureService } from "../../../feature";
+import { S3Interface, S3Service } from "../../../s3";
+import { UserInterface } from "../../../user";
+import { useCurrentUserContext } from "../../../user/contexts";
+import { CompanyInput, CompanyInterface, CompanyService } from "../../data";
+
+type CompanyEditorProps = {
+  company?: CompanyInterface;
+  propagateChanges?: (company: CompanyInterface) => void;
+  onRevalidate?: (path: string) => Promise<void>;
+};
+
+function CompanyEditorInternal({ company, propagateChanges, onRevalidate }: CompanyEditorProps) {
+  const { hasRole } = useCurrentUserContext<UserInterface>();
+  const router = useI18nRouter();
+  const [open, setOpen] = useState<boolean>(false);
+  const [features, setFeatures] = useState<FeatureInterface[]>([]);
+  const [file, setFile] = useState<File | null>(null);
+  const [files, setFiles] = useState<File[] | null>(null);
+  const [contentType, setContentType] = useState<string | null>(null);
+  const t = useTranslations();
+  const generateUrl = usePageUrlGenerator();
+
+  const formSchema = z.object({
+    id: z.uuidv4(),
+    name: z.string().min(1, {
+      message: t(`foundations.company.fields.name.error`),
+    }),
+    featureIds: z.array(z.string()).optional(),
+    moduleIds: z.array(z.string()).optional(),
+    logo: z.string().optional(),
+  });
+
+  const form = useForm({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      id: company?.id || v4(),
+      name: company?.name || "",
+      featureIds: company?.features.map((feature) => feature.id) || [],
+      moduleIds: company?.modules.map((module) => module.id) || [],
+      logo: company?.logo || "",
+    },
+  });
+
+  const onSubmit: SubmitHandler<z.infer<typeof formSchema>> = async (values: z.infer<typeof formSchema>) => {
+    if (values.logo && contentType) {
+      const s3: S3Interface = await S3Service.getPreSignedUrl({
+        key: values.logo,
+        contentType: contentType,
+        isPublic: true,
+      });
+
+      await fetch(s3.url, {
+        method: "PUT",
+        headers: s3.headers,
+        body: file,
+      });
+    }
+
+    const payload: CompanyInput = {
+      id: company?.id ?? v4(),
+      name: values.name,
+      logo: files && contentType ? values.logo : undefined,
+      featureIds: values.featureIds,
+      moduleIds: values.moduleIds,
+    };
+
+    try {
+      const updatedCompany = company ? await CompanyService.update(payload) : await CompanyService.create(payload);
+
+      if (onRevalidate) {
+        await onRevalidate(generateUrl({ page: Modules.Company, id: updatedCompany.id, language: `[locale]` }));
+      }
+      if (company && propagateChanges) {
+        setCookie("reloadData", "true", { path: "/" });
+        propagateChanges(updatedCompany);
+        setOpen(false);
+      } else {
+        router.push(`/administration/companies/${updatedCompany.id}`);
+      }
+    } catch (error) {
+      errorToast({
+        title: company ? t(`generic.errors.update`) : t(`generic.errors.create`),
+        error,
+      });
+    }
+  };
+
+  useEffect(() => {
+    async function fetchFeatures() {
+      const allfeatures = await FeatureService.findMany({});
+      if (hasRole(getRoleId().Administrator)) {
+        setFeatures(allfeatures);
+      } else {
+        setFeatures(allfeatures.filter((feature) => feature.isProduction));
+      }
+    }
+    if (
+      open &&
+      features.length === 0 &&
+      (hasRole(getRoleId().Administrator) ||
+        (hasRole(getRoleId().CompanyAdministrator) &&
+          process.env.NEXT_PUBLIC_PRIVATE_INSTALLATION?.toLowerCase() === "true"))
+    )
+      fetchFeatures();
+  }, [open, features]);
+
+  useEffect(() => {
+    if (file && company) {
+      const id = form.getValues("id");
+      const fileType = file.type;
+      let extension = "";
+
+      switch (fileType) {
+        default:
+          extension = file.type.split("/").pop() ?? "";
+          break;
+      }
+
+      const timestamp = new Date().toISOString().replace(/[-:T]/g, "").split(".")[0];
+
+      const fileUrl = `companies/${form.getValues("id")}/companies/${id}/${id}.${timestamp}.${extension}`;
+      form.setValue("logo", fileUrl);
+
+      setContentType(fileType);
+    } else {
+      setContentType(null);
+    }
+  }, [file]);
+
+  useEffect(() => {
+    if (files && files.length > 0) {
+      setFile(files[0]);
+    }
+  }, [files]);
+
+  const dropzone = {
+    multiple: false,
+    maxSize: 100 * 1024 * 1024,
+    preventDropOnDocument: false,
+    accept: {
+      "application/images": [".jpg", ".jpeg", ".png", ".gif", ".webp", ".svg"],
+    },
+  } satisfies DropzoneOptions;
+
+  const canAccessFeatures =
+    hasRole(getRoleId().Administrator) ||
+    (hasRole(getRoleId().CompanyAdministrator) &&
+      process.env.NEXT_PUBLIC_PRIVATE_INSTALLATION?.toLowerCase() === "true");
+
+  const isAdministrator = hasRole(getRoleId().Administrator);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <CommonEditorTrigger isEdit={!!company} />
+      <DialogContent
+        className={`flex max-h-[70vh] w-full ${isAdministrator || canAccessFeatures ? `max-w-5xl` : `max-w-4xl`} flex-col overflow-y-auto`}
+      >
+        <CommonEditorHeader type={t(`types.companies`, { count: 1 })} name={company?.name} />
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className={`flex w-full flex-col gap-y-4`}>
+            <div className="flex w-full items-start justify-between gap-x-4">
+              <div className={`flex w-96 flex-col justify-start gap-y-4`}>
+                <FileUploader value={files} onValueChange={setFiles} dropzoneOptions={dropzone} className="w-full p-4">
+                  <FileInput className="text-neutral-300 outline-dashed">
+                    <div className="flex w-full flex-col items-center justify-center pt-3 pb-4">
+                      <div className="flex w-full flex-col items-center justify-center pt-3 pb-4">
+                        {file || company?.logo ? (
+                          <Image
+                            src={file ? URL.createObjectURL(file) : company?.logo || ""}
+                            alt="Company Logo"
+                            width={200}
+                            height={200}
+                          />
+                        ) : (
+                          <>
+                            <UploadIcon className="my-4 h-8 w-8" />
+                            <p className="mb-1 flex w-full text-center text-sm">
+                              {t(`foundations.company.click_drag_logo`)}
+                            </p>
+                          </>
+                        )}
+                      </div>
+                    </div>
+                  </FileInput>
+                </FileUploader>
+              </div>
+              <div className={`flex w-full flex-col justify-start gap-y-4`}>
+                <FormInput
+                  form={form}
+                  id="name"
+                  name={t(`foundations.company.fields.name.label`)}
+                  placeholder={t(`foundations.company.fields.name.placeholder`)}
+                />
+              </div>
+              {canAccessFeatures && (
+                <div className={`flex w-96 flex-col justify-start gap-y-4`}>
+                  <ScrollArea className="h-max">
+                    <FormFeatures
+                      form={form}
+                      name={t(`foundations.company.features_and_modules`)}
+                      features={features}
+                    />
+                  </ScrollArea>
+                </div>
+              )}
+            </div>
+            <CommonEditorButtons form={form} setOpen={setOpen} isEdit={!!company} />
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export function CompanyEditor(props: CompanyEditorProps) {
+  return <CompanyEditorInternal {...props} />;
+}