src/ApplicationBundle/Resources/views/framework/_cp_topstrip.html.twig line 1

Open in your IDE?
  1. {#
  2.   framework/_cp_topstrip.html.twig
  3.   Global top strip for cp-shell modules: spotlight Search (Ctrl+K), company switcher,
  4.   notifications, profile/logout. Reuses the EXISTING routes + the shared _spotlight_search
  5.   partial + the notification badge id (footer JS fills it) — nothing re-implemented.
  6.   Include inside a `.cp-app` column wrapper, ABOVE `.cp-shell`.
  7. #}
  8. {% set _companyNames  = session[UserConstants.USER_COMPANY_NAME_LIST]|default('[]')|jsonDecode %}
  9. {% set _curCompanyId  = session[UserConstants.USER_COMPANY_ID]|default(0) %}
  10. {% set _userName      = session[UserConstants.USER_NAME]|default('User') %}
  11. {% set _userImg       = session[UserConstants.USER_IMAGE]|default('') %}
  13. <style>
  14.   /* HoneyBee brand mark — top-left of the global top strip */
  15.   .cp-ts-brand{ display:flex; align-items:center; gap:9px; text-decoration:none; padding:2px 4px; margin-right:2px; flex-shrink:0; }
  16.   .cp-ts-brand:hover{ text-decoration:none; }
  17.   .cp-ts-brand-badge{ width:30px; height:30px; border-radius:9px; flex-shrink:0;
  18.     display:flex; align-items:center; justify-content:center;
  19.     background:linear-gradient(135deg,#c07d2e 0%,#8a561f 100%);
  20.     color:#fff; font-weight:800; font-size:var(--cp-fs-lg, 16px); line-height:1; letter-spacing:.01em;
  21.     box-shadow:0 1px 2px rgba(90,60,20,.35); font-family:var(--cp-font, inherit); }
  22.   .cp-ts-brand-tx{ display:flex; flex-direction:column; line-height:1.05; }
  23.   .cp-ts-brand-name{ font-size:14px; font-weight:700; color:var(--cp-text,#1f2733); letter-spacing:-.01em; }
  24.   .cp-ts-brand-sub{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--cp-text-faint,#9aa4b2); margin-top:1px; }
  25.   .cp-ts-brand-div{ width:1px; height:26px; background:var(--cp-outline,#e3e7ee); margin:0 10px 0 6px; flex-shrink:0; }
  26.   @media(max-width:860px){ .cp-ts-brand-tx{ display:none; } .cp-ts-brand-div{ display:none; } }
  27.   .cp-ts-create{ display:flex; align-items:center; gap:5px; padding:6px 12px; border-radius:var(--cp-radius-pill); background:var(--cp-accent); color:var(--cp-on-accent)!important; font-size:var(--cp-fs-sm, 12.5px); font-weight:600; text-decoration:none; cursor:pointer; }
  28.   .cp-ts-create:hover{ background:var(--cp-accent-hover); color:var(--cp-on-accent)!important; text-decoration:none; }
  29.   .cp-ts-create .material-icons{ font-size:17px; }
  30.   .cp-ts-menu li.cp-ts-menu-h{ margin-top:4px; }
  31.   .cp-ts-menu li > a .material-icons{ font-size:var(--cp-fs-lg, 16px); }
  32.   .cp-ts-hive{ display:flex; align-items:center; gap:7px; padding:5px 12px; border-radius:var(--cp-radius-pill); border:1px solid var(--cp-outline);
  33.     color:var(--cp-text-muted)!important; font-family:var(--cp-font-mono); font-size:12px; font-weight:600; letter-spacing:.08em; text-decoration:none; }
  34.   .cp-ts-hive:hover{ border-color:var(--cp-accent); color:var(--cp-accent)!important; text-decoration:none; }
  35.   .cp-hive-dot{ width:8px; height:8px; border-radius:50%; background:#2e7d32; box-shadow:0 0 0 0 rgba(46,125,50,.5); animation:cpHivePulse 1.7s ease-in-out infinite; }
  36.   @keyframes cpHivePulse{ 0%{ box-shadow:0 0 0 0 rgba(46,125,50,.5);} 70%{ box-shadow:0 0 0 6px rgba(46,125,50,0);} 100%{ box-shadow:0 0 0 0 rgba(46,125,50,0);} }
  37.   @media(max-width:720px){ .cp-ts-create span, .cp-ts-hive{ display:none; } }
  38. </style>
  39. <div class="cp-topstrip">
  40.   <a href="{{ path('dashboard') }}" class="cp-ts-brand" title="HoneyBee — Home">
  41.     <span class="cp-ts-brand-badge">H</span>
  42.     <span class="cp-ts-brand-tx">
  43.       <span class="cp-ts-brand-name">HoneyBee</span>
  44.       <span class="cp-ts-brand-sub">Ecosystem</span>
  45.     </span>
  46.   </a>
  47.   <span class="cp-ts-brand-div"></span>
  48.   <div class="cp-ts-search" onclick="var s=document.getElementById('cpSpot'); if(s){s.classList.add('open'); var i=document.getElementById('cpSpotInput'); if(i){i.focus();}}">
  49.     <i class="fa fa-search"></i> <span>Search anything…</span> <kbd>Ctrl K</kbd>
  50.   </div>
  52.   <div class="cp-ts-right">
  53.     {# + Create — global quick-create #}
  54.     <div class="dropdown cp-ts-dd">
  55.       <a href="#" data-toggle="dropdown" class="cp-ts-create"><i class="material-icons">add</i> <span>Create</span></a>
  56.       <ul class="dropdown-menu dropdown-menu-right cp-ts-menu" style="min-width:224px;">
  57.         <li class="cp-ts-menu-h">Sales</li>
  58.         <li><a href="{{ path('create_sales_order') }}"><i class="material-icons">shopping_cart</i> Sales Order</a></li>
  59.         <li><a href="{{ path('create_sales_proposal') }}"><i class="material-icons">description</i> Sales Proposal</a></li>
  60.         <li><a href="{{ path('create_opportunity') }}"><i class="material-icons">trending_up</i> Opportunity</a></li>
  61.         <li><a href="{{ path('create_lead') }}"><i class="material-icons">person_add</i> Lead</a></li>
  62.         <li><a href="{{ path('create_client') }}"><i class="material-icons">supervisor_account</i> Client</a></li>
  63.         <li class="divider"></li>
  64.         <li class="cp-ts-menu-h">Finance & Purchasing</li>
  65.         <li><a href="{{ path('create_sales_invoice') }}"><i class="material-icons">attach_money</i> Sales Invoice</a></li>
  66.         <li><a href="{{ path('create_purchase_order') }}"><i class="material-icons">local_shipping</i> Purchase Order</a></li>
  67.         <li><a href="{{ path('express_purchase_new') }}"><i class="material-icons">flash_on</i> Express Purchase</a></li>
  68.         <li><a href="{{ path('create_expense_invoice', {id: 0}) }}"><i class="material-icons">receipt</i> Expense</a></li>
  69.         <li><a href="{{ path('ai_import_index') }}"><i class="material-icons">move_to_inbox</i> Import Document</a></li>
  70.         <li><a href="{{ path('create_payment_voucher') }}"><i class="material-icons">payment</i> Payment Voucher</a></li>
  71.         <li class="divider"></li>
  72.         <li class="cp-ts-menu-h">Projects</li>
  73.         <li><a href="{{ path('create_new_project') }}"><i class="material-icons">work</i> New Project</a></li>
  74.       </ul>
  75.     </div>
  77.     {# HIVEMIND — opens the inline terminal widget (falls back to the full page if absent) #}
  78.     <a href="{{ path('ai_hivemind') }}" class="cp-ts-hive" title="Hivemind — Generative Command Mode (Ctrl+`)"
  79.        onclick="var p=document.getElementById('hm-widget-pill'); if(p){p.click(); return false;} return true;">
  80.       <span class="cp-hive-dot"></span> HIVEMIND
  81.     </a>
  83.     <a href="#" class="cp-ts-ico" title="All Apps" onclick="cpToggleAppLauncher(true);return false;">
  84.       <i class="material-icons">apps</i>
  85.     </a>
  86.     {# WHICH COMPANY AM I IN — shown ALWAYS, not only when there are several to switch
  87.        between. The `> 1` gate below used to wrap this whole block, so a login with one
  88.        company saw no company name anywhere on the page and could not tell which tenant it
  89.        was looking at. That is the complaint, and it does not require a second company to
  90.        bite. main_layout.html.twig carries the same element off the same session keys. #}
  91.     {% if _companyNames|length <= 1 %}
  92.       <span class="cp-ts-btn" title="You are working in {{ _companyNames[_curCompanyId]|default('this company') }}">
  93.         <i class="material-icons">business</i>
  94.         <span class="cp-ts-lbl">{{ _companyNames[_curCompanyId]|default('Company') }}</span>
  95.       </span>
  96.     {% endif %}
  97.     {% if _companyNames|length > 1 %}
  98.       <div class="dropdown cp-ts-dd">
  99.         <a href="#" data-toggle="dropdown" class="cp-ts-btn"><i class="material-icons">business</i>
  100.           <span class="cp-ts-lbl">{{ _companyNames[_curCompanyId]|default('Company') }}</span>
  101.           <i class="material-icons cp-ts-caret">arrow_drop_down</i></a>
  102.         <ul class="dropdown-menu dropdown-menu-right cp-ts-menu">
  103.           <li class="cp-ts-menu-h">Switch company</li>
  104.           {% for cid, cname in _companyNames %}
  105.             <li><a href="{{ url('change_company_dashboard') }}/{{ cid }}" class="{{ cid == _curCompanyId ? 'cp-ts-active' : '' }}">{{ cname }}</a></li>
  106.           {% endfor %}
  107.         </ul>
  108.       </div>
  109.     {% endif %}
  111.     <a href="{{ path('my_notification') }}" class="cp-ts-ico" title="Notifications">
  112.       <i class="material-icons">notifications_none</i>
  113.       <span class="cp-ts-badge" id="notification_count_on_menu"></span>
  114.     </a>
  116.     <div class="dropdown cp-ts-dd">
  117.       <a href="#" data-toggle="dropdown" class="cp-ts-profile">
  118.         {% if _userImg and 'https://' in _userImg %}<img src="{{ _userImg }}" class="cp-ts-avatar">
  119.         {% elseif _userImg %}<img src="{{ url('dashboard') }}/{{ _userImg }}" class="cp-ts-avatar">
  120.         {% else %}<span class="cp-ts-avatar cp-ts-avatar-i">{{ _userName|slice(0,1)|upper }}</span>{% endif %}
  121.         <span class="cp-ts-name">{{ _userName|split(' ')|first }}</span>
  122.         <i class="material-icons cp-ts-caret">arrow_drop_down</i>
  123.       </a>
  124.       <ul class="dropdown-menu dropdown-menu-right cp-ts-menu">
  125.         <li class="cp-ts-menu-h">{{ _userName }}</li>
  126.         <li><a href="{{ path('dashboard') }}"><i class="material-icons">home</i> ERP Home</a></li>
  127.         <li><a href="{{ path('my_notification') }}"><i class="material-icons">notifications</i> Notifications</a></li>
  128.         <li class="divider"></li>
  129.         {# Switch WorkSpace: same as the legacy menu — logs out keeping the current task
  130.            (endCurrentTask=0) so the user can pick another workspace/company. Logout ends it. #}
  131.         <li><a href="{{ url('user_logout') }}?endCurrentTask=0"><i class="material-icons">swap_horiz</i> Switch WorkSpace</a></li>
  132.         <li><a href="{{ path('user_logout') }}"><i class="material-icons">exit_to_app</i> Logout</a></li>
  133.       </ul>
  134.     </div>
  135.   </div>
  136. </div>
  137. {% include '@Application/inc/menu/_spotlight_search.html.twig' ignore missing %}
  138. {% include '@Application/framework/_cp_app_launcher.html.twig' %}
  139. {% include '@Ai/hivemind_widget.html.twig' ignore missing %}