import { useEffect, useRef, useState } from 'react';
import { Link, router, useForm, useHttp, usePage } from '@inertiajs/react';
import { BarChart3, ChevronDown, History, Loader2, Plus, RefreshCw, Save, SlidersHorizontal, SquarePen, X } from 'lucide-react';
import AppLayout from '@/Layouts/AppLayout';
import { Modal } from '@/Components/Proto/UI/Modal';
import { Drawer } from '@/Components/Proto/UI/Drawer';
import { FloatingField } from '@/Components/Proto/UI/FloatingField';
import { StatusBadge } from '@/Components/Proto/UI/StatusBadge';
import { CheckBox } from '@/Components/Proto/UI/CheckBox';
import { useToast } from '@/Components/Toast';
import { ProjectDetailContent } from '@/Pages/MenuProjects/Projects/Detail';
import { CREATE_TARGETS, projectCreateTargets } from '@/lib/projectCreateTargets';
// Server-driven port of Pages/Proto/Projects/Board.jsx — real 6 columns (replacing the
// proto's 5-column mock config), real drag/status-change popover, and an inline-editable
// peek drawer (replacing the proto's full free-edit side-drawer with the same
// save-per-section pattern established by Detail.jsx). The checked-rows "Total Value"
// footer and the kanban-table-list view toggle remain deferred per the design spec.
// The 4 cross-module launch buttons (legacy listproject.php's Sample / Quotation / LWR /
// VisPlan) LANDED 2026-08-05 as the bulk bar's "Create ▾" dropdown — see
// docs/superpowers/specs/2026-08-05-company-project-create-linked-docs-design.md.
// The proto's client-side text search is also dropped: columns are
// server-paginated ("Load More"), so a client-side search over only the loaded cards would
// silently miss anything not yet paged in — the real filter bar below is the replacement.
//
// Editable drawer (2026-07-10): on open, GET details.edit-data fetches {canWrite, header,
// detail, companyCps, applications} into local state `editData` (NOT an Inertia page prop —
// this is a plain useHttp fetch, so a fresh GET after every save is how the drawer's own
// fields pick up server-computed values; router.reload() only refreshes the BOARD COLUMNS).
// pm/sm/mm (canWrite=false) keep the exact pre-existing read-only rendering sourced from
// `peekCard` (the board-column payload already carries everything that view needs). own/
// all/head (canWrite=true) render editable sections that mirror Detail.jsx's components
// almost verbatim — same field lists, same payload shapes, same useHttp().transform()+post()
// idiom — the only differences being: data comes from `editData` instead of Inertia props,
// there is no read-only mode inside these components (Board's read-only path is the OLD
// branch above, not a prop on these), and every `onSaved` callback both reloads the board
// columns AND re-fetches editData (afterSave()) instead of `router.reload({only:['details']})`.
// `statusIds` drives which underlying ItemStatusID values a card can carry while sitting in
// this column (used both to render the sub-status chip and — for Early Stage / Closed — to
// disambiguate a drop). Every column is a valid drop target, including Created: a line can be
// reset to its birth status (1) like any other backward move.
const COLUMNS = [
{ id: 'created', label: 'Created', statusIds: [1] },
{ id: 'earlyStage', label: 'Early Stage', statusIds: [2, 3] },
{ id: 'labTesting', label: 'Lab Testing', statusIds: [4] },
{ id: 'approved', label: 'Approved', statusIds: [5] },
{ id: 'quotation', label: 'Quotation', statusIds: [6] },
{ id: 'closed', label: 'Closed', statusIds: [7, 8] },
];
const STATUS_NAME = {
1: 'Created', 2: 'Exploring', 3: 'Sample', 4: 'Lab Testing',
5: 'Approved', 6: 'Quotation', 7: 'Failed', 8: 'Commercialized',
};
// Every selectable item status — feeds the BULK status picker (selection → change status).
const ALL_STATUS_IDS = [1, 2, 3, 4, 5, 6, 7, 8];
// Reverse lookup (StatusName → id) so the history timeline can tone its dot/badge —
// the history rows carry the name, not the id.
const STATUS_ID_BY_NAME = Object.fromEntries(Object.entries(STATUS_NAME).map(([id, name]) => [name, Number(id)]));
// "Ongoing" (in-progress) item statuses: Exploring…Quotation. The terminal Failed(7) /
// Commercialized(8) — and the Created(1) reset — are NOT ongoing. When the status being set
// is ongoing, the status-date picker's `min` is forced to today (you're marking it ongoing
// now, so it can't be back-dated); terminal statuses can record a past date. (Cath, 2026-07-21)
const ONGOING_STATUS_IDS = [2, 3, 4, 5, 6];
// Compact icon-only card action (History / Update / Competitor) — label via tooltip.
const CARD_ICON_BTN = 'grid size-7 place-items-center rounded-md border border-border bg-card text-muted-foreground transition-colors hover:border-primary hover:bg-accent hover:text-primary';
// Competitor data shown on HOVER (no click). Fixed-positioned so the column's overflow can't
// clip it; a top pad bridges the button→popover gap. `rect` is client-only (mouse-enter), so
// SSR never touches `window`. Reads the server card's competitor shape.
function CompetitorHover({ competitors = [] }) {
const [rect, setRect] = useState(null);
const ref = useRef(null);
const show = () => { const r = ref.current?.getBoundingClientRect(); if (r) setRect(r); };
const n = competitors.length;
return (
);
}
const formatNumber = (n) => (Number.isFinite(Number(n)) ? Number(n).toLocaleString('en-US', { maximumFractionDigits: 2 }) : n);
// Show a number as-is (0 stays 0, matching the detail page) — dash only when truly missing.
const numOrDash = (v) => (v === null || v === undefined || v === '' ? '—' : formatNumber(v));
/**
* "New Project" — a single link straight to the create form (user decision 2026-08-19).
* It used to be a split button whose caret opened an origin menu (Blank / From Quotation /
* LWR / Sample Order / Visit Plan) that preset the initial line status via `?from=`. The
* origins were dropped from the UI; the server still honours `?from=` (see
* CompanyProjectController::SOURCE_ITEM_STATUS) but nothing links to it any more.
*/
function NewProjectButton() {
return (
New Project
);
}
/** Header "Status Guide" — help popover listing every status with its dot + description. */
function StatusGuide() {
const [open, setOpen] = useState(false);
return (
{open && (
<>
setOpen(false)} />
Status Guide
{STATUS_GUIDE.map((s) => (
{STATUS_NAME[s.id]}{s.desc}
))}
)}
);
}
// Expandable row for the peek VIEW sidebar — HOVER version (user 2026-07-30): hovering the
// row reveals the detail children; a click PINS it open (so it survives mouse-leave and works
// on touch, where hover doesn't exist). Module-scoped so state survives parent re-renders.
// Stacked label / value cell for an expanded detail — reads like the old detail-page
// hover tooltip (muted caption on top, value below). Works in 1- or 2-column grids.
function KV({ label, children }) {
return (
{label}
{(children ?? '') === '' ? '—' : children}
);
}
// ── Peek VIEW mode — clean read-first detail sidebar, a port of the proto board's
// renderDetail (Pages/Proto/Projects/Board.jsx). Card click opens THIS instead of the
// form-style accordions; the Update button (footer or card) switches the drawer to the
// existing editable accordion form. Status/Priority/Sales stay editable here via
// StripControls when the scope can write — the same saves as edit mode.
function PeekDetailView({ card, scope, editData, editLoading, statuses, priorities, salesUsers, stripStatusId, onOpenStatus, onSaved, onClose, onEdit, onHistory }) {
const lines = card.lines ?? [];
const comps = card.competitors ?? [];
const totalValue = lines.reduce((s, l) => s + (Number(l.value) || 0), 0);
const Fact = ({ label, span2 = false, children }) => (
{label}
{children || '—'}
);
const SectionTitle = ({ children }) => (
{children}
);
// Always-visible number cell inside a product/competitor row.
const Stat = ({ label, accent = false, children }) => (
);
}
// ── Editable drawer sections (own/all/head only — pm/sm/mm keep the read-only branch
// below unchanged) ──────────────────────────────────────────────────────────────────
// Field lists, payload shapes and save handlers mirror Detail.jsx's HeaderCard /
// TargetFieldsForm / ColorindoLineRow / CompetitorLineRow / AddColorindoLine /
// AddCompetitorLine exactly; the only structural difference is every `onSaved()` call
// here runs the caller's `afterSave` (reload board columns + re-fetch editData) instead
// of `router.reload({ only: ['details'] })`.
// Full header-update payload, shared by both header save paths (Project section here and
// the top-strip Priority/Sales in StripControls). The endpoint (UpdateCompanyProjectHeaderRequest)
// wants ProjectTitle/ProjectDescription/ProjectPriority/UserIDSales together; CommentProject and
// CompanyCP are `sometimes|required`, so they're only INCLUDED WHEN NON-EMPTY — sending an empty
// string/0 would trip the `required`/`exists` rules and fail a save that only meant to change
// something else. Each caller supplies its own edited fields + reads the rest, unchanged, from
// the latest `editData.header`, so the two sections stay decoupled yet always post a complete row.
function headerPayload(scope, { ProjectTitle, ProjectDescription, ProjectPriority, UserIDSales, CommentProject, CompanyCP }) {
const payload = { scope, ProjectTitle, ProjectDescription, ProjectPriority, UserIDSales };
if (CommentProject) payload.CommentProject = CommentProject;
if (CompanyCP) payload.CompanyCP = CompanyCP;
return payload;
}
// FIX 2 + 3: the top "Control Panel Mini" strip, editable when canWrite. Status opens the
// EXISTING drag/status modal (backend needs a remark, so no bare-select write) pre-filled with
// all of the card's Colorindo line ids + the chosen status; the parent's onOpenStatus wires
// that up and submitStatusChange finishes it. Priority + Sales are a small form that posts the
// FULL header payload (its own fields + the rest read unchanged from `header`); on save the
// parent's onSaved (reload columns + refetch editData) also refreshes this strip and the card,
// fixing the stale-chip issue. Same keep-current-if-missing fallback as elsewhere.
function StripControls({ scope, header, statuses, priorities, salesUsers, currentStatusId, onOpenStatus, onSaved }) {
const { show } = useToast();
const form = useForm({ ProjectPriority: header.priorityId, UserIDSales: header.salesId });
const http = useHttp({});
const save = async () => {
http.transform(() => headerPayload(scope, {
ProjectTitle: header.projectTitle, ProjectDescription: header.projectDescription,
CommentProject: header.comment, CompanyCP: header.companyCpId,
ProjectPriority: form.data.ProjectPriority, UserIDSales: form.data.UserIDSales,
}));
try {
await http.post(route('company-projects.header.update', header.id));
show('Project berhasil disimpan', 'success');
onSaved();
} catch {
show('Gagal menyimpan project', 'error');
}
};
return (
{/* Status: a trigger, not a bound write — onChange opens the modal. The current
status shows so the field isn't blank; selectable options exclude only the
current value (Created included — it's a normal target now). */}
onOpenStatus(e.target.value)}
style={{ borderLeftColor: STATUS_ACCENT[currentStatusId], borderLeftWidth: '3px' }}>
{currentStatusId
?
: }
{statuses.filter((s) => s.ID !== Number(currentStatusId))
.map((s) => )}
form.setData('ProjectPriority', e.target.value)}>
{!priorities.some((p) => p.ID === header.priorityId) && header.priorityId
? : null}
{priorities.map((p) => )}
form.setData('UserIDSales', e.target.value)}>
{!salesUsers.some((u) => u.ID === header.salesId) && header.salesId
? : null}
{salesUsers.map((u) => )}
{/* Always visible (like the other sections' Save buttons) — the POST goes through a
separate useHttp, so useForm.isDirty wouldn't reset after a save and would linger. */}
);
}
export default function CompanyProjectBoard({
scope, canCreate = false, canCreateDocs = {}, filters = {}, filterOptions = {}, statuses = [], priorities = [],
created, earlyStage, labTesting, approved, quotation, closed,
}) {
const { show: showToast } = useToast();
// Picks the self vs on-behalf create route per company (see projectCreateTargets).
const currentUserId = Number(usePage().props.auth?.user?.ID ?? 0);
const optionsHttp = useHttp({});
// Dedicated instance for the status-change write. `updateLineStatus()` (Task 6) returns a
// plain JSON response, not an Inertia response — router.post() would reject it client-side
// ("must receive a valid Inertia response") since Inertia's Response.process() checks for
// the X-Inertia header before ever calling onSuccess. useHttp's XHR client has no such
// check, so it's the correct transport for this non-navigational, JSON-returning write
// (per CLAUDE.md: useHttp for non-navigation actions; router/useForm for redirect-backed
// full-page visits). Backed by an empty {} — .transform() supplies the real payload at
// submit time (same idiom Create.jsx uses for its own POST).
const statusHttp = useHttp({});
const columnData = { created, earlyStage, labTesting, approved, quotation, closed };
const [createMenuOpen, setCreateMenuOpen] = useState(false);
const [peekCard, setPeekCard] = useState(null);
const [peekLayout, setPeekLayout] = useState('side'); // 'side' = card click · 'center' = Update button (popup)
// Save for the edit popup lives in the modal HEADER, next to the title — the body below is
// ProjectDetailContent, which hands its saveAll up through registerSaveAll.
const popupSaveRef = useRef(null);
const [popupSaving, setPopupSaving] = useState(false);
const [peekMode, setPeekMode] = useState('view'); // 'view' = clean detail sidebar (card click) · 'edit' = accordion form (Update)
const [dragCard, setDragCard] = useState(null);
const [dropTarget, setDropTarget] = useState(null); // { column, card }
const [filtersOpen, setFiltersOpen] = useState(false);
const [ongoing, setOngoing] = useState(false); // "Ongoing" preset toggle (in-progress statuses + date min = today)
// Editable drawer: fetched fresh on every peekCard open (and after every save) —
// see the file-header comment for why this can't just be an Inertia page prop.
const [editData, setEditData] = useState(null);
const [editLoading, setEditLoading] = useState(false);
const editHttp = useHttp({});
useEffect(() => {
if (!peekCard) {
setEditData(null);
return;
}
let cancelled = false;
setEditLoading(true);
editHttp.get(route('company-projects.details.edit-data', { detail: peekCard.detailId, scope }))
.then((data) => { if (!cancelled) setEditData(data); })
.catch(() => { if (!cancelled) showToast('Gagal memuat data project', 'error'); })
.finally(() => { if (!cancelled) setEditLoading(false); });
return () => { cancelled = true; };
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [peekCard?.detailId]);
// Silent background refresh (no loading flag) after a section save succeeds — keeps
// the drawer's own fields in sync with what the server just persisted/computed.
const refreshEditData = () => {
if (!peekCard) return;
editHttp.get(route('company-projects.details.edit-data', { detail: peekCard.detailId, scope }))
.then((data) => setEditData(data))
.catch(() => {});
};
// Full-project data for the edit popup — same payload Detail.jsx (/company-projects/:id)
// consumes, so the popup renders the exact same ProjectDetailContent for the WHOLE project.
const [projectData, setProjectData] = useState(null);
const [projectLoading, setProjectLoading] = useState(false);
const projectHttp = useHttp({});
useEffect(() => {
if (!peekCard || peekMode !== 'edit') {
setProjectData(null);
return;
}
let cancelled = false;
setProjectLoading(true);
projectHttp.get(route('company-projects.project-edit-data', { project: peekCard.projectId, scope }))
.then((data) => { if (!cancelled) setProjectData(data); })
.catch(() => { if (!cancelled) showToast('Gagal memuat data project', 'error'); })
.finally(() => { if (!cancelled) setProjectLoading(false); });
return () => { cancelled = true; };
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [peekCard?.projectId, peekMode]);
const refreshProjectData = () => {
if (!peekCard) return;
projectHttp.get(route('company-projects.project-edit-data', { project: peekCard.projectId, scope }))
.then((data) => setProjectData(data))
.catch(() => {});
};
// After a save inside the edit popup: reload the board columns (status/priority/title changes
// move cards between columns) and re-fetch the popup's project data.
const afterProjectSave = () => {
router.reload({ only: Object.keys(columnData) });
refreshProjectData();
};
// Every editable section's `onSaved` runs this: reload the board columns (a save can
// change the card's derived status/priority/title, moving it between columns — same
// reasoning as submitStatusChange's reload below) and re-fetch this card's edit data.
const afterSave = () => {
router.reload({ only: Object.keys(columnData) });
refreshEditData();
};
const [statusForm, setStatusForm] = useState(null); // { lineIds, itemStatusId, itemReasonId, remark }
const [reasonOptions, setReasonOptions] = useState([]);
const [busy, setBusy] = useState(false);
const [historyRows, setHistoryRows] = useState(null); // null = closed, [] = loaded-empty
// ── Multi-select (checkbox per product-card) → bulk actions ───────────────
// Keyed by line.id (companyprojectdetailcc id, globally unique). Value keeps the
// bits the bulk bar needs: product name, company (+id), current status, project.
const [selected, setSelected] = useState(() => new Map());
const clearSel = () => setSelected(new Map());
const toggleSel = (line, card) => setSelected((m) => {
const n = new Map(m);
if (n.has(line.id)) n.delete(line.id);
else n.set(line.id, {
lineId: line.id, product: line.product, company: card.company,
companyId: card.companyId ?? null, companySalesId: card.companySalesId ?? 0,
itemStatusId: line.itemStatusId, projectId: card.projectId,
});
return n;
});
const selLines = [...selected.values()];
const selCompanyIds = new Set(selLines.map((s) => s.companyId).filter((v) => v != null));
const selCompanyNames = new Set(selLines.map((s) => s.company));
// Create Project needs ONE company (a project = one company). Prefer id; fall back to name.
const sameCompany = selLines.length > 0 && (selCompanyIds.size <= 1) && (selCompanyNames.size === 1);
// Bulk Change Status: reuse the drag/status modal (statusForm + submitStatusChange),
// seeded with EVERY selected line id and a full 8-status picker.
const openBulkStatus = () => {
const lines = selLines.map((s) => ({ id: s.lineId, product: s.product, itemStatusId: s.itemStatusId }));
setDropTarget({ column: { statusIds: ALL_STATUS_IDS }, card: { lines } });
setStatusForm({ lineIds: lines.map((l) => l.id), itemStatusId: null, itemReasonId: null, remark: '', tanggal: '' });
setReasonOptions([]);
};
// Change Status directly from a single product card — same modal/flow as bulk/drag, seeded
// with just this one line and a full 8-status picker.
const openStatusForLine = (line) => {
setDropTarget({ column: { statusIds: ALL_STATUS_IDS }, card: { lines: [line] } });
setStatusForm({ lineIds: [line.id], itemStatusId: null, itemReasonId: null, remark: '', tanggal: '' });
setReasonOptions([]);
};
// Create Project from the selection → carry the picked line ids (+company) to Create.
const createFromSelection = () => {
if (!sameCompany) return;
const companyId = selLines[0].companyId;
router.get(route('company-projects.create'), {
prefillLines: selLines.map((s) => s.lineId).join(','),
...(companyId ? { company: companyId } : {}),
});
};
// "Create from the checked lines" — legacy listproject.php opens ONE TAB PER
// COMPANY (user decision 2026-08-05), so this deliberately does not navigate.
//
// Browsers only grant one window.open per user gesture unless popups are allowed for
// the site, so tabs 2..n are commonly blocked. window.open returns null when that
// happens — say so rather than letting the user believe the other companies had no
// lines. Client-side toast is correct here: no Inertia visit happens, so there is no
// server flash channel (.claude/rules/notifications.md).
const openCreateTargets = (target) => {
const targets = projectCreateTargets(selLines, target, currentUserId, route);
setCreateMenuOpen(false);
if (targets.length === 0) return;
const blocked = targets.filter((t) => !window.open(t.url, '_blank')).length;
if (blocked > 0) {
showToast(
`${blocked} of ${targets.length} tab(s) were blocked. Allow pop-ups for this site, then try again.`,
'warning',
);
}
};
// Free-text filters (Project ID / Product ID) are local until committed (Enter/blur) so
// every keystroke doesn't fire a round trip; re-sync if the server value changes under us
// (e.g. after a Reset).
const [idText, setIdText] = useState(filters.id ?? '');
const [productText, setProductText] = useState(filters.productId ?? '');
useEffect(() => setIdText(filters.id ?? ''), [filters.id]);
useEffect(() => setProductText(filters.productId ?? ''), [filters.productId]);
const applyFilters = (patch) => {
router.get(route(routeForScope(scope)), { ...filters, ...patch }, {
preserveState: true, preserveScroll: true, only: ['filters', ...Object.keys(columnData)],
});
};
const loadMore = (columnId) => {
const nextCount = (columnData[columnId]?.cards.length ?? 0) + 24;
router.get(route(routeForScope(scope)), { ...filters, [`${columnId}Count`]: nextCount }, {
preserveState: true, preserveScroll: true, only: [columnId],
});
};
// Toggle one value in a multi-select (array) filter.
const toggleMulti = (key, value) => {
const cur = filters[key] ?? [];
const has = cur.map(String).includes(String(value));
applyFilters({ [key]: has ? cur.filter((x) => String(x) !== String(value)) : [...cur, value] });
};
const resetFilters = () => { setOngoing(false); applyFilters(EMPTY_FILTERS); };
const activeFilterCount = Object.keys(EMPTY_FILTERS).filter((key) => {
const v = filters[key];
return Array.isArray(v) ? v.length > 0 : Boolean(v);
}).length;
// The keys tucked behind "More filters" (Stage/Priority/Principal are surfaced as pills).
const MORE_KEYS = ['companyId', 'divisionId', 'industryId', 'applicationId', 'salesId', 'creatorId', 'id', 'productId'];
const moreActiveCount = MORE_KEYS.filter((k) => {
const v = filters[k];
return Array.isArray(v) ? v.length > 0 : Boolean(v);
}).length;
// Today as YYYY-MM-DD in LOCAL time (en-CA yields ISO date order) for the status-date `min`.
const todayStr = new Date().toLocaleDateString('en-CA');
const onDrop = (column, card) => {
if (!dragCard) return;
const candidateStatuses = column.statusIds;
setDropTarget({ column, card });
setStatusForm({
lineIds: card.lines.map((l) => l.id), // pre-check every line; user can uncheck in the popover
itemStatusId: candidateStatuses.length > 1 ? null : candidateStatuses[0], // null => ask which sub-status
itemReasonId: null,
remark: '',
tanggal: '', // UI-only for now (not posted) — see the status-date field in the modal
});
setDragCard(null);
};
const onPickSubStatus = async (statusId) => {
setStatusForm((f) => ({ ...f, itemStatusId: statusId, itemReasonId: null }));
if ([7, 8].includes(statusId)) {
const reasons = await optionsHttp.get(route('company-projects.options.status-reasons', statusId));
setReasonOptions(reasons || []);
} else {
setReasonOptions([]);
}
};
// FIX 2: current derived status shown in the drawer's top-strip Status select — from
// editData's live line statuses when loaded (so it reflects a just-saved change), else the
// board card's derived value. MIN() mirrors the server's column-derivation rule.
const stripStatusId = editData?.detail?.colorindoLines?.length
? Math.min(...editData.detail.colorindoLines.map((l) => Number(l.itemStatusId)))
: (peekCard?.derivedStatusId ?? '');
// FIX 2: changing the top-strip Status opens the SAME status-change modal the drag flow
// uses (setDropTarget + setStatusForm), pre-filled with every Colorindo line id + the chosen
// status, then finished via submitStatusChange — the backend requires a remark, so this must
// go through the modal, not a bare select. Reasons are fetched for Failed(7)/Commercialized(8),
// exactly like onPickSubStatus. Selecting the current status is a no-op.
const openStatusFromStrip = async (value) => {
const statusId = Number(value);
if (!statusId || statusId === Number(stripStatusId)) return;
const lines = editData?.detail?.colorindoLines?.length
? editData.detail.colorindoLines.map((l) => ({ id: l.id, product: l.productName, itemStatusId: l.itemStatusId }))
: (peekCard?.lines ?? []);
// A single-status column so the modal skips its sub-status picker; card.lines feeds the
// multi-line "which line(s)?" checkboxes, which submitStatusChange already handles.
setDropTarget({ column: { statusIds: [statusId] }, card: { lines } });
setStatusForm({ lineIds: lines.map((l) => l.id), itemStatusId: statusId, itemReasonId: null, remark: '', tanggal: '' });
if ([7, 8].includes(statusId)) {
const reasons = await optionsHttp.get(route('company-projects.options.status-reasons', statusId));
setReasonOptions(reasons || []);
} else {
setReasonOptions([]);
}
};
const submitStatusChange = () => {
if (!statusForm?.itemStatusId || !statusForm.remark || statusForm.lineIds.length === 0) return;
if ([7, 8].includes(statusForm.itemStatusId) && !statusForm.itemReasonId) return;
setBusy(true);
// .transform() overrides the submitted body regardless of the hook's bound `data`
// (which stays `{}` the whole time) — the callback's own argument is ignored on
// purpose so this always sends the LATEST statusForm/scope read at submit time.
statusHttp.transform(() => ({
scope, lineIds: statusForm.lineIds, itemStatusId: statusForm.itemStatusId,
itemReasonId: statusForm.itemReasonId, remark: statusForm.remark,
}));
statusHttp.post(route('company-projects.lines.update-status'), {
onSuccess: () => {
showToast('Status berhasil diubah', 'success');
setStatusForm(null);
setDropTarget(null);
clearSel(); // a bulk change consumes the selection
// A plain useHttp POST doesn't refresh Inertia's page props the way a router
// visit does — a status change can move a card between any two of the 6
// columns, so reload all of them rather than guessing which two changed.
router.reload({ only: Object.keys(columnData) });
// FIX 2: when the status change was launched from the OPEN drawer's top-strip
// Status select, refresh its edit data too so the strip + line statuses reflect
// it. No-ops during the drag flow (drawer closed → peekCard null).
refreshEditData();
},
// useHttp splits failures into 3 callbacks (unlike router.post's single onError):
// onError = 422 validation, onHttpException = other HTTP errors (403/500/…),
// onNetworkError = offline/connection failure. Cover all three with the same
// toast so any failure mode surfaces the same as before.
onError: () => showToast('Please check the form and try again.', 'error'),
onHttpException: () => showToast('Ada kesalahan, periksa kembali', 'error'),
onNetworkError: () => showToast('Ada kesalahan, periksa kembali', 'error'),
onFinish: () => setBusy(false),
}).catch(() => {}); // submit() rethrows after invoking the callbacks above; already handled.
};
const loadHistory = async (lineId) => {
const rows = await optionsHttp.get(route('company-projects.lines.history', { detailCc: lineId, scope }));
setHistoryRows(rows || []);
};
// Real option lists, sourced from the server (replacing the proto's hardcoded arrays).
const companyOpts = (filterOptions.companies ?? []).map((c) => ({ value: c.ID, label: c.CompanyName }));
const divisionOpts = (filterOptions.divisions ?? []).map((d) => ({ value: d.ID, label: d.DivisionName }));
const industryOpts = (filterOptions.industries ?? []).map((i) => ({ value: i.ID, label: i.IndustryName }));
const principalOpts = (filterOptions.principals ?? []).map((p) => ({ value: p.ID, label: p.PrincipalName }));
const applicationOpts = (filterOptions.applications ?? []).map((a) => ({ value: a.ID, label: a.ApplicationName }));
const salesOpts = (filterOptions.salesUsers ?? []).map((u) => ({ value: u.ID, label: u.Nama }));
const creatorOpts = (filterOptions.creatorUsers ?? []).map((u) => ({ value: u.ID, label: u.Nama }));
const priorityOpts = priorities.map((p) => ({ value: p.ID, label: p.PriorityName }));
return (
Projects›Company Project Board
Company Project Board
{canCreate && }
{/* Proto-style filter toolbar: quick pills open their dropdown on click; the rest
sit behind "More filters". Wiring is unchanged — pills call the same server-driven
applyFilters()/toggleMulti() the old panel used. */}
({ value: s.ID, label: s.StatusName }))}
onPick={(v) => toggleMulti('statusIds', v)} />
toggleMulti('priorityId', v)} />
toggleMulti('principalId', v)} />
{/* Ongoing preset — in-progress statuses (Exploring…Quotation) + date min = today */}
{/* Target-date "From" filter — its min flips to today while Ongoing is on */}
{/* More filters — the remaining fields in a dropdown panel */}
{col.label}{data.cards.reduce((n, c) => n + c.lines.length, 0)}
{/* Thin, token-coloured scrollbar. The browser default is a ~15px grey
gutter — inside a 320px column that is a wide slab of chrome next to
every card. Written as arbitrary variants, not bespoke CSS in
app.css (design-system rule: app.css carries no bespoke rules). */}
{/* One card per PRODUCT (companyprojectdetailcc line). `productCard` carries
just this line so a drag moves only this product's status. Competitors moved
off the card face into the hover button. Placement is still per-detail (server
buckets a whole detail by its lowest line status), so a product's badge can
differ from its column — fixing that needs a server change. */}
{data.cards.flatMap((card) => card.lines.map((line) => {
const productCard = { ...card, lines: [line] };
const isSel = selected.has(line.id);
return (
{/* Peek/edit drawer — right-side panel, a literal port of proto's drawer chrome
(Pages/Proto/Projects/Board.jsx): same "Control Panel Mini" header with
Status/Priority/Sales fields + Target strip, same 3 accordion sections. When
canWrite (own/all/head) the strip becomes EDITABLE (StripControls, FIX 2+3):
Status opens the status-change modal, Priority/Sales save the header. When
loading or read-only (pm/sm/mm) the strip stays the pre-existing disabled selects
from `peekCard`. The accordion BODY below branches on `editData.canWrite` (fetched
on open, see the effect above): pm/sm/mm render read-only fields from `peekCard`;
own/all/head render the editable sections (EditHeaderForm etc.) from `editData`. */}
setPeekCard(null)} labelledBy="peekTitle" variant={peekLayout === 'center' ? 'center' : 'side'}>
{peekCard && peekMode === 'view' && (
setPeekCard(null)}
onEdit={() => { setPeekLayout('center'); setPeekMode('edit'); }}
onHistory={loadHistory}
/>
)}
{peekCard && peekMode === 'edit' && (
(projectLoading || !projectData) ? (
Loading…
) : (
<>
{/* Header — the popup chrome; the body below is the exact /company-projects/:id
content (ProjectDetailContent), embedded (no breadcrumb/tabs/activity). */}