EEP Communication App

EEP Communication Portal

\n setUsername(e.target.value)}\n style={{\n width: \"100%\",\n padding: \"10px\",\n margin: \"10px 0\",\n borderColor: BRAND_COLORS.green,\n borderRadius: \"5px\",\n }}\n />\n setPassword(e.target.value)}\n style={{\n width: \"100%\",\n padding: \"10px\",\n margin: \"10px 0\",\n borderColor: BRAND_COLORS.red,\n borderRadius: \"5px\",\n }}\n />\n e.target.style.backgroundColor = BRAND_COLORS.red}\n onMouseOut={(e) => e.target.style.backgroundColor = BRAND_COLORS.green}\n >\n Login\n \n \n \n \n );\n}",[],[157,187],{"_105":195,"_96":196,"_158":197,"_160":159,"_161":143,"_162":102,"_164":22,"_107":198,"_101":199,"_167":181,"_169":200,"_170":22,"_171":-5,"_172":201,"_99":202},"91cf73c6-2c0a-11f0-8f13-569c3dd06744","mediaMonitoring.tsx","215e7ad4-2b2d-11f0-82cd-569c3dd06744",["D",1746708435597],23,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useMemo, useState } from \"https://esm.sh/react@18.2.0\";\n\nconst BRAND_COLORS = {\n green: \"#28a745\",\n darkGreen: \"#1a7c38\",\n lightGreen: \"#a8e0a3\",\n gray: \"#f8f8f8\",\n red: \"#dc3545\",\n};\n\nfunction MediaMonitoringTab({ user }) {\n const [entries, setEntries] = useState([]);\n const [platform, setPlatform] = useState(\"\");\n const [mediaName, setMediaName] = useState(\"\"); // Keep this for the submission form\n const [title, setTitle] = useState(\"\");\n const [mainIdea, setMainIdea] = useState(\"\"); // Keep this for the submission form\n const [sentiment, setSentiment] = useState(\"neutral\");\n const [link, setLink] = useState(\"\");\n\n const [platformFilter, setPlatformFilter] = useState(\"\");\n const [mediaNameFilter, setMediaNameFilter] = useState(\"\");\n const [titleFilter, setTitleFilter] = useState(\"\");\n const [sentimentFilter, setSentimentFilter] = useState(\"\");\n const [authorFilter, setAuthorFilter] = useState(\"\");\n\n const [page, setPage] = useState(1);\n const itemsPerPage = 8;\n\n const [successMessage, setSuccessMessage] = useState(\"\");\n const [errorMessage, setErrorMessage] = useState(\"\");\n const [isSubmitting, setIsSubmitting] = useState(false);\n\n // State for edit modal\n const [isEditModalOpen, setIsEditModalOpen] = useState(false);\n const [editingEntry, setEditingEntry] = useState(null);\n const [editFormData, setEditFormData] = useState({\n id: null,\n platform: \"\",\n mediaName: \"\", // <-- Matches backend expectation\n title: \"\",\n mainIdea: \"\", // <-- Matches backend expectation\n sentiment: \"\",\n link: \"\",\n author: \"\", // Read-only, but included for completeness\n });\n const [isSavingEdit, setIsSavingEdit] = useState(false);\n\n useEffect(() => {\n const fetchEntries = async () => {\n try {\n const response = await fetch(\"/fetch-media\");\n const data = await response.json();\n // Assuming fetched entries have properties matching backend column names (e.g., media_name, main_idea)\n // We might need to map these to frontend state names if they differ\n setEntries(data.entries || []);\n } catch (error) {\n console.error(\"Failed to fetch media entries:\", error);\n }\n };\n fetchEntries();\n }, []);\n\n const filteredMonitoring = useMemo(() => {\n return entries.filter(entry => {\n // Assuming entry properties match backend column names (media_name, main_idea)\n const matchesPlatform = entry.platform.toLowerCase().includes(platformFilter.toLowerCase());\n const matchesMediaName = entry.media_name.toLowerCase().includes(mediaNameFilter.toLowerCase());\n const matchesTitle = entry.title.toLowerCase().includes(titleFilter.toLowerCase());\n const matchesSentiment = sentimentFilter\n ? entry.sentiment.toLowerCase() === sentimentFilter.toLowerCase()\n : true;\n const matchesAuthor = entry.author.toLowerCase().includes(authorFilter.toLowerCase());\n\n return matchesPlatform && matchesMediaName && matchesTitle && matchesSentiment && matchesAuthor;\n });\n }, [entries, platformFilter, mediaNameFilter, titleFilter, sentimentFilter, authorFilter]);\n\n const paginatedMonitoring = useMemo(() => {\n const start = (page - 1) * itemsPerPage;\n return filteredMonitoring.slice(start, start + itemsPerPage);\n }, [filteredMonitoring, page]);\n\n const totalPages = Math.ceil(filteredMonitoring.length / itemsPerPage);\n\n const submitEntry = async () => {\n if (!platform || !mediaName || !title || !mainIdea || !sentiment || !link) {\n setErrorMessage(\"Please fill in all required fields.\");\n setSuccessMessage(\"\");\n return;\n }\n\n setIsSubmitting(true);\n setErrorMessage(\"\");\n\n try {\n const response = await fetch(\"/submit-media\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n platform,\n mediaName, // Sending mediaName (uppercase N)\n title,\n mainIdea, // Sending mainIdea\n sentiment,\n link,\n author: user.username,\n }),\n });\n\n const result = await response.json();\n if (response.ok && result.success && result.entry) {\n // --- CHANGE 1: Prepend the new entry to the array ---\n setEntries(prevEntries => [result.entry, ...prevEntries]);\n // --- End CHANGE 1 ---\n setSuccessMessage(\"Entry submitted successfully!\");\n setPlatform(\"\");\n setMediaName(\"\");\n setTitle(\"\");\n setMainIdea(\"\");\n setSentiment(\"neutral\");\n setLink(\"\");\n setTimeout(() => setSuccessMessage(\"\"), 3000);\n } else {\n setErrorMessage(result.message || \"Submission failed. Please try again.\");\n setTimeout(() => setErrorMessage(\"\"), 3000);\n }\n } catch (error) {\n setErrorMessage(\"An error occurred. Please try again later.\");\n console.error(\"Media entry submission failed:\", error);\n setTimeout(() => setErrorMessage(\"\"), 3000);\n } finally {\n setIsSubmitting(false);\n }\n };\n\n const handleDelete = async (entryId) => {\n const confirmed = confirm(\"Are you sure you want to delete this entry?\");\n if (!confirmed) return;\n\n try {\n const response = await fetch(\"/delete-media\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ id: entryId }),\n });\n\n const result = await response.json();\n\n if (response.ok && result.success) {\n setEntries(prevEntries => prevEntries.filter(entry => entry.id !== entryId));\n setSuccessMessage(\"Entry deleted successfully.\");\n setTimeout(() => setSuccessMessage(\"\"), 3000);\n } else {\n setErrorMessage(result.message || \"Failed to delete entry.\");\n setTimeout(() => setErrorMessage(\"\"), 3000);\n }\n } catch (error) {\n console.error(\"Error deleting entry:\", error);\n setErrorMessage(\"An error occurred while deleting the entry.\");\n setTimeout(() => setErrorMessage(\"\"), 3000);\n }\n };\n\n // Function to open the edit modal\n const handleEditClick = (entry) => {\n setEditingEntry(entry);\n // Initialize edit form data from the entry object\n // Assuming entry properties match backend column names (media_name, main_idea)\n setEditFormData({\n id: entry.id,\n platform: entry.platform,\n mediaName: entry.media_name, // <-- Map media_name from entry to mediaName state\n title: entry.title,\n mainIdea: entry.main_idea, // <-- Map main_idea from entry to mainIdea state\n sentiment: entry.sentiment,\n link: entry.link,\n author: entry.author,\n });\n setIsEditModalOpen(true);\n setSuccessMessage(\"\"); // Clear messages when opening modal\n setErrorMessage(\"\");\n };\n\n // Function to close the edit modal\n const handleCloseEditModal = () => {\n setIsEditModalOpen(false);\n setEditingEntry(null);\n setEditFormData({\n id: null,\n platform: \"\",\n mediaName: \"\",\n title: \"\",\n mainIdea: \"\",\n sentiment: \"\",\n link: \"\",\n author: \"\",\n });\n setIsSavingEdit(false); // Reset saving state\n };\n\n // Function to handle changes in the edit modal form\n const handleEditFormChange = (e) => {\n const { name, value } = e.target;\n setEditFormData(prevState => ({\n ...prevState,\n [name]: value,\n }));\n };\n\n // Function to save the edited entry\n const handleSaveEdit = async () => {\n // Validate required fields from editFormData\n if (\n !editFormData.platform || !editFormData.mediaName || !editFormData.title || !editFormData.mainIdea\n || !editFormData.sentiment || !editFormData.link\n ) {\n setErrorMessage(\"Please fill in all required fields in the edit form.\");\n return;\n }\n\n setIsSavingEdit(true);\n setErrorMessage(\"\");\n\n try {\n const response = await fetch(\"/edit-media\", {\n method: \"PUT\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n // Send editFormData directly - it now has mediaName and mainIdea\n body: JSON.stringify(editFormData),\n });\n\n const result = await response.json();\n\n if (response.ok && result.success && result.entry) {\n // Update the entries state with the updated entry received from the backend\n setEntries(prevEntries => prevEntries.map(entry => entry.id === result.entry.id ? result.entry : entry));\n setSuccessMessage(\"Entry updated successfully!\");\n handleCloseEditModal(); // Close modal on success\n setTimeout(() => setSuccessMessage(\"\"), 3000);\n } else {\n setErrorMessage(result.message || \"Failed to update entry.\");\n setTimeout(() => setErrorMessage(\"\"), 3000);\n }\n } catch (error) {\n console.error(\"Error updating entry:\", error);\n setErrorMessage(\"An error occurred while updating the entry.\");\n setTimeout(() => setErrorMessage(\"\"), 3000);\n } finally {\n setIsSavingEdit(false);\n }\n };\n\n return (\n

Media Monitoring Submission

\n\n {successMessage &&

{successMessage}

}\n {errorMessage &&

{errorMessage}

}\n\n

\n \n setMediaName(e.target.value)}\n style={styles.input}\n required\n />\n

\n setTitle(e.target.value)}\n style={styles.input}\n required\n />\n setMainIdea(e.target.value)}\n style={styles.input}\n required\n />\n

\n \n setLink(e.target.value)}\n style={styles.input}\n required\n />\n

\n \n {isSubmitting ? \"Submitting...\" : \"Submit Entry\"}\n \n

\n\n

\n \n setMediaNameFilter(e.target.value)}\n style={styles.input}\n />\n setTitleFilter(e.target.value)}\n style={styles.input}\n />\n \n setAuthorFilter(e.target.value)}\n style={styles.input}\n />\n

\n\n \n \n \n {/* Added Serial Number Header */}\n \n \n \n \n \n \n {/* Added Action Header */}\n \n \n \n {paginatedMonitoring.map((entry, index) => (\n \n {/* Serial Number */}\n \n {/* Displaying media_name from fetched data */}\n \n \n \n \n \n \n ))}\n \n

