refactor(web): decompose TimelineView, ReportBuilder, and ResourceModal into focused components
Extract overlay/popover JSX from TimelineView (1268→1037 lines) into TimelineDragOverlays and TimelinePopovers. Extract ResourceMonthConfigSection from ReportBuilder (1132→1018 lines). Extract ResourceSkillsEditor and ResourceOrgClassification from ResourceModal (1035→714 lines). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -10,6 +10,7 @@ import {
|
||||
type ReportExplainability,
|
||||
} from "./reportBuilderExplainability.js";
|
||||
import { ReportResultsPanel } from "./ReportResultsPanel.js";
|
||||
import { ResourceMonthConfigSection } from "./ResourceMonthConfigSection.js";
|
||||
|
||||
// ─── Types ──────────────────────────────────────────────────────────────────
|
||||
|
||||
@@ -753,135 +754,20 @@ export function ReportBuilder() {
|
||||
))}
|
||||
</div>
|
||||
{entity === "resource_month" && (
|
||||
<div className="mt-4 space-y-4 rounded-2xl border border-emerald-200 bg-emerald-50/70 p-4 dark:border-emerald-900/60 dark:bg-emerald-950/20">
|
||||
<div className="flex flex-wrap items-end gap-4">
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-medium text-emerald-900 dark:text-emerald-200">
|
||||
Period month
|
||||
</label>
|
||||
<input
|
||||
type="month"
|
||||
value={periodMonth}
|
||||
onChange={(e) => setPeriodMonth(e.target.value)}
|
||||
className="rounded-xl border border-emerald-300 bg-white px-3 py-2 text-sm text-gray-700 focus:border-emerald-500 focus:ring-emerald-500 dark:border-emerald-900 dark:bg-slate-950 dark:text-gray-300"
|
||||
/>
|
||||
</div>
|
||||
<p className="max-w-2xl text-sm text-emerald-900/80 dark:text-emerald-200/80">
|
||||
Resource Months uses the CapaKraken holiday and absence logic directly. SAH,
|
||||
booked hours and chargeability are calculated per resource and month with country,
|
||||
state and city context.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 lg:grid-cols-3">
|
||||
{resourceMonthBlueprints.map((blueprint) => (
|
||||
<button
|
||||
key={blueprint.id}
|
||||
type="button"
|
||||
onClick={() => applyBlueprint(blueprint)}
|
||||
className="rounded-2xl border border-emerald-200 bg-white/80 p-4 text-left transition hover:border-emerald-400 hover:bg-white dark:border-emerald-900/70 dark:bg-slate-950/60 dark:hover:border-emerald-700"
|
||||
>
|
||||
<div className="text-sm font-semibold text-emerald-950 dark:text-emerald-100">
|
||||
{blueprint.label}
|
||||
</div>
|
||||
<p className="mt-1 text-xs leading-5 text-emerald-900/75 dark:text-emerald-200/75">
|
||||
{blueprint.description}
|
||||
</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl border border-emerald-200/80 bg-white/60 p-4 dark:border-emerald-900/60 dark:bg-slate-950/40">
|
||||
{displayedResourceMonthCompleteness ? (
|
||||
<div className="mb-4 rounded-2xl border border-emerald-200/80 bg-emerald-50/80 p-4 dark:border-emerald-900/60 dark:bg-emerald-950/20">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span
|
||||
className={clsx(
|
||||
"rounded-full px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.14em]",
|
||||
displayedResourceMonthCompleteness.isAuditReady
|
||||
? "bg-emerald-500 text-white"
|
||||
: "bg-amber-100 text-amber-800 dark:bg-amber-950/60 dark:text-amber-200",
|
||||
)}
|
||||
>
|
||||
{displayedResourceMonthCompleteness.isAuditReady
|
||||
? "Audit ready"
|
||||
: "Audit gap"}
|
||||
</span>
|
||||
<span className="rounded-full bg-white px-2.5 py-1 text-[11px] font-medium text-emerald-900 dark:bg-slate-950 dark:text-emerald-100">
|
||||
{displayedResourceMonthCompleteness.selectedMinimumAuditColumnCount}/
|
||||
{displayedResourceMonthCompleteness.minimumAuditColumnCount} minimum audit
|
||||
columns
|
||||
</span>
|
||||
<span className="rounded-full bg-white px-2.5 py-1 text-[11px] font-medium text-emerald-900 dark:bg-slate-950 dark:text-emerald-100">
|
||||
{displayedResourceMonthCompleteness.selectedRecommendedColumnCount}/
|
||||
{displayedResourceMonthCompleteness.recommendedColumnCount} recommended
|
||||
columns
|
||||
</span>
|
||||
<span className="rounded-full bg-white px-2.5 py-1 text-[11px] text-emerald-900/80 dark:bg-slate-950 dark:text-emerald-200/80">
|
||||
{selectedTemplate && !hasTemplateDraftChanges
|
||||
? "Saved template status"
|
||||
: "Current builder status"}
|
||||
</span>
|
||||
</div>
|
||||
{displayedResourceMonthCompleteness.missingMinimumAuditColumns.length > 0 ? (
|
||||
<p className="mt-3 text-xs text-amber-800 dark:text-amber-200">
|
||||
Missing audit/export basis columns:{" "}
|
||||
{summarizeMissingColumns(
|
||||
displayedResourceMonthCompleteness.missingMinimumAuditColumns,
|
||||
columnLabelMap,
|
||||
)}
|
||||
</p>
|
||||
) : displayedResourceMonthCompleteness.missingRecommendedColumns.length > 0 ? (
|
||||
<p className="mt-3 text-xs text-emerald-900/80 dark:text-emerald-200/80">
|
||||
Audit-ready, but still missing recommended basis columns:{" "}
|
||||
{summarizeMissingColumns(
|
||||
displayedResourceMonthCompleteness.missingRecommendedColumns,
|
||||
columnLabelMap,
|
||||
)}
|
||||
</p>
|
||||
) : (
|
||||
<p className="mt-3 text-xs text-emerald-900/80 dark:text-emerald-200/80">
|
||||
This view includes the full recommended audit/export basis set for monthly
|
||||
SAH and chargeability checks.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
<div className="text-sm font-medium text-emerald-950 dark:text-emerald-100">
|
||||
Recommended transparency columns
|
||||
</div>
|
||||
<div className="mt-2 flex flex-wrap gap-2">
|
||||
{RESOURCE_MONTH_RECOMMENDED_COLUMNS.map((column) => (
|
||||
<button
|
||||
key={column}
|
||||
type="button"
|
||||
onClick={() => toggleColumn(column)}
|
||||
className={clsx(
|
||||
"rounded-full border px-3 py-1 text-xs font-medium transition",
|
||||
selectedColumns.has(column)
|
||||
? "border-emerald-500 bg-emerald-500 text-white"
|
||||
: "border-emerald-200 bg-white text-emerald-900 hover:border-emerald-400 dark:border-emerald-900 dark:bg-slate-950 dark:text-emerald-200 dark:hover:border-emerald-700",
|
||||
)}
|
||||
>
|
||||
{columnLabelMap.get(column) ?? column}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<p className="mt-3 text-xs text-emerald-900/75 dark:text-emerald-200/75">
|
||||
Formula reference: base available hours - holiday deduction - absence deduction =
|
||||
monthly SAH. Chargeability uses booked hours divided by monthly SAH.
|
||||
</p>
|
||||
<p className="mt-2 text-xs text-emerald-900/75 dark:text-emerald-200/75">
|
||||
Export recommendation: include both basis columns and computed metrics in the CSV.
|
||||
That keeps Excel as a review layer instead of rebuilding CapaKraken logic outside
|
||||
the product.
|
||||
</p>
|
||||
<p className="mt-2 text-xs text-emerald-900/75 dark:text-emerald-200/75">
|
||||
Minimum audit set: month, location context, SAH, holiday deductions, absence
|
||||
deductions, target hours, booked hours and unassigned hours.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<ResourceMonthConfigSection
|
||||
periodMonth={periodMonth}
|
||||
onPeriodMonthChange={setPeriodMonth}
|
||||
blueprints={resourceMonthBlueprints}
|
||||
onApplyBlueprint={applyBlueprint}
|
||||
completeness={displayedResourceMonthCompleteness}
|
||||
selectedTemplate={selectedTemplate}
|
||||
hasTemplateDraftChanges={hasTemplateDraftChanges}
|
||||
selectedColumns={selectedColumns}
|
||||
onToggleColumn={toggleColumn}
|
||||
columnLabelMap={columnLabelMap}
|
||||
recommendedColumns={RESOURCE_MONTH_RECOMMENDED_COLUMNS}
|
||||
summarizeMissing={summarizeMissingColumns}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -0,0 +1,168 @@
|
||||
import { clsx } from "clsx";
|
||||
|
||||
interface ResourceMonthTemplateCompleteness {
|
||||
scope: "resource_month";
|
||||
isAuditReady: boolean;
|
||||
isRecommendedComplete: boolean;
|
||||
recommendedColumnCount: number;
|
||||
selectedRecommendedColumnCount: number;
|
||||
minimumAuditColumnCount: number;
|
||||
selectedMinimumAuditColumnCount: number;
|
||||
missingRecommendedColumns: string[];
|
||||
missingMinimumAuditColumns: string[];
|
||||
}
|
||||
|
||||
interface ResourceMonthConfigSectionProps<
|
||||
TBlueprint extends { id: string; label: string; description: string },
|
||||
> {
|
||||
periodMonth: string;
|
||||
onPeriodMonthChange: (value: string) => void;
|
||||
blueprints: TBlueprint[];
|
||||
onApplyBlueprint: (blueprint: TBlueprint) => void;
|
||||
completeness: ResourceMonthTemplateCompleteness | null;
|
||||
selectedTemplate: { isShared?: boolean; isOwner?: boolean } | null;
|
||||
hasTemplateDraftChanges: boolean;
|
||||
selectedColumns: Set<string>;
|
||||
onToggleColumn: (column: string) => void;
|
||||
columnLabelMap: Map<string, string>;
|
||||
recommendedColumns: readonly string[];
|
||||
summarizeMissing: (columns: string[], labelMap: Map<string, string>) => string;
|
||||
}
|
||||
|
||||
export function ResourceMonthConfigSection<
|
||||
TBlueprint extends { id: string; label: string; description: string },
|
||||
>({
|
||||
periodMonth,
|
||||
onPeriodMonthChange,
|
||||
blueprints,
|
||||
onApplyBlueprint,
|
||||
completeness,
|
||||
selectedTemplate,
|
||||
hasTemplateDraftChanges,
|
||||
selectedColumns,
|
||||
onToggleColumn,
|
||||
columnLabelMap,
|
||||
recommendedColumns,
|
||||
summarizeMissing,
|
||||
}: ResourceMonthConfigSectionProps<TBlueprint>) {
|
||||
return (
|
||||
<div className="mt-4 space-y-4 rounded-2xl border border-emerald-200 bg-emerald-50/70 p-4 dark:border-emerald-900/60 dark:bg-emerald-950/20">
|
||||
<div className="flex flex-wrap items-end gap-4">
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-medium text-emerald-900 dark:text-emerald-200">
|
||||
Period month
|
||||
</label>
|
||||
<input
|
||||
type="month"
|
||||
value={periodMonth}
|
||||
onChange={(e) => onPeriodMonthChange(e.target.value)}
|
||||
className="rounded-xl border border-emerald-300 bg-white px-3 py-2 text-sm text-gray-700 focus:border-emerald-500 focus:ring-emerald-500 dark:border-emerald-900 dark:bg-slate-950 dark:text-gray-300"
|
||||
/>
|
||||
</div>
|
||||
<p className="max-w-2xl text-sm text-emerald-900/80 dark:text-emerald-200/80">
|
||||
Resource Months uses the CapaKraken holiday and absence logic directly. SAH, booked hours
|
||||
and chargeability are calculated per resource and month with country, state and city
|
||||
context.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 lg:grid-cols-3">
|
||||
{blueprints.map((blueprint) => (
|
||||
<button
|
||||
key={blueprint.id}
|
||||
type="button"
|
||||
onClick={() => onApplyBlueprint(blueprint)}
|
||||
className="rounded-2xl border border-emerald-200 bg-white/80 p-4 text-left transition hover:border-emerald-400 hover:bg-white dark:border-emerald-900/70 dark:bg-slate-950/60 dark:hover:border-emerald-700"
|
||||
>
|
||||
<div className="text-sm font-semibold text-emerald-950 dark:text-emerald-100">
|
||||
{blueprint.label}
|
||||
</div>
|
||||
<p className="mt-1 text-xs leading-5 text-emerald-900/75 dark:text-emerald-200/75">
|
||||
{blueprint.description}
|
||||
</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl border border-emerald-200/80 bg-white/60 p-4 dark:border-emerald-900/60 dark:bg-slate-950/40">
|
||||
{completeness ? (
|
||||
<div className="mb-4 rounded-2xl border border-emerald-200/80 bg-emerald-50/80 p-4 dark:border-emerald-900/60 dark:bg-emerald-950/20">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span
|
||||
className={clsx(
|
||||
"rounded-full px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.14em]",
|
||||
completeness.isAuditReady
|
||||
? "bg-emerald-500 text-white"
|
||||
: "bg-amber-100 text-amber-800 dark:bg-amber-950/60 dark:text-amber-200",
|
||||
)}
|
||||
>
|
||||
{completeness.isAuditReady ? "Audit ready" : "Audit gap"}
|
||||
</span>
|
||||
<span className="rounded-full bg-white px-2.5 py-1 text-[11px] font-medium text-emerald-900 dark:bg-slate-950 dark:text-emerald-100">
|
||||
{completeness.selectedMinimumAuditColumnCount}/
|
||||
{completeness.minimumAuditColumnCount} minimum audit columns
|
||||
</span>
|
||||
<span className="rounded-full bg-white px-2.5 py-1 text-[11px] font-medium text-emerald-900 dark:bg-slate-950 dark:text-emerald-100">
|
||||
{completeness.selectedRecommendedColumnCount}/{completeness.recommendedColumnCount}{" "}
|
||||
recommended columns
|
||||
</span>
|
||||
<span className="rounded-full bg-white px-2.5 py-1 text-[11px] text-emerald-900/80 dark:bg-slate-950 dark:text-emerald-200/80">
|
||||
{selectedTemplate && !hasTemplateDraftChanges
|
||||
? "Saved template status"
|
||||
: "Current builder status"}
|
||||
</span>
|
||||
</div>
|
||||
{completeness.missingMinimumAuditColumns.length > 0 ? (
|
||||
<p className="mt-3 text-xs text-amber-800 dark:text-amber-200">
|
||||
Missing audit/export basis columns:{" "}
|
||||
{summarizeMissing(completeness.missingMinimumAuditColumns, columnLabelMap)}
|
||||
</p>
|
||||
) : completeness.missingRecommendedColumns.length > 0 ? (
|
||||
<p className="mt-3 text-xs text-emerald-900/80 dark:text-emerald-200/80">
|
||||
Audit-ready, but still missing recommended basis columns:{" "}
|
||||
{summarizeMissing(completeness.missingRecommendedColumns, columnLabelMap)}
|
||||
</p>
|
||||
) : (
|
||||
<p className="mt-3 text-xs text-emerald-900/80 dark:text-emerald-200/80">
|
||||
This view includes the full recommended audit/export basis set for monthly SAH and
|
||||
chargeability checks.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
<div className="text-sm font-medium text-emerald-950 dark:text-emerald-100">
|
||||
Recommended transparency columns
|
||||
</div>
|
||||
<div className="mt-2 flex flex-wrap gap-2">
|
||||
{recommendedColumns.map((column) => (
|
||||
<button
|
||||
key={column}
|
||||
type="button"
|
||||
onClick={() => onToggleColumn(column)}
|
||||
className={clsx(
|
||||
"rounded-full border px-3 py-1 text-xs font-medium transition",
|
||||
selectedColumns.has(column)
|
||||
? "border-emerald-500 bg-emerald-500 text-white"
|
||||
: "border-emerald-200 bg-white text-emerald-900 hover:border-emerald-400 dark:border-emerald-900 dark:bg-slate-950 dark:text-emerald-200 dark:hover:border-emerald-700",
|
||||
)}
|
||||
>
|
||||
{columnLabelMap.get(column) ?? column}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<p className="mt-3 text-xs text-emerald-900/75 dark:text-emerald-200/75">
|
||||
Formula reference: base available hours - holiday deduction - absence deduction = monthly
|
||||
SAH. Chargeability uses booked hours divided by monthly SAH.
|
||||
</p>
|
||||
<p className="mt-2 text-xs text-emerald-900/75 dark:text-emerald-200/75">
|
||||
Export recommendation: include both basis columns and computed metrics in the CSV. That
|
||||
keeps Excel as a review layer instead of rebuilding CapaKraken logic outside the product.
|
||||
</p>
|
||||
<p className="mt-2 text-xs text-emerald-900/75 dark:text-emerald-200/75">
|
||||
Minimum audit set: month, location context, SAH, holiday deductions, absence deductions,
|
||||
target hours, booked hours and unassigned hours.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -2,11 +2,12 @@
|
||||
|
||||
import { useRef, useState } from "react";
|
||||
import { useFocusTrap } from "~/hooks/useFocusTrap.js";
|
||||
import type { Resource, SkillEntry } from "@capakraken/shared";
|
||||
import { GERMAN_FEDERAL_STATES, inferStateFromPostalCode, ResourceType } from "@capakraken/shared";
|
||||
import type { Resource, SkillEntry, ResourceType } from "@capakraken/shared";
|
||||
import { trpc } from "~/lib/trpc/client.js";
|
||||
import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
|
||||
import { usePermissions } from "~/hooks/usePermissions.js";
|
||||
import { ResourceOrgClassification } from "./ResourceOrgClassification.js";
|
||||
import { ResourceSkillsEditor } from "./ResourceSkillsEditor.js";
|
||||
|
||||
interface RoleAssignment {
|
||||
roleId: string;
|
||||
@@ -105,10 +106,14 @@ function resourceToFormState(resource: Resource): FormState {
|
||||
countryId: (resource as unknown as { countryId?: string | null }).countryId ?? "",
|
||||
metroCityId: (resource as unknown as { metroCityId?: string | null }).metroCityId ?? "",
|
||||
orgUnitId: (resource as unknown as { orgUnitId?: string | null }).orgUnitId ?? "",
|
||||
managementLevelGroupId: (resource as unknown as { managementLevelGroupId?: string | null }).managementLevelGroupId ?? "",
|
||||
managementLevelId: (resource as unknown as { managementLevelId?: string | null }).managementLevelId ?? "",
|
||||
managementLevelGroupId:
|
||||
(resource as unknown as { managementLevelGroupId?: string | null }).managementLevelGroupId ??
|
||||
"",
|
||||
managementLevelId:
|
||||
(resource as unknown as { managementLevelId?: string | null }).managementLevelId ?? "",
|
||||
resourceType: (resource as unknown as { resourceType?: string }).resourceType ?? "EMPLOYEE",
|
||||
chgResponsibility: (resource as unknown as { chgResponsibility?: boolean }).chgResponsibility ?? true,
|
||||
chgResponsibility:
|
||||
(resource as unknown as { chgResponsibility?: boolean }).chgResponsibility ?? true,
|
||||
rolledOff: (resource as unknown as { rolledOff?: boolean }).rolledOff ?? false,
|
||||
departed: (resource as unknown as { departed?: boolean }).departed ?? false,
|
||||
enterpriseId: (resource as unknown as { enterpriseId?: string | null }).enterpriseId ?? "",
|
||||
@@ -154,7 +159,14 @@ function defaultFormState(): FormState {
|
||||
}
|
||||
|
||||
function defaultSkillRow(): SkillRow {
|
||||
return { skill: "", proficiency: 3, yearsExperience: "", category: "", certified: false, isMainSkill: false };
|
||||
return {
|
||||
skill: "",
|
||||
proficiency: 3,
|
||||
yearsExperience: "",
|
||||
category: "",
|
||||
certified: false,
|
||||
isMainSkill: false,
|
||||
};
|
||||
}
|
||||
|
||||
interface ResourceModalProps {
|
||||
@@ -167,7 +179,8 @@ interface ResourceModalProps {
|
||||
const INPUT_CLASS =
|
||||
"w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-500 text-sm bg-white dark:bg-gray-900 dark:text-gray-100";
|
||||
const LABEL_CLASS = "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1";
|
||||
const SECTION_HEADER_CLASS = "text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3 mt-4";
|
||||
const SECTION_HEADER_CLASS =
|
||||
"text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3 mt-4";
|
||||
const PRIMARY_BTN =
|
||||
"px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 text-sm font-medium disabled:opacity-50";
|
||||
|
||||
@@ -211,7 +224,9 @@ export function ResourceModal({ mode, resource, onClose, onSuccess }: ResourceMo
|
||||
|
||||
const { data: countries } = trpc.country.list.useQuery(undefined, { staleTime: 60_000 });
|
||||
const { data: orgUnits } = trpc.orgUnit.list.useQuery(undefined, { staleTime: 60_000 });
|
||||
const { data: mgmtGroups } = trpc.managementLevel.listGroups.useQuery(undefined, { staleTime: 60_000 });
|
||||
const { data: mgmtGroups } = trpc.managementLevel.listGroups.useQuery(undefined, {
|
||||
staleTime: 60_000,
|
||||
});
|
||||
const { data: clients } = trpc.clientEntity.list.useQuery(undefined, { staleTime: 60_000 });
|
||||
|
||||
const roleOptions = (availableRoles ?? []) as unknown as RoleOption[];
|
||||
@@ -220,14 +235,6 @@ export function ResourceModal({ mode, resource, onClose, onSuccess }: ResourceMo
|
||||
const managementGroupOptions = (mgmtGroups ?? []) as unknown as ManagementGroupOption[];
|
||||
const clientOptions = (clients ?? []) as unknown as ClientOption[];
|
||||
|
||||
// Derive metro cities from selected country
|
||||
const selectedCountry = countryOptions.find((c) => c.id === form.countryId);
|
||||
const metroCities = selectedCountry?.metroCities ?? [];
|
||||
|
||||
// Derive levels from selected group
|
||||
const selectedGroup = managementGroupOptions.find((g) => g.id === form.managementLevelGroupId);
|
||||
const mgmtLevels = selectedGroup?.levels ?? [];
|
||||
|
||||
const createMutation = trpc.resource.create.useMutation();
|
||||
const updateMutation = trpc.resource.update.useMutation();
|
||||
const hardDeleteMutation = trpc.resource.hardDelete.useMutation({
|
||||
@@ -240,7 +247,8 @@ export function ResourceModal({ mode, resource, onClose, onSuccess }: ResourceMo
|
||||
},
|
||||
});
|
||||
|
||||
const isMutating = createMutation.isPending || updateMutation.isPending || hardDeleteMutation.isPending;
|
||||
const isMutating =
|
||||
createMutation.isPending || updateMutation.isPending || hardDeleteMutation.isPending;
|
||||
|
||||
function setField<K extends keyof FormState>(key: K, value: FormState[K]) {
|
||||
setForm((prev) => ({ ...prev, [key]: value }));
|
||||
@@ -306,7 +314,9 @@ export function ResourceModal({ mode, resource, onClose, onSuccess }: ResourceMo
|
||||
...(form.countryId ? { countryId: form.countryId } : {}),
|
||||
...(form.metroCityId ? { metroCityId: form.metroCityId } : {}),
|
||||
...(form.orgUnitId ? { orgUnitId: form.orgUnitId } : {}),
|
||||
...(form.managementLevelGroupId ? { managementLevelGroupId: form.managementLevelGroupId } : {}),
|
||||
...(form.managementLevelGroupId
|
||||
? { managementLevelGroupId: form.managementLevelGroupId }
|
||||
: {}),
|
||||
...(form.managementLevelId ? { managementLevelId: form.managementLevelId } : {}),
|
||||
resourceType: form.resourceType as ResourceType,
|
||||
chgResponsibility: form.chgResponsibility,
|
||||
@@ -345,14 +355,6 @@ export function ResourceModal({ mode, resource, onClose, onSuccess }: ResourceMo
|
||||
}
|
||||
}
|
||||
|
||||
const proficiencyLabels: Record<number, string> = {
|
||||
1: "1 – Beginner",
|
||||
2: "2 – Elementary",
|
||||
3: "3 – Intermediate",
|
||||
4: "4 – Advanced",
|
||||
5: "5 – Expert",
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 bg-black/50 z-50 flex items-start justify-center overflow-y-auto py-8"
|
||||
@@ -363,7 +365,9 @@ export function ResourceModal({ mode, resource, onClose, onSuccess }: ResourceMo
|
||||
<div
|
||||
ref={panelRef}
|
||||
className="bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-2xl mx-4"
|
||||
onKeyDown={(e) => { if (e.key === "Escape") onClose(); }}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Escape") onClose();
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||
@@ -376,7 +380,13 @@ export function ResourceModal({ mode, resource, onClose, onSuccess }: ResourceMo
|
||||
className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
|
||||
aria-label="Close modal"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<svg
|
||||
className="w-5 h-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
@@ -391,7 +401,8 @@ export function ResourceModal({ mode, resource, onClose, onSuccess }: ResourceMo
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className={LABEL_CLASS} htmlFor="rm-eid">
|
||||
Employee ID <span className="text-red-500">*</span><InfoTooltip content="Unique employee identifier (e.g. EMP-042). Used for imports and cross-referencing." />
|
||||
Employee ID <span className="text-red-500">*</span>
|
||||
<InfoTooltip content="Unique employee identifier (e.g. EMP-042). Used for imports and cross-referencing." />
|
||||
</label>
|
||||
<input
|
||||
id="rm-eid"
|
||||
@@ -405,7 +416,8 @@ export function ResourceModal({ mode, resource, onClose, onSuccess }: ResourceMo
|
||||
</div>
|
||||
<div>
|
||||
<label className={LABEL_CLASS} htmlFor="rm-displayName">
|
||||
Display Name <span className="text-red-500">*</span><InfoTooltip content="Full name shown in the timeline, reports, and staffing views." />
|
||||
Display Name <span className="text-red-500">*</span>
|
||||
<InfoTooltip content="Full name shown in the timeline, reports, and staffing views." />
|
||||
</label>
|
||||
<input
|
||||
id="rm-displayName"
|
||||
@@ -433,7 +445,8 @@ export function ResourceModal({ mode, resource, onClose, onSuccess }: ResourceMo
|
||||
</div>
|
||||
<div>
|
||||
<label className={LABEL_CLASS} htmlFor="rm-chapter">
|
||||
Chapter <span className="text-gray-400 dark:text-gray-500 font-normal">(optional)</span>
|
||||
Chapter{" "}
|
||||
<span className="text-gray-400 dark:text-gray-500 font-normal">(optional)</span>
|
||||
</label>
|
||||
<input
|
||||
id="rm-chapter"
|
||||
@@ -445,7 +458,9 @@ export function ResourceModal({ mode, resource, onClose, onSuccess }: ResourceMo
|
||||
list="rm-chapter-list"
|
||||
/>
|
||||
<datalist id="rm-chapter-list">
|
||||
{chapters?.map((c) => <option key={c} value={c} />)}
|
||||
{chapters?.map((c) => (
|
||||
<option key={c} value={c} />
|
||||
))}
|
||||
</datalist>
|
||||
</div>
|
||||
</div>
|
||||
@@ -454,7 +469,8 @@ export function ResourceModal({ mode, resource, onClose, onSuccess }: ResourceMo
|
||||
<div className="grid grid-cols-2 gap-4 mt-4">
|
||||
<div>
|
||||
<label className={LABEL_CLASS} htmlFor="rm-portfolioUrl">
|
||||
Portfolio URL <span className="text-gray-400 dark:text-gray-500 font-normal">(optional)</span>
|
||||
Portfolio URL{" "}
|
||||
<span className="text-gray-400 dark:text-gray-500 font-normal">(optional)</span>
|
||||
</label>
|
||||
<input
|
||||
id="rm-portfolioUrl"
|
||||
@@ -467,7 +483,9 @@ export function ResourceModal({ mode, resource, onClose, onSuccess }: ResourceMo
|
||||
</div>
|
||||
<div>
|
||||
<label className={LABEL_CLASS} htmlFor="rm-roleId">
|
||||
Area of Expertise <span className="text-gray-400 dark:text-gray-500 font-normal">(optional)</span><InfoTooltip content="The resource's primary area role. Used for skill matrix grouping and AI summary generation." />
|
||||
Area of Expertise{" "}
|
||||
<span className="text-gray-400 dark:text-gray-500 font-normal">(optional)</span>
|
||||
<InfoTooltip content="The resource's primary area role. Used for skill matrix grouping and AI summary generation." />
|
||||
</label>
|
||||
<select
|
||||
id="rm-roleId"
|
||||
@@ -477,241 +495,25 @@ export function ResourceModal({ mode, resource, onClose, onSuccess }: ResourceMo
|
||||
>
|
||||
<option value="">— Not specified —</option>
|
||||
{roleOptions.map((r) => (
|
||||
<option key={r.id} value={r.id}>{r.name}</option>
|
||||
<option key={r.id} value={r.id}>
|
||||
{r.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Postal Code & Federal State */}
|
||||
<div className="grid grid-cols-2 gap-4 mt-4">
|
||||
<div>
|
||||
<label className={LABEL_CLASS} htmlFor="rm-postalCode">
|
||||
Postal Code (PLZ) <span className="text-gray-400 dark:text-gray-500 font-normal">(optional)</span><InfoTooltip content="German postal code. Used to auto-derive the federal state for public holiday calculations." />
|
||||
</label>
|
||||
<input
|
||||
id="rm-postalCode"
|
||||
type="text"
|
||||
className={INPUT_CLASS}
|
||||
placeholder="80331"
|
||||
maxLength={5}
|
||||
value={form.postalCode}
|
||||
onChange={(e) => {
|
||||
const plz = e.target.value;
|
||||
setField("postalCode", plz);
|
||||
if (/^\d{5}$/.test(plz)) {
|
||||
const inferred = inferStateFromPostalCode(plz);
|
||||
if (inferred && !form.federalState) {
|
||||
setField("federalState", inferred);
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className={LABEL_CLASS} htmlFor="rm-federalState">
|
||||
Federal State <span className="text-gray-400 dark:text-gray-500 font-normal">(optional)</span><InfoTooltip content="Determines which public holidays apply (e.g. Bavaria has extra holidays). Auto-derived from postal code." />
|
||||
</label>
|
||||
<select
|
||||
id="rm-federalState"
|
||||
className={INPUT_CLASS}
|
||||
value={form.federalState}
|
||||
onChange={(e) => setField("federalState", e.target.value)}
|
||||
>
|
||||
<option value="">— Not specified —</option>
|
||||
{Object.entries(GERMAN_FEDERAL_STATES).map(([abbr, name]) => (
|
||||
<option key={abbr} value={abbr}>{name} ({abbr})</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Section: Organization & Classification */}
|
||||
<p className={SECTION_HEADER_CLASS}>Organization & Classification</p>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className={LABEL_CLASS} htmlFor="rm-enterpriseId">
|
||||
Enterprise ID <span className="text-gray-400 dark:text-gray-500 font-normal">(optional)</span><InfoTooltip content="Corporate directory ID for cross-system integration (e.g. a.kasperovich)." />
|
||||
</label>
|
||||
<input
|
||||
id="rm-enterpriseId"
|
||||
type="text"
|
||||
className={INPUT_CLASS}
|
||||
placeholder="a.kasperovich"
|
||||
value={form.enterpriseId}
|
||||
onChange={(e) => setField("enterpriseId", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className={LABEL_CLASS} htmlFor="rm-fte">
|
||||
FTE<InfoTooltip content="Full-Time Equivalent (0.01-1.0). A value of 0.5 means the resource works 50% of standard hours." />
|
||||
</label>
|
||||
<input
|
||||
id="rm-fte"
|
||||
type="number"
|
||||
min="0.01"
|
||||
max="1"
|
||||
step="0.01"
|
||||
className={INPUT_CLASS}
|
||||
placeholder="1.0"
|
||||
value={form.fte}
|
||||
onChange={(e) => setField("fte", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 mt-4">
|
||||
<div>
|
||||
<label className={LABEL_CLASS} htmlFor="rm-countryId">Country</label>
|
||||
<select
|
||||
id="rm-countryId"
|
||||
className={INPUT_CLASS}
|
||||
value={form.countryId}
|
||||
onChange={(e) => {
|
||||
setField("countryId", e.target.value);
|
||||
setField("metroCityId", ""); // reset city when country changes
|
||||
}}
|
||||
>
|
||||
<option value="">— Not specified —</option>
|
||||
{countryOptions.map((c) => (
|
||||
<option key={c.id} value={c.id}>{c.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className={LABEL_CLASS} htmlFor="rm-metroCityId">Metro City</label>
|
||||
<select
|
||||
id="rm-metroCityId"
|
||||
className={INPUT_CLASS}
|
||||
value={form.metroCityId}
|
||||
onChange={(e) => setField("metroCityId", e.target.value)}
|
||||
disabled={!form.countryId}
|
||||
>
|
||||
<option value="">— Not specified —</option>
|
||||
{metroCities.map((c) => (
|
||||
<option key={c.id} value={c.id}>{c.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 mt-4">
|
||||
<div>
|
||||
<label className={LABEL_CLASS} htmlFor="rm-orgUnitId">Org Unit (L7 Team)</label>
|
||||
<select
|
||||
id="rm-orgUnitId"
|
||||
className={INPUT_CLASS}
|
||||
value={form.orgUnitId}
|
||||
onChange={(e) => setField("orgUnitId", e.target.value)}
|
||||
>
|
||||
<option value="">— Not specified —</option>
|
||||
{orgUnitOptions
|
||||
.filter((u) => u.level === 7 && u.isActive)
|
||||
.map((u) => (
|
||||
<option key={u.id} value={u.id}>{u.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className={LABEL_CLASS} htmlFor="rm-clientUnitId">Client Unit</label>
|
||||
<select
|
||||
id="rm-clientUnitId"
|
||||
className={INPUT_CLASS}
|
||||
value={form.clientUnitId}
|
||||
onChange={(e) => setField("clientUnitId", e.target.value)}
|
||||
>
|
||||
<option value="">— Not specified —</option>
|
||||
{clientOptions.map((c) => (
|
||||
<option key={c.id} value={c.id}>{c.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 mt-4">
|
||||
<div>
|
||||
<label className={LABEL_CLASS} htmlFor="rm-mgmtGroupId">Management Level Group<InfoTooltip content="Seniority grouping (e.g. Associate, Manager, Director). Determines the available management levels." /></label>
|
||||
<select
|
||||
id="rm-mgmtGroupId"
|
||||
className={INPUT_CLASS}
|
||||
value={form.managementLevelGroupId}
|
||||
onChange={(e) => {
|
||||
setField("managementLevelGroupId", e.target.value);
|
||||
setField("managementLevelId", ""); // reset level when group changes
|
||||
}}
|
||||
>
|
||||
<option value="">— Not specified —</option>
|
||||
{managementGroupOptions.map((g) => (
|
||||
<option key={g.id} value={g.id}>{g.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className={LABEL_CLASS} htmlFor="rm-mgmtLevelId">Management Level<InfoTooltip content="Specific seniority level within the group. Used in chargeability reports and cost analysis." /></label>
|
||||
<select
|
||||
id="rm-mgmtLevelId"
|
||||
className={INPUT_CLASS}
|
||||
value={form.managementLevelId}
|
||||
onChange={(e) => setField("managementLevelId", e.target.value)}
|
||||
disabled={!form.managementLevelGroupId}
|
||||
>
|
||||
<option value="">— Not specified —</option>
|
||||
{mgmtLevels.map((l) => (
|
||||
<option key={l.id} value={l.id}>{l.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 gap-4 mt-4">
|
||||
<div>
|
||||
<label className={LABEL_CLASS} htmlFor="rm-resourceType">Resource Type<InfoTooltip content="Employee, contractor, or freelancer. Affects cost attribution rules." /></label>
|
||||
<select
|
||||
id="rm-resourceType"
|
||||
className={INPUT_CLASS}
|
||||
value={form.resourceType}
|
||||
onChange={(e) => setField("resourceType", e.target.value)}
|
||||
>
|
||||
{Object.values(ResourceType).map((t) => (
|
||||
<option key={t} value={t}>{t.charAt(0) + t.slice(1).toLowerCase()}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex items-end pb-2">
|
||||
<label className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={form.chgResponsibility}
|
||||
onChange={(e) => setField("chgResponsibility", e.target.checked)}
|
||||
className="rounded border-gray-300 text-brand-600 focus:ring-brand-500"
|
||||
/>
|
||||
Chg Responsibility
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-end pb-2">
|
||||
<label className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={form.rolledOff}
|
||||
onChange={(e) => setField("rolledOff", e.target.checked)}
|
||||
className="rounded border-gray-300 text-brand-600 focus:ring-brand-500"
|
||||
/>
|
||||
Rolled Off
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-end pb-2">
|
||||
<label className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={form.departed}
|
||||
onChange={(e) => setField("departed", e.target.checked)}
|
||||
className="rounded border-gray-300 text-brand-600 focus:ring-brand-500"
|
||||
/>
|
||||
Departed
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<ResourceOrgClassification
|
||||
form={form}
|
||||
onSetField={setField as (key: string, value: string | boolean) => void}
|
||||
countryOptions={countryOptions}
|
||||
orgUnitOptions={orgUnitOptions}
|
||||
clientOptions={clientOptions}
|
||||
managementGroupOptions={managementGroupOptions}
|
||||
inputClass={INPUT_CLASS}
|
||||
labelClass={LABEL_CLASS}
|
||||
sectionHeaderClass={SECTION_HEADER_CLASS}
|
||||
/>
|
||||
|
||||
{/* Section 2: Cost & Chargeability */}
|
||||
<p className={SECTION_HEADER_CLASS}>Cost & Chargeability</p>
|
||||
@@ -719,7 +521,8 @@ export function ResourceModal({ mode, resource, onClose, onSuccess }: ResourceMo
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className={LABEL_CLASS} htmlFor="rm-lcr">
|
||||
LCR €/h <span className="text-red-500">*</span><InfoTooltip content="Loaded Cost Rate in EUR per hour. E.g. 85 = 85.00 EUR/h. Stored internally as integer cents (8500)." />
|
||||
LCR €/h <span className="text-red-500">*</span>
|
||||
<InfoTooltip content="Loaded Cost Rate in EUR per hour. E.g. 85 = 85.00 EUR/h. Stored internally as integer cents (8500)." />
|
||||
</label>
|
||||
<input
|
||||
id="rm-lcr"
|
||||
@@ -735,7 +538,8 @@ export function ResourceModal({ mode, resource, onClose, onSuccess }: ResourceMo
|
||||
</div>
|
||||
<div>
|
||||
<label className={LABEL_CLASS} htmlFor="rm-ucr">
|
||||
UCR €/h <span className="text-red-500">*</span><InfoTooltip content="Unit Cost Rate in EUR per hour. The rate billed to the project or client." />
|
||||
UCR €/h <span className="text-red-500">*</span>
|
||||
<InfoTooltip content="Unit Cost Rate in EUR per hour. The rate billed to the project or client." />
|
||||
</label>
|
||||
<input
|
||||
id="rm-ucr"
|
||||
@@ -766,7 +570,8 @@ export function ResourceModal({ mode, resource, onClose, onSuccess }: ResourceMo
|
||||
</div>
|
||||
<div>
|
||||
<label className={LABEL_CLASS} htmlFor="rm-chargeability">
|
||||
Chargeability Target %<InfoTooltip content="Target % of working time on chargeable projects. E.g. 80 means 80% of hours should be billable." />
|
||||
Chargeability Target %
|
||||
<InfoTooltip content="Target % of working time on chargeable projects. E.g. 80 means 80% of hours should be billable." />
|
||||
</label>
|
||||
<input
|
||||
id="rm-chargeability"
|
||||
@@ -815,103 +620,14 @@ export function ResourceModal({ mode, resource, onClose, onSuccess }: ResourceMo
|
||||
{/* Section 4: Skills */}
|
||||
<p className={SECTION_HEADER_CLASS}>Skills</p>
|
||||
|
||||
<div className="space-y-3">
|
||||
{form.skills.map((skillRow, idx) => {
|
||||
const mainSkillCount = form.skills.filter((s) => s.isMainSkill).length;
|
||||
const canToggleMain = skillRow.isMainSkill || mainSkillCount < 2;
|
||||
return (
|
||||
<div
|
||||
key={idx}
|
||||
className={`grid gap-2 items-end border rounded-lg p-3 ${skillRow.isMainSkill ? "border-amber-200 dark:border-amber-700 bg-amber-50 dark:bg-amber-900/20" : "border-gray-100 dark:border-gray-700 bg-gray-50 dark:bg-gray-900"}`}
|
||||
>
|
||||
<div className="grid grid-cols-[1fr_1fr_auto_auto_auto] gap-2 items-end">
|
||||
<div>
|
||||
<label className={LABEL_CLASS} htmlFor={`rm-skill-name-${idx}`}>
|
||||
Skill
|
||||
</label>
|
||||
<input
|
||||
id={`rm-skill-name-${idx}`}
|
||||
type="text"
|
||||
className={INPUT_CLASS}
|
||||
placeholder="e.g. 3ds Max"
|
||||
value={skillRow.skill}
|
||||
onChange={(e) => setSkillField(idx, "skill", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className={LABEL_CLASS} htmlFor={`rm-skill-prof-${idx}`}>
|
||||
Proficiency
|
||||
</label>
|
||||
<select
|
||||
id={`rm-skill-prof-${idx}`}
|
||||
className={INPUT_CLASS}
|
||||
value={skillRow.proficiency}
|
||||
onChange={(e) =>
|
||||
setSkillField(idx, "proficiency", parseInt(e.target.value, 10) as 1 | 2 | 3 | 4 | 5)
|
||||
}
|
||||
>
|
||||
{[1, 2, 3, 4, 5].map((p) => (
|
||||
<option key={p} value={p}>
|
||||
{proficiencyLabels[p]}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className={LABEL_CLASS} htmlFor={`rm-skill-years-${idx}`}>
|
||||
Years
|
||||
</label>
|
||||
<input
|
||||
id={`rm-skill-years-${idx}`}
|
||||
type="number"
|
||||
min="0"
|
||||
max="50"
|
||||
step="1"
|
||||
className={INPUT_CLASS}
|
||||
placeholder="—"
|
||||
value={skillRow.yearsExperience}
|
||||
onChange={(e) => setSkillField(idx, "yearsExperience", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-1 pb-0.5">
|
||||
<span className="text-[10px] text-gray-500 dark:text-gray-400 leading-none">★ Main</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={skillRow.isMainSkill}
|
||||
disabled={!canToggleMain}
|
||||
title={!canToggleMain ? "Max 2 main skills" : "Mark as main skill"}
|
||||
onChange={(e) => setSkillField(idx, "isMainSkill", e.target.checked)}
|
||||
className="rounded border-gray-300 disabled:opacity-40"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-end pb-0.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeSkill(idx)}
|
||||
className="px-2 py-2 text-red-400 hover:text-red-600 transition-colors"
|
||||
aria-label={`Remove skill ${idx + 1}`}
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={addSkill}
|
||||
className="flex items-center gap-1.5 text-sm text-brand-600 hover:text-brand-800 font-medium transition-colors"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
Add skill
|
||||
</button>
|
||||
</div>
|
||||
<ResourceSkillsEditor
|
||||
skills={form.skills}
|
||||
onSetSkillField={setSkillField}
|
||||
onAddSkill={addSkill}
|
||||
onRemoveSkill={removeSkill}
|
||||
inputClass={INPUT_CLASS}
|
||||
labelClass={LABEL_CLASS}
|
||||
/>
|
||||
|
||||
{/* Section 5: Roles */}
|
||||
<p className={SECTION_HEADER_CLASS}>Roles</p>
|
||||
@@ -931,7 +647,10 @@ export function ResourceModal({ mode, resource, onClose, onSuccess }: ResourceMo
|
||||
if (e.target.checked) {
|
||||
setField("roles", [...form.roles, { roleId: role.id, isPrimary: false }]);
|
||||
} else {
|
||||
setField("roles", form.roles.filter((r) => r.roleId !== role.id));
|
||||
setField(
|
||||
"roles",
|
||||
form.roles.filter((r) => r.roleId !== role.id),
|
||||
);
|
||||
}
|
||||
}}
|
||||
className="rounded border-gray-300"
|
||||
@@ -940,7 +659,10 @@ export function ResourceModal({ mode, resource, onClose, onSuccess }: ResourceMo
|
||||
className="w-3 h-3 rounded-full flex-shrink-0"
|
||||
style={{ backgroundColor: role.color ?? "#6366f1" }}
|
||||
/>
|
||||
<label htmlFor={`role-${role.id}`} className="text-sm text-gray-700 dark:text-gray-300 cursor-pointer flex-1">
|
||||
<label
|
||||
htmlFor={`role-${role.id}`}
|
||||
className="text-sm text-gray-700 dark:text-gray-300 cursor-pointer flex-1"
|
||||
>
|
||||
{role.name}
|
||||
</label>
|
||||
{isChecked && (
|
||||
@@ -950,11 +672,14 @@ export function ResourceModal({ mode, resource, onClose, onSuccess }: ResourceMo
|
||||
name="primary-role"
|
||||
checked={assignment?.isPrimary ?? false}
|
||||
onChange={() => {
|
||||
setField("roles", form.roles.map((r) =>
|
||||
r.roleId === role.id
|
||||
? { ...r, isPrimary: true }
|
||||
: { ...r, isPrimary: false },
|
||||
));
|
||||
setField(
|
||||
"roles",
|
||||
form.roles.map((r) =>
|
||||
r.roleId === role.id
|
||||
? { ...r, isPrimary: true }
|
||||
: { ...r, isPrimary: false },
|
||||
),
|
||||
);
|
||||
}}
|
||||
className="border-gray-300"
|
||||
/>
|
||||
@@ -965,7 +690,9 @@ export function ResourceModal({ mode, resource, onClose, onSuccess }: ResourceMo
|
||||
);
|
||||
})}
|
||||
{roleOptions.length === 0 && (
|
||||
<p className="text-sm text-gray-400 italic">No roles defined yet. Create roles on the Roles page.</p>
|
||||
<p className="text-sm text-gray-400 italic">
|
||||
No roles defined yet. Create roles on the Roles page.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -980,10 +707,14 @@ export function ResourceModal({ mode, resource, onClose, onSuccess }: ResourceMo
|
||||
{/* Footer */}
|
||||
<div className="flex items-center justify-between gap-3 px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 rounded-b-xl">
|
||||
<div>
|
||||
{mode === "edit" && canManageUsers && resource && (
|
||||
confirmDelete ? (
|
||||
{mode === "edit" &&
|
||||
canManageUsers &&
|
||||
resource &&
|
||||
(confirmDelete ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-red-600 dark:text-red-400 font-medium">Permanently delete this resource?</span>
|
||||
<span className="text-xs text-red-600 dark:text-red-400 font-medium">
|
||||
Permanently delete this resource?
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void hardDeleteMutation.mutateAsync({ id: resource.id })}
|
||||
@@ -1010,8 +741,7 @@ export function ResourceModal({ mode, resource, onClose, onSuccess }: ResourceMo
|
||||
>
|
||||
Delete Resource
|
||||
</button>
|
||||
)
|
||||
)}
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
|
||||
@@ -0,0 +1,325 @@
|
||||
import { GERMAN_FEDERAL_STATES, inferStateFromPostalCode, ResourceType } from "@capakraken/shared";
|
||||
import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
|
||||
|
||||
type CountryOption = { id: string; name: string; metroCities: { id: string; name: string }[] };
|
||||
type OrgUnitOption = { id: string; name: string; level: number; isActive: boolean };
|
||||
type ClientOption = { id: string; name: string };
|
||||
type ManagementGroupOption = { id: string; name: string; levels: { id: string; name: string }[] };
|
||||
|
||||
interface ResourceOrgClassificationProps {
|
||||
form: {
|
||||
postalCode: string;
|
||||
federalState: string;
|
||||
countryId: string;
|
||||
metroCityId: string;
|
||||
orgUnitId: string;
|
||||
clientUnitId: string;
|
||||
managementLevelGroupId: string;
|
||||
managementLevelId: string;
|
||||
resourceType: string;
|
||||
chgResponsibility: boolean;
|
||||
rolledOff: boolean;
|
||||
departed: boolean;
|
||||
enterpriseId: string;
|
||||
fte: string;
|
||||
};
|
||||
onSetField: (key: string, value: string | boolean) => void;
|
||||
countryOptions: CountryOption[];
|
||||
orgUnitOptions: OrgUnitOption[];
|
||||
clientOptions: ClientOption[];
|
||||
managementGroupOptions: ManagementGroupOption[];
|
||||
inputClass: string;
|
||||
labelClass: string;
|
||||
sectionHeaderClass: string;
|
||||
}
|
||||
|
||||
export function ResourceOrgClassification({
|
||||
form,
|
||||
onSetField,
|
||||
countryOptions,
|
||||
orgUnitOptions,
|
||||
clientOptions,
|
||||
managementGroupOptions,
|
||||
inputClass,
|
||||
labelClass,
|
||||
sectionHeaderClass,
|
||||
}: ResourceOrgClassificationProps) {
|
||||
const selectedCountry = countryOptions.find((c) => c.id === form.countryId);
|
||||
const metroCities = selectedCountry?.metroCities ?? [];
|
||||
const selectedGroup = managementGroupOptions.find((g) => g.id === form.managementLevelGroupId);
|
||||
const mgmtLevels = selectedGroup?.levels ?? [];
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Postal Code & Federal State */}
|
||||
<div className="grid grid-cols-2 gap-4 mt-4">
|
||||
<div>
|
||||
<label className={labelClass} htmlFor="rm-postalCode">
|
||||
Postal Code (PLZ){" "}
|
||||
<span className="text-gray-400 dark:text-gray-500 font-normal">(optional)</span>
|
||||
<InfoTooltip content="German postal code. Used to auto-derive the federal state for public holiday calculations." />
|
||||
</label>
|
||||
<input
|
||||
id="rm-postalCode"
|
||||
type="text"
|
||||
className={inputClass}
|
||||
placeholder="80331"
|
||||
maxLength={5}
|
||||
value={form.postalCode}
|
||||
onChange={(e) => {
|
||||
const plz = e.target.value;
|
||||
onSetField("postalCode", plz);
|
||||
if (/^\d{5}$/.test(plz)) {
|
||||
const inferred = inferStateFromPostalCode(plz);
|
||||
if (inferred && !form.federalState) {
|
||||
onSetField("federalState", inferred);
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass} htmlFor="rm-federalState">
|
||||
Federal State{" "}
|
||||
<span className="text-gray-400 dark:text-gray-500 font-normal">(optional)</span>
|
||||
<InfoTooltip content="Determines which public holidays apply (e.g. Bavaria has extra holidays). Auto-derived from postal code." />
|
||||
</label>
|
||||
<select
|
||||
id="rm-federalState"
|
||||
className={inputClass}
|
||||
value={form.federalState}
|
||||
onChange={(e) => onSetField("federalState", e.target.value)}
|
||||
>
|
||||
<option value="">— Not specified —</option>
|
||||
{Object.entries(GERMAN_FEDERAL_STATES).map(([abbr, name]) => (
|
||||
<option key={abbr} value={abbr}>
|
||||
{name} ({abbr})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Section: Organization & Classification */}
|
||||
<p className={sectionHeaderClass}>Organization & Classification</p>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className={labelClass} htmlFor="rm-enterpriseId">
|
||||
Enterprise ID{" "}
|
||||
<span className="text-gray-400 dark:text-gray-500 font-normal">(optional)</span>
|
||||
<InfoTooltip content="Corporate directory ID for cross-system integration (e.g. a.kasperovich)." />
|
||||
</label>
|
||||
<input
|
||||
id="rm-enterpriseId"
|
||||
type="text"
|
||||
className={inputClass}
|
||||
placeholder="a.kasperovich"
|
||||
value={form.enterpriseId}
|
||||
onChange={(e) => onSetField("enterpriseId", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass} htmlFor="rm-fte">
|
||||
FTE
|
||||
<InfoTooltip content="Full-Time Equivalent (0.01-1.0). A value of 0.5 means the resource works 50% of standard hours." />
|
||||
</label>
|
||||
<input
|
||||
id="rm-fte"
|
||||
type="number"
|
||||
min="0.01"
|
||||
max="1"
|
||||
step="0.01"
|
||||
className={inputClass}
|
||||
placeholder="1.0"
|
||||
value={form.fte}
|
||||
onChange={(e) => onSetField("fte", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 mt-4">
|
||||
<div>
|
||||
<label className={labelClass} htmlFor="rm-countryId">
|
||||
Country
|
||||
</label>
|
||||
<select
|
||||
id="rm-countryId"
|
||||
className={inputClass}
|
||||
value={form.countryId}
|
||||
onChange={(e) => {
|
||||
onSetField("countryId", e.target.value);
|
||||
onSetField("metroCityId", "");
|
||||
}}
|
||||
>
|
||||
<option value="">— Not specified —</option>
|
||||
{countryOptions.map((c) => (
|
||||
<option key={c.id} value={c.id}>
|
||||
{c.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass} htmlFor="rm-metroCityId">
|
||||
Metro City
|
||||
</label>
|
||||
<select
|
||||
id="rm-metroCityId"
|
||||
className={inputClass}
|
||||
value={form.metroCityId}
|
||||
onChange={(e) => onSetField("metroCityId", e.target.value)}
|
||||
disabled={!form.countryId}
|
||||
>
|
||||
<option value="">— Not specified —</option>
|
||||
{metroCities.map((c) => (
|
||||
<option key={c.id} value={c.id}>
|
||||
{c.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 mt-4">
|
||||
<div>
|
||||
<label className={labelClass} htmlFor="rm-orgUnitId">
|
||||
Org Unit (L7 Team)
|
||||
</label>
|
||||
<select
|
||||
id="rm-orgUnitId"
|
||||
className={inputClass}
|
||||
value={form.orgUnitId}
|
||||
onChange={(e) => onSetField("orgUnitId", e.target.value)}
|
||||
>
|
||||
<option value="">— Not specified —</option>
|
||||
{orgUnitOptions
|
||||
.filter((u) => u.level === 7 && u.isActive)
|
||||
.map((u) => (
|
||||
<option key={u.id} value={u.id}>
|
||||
{u.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass} htmlFor="rm-clientUnitId">
|
||||
Client Unit
|
||||
</label>
|
||||
<select
|
||||
id="rm-clientUnitId"
|
||||
className={inputClass}
|
||||
value={form.clientUnitId}
|
||||
onChange={(e) => onSetField("clientUnitId", e.target.value)}
|
||||
>
|
||||
<option value="">— Not specified —</option>
|
||||
{clientOptions.map((c) => (
|
||||
<option key={c.id} value={c.id}>
|
||||
{c.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 mt-4">
|
||||
<div>
|
||||
<label className={labelClass} htmlFor="rm-mgmtGroupId">
|
||||
Management Level Group
|
||||
<InfoTooltip content="Seniority grouping (e.g. Associate, Manager, Director). Determines the available management levels." />
|
||||
</label>
|
||||
<select
|
||||
id="rm-mgmtGroupId"
|
||||
className={inputClass}
|
||||
value={form.managementLevelGroupId}
|
||||
onChange={(e) => {
|
||||
onSetField("managementLevelGroupId", e.target.value);
|
||||
onSetField("managementLevelId", "");
|
||||
}}
|
||||
>
|
||||
<option value="">— Not specified —</option>
|
||||
{managementGroupOptions.map((g) => (
|
||||
<option key={g.id} value={g.id}>
|
||||
{g.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass} htmlFor="rm-mgmtLevelId">
|
||||
Management Level
|
||||
<InfoTooltip content="Specific seniority level within the group. Used in chargeability reports and cost analysis." />
|
||||
</label>
|
||||
<select
|
||||
id="rm-mgmtLevelId"
|
||||
className={inputClass}
|
||||
value={form.managementLevelId}
|
||||
onChange={(e) => onSetField("managementLevelId", e.target.value)}
|
||||
disabled={!form.managementLevelGroupId}
|
||||
>
|
||||
<option value="">— Not specified —</option>
|
||||
{mgmtLevels.map((l) => (
|
||||
<option key={l.id} value={l.id}>
|
||||
{l.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 gap-4 mt-4">
|
||||
<div>
|
||||
<label className={labelClass} htmlFor="rm-resourceType">
|
||||
Resource Type
|
||||
<InfoTooltip content="Employee, contractor, or freelancer. Affects cost attribution rules." />
|
||||
</label>
|
||||
<select
|
||||
id="rm-resourceType"
|
||||
className={inputClass}
|
||||
value={form.resourceType}
|
||||
onChange={(e) => onSetField("resourceType", e.target.value)}
|
||||
>
|
||||
{Object.values(ResourceType).map((t) => (
|
||||
<option key={t} value={t}>
|
||||
{t.charAt(0) + t.slice(1).toLowerCase()}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex items-end pb-2">
|
||||
<label className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={form.chgResponsibility}
|
||||
onChange={(e) => onSetField("chgResponsibility", e.target.checked)}
|
||||
className="rounded border-gray-300 text-brand-600 focus:ring-brand-500"
|
||||
/>
|
||||
Chg Responsibility
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-end pb-2">
|
||||
<label className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={form.rolledOff}
|
||||
onChange={(e) => onSetField("rolledOff", e.target.checked)}
|
||||
className="rounded border-gray-300 text-brand-600 focus:ring-brand-500"
|
||||
/>
|
||||
Rolled Off
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-end pb-2">
|
||||
<label className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={form.departed}
|
||||
onChange={(e) => onSetField("departed", e.target.checked)}
|
||||
className="rounded border-gray-300 text-brand-600 focus:ring-brand-500"
|
||||
/>
|
||||
Departed
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
interface SkillRow {
|
||||
skill: string;
|
||||
proficiency: 1 | 2 | 3 | 4 | 5;
|
||||
yearsExperience: string;
|
||||
category: string;
|
||||
certified: boolean;
|
||||
isMainSkill: boolean;
|
||||
}
|
||||
|
||||
const proficiencyLabels: Record<number, string> = {
|
||||
1: "1 \u2013 Beginner",
|
||||
2: "2 \u2013 Elementary",
|
||||
3: "3 \u2013 Intermediate",
|
||||
4: "4 \u2013 Advanced",
|
||||
5: "5 \u2013 Expert",
|
||||
};
|
||||
|
||||
interface ResourceSkillsEditorProps {
|
||||
skills: SkillRow[];
|
||||
onSetSkillField: (index: number, key: keyof SkillRow, value: string | number | boolean) => void;
|
||||
onAddSkill: () => void;
|
||||
onRemoveSkill: (index: number) => void;
|
||||
inputClass: string;
|
||||
labelClass: string;
|
||||
}
|
||||
|
||||
export function ResourceSkillsEditor({
|
||||
skills,
|
||||
onSetSkillField,
|
||||
onAddSkill,
|
||||
onRemoveSkill,
|
||||
inputClass,
|
||||
labelClass,
|
||||
}: ResourceSkillsEditorProps) {
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{skills.map((skillRow, idx) => {
|
||||
const mainSkillCount = skills.filter((s) => s.isMainSkill).length;
|
||||
const canToggleMain = skillRow.isMainSkill || mainSkillCount < 2;
|
||||
return (
|
||||
<div
|
||||
key={idx}
|
||||
className={`grid gap-2 items-end border rounded-lg p-3 ${skillRow.isMainSkill ? "border-amber-200 dark:border-amber-700 bg-amber-50 dark:bg-amber-900/20" : "border-gray-100 dark:border-gray-700 bg-gray-50 dark:bg-gray-900"}`}
|
||||
>
|
||||
<div className="grid grid-cols-[1fr_1fr_auto_auto_auto] gap-2 items-end">
|
||||
<div>
|
||||
<label className={labelClass} htmlFor={`rm-skill-name-${idx}`}>
|
||||
Skill
|
||||
</label>
|
||||
<input
|
||||
id={`rm-skill-name-${idx}`}
|
||||
type="text"
|
||||
className={inputClass}
|
||||
placeholder="e.g. 3ds Max"
|
||||
value={skillRow.skill}
|
||||
onChange={(e) => onSetSkillField(idx, "skill", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass} htmlFor={`rm-skill-prof-${idx}`}>
|
||||
Proficiency
|
||||
</label>
|
||||
<select
|
||||
id={`rm-skill-prof-${idx}`}
|
||||
className={inputClass}
|
||||
value={skillRow.proficiency}
|
||||
onChange={(e) =>
|
||||
onSetSkillField(
|
||||
idx,
|
||||
"proficiency",
|
||||
parseInt(e.target.value, 10) as 1 | 2 | 3 | 4 | 5,
|
||||
)
|
||||
}
|
||||
>
|
||||
{[1, 2, 3, 4, 5].map((p) => (
|
||||
<option key={p} value={p}>
|
||||
{proficiencyLabels[p]}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass} htmlFor={`rm-skill-years-${idx}`}>
|
||||
Years
|
||||
</label>
|
||||
<input
|
||||
id={`rm-skill-years-${idx}`}
|
||||
type="number"
|
||||
min="0"
|
||||
max="50"
|
||||
step="1"
|
||||
className={inputClass}
|
||||
placeholder="\u2014"
|
||||
value={skillRow.yearsExperience}
|
||||
onChange={(e) => onSetSkillField(idx, "yearsExperience", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-1 pb-0.5">
|
||||
<span className="text-[10px] text-gray-500 dark:text-gray-400 leading-none">
|
||||
\u2605 Main
|
||||
</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={skillRow.isMainSkill}
|
||||
disabled={!canToggleMain}
|
||||
title={!canToggleMain ? "Max 2 main skills" : "Mark as main skill"}
|
||||
onChange={(e) => onSetSkillField(idx, "isMainSkill", e.target.checked)}
|
||||
className="rounded border-gray-300 disabled:opacity-40"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-end pb-0.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onRemoveSkill(idx)}
|
||||
className="px-2 py-2 text-red-400 hover:text-red-600 transition-colors"
|
||||
aria-label={`Remove skill ${idx + 1}`}
|
||||
>
|
||||
<svg
|
||||
className="w-4 h-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={onAddSkill}
|
||||
className="flex items-center gap-1.5 text-sm text-brand-600 hover:text-brand-800 font-medium transition-colors"
|
||||
>
|
||||
<svg
|
||||
className="w-4 h-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
Add skill
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,147 @@
|
||||
import { MILLISECONDS_PER_DAY } from "@capakraken/shared";
|
||||
import type { useTimelineDrag } from "~/hooks/useTimelineDrag.js";
|
||||
import { formatDateShort } from "~/lib/format.js";
|
||||
import { ShiftPreviewTooltip } from "./ShiftPreviewTooltip.js";
|
||||
|
||||
interface TimelineDragOverlaysProps {
|
||||
dragState: ReturnType<typeof useTimelineDrag>["dragState"];
|
||||
allocDragState: ReturnType<typeof useTimelineDrag>["allocDragState"];
|
||||
rangeState: ReturnType<typeof useTimelineDrag>["rangeState"];
|
||||
multiSelectState: ReturnType<typeof useTimelineDrag>["multiSelectState"];
|
||||
shiftPreview: ReturnType<typeof useTimelineDrag>["shiftPreview"];
|
||||
isPreviewLoading: boolean;
|
||||
isApplying: boolean;
|
||||
isAllocSaving: boolean;
|
||||
mousePosRef: React.RefObject<{ x: number; y: number }>;
|
||||
dragTooltipRef: React.RefObject<HTMLDivElement | null>;
|
||||
allocTooltipRef: React.RefObject<HTMLDivElement | null>;
|
||||
rangeHintRef: React.RefObject<HTMLDivElement | null>;
|
||||
multiDragTooltipRef: React.RefObject<HTMLDivElement | null>;
|
||||
today: Date;
|
||||
}
|
||||
|
||||
export function TimelineDragOverlays({
|
||||
dragState,
|
||||
allocDragState,
|
||||
rangeState,
|
||||
multiSelectState,
|
||||
shiftPreview,
|
||||
isPreviewLoading,
|
||||
isApplying,
|
||||
isAllocSaving,
|
||||
mousePosRef,
|
||||
dragTooltipRef,
|
||||
allocTooltipRef,
|
||||
rangeHintRef,
|
||||
multiDragTooltipRef,
|
||||
today,
|
||||
}: TimelineDragOverlaysProps) {
|
||||
return (
|
||||
<>
|
||||
{/* Multi-select rectangle overlay */}
|
||||
{multiSelectState.isSelecting && (
|
||||
<div
|
||||
className="fixed border-2 border-sky-500 bg-sky-500/10 pointer-events-none z-30 rounded"
|
||||
style={{
|
||||
left: Math.min(multiSelectState.startX, multiSelectState.currentX),
|
||||
top: Math.min(multiSelectState.startY, multiSelectState.currentY),
|
||||
width: Math.abs(multiSelectState.currentX - multiSelectState.startX),
|
||||
height: Math.abs(multiSelectState.currentY - multiSelectState.startY),
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Saving indicators */}
|
||||
{(isApplying || isAllocSaving) && (
|
||||
<div className="pointer-events-none absolute inset-0 z-50 flex items-center justify-center rounded-2xl bg-white/50 dark:bg-gray-950/50">
|
||||
<div className="app-surface px-5 py-3 text-sm font-medium text-gray-700 dark:text-gray-200">
|
||||
{isApplying ? "Applying shift…" : "Saving…"}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Drag preview tooltip */}
|
||||
{dragState.isDragging && dragState.daysDelta !== 0 && (
|
||||
<div
|
||||
ref={dragTooltipRef}
|
||||
className="fixed z-50 pointer-events-none"
|
||||
style={{ left: mousePosRef.current.x + 12, top: mousePosRef.current.y - 8 }}
|
||||
>
|
||||
<ShiftPreviewTooltip
|
||||
preview={
|
||||
shiftPreview ?? {
|
||||
valid: true,
|
||||
deltaCents: 0,
|
||||
wouldExceedBudget: false,
|
||||
budgetUtilizationAfter: 0,
|
||||
conflictCount: 0,
|
||||
errors: [],
|
||||
warnings: [],
|
||||
}
|
||||
}
|
||||
projectName={dragState.projectName ?? ""}
|
||||
newStartDate={dragState.currentStartDate ?? today}
|
||||
newEndDate={dragState.currentEndDate ?? today}
|
||||
isLoading={isPreviewLoading}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Alloc drag tooltip */}
|
||||
{allocDragState.isActive &&
|
||||
allocDragState.daysDelta !== 0 &&
|
||||
allocDragState.currentStartDate &&
|
||||
allocDragState.currentEndDate && (
|
||||
<div
|
||||
ref={allocTooltipRef}
|
||||
className="fixed z-40 bg-gray-800 text-white text-xs px-2.5 py-1.5 rounded-lg pointer-events-none shadow-lg space-y-0.5"
|
||||
style={{ left: mousePosRef.current.x + 14, top: mousePosRef.current.y - 36 }}
|
||||
>
|
||||
<div className="font-semibold">{allocDragState.projectName}</div>
|
||||
<div className="opacity-80">
|
||||
{formatDateShort(allocDragState.currentStartDate)}
|
||||
{" – "}
|
||||
{formatDateShort(allocDragState.currentEndDate)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Range-select hint */}
|
||||
{rangeState.isSelecting && rangeState.startDate && rangeState.currentDate && (
|
||||
<div
|
||||
ref={rangeHintRef}
|
||||
className="fixed z-40 bg-brand-700 text-white text-xs px-2 py-1 rounded-lg pointer-events-none shadow"
|
||||
style={{ left: mousePosRef.current.x + 12, top: mousePosRef.current.y - 28 }}
|
||||
>
|
||||
{(() => {
|
||||
const end = rangeState.currentDate;
|
||||
const [s, e] =
|
||||
rangeState.startDate <= end
|
||||
? [rangeState.startDate, end]
|
||||
: [end, rangeState.startDate];
|
||||
const days = Math.round((e.getTime() - s.getTime()) / MILLISECONDS_PER_DAY) + 1;
|
||||
return `${days} day${days !== 1 ? "s" : ""}`;
|
||||
})()}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Multi-drag tooltip */}
|
||||
{multiSelectState.isMultiDragging && multiSelectState.multiDragDaysDelta !== 0 && (
|
||||
<div
|
||||
ref={multiDragTooltipRef}
|
||||
className="fixed z-50 bg-sky-700 text-white text-xs px-2.5 py-1.5 rounded-lg pointer-events-none shadow-lg font-medium"
|
||||
style={{ left: mousePosRef.current.x + 14, top: mousePosRef.current.y - 36 }}
|
||||
>
|
||||
{multiSelectState.multiDragMode === "resize-start"
|
||||
? "Start "
|
||||
: multiSelectState.multiDragMode === "resize-end"
|
||||
? "End "
|
||||
: ""}
|
||||
{multiSelectState.multiDragDaysDelta > 0 ? "+" : ""}
|
||||
{multiSelectState.multiDragDaysDelta}d ({multiSelectState.selectedAllocationIds.length}{" "}
|
||||
allocations)
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,262 @@
|
||||
import { FillOpenDemandModal } from "~/components/allocations/FillOpenDemandModal.js";
|
||||
import { AllocationPopover } from "./AllocationPopover.js";
|
||||
import { BatchAssignPopover } from "./BatchAssignPopover.js";
|
||||
import { DemandPopover } from "./DemandPopover.js";
|
||||
import { InlineAllocationEditor } from "./InlineAllocationEditor.js";
|
||||
import { KeyboardShortcutOverlay } from "./KeyboardShortcutOverlay.js";
|
||||
import { NewAllocationPopover } from "./NewAllocationPopover.js";
|
||||
import { ProjectPanel } from "./ProjectPanel.js";
|
||||
import { ResourceHoverCard } from "./ResourceHoverCard.js";
|
||||
import type { TimelineDemandEntry, TimelineAssignmentEntry } from "./TimelineContext.js";
|
||||
import type { OpenDemandAssignment } from "./TimelineProjectPanel.js";
|
||||
import type { useTimelineDrag } from "~/hooks/useTimelineDrag.js";
|
||||
|
||||
interface TimelinePopoversProps {
|
||||
isSelfServiceTimeline: boolean;
|
||||
hasActivePointerOverlay: boolean;
|
||||
popover: {
|
||||
allocationId: string;
|
||||
projectId: string;
|
||||
allocation?: TimelineAssignmentEntry | null;
|
||||
x: number;
|
||||
y: number;
|
||||
contextDate?: Date;
|
||||
} | null;
|
||||
setPopover: React.Dispatch<React.SetStateAction<TimelinePopoversProps["popover"]>>;
|
||||
demandPopover: { demand: TimelineDemandEntry; x: number; y: number } | null;
|
||||
setDemandPopover: React.Dispatch<React.SetStateAction<TimelinePopoversProps["demandPopover"]>>;
|
||||
newAllocPopover: {
|
||||
resourceId: string;
|
||||
startDate: Date;
|
||||
endDate: Date;
|
||||
suggestedProjectId: string | null;
|
||||
anchorX: number;
|
||||
anchorY: number;
|
||||
selectionResourceId: string;
|
||||
selectionStart: Date;
|
||||
selectionEnd: Date;
|
||||
} | null;
|
||||
setNewAllocPopover: React.Dispatch<
|
||||
React.SetStateAction<TimelinePopoversProps["newAllocPopover"]>
|
||||
>;
|
||||
enrichedSuggestedProjectId: string | null;
|
||||
openPanelProjectId: string | null;
|
||||
setOpenPanelProjectId: React.Dispatch<React.SetStateAction<string | null>>;
|
||||
openDemandToAssign: OpenDemandAssignment | null;
|
||||
setOpenDemandToAssign: React.Dispatch<React.SetStateAction<OpenDemandAssignment | null>>;
|
||||
openDemandsByProject: Map<string, TimelineDemandEntry[]>;
|
||||
scrollContainerRef: React.RefObject<HTMLDivElement | null>;
|
||||
multiSelectState: ReturnType<typeof useTimelineDrag>["multiSelectState"];
|
||||
clearMultiSelect: ReturnType<typeof useTimelineDrag>["clearMultiSelect"];
|
||||
handleBatchDelete: () => void;
|
||||
handleShowBatchAssign: () => void;
|
||||
isDeleting: boolean;
|
||||
showBatchAssign: boolean;
|
||||
setShowBatchAssign: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
resourceHover: { resourceId: string; anchorEl: HTMLElement } | null;
|
||||
setResourceHover: React.Dispatch<React.SetStateAction<TimelinePopoversProps["resourceHover"]>>;
|
||||
inlineEditTarget: {
|
||||
allocationId: string;
|
||||
startDate: Date;
|
||||
endDate: Date;
|
||||
hoursPerDay: number;
|
||||
barRect: DOMRect;
|
||||
} | null;
|
||||
setInlineEditTarget: React.Dispatch<
|
||||
React.SetStateAction<TimelinePopoversProps["inlineEditTarget"]>
|
||||
>;
|
||||
showShortcuts: boolean;
|
||||
setShowShortcuts: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
}
|
||||
|
||||
function buildDemandAssignment(d: TimelineDemandEntry): OpenDemandAssignment {
|
||||
return {
|
||||
id: d.id,
|
||||
projectId: d.projectId,
|
||||
roleId: d.roleId,
|
||||
role: d.role,
|
||||
headcount: d.requestedHeadcount,
|
||||
startDate: new Date(d.startDate),
|
||||
endDate: new Date(d.endDate),
|
||||
hoursPerDay: d.hoursPerDay,
|
||||
...(d.roleEntity !== undefined ? { roleEntity: d.roleEntity } : {}),
|
||||
...(d.project !== undefined ? { project: d.project } : {}),
|
||||
};
|
||||
}
|
||||
|
||||
export function TimelinePopovers({
|
||||
isSelfServiceTimeline,
|
||||
hasActivePointerOverlay,
|
||||
popover,
|
||||
setPopover,
|
||||
demandPopover,
|
||||
setDemandPopover,
|
||||
newAllocPopover,
|
||||
setNewAllocPopover,
|
||||
enrichedSuggestedProjectId,
|
||||
openPanelProjectId,
|
||||
setOpenPanelProjectId,
|
||||
openDemandToAssign,
|
||||
setOpenDemandToAssign,
|
||||
openDemandsByProject,
|
||||
scrollContainerRef,
|
||||
multiSelectState,
|
||||
clearMultiSelect,
|
||||
handleBatchDelete,
|
||||
handleShowBatchAssign,
|
||||
isDeleting,
|
||||
showBatchAssign,
|
||||
setShowBatchAssign,
|
||||
resourceHover,
|
||||
setResourceHover,
|
||||
inlineEditTarget,
|
||||
setInlineEditTarget,
|
||||
showShortcuts,
|
||||
setShowShortcuts,
|
||||
}: TimelinePopoversProps) {
|
||||
return (
|
||||
<>
|
||||
{/* Allocation / Demand popover (click path) */}
|
||||
{!isSelfServiceTimeline &&
|
||||
!hasActivePointerOverlay &&
|
||||
popover &&
|
||||
(() => {
|
||||
const clickedDemand = openDemandsByProject
|
||||
.get(popover.projectId)
|
||||
?.find((d) => d.id === popover.allocationId);
|
||||
if (clickedDemand) {
|
||||
return (
|
||||
<DemandPopover
|
||||
demand={clickedDemand}
|
||||
onClose={() => setPopover(null)}
|
||||
onOpenPanel={(pid) => {
|
||||
setPopover(null);
|
||||
setOpenPanelProjectId(pid);
|
||||
}}
|
||||
onFillDemand={(d) => {
|
||||
setPopover(null);
|
||||
setOpenDemandToAssign(buildDemandAssignment(d));
|
||||
}}
|
||||
anchorX={popover.x}
|
||||
anchorY={popover.y}
|
||||
ignoreScrollContainers={[scrollContainerRef]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<AllocationPopover
|
||||
allocationId={popover.allocationId}
|
||||
projectId={popover.projectId}
|
||||
initialAllocation={popover.allocation ?? null}
|
||||
onClose={() => setPopover(null)}
|
||||
onOpenPanel={(pid) => {
|
||||
setPopover(null);
|
||||
setOpenPanelProjectId(pid);
|
||||
}}
|
||||
anchorX={popover.x}
|
||||
anchorY={popover.y}
|
||||
ignoreScrollContainers={[scrollContainerRef]}
|
||||
{...(popover.contextDate ? { contextDate: popover.contextDate } : {})}
|
||||
/>
|
||||
);
|
||||
})()}
|
||||
|
||||
{/* Demand popover (context menu path) */}
|
||||
{!isSelfServiceTimeline && !hasActivePointerOverlay && demandPopover && (
|
||||
<DemandPopover
|
||||
demand={demandPopover.demand}
|
||||
onClose={() => setDemandPopover(null)}
|
||||
onOpenPanel={(pid) => {
|
||||
setDemandPopover(null);
|
||||
setOpenPanelProjectId(pid);
|
||||
}}
|
||||
onFillDemand={(d) => {
|
||||
setDemandPopover(null);
|
||||
setOpenDemandToAssign(buildDemandAssignment(d));
|
||||
}}
|
||||
anchorX={demandPopover.x}
|
||||
anchorY={demandPopover.y}
|
||||
ignoreScrollContainers={[scrollContainerRef]}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* New allocation popover */}
|
||||
{!isSelfServiceTimeline && newAllocPopover && (
|
||||
<NewAllocationPopover
|
||||
resourceId={newAllocPopover.resourceId}
|
||||
startDate={newAllocPopover.startDate}
|
||||
endDate={newAllocPopover.endDate}
|
||||
suggestedProjectId={enrichedSuggestedProjectId}
|
||||
anchorX={newAllocPopover.anchorX}
|
||||
anchorY={newAllocPopover.anchorY}
|
||||
onClose={() => setNewAllocPopover(null)}
|
||||
onCreated={() => setNewAllocPopover(null)}
|
||||
ignoreScrollContainers={[scrollContainerRef]}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Project side panel */}
|
||||
{!isSelfServiceTimeline && openPanelProjectId && (
|
||||
<ProjectPanel projectId={openPanelProjectId} onClose={() => setOpenPanelProjectId(null)} />
|
||||
)}
|
||||
|
||||
{/* Open-demand assignment modal */}
|
||||
{!isSelfServiceTimeline && openDemandToAssign && (
|
||||
<FillOpenDemandModal
|
||||
allocation={openDemandToAssign}
|
||||
onClose={() => setOpenDemandToAssign(null)}
|
||||
onSuccess={() => setOpenDemandToAssign(null)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Multi-select floating action bar + batch assign */}
|
||||
{showBatchAssign && multiSelectState.dateRange && (
|
||||
<BatchAssignPopover
|
||||
resourceIds={multiSelectState.selectedResourceIds}
|
||||
startDate={multiSelectState.dateRange.start}
|
||||
endDate={multiSelectState.dateRange.end}
|
||||
onClose={() => setShowBatchAssign(false)}
|
||||
onCreated={() => {
|
||||
setShowBatchAssign(false);
|
||||
clearMultiSelect();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Resource hover card */}
|
||||
{!hasActivePointerOverlay && resourceHover && (
|
||||
<ResourceHoverCard
|
||||
resourceId={resourceHover.resourceId}
|
||||
anchorEl={resourceHover.anchorEl}
|
||||
onClose={() => setResourceHover(null)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Inline allocation editor */}
|
||||
{inlineEditTarget && (
|
||||
<InlineAllocationEditor
|
||||
allocationId={inlineEditTarget.allocationId}
|
||||
initialStartDate={inlineEditTarget.startDate}
|
||||
initialEndDate={inlineEditTarget.endDate}
|
||||
initialHoursPerDay={inlineEditTarget.hoursPerDay}
|
||||
barRect={inlineEditTarget.barRect}
|
||||
onClose={() => setInlineEditTarget(null)}
|
||||
onSaved={() => setInlineEditTarget(null)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Keyboard shortcut overlay */}
|
||||
{showShortcuts && <KeyboardShortcutOverlay onClose={() => setShowShortcuts(false)} />}
|
||||
|
||||
{/* Keyboard shortcut hint button */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowShortcuts((prev) => !prev)}
|
||||
title="Keyboard shortcuts (?)"
|
||||
className="fixed bottom-6 right-6 z-40 rounded-full w-8 h-8 flex items-center justify-center bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 text-sm font-medium"
|
||||
>
|
||||
?
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,6 +1,5 @@
|
||||
"use client";
|
||||
|
||||
import { MILLISECONDS_PER_DAY } from "@capakraken/shared";
|
||||
import { clsx } from "clsx";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
@@ -11,21 +10,14 @@ import { useTimelineLayout } from "~/hooks/useTimelineLayout.js";
|
||||
import { trpc } from "~/lib/trpc/client.js";
|
||||
import { useInvalidatePlanningViews } from "~/hooks/useInvalidatePlanningViews.js";
|
||||
import { getPlanningEntryMutationId } from "~/lib/planningEntryIds.js";
|
||||
import { FillOpenDemandModal } from "~/components/allocations/FillOpenDemandModal.js";
|
||||
import { AllocationPopover } from "./AllocationPopover.js";
|
||||
import { DemandPopover } from "./DemandPopover.js";
|
||||
import { ResourceHoverCard } from "./ResourceHoverCard.js";
|
||||
import type { TimelineDemandEntry } from "./TimelineContext.js";
|
||||
import { BatchAssignPopover } from "./BatchAssignPopover.js";
|
||||
import { FloatingActionBar } from "./FloatingActionBar.js";
|
||||
import { NewAllocationPopover } from "./NewAllocationPopover.js";
|
||||
import { ProjectPanel } from "./ProjectPanel.js";
|
||||
import { ShiftPreviewTooltip } from "./ShiftPreviewTooltip.js";
|
||||
import { TimelineDragOverlays } from "./TimelineDragOverlays.js";
|
||||
import { TimelineHeader } from "./TimelineHeader.js";
|
||||
import { TimelinePopovers } from "./TimelinePopovers.js";
|
||||
import { TimelineToolbar } from "./TimelineToolbar.js";
|
||||
import { addDays } from "./utils.js";
|
||||
import { HEADER_DAY_HEIGHT, HEADER_MONTH_HEIGHT, LABEL_WIDTH } from "./timelineConstants.js";
|
||||
import { formatDateShort } from "~/lib/format.js";
|
||||
import {
|
||||
TimelineProvider,
|
||||
useTimelineData,
|
||||
@@ -984,228 +976,23 @@ function TimelineViewContent({
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Multi-select rectangle overlay */}
|
||||
{multiSelectState.isSelecting && (
|
||||
<div
|
||||
className="fixed border-2 border-sky-500 bg-sky-500/10 pointer-events-none z-30 rounded"
|
||||
style={{
|
||||
left: Math.min(multiSelectState.startX, multiSelectState.currentX),
|
||||
top: Math.min(multiSelectState.startY, multiSelectState.currentY),
|
||||
width: Math.abs(multiSelectState.currentX - multiSelectState.startX),
|
||||
height: Math.abs(multiSelectState.currentY - multiSelectState.startY),
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<TimelineDragOverlays
|
||||
dragState={dragState}
|
||||
allocDragState={allocDragState}
|
||||
rangeState={rangeState}
|
||||
multiSelectState={multiSelectState}
|
||||
shiftPreview={shiftPreview}
|
||||
isPreviewLoading={isPreviewLoading}
|
||||
isApplying={isApplying}
|
||||
isAllocSaving={isAllocSaving}
|
||||
mousePosRef={mousePosRef}
|
||||
dragTooltipRef={dragTooltipRef}
|
||||
allocTooltipRef={allocTooltipRef}
|
||||
rangeHintRef={rangeHintRef}
|
||||
multiDragTooltipRef={multiDragTooltipRef}
|
||||
today={today}
|
||||
/>
|
||||
|
||||
{/* Saving indicators */}
|
||||
{(isApplying || isAllocSaving) && (
|
||||
<div className="pointer-events-none absolute inset-0 z-50 flex items-center justify-center rounded-2xl bg-white/50 dark:bg-gray-950/50">
|
||||
<div className="app-surface px-5 py-3 text-sm font-medium text-gray-700 dark:text-gray-200">
|
||||
{isApplying ? "Applying shift…" : "Saving…"}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Drag preview tooltip */}
|
||||
{dragState.isDragging && dragState.daysDelta !== 0 && (
|
||||
<div
|
||||
ref={dragTooltipRef}
|
||||
className="fixed z-50 pointer-events-none"
|
||||
style={{ left: mousePosRef.current.x + 12, top: mousePosRef.current.y - 8 }}
|
||||
>
|
||||
<ShiftPreviewTooltip
|
||||
preview={
|
||||
shiftPreview ?? {
|
||||
valid: true,
|
||||
deltaCents: 0,
|
||||
wouldExceedBudget: false,
|
||||
budgetUtilizationAfter: 0,
|
||||
conflictCount: 0,
|
||||
errors: [],
|
||||
warnings: [],
|
||||
}
|
||||
}
|
||||
projectName={dragState.projectName ?? ""}
|
||||
newStartDate={dragState.currentStartDate ?? today}
|
||||
newEndDate={dragState.currentEndDate ?? today}
|
||||
isLoading={isPreviewLoading}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Alloc drag tooltip */}
|
||||
{allocDragState.isActive &&
|
||||
allocDragState.daysDelta !== 0 &&
|
||||
allocDragState.currentStartDate &&
|
||||
allocDragState.currentEndDate && (
|
||||
<div
|
||||
ref={allocTooltipRef}
|
||||
className="fixed z-40 bg-gray-800 text-white text-xs px-2.5 py-1.5 rounded-lg pointer-events-none shadow-lg space-y-0.5"
|
||||
style={{ left: mousePosRef.current.x + 14, top: mousePosRef.current.y - 36 }}
|
||||
>
|
||||
<div className="font-semibold">{allocDragState.projectName}</div>
|
||||
<div className="opacity-80">
|
||||
{formatDateShort(allocDragState.currentStartDate)}
|
||||
{" – "}
|
||||
{formatDateShort(allocDragState.currentEndDate)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Range-select hint */}
|
||||
{rangeState.isSelecting && rangeState.startDate && rangeState.currentDate && (
|
||||
<div
|
||||
ref={rangeHintRef}
|
||||
className="fixed z-40 bg-brand-700 text-white text-xs px-2 py-1 rounded-lg pointer-events-none shadow"
|
||||
style={{ left: mousePosRef.current.x + 12, top: mousePosRef.current.y - 28 }}
|
||||
>
|
||||
{(() => {
|
||||
const end = rangeState.currentDate;
|
||||
const [s, e] =
|
||||
rangeState.startDate <= end
|
||||
? [rangeState.startDate, end]
|
||||
: [end, rangeState.startDate];
|
||||
const days = Math.round((e.getTime() - s.getTime()) / MILLISECONDS_PER_DAY) + 1;
|
||||
return `${days} day${days !== 1 ? "s" : ""}`;
|
||||
})()}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Multi-drag tooltip */}
|
||||
{multiSelectState.isMultiDragging && multiSelectState.multiDragDaysDelta !== 0 && (
|
||||
<div
|
||||
ref={multiDragTooltipRef}
|
||||
className="fixed z-50 bg-sky-700 text-white text-xs px-2.5 py-1.5 rounded-lg pointer-events-none shadow-lg font-medium"
|
||||
style={{ left: mousePosRef.current.x + 14, top: mousePosRef.current.y - 36 }}
|
||||
>
|
||||
{multiSelectState.multiDragMode === "resize-start"
|
||||
? "Start "
|
||||
: multiSelectState.multiDragMode === "resize-end"
|
||||
? "End "
|
||||
: ""}
|
||||
{multiSelectState.multiDragDaysDelta > 0 ? "+" : ""}
|
||||
{multiSelectState.multiDragDaysDelta}d ({multiSelectState.selectedAllocationIds.length}{" "}
|
||||
allocations)
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Allocation / Demand popover (click path) */}
|
||||
{!isSelfServiceTimeline &&
|
||||
!hasActivePointerOverlay &&
|
||||
popover &&
|
||||
(() => {
|
||||
// Check if clicked allocation is actually a demand
|
||||
const clickedDemand = openDemandsByProject
|
||||
.get(popover.projectId)
|
||||
?.find((d) => d.id === popover.allocationId);
|
||||
if (clickedDemand) {
|
||||
return (
|
||||
<DemandPopover
|
||||
demand={clickedDemand}
|
||||
onClose={() => setPopover(null)}
|
||||
onOpenPanel={(pid) => {
|
||||
setPopover(null);
|
||||
setOpenPanelProjectId(pid);
|
||||
}}
|
||||
onFillDemand={(d) => {
|
||||
setPopover(null);
|
||||
setOpenDemandToAssign({
|
||||
id: d.id,
|
||||
projectId: d.projectId,
|
||||
roleId: d.roleId,
|
||||
role: d.role,
|
||||
headcount: d.requestedHeadcount,
|
||||
startDate: new Date(d.startDate),
|
||||
endDate: new Date(d.endDate),
|
||||
hoursPerDay: d.hoursPerDay,
|
||||
...(d.roleEntity !== undefined ? { roleEntity: d.roleEntity } : {}),
|
||||
...(d.project !== undefined ? { project: d.project } : {}),
|
||||
});
|
||||
}}
|
||||
anchorX={popover.x}
|
||||
anchorY={popover.y}
|
||||
ignoreScrollContainers={[scrollContainerRef]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<AllocationPopover
|
||||
allocationId={popover.allocationId}
|
||||
projectId={popover.projectId}
|
||||
initialAllocation={popover.allocation ?? null}
|
||||
onClose={() => setPopover(null)}
|
||||
onOpenPanel={(pid) => {
|
||||
setPopover(null);
|
||||
setOpenPanelProjectId(pid);
|
||||
}}
|
||||
anchorX={popover.x}
|
||||
anchorY={popover.y}
|
||||
ignoreScrollContainers={[scrollContainerRef]}
|
||||
{...(popover.contextDate ? { contextDate: popover.contextDate } : {})}
|
||||
/>
|
||||
);
|
||||
})()}
|
||||
|
||||
{/* Demand popover */}
|
||||
{!isSelfServiceTimeline && !hasActivePointerOverlay && demandPopover && (
|
||||
<DemandPopover
|
||||
demand={demandPopover.demand}
|
||||
onClose={() => setDemandPopover(null)}
|
||||
onOpenPanel={(pid) => {
|
||||
setDemandPopover(null);
|
||||
setOpenPanelProjectId(pid);
|
||||
}}
|
||||
onFillDemand={(d) => {
|
||||
setDemandPopover(null);
|
||||
setOpenDemandToAssign({
|
||||
id: d.id,
|
||||
projectId: d.projectId,
|
||||
roleId: d.roleId,
|
||||
role: d.role,
|
||||
headcount: d.requestedHeadcount,
|
||||
startDate: new Date(d.startDate),
|
||||
endDate: new Date(d.endDate),
|
||||
hoursPerDay: d.hoursPerDay,
|
||||
...(d.roleEntity !== undefined ? { roleEntity: d.roleEntity } : {}),
|
||||
...(d.project !== undefined ? { project: d.project } : {}),
|
||||
});
|
||||
}}
|
||||
anchorX={demandPopover.x}
|
||||
anchorY={demandPopover.y}
|
||||
ignoreScrollContainers={[scrollContainerRef]}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* New allocation popover */}
|
||||
{!isSelfServiceTimeline && newAllocPopover && (
|
||||
<NewAllocationPopover
|
||||
resourceId={newAllocPopover.resourceId}
|
||||
startDate={newAllocPopover.startDate}
|
||||
endDate={newAllocPopover.endDate}
|
||||
suggestedProjectId={enrichedSuggestedProjectId}
|
||||
anchorX={newAllocPopover.anchorX}
|
||||
anchorY={newAllocPopover.anchorY}
|
||||
onClose={() => setNewAllocPopover(null)}
|
||||
onCreated={() => setNewAllocPopover(null)}
|
||||
ignoreScrollContainers={[scrollContainerRef]}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Project side panel */}
|
||||
{!isSelfServiceTimeline && openPanelProjectId && (
|
||||
<ProjectPanel projectId={openPanelProjectId} onClose={() => setOpenPanelProjectId(null)} />
|
||||
)}
|
||||
|
||||
{/* Open-demand assignment modal */}
|
||||
{!isSelfServiceTimeline && openDemandToAssign && (
|
||||
<FillOpenDemandModal
|
||||
allocation={openDemandToAssign}
|
||||
onClose={() => setOpenDemandToAssign(null)}
|
||||
onSuccess={() => setOpenDemandToAssign(null)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Multi-select floating action bar */}
|
||||
<FloatingActionBar
|
||||
selectedAllocationCount={multiSelectState.selectedAllocationIds.length}
|
||||
selectedResourceCount={multiSelectState.selectedResourceIds.length}
|
||||
@@ -1215,54 +1002,36 @@ function TimelineViewContent({
|
||||
isDeleting={batchDeleteMutation.isPending}
|
||||
/>
|
||||
|
||||
{/* Batch assign popover */}
|
||||
{showBatchAssign && multiSelectState.dateRange && (
|
||||
<BatchAssignPopover
|
||||
resourceIds={multiSelectState.selectedResourceIds}
|
||||
startDate={multiSelectState.dateRange.start}
|
||||
endDate={multiSelectState.dateRange.end}
|
||||
onClose={() => setShowBatchAssign(false)}
|
||||
onCreated={() => {
|
||||
setShowBatchAssign(false);
|
||||
clearMultiSelect();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Resource hover card */}
|
||||
{!hasActivePointerOverlay && resourceHover && (
|
||||
<ResourceHoverCard
|
||||
resourceId={resourceHover.resourceId}
|
||||
anchorEl={resourceHover.anchorEl}
|
||||
onClose={() => setResourceHover(null)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Inline allocation editor */}
|
||||
{inlineEditTarget && (
|
||||
<InlineAllocationEditor
|
||||
allocationId={inlineEditTarget.allocationId}
|
||||
initialStartDate={inlineEditTarget.startDate}
|
||||
initialEndDate={inlineEditTarget.endDate}
|
||||
initialHoursPerDay={inlineEditTarget.hoursPerDay}
|
||||
barRect={inlineEditTarget.barRect}
|
||||
onClose={() => setInlineEditTarget(null)}
|
||||
onSaved={() => setInlineEditTarget(null)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Keyboard shortcut overlay */}
|
||||
{showShortcuts && <KeyboardShortcutOverlay onClose={() => setShowShortcuts(false)} />}
|
||||
|
||||
{/* Keyboard shortcut hint button */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowShortcuts((prev) => !prev)}
|
||||
title="Keyboard shortcuts (?)"
|
||||
className="fixed bottom-6 right-6 z-40 rounded-full w-8 h-8 flex items-center justify-center bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 text-sm font-medium"
|
||||
>
|
||||
?
|
||||
</button>
|
||||
<TimelinePopovers
|
||||
isSelfServiceTimeline={isSelfServiceTimeline}
|
||||
hasActivePointerOverlay={hasActivePointerOverlay}
|
||||
popover={popover}
|
||||
setPopover={setPopover}
|
||||
demandPopover={demandPopover}
|
||||
setDemandPopover={setDemandPopover}
|
||||
newAllocPopover={newAllocPopover}
|
||||
setNewAllocPopover={setNewAllocPopover}
|
||||
enrichedSuggestedProjectId={enrichedSuggestedProjectId}
|
||||
openPanelProjectId={openPanelProjectId}
|
||||
setOpenPanelProjectId={setOpenPanelProjectId}
|
||||
openDemandToAssign={openDemandToAssign}
|
||||
setOpenDemandToAssign={setOpenDemandToAssign}
|
||||
openDemandsByProject={openDemandsByProject}
|
||||
scrollContainerRef={scrollContainerRef}
|
||||
multiSelectState={multiSelectState}
|
||||
clearMultiSelect={clearMultiSelect}
|
||||
handleBatchDelete={handleBatchDelete}
|
||||
handleShowBatchAssign={handleShowBatchAssign}
|
||||
isDeleting={batchDeleteMutation.isPending}
|
||||
showBatchAssign={showBatchAssign}
|
||||
setShowBatchAssign={setShowBatchAssign}
|
||||
resourceHover={resourceHover}
|
||||
setResourceHover={setResourceHover}
|
||||
inlineEditTarget={inlineEditTarget}
|
||||
setInlineEditTarget={setInlineEditTarget}
|
||||
showShortcuts={showShortcuts}
|
||||
setShowShortcuts={setShowShortcuts}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user