${reportType.toUpperCase()} Report - The Church of Pentecost Gent Belgium

Summary

${Object.entries(summary).map( ([key, value]) => `

${key.replace(/_/g, " ").toUpperCase()}: ${value}

` ).join("")}

` : ""} ${tableHeaders} ${tableRows}

`; }; return /* @__PURE__ */ import_react.default.createElement("div", { className: "min-h-screen bg-[#F7F8FA] dark:bg-[#121212] font-['Nanum_Gothic']" }, sidebarOpen && /* @__PURE__ */ import_react.default.createElement( "div", { className: "fixed inset-0 bg-black bg-opacity-50 dark:bg-black dark:bg-opacity-70 z-40 md:hidden", onClick: () => setSidebarOpen(false) } ), /* @__PURE__ */ import_react.default.createElement( "div", { className: `fixed left-0 top-0 h-full bg-white dark:bg-[#1E1E1E] border-r border-[#EDF0F4] dark:border-[#333333] z-50 transition-all duration-300 ease-in-out w-60 flex flex-col ${sidebarOpen ? "translate-x-0" : "-translate-x-full"} md:translate-x-0` }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-center h-16 px-4 border-b border-[#EDF0F4] dark:border-[#333333] flex-shrink-0" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-center space-x-3" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "w-8 h-8 bg-[#4F8BFF] dark:bg-[#5B94FF] rounded-lg flex items-center justify-center" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "text-white font-bold text-lg" }, "C")), /* @__PURE__ */ import_react.default.createElement("span", { className: "text-[#07111F] dark:text-[#E5E5E5] font-['Lato'] font-extrabold text-sm" }, "COP Gent Belgium")), /* @__PURE__ */ import_react.default.createElement( "button", { onClick: () => setSidebarOpen(false), className: "ml-auto md:hidden p-1 rounded hover:bg-[#F5F7FB] dark:hover:bg-[#333333] transition-colors" }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.X, { size: 24, className: "text-[#536081] dark:text-[#A0A0A0]" }) )), /* @__PURE__ */ import_react.default.createElement("nav", { className: "flex-1 px-3 py-4 space-y-1 overflow-y-auto" }, menuItems.map((item, index) => /* @__PURE__ */ import_react.default.createElement("a", { key: index, href: item.href }, /* @__PURE__ */ import_react.default.createElement( "button", { className: `w-full flex items-center px-3 py-2.5 text-sm font-medium rounded-lg transition-colors ${item.active ? "bg-[#4F8BFF] dark:bg-[#5B94FF] text-white" : "text-[#536081] dark:text-[#B0B0B0] hover:bg-[#F1F5FF] dark:hover:bg-[#2A2A2A] hover:text-[#4F8BFF] dark:hover:text-[#5B94FF]"}` }, /* @__PURE__ */ import_react.default.createElement(item.icon, { size: 20, className: "mr-3" }), /* @__PURE__ */ import_react.default.createElement("span", { className: "flex-1 text-left" }, item.label) )))) ), /* @__PURE__ */ import_react.default.createElement("div", { className: "md:ml-60" }, /* @__PURE__ */ import_react.default.createElement( "header", { className: "h-16 bg-white dark:bg-[#1E1E1E] border-b border-[#EDF0F4] dark:border-[#333333] flex items-center justify-between px-4 md:px-6 sticky top-0 z-30", style: { boxShadow: "0 1px 2px rgba(0,0,0,0.04)" } }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-center space-x-4" }, /* @__PURE__ */ import_react.default.createElement( "button", { onClick: () => setSidebarOpen(true), className: "md:hidden p-1 rounded hover:bg-[#F5F7FB] dark:hover:bg-[#333333] transition-colors" }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Menu, { size: 24, className: "text-[#536081] dark:text-[#A0A0A0]" }) ), /* @__PURE__ */ import_react.default.createElement("h1", { className: "text-[#07111F] dark:text-[#E5E5E5] font-['Lato'] font-extrabold text-xl" }, "Reports & Analytics")), /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-center space-x-2 sm:space-x-3" }, /* @__PURE__ */ import_react.default.createElement("button", { className: "p-2 bg-white dark:bg-[#2A2A2A] border border-[#E1E6ED] dark:border-[#404040] rounded-lg hover:bg-[#F5F7FB] dark:hover:bg-[#333333] transition-colors" }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Bell, { size: 20, className: "text-[#536081] dark:text-[#A0A0A0]" })), /* @__PURE__ */ import_react.default.createElement("div", { className: "w-8 h-8 bg-[#4F8BFF] dark:bg-[#5B94FF] rounded-full flex items-center justify-center" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "text-white text-sm font-bold" }, "A"))) ), /* @__PURE__ */ import_react.default.createElement("main", { className: "p-4 md:p-6 lg:p-8" }, /* @__PURE__ */ import_react.default.createElement( "div", { className: "bg-white dark:bg-[#1E1E1E] rounded-xl border border-[#EDF0F4] dark:border-[#333333] p-6 mb-6", style: { boxShadow: "0 1px 3px rgba(0,0,0,0.04)" } }, /* @__PURE__ */ import_react.default.createElement("h2", { className: "text-[#07111F] dark:text-[#E5E5E5] font-['Lato'] font-bold text-lg mb-4" }, "Generate Report"), /* @__PURE__ */ import_react.default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4 mb-4" }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("label", { className: "block text-sm font-medium text-[#536081] dark:text-[#B0B0B0] mb-2" }, "Report Type"), /* @__PURE__ */ import_react.default.createElement( "select", { value: reportType, onChange: (e) => setReportType(e.target.value), className: "w-full px-4 py-2 bg-white dark:bg-[#2A2A2A] border border-[#E1E6ED] dark:border-[#404040] rounded-lg text-sm text-[#07111F] dark:text-[#E5E5E5] focus:outline-none focus:ring-2 focus:ring-[#4F8BFF] dark:focus:ring-[#5B94FF]" }, /* @__PURE__ */ import_react.default.createElement("option", { value: "members" }, "Members Report"), /* @__PURE__ */ import_react.default.createElement("option", { value: "contributions" }, "Contributions Report"), /* @__PURE__ */ import_react.default.createElement("option", { value: "events" }, "Events Report"), /* @__PURE__ */ import_react.default.createElement("option", { value: "attendance" }, "Attendance Report") )), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("label", { className: "block text-sm font-medium text-[#536081] dark:text-[#B0B0B0] mb-2" }, "Start Date"), /* @__PURE__ */ import_react.default.createElement( "input", { type: "date", value: dateRange.start, onChange: (e) => setDateRange({ ...dateRange, start: e.target.value }), className: "w-full px-4 py-2 bg-white dark:bg-[#2A2A2A] border border-[#E1E6ED] dark:border-[#404040] rounded-lg text-sm text-[#07111F] dark:text-[#E5E5E5] focus:outline-none focus:ring-2 focus:ring-[#4F8BFF] dark:focus:ring-[#5B94FF]" } )), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("label", { className: "block text-sm font-medium text-[#536081] dark:text-[#B0B0B0] mb-2" }, "End Date"), /* @__PURE__ */ import_react.default.createElement( "input", { type: "date", value: dateRange.end, onChange: (e) => setDateRange({ ...dateRange, end: e.target.value }), className: "w-full px-4 py-2 bg-white dark:bg-[#2A2A2A] border border-[#E1E6ED] dark:border-[#404040] rounded-lg text-sm text-[#07111F] dark:text-[#E5E5E5] focus:outline-none focus:ring-2 focus:ring-[#4F8BFF] dark:focus:ring-[#5B94FF]" } ))), /* @__PURE__ */ import_react.default.createElement("div", { className: "flex flex-wrap gap-3" }, /* @__PURE__ */ import_react.default.createElement( "button", { onClick: generatePDF, disabled: generating || isLoading, className: "flex items-center px-4 py-2 bg-[#4F8BFF] dark:bg-[#5B94FF] text-white rounded-lg hover:bg-[#3D6FE5] dark:hover:bg-[#4F8BFF] transition-colors disabled:opacity-50" }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Printer, { size: 16, className: "mr-2" }), generating ? "Generating..." : "Export PDF" ), /* @__PURE__ */ import_react.default.createElement( "button", { onClick: exportToExcel, disabled: isLoading, className: "flex items-center px-4 py-2 bg-[#0E9250] dark:bg-[#4ADE80] text-white rounded-lg hover:bg-[#0C7A42] dark:hover:bg-[#22C55E] transition-colors disabled:opacity-50" }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.FileSpreadsheet, { size: 16, className: "mr-2" }), "Export Excel" )) ), reportData?.summary && /* @__PURE__ */ import_react.default.createElement( "div", { className: "bg-white dark:bg-[#1E1E1E] rounded-xl border border-[#EDF0F4] dark:border-[#333333] p-6 mb-6", style: { boxShadow: "0 1px 3px rgba(0,0,0,0.04)" } }, /* @__PURE__ */ import_react.default.createElement("h3", { className: "text-[#07111F] dark:text-[#E5E5E5] font-['Lato'] font-bold text-lg mb-4" }, "Summary"), /* @__PURE__ */ import_react.default.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4" }, Object.entries(reportData.summary).map(([key, value]) => /* @__PURE__ */ import_react.default.createElement( "div", { key, className: "bg-[#F7F8FA] dark:bg-[#2A2A2A] rounded-lg p-4" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "text-[#8A94A7] dark:text-[#A0A0A0] text-xs font-medium uppercase mb-1" }, key.replace(/_/g, " ")), /* @__PURE__ */ import_react.default.createElement("div", { className: "text-[#07111F] dark:text-[#E5E5E5] text-2xl font-bold" }, value) ))) ), reportData?.data && reportData.data.length > 0 && /* @__PURE__ */ import_react.default.createElement( "div", { className: "bg-white dark:bg-[#1E1E1E] rounded-xl border border-[#EDF0F4] dark:border-[#333333] overflow-hidden", style: { boxShadow: "0 1px 3px rgba(0,0,0,0.04)" } }, /* @__PURE__ */ import_react.default.createElement("div", { className: "px-6 py-4 border-b border-[#EDF0F4] dark:border-[#333333]" }, /* @__PURE__ */ import_react.default.createElement("h3", { className: "text-[#07111F] dark:text-[#E5E5E5] font-['Lato'] font-bold text-lg" }, "Report Data")), /* @__PURE__ */ import_react.default.createElement("div", { className: "overflow-x-auto" }, /* @__PURE__ */ import_react.default.createElement("table", { className: "w-full" }, /* @__PURE__ */ import_react.default.createElement("thead", { className: "bg-[#FAFBFC] dark:bg-[#2A2A2A] border-b border-[#EDF0F4] dark:border-[#333333]" }, /* @__PURE__ */ import_react.default.createElement("tr", null, Object.keys(reportData.data[0]).map((header) => /* @__PURE__ */ import_react.default.createElement( "th", { key: header, className: "px-6 py-4 text-left text-xs font-bold text-[#8A94A7] dark:text-[#A0A0A0] uppercase" }, header.replace(/_/g, " ") )))), /* @__PURE__ */ import_react.default.createElement("tbody", { className: "divide-y divide-[#EDF0F4] dark:divide-[#333333]" }, reportData.data.map((row, index) => /* @__PURE__ */ import_react.default.createElement( "tr", { key: index, className: "hover:bg-[#F7F9FC] dark:hover:bg-[#262626] transition-colors" }, Object.values(row).map((value, i) => /* @__PURE__ */ import_react.default.createElement( "td", { key: i, className: "px-6 py-4 text-sm text-[#07111F] dark:text-[#E5E5E5]" }, value || "-" )) ))))) ), isLoading && /* @__PURE__ */ import_react.default.createElement("div", { className: "text-center py-12" }, /* @__PURE__ */ import_react.default.createElement("p", { className: "text-[#8A94A7] dark:text-[#A0A0A0]" }, "Loading report data..."))))); } // virtual:/apps/web/src/app/layout.jsx init_injected_globals(); var queryClient = new QueryClient({ defaultOptions: { queries: { staleTime: 1e3 * 60 * 5, // 5 minutes cacheTime: 1e3 * 60 * 30, // 30 minutes retry: 1, refetchOnWindowFocus: false } } }); function RootLayout({ children }) { return /* @__PURE__ */ React.createElement(QueryClientProvider, { client: queryClient }, children); } // virtual:/__wrapped_entry__.jsx function WrappedPage(props) { let content = /* @__PURE__ */ import_react2.default.createElement(ReportsPage, { ...props }); content = /* @__PURE__ */ import_react2.default.createElement(RootLayout, null, content); return content; } return __toCommonJS(wrapped_entry_exports); })(); /*! Bundled license information: lucide-react/dist/cjs/lucide-react.js: (** * @license lucide-react v0.358.0 - ISC * * This source code is licensed under the ISC license. * See the LICENSE file in the root directory of this source tree. *) react/cjs/react-jsx-runtime.production.min.js: (** * @license React * react-jsx-runtime.production.min.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. *) */