S.No.	Platform	Media Name	Title	Sentiment	Author	Link	Action
{(page - 1) * itemsPerPage + index + 1}	{entry.platform}	{entry.media_name}	{entry.title}	{entry.sentiment}	{entry.author}	\n {entry.link\n ? (\n \n View Content\n \n )\n : (\n \"No link\"\n )}\n	\n {/* Action column */}\n \n handleDelete(entry.id)}\n style={{ ...styles.actionButton, backgroundColor: BRAND_COLORS.red }}\n >\n Delete\n \n

\n\n

\n setPage(prev => Math.max(prev - 1, 1))}\n disabled={page === 1}\n style={styles.paginationButton}\n >\n Previous\n \n Page {page} of {totalPages}\n setPage(prev => Math.min(prev + 1, totalPages))}\n disabled={page === totalPages}\n style={styles.paginationButton}\n >\n Next\n \n

\n\n {/* Edit Modal */}\n {isEditModalOpen && (\n

Edit Media Entry

\n {errorMessage &&

{errorMessage}

}\n

\n {/* Reusing form styles */}\n

\n {/* Reusing formRow styles */}\n \n \n \n \n \n \n \n

\n \n \n

\n {/* Reusing formRow styles */}\n \n \n \n \n \n \n

\n {/* Author field is read-only */}\n \n

\n \n {isSavingEdit ? \"Saving...\" : \"Save Changes\"}\n \n \n Cancel\n \n

\n )}\n

\n );\n}\n\nconst styles = {\n container: {\n // --- CHANGE 2: Reduced padding ---\n padding: \"15px\",\n // --- End CHANGE 2 ---\n backgroundColor: BRAND_COLORS.gray,\n borderRadius: \"8px\",\n maxWidth: \"1200px\",\n margin: \"auto\",\n position: \"relative\", // Needed for modal positioning\n },\n title: {\n color: BRAND_COLORS.green,\n textAlign: \"center\",\n // --- CHANGE 2: Reduced margin ---\n marginBottom: \"15px\",\n // --- End CHANGE 2 ---\n },\n successMessage: {\n padding: \"10px\",\n backgroundColor: \"#d4edda\",\n color: \"#155724\",\n borderRadius: \"5px\",\n // --- CHANGE 2: Reduced margin ---\n marginBottom: \"10px\",\n // --- End CHANGE 2 ---\n textAlign: \"center\",\n fontWeight: \"bold\",\n },\n errorMessage: {\n padding: \"10px\",\n backgroundColor: \"#f8d7da\",\n color: \"#721c24\",\n borderRadius: \"5px\",\n // --- CHANGE 2: Reduced margin ---\n marginBottom: \"10px\",\n // --- End CHANGE 2 ---\n textAlign: \"center\",\n fontWeight: \"bold\",\n },\n form: {\n display: \"flex\",\n flexDirection: \"column\",\n // --- CHANGE 2: Reduced gap and margin ---\n gap: \"8px\",\n marginBottom: \"15px\",\n // --- End CHANGE 2 ---\n },\n formRow: {\n display: \"flex\",\n // --- CHANGE 2: Reduced gap ---\n gap: \"8px\",\n // --- End CHANGE 2 ---\n },\n input: {\n // --- CHANGE 2: Reduced padding ---\n padding: \"8px\",\n // --- End CHANGE 2 ---\n borderRadius: \"8px\",\n border: `2px solid ${BRAND_COLORS.green}`,\n fontSize: \"16px\",\n width: \"100%\",\n transition: \"border-color 0.3s ease\",\n },\n select: {\n // --- CHANGE 2: Reduced padding ---\n padding: \"8px\",\n // --- End CHANGE 2 ---\n borderRadius: \"8px\",\n border: `2px solid ${BRAND_COLORS.green}`,\n fontSize: \"16px\",\n width: \"48%\",\n },\n button: {\n // --- CHANGE 2: Reduced padding ---\n padding: \"10px\",\n // --- End CHANGE 2 ---\n borderRadius: \"8px\",\n border: \"none\",\n backgroundColor: BRAND_COLORS.green,\n color: \"white\",\n cursor: \"pointer\",\n fontWeight: \"bold\",\n transition: \"background-color 0.3s ease\",\n },\n filters: {\n display: \"flex\",\n // --- CHANGE 2: Reduced gap and margin ---\n gap: \"8px\",\n marginBottom: \"15px\",\n // --- End CHANGE 2 ---\n },\n table: {\n width: \"100%\",\n borderCollapse: \"collapse\",\n // --- CHANGE 2: Reduced margin ---\n marginBottom: \"15px\",\n // --- End CHANGE 2 ---\n },\n tableHeader: { // Added style for table headers\n backgroundColor: BRAND_COLORS.green,\n color: \"white\",\n // --- CHANGE 2: Reduced padding ---\n padding: \"8px\",\n // --- End CHANGE 2 ---\n textAlign: \"left\",\n },\n tableRow: {\n borderBottom: `1px solid ${BRAND_COLORS.green}`,\n // --- CHANGE 2: Reduced padding for cells within rows ---\n \"& td\": { // Apply padding to table data cells\n padding: \"8px\",\n },\n // --- End CHANGE 2 ---\n },\n link: {\n color: BRAND_COLORS.green,\n textDecoration: \"none\",\n cursor: \"pointer\",\n },\n pagination: {\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n },\n paginationButton: {\n padding: \"8px 15px\",\n borderRadius: \"5px\",\n backgroundColor: BRAND_COLORS.green,\n color: \"white\",\n cursor: \"pointer\",\n },\n actionCell: { // Style for the action column cell\n whiteSpace: \"nowrap\", // Prevent buttons from wrapping\n },\n actionButton: { // Style for the action buttons\n padding: \"5px 10px\",\n borderRadius: \"5px\",\n border: \"none\",\n backgroundColor: BRAND_COLORS.green, // Default green for Edit\n color: \"white\",\n cursor: \"pointer\",\n fontSize: \"0.8rem\",\n },\n // Styles for the modal\n modalOverlay: {\n position: \"fixed\",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n backgroundColor: \"rgba(0, 0, 0, 0.5)\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n zIndex: 1000, // Ensure modal is on top\n },\n modalContent: {\n backgroundColor: \"white\",\n // --- CHANGE 2: Reduced padding ---\n padding: \"15px\",\n // --- End CHANGE 2 ---\n borderRadius: \"8px\",\n maxWidth: \"500px\",\n width: \"90%\",\n boxShadow: \"0 4px 8px rgba(0, 0, 0, 0.2)\",\n position: \"relative\",\n },\n modalTitle: {\n color: BRAND_COLORS.darkGreen,\n textAlign: \"center\",\n // --- CHANGE 2: Reduced margin ---\n marginBottom: \"15px\",\n // --- End CHANGE 2 ---\n },\n modalActions: {\n display: \"flex\",\n justifyContent: \"flex-end\",\n // --- CHANGE 2: Reduced margin ---\n marginTop: \"15px\",\n // --- End CHANGE 2 ---\n },\n};\n\nexport default MediaMonitoringTab;",[],[157,196],{"_105":204,"_96":205,"_158":206,"_160":159,"_161":143,"_162":207,"_164":22,"_107":208,"_101":209,"_167":181,"_169":210,"_170":22,"_171":-5,"_172":211,"_99":212},"8917eb3c-2c0a-11f0-b43f-569c3dd06744","newsArticle.tsx","2312e57c-2b2d-11f0-ab5b-569c3dd06744",142,["D",1746708420967],16,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useMemo, useState } from \"https://esm.sh/react@18.2.0\";\n\nconst BRAND_COLORS = {\n green: \"#28a745\",\n darkGreen: \"#1a7c38\",\n lightGreen: \"#a8e0a3\",\n gray: \"#f8f8f8\",\n red: \"#dc3545\",\n};\n\n// Reusing the styles object from MediaMonitoringTab\nconst styles = {\n container: {\n padding: \"15px\",\n backgroundColor: BRAND_COLORS.gray,\n borderRadius: \"8px\",\n maxWidth: \"1200px\",\n margin: \"auto\",\n position: \"relative\", // Needed for modal positioning\n fontFamily: \"'Segoe UI', Tahoma, Geneva, Verdana, sans-serif\", // Added font family\n },\n title: {\n color: BRAND_COLORS.green, // Using green for main titles\n textAlign: \"center\",\n marginBottom: \"15px\",\n },\n successMessage: {\n padding: \"10px\",\n backgroundColor: \"#d4edda\",\n color: \"#155724\",\n borderRadius: \"5px\",\n marginBottom: \"10px\",\n textAlign: \"center\",\n fontWeight: \"bold\",\n },\n errorMessage: {\n padding: \"10px\",\n backgroundColor: \"#f8d7da\",\n color: \"#721c24\",\n borderRadius: \"5px\",\n marginBottom: \"10px\",\n textAlign: \"center\",\n fontWeight: \"bold\",\n },\n form: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"8px\",\n marginBottom: \"15px\",\n backgroundColor: \"white\", // Added background for form container\n padding: \"15px\", // Added padding for form container\n borderRadius: \"8px\", // Added border radius for form container\n boxShadow: \"0 2px 4px rgba(0,0,0,0.1)\", // Added shadow for form container\n border: `1px solid ${BRAND_COLORS.lightGreen}`, // Added border\n },\n formRow: {\n display: \"flex\",\n gap: \"8px\",\n // Adjust width for inputs in a row if needed, but for news form, inputs are full width\n },\n input: {\n padding: \"8px\",\n borderRadius: \"8px\",\n border: `2px solid ${BRAND_COLORS.green}`,\n fontSize: \"16px\",\n width: \"100%\", // Inputs are full width in news form\n transition: \"border-color 0.3s ease\",\n },\n select: {\n padding: \"8px\",\n borderRadius: \"8px\",\n border: `2px solid ${BRAND_COLORS.green}`,\n fontSize: \"16px\",\n width: \"100%\", // Selects are full width in news form\n },\n button: {\n padding: \"10px\",\n borderRadius: \"8px\",\n border: \"none\",\n backgroundColor: BRAND_COLORS.green,\n color: \"white\",\n cursor: \"pointer\",\n fontWeight: \"bold\",\n transition: \"background-color 0.3s ease\",\n },\n filters: {\n display: \"flex\",\n flexWrap: \"wrap\", // Allow wrapping on smaller screens\n gap: \"8px\",\n marginBottom: \"15px\",\n backgroundColor: \"white\", // Added background for filters container\n padding: \"15px\", // Added padding for filters container\n borderRadius: \"8px\", // Added border radius for filters container\n boxShadow: \"0 2px 4px rgba(0,0,0,0.1)\", // Added shadow for filters container\n border: `1px solid ${BRAND_COLORS.lightGreen}`, // Added border\n },\n filterInput: { // Specific style for filter inputs\n padding: \"8px\",\n borderRadius: \"8px\",\n border: `2px solid ${BRAND_COLORS.green}`,\n fontSize: \"16px\",\n flexGrow: 1, // Allow inputs to grow\n minWidth: \"150px\", // Minimum width before wrapping\n transition: \"border-color 0.3s ease\",\n },\n filterButton: { // Specific style for filter clear button\n padding: \"8px 15px\",\n borderRadius: \"8px\",\n border: \"none\",\n backgroundColor: BRAND_COLORS.gray, // Use gray for clear button\n color: \"#333\",\n cursor: \"pointer\",\n fontWeight: \"bold\",\n transition: \"background-color 0.3s ease\",\n },\n table: {\n width: \"100%\",\n borderCollapse: \"collapse\",\n marginBottom: \"15px\",\n backgroundColor: \"white\", // Added background for table container\n borderRadius: \"8px\", // Added border radius for table container\n boxShadow: \"0 2px 4px rgba(0,0,0,0.1)\", // Added shadow for table container\n overflow: \"hidden\", // Hide overflow for rounded corners\n },\n tableHeader: {\n backgroundColor: BRAND_COLORS.green,\n color: \"white\",\n padding: \"10px\", // Slightly more padding for headers\n textAlign: \"left\",\n fontWeight: \"bold\",\n fontSize: \"0.9rem\",\n textTransform: \"uppercase\",\n letterSpacing: \"0.05em\",\n },\n tableRow: {\n borderBottom: `1px solid ${BRAND_COLORS.lightGreen}`,\n \"&:last-child\": { // Remove border for the last row\n borderBottom: \"none\",\n },\n \"& td\": { // Apply padding to table data cells\n padding: \"10px\", // Slightly more padding for cells\n fontSize: \"0.9rem\",\n verticalAlign: \"top\", // Align cell content to top\n },\n \"&:hover\": { // Hover effect for rows\n backgroundColor: BRAND_COLORS.gray,\n },\n },\n link: {\n color: BRAND_COLORS.darkGreen, // Use dark green for links\n textDecoration: \"underline\",\n cursor: \"pointer\",\n \"&:hover\": {\n color: BRAND_COLORS.green,\n },\n },\n pagination: {\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n padding: \"0 10px\", // Add some horizontal padding\n },\n paginationButton: {\n padding: \"8px 15px\",\n borderRadius: \"5px\",\n border: \"none\", // Remove border\n backgroundColor: BRAND_COLORS.green,\n color: \"white\",\n cursor: \"pointer\",\n transition: \"background-color 0.3s ease, opacity 0.3s ease\",\n \"&:disabled\": {\n opacity: 0.5,\n cursor: \"not-allowed\",\n },\n \"&:hover:not(:disabled)\": {\n backgroundColor: BRAND_COLORS.darkGreen,\n },\n },\n actionCell: { // Style for the action column cell\n whiteSpace: \"nowrap\", // Prevent buttons from wrapping\n textAlign: \"center\", // Center action buttons\n },\n actionButton: { // Style for the action buttons\n padding: \"5px 10px\",\n borderRadius: \"5px\",\n border: \"none\",\n backgroundColor: BRAND_COLORS.green, // Default green for Edit\n color: \"white\",\n cursor: \"pointer\",\n fontSize: \"0.8rem\",\n transition: \"background-color 0.3s ease\",\n \"&:hover\": {\n backgroundColor: BRAND_COLORS.darkGreen,\n },\n },\n deleteButton: { // Specific style for delete button\n backgroundColor: BRAND_COLORS.red,\n \"&:hover\": {\n backgroundColor: \"#c82333\", // Darker red on hover\n },\n },\n // Styles for the modal\n modalOverlay: {\n position: \"fixed\",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n backgroundColor: \"rgba(0, 0, 0, 0.5)\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n zIndex: 1000, // Ensure modal is on top\n },\n modalContent: {\n backgroundColor: \"white\",\n padding: \"20px\", // Slightly more padding for modal\n borderRadius: \"8px\",\n maxWidth: \"500px\",\n width: \"90%\",\n boxShadow: \"0 4px 8px rgba(0, 0, 0, 0.2)\",\n position: \"relative\",\n display: \"flex\", // Use flex for layout inside modal\n flexDirection: \"column\",\n gap: \"15px\", // Gap between sections in modal\n },\n modalTitle: {\n color: BRAND_COLORS.darkGreen,\n textAlign: \"center\",\n marginBottom: \"0\", // Gap handled by modalContent gap\n },\n modalActions: {\n display: \"flex\",\n justifyContent: \"flex-end\",\n gap: \"10px\", // Gap between buttons\n marginTop: \"0\", // Gap handled by modalContent gap\n },\n modalInput: { // Specific style for modal inputs\n padding: \"10px\", // Slightly more padding\n borderRadius: \"8px\",\n border: `1px solid ${BRAND_COLORS.green}`, // Thinner border\n fontSize: \"1rem\",\n width: \"100%\",\n transition: \"border-color 0.3s ease\",\n \"&:focus\": {\n outline: \"none\",\n borderColor: BRAND_COLORS.darkGreen,\n boxShadow: `0 0 0 0.2rem ${BRAND_COLORS.lightGreen}50`, // Light green focus ring\n },\n },\n modalReadOnlyInput: { // Style for read-only modal inputs\n padding: \"10px\",\n borderRadius: \"8px\",\n border: `1px solid ${BRAND_COLORS.gray}`,\n backgroundColor: BRAND_COLORS.gray,\n fontSize: \"1rem\",\n width: \"100%\",\n cursor: \"not-allowed\",\n },\n modalButton: { // Specific style for modal buttons\n padding: \"10px 20px\", // More padding\n borderRadius: \"5px\",\n border: \"none\",\n color: \"white\",\n cursor: \"pointer\",\n fontWeight: \"bold\",\n transition: \"background-color 0.3s ease, opacity 0.3s ease\",\n \"&:disabled\": {\n opacity: 0.6,\n cursor: \"not-allowed\",\n },\n },\n modalSaveButton: {\n backgroundColor: BRAND_COLORS.green,\n \"&:hover:not(:disabled)\": {\n backgroundColor: BRAND_COLORS.darkGreen,\n },\n },\n modalCancelButton: {\n backgroundColor: BRAND_COLORS.red,\n \"&:hover:not(:disabled)\": {\n backgroundColor: \"#c82333\",\n },\n },\n};\n\n// Component for the News Article Submission Form - Adapted to use inline styles\nconst NewsArticleForm = (\n { onSubmit, title, setTitle, mainIdea, setMainIdea, link, setLink, successMessage, errorMessage },\n) => (\n

\n {/* Use form style */}\n \n 📝 Submit a News Article\n \n {successMessage && (\n

\n {successMessage}\n

\n )}\n {errorMessage && (\n

\n {errorMessage}\n

\n )}\n

\n {/* Use inline flex/gap */}\n setTitle(e.target.value)}\n />\n setMainIdea(e.target.value)}\n />\n setLink(e.target.value)}\n />\n

