function MainComponent({ role, users, images, activities, onExport, onBatchOperation, onNotify, onImport, onGenerateReport, onHelp }) { const isAdmin = role === 'admin'; const isEditor = role === 'editor'; const isViewer = role === 'viewer'; return /*#__PURE__*/ React.createElement("div", { className: "p-4 font-roboto bg-gray-100", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-[#FF1493]", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, "PINKY User Management Tool")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded shadow", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, "User Count"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, users.length)), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded shadow", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Active Users"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, users.filter((user)=>user.active).length)), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded shadow", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "Uploaded Images"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, images.length))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "Search...", className: "p-2 mb-4 w-full border rounded", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-[#FF1493] text-white py-2 px-4 rounded mr-2", onClick: onExport, __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "Export Data"), isAdmin && /*#__PURE__*/ React.createElement("button", { className: "bg-[#FF1493] text-white py-2 px-4 rounded mr-2", onClick: onBatchOperation, __source: { fileName: "", lineNumber: 41, columnNumber: 21 }, __self: this }, "Batch Operations"), isAdmin && /*#__PURE__*/ React.createElement("button", { className: "bg-[#FF1493] text-white py-2 px-4 rounded mr-2", onClick: onNotify, __source: { fileName: "", lineNumber: 42, columnNumber: 21 }, __self: this }, "Send Notifications"), isAdmin && /*#__PURE__*/ React.createElement("button", { className: "bg-[#FF1493] text-white py-2 px-4 rounded mr-2", onClick: onImport, __source: { fileName: "", lineNumber: 43, columnNumber: 21 }, __self: this }, "Import Data"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#FF1493] text-white py-2 px-4 rounded mr-2", onClick: onGenerateReport, __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, "Generate Report"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#FF1493] text-white py-2 px-4 rounded", onClick: onHelp, __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, "Help & Support")), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, "Recent Activities"), /*#__PURE__*/ React.createElement("ul", { className: "mt-4", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, activities.map((activity, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "border-b py-2", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, activity.timestamp), " - ", /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 53, columnNumber: 71 }, __self: this }, activity.user), " ", activity.action))))); } function StoryComponent() { const sampleUsers = [ { id: 1, name: 'Alice', active: true }, { id: 2, name: 'Bob', active: false }, { id: 3, name: 'Charlie', active: true } ]; const sampleImages = [ { id: 1, name: 'image1.png' }, { id: 2, name: 'image2.png' } ]; const sampleActivities = [ { user: 'Alice', action: 'added a new user', timestamp: '2023-10-01 12:00' }, { user: 'Bob', action: 'edited a user', timestamp: '2023-10-02 13:00' } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 80, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { role: "admin", users: sampleUsers, images: sampleImages, activities: sampleActivities, onExport: ()=>console.log('Export Data'), onBatchOperation: ()=>console.log('Batch Operations'), onNotify: ()=>console.log('Send Notifications'), onImport: ()=>console.log('Import Data'), onGenerateReport: ()=>console.log('Generate Report'), onHelp: ()=>console.log('Help & Support'), __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this })); }