src/ApplicationBundle/Modules/System/Resources/views/layouts/main_layout.html.twig line 1

Open in your IDE?
  1. {#
  2.   @System/layouts/main_layout.html.twig
  3.   Base layout for CoPilot module and AI cockpit views.
  4.   Usage: {% extends '@System/layouts/main_layout.html.twig' %}
  5.   Blocks: title, breadcrumb, body, page_actions
  6. #}
  7. {% set page_title = block('title') %}
  8. {% include '@Application/codecovers_header.html.twig' %}
  10. {# ── CoPilot design tokens (scoped, separate from legacy ERP tokens) ─────── #}
  11. <style>
  12.   :root {
  13.     --cp-primary:          #854f00;
  14.     --cp-primary-hover:    #6d4000;
  15.     --cp-on-primary:       #ffffff;
  16.     --cp-amber:            #ffb86a;
  17.     --cp-amber-dim:        rgba(133,79,0,.10);
  18.     --cp-surface:          #f9f9f8;
  19.     --cp-surface-low:      #f3f4f3;
  20.     --cp-surface-container:#eeeeed;
  21.     --cp-surface-high:     #e8e8e7;
  22.     --cp-surface-white:    #ffffff;
  23.     --cp-text:             #1a1c1c;
  24.     --cp-text-muted:       #524437;
  25.     --cp-text-faint:       #847465;
  26.     --cp-outline:          #847465;
  27.     --cp-outline-variant:  #E5E5E5;
  28.     --cp-error:            #ba1a1a;
  29.     --cp-success:          #2e7d32;
  30.     --cp-warn:             #f57c00;
  31.     --cp-sidebar-w:        200px;
  32.     --cp-topbar-h:         52px;
  33.     --cp-radius:           8px;
  34.     --cp-radius-lg:        12px;
  35.     --cp-shadow-card:      0 1px 6px rgba(26,28,28,.07), 0 0 0 1px rgba(133,79,0,.05);
  36.     --cp-font-head:        'Montserrat', 'DM Sans', system-ui, sans-serif;
  37.     --cp-font-body:        'DM Sans', system-ui, sans-serif;
  38.     --cp-font-mono:        'JetBrains Mono', 'Courier New', monospace;
  39.     /* Typography SIZE scale (--cp-fs-*) is defined globally in
  40.        @Application/codecovers_header.html.twig (included above, and by ~395
  41.        other templates) so every page shares one scale — not just cp-shell
  42.        pages. Use those tokens; never hard-code font-size or bare rem. */
  43.   }
  45.   /* ── Layout shell ─────────────────────────────────────────────────────── */
  46.   .cp-shell {
  47.     display: flex;
  48.     height: 100vh;
  49.     overflow: hidden;
  50.     background: var(--cp-surface);
  51.     font-family: var(--cp-font-body);
  52.     color: var(--cp-text);
  53.   }
  55.   /* ── Sidebar ───────────────────────────────────────────────────────────── */
  56.   .cp-sidebar {
  57.     width: var(--cp-sidebar-w);
  58.     min-width: var(--cp-sidebar-w);
  59.     background: var(--cp-surface-white);
  60.     border-right: 1px solid var(--cp-outline-variant);
  61.     display: flex;
  62.     flex-direction: column;
  63.     overflow-y: auto;
  64.     z-index: 100;
  65.   }
  67.   .cp-sidebar-brand {
  68.     padding: 16px 14px 10px;
  69.     border-bottom: 1px solid var(--cp-outline-variant);
  70.   }
  72.   .cp-sidebar-brand-name {
  73.     font-family: var(--cp-font-head);
  74.     font-size: var(--cp-fs-base, 13px);
  75.     font-weight: 700;
  76.     color: var(--cp-primary);
  77.     letter-spacing: -0.01em;
  78.   }
  80.   .cp-sidebar-context {
  81.     font-size: var(--cp-fs-xs, 11.5px);
  82.     font-weight: 500;
  83.     color: var(--cp-text-muted);
  84.     text-transform: uppercase;
  85.     letter-spacing: 0.06em;
  86.     margin-top: 2px;
  87.   }
  89.   .cp-sidebar-section {
  90.     padding: 14px 14px 6px;
  91.   }
  93.   .cp-sidebar-section-label {
  94.     font-family: var(--cp-font-mono);
  95.     font-size: 11px;
  96.     font-weight: 600;
  97.     color: var(--cp-text-faint);
  98.     text-transform: uppercase;
  99.     letter-spacing: 0.08em;
  100.     margin-bottom: 6px;
  101.   }
  103.   .cp-badge-active {
  104.     display: inline-flex;
  105.     align-items: center;
  106.     gap: 4px;
  107.     background: var(--cp-amber-dim);
  108.     color: var(--cp-primary);
  109.     font-family: var(--cp-font-mono);
  110.     font-size: 11px;
  111.     font-weight: 600;
  112.     letter-spacing: 0.05em;
  113.     text-transform: uppercase;
  114.     padding: 2px 7px;
  115.     border-radius: 99px;
  116.     border: 1px solid rgba(133,79,0,.18);
  117.     margin-top: 4px;
  118.   }
  120.   .cp-badge-active::before {
  121.     content: '';
  122.     width: 5px;
  123.     height: 5px;
  124.     border-radius: 50%;
  125.     background: #2e7d32;
  126.     display: inline-block;
  127.   }
  129.   .cp-nav {
  130.     list-style: none;
  131.     margin: 0;
  132.     padding: 0 8px;
  133.   }
  135.   .cp-nav li { margin: 1px 0; }
  137.   .cp-nav-link {
  138.     display: flex;
  139.     align-items: center;
  140.     gap: 9px;
  141.     padding: 8px 10px;
  142.     border-radius: var(--cp-radius);
  143.     font-size: var(--cp-fs-sm, 12.5px);
  144.     font-weight: 500;
  145.     color: var(--cp-text-muted);
  146.     text-decoration: none;
  147.     transition: background 0.12s, color 0.12s;
  148.     white-space: nowrap;
  149.     overflow: hidden;
  150.   }
  152.   .cp-nav-link:hover {
  153.     background: var(--cp-surface-low);
  154.     color: var(--cp-text);
  155.     text-decoration: none;
  156.   }
  158.   .cp-nav-link.active {
  159.     background: var(--cp-amber-dim);
  160.     color: var(--cp-primary);
  161.     font-weight: 600;
  162.   }
  164.   .cp-nav-link .cp-nav-icon {
  165.     font-size: 14px;
  166.     width: 16px;
  167.     text-align: center;
  168.     flex-shrink: 0;
  169.   }
  171.   .cp-nav-divider {
  172.     height: 1px;
  173.     background: var(--cp-outline-variant);
  174.     margin: 8px 10px;
  175.   }
  177.   .cp-nav-step-badge {
  178.     margin-left: auto;
  179.     font-family: var(--cp-font-mono);
  180.     font-size: 11px;
  181.     font-weight: 600;
  182.     color: var(--cp-text-faint);
  183.   }
  185.   .cp-sidebar-footer {
  186.     margin-top: auto;
  187.     padding: 10px 8px 12px;
  188.     border-top: 1px solid var(--cp-outline-variant);
  189.   }
  191.   /* ── Main area ─────────────────────────────────────────────────────────── */
  192.   .cp-main {
  193.     flex: 1 1 0;
  194.     display: flex;
  195.     flex-direction: column;
  196.     overflow: hidden;
  197.   }
  199.   /* ── Topbar ────────────────────────────────────────────────────────────── */
  200.   .cp-topbar {
  201.     height: var(--cp-topbar-h);
  202.     background: var(--cp-surface-white);
  203.     border-bottom: 1px solid var(--cp-outline-variant);
  204.     display: flex;
  205.     align-items: center;
  206.     gap: 0;
  207.     padding: 0;
  208.     flex-shrink: 0;
  209.     z-index: 90;
  210.   }
  212.   .cp-topbar-logo {
  213.     display: flex;
  214.     align-items: center;
  215.     gap: 7px;
  216.     padding: 0 16px 0 20px;
  217.     font-family: var(--cp-font-head);
  218.     font-size: var(--cp-fs-base, 13px);
  219.     font-weight: 700;
  220.     color: var(--cp-primary);
  221.     letter-spacing: -0.01em;
  222.     white-space: nowrap;
  223.   }
  225.   .cp-topbar-logo .cp-logo-mark {
  226.     width: 24px;
  227.     height: 24px;
  228.     background: var(--cp-primary);
  229.     border-radius: 6px;
  230.     display: flex;
  231.     align-items: center;
  232.     justify-content: center;
  233.     color: var(--cp-on-primary, #fff);
  234.     font-size: 12px;
  235.   }
  237.   /* WHICH COMPANY AM I IN — users on multi-company logins could not tell, because this
  238.      topbar hard-coded the product name and never showed the tenant. Reuses the SAME
  239.      session keys as framework/_cp_topstrip.html.twig; no second source of truth. */
  240.   .cp-topbar-company {
  241.     display: flex;
  242.     align-items: center;
  243.     gap: 6px;
  244.     padding: 4px 11px;
  245.     margin-left: 2px;
  246.     border-radius: 999px;
  247.     border: 1px solid var(--cp-outline-variant);
  248.     background: var(--cp-surface-white);
  249.     font-family: var(--cp-font-body);
  250.     font-size: var(--cp-fs-sm);
  251.     font-weight: 700;
  252.     color: var(--cp-text);
  253.     white-space: nowrap;
  254.     max-width: 260px;
  255.     text-decoration: none;
  256.   }
  257.   .cp-topbar-company:hover { text-decoration: none; color: var(--cp-text); }
  258.   .cp-topbar-company .material-icons { font-size: var(--cp-fs-md, 15px); color: var(--cp-text-faint); }
  259.   .cp-topbar-company-nm { overflow: hidden; text-overflow: ellipsis; }
  260.   a.cp-topbar-company:hover { border-color: var(--cp-primary); }
  261.   @media (max-width: 720px) { .cp-topbar-company { max-width: 130px; } }
  263.   .cp-topbar-nav {
  264.     display: flex;
  265.     align-items: center;
  266.     gap: 0;
  267.     padding: 0 4px;
  268.     border-right: 1px solid var(--cp-outline-variant);
  269.   }
  271.   .cp-topbar-nav-item {
  272.     padding: 0 12px;
  273.     height: var(--cp-topbar-h);
  274.     display: flex;
  275.     align-items: center;
  276.     font-size: var(--cp-fs-sm, 12.5px);
  277.     font-weight: 500;
  278.     color: var(--cp-text-muted);
  279.     cursor: pointer;
  280.     border-bottom: 2px solid transparent;
  281.     text-decoration: none;
  282.     transition: color 0.1s, border-color 0.1s;
  283.   }
  285.   .cp-topbar-nav-item:hover { color: var(--cp-text); text-decoration: none; }
  287.   .cp-topbar-nav-item.active {
  288.     color: var(--cp-primary);
  289.     border-bottom-color: var(--cp-primary);
  290.     font-weight: 600;
  291.   }
  293.   .cp-topbar-ai-bar {
  294.     flex: 1 1 0;
  295.     padding: 0 16px;
  296.   }
  298.   .cp-topbar-ai-input {
  299.     width: 100%;
  300.     max-width: 480px;
  301.     height: 32px;
  302.     background: var(--cp-surface-low);
  303.     border: 1px solid var(--cp-outline-variant);
  304.     border-radius: 99px;
  305.     padding: 0 14px 0 34px;
  306.     font-size: 12px;
  307.     color: var(--cp-text);
  308.     font-family: var(--cp-font-body);
  309.     position: relative;
  310.     outline: none;
  311.   }
  313.   .cp-topbar-ai-wrap {
  314.     position: relative;
  315.     display: inline-flex;
  316.     align-items: center;
  317.   }
  319.   .cp-topbar-ai-wrap .cp-ai-icon {
  320.     position: absolute;
  321.     left: 10px;
  322.     font-size: var(--cp-fs-base, 13px);
  323.     color: var(--cp-primary);
  324.     pointer-events: none;
  325.   }
  327.   .cp-topbar-ai-input:focus {
  328.     background: var(--cp-surface-white);
  329.     border-color: var(--cp-primary);
  330.     box-shadow: 0 0 0 3px var(--cp-amber-dim);
  331.   }
  333.   .cp-topbar-bell { position: relative; text-decoration: none; }
  334.   .cp-topbar-bell:hover { text-decoration: none; }
  335.   .cp-topbar-bell-badge {
  336.     position: absolute; top: 1px; right: 0;
  337.     min-width: 15px; height: 15px; padding: 0 4px;
  338.     border-radius: 999px; background: var(--cp-error); color: var(--cp-on-primary, #fff);
  339.     font-family: var(--cp-font-mono); font-size: 9px; font-weight: 700;
  340.     line-height: 15px; text-align: center;
  341.   }
  342.   .cp-topbar-help { display: inline-block; }
  343.   .cp-topbar-help-menu { min-width: 190px; }
  344.   .cp-topbar-help-menu > li > a {
  345.     display: flex; align-items: center; gap: 9px;
  346.     padding: 8px 14px; font-size: var(--cp-fs-sm, 12.5px); color: var(--cp-text-muted);
  347.   }
  348.   .cp-topbar-help-menu > li > a:hover { background: var(--cp-surface-low); color: var(--cp-text); }
  349.   /* The report widget's FAB is redundant now it is in the Help menu — and it was pinned
  350.      bottom-left ON TOP of the sidebar footer's "Back to ERP". */
  351.   #si-fab { display: none !important; }
  353.   .cp-topbar-actions {
  354.     display: flex;
  355.     align-items: center;
  356.     gap: 4px;
  357.     padding: 0 14px;
  358.   }
  360.   .cp-topbar-icon-btn {
  361.     width: 32px;
  362.     height: 32px;
  363.     border-radius: var(--cp-radius);
  364.     border: none;
  365.     background: transparent;
  366.     color: var(--cp-text-muted);
  367.     display: flex;
  368.     align-items: center;
  369.     justify-content: center;
  370.     cursor: pointer;
  371.     font-size: var(--cp-fs-md, 15px);
  372.     transition: background 0.1s, color 0.1s;
  373.   }
  375.   .cp-topbar-icon-btn:hover {
  376.     background: var(--cp-surface-low);
  377.     color: var(--cp-text);
  378.   }
  380.   .cp-start-anywhere-btn {
  381.     height: 30px;
  382.     padding: 0 12px;
  383.     background: var(--cp-primary);
  384.     color: var(--cp-on-primary);
  385.     border: none;
  386.     border-radius: var(--cp-radius);
  387.     font-size: 12px;
  388.     font-weight: 600;
  389.     font-family: var(--cp-font-head);
  390.     cursor: pointer;
  391.     display: flex;
  392.     align-items: center;
  393.     gap: 5px;
  394.     transition: background 0.12s;
  395.     white-space: nowrap;
  396.   }
  398.   .cp-start-anywhere-btn:hover { background: var(--cp-primary-hover); }
  400.   /* ── Content area ──────────────────────────────────────────────────────── */
  401.   .cp-content {
  402.     flex: 1 1 0;
  403.     overflow-y: auto;
  404.     background: var(--cp-surface);
  405.   }
  406.   /* Render finance/central tool pages (those that swap in a custom sidebar) a bit larger. */
  407.   .cp-content.cp-content-zoom { zoom: 1.12; }
  409.   /* ── Page head ─────────────────────────────────────────────────────────── */
  410.   .cp-page-head {
  411.     padding: 22px 28px 16px;
  412.     background: var(--cp-surface-white);
  413.     border-bottom: 1px solid var(--cp-outline-variant);
  414.     display: flex;
  415.     align-items: flex-start;
  416.     justify-content: space-between;
  417.     gap: 16px;
  418.   }
  420.   .cp-page-title {
  421.     font-family: var(--cp-font-head);
  422.     font-size: var(--cp-fs-xl, 20px);
  423.     font-weight: 700;
  424.     color: var(--cp-text);
  425.     letter-spacing: -0.02em;
  426.     margin: 0 0 3px;
  427.   }
  429.   .cp-page-subtitle {
  430.     font-size: var(--cp-fs-sm, 12.5px);
  431.     color: var(--cp-text-muted);
  432.     margin: 0;
  433.   }
  435.   .cp-page-actions {
  436.     display: flex;
  437.     align-items: center;
  438.     gap: 8px;
  439.     flex-shrink: 0;
  440.   }
  442.   /* ── Card ──────────────────────────────────────────────────────────────── */
  443.   .cp-card {
  444.     background: var(--cp-surface-white);
  445.     border-radius: var(--cp-radius-lg);
  446.     border: 1px solid var(--cp-outline-variant);
  447.     box-shadow: var(--cp-shadow-card);
  448.     transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
  449.   }
  451.   .cp-card:hover {
  452.     box-shadow: 0 4px 14px rgba(0,0,0,0.07);
  453.     transform: translateY(-2px);
  454.   }
  456.   .cp-card-body { padding: 18px 20px; }
  457.   .cp-card-head {
  458.     padding: 14px 18px;
  459.     border-bottom: 1px solid var(--cp-surface-container);
  460.     font-size: var(--cp-fs-sm, 12.5px);
  461.     font-weight: 600;
  462.     color: var(--cp-text);
  463.     font-family: var(--cp-font-head);
  464.   }
  466.   /* ── Buttons ───────────────────────────────────────────────────────────── */
  467.   .cp-btn {
  468.     display: inline-flex;
  469.     align-items: center;
  470.     gap: 6px;
  471.     height: 36px;
  472.     padding: 0 16px;
  473.     border-radius: var(--cp-radius);
  474.     border: 1px solid transparent;
  475.     font-size: var(--cp-fs-sm, 12.5px);
  476.     font-weight: 600;
  477.     font-family: var(--cp-font-head);
  478.     cursor: pointer;
  479.     text-decoration: none;
  480.     transition: background 0.12s, border-color 0.12s, color 0.12s;
  481.   }
  483.   .cp-btn-primary {
  484.     background: var(--cp-primary);
  485.     color: var(--cp-on-primary);
  486.     border-color: var(--cp-primary);
  487.   }
  489.   .cp-btn-primary:hover {
  490.     background: var(--cp-primary-hover);
  491.     border-color: var(--cp-primary-hover);
  492.     color: var(--cp-on-primary, #fff);
  493.     text-decoration: none;
  494.   }
  496.   .cp-btn-outline {
  497.     background: transparent;
  498.     color: var(--cp-primary);
  499.     border-color: var(--cp-primary);
  500.   }
  502.   .cp-btn-outline:hover {
  503.     background: var(--cp-amber-dim);
  504.     text-decoration: none;
  505.     color: var(--cp-primary);
  506.   }
  508.   .cp-btn-ghost {
  509.     background: transparent;
  510.     color: var(--cp-text-muted);
  511.     border-color: var(--cp-outline-variant);
  512.   }
  514.   .cp-btn-ghost:hover {
  515.     background: var(--cp-surface-low);
  516.     color: var(--cp-text);
  517.     text-decoration: none;
  518.   }
  520.   /* ── Status chips ──────────────────────────────────────────────────────── */
  521.   .cp-chip {
  522.     display: inline-flex;
  523.     align-items: center;
  524.     gap: 4px;
  525.     padding: 2px 9px;
  526.     border-radius: 99px;
  527.     font-family: var(--cp-font-mono);
  528.     font-size: var(--cp-fs-xs, 11.5px);
  529.     font-weight: 600;
  530.     letter-spacing: 0.03em;
  531.     text-transform: uppercase;
  532.   }
  534.   .cp-chip-success { background: rgba(46,125,50,.10); color: #2e7d32; }
  535.   .cp-chip-warn    { background: rgba(245,124,0,.10); color: #e65100; }
  536.   .cp-chip-error   { background: rgba(186,26,26,.10); color: #ba1a1a; }
  537.   .cp-chip-info    { background: rgba(133,79,0,.10);  color: #854f00; }
  538.   .cp-chip-neutral { background: var(--cp-surface-container); color: var(--cp-text-muted); }
  540.   /* ── Metric widget ─────────────────────────────────────────────────────── */
  541.   .cp-metric-value {
  542.     font-family: var(--cp-font-head);
  543.     font-size: 28px;
  544.     font-weight: 700;
  545.     color: var(--cp-text);
  546.     letter-spacing: -0.03em;
  547.     line-height: 1;
  548.   }
  550.   .cp-metric-label {
  551.     font-family: var(--cp-font-mono);
  552.     font-size: var(--cp-fs-xs, 11.5px);
  553.     font-weight: 700;
  554.     color: var(--cp-text-faint);
  555.     text-transform: uppercase;
  556.     letter-spacing: 0.09em;
  557.     margin-top: 4px;
  558.   }
  560.   /* ── Score ring ────────────────────────────────────────────────────────── */
  561.   .cp-score-ring {
  562.     width: 64px;
  563.     height: 64px;
  564.     border-radius: 50%;
  565.     background: conic-gradient(var(--cp-primary) calc(var(--score) * 3.6deg), var(--cp-surface-high) 0deg);
  566.     display: flex;
  567.     align-items: center;
  568.     justify-content: center;
  569.     position: relative;
  570.   }
  572.   .cp-score-ring::before {
  573.     content: '';
  574.     position: absolute;
  575.     width: 46px;
  576.     height: 46px;
  577.     border-radius: 50%;
  578.     background: var(--cp-surface-white);
  579.   }
  581.   .cp-score-ring-value {
  582.     position: relative;
  583.     z-index: 1;
  584.     font-family: var(--cp-font-head);
  585.     font-size: var(--cp-fs-md, 15px);
  586.     font-weight: 700;
  587.     color: var(--cp-primary);
  588.   }
  590.   /* ── Responsive ────────────────────────────────────────────────────────── */
  591.   @media (max-width: 768px) {
  592.     .cp-sidebar { width: 0; min-width: 0; overflow: hidden; position: absolute; z-index: 200; transition: width 0.2s; }
  593.     .cp-sidebar.open { width: var(--cp-sidebar-w); min-width: var(--cp-sidebar-w); }
  594.     .cp-topbar-nav { display: none; }
  595.   }
  597.   /* ── Global module rail (folds CoPilot/CRM onto the app-wide rail) ────────── */
  598.   /* Scoped to this shell so it borrows CoPilot's amber tokens and never collides
  599.      with the global cp-shell's own .cp-rail rules (different page, same names). */
  600.   .cp-shell > .cp-rail { width: 60px; flex-shrink: 0; background: var(--cp-surface-low);
  601.     border-right: 1px solid var(--cp-outline-variant); display: flex; flex-direction: column;
  602.     align-items: center; padding: 10px 0; gap: 3px; overflow-y: auto; z-index: 101; }
  603.   .cp-shell > .cp-rail .cp-rail-item { width: 46px; padding: 8px 0 6px; border-radius: 10px;
  604.     display: flex; flex-direction: column; align-items: center; gap: 3px;
  605.     color: var(--cp-text-faint); text-decoration: none; transition: background .12s, color .12s; }
  606.   .cp-shell > .cp-rail .cp-rail-item:hover { background: var(--cp-surface-white); color: var(--cp-text); text-decoration: none; }
  607.   .cp-shell > .cp-rail .cp-rail-item.active { background: var(--cp-amber-dim); color: var(--cp-primary); }
  608.   .cp-shell > .cp-rail .cp-rail-item .material-icons { font-size: var(--cp-fs-xl, 20px); }
  609.   .cp-shell > .cp-rail .cp-rail-lbl { font-size: var(--cp-fs-micro, 10px); font-weight: 600; text-align: center; line-height: 1.05; }
  610.   @media (max-width: 768px) { .cp-shell > .cp-rail { display: none; } }
  611. </style>
  613. {# Montserrat + JetBrains Mono (DM Sans already loaded by codecovers_header) #}
  614. <link rel="preconnect" href="https://fonts.googleapis.com">
  615. <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
  617. <div class="cp-shell">
  619.   {# ── Global module rail — folds CoPilot/CRM into the app-wide navigation.
  620.        CoPilot lives under the Projects area, so highlight that unless a page overrides. #}
  621.   {% set active_module = active_module|default('projects') %}
  622.   {% include '@Application/framework/_cp_global_rail.html.twig' %}
  624.   {# ── Left sidebar (swappable; defaults to the CoPilot rail) ──────────────── #}
  625.   {% include sidebar_partial|default('@System/inc/_copilot_sidebar.html.twig') %}
  627.   {# ── Main column ───────────────────────────────────────────────────────── #}
  628.   <div class="cp-main">
  630.     {% include '@Application/inc/_support_session_banner.html.twig' %}
  632.     {# ── Topbar ──────────────────────────────────────────────────────────── #}
  633.     <div class="cp-topbar">
  634.       <div class="cp-topbar-logo">
  635.         <span class="cp-logo-mark"><i class="zmdi zmdi-hive"></i></span>
  636.         HoneyBee ERP
  637.       </div>
  639.       {# ── WHICH COMPANY AM I IN ────────────────────────────────────────────
  640.          Users on multi-company logins reported not being able to tell which
  641.          company they were working in: this topbar showed only the product
  642.          name. The company switcher already existed in
  643.          framework/_cp_topstrip.html.twig, but that partial is NOT included by
  644.          this layout — so every page built on the cp-shell was anonymous.
  645.          Same session keys, so the two can never disagree. Shown ALWAYS (the
  646.          topstrip only shows it when >1, which is exactly when a single-company
  647.          user still needs to know which tenant they are in); becomes a switcher
  648.          only when there really is something to switch to. #}
  649.       {% set _cpCompanyNames = session[UserConstants.USER_COMPANY_NAME_LIST]|default('[]')|jsonDecode %}
  650.       {% set _cpCompanyId    = session[UserConstants.USER_COMPANY_ID]|default(0) %}
  651.       {% set _cpCompanyName  = _cpCompanyNames[_cpCompanyId]|default('') %}
  652.       {% if _cpCompanyName is not empty %}
  653.         {% if _cpCompanyNames|length > 1 %}
  654.           <div class="dropdown" style="display:inline-block;">
  655.             <a href="#" data-toggle="dropdown" class="cp-topbar-company"
  656.                title="You are working in {{ _cpCompanyName }} — click to switch company">
  657.               <i class="material-icons">business</i>
  658.               <span class="cp-topbar-company-nm">{{ _cpCompanyName }}</span>
  659.               <i class="material-icons">arrow_drop_down</i>
  660.             </a>
  661.             <ul class="dropdown-menu">
  662.               <li class="dropdown-header">Switch company</li>
  663.               {% for _cid, _cname in _cpCompanyNames %}
  664.                 <li><a href="{{ url('change_company_dashboard') }}/{{ _cid }}">{{ _cname }}</a></li>
  665.               {% endfor %}
  666.             </ul>
  667.           </div>
  668.         {% else %}
  669.           <span class="cp-topbar-company" title="You are working in {{ _cpCompanyName }}">
  670.             <i class="material-icons">business</i>
  671.             <span class="cp-topbar-company-nm">{{ _cpCompanyName }}</span>
  672.           </span>
  673.         {% endif %}
  674.       {% endif %}
  676.       <nav class="cp-topbar-nav">
  677.         <a href="{{ path('dashboard') }}" class="cp-topbar-nav-item">Workspaces</a>
  678.         <a href="{{ path('copilot_dashboard') }}" class="cp-topbar-nav-item active">Stages</a>
  679.         <a href="{{ path('system_admin_user_list') }}" class="cp-topbar-nav-item">Roles</a>
  680.       </nav>
  682.       <div class="cp-topbar-ai-bar">
  683.         <div class="cp-topbar-ai-wrap">
  684.           <span class="cp-ai-icon zmdi zmdi-flare"></span>
  685.           <input type="text" class="cp-topbar-ai-input" id="cp-ai-command"
  686.                  placeholder="Ask HoneyBee AI to check, fix, explain…">
  687.         </div>
  688.       </div>
  690.       <div class="cp-topbar-actions">
  691.         {# NOTICES — this bell was a <button> with no href and no handler: the notices page
  692.            existed at /notification and nothing in the new shell linked to it, which is why
  693.            "the notices board is not in the main layout". Now a real link with a live unread
  694.            count from /api/notifications/unread_count. #}
  695.         <a href="{{ path('my_notification') }}" class="cp-topbar-icon-btn cp-topbar-bell" title="Notices">
  696.           <i class="zmdi zmdi-notifications-none"></i>
  697.           <span class="cp-topbar-bell-badge" id="cpTopbarNoticeCount" hidden>0</span>
  698.         </a>
  700.         {# HELP — was also a dead button. Now a dropdown, and it is where "Report an issue"
  701.            lives: the widget's own floating FAB is pinned bottom-left over the sidebar
  702.            footer, which is both easy to miss and covers "Back to ERP". #}
  703.         <div class="dropdown cp-topbar-help">
  704.           <button class="cp-topbar-icon-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Help">
  705.             <i class="zmdi zmdi-help-outline"></i>
  706.           </button>
  707.           <ul class="dropdown-menu dropdown-menu-right cp-topbar-help-menu">
  708.             {# WHAT'S NEW — /changelog/ was reachable only through the Administration nav, so the
  709.                people who asked for it (users, and developers who are not admins) could not find
  710.                it. Same cp_can_access gate as every other link; module 468 is eFA=1. #}
  711.             {% if cp_can_access('change_log') %}
  712.               <li><a href="{{ path('change_log') }}"><i class="zmdi zmdi-collection-text"></i> What&#39;s new</a></li>
  713.             {% endif %}
  714.             <li><a href="#" onclick="if(window.siOpen){siOpen();}return false;"><i class="zmdi zmdi-bug"></i> Report an issue</a></li>
  715.             <li><a href="{{ path('my_notification') }}"><i class="zmdi zmdi-notifications-none"></i> Notices</a></li>
  716.           </ul>
  717.         </div>
  718.         <button class="cp-start-anywhere-btn" data-toggle="modal" data-target="#startAnywhereModal">
  719.           <i class="zmdi zmdi-plus"></i> New Entry
  720.         </button>
  721.       </div>
  722.     </div>
  724.     {# ── Page content ────────────────────────────────────────────────────── #}
  725.     <div class="cp-content{{ sidebar_partial is defined ? ' cp-content-zoom' : '' }}">
  726.       {% block body %}{% endblock %}
  727.     </div>
  729.   </div>{# /.cp-main #}
  731. </div>{# /.cp-shell #}
  733. {# SENT-HUB — "Report an issue" widget for every logged-in user (testers). Server-side session-gated. #}
  734. {% if app.session is defined and app.session.get('userId')|default(0) %}
  735.   {% include '@AgentOS/sentinel/_report_issue_widget.html.twig' %}
  736. {% endif %}
  738. {# ── Start Anywhere modal ─────────────────────────────────────────────────── #}
  739. {% include '@System/inc/_start_anywhere_modal.html.twig' %}
  740. <script>
  741. /* Unread notice count for the topbar bell. Fails silently: a decorative badge must never
  742.    surface an error on every page, and a stale/absent count is not worth a console full of
  743.    noise. Polls modestly rather than on a tight timer. */
  744. (function () {
  745.   var el = document.getElementById('cpTopbarNoticeCount');
  746.   if (!el || !window.fetch) { return; }
  747.   function refresh() {
  748.     fetch('{{ path('api_notifications_unread_count') }}', {credentials: 'same-origin'})
  749.       .then(function (r) { return r.ok ? r.json() : null; })
  750.       .then(function (d) {
  751.         var n = d && d.count ? parseInt(d.count, 10) : 0;
  752.         if (n > 0) { el.textContent = n > 99 ? '99+' : n; el.hidden = false; }
  753.         else { el.hidden = true; }
  754.       })
  755.       .catch(function () { /* silent by design */ });
  756.   }
  757.   refresh();
  758.   setInterval(refresh, 120000);
  759. })();
  760. </script>
  761. {% include '@Application/footer/footer_js_codecovers.html.twig' %}
  762. {# Bootstrap Modal JS (already have jQuery from header) #}
  763. {#<script src="{{ absolute_url(path('dashboard')) }}condensed_assets/javascript_codecovers_minimal.js?version={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}"></script>#}
  764. <script>
  765. (function () {
  766.   'use strict';
  767.   var aiInput = document.getElementById('cp-ai-command');
  768.   if (aiInput) {
  769.     aiInput.addEventListener('keydown', function (e) {
  770.       if (e.key === 'Enter' && this.value.trim()) {
  771.         var q = encodeURIComponent(this.value.trim());
  772.         window.location.href = '/ai/insights/feed?q=' + q;
  773.       }
  774.     });
  775.   }
  777.   var mobileToggle = document.getElementById('cp-mobile-sidebar-toggle');
  778.   var sidebar = document.querySelector('.cp-sidebar');
  779.   if (mobileToggle && sidebar) {
  780.     mobileToggle.addEventListener('click', function () {
  781.       sidebar.classList.toggle('open');
  782.     });
  783.   }
  784. }());
  785. </script>
  786. {% include '@Application/inc/menu/_spotlight_search.html.twig' ignore missing %}
  787. {% block page_scripts %}{% endblock %}