\n \n 📤 Submit Article\n \n

\n);\n\n// Component for a single row in the News Articles Table - Adapted to use inline styles\nexport const TableRow = ({ serialNumber, id, title, author, date, link, onDelete, onEdit, article }) => {\n const handleDeleteClick = () => {\n if (window.confirm(`Are you sure you want to delete the article \"${title}\"?`)) {\n onDelete(id);\n }\n };\n\n const handleEditClick = () => {\n onEdit(article); // Pass the full article data for editing\n };\n\n return (\n \n {/* Use tableRow style */}\n {serialNumber}{\" \"}\n {/* Use cell style + center text */}\n {title} {/* Use cell style */}\n {author} {/* Use cell style */}\n {date} {/* Use cell style */}\n \n {/* Use cell style */}\n \n 🔗 View Article\n \n \n \n {/* Use actionCell style */}\n {/* Add Edit Button */}\n \n ✏️ Edit\n \n \n 🗑 Delete\n \n \n \n );\n};\n\n// Component for Table Pagination Controls - Adapted to use inline styles\nexport const TablePagination = ({ page, setPage, totalPages }) => (\n

\n {/* Use pagination style */}\n setPage(p => Math.max(p - 1, 1))}\n disabled={page === 1}\n style={styles.paginationButton} // Use paginationButton style\n aria-label=\"Previous Page\"\n >\n Previous\n \n\n

\n {/* Inline text style */}\n Page {page} of {totalPages > 0 ? totalPages : 1}\n

\n\n setPage(p => Math.min(p + 1, totalPages))}\n disabled={page === totalPages || totalPages === 0}\n style={styles.paginationButton} // Use paginationButton style\n aria-label=\"Next Page\"\n >\n Next\n \n

