feat: add module filter to documents list and refactor version creation form UI
This commit is contained in:
parent
dfe6d74993
commit
435375fc9f
@ -37,6 +37,8 @@ const stepSchema = z
|
||||
requires_comment: z.boolean().default(false),
|
||||
requires_attachment: z.boolean().default(false),
|
||||
sla_hours: z.number().optional().nullable(),
|
||||
sla_warning_hours: z.number().optional().nullable(),
|
||||
sla_escalation_hours: z.number().optional().nullable(),
|
||||
})
|
||||
.superRefine((data, ctx) => {
|
||||
// Skip all assignee/action validation for terminal steps
|
||||
@ -339,6 +341,8 @@ export const WorkflowDefinitionModal = ({
|
||||
requires_comment: s.requires_comment || false,
|
||||
requires_attachment: s.requires_attachment || false,
|
||||
sla_hours: s.sla?.hours,
|
||||
sla_warning_hours: s.sla?.warning_hours,
|
||||
sla_escalation_hours: s.sla?.escalation_hours,
|
||||
})),
|
||||
transitions: (definition.transitions || []).map((t) => ({
|
||||
from_step_code: t.from_step_code,
|
||||
@ -393,13 +397,43 @@ export const WorkflowDefinitionModal = ({
|
||||
...data,
|
||||
source_module: selectedModuleNames,
|
||||
tenantId: tenantId || undefined,
|
||||
// Strip terminal-step-only-hidden fields from the payload
|
||||
// Strip fields based on step type and assignee type to prevent backend validation errors
|
||||
steps: data.steps?.map((step: any) => {
|
||||
if (step.step_type === "terminal") {
|
||||
const { assignee_type, assignee_role, assignee_id, available_actions, ...rest } = step;
|
||||
const {
|
||||
assignee_type,
|
||||
assignee_role,
|
||||
assignee_id,
|
||||
available_actions,
|
||||
...rest
|
||||
} = step;
|
||||
return rest;
|
||||
}
|
||||
return step;
|
||||
|
||||
const cleanedStep = { ...step };
|
||||
|
||||
// Clean up assignee fields based on assignee_type
|
||||
if (step.assignee_type === "originator") {
|
||||
delete cleanedStep.assignee_role;
|
||||
delete cleanedStep.assignee_id;
|
||||
} else if (step.assignee_type === "role") {
|
||||
delete cleanedStep.assignee_id;
|
||||
} else if (step.assignee_type === "user") {
|
||||
delete cleanedStep.assignee_role;
|
||||
// Ensure ID is not an empty string which fails UUID validation
|
||||
if (cleanedStep.assignee_id === "") {
|
||||
delete cleanedStep.assignee_id;
|
||||
}
|
||||
}
|
||||
|
||||
// Clean up SLA fields
|
||||
['sla_hours', 'sla_warning_hours', 'sla_escalation_hours'].forEach(field => {
|
||||
if (cleanedStep[field] === 0 || cleanedStep[field] === null || cleanedStep[field] === "") {
|
||||
delete cleanedStep[field];
|
||||
}
|
||||
});
|
||||
|
||||
return cleanedStep;
|
||||
}),
|
||||
};
|
||||
|
||||
@ -933,6 +967,41 @@ export const WorkflowDefinitionModal = ({
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{watchedSteps[index]?.step_type !== "terminal" && (
|
||||
<div className="md:col-span-3 grid grid-cols-1 md:grid-cols-3 gap-x-4 gap-y-3 mt-2 pt-4 border-t border-[rgba(0,0,0,0.05)]">
|
||||
<FormField
|
||||
label="SLA Hours"
|
||||
type="number"
|
||||
placeholder="e.g. 24"
|
||||
{...register(`steps.${index}.sla_hours` as const, {
|
||||
valueAsNumber: true,
|
||||
})}
|
||||
error={(errors.steps as any)?.[index]?.sla_hours?.message}
|
||||
disabled={isEdit}
|
||||
/>
|
||||
<FormField
|
||||
label="Warning Hours"
|
||||
type="number"
|
||||
placeholder="e.g. 4"
|
||||
{...register(`steps.${index}.sla_warning_hours` as const, {
|
||||
valueAsNumber: true,
|
||||
})}
|
||||
error={(errors.steps as any)?.[index]?.sla_warning_hours?.message}
|
||||
disabled={isEdit}
|
||||
/>
|
||||
<FormField
|
||||
label="Escalation Hours"
|
||||
type="number"
|
||||
placeholder="e.g. 48"
|
||||
{...register(`steps.${index}.sla_escalation_hours` as const, {
|
||||
valueAsNumber: true,
|
||||
})}
|
||||
error={(errors.steps as any)?.[index]?.sla_escalation_hours?.message}
|
||||
disabled={isEdit}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
@ -233,10 +233,28 @@ export const WorkflowDefinitionViewModal = ({
|
||||
)}
|
||||
|
||||
{/* SLA */}
|
||||
{step.sla?.hours != null && (
|
||||
<div className="flex items-center gap-1 text-[11px] opacity-80">
|
||||
<Clock className="w-3 h-3" />
|
||||
<span>SLA: {step.sla.hours}h</span>
|
||||
{(step.sla?.hours != null ||
|
||||
step.sla?.warning_hours != null ||
|
||||
step.sla?.escalation_hours != null) && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{step.sla?.hours != null && (
|
||||
<div className="flex items-center gap-1 text-[11px] opacity-80">
|
||||
<Clock className="w-3 h-3" />
|
||||
<span>SLA: {step.sla.hours}h</span>
|
||||
</div>
|
||||
)}
|
||||
{step.sla?.warning_hours != null && (
|
||||
<div className="flex items-center gap-1 text-[11px] text-amber-600 font-medium">
|
||||
<AlertCircle className="w-3 h-3" />
|
||||
<span>Warn: {step.sla.warning_hours}h</span>
|
||||
</div>
|
||||
)}
|
||||
{step.sla?.escalation_hours != null && (
|
||||
<div className="flex items-center gap-1 text-[11px] text-red-600 font-medium">
|
||||
<ArrowRight className="w-3 h-3" />
|
||||
<span>Esc: {step.sla.escalation_hours}h</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
@ -366,7 +366,7 @@ const CreateDocument = (): ReactElement => {
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Paperclip className="w-4 h-4 text-[#112868]" />
|
||||
<h3 className="text-sm font-semibold text-[#0f1724]">
|
||||
Attach File (Optional)
|
||||
Load Content From File (Optional)
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-xs text-[#6b7280] mb-3">
|
||||
|
||||
@ -9,7 +9,9 @@ import {
|
||||
type Column,
|
||||
} from "@/components/shared";
|
||||
import { documentService } from "@/services/document-service";
|
||||
import { moduleService } from "@/services/module-service";
|
||||
import type { DocumentCategory, DocumentSummary } from "@/types/document";
|
||||
import type { MyModule } from "@/types/module";
|
||||
import { Plus, Search } from "lucide-react";
|
||||
|
||||
const formatDate = (value?: string | null): string => {
|
||||
@ -39,6 +41,8 @@ const Documents = (): ReactElement => {
|
||||
const [statusFilter, setStatusFilter] = useState<string | null>(null);
|
||||
const [categoryFilter, setCategoryFilter] = useState<string | null>(null);
|
||||
const [typeFilter, setTypeFilter] = useState<string | null>(null);
|
||||
const [moduleFilter, setModuleFilter] = useState<string | null>(null);
|
||||
const [modules, setModules] = useState<MyModule[]>([]);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [limit, setLimit] = useState(10);
|
||||
const [total, setTotal] = useState(0);
|
||||
@ -51,14 +55,16 @@ const Documents = (): ReactElement => {
|
||||
useEffect(() => {
|
||||
const loadDropdownData = async (): Promise<void> => {
|
||||
try {
|
||||
const [categoriesRes, statusesRes, typesRes] = await Promise.all([
|
||||
const [categoriesRes, statusesRes, typesRes, modulesRes] = await Promise.all([
|
||||
documentService.getCategories(),
|
||||
documentService.getStatuses(),
|
||||
documentService.getTypes(),
|
||||
moduleService.getMyModules(),
|
||||
]);
|
||||
setCategories(categoriesRes.data || []);
|
||||
setStatuses(statusesRes.data || []);
|
||||
setTypes(typesRes.data || []);
|
||||
setModules(modulesRes.data || []);
|
||||
} catch {
|
||||
// Keep page usable even if some filter metadata endpoints fail.
|
||||
}
|
||||
@ -76,6 +82,7 @@ const Documents = (): ReactElement => {
|
||||
status: statusFilter || undefined,
|
||||
category_id: categoryFilter || undefined,
|
||||
document_type: typeFilter || undefined,
|
||||
source_module_id: moduleFilter || undefined,
|
||||
search: search.trim() || undefined,
|
||||
limit,
|
||||
offset,
|
||||
@ -92,7 +99,7 @@ const Documents = (): ReactElement => {
|
||||
};
|
||||
|
||||
void loadDocuments();
|
||||
}, [statusFilter, categoryFilter, typeFilter, search, limit, offset]);
|
||||
}, [statusFilter, categoryFilter, typeFilter, moduleFilter, search, limit, offset]);
|
||||
|
||||
const columns: Column<DocumentSummary>[] = useMemo(
|
||||
() => [
|
||||
@ -266,6 +273,20 @@ const Documents = (): ReactElement => {
|
||||
placeholder="All"
|
||||
/>
|
||||
|
||||
<FilterDropdown
|
||||
label="Module"
|
||||
options={modules.map((module) => ({
|
||||
value: module.id,
|
||||
label: module.name,
|
||||
}))}
|
||||
value={moduleFilter}
|
||||
onChange={(value) => {
|
||||
setModuleFilter(value as string | null);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
placeholder="All Modules"
|
||||
/>
|
||||
|
||||
{/* <FilterDropdown
|
||||
label="Priority"
|
||||
options={[
|
||||
@ -301,6 +322,7 @@ const Documents = (): ReactElement => {
|
||||
setStatusFilter(null);
|
||||
setCategoryFilter(null);
|
||||
setTypeFilter(null);
|
||||
setModuleFilter(null);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
className="text-sm font-medium text-[#6b7280] hover:text-[#0f1724] transition-colors"
|
||||
|
||||
@ -17,6 +17,7 @@ import {
|
||||
import { workflowService } from "@/services/workflow-service";
|
||||
import type { DocumentDetail, DocumentVersion } from "@/types/document";
|
||||
import type { WorkflowInstance } from "@/types/workflow";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { showToast } from "@/utils/toast";
|
||||
import { Paperclip, Plus, User } from "lucide-react";
|
||||
|
||||
@ -712,152 +713,264 @@ const ViewDocument = (): ReactElement => {
|
||||
</button>
|
||||
</div>
|
||||
{showNewVersionForm && (
|
||||
<div className="border border-[rgba(0,0,0,0.08)] rounded-lg p-4 bg-[#f8fafc]">
|
||||
<h4 className="text-base font-semibold text-[#0f1724] mb-3">
|
||||
Create New Version
|
||||
</h4>
|
||||
|
||||
{/* File Attachment Selection */}
|
||||
<div className="mb-4 border border-[rgba(0,0,0,0.08)] rounded-lg p-3 bg-white">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Paperclip className="w-4 h-4 text-[#112868]" />
|
||||
<span className="text-sm font-medium text-[#0f1724]">
|
||||
Load Content From File (Optional)
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-[#6b7280] mb-2">
|
||||
Select a file to extract and auto-fill content below.
|
||||
</p>
|
||||
<FormSelect
|
||||
label="Select File"
|
||||
value={versionSelectedFileId}
|
||||
onValueChange={(val) =>
|
||||
void handleVersionFileSelect(val)
|
||||
}
|
||||
options={[
|
||||
{ value: "", label: "— None —" },
|
||||
...versionFiles.map((f) => ({
|
||||
value: f.id,
|
||||
label: `${f.original_name} (${f.file_size_formatted})`,
|
||||
})),
|
||||
]}
|
||||
placeholder={
|
||||
isLoadingVersionFiles
|
||||
? "Loading files..."
|
||||
: "Select a file to attach"
|
||||
}
|
||||
/>
|
||||
{versionSelectedFileId && (
|
||||
<div className="mt-2 grid grid-cols-1 md:grid-cols-2 gap-x-3 gap-y-0 text-xs text-[#6b7280]">
|
||||
<p>
|
||||
<span className="font-medium">File:</span>{" "}
|
||||
{versionFileName}
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-medium">Type:</span>{" "}
|
||||
{versionMimeType}
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-medium">Size:</span>{" "}
|
||||
{versionFileSize
|
||||
? `${(versionFileSize / 1024 / 1024).toFixed(2)} MB`
|
||||
: "-"}
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-medium">Hash:</span>{" "}
|
||||
{versionFileHash
|
||||
? versionFileHash.substring(0, 16) + "..."
|
||||
: "-"}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8 animate-in fade-in slide-in-from-top-4 duration-500">
|
||||
{/* Main Form Area */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
<div className="bg-white border border-[rgba(0,0,0,0.08)] rounded-xl shadow-sm overflow-hidden">
|
||||
<div className="p-6 border-b border-[rgba(0,0,0,0.08)] bg-gray-50/50">
|
||||
<h4 className="text-base font-semibold text-[#0f1724]">
|
||||
Update Document Content
|
||||
</h4>
|
||||
<p className="text-xs text-[#6b7280] mt-1">
|
||||
Modify the document content or load it from an existing file attachment.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<RichTextEditor
|
||||
label="Document Content"
|
||||
value={newVersionContentHtml}
|
||||
required
|
||||
minHeightClassName="h-[400px] overflow-y-auto"
|
||||
onChange={(html, text) => {
|
||||
setNewVersionContentHtml(html);
|
||||
setNewVersionContent(text);
|
||||
if (text.trim())
|
||||
setVersionErrors((prev) => ({
|
||||
...prev,
|
||||
content: "",
|
||||
}));
|
||||
}}
|
||||
error={versionErrors.content}
|
||||
/>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<FormSelect
|
||||
label="Change Reason"
|
||||
required
|
||||
options={[
|
||||
{ value: "minor_edit", label: "minor_edit" },
|
||||
{ value: "correction", label: "correction" },
|
||||
{
|
||||
value: "regulatory_update",
|
||||
label: "regulatory_update",
|
||||
},
|
||||
{ value: "major_rewrite", label: "major_rewrite" },
|
||||
]}
|
||||
value={newVersionChangeReason}
|
||||
onValueChange={(val) => {
|
||||
setNewVersionChangeReason(val);
|
||||
if (val)
|
||||
setVersionErrors((prev) => ({
|
||||
...prev,
|
||||
change_reason: "",
|
||||
}));
|
||||
}}
|
||||
placeholder="Select change reason"
|
||||
error={versionErrors.change_reason}
|
||||
/>
|
||||
<div className="flex items-center gap-2 pt-8">
|
||||
<input
|
||||
id="major-version"
|
||||
type="checkbox"
|
||||
checked={isMajorVersion}
|
||||
onChange={(event) =>
|
||||
setIsMajorVersion(event.target.checked)
|
||||
}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<label
|
||||
htmlFor="major-version"
|
||||
className="text-sm text-[#0f1724]"
|
||||
>
|
||||
Major Version?
|
||||
</label>
|
||||
<div className="p-6 space-y-6">
|
||||
{/* File Attachment Selection */}
|
||||
<div className="border border-[rgba(0,0,0,0.08)] rounded-lg p-4 bg-[#f8fafc]/50">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<div className="p-1.5 bg-[#112868]/10 rounded-md">
|
||||
<Paperclip className="w-4 h-4 text-[#112868]" />
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm font-semibold text-[#0f1724]">
|
||||
Load Content From File
|
||||
</span>
|
||||
<p className="text-xs text-[#6b7280]">
|
||||
Extract text directly from an uploaded PDF or Word document.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<FormSelect
|
||||
label=""
|
||||
value={versionSelectedFileId}
|
||||
onValueChange={(val) =>
|
||||
void handleVersionFileSelect(val)
|
||||
}
|
||||
options={[
|
||||
{ value: "", label: "— No file selected —" },
|
||||
...versionFiles.map((f) => ({
|
||||
value: f.id,
|
||||
label: `${f.original_name} (${f.file_size_formatted})`,
|
||||
})),
|
||||
]}
|
||||
placeholder={
|
||||
isLoadingVersionFiles
|
||||
? "Loading files..."
|
||||
: "Search and select a file..."
|
||||
}
|
||||
/>
|
||||
{versionSelectedFileId && (
|
||||
<div className="mt-3 grid grid-cols-2 gap-x-4 gap-y-2 p-3 bg-white border border-[rgba(0,0,0,0.08)] rounded-md text-[11px]">
|
||||
<div>
|
||||
<span className="text-gray-400">File Name:</span>{" "}
|
||||
<span className="text-[#0f1724] font-medium">{versionFileName}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-400">File Size:</span>{" "}
|
||||
<span className="text-[#0f1724] font-medium">
|
||||
{versionFileSize ? `${(versionFileSize / 1024 / 1024).toFixed(2)} MB` : "-"}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-400">MIME Type:</span>{" "}
|
||||
<span className="text-[#0f1724] font-medium">{versionMimeType}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-400">Checksum:</span>{" "}
|
||||
<span className="text-[#0f1724] font-mono">{versionFileHash?.substring(0, 12)}...</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<RichTextEditor
|
||||
label="Document Content"
|
||||
value={newVersionContentHtml}
|
||||
required
|
||||
minHeightClassName="h-[500px] overflow-y-auto"
|
||||
onChange={(html, text) => {
|
||||
setNewVersionContentHtml(html);
|
||||
setNewVersionContent(text);
|
||||
if (text.trim())
|
||||
setVersionErrors((prev) => ({
|
||||
...prev,
|
||||
content: "",
|
||||
}));
|
||||
}}
|
||||
error={versionErrors.content}
|
||||
/>
|
||||
|
||||
{/* Version Reason and Increment Row */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 p-4 rounded-lg border border-[rgba(0,0,0,0.06)] bg-[#f8fafc]/30">
|
||||
<div className="space-y-2">
|
||||
<FormSelect
|
||||
label="Change Reason"
|
||||
required
|
||||
options={[
|
||||
{ value: "minor_edit", label: "minor_edit" },
|
||||
{ value: "correction", label: "correction" },
|
||||
{ value: "regulatory_update", label: "regulatory_update" },
|
||||
{ value: "major_rewrite", label: "major_rewrite" },
|
||||
]}
|
||||
value={newVersionChangeReason}
|
||||
onValueChange={(val) => {
|
||||
setNewVersionChangeReason(val);
|
||||
if (val)
|
||||
setVersionErrors((prev) => ({
|
||||
...prev,
|
||||
change_reason: "",
|
||||
}));
|
||||
}}
|
||||
placeholder="Select change reason"
|
||||
error={versionErrors.change_reason}
|
||||
/>
|
||||
<p className="text-[10px] text-[#6b7280]">
|
||||
Select a reason category such as minor_edit, correction, etc.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="text-[13px] font-semibold text-[#0f1724]">
|
||||
Major Version?
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsMajorVersion(!isMajorVersion)}
|
||||
className={cn(
|
||||
"relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none",
|
||||
isMajorVersion ? "bg-[#112868]" : "bg-gray-200"
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
"pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out",
|
||||
isMajorVersion ? "translate-x-4" : "translate-x-0"
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="h-10 px-3 flex items-center justify-between bg-white border border-[rgba(0,0,0,0.08)] rounded-md shadow-sm">
|
||||
<span className="text-[11px] font-medium text-[#475569]">
|
||||
{isMajorVersion ? "Major" : "Minor"} Increment
|
||||
</span>
|
||||
<span className="text-[11px] font-bold text-[#0f1724]">
|
||||
{`${document?.current_version || "0.0"} to ${(() => {
|
||||
if (!document?.current_version) return isMajorVersion ? "1.0" : "0.1";
|
||||
const parts = document.current_version.replace("v", "").split(".");
|
||||
let major = parseInt(parts[0]) || 0;
|
||||
let minor = parseInt(parts[1]) || 0;
|
||||
if (isMajorVersion) { major++; minor = 0; } else { minor++; }
|
||||
return `${major}.${minor}`;
|
||||
})()}`}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-[10px] text-[#6b7280] leading-tight">
|
||||
{isMajorVersion
|
||||
? "Incrementing to a major version indicates significant changes or a full document overhaul."
|
||||
: `Turn on major versioning to increment to v${(parseInt((document?.current_version || "0.0").split(".")[0]) || 0) + 1}.0 instead of a minor revision.`
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-[13px] font-semibold text-[#0f1724]">
|
||||
Change Summary
|
||||
</label>
|
||||
<textarea
|
||||
rows={3}
|
||||
value={newVersionChangeSummary}
|
||||
onChange={(event) =>
|
||||
setNewVersionChangeSummary(event.target.value)
|
||||
}
|
||||
placeholder="Provide a brief, professional summary of what has changed in this version..."
|
||||
className="w-full px-3 py-2 border border-[rgba(0,0,0,0.08)] rounded-lg text-sm focus:ring-1 focus:ring-[#112868]/20 focus:outline-none transition-all"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6 py-4 border-t border-[rgba(0,0,0,0.08)] bg-gray-50/50 flex justify-end gap-3">
|
||||
<SecondaryButton
|
||||
onClick={() => setShowNewVersionForm(false)}
|
||||
>
|
||||
Discard Draft
|
||||
</SecondaryButton>
|
||||
<PrimaryButton
|
||||
onClick={() => void handleCreateVersion()}
|
||||
disabled={isVersionSaving}
|
||||
className="px-8"
|
||||
>
|
||||
{isVersionSaving ? "Creating..." : "Save New Version"}
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-1">
|
||||
<label className="text-[13px] font-medium text-[#0e1b2a] mb-2 block">
|
||||
Change Summary
|
||||
</label>
|
||||
<textarea
|
||||
rows={3}
|
||||
value={newVersionChangeSummary}
|
||||
onChange={(event) =>
|
||||
setNewVersionChangeSummary(event.target.value)
|
||||
}
|
||||
placeholder="Provide a brief description of the changes..."
|
||||
className="w-full px-3 py-2 border border-[rgba(0,0,0,0.08)] rounded-md text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-4 flex justify-end gap-2">
|
||||
<SecondaryButton
|
||||
onClick={() => setShowNewVersionForm(false)}
|
||||
>
|
||||
Cancel
|
||||
</SecondaryButton>
|
||||
<PrimaryButton
|
||||
onClick={() => void handleCreateVersion()}
|
||||
disabled={isVersionSaving}
|
||||
>
|
||||
{isVersionSaving ? "Creating..." : "Create Version"}
|
||||
</PrimaryButton>
|
||||
|
||||
{/* Right Sidebar */}
|
||||
<div className="space-y-5">
|
||||
{/* Version Context Card */}
|
||||
<div className="bg-white border border-[rgba(0,0,0,0.08)] rounded-xl shadow-sm overflow-hidden">
|
||||
<div className="p-5 border-b border-[rgba(0,0,0,0.08)]">
|
||||
<h4 className="text-sm font-bold text-[#0f1724]">Version Context</h4>
|
||||
<p className="text-[11px] text-[#6b7280] mt-0.5">Reference information for current revision.</p>
|
||||
</div>
|
||||
<div className="p-5 pt-4 space-y-4">
|
||||
<div className="inline-flex items-center px-2.5 py-1 rounded-md bg-[#084cc8]/5 text-[#084cc8] text-[11px] font-bold border border-[#084cc8]/10 w-full justify-center">
|
||||
Checked Out for Editing
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{[
|
||||
{ label: "Document Number", value: document?.document_number },
|
||||
{ label: "Current Version", value: `v${document?.current_version || "-"}` },
|
||||
{ label: "Next Version", value: (() => {
|
||||
if (!document?.current_version) return isMajorVersion ? "v1.0" : "v0.1";
|
||||
const parts = document.current_version.replace("v", "").split(".");
|
||||
let major = parseInt(parts[0]) || 0;
|
||||
let minor = parseInt(parts[1]) || 0;
|
||||
if (isMajorVersion) { major++; minor = 0; } else { minor++; }
|
||||
return `v${major}.${minor}`;
|
||||
})()
|
||||
},
|
||||
{ label: "Document Type", value: document?.document_type },
|
||||
{ label: "Owner", value: document?.owner?.name || "-" },
|
||||
{ label: "Department", value: document?.department || "-" },
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex items-center justify-between py-2 border-b border-gray-50 last:border-0">
|
||||
<span className="text-[11px] text-[#6b7280] font-medium">{item.label}</span>
|
||||
<span className="text-[11px] text-[#0f1724] font-bold">{item.value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Review Notes Card */}
|
||||
<div className="bg-white border border-[rgba(0,0,0,0.08)] rounded-xl shadow-sm p-5 space-y-4">
|
||||
<div>
|
||||
<h4 className="text-sm font-bold text-[#0f1724]">Review Notes</h4>
|
||||
<p className="text-[11px] text-[#6b7280] mt-0.5 leading-relaxed">
|
||||
Creating a new draft revision will automatically trigger the following system actions:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{[
|
||||
"Status resets to Draft",
|
||||
"Workflow restarts",
|
||||
"Version history retained"
|
||||
].map((note, i) => (
|
||||
<div key={i} className="flex items-center gap-2 px-3 py-2 bg-gray-50 rounded-lg border border-gray-100/50">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-[#112868]/40" />
|
||||
<span className="text-[11px] font-semibold text-[#475569]">{note}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@ -1202,7 +1315,7 @@ const ViewDocument = (): ReactElement => {
|
||||
onClick={() => setSelectedWorkflowAction(action)}
|
||||
className="px-4 py-2 bg-white border border-blue-200 rounded-md text-xs font-bold text-blue-700 hover:bg-blue-600 hover:text-white transition-all shadow-sm"
|
||||
>
|
||||
{action.name}
|
||||
{action.action || action.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
@ -1214,7 +1327,7 @@ const ViewDocument = (): ReactElement => {
|
||||
<div className="p-4 border border-amber-200 bg-amber-50 rounded-lg animate-in fade-in slide-in-from-top-2">
|
||||
<div className="flex justify-between items-start mb-3">
|
||||
<h4 className="text-xs font-bold text-amber-900 uppercase tracking-wider">
|
||||
Executing Action: {selectedWorkflowAction.name}
|
||||
Executing Action: {selectedWorkflowAction.action||selectedWorkflowAction.name}
|
||||
</h4>
|
||||
<button
|
||||
onClick={() => {
|
||||
@ -1290,6 +1403,12 @@ const ViewDocument = (): ReactElement => {
|
||||
>
|
||||
Action
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="px-4 py-3 text-left text-[10px] font-bold text-gray-400 uppercase tracking-wider"
|
||||
>
|
||||
Due Date
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="px-4 py-3 text-left text-[10px] font-bold text-gray-400 uppercase tracking-wider"
|
||||
@ -1343,10 +1462,25 @@ const ViewDocument = (): ReactElement => {
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3 whitespace-nowrap text-[11px] text-gray-500 font-medium">
|
||||
{task.completed_at
|
||||
? formatDateTime(task.completed_at)
|
||||
: "-"}
|
||||
<td className="px-4 py-3 whitespace-nowrap">
|
||||
<span
|
||||
className={`text-[11px] font-semibold ${
|
||||
task.status === "pending" &&
|
||||
task.due_at &&
|
||||
new Date(task.due_at) < new Date()
|
||||
? "text-red-600"
|
||||
: "text-gray-600"
|
||||
}`}
|
||||
>
|
||||
{task.due_at ? formatDateTime(task.due_at) : "-"}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 whitespace-nowrap">
|
||||
<span className="text-[11px] text-gray-400 italic">
|
||||
{task.completed_at
|
||||
? formatDateTime(task.completed_at)
|
||||
: "-"}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
|
||||
@ -13,6 +13,7 @@ export interface ListDocumentsParams {
|
||||
category_id?: string;
|
||||
document_type?: string;
|
||||
owner_id?: string;
|
||||
source_module_id?: string;
|
||||
search?: string;
|
||||
limit?: number;
|
||||
offset?: number;
|
||||
@ -97,6 +98,8 @@ export const documentService = {
|
||||
if (params.document_type)
|
||||
queryParams.append("document_type", params.document_type);
|
||||
if (params.owner_id) queryParams.append("owner_id", params.owner_id);
|
||||
if (params.source_module_id)
|
||||
queryParams.append("source_module_id", params.source_module_id);
|
||||
if (params.search) queryParams.append("search", params.search);
|
||||
if (params.limit !== undefined)
|
||||
queryParams.append("limit", params.limit.toString());
|
||||
|
||||
Loading…
Reference in New Issue
Block a user