style: project select dropdown & modals ui improvement (#2491)

* style: project select dropdown ui improvement

* style: create/update cycle modal ui improvement

* style: create/update module modal ui improvement

* fix: build error

* style: input and textarea border improvement

* cycle and module modal ui improvement

* style: cycle and module modal ui improvement
This commit is contained in:
Anmol Singh Bhatia 2023-10-19 16:38:36 +05:30 committed by GitHub
parent 082e48c9cf
commit fda0a6791f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 340 additions and 128 deletions

View File

@ -28,7 +28,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
name={name}
className={`block rounded-md bg-transparent text-sm focus:outline-none placeholder-custom-text-400 ${
mode === "primary"
? "rounded-md border border-custom-border-200"
? "rounded-md border-[0.5px] border-custom-border-200"
: mode === "transparent"
? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary"
: mode === "true-transparent"

View File

@ -53,7 +53,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
cols={cols}
className={`no-scrollbar w-full bg-transparent placeholder-custom-text-400 px-3 py-2 outline-none ${
mode === "primary"
? "rounded-md border border-custom-border-200"
? "rounded-md border-[0.5px] border-custom-border-200"
: mode === "transparent"
? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-theme"
: ""

View File

@ -1,4 +1,4 @@
import { Fragment } from "react";
import { Fragment, useEffect, useState } from "react";
import { Dialog, Transition } from "@headlessui/react";
import { observer } from "mobx-react-lite";
// components
@ -20,8 +20,10 @@ interface ICycleCreateEdit {
export const CycleCreateEditModal: React.FC<ICycleCreateEdit> = observer((props) => {
const { modal, modalClose, cycle = null, onSubmit, workspaceSlug, projectId } = props;
const [activeProject, setActiveProject] = useState<string | null>(null);
const { cycle: cycleStore } = useMobxStore();
const { project: projectStore, cycle: cycleStore } = useMobxStore();
const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
const { setToastAlert } = useToast();
@ -96,6 +98,27 @@ export const CycleCreateEditModal: React.FC<ICycleCreateEdit> = observer((props)
});
};
useEffect(() => {
// if modal is closed, reset active project to null
// and return to avoid activeProject being set to some other project
if (!modal) {
setActiveProject(null);
return;
}
// if data is present, set active project to the project of the
// issue. This has more priority than the project in the url.
if (cycle && cycle.project) {
setActiveProject(cycle.project);
return;
}
// if data is not present, set active project to the project
// in the url. This has the least priority.
if (projects && projects.length > 0 && !activeProject)
setActiveProject(projects?.find((p) => p.id === projectId)?.id ?? projects?.[0].id ?? null);
}, [activeProject, cycle, projectId, projects, modal]);
return (
<Transition.Root show={modal} as={Fragment}>
<Dialog as="div" className="relative z-20" onClose={modalClose}>
@ -123,7 +146,13 @@ export const CycleCreateEditModal: React.FC<ICycleCreateEdit> = observer((props)
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl p-5">
<CycleForm handleFormSubmit={formSubmit} handleClose={modalClose} data={cycle} />
<CycleForm
handleFormSubmit={formSubmit}
handleClose={modalClose}
projectId={activeProject ?? ""}
setActiveProject={setActiveProject}
data={cycle}
/>
</Dialog.Panel>
</Transition.Child>
</div>

View File

@ -2,17 +2,20 @@ import { Controller, useForm } from "react-hook-form";
// ui
import { Button, Input, TextArea } from "@plane/ui";
import { DateSelect } from "components/ui";
import { IssueProjectSelect } from "components/issues/select";
// types
import { ICycle } from "types";
type Props = {
handleFormSubmit: (values: Partial<ICycle>) => Promise<void>;
handleClose: () => void;
projectId: string;
setActiveProject: React.Dispatch<React.SetStateAction<string | null>>;
data?: ICycle | null;
};
export const CycleForm: React.FC<Props> = (props) => {
const { handleFormSubmit, handleClose, data } = props;
const { handleFormSubmit, handleClose, projectId, setActiveProject, data } = props;
// form data
const {
formState: { errors, isSubmitting },
@ -21,6 +24,7 @@ export const CycleForm: React.FC<Props> = (props) => {
watch,
} = useForm<ICycle>({
defaultValues: {
project: projectId,
name: data?.name || "",
description: data?.description || "",
start_date: data?.start_date || null,
@ -40,80 +44,98 @@ export const CycleForm: React.FC<Props> = (props) => {
return (
<form onSubmit={handleSubmit(handleFormSubmit)}>
<div className="space-y-5">
<h3 className="text-lg font-medium leading-6 text-custom-text-100">{status ? "Update" : "Create"} Cycle</h3>
<div className="flex items-center gap-x-3">
<Controller
control={control}
name="project"
render={({ field: { value, onChange } }) => (
<IssueProjectSelect
value={value}
onChange={(val: string) => {
onChange(val);
setActiveProject(val);
}}
/>
)}
/>
<h3 className="text-xl font-medium leading-6 text-custom-text-200">{status ? "Update" : "New"} Cycle</h3>
</div>
<div className="space-y-3">
<div>
<Controller
name="name"
control={control}
rules={{
required: "Name is required",
maxLength: {
value: 255,
message: "Name should be less than 255 characters",
},
}}
render={({ field: { value, onChange } }) => (
<Input
id="cycle_name"
name="name"
type="text"
placeholder="Cycle Name"
className="resize-none text-xl w-full p-2"
value={value}
onChange={onChange}
hasError={Boolean(errors?.name)}
/>
)}
/>
</div>
<div>
<Controller
name="description"
control={control}
render={({ field: { value, onChange } }) => (
<TextArea
id="cycle_description"
name="description"
placeholder="Description"
className="h-32 resize-none text-sm"
hasError={Boolean(errors?.description)}
value={value}
onChange={onChange}
/>
)}
/>
</div>
<div className="flex flex-wrap items-center gap-2">
<div className="mt-2 space-y-3">
<div>
<Controller
name="name"
control={control}
name="start_date"
rules={{
required: "Name is required",
maxLength: {
value: 255,
message: "Name should be less than 255 characters",
},
}}
render={({ field: { value, onChange } }) => (
<DateSelect
label="Start date"
<Input
id="cycle_name"
name="name"
type="text"
placeholder="Cycle Title"
className="resize-none w-full placeholder:text-sm placeholder:font-medium focus:border-blue-400"
value={value}
onChange={(val) => onChange(val)}
minDate={new Date()}
maxDate={maxDate ?? undefined}
inputSize="md"
onChange={onChange}
hasError={Boolean(errors?.name)}
/>
)}
/>
</div>
<div>
<Controller
name="description"
control={control}
name="end_date"
render={({ field: { value, onChange } }) => (
<DateSelect label="End date" value={value} onChange={(val) => onChange(val)} minDate={minDate} />
<TextArea
id="cycle_description"
name="description"
placeholder="Description..."
className="h-24 w-full resize-none text-sm"
hasError={Boolean(errors?.description)}
value={value}
onChange={onChange}
/>
)}
/>
</div>
<div className="flex flex-wrap items-center gap-2">
<div>
<Controller
control={control}
name="start_date"
render={({ field: { value, onChange } }) => (
<DateSelect
label="Start date"
value={value}
onChange={(val) => onChange(val)}
minDate={new Date()}
maxDate={maxDate ?? undefined}
/>
)}
/>
</div>
<div>
<Controller
control={control}
name="end_date"
render={({ field: { value, onChange } }) => (
<DateSelect label="End date" value={value} onChange={(val) => onChange(val)} minDate={minDate} />
)}
/>
</div>
</div>
</div>
</div>
</div>
<div className="-mx-5 mt-5 flex justify-end gap-2 border-t border-custom-border-200 px-5 pt-5">
<div className="flex items-center justify-end gap-2 pt-5 mt-5 border-t-[0.5px] border-custom-border-200 ">
<Button variant="neutral-primary" onClick={handleClose}>
Cancel
</Button>

View File

@ -1,10 +1,11 @@
import { Fragment } from "react";
import React, { useEffect, useState } from "react";
import { mutate } from "swr";
import { Dialog, Transition } from "@headlessui/react";
// services
import { CycleService } from "services/cycle.service";
// hooks
import useToast from "hooks/use-toast";
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { CycleForm } from "components/cycles";
// helper
@ -35,6 +36,10 @@ const cycleService = new CycleService();
export const CreateUpdateCycleModal: React.FC<CycleModalProps> = (props) => {
const { isOpen, handleClose, data, workspaceSlug, projectId } = props;
const [activeProject, setActiveProject] = useState<string | null>(null);
const { project: projectStore } = useMobxStore();
const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
const { setToastAlert } = useToast();
@ -181,11 +186,32 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = (props) => {
});
};
useEffect(() => {
// if modal is closed, reset active project to null
// and return to avoid activeProject being set to some other project
if (!isOpen) {
setActiveProject(null);
return;
}
// if data is present, set active project to the project of the
// issue. This has more priority than the project in the url.
if (data && data.project) {
setActiveProject(data.project);
return;
}
// if data is not present, set active project to the project
// in the url. This has the least priority.
if (projects && projects.length > 0 && !activeProject)
setActiveProject(projects?.find((p) => p.id === projectId)?.id ?? projects?.[0].id ?? null);
}, [activeProject, data, projectId, projects, isOpen]);
return (
<Transition.Root show={isOpen} as={Fragment}>
<Transition.Root show={isOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-20" onClose={handleClose}>
<Transition.Child
as={Fragment}
as={React.Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
@ -195,10 +221,11 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = (props) => {
>
<div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
<div className="fixed inset-0 z-10 overflow-y-auto">
<div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
<Transition.Child
as={Fragment}
as={React.Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100"
@ -206,8 +233,14 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = (props) => {
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
<CycleForm handleFormSubmit={handleFormSubmit} handleClose={handleClose} data={data} />
<Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
<CycleForm
handleFormSubmit={handleFormSubmit}
handleClose={handleClose}
projectId={activeProject ?? ""}
setActiveProject={setActiveProject}
data={data}
/>
</Dialog.Panel>
</Transition.Child>
</div>

View File

@ -1,13 +1,16 @@
import React, { useState } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// popper js
import { usePopper } from "react-popper";
// ui
import { CustomSelect } from "@plane/ui";
import { Combobox } from "@headlessui/react";
// helpers
import { renderEmoji } from "helpers/emoji.helper";
// icons
import { Clipboard } from "lucide-react";
import { Check, Clipboard, Search } from "lucide-react";
export interface IssueProjectSelectProps {
value: string;
@ -16,63 +19,125 @@ export interface IssueProjectSelectProps {
export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = observer((props) => {
const { value, onChange } = props;
const [query, setQuery] = useState("");
const router = useRouter();
const { workspaceSlug } = router.query;
const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
const { styles, attributes } = usePopper(referenceElement, popperElement, {
placement: "bottom-start",
});
const { project: projectStore } = useMobxStore();
const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
const selectedProject = projects?.find((i) => i.id === value);
const options = projects?.map((project) => ({
value: project.id,
query: project.name,
content: (
<div className="flex items-center gap-1.5 truncate">
<span className="grid place-items-center flex-shrink-0">
{project.emoji ? renderEmoji(project.emoji) : project.icon_prop ? renderEmoji(project.icon_prop) : null}
</span>
<span className="truncate flex-grow">{project.name}</span>
</div>
),
}));
const filteredOptions =
query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
const label = selectedProject ? (
<div className="flex items-center gap-1.5">
<span className="flex items-center h-3 w-3">
{selectedProject.emoji
? renderEmoji(selectedProject.emoji)
: selectedProject.icon_prop
? renderEmoji(selectedProject.icon_prop)
: null}
</span>
<div className="truncate">{selectedProject.identifier}</div>
</div>
) : (
<>
<Clipboard className="h-3 w-3" />
<span>Select Project</span>
</>
);
return (
<CustomSelect
<Combobox
as="div"
className={`flex-shrink-0 text-left`}
value={value}
label={
selectedProject ? (
<div className="flex items-center gap-1.5">
<span className="grid place-items-center">
{selectedProject.emoji
? renderEmoji(selectedProject.emoji)
: selectedProject.icon_prop
? renderEmoji(selectedProject.icon_prop)
: null}
</span>
<div className="truncate">{selectedProject.identifier}</div>
</div>
) : (
<>
<Clipboard className="h-3 w-3" />
<div>Select Project</div>
</>
)
}
onChange={(val: string) => onChange(val)}
noChevron
disabled={false}
>
{projects ? (
projects.length > 0 ? (
projects.map((project) => (
<CustomSelect.Option key={project.id} value={project.id}>
<div className="flex items-center gap-1.5">
<span className="grid place-items-center">
{project.emoji
? renderEmoji(project.emoji)
: project.icon_prop
? renderEmoji(project.icon_prop)
: null}
<Combobox.Button as={React.Fragment}>
<button
ref={setReferenceElement}
type="button"
className={`flex items-center justify-between gap-1 w-full text-xs px-2 py-1 rounded-md shadow-sm text-custom-text-200 border border-custom-border-300 duration-300 focus:outline-none ${
false ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
}`}
>
{label}
</button>
</Combobox.Button>
<Combobox.Options>
<div
className={`z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1`}
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
>
<div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
<Search className="h-3.5 w-3.5 text-custom-text-300" />
<Combobox.Input
className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Search"
displayValue={(assigned: any) => assigned?.name}
/>
</div>
<div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
{filteredOptions ? (
filteredOptions.length > 0 ? (
filteredOptions.map((option) => (
<Combobox.Option
key={option.value}
value={option.value}
className={({ active, selected }) =>
`flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
active && !selected ? "bg-custom-background-80" : ""
} w-full truncate ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
}
>
{({ selected }) => (
<>
{option.content}
{selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
</>
)}
</Combobox.Option>
))
) : (
<span className="flex items-center gap-2 p-1">
<p className="text-left text-custom-text-200 ">No matching results</p>
</span>
<>{project.name}</>
</div>
</CustomSelect.Option>
))
) : (
<p className="text-gray-400">No projects found!</p>
)
) : (
<div className="px-2 text-sm text-custom-text-200">Loading...</div>
)}
</CustomSelect>
)
) : (
<p className="text-center text-custom-text-200">Loading...</p>
)}
</div>
</div>
</Combobox.Options>
</Combobox>
);
});

View File

@ -7,11 +7,14 @@ import { DateSelect } from "components/ui";
import { Button, Input, TextArea } from "@plane/ui";
// types
import { IModule } from "types";
import { IssueProjectSelect } from "components/issues/select";
type Props = {
handleFormSubmit: (values: Partial<IModule>) => Promise<void>;
handleClose: () => void;
status: boolean;
projectId: string;
setActiveProject: React.Dispatch<React.SetStateAction<string | null>>;
data?: IModule;
};
@ -23,7 +26,14 @@ const defaultValues: Partial<IModule> = {
members_list: [],
};
export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, status, data }) => {
export const ModuleForm: React.FC<Props> = ({
handleFormSubmit,
handleClose,
status,
projectId,
setActiveProject,
data,
}) => {
const {
formState: { errors, isSubmitting },
handleSubmit,
@ -31,7 +41,14 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
control,
reset,
} = useForm<IModule>({
defaultValues,
defaultValues: {
project: projectId,
name: data?.name || "",
description: data?.description || "",
status: data?.status || "backlog",
lead: data?.lead || null,
members_list: data?.members_list || [],
},
});
const handleCreateUpdateModule = async (formData: Partial<IModule>) => {
@ -61,7 +78,23 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
return (
<form onSubmit={handleSubmit(handleCreateUpdateModule)}>
<div className="space-y-5">
<h3 className="text-lg font-medium leading-6 text-custom-text-100">{status ? "Update" : "Create"} Module</h3>
<div className="flex items-center gap-x-3">
<Controller
control={control}
name="project"
render={({ field: { value, onChange } }) => (
<IssueProjectSelect
value={value}
onChange={(val: string) => {
onChange(val);
setActiveProject(val);
}}
/>
)}
/>
<h3 className="text-xl font-medium leading-6 text-custom-text-200">{status ? "Update" : "New"} Module</h3>
</div>
<div className="space-y-3">
<div>
<Controller
@ -83,8 +116,8 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
onChange={onChange}
ref={ref}
hasError={Boolean(errors.name)}
placeholder="Title"
className="resize-none text-xl w-full"
placeholder="Module Title"
className="resize-none w-full placeholder:text-sm placeholder:font-medium focus:border-blue-400"
/>
)}
/>
@ -98,9 +131,9 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
id="description"
name="description"
value={value}
placeholder="Description"
onChange={onChange}
className="h-32 resize-none text-sm"
placeholder="Description..."
className="h-24 w-full resize-none text-sm"
hasError={Boolean(errors?.description)}
/>
)}
@ -149,7 +182,7 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
</div>
</div>
</div>
<div className="-mx-5 mt-5 flex justify-end gap-2 border-t border-custom-border-200 px-5 pt-5">
<div className="flex items-center justify-end gap-2 pt-5 mt-5 border-t-[0.5px] border-custom-border-200">
<Button variant="neutral-primary" onClick={handleClose}>
Cancel
</Button>

View File

@ -1,4 +1,4 @@
import { Fragment } from "react";
import React, { useEffect, useState } from "react";
import { mutate } from "swr";
import { useForm } from "react-hook-form";
import { Dialog, Transition } from "@headlessui/react";
@ -12,6 +12,7 @@ import useToast from "hooks/use-toast";
import type { IUser, IModule } from "types";
// fetch-keys
import { MODULE_LIST } from "constants/fetch-keys";
import { useMobxStore } from "lib/mobx/store-provider";
type Props = {
isOpen: boolean;
@ -34,6 +35,12 @@ const moduleService = new ModuleService();
export const CreateUpdateModuleModal: React.FC<Props> = (props) => {
const { isOpen, onClose, data, workspaceSlug, projectId } = props;
const [activeProject, setActiveProject] = useState<string | null>(null);
const { project: projectStore } = useMobxStore();
const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
const { setToastAlert } = useToast();
const handleClose = () => {
@ -110,11 +117,32 @@ export const CreateUpdateModuleModal: React.FC<Props> = (props) => {
else await updateModule(payload);
};
useEffect(() => {
// if modal is closed, reset active project to null
// and return to avoid activeProject being set to some other project
if (!isOpen) {
setActiveProject(null);
return;
}
// if data is present, set active project to the project of the
// issue. This has more priority than the project in the url.
if (data && data.project) {
setActiveProject(data.project);
return;
}
// if data is not present, set active project to the project
// in the url. This has the least priority.
if (projects && projects.length > 0 && !activeProject)
setActiveProject(projects?.find((p) => p.id === projectId)?.id ?? projects?.[0].id ?? null);
}, [activeProject, data, projectId, projects, isOpen]);
return (
<Transition.Root show={isOpen} as={Fragment}>
<Transition.Root show={isOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-20" onClose={handleClose}>
<Transition.Child
as={Fragment}
as={React.Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
@ -125,10 +153,10 @@ export const CreateUpdateModuleModal: React.FC<Props> = (props) => {
<div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
<div className="fixed inset-0 z-10 overflow-y-auto">
<div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
<Transition.Child
as={Fragment}
as={React.Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100"
@ -136,11 +164,13 @@ export const CreateUpdateModuleModal: React.FC<Props> = (props) => {
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
<Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
<ModuleForm
handleFormSubmit={handleFormSubmit}
handleClose={handleClose}
status={data ? true : false}
projectId={activeProject ?? ""}
setActiveProject={setActiveProject}
data={data}
/>
</Dialog.Panel>