{"file":"index-ebkVtBaw.js","mappings":";;;;;;;AAqRA,UAAM,cAAc,IAAI,EAAE;AAC1B,UAAM,aAAa,IAAI,KAAK;AAC5B,UAAM,iBAAiB,IAAmB,IAAI;AAC9C,UAAM,mBAAmB,IAA2D,IAAI;AAExF,UAAM,iBAAiB,CAAC,QAAQ,WAAW,YAAY;AAIvD,UAAM,UAAU,SAAmB;AAAA,MACjC;AAAA,QACE,IAAI;AAAA,QACJ,aAAa;AAAA,QACb,aAAa;AAAA,QACb,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,UAAU;AAAA,QACV,YAAY;AAAA,MAAA;AAAA,MAEd;AAAA,QACE,IAAI;AAAA,QACJ,aAAa;AAAA,QACb,aAAa;AAAA,QACb,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,UAAU;AAAA,QACV,YAAY;AAAA,MAAA;AAAA,MAEd;AAAA,QACE,IAAI;AAAA,QACJ,aAAa;AAAA,QACb,aAAa;AAAA,QACb,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,UAAU;AAAA,QACV,YAAY;AAAA,MAAA;AAAA,MAEd;AAAA,QACE,IAAI;AAAA,QACJ,aAAa;AAAA,QACb,aAAa;AAAA,QACb,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,UAAU;AAAA,QACV,YAAY;AAAA,MAAA;AAAA,MAEd;AAAA,QACE,IAAI;AAAA,QACJ,aAAa;AAAA,QACb,aAAa;AAAA,QACb,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,UAAU;AAAA,QACV,YAAY;AAAA,MAAA;AAAA,MAEd;AAAA,QACE,IAAI;AAAA,QACJ,aAAa;AAAA,QACb,aAAa;AAAA,QACb,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,UAAU;AAAA,QACV,YAAY;AAAA,MAAA;AAAA,MAEd;AAAA,QACE,IAAI;AAAA,QACJ,aAAa;AAAA,QACb,aAAa;AAAA,QACb,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,UAAU;AAAA,QACV,YAAY;AAAA,MAAA;AAAA,MAEd;AAAA,QACE,IAAI;AAAA,QACJ,aAAa;AAAA,QACb,aAAa;AAAA,QACb,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,UAAU;AAAA,QACV,YAAY;AAAA,MAAA;AAAA,IACd,CACD;AAID,UAAM,cAAc,SAAS,MAAM,QAAQ,OAAO,OAAK,EAAE,WAAW,QAAQ,EAAE,MAAM;AACpF,UAAM,eAAe,SAAS,MAAM,QAAQ,OAAO,OAAK,EAAE,SAAS,SAAS,EAAE,MAAM;AACpF,UAAM,kBAAkB,SAAS,MAAM,QAAQ,OAAO,OAAK,EAAE,SAAS,YAAY,EAAE,MAAM;AAE1F,UAAM,kBAAkB,SAAS,MAAM;AACrC,aAAO,QAAQ,OAAO,CAAA,MAAK;AAEzB,YAAI,YAAY,OAAO;AACrB,gBAAM,IAAI,YAAY,MAAM,YAAA;AAC5B,gBAAM,gBACJ,EAAE,YAAY,YAAA,EAAc,SAAS,CAAC,KACtC,EAAE,YAAY,cAAc,SAAS,CAAC,KACtC,EAAE,MAAM,YAAA,EAAc,SAAS,CAAC;AAClC,cAAI,CAAC,cAAe,QAAO;AAAA,QAC7B;AAEA,YAAI,WAAW,UAAU,SAAS,EAAE,SAAS,WAAW,MAAO,QAAO;AACtE,eAAO;AAAA,MACT,CAAC;AAAA,IACH,CAAC;AAID,aAAS,eAAe,MAAsB;AAC5C,UAAI,SAAS,aAAc,QAAO;AAClC,UAAI,SAAS,UAAW,QAAO;AAC/B,aAAO;AAAA,IACT;;wHA1YmDA,KAAAA,GAAE,eAAA,CAAA,uDACbA,KAAAA,GAAE,kBAAA,CAAA,ynBAagCA,KAAAA,GAAE,uBAAA,CAAA,iDACpBC,eAAA,QAAQ,MAAM,oeAYID,KAAAA,GAAE,wBAAA,CAAA,sEACd,YAAA,KAAW,4fAYCA,KAAAA,GAAE,yBAAA,CAAA,oEAChB,aAAA,KAAY,8nBAYEA,KAAAA,GAAE,4BAAA,CAAA,qEACf,gBAAA,KAAe,ucAazD,YAAA,KAAW,gBAEnBE,cAAA,eAAaF,KAAAA,GAAE,4BAAA,CAAA,oeAMP,WAAA,KAAU,oBAAV,WAAA,OAAU,KAAA,kBAAV,WAAA,OAAU,KAAA,CAAA,IAAA,cAAA,qBAGIA,KAAAA,GAAE,mBAAA,CAAA,qEAHhB,WAAA,KAAU,oBAAV,WAAA,OAAU,MAAA,kBAAV,WAAA,OAAU,MAAA,CAAA,IAAA,cAAA,8EAAV,WAAA,KAAU,oBAAV,WAAA,OAAU,SAAA,kBAAV,WAAA,OAAU,SAAA,CAAA,IAAA,cAAA,oFAAV,WAAA,KAAU,oBAAV,WAAA,OAAU,YAAA,kBAAV,WAAA,OAAU,YAAA,CAAA,IAAA,cAAA,4cAkBoFA,KAAAA,GAAE,sBAAA,CAAA,wHACFA,KAAAA,GAAE,eAAA,CAAA,wHACFA,KAAAA,GAAE,gBAAA,CAAA,wHACFA,KAAAA,GAAE,yBAAA,CAAA,wHACFA,KAAAA,GAAE,iBAAA,CAAA;AAKpFG,oBAAA,gBAAA,QAAV,WAAM;oJAK+CF,eAAA,OAAO,EAAE,kFAOvDG,eAAA,CAAA,OAAO,YAAU,kFAAA,CAAA,MAEtBH,eAAA,OAAO,QAAQ,yDAG2BA,eAAA,OAAO,WAAW,0CAC1BA,eAAA,OAAO,WAAW,gEAMnBA,eAAA,OAAO,KAAK,8CAM1CG,eAAA,CAAA,OAAO,WAAM,kDAA+F,OAAO,WAAM,4KAQvHA,eAAA,CAAA,OAAO,WAAM,8BAA+E,OAAO,WAAM,4GAMhH,OAAO,WAAM,WAAgBJ,KAAAA,GAAE,gBAAA,IAAqB,OAAO,WAAM,cAAmBA,KAAAA,GAAE,mBAAA,IAAwBA,KAAAA,GAAE,kBAAA,CAAA,0GASzG,eAAe,OAAO,IAAI,GAAA,gDAAA,CAAA,MAE/BC,eAAA,OAAO,IAAI,+HAOXC,cAAA,SAAOF,KAAAA,GAAE,wBAAA,CAAA;YASJ,eAAA,UAAmB,OAAO,IAAE;;AAIjBG,wBAAA,iBAAR,SAAI;oDAIH,OAAO,SAAS,6LAMdC,eAAA,CAAA,mCAAmC,SAAI,YAAA,iBAAA,iBAAA,sBAAA,CAAA,cAE9CH,eAAA,KAAK,OAAM,CAAA,EAAI,gBAAgB,KAAK,MAAK,CAAA,CAAA;gBAChC,OAAO,SAAS,MAAI;;;;;;;;;;;4OAkBjCD,KAAAA,GAAE,cAAA,CAAA,4BAKGI,eAAA,CAAA,OAAO,WAAM,0LAIlBH,eAAA,OAAO,WAAM,WAAgBD,KAAAA,2BAA2BA,KAAAA,GAAE,kBAAA,CAAA;;;AAWnE,UAAA,gBAAA,MAAgB,WAAM,GAAA;+cAMSA,KAAAA,GAAE,oBAAA,CAAA,CAAA,YAAA;AAAA;;;;UAMnC,iBAAA,OAAgB;6BAEdI,eAAA,CAAA,iBAAA,MAAiB,SAAI,0JAI1BH,eAAA,iBAAA,MAAiB,OAAO;;;;;;;;;;;;;;","names":["$t","_ssrInterpolate","_ssrRenderAttr","_ssrRenderList","_ssrRenderClass"],"sources":["../../../../pages/garages/index.vue"],"sourcesContent":["<template>\n  <div>\n    <!-- Page Header -->\n    <div class=\"mb-8\">\n      <h1 class=\"text-2xl font-bold text-white\">{{ $t('garages.title') }}</h1>\n      <p class=\"text-slate-400 mt-1\">{{ $t('garages.subtitle') }}</p>\n    </div>\n\n    <!-- Stats Cards -->\n    <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8\">\n      <div class=\"bg-slate-800 rounded-xl border border-slate-700 p-4\">\n        <div class=\"flex items-center gap-3\">\n          <div class=\"p-2 rounded-lg bg-indigo-500/10 text-indigo-400\">\n            <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4\" />\n            </svg>\n          </div>\n          <div>\n            <p class=\"text-xs text-slate-400 uppercase tracking-wider\">{{ $t('garages.total_garages') }}</p>\n            <p class=\"text-2xl font-bold text-white\">{{ garages.length }}</p>\n          </div>\n        </div>\n      </div>\n      <div class=\"bg-slate-800 rounded-xl border border-slate-700 p-4\">\n        <div class=\"flex items-center gap-3\">\n          <div class=\"p-2 rounded-lg bg-emerald-500/10 text-emerald-400\">\n            <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\n            </svg>\n          </div>\n          <div>\n            <p class=\"text-xs text-slate-400 uppercase tracking-wider\">{{ $t('garages.active_garages') }}</p>\n            <p class=\"text-2xl font-bold text-emerald-400\">{{ activeCount }}</p>\n          </div>\n        </div>\n      </div>\n      <div class=\"bg-slate-800 rounded-xl border border-slate-700 p-4\">\n        <div class=\"flex items-center gap-3\">\n          <div class=\"p-2 rounded-lg bg-amber-500/10 text-amber-400\">\n            <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z\" />\n            </svg>\n          </div>\n          <div>\n            <p class=\"text-xs text-slate-400 uppercase tracking-wider\">{{ $t('garages.premium_garages') }}</p>\n            <p class=\"text-2xl font-bold text-amber-400\">{{ premiumCount }}</p>\n          </div>\n        </div>\n      </div>\n      <div class=\"bg-slate-800 rounded-xl border border-slate-700 p-4\">\n        <div class=\"flex items-center gap-3\">\n          <div class=\"p-2 rounded-lg bg-purple-500/10 text-purple-400\">\n            <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z\" />\n            </svg>\n          </div>\n          <div>\n            <p class=\"text-xs text-slate-400 uppercase tracking-wider\">{{ $t('garages.enterprise_garages') }}</p>\n            <p class=\"text-2xl font-bold text-purple-400\">{{ enterpriseCount }}</p>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Search & Filter Bar -->\n    <div class=\"flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6\">\n      <div class=\"relative flex-1 max-w-md\">\n        <svg class=\"absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\n        </svg>\n        <input\n          v-model=\"searchQuery\"\n          type=\"text\"\n          :placeholder=\"$t('garages.search_placeholder')\"\n          class=\"w-full pl-10 pr-4 py-2.5 bg-slate-800 border border-slate-700 rounded-lg text-sm text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 transition\"\n        />\n      </div>\n      <div class=\"flex items-center gap-2\">\n        <select\n          v-model=\"filterTier\"\n          class=\"px-3 py-2.5 bg-slate-800 border border-slate-700 rounded-lg text-sm text-slate-300 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 transition\"\n        >\n          <option value=\"all\">{{ $t('garages.all_tiers') }}</option>\n          <option value=\"free\">Free</option>\n          <option value=\"premium\">Premium</option>\n          <option value=\"enterprise\">Enterprise</option>\n        </select>\n      </div>\n    </div>\n\n    <!-- Data Table -->\n    <div class=\"bg-slate-800/50 border border-slate-700 rounded-xl overflow-hidden\">\n      <div class=\"overflow-x-auto\">\n        <table class=\"w-full text-sm\">\n          <thead>\n            <tr class=\"border-b border-slate-700 bg-slate-800/80\">\n              <th class=\"text-left py-3.5 px-4 text-xs font-semibold uppercase tracking-wider text-slate-400\">ID</th>\n              <th class=\"text-left py-3.5 px-4 text-xs font-semibold uppercase tracking-wider text-slate-400\">{{ $t('garages.company_name') }}</th>\n              <th class=\"text-left py-3.5 px-4 text-xs font-semibold uppercase tracking-wider text-slate-400\">{{ $t('garages.email') }}</th>\n              <th class=\"text-left py-3.5 px-4 text-xs font-semibold uppercase tracking-wider text-slate-400\">{{ $t('garages.status') }}</th>\n              <th class=\"text-left py-3.5 px-4 text-xs font-semibold uppercase tracking-wider text-slate-400\">{{ $t('garages.current_package') }}</th>\n              <th class=\"text-left py-3.5 px-4 text-xs font-semibold uppercase tracking-wider text-slate-400\">{{ $t('garages.actions') }}</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr\n              v-for=\"garage in filteredGarages\"\n              :key=\"garage.id\"\n              class=\"border-b border-slate-700/50 hover:bg-slate-700/30 transition\"\n            >\n              <!-- ID -->\n              <td class=\"py-3.5 px-4 text-slate-400 font-mono text-xs\">{{ garage.id }}</td>\n\n              <!-- Company Name -->\n              <td class=\"py-3.5 px-4\">\n                <div class=\"flex items-center gap-3\">\n                  <div\n                    class=\"w-8 h-8 rounded-lg flex items-center justify-center text-sm font-bold text-white\"\n                    :class=\"garage.colorClass\"\n                  >\n                    {{ garage.initials }}\n                  </div>\n                  <div>\n                    <p class=\"text-sm font-medium text-white\">{{ garage.companyName }}</p>\n                    <p class=\"text-xs text-slate-500\">{{ garage.contactName }}</p>\n                  </div>\n                </div>\n              </td>\n\n              <!-- Email -->\n              <td class=\"py-3.5 px-4 text-slate-300\">{{ garage.email }}</td>\n\n              <!-- Status -->\n              <td class=\"py-3.5 px-4\">\n                <span\n                  class=\"inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium\"\n                  :class=\"garage.status === 'active'\n                    ? 'bg-emerald-500/10 text-emerald-400'\n                    : garage.status === 'suspended'\n                      ? 'bg-red-500/10 text-red-400'\n                      : 'bg-slate-500/10 text-slate-400'\"\n                >\n                  <span\n                    class=\"w-1.5 h-1.5 rounded-full mr-1.5\"\n                    :class=\"garage.status === 'active'\n                      ? 'bg-emerald-400'\n                      : garage.status === 'suspended'\n                        ? 'bg-red-400'\n                        : 'bg-slate-400'\"\n                  ></span>\n                  {{ garage.status === 'active' ? $t('garages.active') : garage.status === 'suspended' ? $t('garages.suspended') : $t('garages.inactive') }}\n                </span>\n              </td>\n\n              <!-- Current Package -->\n              <td class=\"py-3.5 px-4\">\n                <div class=\"flex items-center gap-2\">\n                  <span\n                    class=\"px-2.5 py-0.5 rounded-full text-xs font-medium\"\n                    :class=\"tierBadgeClass(garage.tier)\"\n                  >\n                    {{ garage.tier }}\n                  </span>\n                  <!-- Change Package Button -->\n                  <div class=\"relative\" ref=\"dropdownRefs\">\n                    <button\n                      @click=\"togglePackageDropdown(garage.id)\"\n                      class=\"p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-slate-700 transition\"\n                      :title=\"$t('garages.change_package')\"\n                    >\n                      <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z\" />\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\" />\n                      </svg>\n                    </button>\n                    <!-- Dropdown -->\n                    <div\n                      v-if=\"openDropdownId === garage.id\"\n                      class=\"absolute right-0 mt-1 w-44 bg-slate-800 border border-slate-700 rounded-lg shadow-xl py-1 z-40\"\n                    >\n                      <button\n                        v-for=\"tier in availableTiers\"\n                        :key=\"tier\"\n                        @click=\"changePackage(garage.id, tier)\"\n                        class=\"flex items-center gap-2 w-full px-3 py-2 text-sm text-left transition\"\n                        :class=\"garage.tier === tier\n                          ? 'text-indigo-400 bg-indigo-500/10'\n                          : 'text-slate-300 hover:bg-slate-700 hover:text-white'\"\n                      >\n                        <span\n                          class=\"w-2 h-2 rounded-full\"\n                          :class=\"tier === 'free' ? 'bg-slate-400' : tier === 'premium' ? 'bg-amber-400' : 'bg-purple-400'\"\n                        ></span>\n                        {{ tier.charAt(0).toUpperCase() + tier.slice(1) }}\n                        <span v-if=\"garage.tier === tier\" class=\"ml-auto\">\n                          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\" />\n                          </svg>\n                        </span>\n                      </button>\n                    </div>\n                  </div>\n                </div>\n              </td>\n\n              <!-- Actions -->\n              <td class=\"py-3.5 px-4\">\n                <div class=\"flex items-center gap-2\">\n                  <button\n                    @click=\"viewGarage(garage.id)\"\n                    class=\"px-3 py-1.5 text-xs font-medium bg-indigo-600/20 text-indigo-300 hover:bg-indigo-600/30 rounded-lg transition\"\n                  >\n                    {{ $t('garages.view') }}\n                  </button>\n                  <button\n                    @click=\"toggleStatus(garage.id)\"\n                    class=\"px-3 py-1.5 text-xs font-medium rounded-lg transition\"\n                    :class=\"garage.status === 'active'\n                      ? 'bg-red-500/10 text-red-300 hover:bg-red-500/20'\n                      : 'bg-emerald-500/10 text-emerald-300 hover:bg-emerald-500/20'\"\n                  >\n                    {{ garage.status === 'active' ? $t('garages.deactivate') : $t('garages.activate') }}\n                  </button>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n\n      <!-- Empty State -->\n      <div\n        v-if=\"filteredGarages.length === 0\"\n        class=\"flex flex-col items-center justify-center py-16 text-center\"\n      >\n        <svg class=\"w-12 h-12 text-slate-600 mb-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4\" />\n        </svg>\n        <p class=\"text-slate-400 text-sm\">{{ $t('garages.no_results') }}</p>\n      </div>\n    </div>\n\n    <!-- Save Notification -->\n    <div\n      v-if=\"saveNotification\"\n      class=\"fixed bottom-6 right-6 px-5 py-3 rounded-xl shadow-xl text-sm font-medium z-50\"\n      :class=\"saveNotification.type === 'success'\n        ? 'bg-emerald-600 text-white'\n        : 'bg-red-600 text-white'\"\n    >\n      {{ saveNotification.message }}\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, reactive } from 'vue'\n\ndefinePageMeta({\n  middleware: 'auth',\n})\n\n// ── Types ──────────────────────────────────────────────────────────\n\ninterface Garage {\n  id: number\n  companyName: string\n  contactName: string\n  email: string\n  status: 'active' | 'inactive' | 'suspended'\n  tier: 'free' | 'premium' | 'enterprise'\n  initials: string\n  colorClass: string\n}\n\n// ── State ──────────────────────────────────────────────────────────\n\nconst searchQuery = ref('')\nconst filterTier = ref('all')\nconst openDropdownId = ref<number | null>(null)\nconst saveNotification = ref<{ type: 'success' | 'error'; message: string } | null>(null)\n\nconst availableTiers = ['free', 'premium', 'enterprise']\n\n// ── Mock Data ──────────────────────────────────────────────────────\n\nconst garages = reactive<Garage[]>([\n  {\n    id: 1,\n    companyName: 'Kovács Autószerviz',\n    contactName: 'Kovács István',\n    email: 'kovacs@autoserviz.hu',\n    status: 'active',\n    tier: 'premium',\n    initials: 'KA',\n    colorClass: 'bg-amber-600',\n  },\n  {\n    id: 2,\n    companyName: 'Nagy Gépjárműjavító Kft.',\n    contactName: 'Nagy Péter',\n    email: 'info@nagygepjarmu.hu',\n    status: 'active',\n    tier: 'enterprise',\n    initials: 'NG',\n    colorClass: 'bg-purple-600',\n  },\n  {\n    id: 3,\n    companyName: 'Tóth Autó és Motorgarázs',\n    contactName: 'Tóth Gábor',\n    email: 'toth@garazs.hu',\n    status: 'active',\n    tier: 'free',\n    initials: 'TA',\n    colorClass: 'bg-slate-600',\n  },\n  {\n    id: 4,\n    companyName: 'Szabó Flottakezelő Kft.',\n    contactName: 'Szabó Márta',\n    email: 'szabo@flotta.hu',\n    status: 'inactive',\n    tier: 'premium',\n    initials: 'SZ',\n    colorClass: 'bg-amber-600',\n  },\n  {\n    id: 5,\n    companyName: 'Horváth Autótechnika',\n    contactName: 'Horváth László',\n    email: 'horvath@autotechnika.hu',\n    status: 'suspended',\n    tier: 'free',\n    initials: 'HA',\n    colorClass: 'bg-slate-600',\n  },\n  {\n    id: 6,\n    companyName: 'Kiss & Társa Szerviz',\n    contactName: 'Kiss Anna',\n    email: 'kiss@szerviz.hu',\n    status: 'active',\n    tier: 'enterprise',\n    initials: 'KT',\n    colorClass: 'bg-purple-600',\n  },\n  {\n    id: 7,\n    companyName: 'Molnár Autóház Kft.',\n    contactName: 'Molnár Zoltán',\n    email: 'molnar@autohaz.hu',\n    status: 'active',\n    tier: 'premium',\n    initials: 'MA',\n    colorClass: 'bg-amber-600',\n  },\n  {\n    id: 8,\n    companyName: 'Farkas Gépjármű Szerviz',\n    contactName: 'Farkas Béla',\n    email: 'farkas@gepjarmu.hu',\n    status: 'inactive',\n    tier: 'free',\n    initials: 'FG',\n    colorClass: 'bg-slate-600',\n  },\n])\n\n// ── Computed ───────────────────────────────────────────────────────\n\nconst activeCount = computed(() => garages.filter(g => g.status === 'active').length)\nconst premiumCount = computed(() => garages.filter(g => g.tier === 'premium').length)\nconst enterpriseCount = computed(() => garages.filter(g => g.tier === 'enterprise').length)\n\nconst filteredGarages = computed(() => {\n  return garages.filter(g => {\n    // Search filter\n    if (searchQuery.value) {\n      const q = searchQuery.value.toLowerCase()\n      const matchesSearch =\n        g.companyName.toLowerCase().includes(q) ||\n        g.contactName.toLowerCase().includes(q) ||\n        g.email.toLowerCase().includes(q)\n      if (!matchesSearch) return false\n    }\n    // Tier filter\n    if (filterTier.value !== 'all' && g.tier !== filterTier.value) return false\n    return true\n  })\n})\n\n// ── Methods ────────────────────────────────────────────────────────\n\nfunction tierBadgeClass(tier: string): string {\n  if (tier === 'enterprise') return 'bg-purple-500/20 text-purple-300'\n  if (tier === 'premium') return 'bg-amber-500/20 text-amber-300'\n  return 'bg-slate-500/20 text-slate-300'\n}\n\nfunction togglePackageDropdown(garageId: number) {\n  openDropdownId.value = openDropdownId.value === garageId ? null : garageId\n}\n\nfunction changePackage(garageId: number, newTier: string) {\n  const garage = garages.find(g => g.id === garageId)\n  if (!garage) return\n\n  const oldTier = garage.tier\n  garage.tier = newTier as Garage['tier']\n  openDropdownId.value = null\n\n  showNotification('success', `\"${garage.companyName}\" csomag módosítva: ${oldTier} → ${newTier}`)\n  console.log(`[Garages] Package changed: garage=${garageId}, from=${oldTier}, to=${newTier}`)\n}\n\nfunction viewGarage(garageId: number) {\n  console.log(`[Garages] View garage: ${garageId}`)\n  // Future: navigate to garage detail page\n}\n\nfunction toggleStatus(garageId: number) {\n  const garage = garages.find(g => g.id === garageId)\n  if (!garage) return\n\n  garage.status = garage.status === 'active' ? 'inactive' : 'active'\n  showNotification('success', `\"${garage.companyName}\" státusz módosítva: ${garage.status}`)\n  console.log(`[Garages] Status toggled: garage=${garageId}, newStatus=${garage.status}`)\n}\n\nfunction showNotification(type: 'success' | 'error', message: string) {\n  saveNotification.value = { type, message }\n  setTimeout(() => {\n    saveNotification.value = null\n  }, 4000)\n}\n\n// Close dropdown on outside click\nfunction handleClickOutside(e: MouseEvent) {\n  // Simple approach: close any open dropdown\n  openDropdownId.value = null\n}\n\n// We need to handle outside clicks for dropdowns\nif (typeof window !== 'undefined') {\n  // Will be set up on mount\n}\n</script>\n"],"version":3}