Compare commits
2 Commits
4d6aba098d
...
4c436a949e
| Author | SHA1 | Date |
|---|---|---|
DCCONSTRUCTIONS
|
4c436a949e | |
|
DCCONSTRUCTIONS
|
3034ba5089 |
|
|
@ -28,6 +28,7 @@ import { ProjectService } from "@/services/project";
|
|||
import { WorkspaceService } from "@/services/workspace.service";
|
||||
// local imports
|
||||
import { HomeCardShell } from "./home-card-shell";
|
||||
import { HomeRecentIssueDecks } from "./home-recent-issue-decks";
|
||||
import { HomeProjectInsights } from "./home-project-insights";
|
||||
import { HomeProjectStack } from "./home-project-stack";
|
||||
import { aggregateProjectAnalytics, type THomeProjectData } from "./home.utils";
|
||||
|
|
@ -231,6 +232,8 @@ export const DashboardWidgets = observer(function DashboardWidgets(props: Dashbo
|
|||
/>
|
||||
)}
|
||||
|
||||
<HomeRecentIssueDecks project={selectedProject} workspaceSlug={workspaceSlugValue} />
|
||||
|
||||
<HomeProjectInsights
|
||||
project={selectedProject}
|
||||
analytics={selectedProjectAnalytics}
|
||||
|
|
|
|||
|
|
@ -190,15 +190,15 @@ export function HomeProjectInsights(props: HomeProjectInsightsProps) {
|
|||
<div className="text-14 font-semibold text-primary">Темп активности</div>
|
||||
<div className="text-12 text-secondary">Последние 7 дней переходов и взаимодействий внутри сводки.</div>
|
||||
</div>
|
||||
<div className="rounded-full bg-white/6 px-3 py-1.5 text-12 text-secondary">
|
||||
<div className="nodedc-home-soft-badge rounded-full px-3 py-1.5 text-12 text-secondary">
|
||||
{recentTouchpoints} событий
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative overflow-hidden rounded-[24px] border border-white/6 bg-black/12 p-4">
|
||||
<div className="nodedc-home-subpanel relative overflow-hidden p-4">
|
||||
<div className="absolute inset-x-6 top-4 bottom-4 grid grid-cols-4 gap-4 opacity-25">
|
||||
{["col-1", "col-2", "col-3", "col-4"].map((key) => (
|
||||
<div key={key} className="border-r border-dashed border-white/8 last:border-r-0" />
|
||||
<div key={key} className="border-r border-dashed border-white/6 last:border-r-0" />
|
||||
))}
|
||||
</div>
|
||||
|
||||
|
|
@ -268,7 +268,7 @@ export function HomeProjectInsights(props: HomeProjectInsightsProps) {
|
|||
|
||||
<div className="relative z-[1] mt-4 grid grid-cols-7 gap-2">
|
||||
{activitySeries.map((point) => (
|
||||
<div key={point.key} className="rounded-2xl bg-white/4 px-2 py-2 text-center">
|
||||
<div key={point.key} className="nodedc-home-soft-badge rounded-2xl px-2 py-2 text-center">
|
||||
<div className="text-[11px] tracking-[0.14em] text-placeholder uppercase">{point.label}</div>
|
||||
<div className="mt-1 text-13 font-semibold text-primary">{point.value}</div>
|
||||
</div>
|
||||
|
|
@ -279,9 +279,9 @@ export function HomeProjectInsights(props: HomeProjectInsightsProps) {
|
|||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-[28px] border border-white/6 bg-[rgba(var(--nodedc-accent-rgb),0.08)] p-5">
|
||||
<div className="nodedc-home-chart-panel p-5">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="grid size-11 place-items-center rounded-2xl bg-[rgba(var(--nodedc-accent-rgb),0.18)] text-[rgb(var(--nodedc-accent-rgb))]">
|
||||
<div className="grid size-11 place-items-center rounded-2xl bg-[rgba(0,0,0,0.28)] text-[rgb(var(--nodedc-accent-rgb))]">
|
||||
<UsersRound className="size-5" />
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -311,17 +311,19 @@ export function HomeProjectInsights(props: HomeProjectInsightsProps) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-[28px] border border-white/6 bg-black/12 p-5">
|
||||
<div className="nodedc-home-chart-panel p-5">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<div className="text-13 font-semibold text-primary">Ритм исполнения</div>
|
||||
<div className="text-12 text-secondary">Сколько уже закрыто и какой объём ещё держим открытым.</div>
|
||||
</div>
|
||||
<div className="rounded-full bg-white/6 px-3 py-1.5 text-12 text-secondary">{completionRate}%</div>
|
||||
<div className="nodedc-home-soft-badge rounded-full px-3 py-1.5 text-12 text-secondary">
|
||||
{completionRate}%
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 space-y-4">
|
||||
<div className="rounded-[22px] bg-white/4 p-4">
|
||||
<div className="nodedc-home-subpanel p-4">
|
||||
<div className="flex items-center justify-between gap-3 text-12">
|
||||
<span className="text-secondary">Закрытые задачи</span>
|
||||
<span className="font-semibold text-primary">{completedIssues}</span>
|
||||
|
|
@ -334,7 +336,7 @@ export function HomeProjectInsights(props: HomeProjectInsightsProps) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-[22px] bg-white/4 p-4">
|
||||
<div className="nodedc-home-subpanel p-4">
|
||||
<div className="flex items-center justify-between gap-3 text-12">
|
||||
<span className="text-secondary">Открытый остаток</span>
|
||||
<span className="font-semibold text-primary">{openIssues}</span>
|
||||
|
|
@ -350,7 +352,7 @@ export function HomeProjectInsights(props: HomeProjectInsightsProps) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-[22px] border border-dashed border-white/8 bg-white/3 p-4 text-12 text-secondary">
|
||||
<div className="nodedc-home-subpanel p-4 text-12 text-secondary">
|
||||
<span className="font-semibold text-primary">{project ? project.identifier : "Workspace"}</span>
|
||||
<span> держит </span>
|
||||
<span className="font-semibold text-primary">{totalIssues}</span>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,454 @@
|
|||
/**
|
||||
* Copyright (c) 2023-present Plane Software, Inc. and contributors
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
* See the LICENSE file for details.
|
||||
*/
|
||||
|
||||
import type { ReactNode } from "react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { CalendarDays, Sparkles } from "lucide-react";
|
||||
import { observer } from "mobx-react";
|
||||
import useSWR from "swr";
|
||||
import { useTranslation } from "@plane/i18n";
|
||||
import { PriorityIcon, StateGroupIcon } from "@plane/propel/icons";
|
||||
import type { TExternalContourRequest, TIssue } from "@plane/types";
|
||||
import { Avatar } from "@plane/ui";
|
||||
import { cn, getFileURL, renderFormattedDate } from "@plane/utils";
|
||||
import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
|
||||
import { useMember } from "@/hooks/store/use-member";
|
||||
import { useProject } from "@/hooks/store/use-project";
|
||||
import { useProjectState } from "@/hooks/store/use-project-state";
|
||||
import {
|
||||
NodedcWorkItemCard,
|
||||
getNodedcWorkItemCardAppearance,
|
||||
} from "@/components/issues/issue-layouts/shared/nodedc-work-item-card";
|
||||
import { ExternalContourService } from "@/services/external-contours";
|
||||
import { IssueService } from "@/services/issue";
|
||||
import { HomeCardShell } from "./home-card-shell";
|
||||
import type { THomeProjectData } from "./home.utils";
|
||||
|
||||
const issueService = new IssueService();
|
||||
const externalContourService = new ExternalContourService();
|
||||
const INTERNAL_DECK_LIMIT = 10;
|
||||
const EXTERNAL_DECK_LIMIT = 10;
|
||||
const INTERNAL_CURSOR = `${INTERNAL_DECK_LIMIT}:0:0`;
|
||||
|
||||
type HomeRecentIssueDecksProps = {
|
||||
project?: THomeProjectData;
|
||||
workspaceSlug: string;
|
||||
};
|
||||
|
||||
type DeckSectionProps = {
|
||||
count: number;
|
||||
description: string;
|
||||
emptyDescription: string;
|
||||
emptyTitle: string;
|
||||
isLoading: boolean;
|
||||
items: ReactNode[];
|
||||
title: string;
|
||||
};
|
||||
|
||||
type InternalIssueCardProps = {
|
||||
isActive: boolean;
|
||||
issue: TIssue;
|
||||
onSelect: () => void;
|
||||
project: THomeProjectData;
|
||||
};
|
||||
|
||||
type ExternalIssueCardProps = {
|
||||
isActive: boolean;
|
||||
onSelect: () => void;
|
||||
project: THomeProjectData;
|
||||
request: TExternalContourRequest;
|
||||
};
|
||||
|
||||
const sortByRecentCreatedDate = <
|
||||
T extends { created_at?: string | null; requested_at?: string | null; updated_at?: string | null },
|
||||
>(
|
||||
items: T[]
|
||||
) => {
|
||||
// oxlint-disable-next-line unicorn/no-array-sort
|
||||
return [...items].sort((left: T, right: T) => {
|
||||
const leftDate = Date.parse(left.requested_at ?? left.created_at ?? left.updated_at ?? "") || 0;
|
||||
const rightDate = Date.parse(right.requested_at ?? right.created_at ?? right.updated_at ?? "") || 0;
|
||||
return rightDate - leftDate;
|
||||
});
|
||||
};
|
||||
|
||||
const DeckSection = (props: DeckSectionProps) => {
|
||||
const { count, description, emptyDescription, emptyTitle, isLoading, items, title } = props;
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<div>
|
||||
<div className="text-14 font-semibold text-primary">{title}</div>
|
||||
<div className="text-12 text-secondary">{description}</div>
|
||||
</div>
|
||||
<div className="nodedc-toolbar-pill inline-flex items-center gap-2">
|
||||
<Sparkles className="size-3.5" />
|
||||
<span>{count}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="nodedc-home-task-deck-scroller">
|
||||
<div className="flex min-h-[236px] items-end px-1 py-4">
|
||||
{isLoading
|
||||
? Array.from({ length: 4 }, (_, index) => (
|
||||
<div
|
||||
key={`skeleton-${title}-${index}`}
|
||||
className={cn("nodedc-home-task-card nodedc-home-task-card-skeleton animate-pulse", {
|
||||
"-ml-16": index > 0,
|
||||
})}
|
||||
style={{ zIndex: 5 - index }}
|
||||
/>
|
||||
))
|
||||
: items}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!isLoading && items.length === 0 && (
|
||||
<div className="rounded-[24px] border border-white/6 bg-black/10 px-4 py-5">
|
||||
<div className="text-14 font-semibold text-primary">{emptyTitle}</div>
|
||||
<div className="mt-1 text-12 leading-5 text-secondary">{emptyDescription}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const HomeInternalContourDeckCard = observer(function HomeInternalContourDeckCard(props: InternalIssueCardProps) {
|
||||
const { isActive, issue, onSelect, project } = props;
|
||||
const { t } = useTranslation();
|
||||
const { getProjectById } = useProject();
|
||||
const { getUserDetails } = useMember();
|
||||
const { getStateById } = useProjectState();
|
||||
|
||||
const creatorDetails = useMemo(() => {
|
||||
if (issue.created_by_detail) return issue.created_by_detail;
|
||||
if (issue.created_by && getUserDetails(issue.created_by)) return getUserDetails(issue.created_by);
|
||||
if (issue.created_by_display_name || issue.created_by_avatar_url) {
|
||||
return {
|
||||
id: issue.created_by,
|
||||
display_name: issue.created_by_display_name ?? t("common.none"),
|
||||
avatar_url: issue.created_by_avatar_url ?? "",
|
||||
first_name: "",
|
||||
last_name: "",
|
||||
is_bot: false,
|
||||
};
|
||||
}
|
||||
|
||||
return undefined;
|
||||
}, [
|
||||
getUserDetails,
|
||||
issue.created_by,
|
||||
issue.created_by_avatar_url,
|
||||
issue.created_by_detail,
|
||||
issue.created_by_display_name,
|
||||
t,
|
||||
]);
|
||||
|
||||
const sourceContourName = issue.source_project_name ?? getProjectById(issue.project_id)?.name ?? project.name;
|
||||
const selectedState = getStateById(issue.state_id);
|
||||
const { iconBubbleClasses, pillBackgroundClasses } = getNodedcWorkItemCardAppearance(isActive);
|
||||
const statusIconColor =
|
||||
selectedState?.color ?? (isActive ? "rgb(var(--nodedc-on-card-active-rgb))" : "var(--text-color-primary)");
|
||||
const creatorName = creatorDetails?.display_name ?? t("common.none");
|
||||
const dueDateLabel = issue.target_date ? renderFormattedDate(issue.target_date, "d MMM, yyyy") : t("common.none");
|
||||
|
||||
const header = (
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="flex min-w-0 flex-1 items-center gap-3">
|
||||
<div className="shrink-0">
|
||||
<Avatar src={getFileURL(creatorDetails?.avatar_url ?? "")} name={creatorName} size="md" />
|
||||
</div>
|
||||
<div className="truncate text-body-sm-medium leading-5">{creatorName}</div>
|
||||
</div>
|
||||
|
||||
<div className="flex shrink-0 items-center gap-2">
|
||||
<div className={cn("flex h-8 w-8 items-center justify-center rounded-full", iconBubbleClasses)}>
|
||||
<PriorityIcon priority={issue.priority} className="h-3.5 w-3.5" />
|
||||
</div>
|
||||
<div className={cn("flex h-8 w-8 items-center justify-center rounded-full", iconBubbleClasses)}>
|
||||
<StateGroupIcon
|
||||
stateGroup={selectedState?.group ?? "backlog"}
|
||||
color={statusIconColor}
|
||||
className="h-3.5 w-3.5"
|
||||
percentage={selectedState?.order}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const footer = (
|
||||
<>
|
||||
<div className={cn("inline-flex min-h-9 items-center rounded-full pl-1 pr-2", pillBackgroundClasses)}>
|
||||
{(issue.assignee_ids?.length ?? 0) > 0 ? (
|
||||
<ButtonAvatars showTooltip={false} userIds={issue.assignee_ids ?? []} size="sm" />
|
||||
) : (
|
||||
<span className="px-2 text-[11px] font-medium">{t("external_contours_page.list.unassigned")}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={cn("inline-flex min-h-9 items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium", pillBackgroundClasses)}>
|
||||
<CalendarDays className="h-3.5 w-3.5" />
|
||||
<span className="truncate">{dueDateLabel}</span>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<button type="button" className="nodedc-home-task-card" data-active={isActive} onClick={onSelect} title={issue.name}>
|
||||
<NodedcWorkItemCard
|
||||
isActive={isActive}
|
||||
surfaceClassName={cn(
|
||||
"nodedc-home-task-card-surface px-0",
|
||||
isActive ? "nodedc-home-task-card-surface-active" : "nodedc-home-task-card-surface-passive"
|
||||
)}
|
||||
contentClassName="px-1"
|
||||
header={header}
|
||||
subtitle={sourceContourName}
|
||||
title={issue.name}
|
||||
footer={footer}
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
});
|
||||
|
||||
const HomeExternalContourDeckCard = observer(function HomeExternalContourDeckCard(props: ExternalIssueCardProps) {
|
||||
const { isActive, onSelect, project, request } = props;
|
||||
const { t } = useTranslation();
|
||||
const { getStateById } = useProjectState();
|
||||
const { iconBubbleClasses, pillBackgroundClasses } = getNodedcWorkItemCardAppearance(isActive);
|
||||
|
||||
const issue = request.issue;
|
||||
const isOutgoing = request.direction
|
||||
? request.direction === "outgoing"
|
||||
: request.source_project_id === project.id;
|
||||
const requester =
|
||||
request.requested_by?.display_name ||
|
||||
request.requested_by_name ||
|
||||
issue.created_by_detail?.display_name ||
|
||||
t("external_contours_page.mirror.system_actor");
|
||||
const requesterAvatar = issue.created_by_detail?.avatar_url || "";
|
||||
const counterpartContourName = isOutgoing
|
||||
? request.target_project?.name || request.target_project_name || issue.project_detail?.name || t("common.none")
|
||||
: request.source_project?.name || request.source_project_name || t("common.none");
|
||||
const fallbackState = getStateById(issue.state_id);
|
||||
const selectedState = issue.state_detail ?? fallbackState;
|
||||
const statusIconColor =
|
||||
selectedState?.color ?? (isActive ? "rgb(var(--nodedc-on-card-active-rgb))" : "var(--text-color-primary)");
|
||||
const dueDateLabel = issue.target_date ? renderFormattedDate(issue.target_date, "d MMM, yyyy") : t("common.none");
|
||||
|
||||
return (
|
||||
<button type="button" className="nodedc-home-task-card" data-active={isActive} onClick={onSelect} title={issue.name}>
|
||||
<div
|
||||
data-active={isActive}
|
||||
className={cn(
|
||||
"nodedc-external-card nodedc-home-task-card-surface relative flex min-h-[220px] w-full flex-col p-4",
|
||||
isActive ? "nodedc-home-task-card-surface-active" : "nodedc-home-task-card-surface-passive"
|
||||
)}
|
||||
>
|
||||
<div className={cn("relative flex min-h-[220px] flex-col px-1", isActive ? "text-[rgb(var(--nodedc-on-card-active-rgb))]" : "text-white")}>
|
||||
<div className="space-y-0.5">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="flex min-w-0 flex-1 items-center gap-3">
|
||||
<div className="shrink-0">
|
||||
<Avatar src={getFileURL(requesterAvatar)} name={requester} size="md" />
|
||||
</div>
|
||||
<div className="truncate text-body-sm-medium leading-5">{requester}</div>
|
||||
</div>
|
||||
|
||||
<div className="flex shrink-0 items-center gap-2">
|
||||
{request.has_unread_updates && (
|
||||
<span
|
||||
className={cn("size-2 rounded-full", isActive ? "bg-black/70" : "bg-accent-primary")}
|
||||
title={t("external_contours_page.list.unread_updates")}
|
||||
/>
|
||||
)}
|
||||
<div className={cn("flex h-8 w-8 items-center justify-center rounded-full", iconBubbleClasses)}>
|
||||
<PriorityIcon priority={issue.priority} className="h-3.5 w-3.5" />
|
||||
</div>
|
||||
<div className={cn("flex h-8 w-8 items-center justify-center rounded-full", iconBubbleClasses)}>
|
||||
<StateGroupIcon
|
||||
stateGroup={selectedState?.group ?? "backlog"}
|
||||
color={statusIconColor}
|
||||
className="h-3.5 w-3.5"
|
||||
percentage={fallbackState?.order}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
"truncate -mt-0.5 pl-8 text-[11px] font-medium leading-4",
|
||||
isActive ? "text-[rgb(var(--nodedc-on-card-active-rgb))]/72" : "text-[#B3B3B8]"
|
||||
)}
|
||||
>
|
||||
{counterpartContourName}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-1 items-center justify-center px-5 py-4 text-center">
|
||||
<div className="line-clamp-4 max-w-full text-lg font-semibold leading-6">{issue.name}</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className={cn("inline-flex min-h-9 items-center rounded-full pl-1 pr-2", pillBackgroundClasses)}>
|
||||
{(issue.assignee_ids?.length ?? 0) > 0 ? (
|
||||
<ButtonAvatars showTooltip={false} userIds={issue.assignee_ids ?? []} size="sm" />
|
||||
) : (
|
||||
<span className="px-2 text-[11px] font-medium">{t("external_contours_page.list.unassigned")}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={cn("inline-flex min-h-9 items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium", pillBackgroundClasses)}>
|
||||
<CalendarDays className="h-3.5 w-3.5" />
|
||||
<span className="truncate">{dueDateLabel}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
});
|
||||
|
||||
export const HomeRecentIssueDecks = observer(function HomeRecentIssueDecks(props: HomeRecentIssueDecksProps) {
|
||||
const { project, workspaceSlug } = props;
|
||||
const [selectedInternalIssueId, setSelectedInternalIssueId] = useState<string | null>(null);
|
||||
const [selectedExternalRequestId, setSelectedExternalRequestId] = useState<string | null>(null);
|
||||
|
||||
const { data: internalIssueResponse, isLoading: isInternalIssuesLoading } = useSWR(
|
||||
project ? `HOME_PROJECT_INTERNAL_ISSUES_${workspaceSlug}_${project.id}` : null,
|
||||
project
|
||||
? () =>
|
||||
issueService.getIssues(workspaceSlug, project.id, {
|
||||
order_by: "-created_at",
|
||||
per_page: INTERNAL_DECK_LIMIT.toString(),
|
||||
cursor: INTERNAL_CURSOR,
|
||||
})
|
||||
: null,
|
||||
{
|
||||
revalidateIfStale: false,
|
||||
revalidateOnFocus: false,
|
||||
revalidateOnReconnect: false,
|
||||
}
|
||||
);
|
||||
|
||||
const { data: externalRequestsResponse, isLoading: isExternalRequestsLoading } = useSWR(
|
||||
project ? `HOME_PROJECT_EXTERNAL_CONTOURS_${workspaceSlug}_${project.id}` : null,
|
||||
project ? () => externalContourService.list(workspaceSlug, project.id) : null,
|
||||
{
|
||||
revalidateIfStale: false,
|
||||
revalidateOnFocus: false,
|
||||
revalidateOnReconnect: false,
|
||||
}
|
||||
);
|
||||
|
||||
const internalIssues = useMemo<TIssue[]>(() => {
|
||||
const results = internalIssueResponse?.results;
|
||||
return Array.isArray(results) ? results.slice(0, INTERNAL_DECK_LIMIT) : [];
|
||||
}, [internalIssueResponse]);
|
||||
|
||||
const externalRequests = useMemo<TExternalContourRequest[]>(
|
||||
() => sortByRecentCreatedDate(externalRequestsResponse?.results ?? []).slice(0, EXTERNAL_DECK_LIMIT),
|
||||
[externalRequestsResponse]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (internalIssues.length === 0) {
|
||||
if (selectedInternalIssueId !== null) setSelectedInternalIssueId(null);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!selectedInternalIssueId || !internalIssues.some((issue) => issue.id === selectedInternalIssueId)) {
|
||||
setSelectedInternalIssueId(internalIssues[0].id);
|
||||
}
|
||||
}, [internalIssues, selectedInternalIssueId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (externalRequests.length === 0) {
|
||||
if (selectedExternalRequestId !== null) setSelectedExternalRequestId(null);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!selectedExternalRequestId || !externalRequests.some((request) => request.id === selectedExternalRequestId)) {
|
||||
setSelectedExternalRequestId(externalRequests[0].id);
|
||||
}
|
||||
}, [externalRequests, selectedExternalRequestId]);
|
||||
|
||||
if (!project) {
|
||||
return (
|
||||
<HomeCardShell
|
||||
eyebrow="Task Decks"
|
||||
title="Последние задачи по проекту"
|
||||
description="Выберите проект слева, и здесь появятся колоды последних задач внешнего и внутреннего контуров."
|
||||
>
|
||||
<div className="rounded-[24px] border border-white/6 bg-black/10 px-5 py-6 text-13 text-secondary">
|
||||
Фокус проекта пока не выбран.
|
||||
</div>
|
||||
</HomeCardShell>
|
||||
);
|
||||
}
|
||||
|
||||
const internalIssueCards = internalIssues.map((issue, index) => (
|
||||
<div
|
||||
key={issue.id}
|
||||
className={cn({ "-ml-16": index > 0 })}
|
||||
style={{ zIndex: issue.id === selectedInternalIssueId ? internalIssues.length + 6 : index + 1 }}
|
||||
>
|
||||
<HomeInternalContourDeckCard
|
||||
issue={issue}
|
||||
isActive={issue.id === selectedInternalIssueId}
|
||||
onSelect={() => setSelectedInternalIssueId(issue.id)}
|
||||
project={project}
|
||||
/>
|
||||
</div>
|
||||
));
|
||||
|
||||
const externalIssueCards = externalRequests.map((request, index) => (
|
||||
<div
|
||||
key={request.id}
|
||||
className={cn({ "-ml-16": index > 0 })}
|
||||
style={{ zIndex: request.id === selectedExternalRequestId ? externalRequests.length + 6 : index + 1 }}
|
||||
>
|
||||
<HomeExternalContourDeckCard
|
||||
isActive={request.id === selectedExternalRequestId}
|
||||
onSelect={() => setSelectedExternalRequestId(request.id)}
|
||||
project={project}
|
||||
request={request}
|
||||
/>
|
||||
</div>
|
||||
));
|
||||
|
||||
return (
|
||||
<HomeCardShell
|
||||
eyebrow={`${project.identifier} • последние задачи`}
|
||||
title="Последние задачи проекта"
|
||||
description="Ниже собраны две колоды для быстрого просмотра новых карточек во внешнем и внутреннем контурах."
|
||||
contentClassName="space-y-5 p-5"
|
||||
>
|
||||
<DeckSection
|
||||
count={externalRequests.length}
|
||||
description="Последние запросы и задачи внешнего контура по текущему проекту."
|
||||
emptyDescription="У проекта пока нет внешних контурных задач. Когда появится первый обмен с контрагентом, он сразу попадет в эту колоду."
|
||||
emptyTitle="Внешний контур пока пуст"
|
||||
isLoading={isExternalRequestsLoading}
|
||||
items={externalIssueCards}
|
||||
title="Последние задачи внешнего контура"
|
||||
/>
|
||||
|
||||
<DeckSection
|
||||
count={internalIssues.length}
|
||||
description="Последние добавленные внутренние задачи выбранного проекта."
|
||||
emptyDescription="Во внутреннем контуре пока нет задач. Как только в проекте появится новая карточка, она ляжет сюда первой."
|
||||
emptyTitle="Внутренний контур пока пуст"
|
||||
isLoading={isInternalIssuesLoading}
|
||||
items={internalIssueCards}
|
||||
title="Последние задачи внутреннего контура"
|
||||
/>
|
||||
</HomeCardShell>
|
||||
);
|
||||
});
|
||||
|
|
@ -7,10 +7,7 @@
|
|||
// plane types
|
||||
import { useTranslation } from "@plane/i18n";
|
||||
import type { IUser, TProjectAnalyticsCount } from "@plane/types";
|
||||
// plane ui
|
||||
// hooks
|
||||
import { useCurrentTime } from "@/hooks/use-current-time";
|
||||
import { HomeCardShell } from "./home-card-shell";
|
||||
import { getCompletionRate, type THomeProjectData } from "./home.utils";
|
||||
|
||||
export interface IUserGreetingsView {
|
||||
|
|
@ -52,49 +49,38 @@ export function UserGreetingsView(props: IUserGreetingsView) {
|
|||
const completionRate = getCompletionRate(selectedProjectAnalytics);
|
||||
|
||||
return (
|
||||
<HomeCardShell
|
||||
tone="accent"
|
||||
eyebrow={workspaceName ?? "Workspace Home"}
|
||||
title={`${t("good")} ${t(greeting)}, ${user?.first_name} ${user?.last_name}`}
|
||||
description={`${weekDay}, ${date} ${timeString}`}
|
||||
contentClassName="p-5"
|
||||
>
|
||||
<div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_320px]">
|
||||
<div className="rounded-[28px] border border-white/6 bg-black/10 p-4">
|
||||
<div className="inline-flex items-center gap-2 rounded-full bg-white/8 px-3 py-1.5 text-12 text-secondary">
|
||||
<span>{greeting === "morning" ? "🌤️" : greeting === "afternoon" ? "🌥️" : "🌙️"}</span>
|
||||
<span>Главная панель workspace</span>
|
||||
</div>
|
||||
<div className="mt-4 max-w-2xl text-13 leading-6 text-secondary">
|
||||
Домашняя страница теперь собирает проектный фокус, recent activity, быстрые ссылки и стикеры в один рабочий
|
||||
экран без переходов по разделам.
|
||||
<section className="nodedc-home-card px-5 py-4">
|
||||
<div className="grid items-stretch gap-3 xl:grid-cols-[minmax(0,1fr)_280px_220px]">
|
||||
<div className="flex min-w-0 items-center">
|
||||
<div className="min-w-0">
|
||||
<div className="text-[11px] font-semibold tracking-[0.22em] text-placeholder uppercase">
|
||||
{workspaceName ?? "Workspace Home"}
|
||||
</div>
|
||||
<h2 className="mt-1 truncate text-24 font-semibold text-primary">
|
||||
{`${t("good")} ${t(greeting)}, ${user?.first_name} ${user?.last_name}`}
|
||||
</h2>
|
||||
<div className="mt-1 text-13 text-secondary">{`${weekDay}, ${date} ${timeString}`}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-1">
|
||||
<div className="rounded-[24px] border border-white/6 bg-black/10 p-4">
|
||||
<div className="text-12 font-medium text-secondary">Текущий фокус</div>
|
||||
<div className="mt-2 text-16 font-semibold text-primary">
|
||||
{selectedProject ? selectedProject.name : "Выберите проект слева"}
|
||||
</div>
|
||||
<div className="mt-1 text-12 text-secondary">
|
||||
{selectedProject ? selectedProject.identifier : "Домашняя сводка перестроится под выбранную карточку."}
|
||||
</div>
|
||||
<div className="nodedc-home-subpanel flex min-h-[108px] flex-col justify-center px-4 py-3">
|
||||
<div className="text-12 font-medium text-secondary">Текущий фокус</div>
|
||||
<div className="mt-2 line-clamp-2 text-18 font-semibold text-primary">
|
||||
{selectedProject ? selectedProject.name : "Выберите проект слева"}
|
||||
</div>
|
||||
<div className="mt-1 text-12 text-secondary">
|
||||
{selectedProject ? selectedProject.identifier : "Домашняя сводка перестроится под выбранную карточку."}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-[24px] border border-white/6 bg-black/10 p-4">
|
||||
<div className="text-12 font-medium text-secondary">Прогресс фокуса</div>
|
||||
<div className="mt-2 text-16 font-semibold text-primary">
|
||||
{selectedProject ? `${completionRate}%` : "—"}
|
||||
</div>
|
||||
<div className="mt-1 text-12 text-secondary">
|
||||
{selectedProject
|
||||
? "Закрытые задачи относительно общего объёма."
|
||||
: "Станет доступен после выбора проекта."}
|
||||
</div>
|
||||
<div className="nodedc-home-subpanel flex min-h-[108px] flex-col justify-center px-4 py-3">
|
||||
<div className="text-12 font-medium text-secondary">Прогресс фокуса</div>
|
||||
<div className="mt-2 text-18 font-semibold text-primary">{selectedProject ? `${completionRate}%` : "—"}</div>
|
||||
<div className="mt-1 text-12 text-secondary">
|
||||
{selectedProject ? "Закрытые задачи относительно общего объёма." : "Станет доступен после выбора проекта."}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</HomeCardShell>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1545,11 +1545,11 @@
|
|||
outline: none !important;
|
||||
border-radius: 2rem !important;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.034) 0%, rgba(255, 255, 255, 0.012) 100%),
|
||||
rgba(255, 255, 255, 0.028) !important;
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.026) 0%, rgba(255, 255, 255, 0.008) 100%),
|
||||
rgba(10, 10, 12, 0.58) !important;
|
||||
box-shadow:
|
||||
0 18px 40px rgba(0, 0, 0, 0.18),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.028) !important;
|
||||
0 18px 40px rgba(0, 0, 0, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
|
||||
-webkit-backdrop-filter: blur(28px);
|
||||
backdrop-filter: blur(28px);
|
||||
}
|
||||
|
|
@ -1560,15 +1560,15 @@
|
|||
inset: 0;
|
||||
z-index: 0;
|
||||
background:
|
||||
radial-gradient(circle at top right, rgba(var(--nodedc-accent-rgb), 0.12), transparent 34%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.014) 0%, transparent 100%);
|
||||
radial-gradient(circle at top right, rgba(var(--nodedc-accent-rgb), 0.08), transparent 34%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.01) 0%, transparent 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.nodedc-home-card[data-tone="accent"] {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.042) 0%, rgba(255, 255, 255, 0.016) 100%),
|
||||
rgba(var(--nodedc-accent-rgb), 0.12) !important;
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.012) 100%),
|
||||
rgba(var(--nodedc-accent-rgb), 0.1) !important;
|
||||
}
|
||||
|
||||
.nodedc-home-card[data-tone="accent"]::before {
|
||||
|
|
@ -1609,33 +1609,141 @@
|
|||
filter: saturate(1);
|
||||
}
|
||||
|
||||
.nodedc-home-task-deck-scroller {
|
||||
overflow-x: auto;
|
||||
overflow-y: visible;
|
||||
padding-bottom: 0.25rem;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.nodedc-home-task-deck-scroller::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nodedc-home-task-card {
|
||||
width: 18.5rem;
|
||||
min-width: 18.5rem;
|
||||
border: 0 !important;
|
||||
outline: none !important;
|
||||
background: transparent !important;
|
||||
padding: 0 !important;
|
||||
position: relative;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition:
|
||||
transform 180ms ease,
|
||||
filter 180ms ease;
|
||||
}
|
||||
|
||||
.nodedc-home-task-card[data-active="true"] {
|
||||
transform: translateY(-0.85rem) scale(1.015);
|
||||
}
|
||||
|
||||
.nodedc-home-task-card[data-active="false"] {
|
||||
filter: saturate(0.88);
|
||||
transform: scale(0.975);
|
||||
}
|
||||
|
||||
.nodedc-home-task-card[data-active="false"]:hover {
|
||||
transform: translateY(-0.2rem) scale(0.985);
|
||||
filter: saturate(1);
|
||||
}
|
||||
|
||||
.nodedc-home-task-card-surface {
|
||||
overflow: hidden;
|
||||
isolation: isolate;
|
||||
border-radius: 2rem !important;
|
||||
box-shadow:
|
||||
0 24px 48px rgba(0, 0, 0, 0.24),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
backdrop-filter: blur(24px);
|
||||
transition:
|
||||
background 180ms ease,
|
||||
box-shadow 180ms ease,
|
||||
color 180ms ease;
|
||||
}
|
||||
|
||||
.nodedc-home-task-card[data-active="false"] .nodedc-home-task-card-surface {
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
backdrop-filter: blur(24px);
|
||||
}
|
||||
|
||||
.nodedc-home-task-card-surface-passive {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.038) 0%, rgba(255, 255, 255, 0.012) 100%),
|
||||
rgba(7, 7, 9, 0.74) !important;
|
||||
}
|
||||
|
||||
.nodedc-home-task-card-surface-active {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.018) 100%),
|
||||
rgba(var(--nodedc-card-active-rgb), 0.96) !important;
|
||||
color: rgb(var(--nodedc-on-card-active-rgb)) !important;
|
||||
box-shadow:
|
||||
0 30px 56px rgba(0, 0, 0, 0.28),
|
||||
inset 0 0 0 1px rgba(255, 255, 255, 0.18),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
|
||||
}
|
||||
|
||||
.nodedc-home-task-card[data-active="true"] .nodedc-home-task-card-surface {
|
||||
background: rgb(var(--nodedc-card-active-rgb)) !important;
|
||||
color: rgb(var(--nodedc-on-card-active-rgb)) !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
backdrop-filter: none !important;
|
||||
box-shadow:
|
||||
0 30px 56px rgba(0, 0, 0, 0.28),
|
||||
inset 0 0 0 1px rgba(255, 255, 255, 0.18),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
|
||||
}
|
||||
|
||||
.nodedc-home-task-card-skeleton {
|
||||
height: 14.75rem;
|
||||
border-radius: 2rem !important;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.028) 0%, rgba(255, 255, 255, 0.01) 100%),
|
||||
rgba(7, 7, 9, 0.68) !important;
|
||||
box-shadow:
|
||||
0 24px 48px rgba(0, 0, 0, 0.22),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
backdrop-filter: blur(24px);
|
||||
}
|
||||
|
||||
.nodedc-home-metric-card {
|
||||
border-radius: 1.5rem !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.032) 0%, rgba(255, 255, 255, 0.012) 100%), rgba(0, 0, 0, 0.14);
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.018) 0%, rgba(255, 255, 255, 0.006) 100%),
|
||||
rgba(7, 7, 9, 0.58);
|
||||
padding: 1rem;
|
||||
box-shadow:
|
||||
0 14px 28px rgba(0, 0, 0, 0.14),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.016) !important;
|
||||
}
|
||||
|
||||
.nodedc-home-metric-card-accent {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.042) 0%, rgba(255, 255, 255, 0.016) 100%),
|
||||
rgba(var(--nodedc-accent-rgb), 0.12);
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.022) 0%, rgba(255, 255, 255, 0.008) 100%),
|
||||
rgba(7, 7, 9, 0.62);
|
||||
}
|
||||
|
||||
.nodedc-home-chart-panel {
|
||||
border-radius: 1.75rem !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.032) 0%, rgba(255, 255, 255, 0.012) 100%), rgba(0, 0, 0, 0.14);
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.018) 0%, rgba(255, 255, 255, 0.006) 100%),
|
||||
rgba(7, 7, 9, 0.56);
|
||||
padding: 1rem;
|
||||
box-shadow:
|
||||
0 18px 34px rgba(0, 0, 0, 0.16),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.016) !important;
|
||||
}
|
||||
|
||||
.nodedc-home-progress-track {
|
||||
height: 0.55rem;
|
||||
overflow: hidden;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.nodedc-home-progress-fill {
|
||||
|
|
@ -1644,6 +1752,21 @@
|
|||
background: linear-gradient(90deg, rgba(var(--nodedc-accent-rgb), 0.94) 0%, rgba(255, 255, 255, 0.92) 100%);
|
||||
}
|
||||
|
||||
.nodedc-home-subpanel {
|
||||
border-radius: 1.5rem !important;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.018) 0%, rgba(255, 255, 255, 0.006) 100%),
|
||||
rgba(6, 6, 8, 0.64) !important;
|
||||
box-shadow:
|
||||
0 14px 28px rgba(0, 0, 0, 0.16),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.01) !important;
|
||||
}
|
||||
|
||||
.nodedc-home-soft-badge {
|
||||
background: rgba(0, 0, 0, 0.34) !important;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.01) !important;
|
||||
}
|
||||
|
||||
.nodedc-workspace-list-row:hover {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.044) 0%, rgba(255, 255, 255, 0.018) 100%),
|
||||
|
|
|
|||
Loading…
Reference in New Issue