chore: format all files in monorepo (#3054)
* chore: format all files in the project * fix: removing @types/react from dependencies * fix: adding prettier and eslint config * chore: format files * fix: upgrading turbo version * chore: ignoring warnings and adding todos * fix: updated the type of bubble menu item in the document editor * chore: format files --------- Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
This commit is contained in:
sriram veeraghanta
parent
e5ae139178
commit
5b0066140f
721 changed files with 3739 additions and 4660 deletions
|
|
@ -26,7 +26,10 @@ export const DeleteModuleModal: React.FC<Props> = observer((props) => {
|
|||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, moduleId, peekModule } = router.query;
|
||||
|
||||
const { module: moduleStore, trackEvent: { postHogEventTracker } } = useMobxStore();
|
||||
const {
|
||||
module: moduleStore,
|
||||
trackEvent: { postHogEventTracker },
|
||||
} = useMobxStore();
|
||||
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
|
|
@ -50,12 +53,9 @@ export const DeleteModuleModal: React.FC<Props> = observer((props) => {
|
|||
title: "Success!",
|
||||
message: "Module deleted successfully.",
|
||||
});
|
||||
postHogEventTracker(
|
||||
"MODULE_DELETED",
|
||||
{
|
||||
state: 'SUCCESS'
|
||||
}
|
||||
);
|
||||
postHogEventTracker("MODULE_DELETED", {
|
||||
state: "SUCCESS",
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
setToastAlert({
|
||||
|
|
@ -63,12 +63,9 @@ export const DeleteModuleModal: React.FC<Props> = observer((props) => {
|
|||
title: "Error!",
|
||||
message: "Module could not be deleted. Please try again.",
|
||||
});
|
||||
postHogEventTracker(
|
||||
"MODULE_DELETED",
|
||||
{
|
||||
state: 'FAILED'
|
||||
}
|
||||
);
|
||||
postHogEventTracker("MODULE_DELETED", {
|
||||
state: "FAILED",
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
setIsDeleteLoading(false);
|
||||
|
|
@ -102,12 +99,12 @@ export const DeleteModuleModal: React.FC<Props> = observer((props) => {
|
|||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
|
||||
<div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||
<div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
|
||||
<div className="sm:flex sm:items-start">
|
||||
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
|
||||
<AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||
<div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
|
||||
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
|
||||
Delete Module
|
||||
</Dialog.Title>
|
||||
|
|
|
|||
|
|
@ -117,7 +117,7 @@ export const ModuleForm: React.FC<Props> = ({
|
|||
ref={ref}
|
||||
hasError={Boolean(errors.name)}
|
||||
placeholder="Module Title"
|
||||
className="resize-none w-full placeholder:text-sm placeholder:font-medium focus:border-blue-400"
|
||||
className="w-full resize-none placeholder:text-sm placeholder:font-medium focus:border-blue-400"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
|
@ -182,7 +182,7 @@ export const ModuleForm: React.FC<Props> = ({
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-end gap-2 pt-5 mt-5 border-t-[0.5px] border-custom-border-200">
|
||||
<div className="mt-5 flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-200 pt-5">
|
||||
<Button variant="neutral-primary" size="sm" onClick={handleClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
|
|
@ -192,8 +192,8 @@ export const ModuleForm: React.FC<Props> = ({
|
|||
? "Updating Module..."
|
||||
: "Update Module"
|
||||
: isSubmitting
|
||||
? "Creating Module..."
|
||||
: "Create Module"}
|
||||
? "Creating Module..."
|
||||
: "Create Module"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -15,11 +15,11 @@ export const ModuleGanttBlock = ({ data }: { data: IModule }) => {
|
|||
|
||||
return (
|
||||
<div
|
||||
className="relative flex items-center w-full h-full rounded"
|
||||
className="relative flex h-full w-full items-center rounded"
|
||||
style={{ backgroundColor: MODULE_STATUS.find((s) => s.value === data?.status)?.color }}
|
||||
onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/modules/${data?.id}`)}
|
||||
>
|
||||
<div className="absolute top-0 left-0 h-full w-full bg-custom-background-100/50" />
|
||||
<div className="absolute left-0 top-0 h-full w-full bg-custom-background-100/50" />
|
||||
<Tooltip
|
||||
tooltipContent={
|
||||
<div className="space-y-1">
|
||||
|
|
@ -31,7 +31,7 @@ export const ModuleGanttBlock = ({ data }: { data: IModule }) => {
|
|||
}
|
||||
position="top-left"
|
||||
>
|
||||
<div className="relative text-custom-text-100 text-sm truncate py-1 px-2.5 w-full">{data?.name}</div>
|
||||
<div className="relative w-full truncate px-2.5 py-1 text-sm text-custom-text-100">{data?.name}</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -43,11 +43,11 @@ export const ModuleGanttSidebarBlock = ({ data }: { data: IModule }) => {
|
|||
|
||||
return (
|
||||
<div
|
||||
className="relative w-full flex items-center gap-2 h-full"
|
||||
className="relative flex h-full w-full items-center gap-2"
|
||||
onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/modules/${data.id}`)}
|
||||
>
|
||||
<ModuleStatusIcon status={data?.status ?? "backlog"} height="16px" width="16px" />
|
||||
<h6 className="text-sm font-medium flex-grow truncate">{data.name}</h6>
|
||||
<h6 className="flex-grow truncate text-sm font-medium">{data.name}</h6>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ export const ModulesListGanttChartView: React.FC = observer(() => {
|
|||
const isAllowed = currentProjectDetails?.member_role === 20 || currentProjectDetails?.member_role === 15;
|
||||
|
||||
return (
|
||||
<div className="w-full h-full overflow-y-auto">
|
||||
<div className="h-full w-full overflow-y-auto">
|
||||
<GanttChartRoot
|
||||
title="Modules"
|
||||
loaderTitle="Modules"
|
||||
|
|
|
|||
|
|
@ -32,7 +32,11 @@ export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
|
|||
|
||||
const [activeProject, setActiveProject] = useState<string | null>(null);
|
||||
|
||||
const { project: projectStore, module: moduleStore, trackEvent: { postHogEventTracker } } = useMobxStore();
|
||||
const {
|
||||
project: projectStore,
|
||||
module: moduleStore,
|
||||
trackEvent: { postHogEventTracker },
|
||||
} = useMobxStore();
|
||||
|
||||
const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
|
||||
|
||||
|
|
@ -60,13 +64,10 @@ export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
|
|||
title: "Success!",
|
||||
message: "Module created successfully.",
|
||||
});
|
||||
postHogEventTracker(
|
||||
"MODULE_CREATED",
|
||||
{
|
||||
...res,
|
||||
state: "SUCCESS"
|
||||
}
|
||||
);
|
||||
postHogEventTracker("MODULE_CREATED", {
|
||||
...res,
|
||||
state: "SUCCESS",
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
setToastAlert({
|
||||
|
|
@ -74,12 +75,9 @@ export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
|
|||
title: "Error!",
|
||||
message: "Module could not be created. Please try again.",
|
||||
});
|
||||
postHogEventTracker(
|
||||
"MODULE_CREATED",
|
||||
{
|
||||
state: "FAILED"
|
||||
}
|
||||
);
|
||||
postHogEventTracker("MODULE_CREATED", {
|
||||
state: "FAILED",
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -96,13 +94,10 @@ export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
|
|||
title: "Success!",
|
||||
message: "Module updated successfully.",
|
||||
});
|
||||
postHogEventTracker(
|
||||
"MODULE_UPDATED",
|
||||
{
|
||||
...res,
|
||||
state: "SUCCESS"
|
||||
}
|
||||
);
|
||||
postHogEventTracker("MODULE_UPDATED", {
|
||||
...res,
|
||||
state: "SUCCESS",
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
setToastAlert({
|
||||
|
|
@ -110,12 +105,9 @@ export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
|
|||
title: "Error!",
|
||||
message: "Module could not be updated. Please try again.",
|
||||
});
|
||||
postHogEventTracker(
|
||||
"MODULE_UPDATED",
|
||||
{
|
||||
state: "FAILED"
|
||||
}
|
||||
);
|
||||
postHogEventTracker("MODULE_UPDATED", {
|
||||
state: "FAILED",
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -59,8 +59,8 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
|
|||
? !moduleTotalIssues || moduleTotalIssues === 0
|
||||
? "0 Issue"
|
||||
: moduleTotalIssues === module.completed_issues
|
||||
? `${moduleTotalIssues} Issue${moduleTotalIssues > 1 ? "s" : ""}`
|
||||
: `${module.completed_issues}/${moduleTotalIssues} Issues`
|
||||
? `${moduleTotalIssues} Issue${moduleTotalIssues > 1 ? "s" : ""}`
|
||||
: `${module.completed_issues}/${moduleTotalIssues} Issues`
|
||||
: "0 Issue";
|
||||
|
||||
const handleAddToFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
|
|
@ -139,16 +139,16 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
|
|||
)}
|
||||
<DeleteModuleModal data={module} isOpen={deleteModal} onClose={() => setDeleteModal(false)} />
|
||||
<Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
|
||||
<div className="flex flex-col justify-between p-4 h-44 w-full min-w-[250px] text-sm rounded bg-custom-background-100 border border-custom-border-100 hover:shadow-md">
|
||||
<div className="flex h-44 w-full min-w-[250px] flex-col justify-between rounded border border-custom-border-100 bg-custom-background-100 p-4 text-sm hover:shadow-md">
|
||||
<div>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<Tooltip tooltipContent={module.name} position="top">
|
||||
<span className="text-base font-medium truncate">{module.name}</span>
|
||||
<span className="truncate text-base font-medium">{module.name}</span>
|
||||
</Tooltip>
|
||||
<div className="flex items-center gap-2">
|
||||
{moduleStatus && (
|
||||
<span
|
||||
className="flex items-center justify-center text-xs text-center h-6 w-20 rounded-sm"
|
||||
className="flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs"
|
||||
style={{
|
||||
color: moduleStatus.color,
|
||||
backgroundColor: `${moduleStatus.color}20`,
|
||||
|
|
@ -172,7 +172,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
|
|||
</div>
|
||||
{module.members_detail.length > 0 && (
|
||||
<Tooltip tooltipContent={`${module.members_detail.length} Members`}>
|
||||
<div className="flex items-center gap-1 cursor-default">
|
||||
<div className="flex cursor-default items-center gap-1">
|
||||
<AvatarGroup showTooltip={false}>
|
||||
{module.members_detail.map((member) => (
|
||||
<Avatar key={member.id} name={member.display_name} src={member.avatar} />
|
||||
|
|
@ -187,7 +187,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
|
|||
tooltipContent={isNaN(completionPercentage) ? "0" : `${completionPercentage.toFixed(0)}%`}
|
||||
position="top-left"
|
||||
>
|
||||
<div className="flex items-center w-full">
|
||||
<div className="flex w-full items-center">
|
||||
<div
|
||||
className="bar relative h-1.5 w-full rounded bg-custom-background-90"
|
||||
style={{
|
||||
|
|
@ -195,7 +195,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
|
|||
}}
|
||||
>
|
||||
<div
|
||||
className="absolute top-0 left-0 h-1.5 rounded bg-blue-600 duration-300"
|
||||
className="absolute left-0 top-0 h-1.5 rounded bg-blue-600 duration-300"
|
||||
style={{
|
||||
width: `${isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%`,
|
||||
}}
|
||||
|
|
@ -216,10 +216,10 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
|
|||
<span className="text-xs text-custom-text-400">No due date</span>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-1.5 z-10">
|
||||
<div className="z-10 flex items-center gap-1.5">
|
||||
{module.is_favorite ? (
|
||||
<button type="button" onClick={handleRemoveFromFavorites}>
|
||||
<Star className="h-3.5 w-3.5 text-amber-500 fill-current" />
|
||||
<Star className="h-3.5 w-3.5 fill-current text-amber-500" />
|
||||
</button>
|
||||
) : (
|
||||
<button type="button" onClick={handleAddToFavorites}>
|
||||
|
|
|
|||
|
|
@ -128,38 +128,38 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
|
|||
)}
|
||||
<DeleteModuleModal data={module} isOpen={deleteModal} onClose={() => setDeleteModal(false)} />
|
||||
<Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
|
||||
<div className="group flex items-center justify-between gap-5 px-5 py-6 h-16 w-full text-sm bg-custom-background-100 border-b border-custom-border-100 hover:bg-custom-background-90">
|
||||
<div className="flex items-center gap-3 w-full truncate">
|
||||
<div className="group flex h-16 w-full items-center justify-between gap-5 border-b border-custom-border-100 bg-custom-background-100 px-5 py-6 text-sm hover:bg-custom-background-90">
|
||||
<div className="flex w-full items-center gap-3 truncate">
|
||||
<div className="flex items-center gap-4 truncate">
|
||||
<span className="flex-shrink-0">
|
||||
<CircularProgressIndicator size={38} percentage={progress}>
|
||||
{completedModuleCheck ? (
|
||||
progress === 100 ? (
|
||||
<Check className="h-3 w-3 text-custom-primary-100 stroke-[2]" />
|
||||
<Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
|
||||
) : (
|
||||
<span className="text-sm text-custom-primary-100">{`!`}</span>
|
||||
)
|
||||
) : progress === 100 ? (
|
||||
<Check className="h-3 w-3 text-custom-primary-100 stroke-[2]" />
|
||||
<Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
|
||||
) : (
|
||||
<span className="text-xs text-custom-text-300">{`${progress}%`}</span>
|
||||
)}
|
||||
</CircularProgressIndicator>
|
||||
</span>
|
||||
<Tooltip tooltipContent={module.name} position="top">
|
||||
<span className="text-base font-medium truncate">{module.name}</span>
|
||||
<span className="truncate text-base font-medium">{module.name}</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<button onClick={openModuleOverview} className="flex-shrink-0 hidden group-hover:flex z-10">
|
||||
<button onClick={openModuleOverview} className="z-10 hidden flex-shrink-0 group-hover:flex">
|
||||
<Info className="h-4 w-4 text-custom-text-400" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2.5 justify-end w-full md:w-auto md:flex-shrink-0 ">
|
||||
<div className="flex w-full items-center justify-end gap-2.5 md:w-auto md:flex-shrink-0 ">
|
||||
<div className="flex items-center justify-center">
|
||||
{moduleStatus && (
|
||||
<span
|
||||
className="flex items-center justify-center text-xs text-center h-6 w-20 rounded-sm"
|
||||
className="flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs"
|
||||
style={{
|
||||
color: moduleStatus.color,
|
||||
backgroundColor: `${moduleStatus.color}20`,
|
||||
|
|
@ -171,7 +171,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
|
|||
</div>
|
||||
|
||||
{renderDate && (
|
||||
<span className="flex items-center justify-center gap-2 w-28 text-xs text-custom-text-300">
|
||||
<span className="flex w-28 items-center justify-center gap-2 text-xs text-custom-text-300">
|
||||
{areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")}
|
||||
{" - "}
|
||||
{areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
|
||||
|
|
@ -179,7 +179,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
|
|||
)}
|
||||
|
||||
<Tooltip tooltipContent={`${module.members_detail.length} Members`}>
|
||||
<div className="flex items-center justify-center gap-1 cursor-default w-16">
|
||||
<div className="flex w-16 cursor-default items-center justify-center gap-1">
|
||||
{module.members_detail.length > 0 ? (
|
||||
<AvatarGroup showTooltip={false}>
|
||||
{module.members_detail.map((member) => (
|
||||
|
|
@ -187,7 +187,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
|
|||
))}
|
||||
</AvatarGroup>
|
||||
) : (
|
||||
<span className="flex items-end justify-center h-5 w-5 bg-custom-background-80 rounded-full border border-dashed border-custom-text-400">
|
||||
<span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
|
||||
<User2 className="h-4 w-4 text-custom-text-400" />
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -196,7 +196,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
|
|||
|
||||
{module.is_favorite ? (
|
||||
<button type="button" onClick={handleRemoveFromFavorites} className="z-[1]">
|
||||
<Star className="h-3.5 w-3.5 text-amber-500 fill-current" />
|
||||
<Star className="h-3.5 w-3.5 fill-current text-amber-500" />
|
||||
</button>
|
||||
) : (
|
||||
<button type="button" onClick={handleAddToFavorites} className="z-[1]">
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ export const ModulePeekOverview: React.FC<Props> = observer(({ projectId, worksp
|
|||
{peekModule && (
|
||||
<div
|
||||
ref={ref}
|
||||
className="flex flex-col gap-3.5 h-full w-[24rem] overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300 flex-shrink-0"
|
||||
className="flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300"
|
||||
style={{
|
||||
boxShadow:
|
||||
"0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
|
||||
|
|
|
|||
|
|
@ -41,8 +41,8 @@ export const ModulesListView: React.FC = observer(() => {
|
|||
<>
|
||||
{modulesView === "list" && (
|
||||
<div className="h-full overflow-y-auto">
|
||||
<div className="flex justify-between h-full w-full">
|
||||
<div className="flex flex-col h-full w-full overflow-y-auto">
|
||||
<div className="flex h-full w-full justify-between">
|
||||
<div className="flex h-full w-full flex-col overflow-y-auto">
|
||||
{modulesList.map((module) => (
|
||||
<ModuleListItem key={module.id} module={module} />
|
||||
))}
|
||||
|
|
@ -56,9 +56,9 @@ export const ModulesListView: React.FC = observer(() => {
|
|||
)}
|
||||
{modulesView === "grid" && (
|
||||
<div className="h-full w-full">
|
||||
<div className="flex justify-between h-full w-full">
|
||||
<div className="flex h-full w-full justify-between">
|
||||
<div
|
||||
className={`grid grid-cols-1 gap-6 p-8 h-full w-full overflow-y-auto ${
|
||||
className={`grid h-full w-full grid-cols-1 gap-6 overflow-y-auto p-8 ${
|
||||
peekModule
|
||||
? "lg:grid-cols-1 xl:grid-cols-2 3xl:grid-cols-3"
|
||||
: "lg:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4"
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ export const ModuleLeadSelect: React.FC<Props> = ({ value, onChange }) => {
|
|||
footerOption={
|
||||
<Combobox.Option
|
||||
value=""
|
||||
className="flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 text-custom-text-200"
|
||||
className="flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 text-custom-text-200"
|
||||
>
|
||||
<span className="flex items-center justify-start gap-1 text-custom-text-200">
|
||||
<span>No Lead</span>
|
||||
|
|
|
|||
|
|
@ -49,21 +49,21 @@ export const SidebarLeadSelect: FC<Props> = (props) => {
|
|||
<UserCircle2 className="h-4 w-4" />
|
||||
<span className="text-base">Lead</span>
|
||||
</div>
|
||||
<div className="flex items-center w-1/2 rounded-sm">
|
||||
<div className="flex w-1/2 items-center rounded-sm">
|
||||
<CustomSearchSelect
|
||||
className="w-full rounded-sm"
|
||||
value={value}
|
||||
customButtonClassName="rounded-sm"
|
||||
customButton={
|
||||
selectedOption ? (
|
||||
<div className="flex items-center justify-start gap-2 p-0.5 w-full">
|
||||
<div className="flex w-full items-center justify-start gap-2 p-0.5">
|
||||
<Avatar name={selectedOption.display_name} src={selectedOption.avatar} />
|
||||
<span className="text-sm text-custom-text-200">{selectedOption?.display_name}</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="group flex items-center justify-between gap-2 p-1 text-sm text-custom-text-400 w-full">
|
||||
<div className="group flex w-full items-center justify-between gap-2 p-1 text-sm text-custom-text-400">
|
||||
<span>No lead</span>
|
||||
<ChevronDown className="h-3.5 w-3.5 hidden group-hover:flex" />
|
||||
<ChevronDown className="hidden h-3.5 w-3.5 group-hover:flex" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
|
|||
<UserGroupIcon className="h-4 w-4" />
|
||||
<span className="text-base">Members</span>
|
||||
</div>
|
||||
<div className="flex items-center w-1/2 rounded-sm ">
|
||||
<div className="flex w-1/2 items-center rounded-sm ">
|
||||
<CustomSearchSelect
|
||||
className="w-full rounded-sm"
|
||||
value={value ?? []}
|
||||
|
|
@ -65,9 +65,9 @@ export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
|
|||
</AvatarGroup>
|
||||
</div>
|
||||
) : (
|
||||
<div className="group flex items-center justify-between gap-2 p-1 text-sm text-custom-text-400 w-full">
|
||||
<div className="group flex w-full items-center justify-between gap-2 p-1 text-sm text-custom-text-400">
|
||||
<span>No members</span>
|
||||
<ChevronDown className="h-3.5 w-3.5 hidden group-hover:flex" />
|
||||
<ChevronDown className="hidden h-3.5 w-3.5 group-hover:flex" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -256,10 +256,10 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||
moduleDetails.total_issues === 0
|
||||
? "0 Issue"
|
||||
: moduleDetails.total_issues === moduleDetails.completed_issues
|
||||
? moduleDetails.total_issues > 1
|
||||
? `${moduleDetails.total_issues}`
|
||||
: `${moduleDetails.total_issues}`
|
||||
: `${moduleDetails.completed_issues}/${moduleDetails.total_issues}`;
|
||||
? moduleDetails.total_issues > 1
|
||||
? `${moduleDetails.total_issues}`
|
||||
: `${moduleDetails.total_issues}`
|
||||
: `${moduleDetails.completed_issues}/${moduleDetails.total_issues}`;
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -277,13 +277,13 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||
<DeleteModuleModal isOpen={moduleDeleteModal} onClose={() => setModuleDeleteModal(false)} data={moduleDetails} />
|
||||
|
||||
<>
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<div>
|
||||
<button
|
||||
className="flex items-center justify-center h-5 w-5 rounded-full bg-custom-border-300"
|
||||
className="flex h-5 w-5 items-center justify-center rounded-full bg-custom-border-300"
|
||||
onClick={() => handleClose()}
|
||||
>
|
||||
<ChevronRight className="h-3 w-3 text-white stroke-2" />
|
||||
<ChevronRight className="h-3 w-3 stroke-2 text-white" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center gap-3.5">
|
||||
|
|
@ -302,7 +302,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||
</div>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
<h4 className="text-xl font-semibold break-words w-full text-custom-text-100">{moduleDetails.name}</h4>
|
||||
<h4 className="w-full break-words text-xl font-semibold text-custom-text-100">{moduleDetails.name}</h4>
|
||||
<div className="flex items-center gap-5">
|
||||
<Controller
|
||||
control={control}
|
||||
|
|
@ -311,7 +311,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||
<CustomSelect
|
||||
customButton={
|
||||
<span
|
||||
className={`flex items-center cursor-default justify-center text-sm h-6 w-20 rounded-sm ${moduleStatus?.textColor} ${moduleStatus?.bgColor}`}
|
||||
className={`flex h-6 w-20 cursor-default items-center justify-center rounded-sm text-sm ${moduleStatus?.textColor} ${moduleStatus?.bgColor}`}
|
||||
>
|
||||
{moduleStatus?.label ?? "Backlog"}
|
||||
</span>
|
||||
|
|
@ -335,7 +335,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||
|
||||
<div className="relative flex h-full w-52 items-center gap-2.5">
|
||||
<Popover className="flex h-full items-center justify-center rounded-lg">
|
||||
<Popover.Button className="text-sm text-custom-text-300 font-medium cursor-default">
|
||||
<Popover.Button className="cursor-default text-sm font-medium text-custom-text-300">
|
||||
{areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")}
|
||||
</Popover.Button>
|
||||
|
||||
|
|
@ -348,7 +348,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Popover.Panel className="absolute top-10 -right-5 z-20 transform overflow-hidden">
|
||||
<Popover.Panel className="absolute -right-5 top-10 z-20 transform overflow-hidden">
|
||||
<CustomRangeDatePicker
|
||||
value={watch("start_date") ? watch("start_date") : moduleDetails?.start_date}
|
||||
onChange={(val) => {
|
||||
|
|
@ -367,7 +367,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||
<MoveRight className="h-4 w-4 text-custom-text-300" />
|
||||
<Popover className="flex h-full items-center justify-center rounded-lg">
|
||||
<>
|
||||
<Popover.Button className="text-sm text-custom-text-300 font-medium cursor-default">
|
||||
<Popover.Button className="cursor-default text-sm font-medium text-custom-text-300">
|
||||
{areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
|
||||
</Popover.Button>
|
||||
|
||||
|
|
@ -380,7 +380,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Popover.Panel className="absolute top-10 -right-5 z-20 transform overflow-hidden">
|
||||
<Popover.Panel className="absolute -right-5 top-10 z-20 transform overflow-hidden">
|
||||
<CustomRangeDatePicker
|
||||
value={watch("target_date") ? watch("target_date") : moduleDetails?.target_date}
|
||||
onChange={(val) => {
|
||||
|
|
@ -402,12 +402,12 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||
</div>
|
||||
|
||||
{moduleDetails.description && (
|
||||
<span className="whitespace-normal text-sm leading-5 py-2.5 text-custom-text-200 break-words w-full">
|
||||
<span className="w-full whitespace-normal break-words py-2.5 text-sm leading-5 text-custom-text-200">
|
||||
{moduleDetails.description}
|
||||
</span>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col gap-5 pt-2.5 pb-6">
|
||||
<div className="flex flex-col gap-5 pb-6 pt-2.5">
|
||||
<Controller
|
||||
control={control}
|
||||
name="lead"
|
||||
|
|
@ -438,14 +438,14 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||
<LayersIcon className="h-4 w-4" />
|
||||
<span className="text-base">Issues</span>
|
||||
</div>
|
||||
<div className="flex items-center w-1/2">
|
||||
<span className="text-sm text-custom-text-300 px-1.5">{issueCount}</span>
|
||||
<div className="flex w-1/2 items-center">
|
||||
<span className="px-1.5 text-sm text-custom-text-300">{issueCount}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 py-5 px-1.5">
|
||||
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 px-1.5 py-5">
|
||||
<Disclosure defaultOpen>
|
||||
{({ open }) => (
|
||||
<div className={`relative flex h-full w-full flex-col ${open ? "" : "flex-row"}`}>
|
||||
|
|
@ -459,7 +459,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||
|
||||
<div className="flex items-center gap-2.5">
|
||||
{progressPercentage ? (
|
||||
<span className="flex items-center justify-center h-5 w-9 rounded text-xs font-medium text-amber-500 bg-amber-50">
|
||||
<span className="flex h-5 w-9 items-center justify-center rounded bg-amber-50 text-xs font-medium text-amber-500">
|
||||
{progressPercentage ? `${progressPercentage}%` : ""}
|
||||
</span>
|
||||
) : (
|
||||
|
|
@ -507,7 +507,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||
""
|
||||
)}
|
||||
{moduleDetails.total_issues > 0 && (
|
||||
<div className="h-full w-full pt-5 border-t border-custom-border-200">
|
||||
<div className="h-full w-full border-t border-custom-border-200 pt-5">
|
||||
<SidebarProgressStats
|
||||
distribution={moduleDetails.distribution}
|
||||
groupedIssues={{
|
||||
|
|
@ -531,7 +531,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||
</Disclosure>
|
||||
</div>
|
||||
|
||||
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 py-5 px-1.5">
|
||||
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 px-1.5 py-5">
|
||||
<Disclosure>
|
||||
{({ open }) => (
|
||||
<div className={`relative flex h-full w-full flex-col ${open ? "" : "flex-row"}`}>
|
||||
|
|
@ -546,10 +546,10 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||
</Disclosure.Button>
|
||||
<Transition show={open}>
|
||||
<Disclosure.Panel>
|
||||
<div className="flex flex-col w-full mt-2 space-y-3 h-72 overflow-y-auto">
|
||||
<div className="mt-2 flex h-72 w-full flex-col space-y-3 overflow-y-auto">
|
||||
{userRole && moduleDetails.link_module && moduleDetails.link_module.length > 0 ? (
|
||||
<>
|
||||
<div className="flex items-center justify-end w-full">
|
||||
<div className="flex w-full items-center justify-end">
|
||||
<button
|
||||
className="flex items-center gap-1.5 text-sm font-medium text-custom-primary-100"
|
||||
onClick={() => setModuleLinkModal(true)}
|
||||
|
|
@ -574,8 +574,8 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
|||
) : (
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Info className="h-3.5 w-3.5 text-custom-text-300 stroke-[1.5]" />
|
||||
<span className="text-xs text-custom-text-300 p-0.5">No links added yet</span>
|
||||
<Info className="h-3.5 w-3.5 stroke-[1.5] text-custom-text-300" />
|
||||
<span className="p-0.5 text-xs text-custom-text-300">No links added yet</span>
|
||||
</div>
|
||||
<button
|
||||
className="flex items-center gap-1.5 text-sm font-medium text-custom-primary-100"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue