161 lines
15 KiB
JavaScript
161 lines
15 KiB
JavaScript
import { defineComponent, ref, reactive, computed, useSSRContext } from "vue";
|
|
import { ssrRenderAttrs, ssrInterpolate, ssrRenderAttr, ssrIncludeBooleanAttr, ssrLooseContain, ssrLooseEqual, ssrRenderList, ssrRenderClass } from "vue/server-renderer";
|
|
import "/app/node_modules/hookable/dist/index.mjs";
|
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
__name: "index",
|
|
__ssrInlineRender: true,
|
|
setup(__props) {
|
|
const searchQuery = ref("");
|
|
const filterTier = ref("all");
|
|
const openDropdownId = ref(null);
|
|
const saveNotification = ref(null);
|
|
const availableTiers = ["free", "premium", "enterprise"];
|
|
const garages = reactive([
|
|
{
|
|
id: 1,
|
|
companyName: "Kovács Autószerviz",
|
|
contactName: "Kovács István",
|
|
email: "kovacs@autoserviz.hu",
|
|
status: "active",
|
|
tier: "premium",
|
|
initials: "KA",
|
|
colorClass: "bg-amber-600"
|
|
},
|
|
{
|
|
id: 2,
|
|
companyName: "Nagy Gépjárműjavító Kft.",
|
|
contactName: "Nagy Péter",
|
|
email: "info@nagygepjarmu.hu",
|
|
status: "active",
|
|
tier: "enterprise",
|
|
initials: "NG",
|
|
colorClass: "bg-purple-600"
|
|
},
|
|
{
|
|
id: 3,
|
|
companyName: "Tóth Autó és Motorgarázs",
|
|
contactName: "Tóth Gábor",
|
|
email: "toth@garazs.hu",
|
|
status: "active",
|
|
tier: "free",
|
|
initials: "TA",
|
|
colorClass: "bg-slate-600"
|
|
},
|
|
{
|
|
id: 4,
|
|
companyName: "Szabó Flottakezelő Kft.",
|
|
contactName: "Szabó Márta",
|
|
email: "szabo@flotta.hu",
|
|
status: "inactive",
|
|
tier: "premium",
|
|
initials: "SZ",
|
|
colorClass: "bg-amber-600"
|
|
},
|
|
{
|
|
id: 5,
|
|
companyName: "Horváth Autótechnika",
|
|
contactName: "Horváth László",
|
|
email: "horvath@autotechnika.hu",
|
|
status: "suspended",
|
|
tier: "free",
|
|
initials: "HA",
|
|
colorClass: "bg-slate-600"
|
|
},
|
|
{
|
|
id: 6,
|
|
companyName: "Kiss & Társa Szerviz",
|
|
contactName: "Kiss Anna",
|
|
email: "kiss@szerviz.hu",
|
|
status: "active",
|
|
tier: "enterprise",
|
|
initials: "KT",
|
|
colorClass: "bg-purple-600"
|
|
},
|
|
{
|
|
id: 7,
|
|
companyName: "Molnár Autóház Kft.",
|
|
contactName: "Molnár Zoltán",
|
|
email: "molnar@autohaz.hu",
|
|
status: "active",
|
|
tier: "premium",
|
|
initials: "MA",
|
|
colorClass: "bg-amber-600"
|
|
},
|
|
{
|
|
id: 8,
|
|
companyName: "Farkas Gépjármű Szerviz",
|
|
contactName: "Farkas Béla",
|
|
email: "farkas@gepjarmu.hu",
|
|
status: "inactive",
|
|
tier: "free",
|
|
initials: "FG",
|
|
colorClass: "bg-slate-600"
|
|
}
|
|
]);
|
|
const activeCount = computed(() => garages.filter((g) => g.status === "active").length);
|
|
const premiumCount = computed(() => garages.filter((g) => g.tier === "premium").length);
|
|
const enterpriseCount = computed(() => garages.filter((g) => g.tier === "enterprise").length);
|
|
const filteredGarages = computed(() => {
|
|
return garages.filter((g) => {
|
|
if (searchQuery.value) {
|
|
const q = searchQuery.value.toLowerCase();
|
|
const matchesSearch = g.companyName.toLowerCase().includes(q) || g.contactName.toLowerCase().includes(q) || g.email.toLowerCase().includes(q);
|
|
if (!matchesSearch) return false;
|
|
}
|
|
if (filterTier.value !== "all" && g.tier !== filterTier.value) return false;
|
|
return true;
|
|
});
|
|
});
|
|
function tierBadgeClass(tier) {
|
|
if (tier === "enterprise") return "bg-purple-500/20 text-purple-300";
|
|
if (tier === "premium") return "bg-amber-500/20 text-amber-300";
|
|
return "bg-slate-500/20 text-slate-300";
|
|
}
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
_push(`<div${ssrRenderAttrs(_attrs)}><div class="mb-8"><h1 class="text-2xl font-bold text-white">${ssrInterpolate(_ctx.$t("garages.title"))}</h1><p class="text-slate-400 mt-1">${ssrInterpolate(_ctx.$t("garages.subtitle"))}</p></div><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8"><div class="bg-slate-800 rounded-xl border border-slate-700 p-4"><div class="flex items-center gap-3"><div class="p-2 rounded-lg bg-indigo-500/10 text-indigo-400"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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"></path></svg></div><div><p class="text-xs text-slate-400 uppercase tracking-wider">${ssrInterpolate(_ctx.$t("garages.total_garages"))}</p><p class="text-2xl font-bold text-white">${ssrInterpolate(garages.length)}</p></div></div></div><div class="bg-slate-800 rounded-xl border border-slate-700 p-4"><div class="flex items-center gap-3"><div class="p-2 rounded-lg bg-emerald-500/10 text-emerald-400"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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"></path></svg></div><div><p class="text-xs text-slate-400 uppercase tracking-wider">${ssrInterpolate(_ctx.$t("garages.active_garages"))}</p><p class="text-2xl font-bold text-emerald-400">${ssrInterpolate(activeCount.value)}</p></div></div></div><div class="bg-slate-800 rounded-xl border border-slate-700 p-4"><div class="flex items-center gap-3"><div class="p-2 rounded-lg bg-amber-500/10 text-amber-400"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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"></path></svg></div><div><p class="text-xs text-slate-400 uppercase tracking-wider">${ssrInterpolate(_ctx.$t("garages.premium_garages"))}</p><p class="text-2xl font-bold text-amber-400">${ssrInterpolate(premiumCount.value)}</p></div></div></div><div class="bg-slate-800 rounded-xl border border-slate-700 p-4"><div class="flex items-center gap-3"><div class="p-2 rounded-lg bg-purple-500/10 text-purple-400"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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"></path></svg></div><div><p class="text-xs text-slate-400 uppercase tracking-wider">${ssrInterpolate(_ctx.$t("garages.enterprise_garages"))}</p><p class="text-2xl font-bold text-purple-400">${ssrInterpolate(enterpriseCount.value)}</p></div></div></div></div><div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6"><div class="relative flex-1 max-w-md"><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"><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"></path></svg><input${ssrRenderAttr("value", searchQuery.value)} type="text"${ssrRenderAttr("placeholder", _ctx.$t("garages.search_placeholder"))} 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"></div><div class="flex items-center gap-2"><select 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"><option value="all"${ssrIncludeBooleanAttr(Array.isArray(filterTier.value) ? ssrLooseContain(filterTier.value, "all") : ssrLooseEqual(filterTier.value, "all")) ? " selected" : ""}>${ssrInterpolate(_ctx.$t("garages.all_tiers"))}</option><option value="free"${ssrIncludeBooleanAttr(Array.isArray(filterTier.value) ? ssrLooseContain(filterTier.value, "free") : ssrLooseEqual(filterTier.value, "free")) ? " selected" : ""}>Free</option><option value="premium"${ssrIncludeBooleanAttr(Array.isArray(filterTier.value) ? ssrLooseContain(filterTier.value, "premium") : ssrLooseEqual(filterTier.value, "premium")) ? " selected" : ""}>Premium</option><option value="enterprise"${ssrIncludeBooleanAttr(Array.isArray(filterTier.value) ? ssrLooseContain(filterTier.value, "enterprise") : ssrLooseEqual(filterTier.value, "enterprise")) ? " selected" : ""}>Enterprise</option></select></div></div><div class="bg-slate-800/50 border border-slate-700 rounded-xl overflow-hidden"><div class="overflow-x-auto"><table class="w-full text-sm"><thead><tr class="border-b border-slate-700 bg-slate-800/80"><th class="text-left py-3.5 px-4 text-xs font-semibold uppercase tracking-wider text-slate-400">ID</th><th class="text-left py-3.5 px-4 text-xs font-semibold uppercase tracking-wider text-slate-400">${ssrInterpolate(_ctx.$t("garages.company_name"))}</th><th class="text-left py-3.5 px-4 text-xs font-semibold uppercase tracking-wider text-slate-400">${ssrInterpolate(_ctx.$t("garages.email"))}</th><th class="text-left py-3.5 px-4 text-xs font-semibold uppercase tracking-wider text-slate-400">${ssrInterpolate(_ctx.$t("garages.status"))}</th><th class="text-left py-3.5 px-4 text-xs font-semibold uppercase tracking-wider text-slate-400">${ssrInterpolate(_ctx.$t("garages.current_package"))}</th><th class="text-left py-3.5 px-4 text-xs font-semibold uppercase tracking-wider text-slate-400">${ssrInterpolate(_ctx.$t("garages.actions"))}</th></tr></thead><tbody><!--[-->`);
|
|
ssrRenderList(filteredGarages.value, (garage) => {
|
|
_push(`<tr class="border-b border-slate-700/50 hover:bg-slate-700/30 transition"><td class="py-3.5 px-4 text-slate-400 font-mono text-xs">${ssrInterpolate(garage.id)}</td><td class="py-3.5 px-4"><div class="flex items-center gap-3"><div class="${ssrRenderClass([garage.colorClass, "w-8 h-8 rounded-lg flex items-center justify-center text-sm font-bold text-white"])}">${ssrInterpolate(garage.initials)}</div><div><p class="text-sm font-medium text-white">${ssrInterpolate(garage.companyName)}</p><p class="text-xs text-slate-500">${ssrInterpolate(garage.contactName)}</p></div></div></td><td class="py-3.5 px-4 text-slate-300">${ssrInterpolate(garage.email)}</td><td class="py-3.5 px-4"><span class="${ssrRenderClass([garage.status === "active" ? "bg-emerald-500/10 text-emerald-400" : garage.status === "suspended" ? "bg-red-500/10 text-red-400" : "bg-slate-500/10 text-slate-400", "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"])}"><span class="${ssrRenderClass([garage.status === "active" ? "bg-emerald-400" : garage.status === "suspended" ? "bg-red-400" : "bg-slate-400", "w-1.5 h-1.5 rounded-full mr-1.5"])}"></span> ${ssrInterpolate(garage.status === "active" ? _ctx.$t("garages.active") : garage.status === "suspended" ? _ctx.$t("garages.suspended") : _ctx.$t("garages.inactive"))}</span></td><td class="py-3.5 px-4"><div class="flex items-center gap-2"><span class="${ssrRenderClass([tierBadgeClass(garage.tier), "px-2.5 py-0.5 rounded-full text-xs font-medium"])}">${ssrInterpolate(garage.tier)}</span><div class="relative"><button class="p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-slate-700 transition"${ssrRenderAttr("title", _ctx.$t("garages.change_package"))}><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg></button>`);
|
|
if (openDropdownId.value === garage.id) {
|
|
_push(`<div class="absolute right-0 mt-1 w-44 bg-slate-800 border border-slate-700 rounded-lg shadow-xl py-1 z-40"><!--[-->`);
|
|
ssrRenderList(availableTiers, (tier) => {
|
|
_push(`<button class="${ssrRenderClass([garage.tier === tier ? "text-indigo-400 bg-indigo-500/10" : "text-slate-300 hover:bg-slate-700 hover:text-white", "flex items-center gap-2 w-full px-3 py-2 text-sm text-left transition"])}"><span class="${ssrRenderClass([tier === "free" ? "bg-slate-400" : tier === "premium" ? "bg-amber-400" : "bg-purple-400", "w-2 h-2 rounded-full"])}"></span> ${ssrInterpolate(tier.charAt(0).toUpperCase() + tier.slice(1))} `);
|
|
if (garage.tier === tier) {
|
|
_push(`<span class="ml-auto"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg></span>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`</button>`);
|
|
});
|
|
_push(`<!--]--></div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`</div></div></td><td class="py-3.5 px-4"><div class="flex items-center gap-2"><button 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">${ssrInterpolate(_ctx.$t("garages.view"))}</button><button class="${ssrRenderClass([garage.status === "active" ? "bg-red-500/10 text-red-300 hover:bg-red-500/20" : "bg-emerald-500/10 text-emerald-300 hover:bg-emerald-500/20", "px-3 py-1.5 text-xs font-medium rounded-lg transition"])}">${ssrInterpolate(garage.status === "active" ? _ctx.$t("garages.deactivate") : _ctx.$t("garages.activate"))}</button></div></td></tr>`);
|
|
});
|
|
_push(`<!--]--></tbody></table></div>`);
|
|
if (filteredGarages.value.length === 0) {
|
|
_push(`<div class="flex flex-col items-center justify-center py-16 text-center"><svg class="w-12 h-12 text-slate-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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"></path></svg><p class="text-slate-400 text-sm">${ssrInterpolate(_ctx.$t("garages.no_results"))}</p></div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`</div>`);
|
|
if (saveNotification.value) {
|
|
_push(`<div class="${ssrRenderClass([saveNotification.value.type === "success" ? "bg-emerald-600 text-white" : "bg-red-600 text-white", "fixed bottom-6 right-6 px-5 py-3 rounded-xl shadow-xl text-sm font-medium z-50"])}">${ssrInterpolate(saveNotification.value.message)}</div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`</div>`);
|
|
};
|
|
}
|
|
});
|
|
const _sfc_setup = _sfc_main.setup;
|
|
_sfc_main.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("pages/garages/index.vue");
|
|
return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
|
|
};
|
|
export {
|
|
_sfc_main as default
|
|
};
|
|
//# sourceMappingURL=index-ebkVtBaw.js.map
|