\n);\n\n// Main Component for the News Article Tab - Adapted to use inline styles and MediaMonitoringTab patterns\nexport function NewsArticleTab({ user }) {\n const [articles, setArticles] = useState([]);\n const [title, setTitle] = useState(\"\");\n const [mainIdea, setMainIdea] = useState(\"\");\n const [link, setLink] = useState(\"\");\n\n // Filters - Adapted for News Articles\n const [titleFilter, setTitleFilter] = useState(\"\");\n const [authorFilter, setAuthorFilter] = useState(\"\");\n const [dateFilter, setDateFilter] = useState(\"\"); // Date filter remains\n\n const [page, setPage] = useState(1);\n const itemsPerPage = 8; // Use itemsPerPage for consistency\n\n const [successMessage, setSuccessMessage] = useState(\"\");\n const [errorMessage, setErrorMessage] = useState(\"\");\n const [isSubmitting, setIsSubmitting] = useState(false); // For submit button state\n\n // State for edit modal - Similar pattern to MediaMonitoringTab\n const [isEditModalOpen, setIsEditModalOpen] = useState(false);\n const [editFormData, setEditFormData] = useState({\n id: null,\n title: \"\",\n mainIdea: \"\",\n link: \"\",\n author: \"\", // Read-only\n });\n const [isSavingEdit, setIsSavingEdit] = useState(false); // To disable save button while saving\n const [editModalError, setEditModalError] = useState(\"\"); // Error specific to the edit modal\n\n useEffect(() => {\n const fetchArticles = async () => {\n try {\n const response = await fetch(\"/fetch-news\");\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n const data = await response.json();\n // Assuming fetched articles have properties matching backend column names (e.g., main_idea, created_at)\n setArticles(data.articles || []);\n } catch (error) {\n console.error(\"Failed to fetch articles:\", error);\n setErrorMessage(\"Failed to load articles. Please try again later.\");\n }\n };\n fetchArticles();\n }, []);\n\n // Effect to clear success/error messages after a delay\n useEffect(() => {\n if (successMessage || errorMessage) {\n const timer = setTimeout(() => {\n setSuccessMessage(\"\");\n setErrorMessage(\"\");\n }, 5000);\n return () => clearTimeout(timer);\n }\n }, [successMessage, errorMessage]);\n\n // Effect to clear edit modal error after a delay\n useEffect(() => {\n if (editModalError) {\n const timer = setTimeout(() => {\n setEditModalError(\"\");\n }, 5000); // Clear modal error after 5 seconds\n return () => clearTimeout(timer);\n }\n }, [editModalError]);\n\n const filteredArticles = useMemo(() => {\n return articles.filter(article =>\n article.title.toLowerCase().includes(titleFilter.toLowerCase())\n && article.author.toLowerCase().includes(authorFilter.toLowerCase())\n && (!dateFilter || new Date(article.created_at).toLocaleDateString(\"en-CA\") === dateFilter)\n );\n }, [articles, titleFilter, authorFilter, dateFilter]);\n\n const totalPages = Math.ceil(filteredArticles.length / itemsPerPage); // Use itemsPerPage\n\n useEffect(() => {\n if (page > totalPages && totalPages > 0) {\n setPage(1);\n } else if (totalPages === 0 && page !== 1) { // Ensure page is 1 if no results\n setPage(1);\n }\n }, [filteredArticles, totalPages, page]);\n\n const paginatedArticles = useMemo(() => {\n const currentPage = Math.max(1, page);\n const startIndex = (currentPage - 1) * itemsPerPage; // Use itemsPerPage\n return filteredArticles.slice(startIndex, startIndex + itemsPerPage); // Use itemsPerPage\n }, [filteredArticles, page, itemsPerPage]); // Depend on itemsPerPage\n\n const submitArticle = async () => {\n if (!title.trim() || !mainIdea.trim() || !link.trim()) {\n setErrorMessage(\"Please fill in all fields: Title, Main Idea, and Link.\");\n setSuccessMessage(\"\");\n return;\n }\n try {\n new URL(link);\n } catch (_) {\n setErrorMessage(\"Please enter a valid URL (e.g., https://example.com).\");\n setSuccessMessage(\"\");\n return;\n }\n\n setIsSubmitting(true); // Set submitting state\n setSuccessMessage(\"\");\n setErrorMessage(\"\");\n\n try {\n const response = await fetch(\"/submit-news\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ title, mainIdea, link, author: user?.username || \"Anonymous\" }),\n });\n\n if (!response.ok) {\n const errorData = await response.json().catch(() => ({}));\n throw new Error(errorData.message || `HTTP error! status: ${response.status}`);\n }\n const result = await response.json();\n if (result.success && result.article) {\n // Assuming result.article has properties matching backend column names (e.g., main_idea, created_at)\n setArticles(prev => [result.article, ...prev]); // Prepend new article\n setTitle(\"\");\n setMainIdea(\"\");\n setLink(\"\");\n setSuccessMessage(\"✅ Article submitted successfully!\");\n setErrorMessage(\"\");\n } else {\n throw new Error(result.message || \"Submission failed. Unknown error.\");\n }\n } catch (error) {\n console.error(\"Failed to submit article:\", error);\n setErrorMessage(`❌ Submission failed: ${error.message}`);\n setSuccessMessage(\"\");\n } finally {\n setIsSubmitting(false); // Reset submitting state\n }\n };\n\n // Renamed deleteArticle to handleDelete for consistency\n const handleDelete = async (id) => {\n const confirmed = window.confirm(\"Are you sure you want to delete this article?\");\n if (!confirmed) return;\n\n setSuccessMessage(\"\");\n setErrorMessage(\"\");\n try {\n const response = await fetch(`/delete-news?id=${id}`, {\n method: \"DELETE\",\n });\n if (!response.ok) {\n const errorData = await response.json().catch(() => ({}));\n throw new Error(errorData.message || `HTTP error! status: ${response.status}`);\n }\n const result = await response.json();\n if (result.success) {\n setArticles(prev => prev.filter(article => article.id !== id));\n setSuccessMessage(\"🗑 Article deleted successfully!\");\n setErrorMessage(\"\");\n } else {\n throw new Error(result.message || \"Deletion failed. Unknown error.\");\n }\n } catch (error) {\n console.error(\"Failed to delete article:\", error);\n setErrorMessage(`❌ Failed to delete article: ${error.message}`);\n setSuccessMessage(\"\");\n }\n };\n\n // Function to open the edit modal - Similar pattern to MediaMonitoringTab\n const handleEditClick = (article) => {\n // Assuming article properties match backend column names (e.g., main_idea)\n setEditFormData({\n id: article.id,\n title: article.title,\n mainIdea: article.main_idea || \"\", // Use main_idea from fetched data, handle potential null/undefined\n link: article.link,\n author: article.author, // Read-only\n });\n setIsEditModalOpen(true);\n setSuccessMessage(\"\"); // Clear main messages when opening modal\n setErrorMessage(\"\");\n setEditModalError(\"\"); // Clear modal-specific error\n };\n\n // Function to close the edit modal - Similar pattern to MediaMonitoringTab\n const handleCloseEditModal = () => {\n setIsEditModalOpen(false);\n setEditFormData({\n id: null,\n title: \"\",\n mainIdea: \"\",\n link: \"\",\n author: \"\",\n });\n setIsSavingEdit(false); // Reset saving state\n setEditModalError(\"\"); // Clear modal-specific error on close\n };\n\n // Function to handle changes in the edit modal form - Similar pattern to MediaMonitoringTab\n const handleEditFormChange = (e) => {\n const { name, value } = e.target;\n setEditFormData(prevState => ({\n ...prevState,\n [name]: value,\n }));\n };\n\n // Function to save the edited entry - Similar pattern to MediaMonitoringTab\n const handleSaveEdit = async () => {\n // Validate required fields from editFormData\n if (!editFormData.title.trim() || !editFormData.mainIdea.trim() || !editFormData.link.trim()) {\n setEditModalError(\"Please fill in all fields: Title, Main Idea, and Link.\");\n return;\n }\n try {\n new URL(editFormData.link);\n } catch (_) {\n setEditModalError(\"Please enter a valid URL (e.g., https://example.com).\");\n return;\n }\n\n setIsSavingEdit(true);\n setEditModalError(\"\"); // Clear previous errors\n\n try {\n const response = await fetch(\"/edit-news\", { // Target the /edit-news endpoint\n method: \"PUT\", // Using PUT for updates\n headers: {\n \"Content-Type\": \"application/json\",\n },\n // Send relevant data from editFormData\n body: JSON.stringify({\n id: editFormData.id,\n title: editFormData.title,\n mainIdea: editFormData.mainIdea, // Send mainIdea (camelCase)\n link: editFormData.link,\n // Author is not sent for update\n }),\n });\n\n const result = await response.json();\n\n if (response.ok && result.success && result.article) {\n // Update the articles state with the updated article received from the backend\n // Assuming result.article has properties matching backend column names (e.g., main_idea, created_at)\n setArticles(prevArticles => prevArticles.map(art => art.id === result.article.id ? result.article : art));\n setSuccessMessage(\"✅ Article updated successfully!\");\n handleCloseEditModal(); // Close modal on success\n setErrorMessage(\"\"); // Clear any main error message\n } else {\n setEditModalError(result.message || \"Failed to update article.\");\n setSuccessMessage(\"\"); // Clear any main success message\n setErrorMessage(\"\"); // Clear any main error message\n }\n } catch (error) {\n console.error(\"Error updating article:\", error);\n setEditModalError(`❌ An error occurred while updating the article: ${error.message}`);\n setSuccessMessage(\"\"); // Clear any main success message\n setErrorMessage(\"\"); // Clear any main error message\n } finally {\n setIsSavingEdit(false);\n }\n };\n\n return (\n

\n {/* Use container style */}\n {/* Submission Form */}\n

\n {/* Keep specific text style */}\n 📝 Submit a News Article\n

\n {/* Messages outside form */}\n {successMessage &&

{successMessage}

}\n {errorMessage &&

{errorMessage}

}\n

