design_guidelines.json

{
  "project_title": "Work Orders Page Layout & Inline Editing Refactor (Comandă de Lucru)",
  "context_type": "DASHBOARDS & ADMIN PANELS",
  "archetype": "ARCHETYPE 2: THE PERFORMANCE PRO & SWISS TACTICAL AUTOMOTIVE ERP",
  "theme": {
    "default_mode": "dark",
    "color_palette": {
      "background": "#090D14",
      "surface_card": "#111723",
      "surface_card_hover": "#172030",
      "border_default": "#1E293B",
      "border_focus": "#38BDF8",
      "primary": "#38BDF8",
      "primary_foreground": "#090D14",
      "accent_amber": "#F59E0B",
      "accent_emerald": "#10B981",
      "accent_rose": "#F43F5E",
      "text_main": "#F8FAFC",
      "text_muted": "#94A3B8",
      "text_dim": "#64748B"
    }
  },
  "typography": {
    "heading_font": "Barlow Condensed, sans-serif",
    "body_font": "IBM Plex Sans, sans-serif",
    "mono_font": "JetBrains Mono, monospace",
    "rules": {
      "h1": "font-heading uppercase tracking-wide text-3xl sm:text-4xl text-slate-100 font-extrabold",
      "h2": "font-heading uppercase tracking-wider text-xl sm:text-2xl text-slate-200 font-bold",
      "h3": "font-heading text-lg font-semibold text-slate-300",
      "numbers_totals": "font-mono font-bold tracking-tight text-slate-100",
      "labels": "text-xs font-semibold uppercase tracking-widest text-slate-400"
    }
  },
  "layout_refactoring": {
    "mode": "FULL_WIDTH_SINGLE_COLUMN",
    "description": "Migration from old 2-column layout to 100% full-width workspace with maximum horizontal real estate for dynamic inline editing tables.",
    "top_bar": {
      "sticky": true,
      "background": "bg-[#090d14]/90 backdrop-blur-md border-b border-slate-800/80 z-30 p-4",
      "elements": [
        "Breadcrumb & Back to Work Orders button (data-testid='btn-back-work-orders')",
        "Work Order Code & Status Badge (e.g., 'CL-2026-0894' & Status: În Lucru / Finalizată)",
        "Summary metrics pill (Subtotal Manoperă, Subtotal Piese, TVA, Total General)",
        "Action controls: Save Order (data-testid='btn-save-work-order'), Print PDF (data-testid='btn-print-work-order'), Status Dropdown (data-testid='select-status')"
      ]
    },
    "sections": [
      {
        "id": "wo_header_info",
        "title": "Date Generale Comandă & Vehicul",
        "layout": "grid grid-cols-1 md:grid-cols-4 gap-4 p-4 rounded-xl bg-[#111723] border border-slate-800 mb-6"
      },
      {
        "id": "labor_table_section",
        "title": "Tabel Manoperă (Labor Operations)",
        "layout": "w-full rounded-xl bg-[#111723] border border-slate-800 p-6 mb-6 overflow-x-auto"
      },
      {
        "id": "parts_table_section",
        "title": "Tabel Piese & Materiale (Parts & Materials)",
        "layout": "w-full rounded-xl bg-[#111723] border border-slate-800 p-6 mb-6 overflow-x-auto"
      },
      {
        "id": "financial_recalculation_summary",
        "title": "Sumar Financiar & Recalculare Automată",
        "layout": "w-full grid grid-cols-1 lg:grid-cols-3 gap-6 rounded-xl bg-[#111723] border border-slate-800 p-6 mb-8"
      }
    ]
  },
  "inline_editing_spec": {
    "labor_table": {
      "add_row_trigger": "data-testid='btn-add-labor-row'",
      "editable_fields_post_add": [
        {
          "field": "name_description",
          "label": "Denumire Operațiune / Descriere",
          "type": "text/textarea",
          "data_testid": "input-labor-name-row-{id}"
        },
        {
          "field": "hours_quantity",
          "label": "Ore Normative / Cantitate",
          "type": "number",
          "step": "0.1",
          "data_testid": "input-labor-hours-row-{id}"
        },
        {
          "field": "hourly_rate",
          "label": "Tarif Orar / Preț Unitar (RON)",
          "type": "number",
          "step": "1",
          "data_testid": "input-labor-rate-row-{id}"
        },
        {
          "field": "discount",
          "label": "Discount (%)",
          "type": "number",
          "min": 0,
          "max": 100,
          "data_testid": "input-labor-discount-row-{id}"
        },
        {
          "field": "mechanic_id",
          "label": "Mecanic Alocat",
          "type": "select",
          "data_testid": "select-labor-mechanic-row-{id}"
        }
      ],
      "actions": [
        "Inline Edit Button: data-testid='btn-edit-labor-row-{id}'",
        "Inline Save Button: data-testid='btn-save-labor-row-{id}'",
        "Inline Cancel Button: data-testid='btn-cancel-labor-row-{id}'",
        "Inline Delete Button: data-testid='btn-delete-labor-row-{id}'"
      ]
    },
    "parts_table": {
      "add_row_trigger": "data-testid='btn-add-part-row'",
      "editable_fields_post_add": [
        {
          "field": "code_name",
          "label": "Cod Piesă / Denumire",
          "type": "text",
          "data_testid": "input-part-code-name-row-{id}"
        },
        {
          "field": "quantity",
          "label": "Cantitate",
          "type": "number",
          "step": "1",
          "data_testid": "input-part-qty-row-{id}"
        },
        {
          "field": "unit_price",
          "label": "Preț de Vânzare Unitar (RON)",
          "type": "number",
          "step": "0.01",
          "data_testid": "input-part-price-row-{id}"
        },
        {
          "field": "discount",
          "label": "Discount (%)",
          "type": "number",
          "min": 0,
          "max": 100,
          "data_testid": "input-part-discount-row-{id}"
        },
        {
          "field": "source_info",
          "label": "Furnizor / Depozit Sursă (Read-only preserve existing)",
          "type": "text_readonly",
          "data_testid": "part-source-row-{id}"
        }
      ],
      "actions": [
        "Inline Edit Button: data-testid='btn-edit-part-row-{id}'",
        "Inline Save Button: data-testid='btn-save-part-row-{id}'",
        "Inline Cancel Button: data-testid='btn-cancel-part-row-{id}'",
        "Inline Delete Button: data-testid='btn-delete-part-row-{id}'"
      ]
    }
  },
  "recalculation_rules": {
    "line_total_formula": "rowTotal = (quantity * unitPrice) * (1 - discount / 100)",
    "labor_subtotal_formula": "subtotalLabor = sum(laborRowTotals)",
    "parts_subtotal_formula": "subtotalParts = sum(partsRowTotals)",
    "subtotal_net_formula": "subtotalNet = subtotalLabor + subtotalParts",
    "vat_formula": "vatAmount = subtotalNet * (vatRate / 100)",
    "grand_total_formula": "grandTotal = subtotalNet + vatAmount",
    "trigger": "Recalculate automatically on every inline input change or line save."
  },
  "status_based_locking": {
    "editable_statuses": ["Draft", "În Lucru", "În Așteptare"],
    "locked_status": "Finalizată",
    "behavior": "When status is 'Finalizată' (or Invoiced/Closed), all table inputs become disabled/read-only, add/edit/delete buttons are hidden or disabled, and a persistent lock banner is displayed."
  },
  "image_urls": {
    "workshop_banner": {
      "url": "https://images.unsplash.com/photo-1615906655593-ad0386982a0f?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NTY2NzZ8MHwxfHNlYXJjaHwxfHxhdXRvJTIwbWVjaGFuaWMlMjByZXBhaXJpbmclMjBjYXIlMjB3b3Jrc2hvcCUyMGdhcmFnZXxlbnwwfHx8YmxhY2t8MTc5MjM1NjMxMHww&ixlib=rb-4.1.0&q=85",
      "description": "Mechanic working on car engine in modern service bay",
      "usage": "Optional header avatar / hero background widget for work order workspace"
    }
  },
  "instructions_to_main_agent": [
    "Refactor WorkOrderDetail.js and WorkOrders.js to use full-width single column workspace layout.",
    "Implement inline editing directly on table rows using stateful inline input fields or inline popovers for labor and parts.",
    "Ensure immediate automatic recalculation of subtotal Manoperă, subtotal Piese, TVA (19%), and Total Deviz upon editing any cell.",
    "Enforce status locking: when work order status is 'Finalizată', disable all editing actions and show lock status banner.",
    "Add explicit data-testid attributes to all editable inputs, buttons, totals, and table rows.",
    "Use standard JavaScript (.js) files as configured in the frontend codebase."
  ],
  "UNIVERSAL GUIDELINES FOR MAIN AGENT": [
    "DO NOT use pure transparent backgrounds on floating panels, dropdowns, or sticky headers. Always combine background colors with backdrop-blur.",
    "Ensure high contrast APCA standards for dark theme text (e.g., text-slate-100 on bg-[#111723]).",
    "All interactive elements MUST contain data-testid attributes for automated testing."
  ]
}