src/ApplicationBundle/Modules/System/Resources/views/inc/_start_anywhere_modal.html.twig line 1

Open in your IDE?
  1. {#
  2.   @System/inc/_start_anywhere_modal.html.twig
  3.   "Start Anywhere" global entry launcher modal.
  4.   Triggered by any element with data-toggle="modal" data-target="#startAnywhereModal".
  5. #}
  6. <div class="modal fade" id="startAnywhereModal" tabindex="-1"
  7.      aria-labelledby="startAnywhereModalLabel" aria-hidden="true">
  8.   <div class="modal-dialog modal-lg modal-dialog-centered">
  9.     <div class="modal-content" style="
  10.       background: #ffffff;
  11.       border-radius: 16px;
  12.       border: 1px solid var(--cp-outline-variant);
  13.       box-shadow: 0 24px 64px rgba(26,28,28,.18);
  14.       overflow: hidden;
  15.     ">
  17.       {# ── Header ─────────────────────────────────────────────────────── #}
  18.       <div style="
  19.         padding: 22px 24px 16px;
  20.         border-bottom: 1px solid var(--cp-outline-variant);
  21.         display: flex;
  22.         align-items: flex-start;
  23.         justify-content: space-between;
  24.       ">
  25.         <div>
  26.           <h5 id="startAnywhereModalLabel" style="
  27.             font-family: var(--cp-font-head);
  28.             font-size: 18px;
  29.             font-weight: 700;
  30.             color: var(--cp-text);
  31.             margin: 0 0 3px;
  32.           ">
  33.             <i class="zmdi zmdi-plus-circle" style="color: var(--cp-primary); margin-right: 8px;"></i>
  34.             Start Anywhere
  35.           </h5>
  36.           <p style="font-size: 12.5px; color: var(--cp-text-muted); margin: 0;">
  37.             Quickly initiate new workflows and records across the CRM &amp; ERP.
  38.           </p>
  39.         </div>
  40.         <button type="button" class="close" data-dismiss="modal" aria-label="Close"
  41.                 style="font-size: 20px; color: var(--cp-text-faint); background: none; border: none; cursor: pointer; padding: 0 2px;">
  42.           &times;
  43.         </button>
  44.       </div>
  46.       {# ── Action grid ─────────────────────────────────────────────────── #}
  47.       <div style="padding: 20px 24px;">
  48.         <div style="
  49.           display: grid;
  50.           grid-template-columns: repeat(3, 1fr);
  51.           gap: 12px;
  52.         " id="cp-sa-grid">
  54.           {# Lead #}
  55.           <a href="{{ path('create_lead', {id: 0}) }}" class="cp-sa-card" data-group="crm">
  56.             <div class="cp-sa-icon" style="background: rgba(91,93,113,.1); color: #5b5d71;">
  57.               <i class="zmdi zmdi-account-add"></i>
  58.             </div>
  59.             <div class="cp-sa-title">Create Lead</div>
  60.             <div class="cp-sa-desc">Log a new potential customer inquiry or prospect.</div>
  61.             <div class="cp-sa-meta">
  62.               <span>Min: Name, Email/Phone</span>
  63.               <span class="cp-sa-next">→ Qualification</span>
  64.             </div>
  65.           </a>
  67.           {# Account #}
  68.           <a href="{{ path('create_client', {id: 0}) }}" class="cp-sa-card" data-group="crm">
  69.             <div class="cp-sa-icon" style="background: rgba(91,93,113,.1); color: #5b5d71;">
  70.               <i class="zmdi zmdi-city-alt"></i>
  71.             </div>
  72.             <div class="cp-sa-title">Create Account</div>
  73.             <div class="cp-sa-desc">Register a new company or organisational entity.</div>
  74.             <div class="cp-sa-meta">
  75.               <span>Min: Company Name</span>
  76.               <span class="cp-sa-next">→ Add Contacts</span>
  77.             </div>
  78.           </a>
  80.           {# Opportunity #}
  81.           <a href="{{ path('create_opportunity', {id: 0}) }}" class="cp-sa-card" data-group="crm">
  82.             <div class="cp-sa-icon" style="background: rgba(133,79,0,.1); color: var(--cp-primary);">
  83.               <i class="zmdi zmdi-trending-up"></i>
  84.             </div>
  85.             <div class="cp-sa-title">Create Opportunity</div>
  86.             <div class="cp-sa-desc">Track a potential sale or deal pipeline.</div>
  87.             <div class="cp-sa-meta">
  88.               <span>Min: Value, Stage, Account</span>
  89.               <span class="cp-sa-next">→ Proposal</span>
  90.             </div>
  91.           </a>
  93.           {# Tender/RFQ #}
  94.           <a href="#" class="cp-sa-card" data-group="crm">
  95.             <div class="cp-sa-icon" style="background: rgba(112,93,0,.1); color: #705d00;">
  96.               <i class="zmdi zmdi-upload"></i>
  97.             </div>
  98.             <div class="cp-sa-title">Import Tender / RFQ</div>
  99.             <div class="cp-sa-desc">Upload and parse a formal request for quote.</div>
  100.             <div class="cp-sa-meta">
  101.               <span>Min: PDF/Word File</span>
  102.               <span class="cp-sa-next">→ Scope Review</span>
  103.             </div>
  104.           </a>
  106.           {# Offer/Proposal #}
  107.           <a href="{{ path('create_sales_proposal', {id: 0}) }}" class="cp-sa-card" data-group="offer">
  108.             <div class="cp-sa-icon" style="background: rgba(133,79,0,.1); color: var(--cp-primary);">
  109.               <i class="zmdi zmdi-assignment"></i>
  110.             </div>
  111.             <div class="cp-sa-title">Create Offer</div>
  112.             <div class="cp-sa-desc">Generate a formal proposal based on an Opportunity.</div>
  113.             <div class="cp-sa-meta">
  114.               <span>Min: Opportunity ID</span>
  115.               <span class="cp-sa-next">→ Client Review</span>
  116.             </div>
  117.           </a>
  119.           {# Site Survey #}
  120.           <a href="#" class="cp-sa-card" data-group="project">
  121.             <div class="cp-sa-icon" style="background: rgba(46,125,50,.1); color: #2e7d32;">
  122.               <i class="zmdi zmdi-pin-drop"></i>
  123.             </div>
  124.             <div class="cp-sa-title">Site Survey</div>
  125.             <div class="cp-sa-desc">Capture technical requirements and site assessment data.</div>
  126.             <div class="cp-sa-meta">
  127.               <span>Min: Opportunity ID</span>
  128.               <span class="cp-sa-next">→ Tech Review</span>
  129.             </div>
  130.           </a>
  132.         </div>{# /.cp-sa-grid #}
  134.         {# ── Filter/search ─────────────────────────────────────────────── #}
  135.         <div style="margin-top: 16px; position: relative;">
  136.           <i class="zmdi zmdi-search" style="
  137.             position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  138.             color: var(--cp-text-faint); font-size: 14px;
  139.           "></i>
  140.           <input type="text" id="cp-sa-filter" placeholder="Type to filter actions…" style="
  141.             width: 100%;
  142.             height: 38px;
  143.             padding: 0 14px 0 36px;
  144.             background: var(--cp-surface-low);
  145.             border: 1px solid var(--cp-outline-variant);
  146.             border-radius: var(--cp-radius);
  147.             font-size: 13px;
  148.             font-family: var(--cp-font-body);
  149.             color: var(--cp-text);
  150.             outline: none;
  151.           ">
  152.         </div>
  154.       </div>{# /.padding #}
  155.     </div>{# /.modal-content #}
  156.   </div>{# /.modal-dialog #}
  157. </div>{# /#startAnywhereModal #}
  159. <style>
  160.   .cp-sa-card {
  161.     display: flex;
  162.     flex-direction: column;
  163.     gap: 6px;
  164.     padding: 14px 14px 12px;
  165.     border: 1px solid var(--cp-outline-variant);
  166.     border-radius: var(--cp-radius-lg);
  167.     background: var(--cp-surface-low);
  168.     text-decoration: none;
  169.     color: inherit;
  170.     transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
  171.     cursor: pointer;
  172.   }
  174.   .cp-sa-card:hover {
  175.     background: var(--cp-surface-white);
  176.     border-color: var(--cp-primary);
  177.     box-shadow: 0 0 0 3px var(--cp-amber-dim);
  178.     text-decoration: none;
  179.     color: inherit;
  180.   }
  182.   .cp-sa-icon {
  183.     width: 34px;
  184.     height: 34px;
  185.     border-radius: 9px;
  186.     display: flex;
  187.     align-items: center;
  188.     justify-content: center;
  189.     font-size: var(--cp-fs-lg, 16px);
  190.     margin-bottom: 2px;
  191.   }
  193.   .cp-sa-title {
  194.     font-family: var(--cp-font-head);
  195.     font-size: var(--cp-fs-base, 13px);
  196.     font-weight: 700;
  197.     color: var(--cp-text);
  198.   }
  200.   .cp-sa-desc {
  201.     font-size: 12px;
  202.     color: var(--cp-text-muted);
  203.     line-height: 1.4;
  204.   }
  206.   .cp-sa-meta {
  207.     display: flex;
  208.     align-items: center;
  209.     justify-content: space-between;
  210.     font-size: var(--cp-fs-xs, 11.5px);
  211.     color: var(--cp-text-faint);
  212.     margin-top: 2px;
  213.   }
  215.   .cp-sa-next {
  216.     color: var(--cp-primary);
  217.     font-weight: 600;
  218.   }
  220.   .cp-sa-card.hidden { display: none; }
  221. </style>
  223. <script>
  224. (function () {
  225.   var filterInput = document.getElementById('cp-sa-filter');
  226.   if (!filterInput) return;
  227.   filterInput.addEventListener('input', function () {
  228.     var q = this.value.toLowerCase();
  229.     document.querySelectorAll('#cp-sa-grid .cp-sa-card').forEach(function (card) {
  230.       var text = card.textContent.toLowerCase();
  231.       card.classList.toggle('hidden', q.length > 0 && text.indexOf(q) === -1);
  232.     });
  233.   });
  234. }());
  235. </script>