\n {/* Use form style */}\n setTitle(e.target.value)}\n />\n setMainIdea(e.target.value)}\n />\n setLink(e.target.value)}\n />\n \n {isSubmitting ? \"Submitting...\" : \"📤 Submit Article\"} {/* Add submitting text */}\n \n

\n\n {/* Published Articles Section */}\n \n 📚 Published News Articles\n \n\n {/* Filter Controls - Adapted for News Articles */}\n

\n {/* Use filters style */}\n {\n setTitleFilter(e.target.value);\n setPage(1);\n }}\n />\n {\n setAuthorFilter(e.target.value);\n setPage(1);\n }}\n />\n {\n setDateFilter(e.target.value);\n setPage(1);\n }}\n />\n {\n setTitleFilter(\"\");\n setAuthorFilter(\"\");\n setDateFilter(\"\");\n setPage(1);\n }}\n style={styles.filterButton} // Use filterButton style\n aria-label=\"Clear all filters\"\n >\n Clear Filters\n \n

\n\n {/* Articles Table */}\n

\n {/* Keep overflow-x-auto */}\n \n {/* Use table style */}\n \n \n {\" \"}\n {/* Use tableHeader style + center */}\n {/* Use tableHeader style */}\n {/* Use tableHeader style */}\n {/* Use tableHeader style */}\n {/* Use tableHeader style */}\n {\" \"}\n {/* Use tableHeader style + center */}\n \n \n \n {paginatedArticles.length > 0\n ? (\n paginatedArticles.map((article, index) => (\n \n ))\n )\n : (\n \n \n \n )}\n \n

S.No.	Title	Author	Date Published	Link	Action
\n {/* Use cell style + center + color */}\n No articles found matching your filters.\n

\n\n {/* Pagination */}\n {totalPages > 0 && }\n\n {/* Edit Modal - Rendered directly in the component */}\n {isEditModalOpen && (\n

\n {/* Use modalOverlay style */}\n e.stopPropagation()} // Prevent clicks inside modal from closing it\n >\n

Edit Article

{/* Use modalTitle style */}\n {editModalError && (\n

{/* Reusing errorMessage style */} {editModalError}

\n )}\n

\n {/* Inline flex/gap for modal inputs */}\n \n \n \n {/* Author field - Read-only */}\n \n

\n {/* Use modalActions style */}\n \n {isSavingEdit ? \"Saving...\" : \"Save Changes\"}\n \n \n Cancel\n \n

\n )}\n \n );\n}",[],[157,205],{"_105":214,"_96":215,"_158":216,"_160":159,"_161":143,"_162":217,"_164":22,"_107":218,"_101":178,"_167":181,"_169":219,"_170":22,"_171":-5,"_172":220,"_99":221},"75de8be8-2c0a-11f0-bc57-569c3dd06744","weeklyReport.tsx","25860aa0-2b2d-11f0-b3c5-569c3dd06744",141,["D",1746708388717],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useMemo, useState } from \"https://esm.sh/react@18.2.0\";\n\nconst BRAND_COLORS = {\n green: \"#28a745\",\n darkGreen: \"#1a7c38\",\n lightGreen: \"#a8e0a3\",\n gray: \"#f8f8f8\",\n red: \"#dc3545\",\n};\n\n// Define styles based on the MediaMonitoringTab reference\nconst styles = {\n container: {\n padding: \"20px\",\n fontFamily: \"Arial, sans-serif\",\n width: \"100%\", // Ensure container takes full width\n boxSizing: \"border-box\", // Include padding in width calculation\n },\n title: {\n color: BRAND_COLORS.green,\n textAlign: \"center\",\n marginBottom: \"20px\",\n },\n tabButtonContainer: {\n marginBottom: \"20px\",\n },\n tabButton: {\n padding: \"8px 15px\",\n marginRight: \"10px\",\n borderRadius: \"5px\",\n cursor: \"pointer\",\n fontWeight: \"bold\",\n border: `1px solid ${BRAND_COLORS.green}`,\n backgroundColor: \"transparent\", // Default\n color: BRAND_COLORS.green, // Default\n transition: \"background-color 0.3s ease, color 0.3s ease\",\n },\n tabButtonActive: {\n backgroundColor: BRAND_COLORS.green,\n color: \"white\",\n },\n reportSectionTitle: {\n marginBottom: \"15px\",\n },\n totalCountsBox: {\n marginBottom: \"20px\",\n padding: \"10px\",\n border: \"1px solid #ccc\",\n borderRadius: \"5px\",\n backgroundColor: \"#f9f9f9\",\n },\n totalCountText: {\n margin: \"5px 0\",\n },\n filters: {\n display: \"flex\",\n gap: \"10px\", // Increased gap slightly for better spacing\n marginBottom: \"15px\",\n flexWrap: \"wrap\", // Allow filters to wrap on smaller screens\n },\n filterInput: {\n padding: \"8px\",\n borderRadius: \"8px\",\n border: `1px solid #ccc`, // Simpler border for filters\n fontSize: \"14px\",\n flex: \"1\", // Allow inputs to grow\n minWidth: \"150px\", // Minimum width before wrapping\n },\n table: {\n width: \"100%\",\n borderCollapse: \"collapse\",\n marginBottom: \"15px\",\n border: `1px solid ${BRAND_COLORS.green}`, // Add outer border\n },\n tableHeader: {\n backgroundColor: BRAND_COLORS.green,\n color: \"white\",\n padding: \"10px\", // Increased padding for headers\n textAlign: \"left\",\n borderRight: `1px solid ${BRAND_COLORS.darkGreen}`, // Darker border between headers\n \"&:last-child\": {\n borderRight: \"none\",\n },\n },\n tableRow: {\n borderBottom: `1px solid ${BRAND_COLORS.lightGreen}`, // Lighter border between rows\n \"&:last-child\": {\n borderBottom: \"none\", // No border on the last row\n },\n \"& td\": { // Apply padding to table data cells\n padding: \"10px\", // Increased padding for cells\n borderRight: `1px solid ${BRAND_COLORS.lightGreen}`, // Lighter border between cells\n \"&:last-child\": {\n borderRight: \"none\",\n },\n },\n \"&:nth-child(even)\": { // Zebra striping\n backgroundColor: BRAND_COLORS.gray,\n },\n },\n link: {\n color: BRAND_COLORS.green,\n textDecoration: \"none\",\n cursor: \"pointer\",\n },\n pagination: {\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n marginTop: \"15px\",\n },\n paginationButton: {\n padding: \"8px 15px\",\n borderRadius: \"5px\",\n backgroundColor: BRAND_COLORS.green,\n color: \"white\",\n cursor: \"pointer\",\n border: \"none\",\n transition: \"background-color 0.3s ease\",\n \"&:disabled\": {\n backgroundColor: \"#ccc\",\n cursor: \"not-allowed\",\n },\n },\n exportButtonContainer: {\n textAlign: \"right\",\n margin: \"10px 0\",\n },\n exportButton: {\n padding: \"8px 15px\",\n borderRadius: \"5px\",\n backgroundColor: BRAND_COLORS.green,\n color: \"white\",\n cursor: \"pointer\",\n border: \"none\",\n transition: \"background-color 0.3s ease\",\n },\n // Styles for the Author Detail Modal\n modalOverlay: {\n position: \"fixed\",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n backgroundColor: \"rgba(0, 0, 0, 0.6)\", // Slightly darker overlay\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n zIndex: 1000, // Ensure modal is on top\n overflowY: \"auto\", // Allow scrolling if content is tall\n padding: \"20px\", // Add padding around the modal content\n },\n modalContent: {\n backgroundColor: \"white\",\n padding: \"20px\",\n borderRadius: \"8px\",\n maxWidth: \"900px\", // Increased max width for tables\n width: \"95%\", // Take more width on larger screens\n boxShadow: \"0 4px 12px rgba(0, 0, 0, 0.3)\", // Stronger shadow\n position: \"relative\",\n maxHeight: \"90vh\", // Limit modal height\n overflowY: \"auto\", // Add internal scrolling for modal content\n },\n modalTitle: {\n color: BRAND_COLORS.darkGreen,\n textAlign: \"center\",\n marginBottom: \"20px\",\n borderBottom: `1px solid ${BRAND_COLORS.lightGreen}`, // Separator line\n paddingBottom: \"10px\",\n },\n modalCloseButton: {\n position: \"absolute\",\n top: \"10px\",\n right: \"10px\",\n backgroundColor: \"transparent\",\n border: \"none\",\n fontSize: \"24px\",\n cursor: \"pointer\",\n color: \"#aaa\",\n transition: \"color 0.3s ease\",\n \"&:hover\": {\n color: \"#777\",\n },\n },\n modalSectionTitle: {\n marginTop: \"20px\",\n marginBottom: \"10px\",\n color: BRAND_COLORS.darkGreen,\n },\n authorNameButton: { // Style for the clickable author name in summary\n backgroundColor: \"transparent\",\n border: \"none\",\n color: BRAND_COLORS.green,\n textDecoration: \"underline\",\n cursor: \"pointer\",\n padding: 0,\n fontFamily: \"inherit\",\n fontSize: \"inherit\",\n textAlign: \"left\",\n },\n};\n\nfunction WeeklyReportTab() {\n // State for the detailed report (news and media)\n const [detailedReport, setDetailedReport] = useState(null);\n // State for the weekly summary report\n const [weeklySummary, setWeeklySummary] = useState(null);\n\n // State to control which report view is currently active within this tab\n const [currentView, setCurrentView] = useState(\"detailed\"); // 'detailed' or 'summary'\n\n // Filter states (only relevant for detailed report)\n const [newsTitleFilter, setNewsTitleFilter] = useState(\"\");\n const [newsAuthorFilter, setNewsAuthorFilter] = useState(\"\");\n const [newsDateFilter, setNewsDateFilter] = useState(\"\");\n const [mediaPlatformFilter, setMediaPlatformFilter] = useState(\"\");\n const [mediaTitleFilter, setMediaTitleFilter] = useState(\"\");\n const [mediaSentimentFilter, setMediaSentimentFilter] = useState(\"\");\n const [mediaAuthorFilter, setMediaAuthorFilter] = useState(\"\");\n\n // Pagination states (only relevant for detailed report)\n const [newsPage, setNewsPage] = useState(1);\n const [mediaPage, setMediaPage] = useState(1);\n const itemsPerPage = 8; // Items per page for detailed reports\n\n // State for Author Detail Modal\n const [isAuthorDetailModalOpen, setIsAuthorDetailModalOpen] = useState(false);\n const [authorDetailedData, setAuthorDetailedData] = useState(null); // { news: [], media: [] }\n const [selectedAuthorName, setSelectedAuthorName] = useState(\"\");\n\n // Function to fetch the detailed report\n const fetchDetailedReport = async () => {\n // setWeeklySummary(null); // REMOVED: Don't clear summary when fetching detailed\n setDetailedReport(null); // Clear previous detailed data while fetching\n try {\n const response = await fetch(\"/generate-report\"); // Assuming this endpoint provides detailed data\n const data = await response.json();\n setDetailedReport(data);\n } catch (error) {\n console.error(\"Failed to fetch detailed report:\", error);\n alert(\"Failed to fetch detailed report.\");\n }\n };\n\n // Function to fetch the weekly summary report\n const fetchWeeklySummary = async () => {\n // setDetailedReport(null); // REMOVED: Don't clear detailed when fetching summary\n setWeeklySummary(null); // Clear previous summary data while fetching\n try {\n // This fetches the summary data for the last 7 days for all users\n // Assumes the /generate-weekly-summary endpoint exists on the server\n const response = await fetch(\"/generate-weekly-summary\");\n const data = await response.json(); // Assuming data is an array like [{ author: 'User A', submittedArticles: 10, monitoredMedia: 5 }, ...]\n setWeeklySummary(data);\n } catch (error) {\n console.error(\"Failed to fetch weekly summary:\", error);\n alert(\"Failed to fetch weekly summary.\");\n }\n };\n\n // Effect to fetch data when the view changes or component mounts\n useEffect(() => {\n // Fetch data for the current view\n if (currentView === \"detailed\") {\n // Only fetch detailed if it's not already loaded (optional optimization)\n // if (!detailedReport) {\n fetchDetailedReport();\n // }\n } else if (currentView === \"summary\") {\n // Only fetch summary if it's not already loaded (optional optimization)\n // if (!weeklySummary) {\n fetchWeeklySummary();\n // }\n }\n // Reset pagination and filters when changing tabs\n setNewsPage(1);\n setMediaPage(1);\n setNewsTitleFilter(\"\");\n setNewsAuthorFilter(\"\");\n setNewsDateFilter(\"\");\n setMediaPlatformFilter(\"\");\n setMediaTitleFilter(\"\");\n setMediaSentimentFilter(\"\");\n setMediaAuthorFilter(\"\");\n }, [currentView]); // Dependency array ensures this runs when currentView changes\n\n // Memoized filters and pagination (only for detailed report)\n const filteredArticles = useMemo(() => {\n if (!detailedReport || !detailedReport.newsArticles) return []; // Add check for newsArticles array\n return detailedReport.newsArticles.filter(article =>\n article.title.toLowerCase().includes(newsTitleFilter.toLowerCase())\n && article.author.toLowerCase().includes(newsAuthorFilter.toLowerCase())\n && (!newsDateFilter || new Date(article.created_at).toLocaleDateString().includes(newsDateFilter))\n );\n }, [detailedReport, newsTitleFilter, newsAuthorFilter, newsDateFilter]);\n\n const filteredMonitorings = useMemo(() => {\n if (!detailedReport || !detailedReport.mediaEntries) return []; // Add check for mediaEntries array\n return detailedReport.mediaEntries.filter(entry =>\n entry.platform.toLowerCase().includes(mediaPlatformFilter.toLowerCase())\n && entry.title.toLowerCase().includes(mediaTitleFilter.toLowerCase())\n && (!mediaSentimentFilter || entry.sentiment.toLowerCase() === mediaSentimentFilter.toLowerCase())\n && entry.author.toLowerCase().includes(mediaAuthorFilter.toLowerCase())\n );\n }, [detailedReport, mediaPlatformFilter, mediaTitleFilter, mediaSentimentFilter, mediaAuthorFilter]);\n\n const paginatedArticles = useMemo(() => {\n const start = (newsPage - 1) * itemsPerPage;\n return filteredArticles.slice(start, start + itemsPerPage);\n }, [filteredArticles, newsPage, itemsPerPage]); // Added itemsPerPage dependency\n\n const paginatedMonitorings = useMemo(() => {\n const start = (mediaPage - 1) * itemsPerPage;\n return filteredMonitorings.slice(start, start + itemsPerPage);\n }, [filteredMonitorings, mediaPage, itemsPerPage]); // Added itemsPerPage dependency\n\n const totalNewsPages = useMemo(() => {\n return Math.ceil(filteredArticles.length / itemsPerPage);\n }, [filteredArticles, itemsPerPage]);\n\n const totalMediaPages = useMemo(() => {\n return Math.ceil(filteredMonitorings.length / itemsPerPage);\n }, [filteredMonitorings, itemsPerPage]);\n\n // Calculate total counts for Weekly Summary\n const weeklySummaryTotals = useMemo(() => {\n if (!weeklySummary) return { totalArticles: 0, totalMedia: 0 };\n const totalArticles = weeklySummary.reduce((sum, item) => sum + (item.submittedArticles || 0), 0);\n const totalMedia = weeklySummary.reduce((sum, item) => sum + (item.monitoredMedia || 0), 0);\n return { totalArticles, totalMedia };\n }, [weeklySummary]);\n\n // Function to handle click on author name in Weekly Summary\n const handleAuthorClick = (authorName) => {\n // Now detailedReport is NOT cleared when switching to summary,\n // so it should contain data if the detailed tab was visited or on initial load.\n if (!detailedReport || !detailedReport.newsArticles || !detailedReport.mediaEntries) {\n // This alert is still necessary if the initial fetch failed or hasn't completed yet\n alert(\n \"Detailed report data is not available to show author details. Please try switching to the Detailed Report tab first.\",\n );\n return;\n }\n\n const authorNews = detailedReport.newsArticles.filter(article => article.author === authorName);\n const authorMedia = detailedReport.mediaEntries.filter(entry => entry.author === authorName);\n\n setAuthorDetailedData({ news: authorNews, media: authorMedia });\n setSelectedAuthorName(authorName);\n setIsAuthorDetailModalOpen(true);\n };\n\n // Function to close the author detail modal\n const handleCloseAuthorDetailModal = () => {\n setIsAuthorDetailModalOpen(false);\n setAuthorDetailedData(null);\n setSelectedAuthorName(\"\");\n };\n\n // Helper function for CSV export (only for detailed report)\n const exportToCSV = (data, filename) => {\n if (!data || data.length === 0) {\n alert(\"No data to export.\");\n return;\n }\n const headers = Object.keys(data[0]);\n // Ensure headers match the displayed columns if necessary, or just use all keys\n // For simplicity, using all keys here. If specific columns are needed, adjust headers array.\n const rows = data.map(row =>\n headers.map(field => {\n const value = row[field] == null ? \"\" : String(row[field]);\n // Basic CSV escaping: replace \" with \"\" and wrap field in quotes if it contains , \" or newline\n const needsQuotes = /[,\"\\n]/.test(value);\n const escapedValue = value.replace(/\"/g, \"\\\"\\\"\");\n return needsQuotes ? `\"${escapedValue}\"` : escapedValue;\n }).join(\",\")\n );\n const csv = [headers.join(\",\"), ...rows].join(\"\\n\");\n const blob = new Blob([csv], { type: \"text/csv;charset=utf-8;\" });\n const link = document.createElement(\"a\");\n link.href = URL.createObjectURL(blob);\n link.setAttribute(\"download\", `${filename}.csv`);\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n };\n\n return (\n

🗂 Report Generator

{/* Unified title */}\n\n {/* Buttons to switch between report views */}\n

\n setCurrentView(\"detailed\")}\n style={{\n ...styles.tabButton,\n ...(currentView === \"detailed\" ? styles.tabButtonActive : {}),\n }}\n >\n Detailed Report\n \n setCurrentView(\"summary\")}\n style={{\n ...styles.tabButton,\n ...(currentView === \"summary\" ? styles.tabButtonActive : {}),\n }}\n >\n Weekly Summary\n \n

\n\n {/* Conditional Rendering based on currentView state */}\n {currentView === \"detailed\" && (\n <>\n {/* Detailed Report Section */}\n

📰 Published News & 📺 Monitored Media

{/* Combined title */}\n\n {detailedReport\n ? ( // Only show tables if detailed report data exists\n <>\n {/* Display total counts for Detailed Report */}\n \n

\n \n {detailedReport.newsArticles ? detailedReport.newsArticles.length : 0}\n

\n News Published\n

\n\n

\n \n {detailedReport.mediaEntries ? detailedReport.mediaEntries.length : 0}\n

\n Media Monitored\n

\n \n \n\n {/* News Articles Section */}\n

Published News

{/* Subtitle */}\n

\n setNewsTitleFilter(e.target.value)}\n style={styles.filterInput}\n />\n setNewsAuthorFilter(e.target.value)}\n style={styles.filterInput}\n />\n setNewsDateFilter(e.target.value)}\n style={styles.filterInput}\n />\n

\n {/* Table styling resembles MediaMonitoringTab */}\n \n \n \n \n \n \n \n \n \n \n \n {paginatedArticles.map((article, index) => (\n \n \n \n \n \n \n \n ))}\n \n

#	Title	Author	Date	Link
{(newsPage - 1) * itemsPerPage + index + 1}	{article.title}	{article.author}	{new Date(article.created_at).toLocaleDateString()}	\n \n View News\n \n

\n {/* Pagination for News */}\n

\n setNewsPage(prev => Math.max(prev - 1, 1))}\n disabled={newsPage === 1}\n style={styles.paginationButton}\n >\n Previous\n \n Page {newsPage} of {totalNewsPages}\n setNewsPage(prev => Math.min(prev + 1, totalNewsPages))}\n disabled={newsPage >= totalNewsPages || paginatedArticles.length < itemsPerPage}\n style={styles.paginationButton}\n >\n Next\n \n

\n exportToCSV(filteredArticles, \"news_report\")}\n style={styles.exportButton}\n >\n Export News to Excel\n \n

\n\n {/* Media Monitoring Section */}\n

Monitored Media

{/* Subtitle */}\n

\n setMediaPlatformFilter(e.target.value)}\n style={styles.filterInput}\n />\n setMediaTitleFilter(e.target.value)}\n style={styles.filterInput}\n />\n setMediaSentimentFilter(e.target.value)}\n style={styles.filterInput}\n />\n setMediaAuthorFilter(e.target.value)}\n style={styles.filterInput}\n />\n

\n {/* Table styling resembles MediaMonitoringTab */}\n \n \n \n \n \n \n \n \n \n \n \n \n \n {paginatedMonitorings.map((item, index) => (\n \n \n \n \n \n \n \n \n \n ))}\n \n

#	Platform	Title	Sentiment	Author	Link	Date
{(mediaPage - 1) * itemsPerPage + index + 1}	{item.platform}	{item.title}	{item.sentiment}	{item.author}	\n {item.link\n ? (\n \n View Content\n \n )\n : (\n \"No link\"\n )}\n	{new Date(item.created_at).toLocaleDateString()}

\n {/* Pagination for Media */}\n

\n setMediaPage(prev => Math.max(prev - 1, 1))}\n disabled={mediaPage === 1}\n style={styles.paginationButton}\n >\n Previous\n \n Page {mediaPage} of {totalMediaPages}\n setMediaPage(prev => Math.min(prev + 1, totalMediaPages))}\n disabled={mediaPage >= totalMediaPages || paginatedMonitorings.length < itemsPerPage}\n style={styles.paginationButton}\n >\n Next\n \n

\n exportToCSV(filteredMonitorings, \"media_report\")}\n style={styles.exportButton}\n >\n Export Media to Excel\n \n

\n \n )\n :

Fetching detailed report...

} {/* Loading indicator */}\n \n )}\n\n {currentView === \"summary\" && (\n <>\n {/* Weekly Summary Section */}\n

📊 Weekly Summary (Last 7 Days)

\n\n {weeklySummary\n ? ( // Only show table if weekly summary data exists\n <>\n {/* Display total counts for Weekly Summary */}\n \n

\n \n {weeklySummaryTotals.totalArticles}\n

\n Articles (7 Days)\n

\n \n\n

\n \n {weeklySummaryTotals.totalMedia}\n

\n Media (7 Days)\n

\n \n \n\n {/* Table styling resembles MediaMonitoringTab */}\n \n \n \n \n \n \n \n \n \n \n {weeklySummary.map((item, index) => (\n \n \n \n \n \n \n ))}\n \n

S. No	Author	Submitted Articles	Monitored Media
{index + 1}	\n {/* Make Author name clickable */}\n handleAuthorClick(item.author)}\n style={styles.authorNameButton}\n title={`View detailed report for ${item.author}`}\n >\n {item.author}\n \n	{item.submittedArticles}	{item.monitoredMedia}

\n {/* No pagination needed for the summary table as per original structure */}\n \n )\n :

Fetching weekly summary...

} {/* Loading indicator */}\n \n )}\n\n {/* Author Detail Modal */}\n {isAuthorDetailModalOpen && authorDetailedData && (\n

\n \n

Detailed Report for {selectedAuthorName}

\n\n {/* News Articles by Author */}\n

\n Published News by {selectedAuthorName} ({authorDetailedData.news.length})\n

\n {authorDetailedData.news.length > 0\n ? (\n \n \n \n \n \n \n \n \n \n \n {authorDetailedData.news.map((article, index) => (\n \n \n \n \n \n \n ))}\n \n

#	Title	Date	Link
{index + 1}	{article.title}	{new Date(article.created_at).toLocaleDateString()}	\n \n View News\n \n

\n )\n :

No news articles found for this author.

}\n\n {/* Monitored Media by Author */}\n

\n Monitored Media by {selectedAuthorName} ({authorDetailedData.media.length})\n

\n {authorDetailedData.media.length > 0\n ? (\n \n \n \n \n \n \n \n \n \n \n \n \n {authorDetailedData.media.map((item, index) => (\n \n \n \n \n \n \n \n \n ))}\n \n

#	Platform	Title	Sentiment	Link	Date
{index + 1}	{item.platform}	{item.title}	{item.sentiment}	\n {item.link\n ? (\n \n View Content\n \n )\n : (\n \"No link\"\n )}\n	{new Date(item.created_at).toLocaleDateString()}

\n )\n :

No media reports found for this author.

}\n

\n )}\n \n );\n}\n\n// exportToCSV is kept here as it's used by this component\nconst exportToCSV = (data, filename) => {\n if (!data || data.length === 0) {\n alert(\"No data to export.\");\n return;\n }\n const headers = Object.keys(data[0]);\n // Ensure headers match the displayed columns if necessary, or just use all keys\n // For simplicity, using all keys here. If specific columns are needed, adjust headers array.\n const rows = data.map(row =>\n headers.map(field => {\n const value = row[field] == null ? \"\" : String(row[field]);\n // Basic CSV escaping: replace \" with \"\" and wrap field in quotes if it contains , \" or newline\n const needsQuotes = /[,\"\\n]/.test(value);\n const escapedValue = value.replace(/\"/g, \"\\\"\\\"\");\n return needsQuotes ? `\"${escapedValue}\"` : escapedValue;\n }).join(\",\")\n );\n const csv = [headers.join(\",\"), ...rows].join(\"\\n\");\n const blob = new Blob([csv], { type: \"text/csv;charset=utf-8;\" });\n const link = document.createElement(\"a\");\n link.href = URL.createObjectURL(blob);\n link.setAttribute(\"download\", `${filename}.csv`);\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n};\n\nexport default WeeklyReportTab;",[],[157,215],[157],{"_105":224,"_96":100,"_158":225,"_160":-5,"_161":143,"_162":226,"_164":22,"_107":227,"_101":228,"_167":229,"_169":230,"_170":22,"_171":-5,"_172":231,"_99":232},"0cfe7b60-2c0a-11f0-87b0-569c3dd06744","5545ee78-27b2-11f0-aecd-569c3dd06744",140,["D",1746708212766],64,"http","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useState } from \"https://esm.sh/react@18.2.0\"; // useEffect, useMemo would be in component files\n\n// Component Imports (as per your request)\n// Assuming these .tsx files exist in a 'components' directory relative to this App file.\n// For Val Town/esm.sh environment, these would typically be URL imports if they are separate vals.\n// If running locally with a build system, relative paths are fine.\n// For this example, I'm using the paths you provided.\n// NOTE: Ensure these paths are correct for your environment.\nimport { LoginForm } from \"./components/login.tsx\";\nimport MediaMonitoringTab from \"./components/mediaMonitoring.tsx\";\nimport { NewsArticleTab } from \"./components/newsArticle.tsx\";\nimport WeeklyReportTab from \"./components/weeklyReport.tsx\";\n\n// --- Global Constants ---\nconst BRAND_COLORS = {\n green: \"#1a7c38\",\n darkGreen: \"#1a7c38\",\n lightGreen: \"#a8e0a3\",\n gray: \"#f8f8f8\",\n red: \"#DD1407\",\n white: \"#ffffff\",\n background: \"#f3f9f2\",\n indigo: \"#4f46e5\",\n};\n\n// --- Helper Functions ---\nasync function hashPassword(password) {\n const encoder = new TextEncoder();\n const data = encoder.encode(password);\n const hash = await crypto.subtle.digest(\"SHA-256\", data);\n return Array.from(new Uint8Array(hash))\n .map(b => b.toString(16).padStart(2, \"0\"))\n .join(\"\");\n}\n\n// --- Main App Component ---\nfunction App() {\n const [user, setUser] = useState(null);\n const [view, setView] = useState(\"login\"); // 'login', 'news', 'media', 'report', 'setting'\n\n const handleLogin = async (username, password) => {\n try {\n const response = await fetch(\"/login\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ username, password }),\n });\n const result = await response.json();\n if (result.success) {\n setUser(result.user);\n setView(\"news\"); // Default view after login\n } else {\n alert(`Login failed: ${result.message || \"Invalid username or password.\"}`);\n }\n } catch (error) {\n console.error(\"Login request failed:\", error);\n alert(\"Login failed. An error occurred.\");\n }\n };\n\n const handleLogout = () => {\n setUser(null);\n setView(\"login\");\n };\n\n const renderContent = () => {\n if (!user) {\n // LoginForm is imported, ensure it receives onLogin prop\n return ;\n }\n\n switch (view) {\n case \"news\":\n // NewsArticleTab\n return ;\n case \"media\":\n // MediaMonitoringTab\n return ;\n case \"report\":\n // WeeklyReportTab\n // App controls access here:\n return user?.role === \"admin\"\n ? \n : (\n

\n Access Denied. Reports are available for administrators only.\n

\n );\n case \"setting\":\n // Assuming you have a SettingTab component\n return user?.role === \"admin\"\n ?

Setting Tab Content (Admin Only)

// Replace with actual SettingTab component\n : (\n

\n Access Denied. Settings are available for administrators only.\n

\n );\n default:\n setView(\"news\"); // Fallback to news view\n return ;\n }\n };\n\n // Sidebar button style\n const sidebarBtnStyle = {\n backgroundColor: \"transparent\",\n color: \"white\",\n border: \"1px solid rgba(255, 255, 255, 0.3)\",\n padding: \"12px 16px\",\n borderRadius: \"8px\",\n fontWeight: \"bold\",\n cursor: \"pointer\",\n textAlign: \"left\",\n fontSize: \"1rem\",\n transition: \"background-color 0.3s ease, border-color 0.3s ease\",\n width: \"100%\",\n boxSizing: \"border-box\",\n marginBottom: \"10px\",\n };\n\n // Top bar button style\n const topBarButtonStyle = {\n backgroundColor: BRAND_COLORS.white,\n color: BRAND_COLORS.darkGreen,\n border: `1px solid ${BRAND_COLORS.darkGreen}`,\n padding: \"8px 16px\",\n borderRadius: \"8px\",\n fontWeight: \"bold\",\n cursor: \"pointer\",\n fontSize: \"0.9rem\",\n transition: \"background-color 0.3s ease, color 0.3s ease\",\n };\n\n return (\n \n {user && (\n \n \n \n \n Ethiopian Electric Power የኢትዮጵያ ኤሌክትሪክ ኃይል\n \n \n
\n

\n setView(\"news\")}\n style={{ ...sidebarBtnStyle, backgroundColor: view === \"news\" ? BRAND_COLORS.darkGreen : \"transparent\" }}\n >\n 📰 News Article\n \n setView(\"media\")}\n style={{ ...sidebarBtnStyle, backgroundColor: view === \"media\" ? BRAND_COLORS.darkGreen : \"transparent\" }}\n >\n 📺 Media Monitoring\n \n {user.role === \"admin\" && (\n setView(\"report\")}\n style={{\n ...sidebarBtnStyle,\n backgroundColor: view === \"report\" ? BRAND_COLORS.darkGreen : \"transparent\",\n }}\n >\n 📊 Weekly Report\n \n )}\n {user.role === \"admin\" && (\n setView(\"setting\")}\n style={{\n ...sidebarBtnStyle,\n backgroundColor: view === \"setting\" ? BRAND_COLORS.darkGreen : \"transparent\",\n }}\n >\n ⚙️ Setting\n \n )}\n

\n \n 🚪 Logout ({user.username})\n \n

\n \n )}\n\n \n {user && (\n \n \n EEP Communication Portal\n \n alert(`Logged in as: ${user.username} (Role: ${user.role})`)}\n style={topBarButtonStyle}\n >\n 👤 {user.username} ({user.role})\n \n \n )}\n\n {/* Content Wrapper - This is where centering is applied */}\n \n {/* Inner Content Container - Apply max-width and auto margins here */}\n \n {renderContent()}\n \n \n \n \n );\n}\n\n/*=========================\nClient-side Entry Point\n==========================*/\nfunction client() {\n const rootElement = document.getElementById(\"root\");\n if (rootElement) {\n createRoot(rootElement).render();\n } else {\n console.error(\"Failed to find the root element\");\n }\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\n/*=========================\nServer-side Logic (Val Town / Deno Deploy)\n==========================*/\n// The server function remains the same as in the previous single-file solution,\n// as it handles API requests and serves the main HTML.\n// Its logic is independent of how the client-side components are structured into files.\nexport default async function server(\n request, /*: Request // Removed type for broader compatibility if not in TS env */\n) /*: Promise*/ {\n try {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\"); // Ensure this import works in your environment\n const KEY = \"MediaMonitoring\";\n\n // Database Setup (simplified for brevity, assume tables exist as defined before)\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_users (\n id INTEGER PRIMARY KEY AUTOINCREMENT, username TEXT UNIQUE NOT NULL,\n password TEXT NOT NULL, role TEXT NOT NULL DEFAULT 'user'\n )`);\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_news_articles (\n id INTEGER PRIMARY KEY AUTOINCREMENT, title TEXT NOT NULL, main_idea TEXT,\n link TEXT, author TEXT, created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )`);\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_media_monitoring (\n id INTEGER PRIMARY KEY AUTOINCREMENT, platform TEXT, media_name TEXT, title TEXT,\n main_idea TEXT, sentiment TEXT, link TEXT, author TEXT, created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )`);\n\n // User Seeding (simplified for brevity)\n const usersToSeed = [\n { username: \"admin\", password: await hashPassword(\"admin123\"), role: \"admin\" },\n { username: \"solomon\", password: await hashPassword(\"pass123\"), role: \"user\" },\n { username: \"amare\", password: await hashPassword(\"pass123\"), role: \"user\" },\n { username: \"gizachew\", password: await hashPassword(\"pass123\"), role: \"user\" },\n { username: \"tilahun\", password: await hashPassword(\"pass123\"), role: \"user\" },\n { username: \"mulugeta\", password: await hashPassword(\"pass123\"), role: \"user\" },\n ];\n for (const u of usersToSeed) {\n try {\n await sqlite.execute(`INSERT OR IGNORE INTO ${KEY}_users (username, password, role) VALUES (?, ?, ?)`, [\n u.username,\n u.password,\n u.role,\n ]);\n }\n catch (e) {\n console.error(`Seed error: ${e.message}`);\n }\n }\n\n const url = new URL(request.url);\n const path = url.pathname;\n const method = request.method;\n\n // API Routes (same logic as before)\n if (path === \"/login\" && method === \"POST\") {\n const body = await request.json();\n if (!body.username || !body.password)\n return new Response(JSON.stringify({ success: false, message: \"Missing username or password\" }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n });\n const hashedPassword = await hashPassword(body.password);\n const result = await sqlite.execute(\n `SELECT id, username, role FROM ${KEY}_users WHERE username = ? AND password = ?`,\n [body.username, hashedPassword],\n );\n if (result.rows.length > 0)\n return new Response(JSON.stringify({ success: true, user: result.rows[0] }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n return new Response(JSON.stringify({ success: false, message: \"Invalid credentials\" }), {\n status: 401,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n if (path === \"/submit-news\" && method === \"POST\") {\n const body = await request.json();\n if (!body.title || !body.author)\n return new Response(JSON.stringify({ success: false, message: \"Missing title or author\" }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n });\n const result = await sqlite.execute(\n `INSERT INTO ${KEY}_news_articles (title, main_idea, link, author) VALUES (?, ?, ?, ?)`,\n [body.title, body.mainIdea || null, body.link || null, body.author],\n );\n const newArticle = await sqlite.execute(`SELECT * FROM ${KEY}_news_articles WHERE id = ?`, [\n result.lastInsertRowid,\n ]);\n return new Response(JSON.stringify({ success: true, article: newArticle.rows[0] }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n if (path === \"/submit-media\" && method === \"POST\") {\n const body = await request.json();\n if (!body.platform || !body.mediaName || !body.title || !body.mainIdea || !body.sentiment || !body.author)\n return new Response(JSON.stringify({ success: false, message: \"Missing required fields for media entry\" }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n });\n const result = await sqlite.execute(\n `INSERT INTO ${KEY}_media_monitoring (platform, media_name, title, main_idea, sentiment, link, author) VALUES (?, ?, ?, ?, ?, ?, ?)`,\n [body.platform, body.mediaName, body.title, body.mainIdea, body.sentiment, body.link || null, body.author],\n );\n const newEntry = await sqlite.execute(`SELECT * FROM ${KEY}_media_monitoring WHERE id = ?`, [\n result.lastInsertRowid,\n ]);\n return new Response(JSON.stringify({ success: true, entry: newEntry.rows[0] }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n if (path === \"/fetch-news\" && method === \"GET\") {\n const newsArticles = await sqlite.execute(`SELECT * FROM ${KEY}_news_articles ORDER BY created_at DESC`);\n return new Response(JSON.stringify({ articles: newsArticles.rows }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n if (path === \"/fetch-media\" && method === \"GET\") {\n const mediaEntries = await sqlite.execute(`SELECT * FROM ${KEY}_media_monitoring ORDER BY created_at DESC`);\n return new Response(JSON.stringify({ entries: mediaEntries.rows }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n if (path === \"/generate-report\" && method === \"GET\") {\n const newsArticles = await sqlite.execute(`SELECT * FROM ${KEY}_news_articles ORDER BY created_at DESC`);\n const mediaEntries = await sqlite.execute(`SELECT * FROM ${KEY}_media_monitoring ORDER BY created_at DESC`);\n return new Response(JSON.stringify({ newsArticles: newsArticles.rows, mediaEntries: mediaEntries.rows }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n if (path === \"/delete-news\" && method === \"DELETE\") { // Matches NewsArticleTab\n const id = url.searchParams.get(\"id\");\n if (!id)\n return new Response(JSON.stringify({ success: false, message: \"Missing article ID\" }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n });\n const result = await sqlite.execute(`DELETE FROM ${KEY}_news_articles WHERE id = ?`, [id]);\n if (result.rowsAffected > 0)\n return new Response(JSON.stringify({ success: true }), { headers: { \"Content-Type\": \"application/json\" } });\n return new Response(JSON.stringify({ success: false, message: \"Article not found\" }), {\n status: 404,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n // although DELETE with ID in path is more RESTful.\n if (path === \"/delete-media\" && method === \"POST\") {\n const body = await request.json();\n if (!body.id)\n return new Response(JSON.stringify({ success: false, message: \"Missing media entry ID\" }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n });\n const result = await sqlite.execute(`DELETE FROM ${KEY}_media_monitoring WHERE id = ?`, [body.id]);\n if (result.rowsAffected > 0)\n return new Response(JSON.stringify({ success: true, id: body.id }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n return new Response(JSON.stringify({ success: false, message: \"Media entry not found\" }), {\n status: 404,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n // API endpoint to handle editing a news article\n if (path === \"/edit-news\" && method === \"PUT\") {\n try {\n const body = await request.json();\n // Expecting id, title, mainIdea, and link from the client\n const { id, title, mainIdea, link } = body;\n\n // Basic validation\n if (!id || !title || !mainIdea || !link) {\n return new Response(\n JSON.stringify({\n success: false,\n message: \"Missing required fields (id, title, mainIdea, link) for news article update\",\n }),\n {\n status: 400, // Bad Request\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n\n // Execute the update query\n // Assuming your news articles table is named like ${KEY}_news_articles\n // and has columns: id, title, main_idea, link, created_at, author, etc.\n const result = await sqlite.execute(\n `UPDATE ${KEY}_news_articles SET title = ?, main_idea = ?, link = ? WHERE id = ?`,\n [title, mainIdea, link, id],\n );\n\n if (result.rowsAffected > 0) {\n // Fetch the updated article to return it to the client\n const updatedArticle = await sqlite.execute(`SELECT * FROM ${KEY}_news_articles WHERE id = ?`, [id]);\n\n if (updatedArticle.rows.length > 0) {\n return new Response(JSON.stringify({ success: true, article: updatedArticle.rows[0] }), {\n status: 200, // OK\n headers: { \"Content-Type\": \"application/json\" },\n });\n } else {\n // This case should ideally not happen if rowsAffected > 0, but good for robustness\n return new Response(\n JSON.stringify({ success: false, message: \"Article updated but could not be refetched\" }),\n {\n status: 500, // Internal Server Error\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n } else {\n // No rows affected means the ID wasn't found or data was identical\n return new Response(\n JSON.stringify({ success: false, message: \"News article not found or no changes made\" }),\n {\n status: 404, // Not Found\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n } catch (error) {\n console.error(\"Error updating news article:\", error);\n return new Response(JSON.stringify({ success: false, message: \"Failed to update news article\" }), {\n status: 500, // Internal Server Error\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n // ... rest of your request handler logic for other paths/methods\n\n // EDIT/UPDATE Media Entry\n // Using PUT for updates\n if (path === \"/edit-media\" && method === \"PUT\") {\n const body = await request.json();\n const { id, platform, mediaName, title, mainIdea, sentiment, link } = body;\n\n if (!id || !platform || !mediaName || !title || !mainIdea || !sentiment || !link) {\n return new Response(\n JSON.stringify({ success: false, message: \"Missing required fields for media entry update\" }),\n {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n\n try {\n const result = await sqlite.execute(\n `UPDATE ${KEY}_media_monitoring SET platform = ?, media_name = ?, title = ?, main_idea = ?, sentiment = ?, link = ? WHERE id = ?`,\n [platform, mediaName, title, mainIdea, sentiment, link, id],\n );\n\n if (result.rowsAffected > 0) {\n // Fetch the updated entry to return it\n const updatedEntry = await sqlite.execute(`SELECT * FROM ${KEY}_media_monitoring WHERE id = ?`, [id]);\n return new Response(JSON.stringify({ success: true, entry: updatedEntry.rows[0] }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } else {\n return new Response(JSON.stringify({ success: false, message: \"Media entry not found or no changes made\" }), {\n status: 404,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n } catch (error) {\n console.error(\"Error updating media entry:\", error);\n return new Response(JSON.stringify({ success: false, message: \"Failed to update media entry\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n // --- End Media Monitoring Specific API Routes ---\n // --- NEW ENDPOINT: Generate Weekly Summary ---\n if (path === \"/generate-weekly-summary\" && method === \"GET\") {\n try {\n // Calculate the date 7 days ago\n const sevenDaysAgo = new Date();\n sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);\n // Format for SQLite DATETIME comparison (YYYY-MM-DD HH:MM:SS)\n // Note: SQLite stores DATETIME as TEXT by default, so string comparison works.\n // Using ISO string and replacing 'T' and 'Z' might be simplest, or format manually.\n // Let's use ISO string and simplify for comparison.\n // SQLite date('now', '-7 days') is also an option if available/preferred.\n // Using ISO string for consistency with JS Date objects.\n const sevenDaysAgoISO = sevenDaysAgo.toISOString(); // e.g., \"2023-10-27T10:00:00.000Z\"\n\n // Fetch news article counts per author in the last 7 days\n const newsCountsResult = await sqlite.execute(\n `\n SELECT author, COUNT(*) as submittedArticles\n FROM ${KEY}_news_articles\n WHERE created_at >= ?\n GROUP BY author\n `,\n [sevenDaysAgoISO],\n );\n\n // Fetch media monitoring counts per author in the last 7 days\n const mediaCountsResult = await sqlite.execute(\n `\n SELECT author, COUNT(*) as monitoredMedia\n FROM ${KEY}_media_monitoring\n WHERE created_at >= ?\n GROUP BY author\n `,\n [sevenDaysAgoISO],\n );\n\n // Combine the results\n const weeklySummaryMap = new Map();\n\n // Add news counts\n for (const row of newsCountsResult.rows) {\n weeklySummaryMap.set(row.author, {\n author: row.author,\n submittedArticles: row.submittedArticles,\n monitoredMedia: 0, // Initialize media count\n });\n }\n\n // Add media counts, updating existing entries or creating new ones\n for (const row of mediaCountsResult.rows) {\n if (weeklySummaryMap.has(row.author)) {\n weeklySummaryMap.get(row.author).monitoredMedia = row.monitoredMedia;\n } else {\n weeklySummaryMap.set(row.author, {\n author: row.author,\n submittedArticles: 0, // Initialize article count\n monitoredMedia: row.monitoredMedia,\n });\n }\n }\n\n // Convert map values to an array\n const weeklySummary = Array.from(weeklySummaryMap.values());\n\n return new Response(JSON.stringify(weeklySummary), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (error) {\n console.error(\"Failed to generate weekly summary:\", error);\n return new Response(JSON.stringify({ success: false, message: \"Failed to generate weekly summary\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n // --- END NEW ENDPOINT ---\n // Serve HTML for Root Path\n if (path === \"/\" && method === \"GET\") {\n // The module script src will be this file itself.\n // The client() function will be called.\n // The component imports like \"./components/login.tsx\" will be resolved by the environment\n // (e.g., Val Town's bundler or a local dev server/bundler).\n return new Response(\n `\n \n \n \n EEP Communication App\n \n \n \n 📰\">\n \n \n \n

\n \n {/* This will re-run the script, client() will execute */}\n \n \n `,\n { headers: { \"Content-Type\": \"text/html; charset=utf-8\" } },\n );\n }\n\n return new Response(\"Not Found\", { status: 404, headers: { \"Content-Type\": \"text/plain\" } });\n } catch (error) {\n console.error(\"Server error:\", error);\n return new Response(`Internal Server Error: ${error.message}`, {\n status: 500,\n headers: { \"Content-Type\": \"text/plain\" },\n });\n }\n}\n\n// --- CSS Styles ---\nconst css = `\n:root {\n --green: #28a745;\n --darkGreen: #1a7c38;\n --lightGreen: #a8e0a3;\n --gray: #f8f8f8;\n --red: #dc3545;\n --white: #ffffff;\n --background: #f3f9f2;\n --indigo: #4f46e5;\n --text: #333;\n --border: #ccc;\n --shadow: rgba(0, 0, 0, 0.1);\n}\n*, *::before, *::after { box-sizing: border-box; }\nbody {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 0;\n background-color: var(--background); color: var(--text); line-height: 1.5; font-size: 16px;\n}\n#root { min-height: 100vh; display: flex; width: 100%; } /* Ensure root is flex and takes full width */\nbutton:not(:disabled):hover { opacity: 0.85; }\nbutton:disabled { cursor: not-allowed; opacity: 0.6; }\na { color: var(--green); text-decoration: none; cursor: pointer; }\na:hover { text-decoration: underline; color: var(--darkGreen); }\ninput:focus, select:focus, textarea:focus, button:focus { outline: 2px solid var(--lightGreen); outline-offset: 1px; }\n\n/* Basic table styling if component styles are minimal */\ntable { width: 100%; border-collapse: collapse; margin-bottom: 1rem; background-color: var(--white); }\nth, td { padding: 0.75rem; vertical-align: top; border-top: 1px solid #dee2e6; text-align: left; }\nth { background-color: var(--gray); font-weight: bold; }\n\n@media (max-width: 768px) {\n /* Ensure the main flex container in App stacks sidebar and main content */\n div[style*=\"flex-direction: row\"][style*=\"min-height: 100vh\"] {\n flex-direction: column !important;\n }\n aside[style*=\"width: 240px\"] {\n width: 100% !important; height: auto; box-shadow: 0 2px 5px var(--shadow);\n }\n /* Adjust main content area width when stacked */\n main[style*=\"flex: 1\"][style*=\"width: calc(100% - 240px)\"] {\n width: 100% !important;\n }\n /* Target the content area padding */\n main > div[style*=\"padding: 30px\"] {\n padding: 15px !important;\n }\n /* Attempt to stack form elements within components if they use flex */\n div[style*=\"display: flex\"][style*=\"gap\"], div[style*=\"display: grid\"][style*=\"gap\"] {\n flex-direction: column; gap: 10px !important;\n }\n input[style*=\"flex: 1\"], select[style*=\"flex: 1\"] { /* Use flex: 1 instead of flex: 1 1 */\n min-width: auto; /* Allow full width when stacked */\n }\n}\n`;",[],[100],"files",[155,174,185,194,203,213,223],"counts",{"_237":32,"_238":180,"_239":32,"_240":241,"_244":245},"pulls","branches","forks","envVars",{"_242":32,"_243":32},"count","emptyCount","connections",{"_242":32,"_246":32},"unfilledCount","contents",[],"file",{"_105":224,"_96":100,"_158":225,"_160":-5,"_161":143,"_162":226,"_164":22,"_107":251,"_101":228,"_167":229,"_169":230,"_170":22,"_171":-5,"_99":252},["D",1746708212766],[100],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_94":95,"_96":97,"_98":44,"_101":102,"_99":100,"_103":261,"_153":266,"_233":288,"_249":289,"_247":291,"_292":-5,"_293":-5,"_294":-5,"_295":-5,"_296":297,"_240":-5},{"_105":106,"_96":97,"_107":262,"_109":-5,"_110":22,"_111":112,"_113":-5,"_114":-5,"_14":115,"_116":117,"_118":119,"_120":119,"_121":122,"_123":32,"_16":124,"_125":126,"_127":126,"_128":129,"_130":129,"_131":129,"_132":126,"_133":126,"_23":263,"_137":264,"_140":265,"_152":22},["D",1746230733663],{"_94":95,"_135":136},{"_94":95,"_139":136,"_14":115},{"_101":142,"_96":44,"_105":143,"_144":106,"_145":-5,"_146":-5,"_147":-5,"_148":-5,"_149":-5,"_150":97,"_151":95},[267,285],{"_105":156,"_96":157,"_158":159,"_160":-5,"_161":143,"_162":163,"_164":119,"_107":165,"_101":166,"_167":168,"_169":-5,"_170":22,"_171":-5,"_172":268,"_99":284},[269,272,275,278,281],{"_105":175,"_96":176,"_158":177,"_160":159,"_161":143,"_162":178,"_164":22,"_107":179,"_101":180,"_167":181,"_169":182,"_170":22,"_171":-5,"_172":270,"_99":271},[],[157,176],{"_105":186,"_96":187,"_158":188,"_160":159,"_161":143,"_162":189,"_164":22,"_107":190,"_101":163,"_167":181,"_169":191,"_170":22,"_171":-5,"_172":273,"_99":274},[],[157,187],{"_105":195,"_96":196,"_158":197,"_160":159,"_161":143,"_162":102,"_164":22,"_107":198,"_101":199,"_167":181,"_169":200,"_170":22,"_171":-5,"_172":276,"_99":277},[],[157,196],{"_105":204,"_96":205,"_158":206,"_160":159,"_161":143,"_162":207,"_164":22,"_107":208,"_101":209,"_167":181,"_169":210,"_170":22,"_171":-5,"_172":279,"_99":280},[],[157,205],{"_105":214,"_96":215,"_158":216,"_160":159,"_161":143,"_162":217,"_164":22,"_107":218,"_101":178,"_167":181,"_169":219,"_170":22,"_171":-5,"_172":282,"_99":283},[],[157,215],[157],{"_105":224,"_96":100,"_158":225,"_160":-5,"_161":143,"_162":226,"_164":22,"_107":227,"_101":228,"_167":229,"_169":230,"_170":22,"_171":-5,"_172":286,"_99":287},[],[100],[267,269,272,275,278,281,285],{"_105":224,"_96":100,"_158":225,"_160":-5,"_161":143,"_162":226,"_164":22,"_107":251,"_101":228,"_167":229,"_169":230,"_170":22,"_171":-5,"_99":290},[100],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]

solomonferede

EEPPortal