Loading articles...

;\n }\n\n if (items.length === 0) {\n return

No articles found

;\n }\n\n return items.map((article) => {\n const authorInitial = article.firstName\n ? article.firstName.charAt(0).toUpperCase()\n : article.author_username\n ? article.author_username.charAt(0).toUpperCase()\n : \"A\";\n const authorName = `${article.firstName || article.author_username || \"Anonymous\"} ${article.fatherName || \"\"}`\n .trim();\n const publishDate = new Date(article.created_at).toLocaleDateString(\"en-US\", {\n year: \"numeric\",\n month: \"long\",\n day: \"numeric\",\n });\n\n const commentsForArticle = allComments.get(article.id) || [];\n const isCommentsExpanded = expandedComments.has(article.id);\n\n // Logic for main_idea truncation\n const displayMainIdea = article.main_idea || \"No content available\";\n const truncatedMainIdea = article.is_published === 1 && displayMainIdea.length > 100\n ? displayMainIdea.substring(0, 100) + \"...\"\n : displayMainIdea;\n\n return (\n

{authorInitial}

\n {authorName}\n \n {article.is_published === 1 ? \"Published\" : \"Draft\"}\n \n

{publishDate}

\n\n

{article.title}

\n {truncatedMainIdea} {/* Use truncated or full main_idea */}\n

\n\n {/* Conditional Read More Link */}\n {article.is_published === 1 && article.link && (\n \n Read More\n \n )}\n\n {/* Comments Section Toggle */}\n

\n toggleComments(article.id)}\n >\n Comments ({commentsForArticle.length}) {isCommentsExpanded ? \"▲ Hide\" : \"▼ Show\"}\n \n\n {isCommentsExpanded && (\n <>\n {commentsForArticle.length > 0\n ? (\n commentsForArticle.map(comment => {\n const commentAuthorName = `${comment.firstName || comment.author_username || \"Unknown\"} ${\n comment.fatherName || \"\"\n }`.trim();\n const commentDate = new Date(comment.created_at).toLocaleDateString(\"en-US\", {\n year: \"numeric\",\n month: \"short\",\n day: \"numeric\",\n hour: \"2-digit\",\n minute: \"2-digit\",\n });\n return (\n

\n {commentAuthorName}\n

{comment.comment}

{/* Display comment.comment */}\n {commentDate}\n

\n );\n })\n )\n :

No comments yet.

}\n\n {/* Comment Input Form */}\n {user && (\n

\n {commentFeedback && (submittingCommentForArticleId === article.id || !submittingCommentForArticleId)\n && (\n \n {commentFeedback.message}\n

\n )}\n setCurrentCommentText(e.target.value)}\n disabled={submittingCommentForArticleId === article.id}\n aria-label={`Add comment to ${article.title}`}\n />\n handleSubmitComment(article.id)}\n style={{\n ...styles.commentButton,\n opacity: submittingCommentForArticleId === article.id ? 0.6 : 1,\n }}\n disabled={submittingCommentForArticleId === article.id || !currentCommentText.trim()}\n >\n {submittingCommentForArticleId === article.id ? \"Submitting...\" : \"Post Comment\"}\n \n

\n )}\n \n )}\n

\n \n );\n });\n };\n\n return (\n

\n {/* Tabs */}\n

\n setActiveTab(\"published\")}\n >\n Published News\n

\n setActiveTab(\"unpublished\")}\n >\n Draft News\n

\n \n\n {/* Submit New Content Link */}\n {user && (\n \n + Submit a New Content\n \n )}\n\n {/* Articles Feed */}\n

\n {activeTab === \"published\"\n ? renderFeedItems(publishedArticles)\n : renderFeedItems(unpublishedArticles)}\n

\n \n );\n}",[],[160,197],{"_106":204,"_96":205,"_161":206,"_163":162,"_164":144,"_165":166,"_167":120,"_108":207,"_102":32,"_169":181,"_171":208,"_172":22,"_173":-5,"_174":209,"_100":210},"5d7309f4-42cf-11f0-a755-76b3cceeab13","login.tsx","5d730a6c-42cf-11f0-a755-76b3cceeab13",["D",1749211884180],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\n\nconst BRAND_COLORS = {\n green: \"#1E590C\",\n red: \"#DD1407\",\n lightGreen: \"#FFFFFF\",\n};\n\nexport function LoginForm({ onLogin }) {\n const [username, setUsername] = useState(\"\");\n const [password, setPassword] = useState(\"\");\n const [loginImage, setLoginImage] = useState(\"\");\n\n useEffect(() => {\n setLoginImage(\n \"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFYS8NOUa2W__8qAOcKt6lBFVw2_ByYp-Jo5f5WqmFglW6wQEKERed2yiuA5He3826dwI&usqp=CAU\",\n );\n }, []);\n\n const handleSubmit = (e) => {\n e.preventDefault();\n onLogin(username, password);\n };\n\n return (\n \n \n {loginImage && (\n \n )}\n

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}",[],[160,205],{"_106":212,"_96":213,"_161":214,"_163":162,"_164":144,"_165":166,"_167":120,"_108":215,"_102":32,"_169":181,"_171":216,"_172":22,"_173":-5,"_174":217,"_100":218},"5d730f26-42cf-11f0-a755-76b3cceeab13","mediaMonitoring.tsx","5d730f9e-42cf-11f0-a755-76b3cceeab13",["D",1749211884180],"/** @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 darkGreen: \"#1E590C\",\n gray: \"#f8f8f8\",\n red: \"#DD1407 \",\n white: \"#ffffff\",\n background: \"#f3f9f2\",\n indigo: \"#4f46e5\",\n};\n\ninterface MediaEntry {\n id: string; // Matches DB column\n platform: string;\n media_name: string; // Matches DB column\n title: string;\n main_idea: string; // Matches DB column\n sentiment: string;\n link: string;\n employee_id: number; // Matches DB column\n published_date: string; // Matches DB column\n created_at: string;\n updated_at: string;\n}\n\ninterface CurrentUser {\n id: number; // This is the employee_id\n username: string;\n role: string;\n}\n\nfunction MediaMonitoringTab({ user }: { user: CurrentUser | null }) {\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 const [publishedDate, setPublishedDate] = useState(\"\"); // For submission form\n\n const [platformFilter, setPlatformFilter] = useState(\"\");\n const [mediaNameFilter, setMediaNameFilter] = useState(\"\");\n const [titleFilter, setTitleFilter] = useState(\"\");\n const [sentimentFilter, setSentimentFilter] = useState(\"\");\n const [authorIdFilter, setAuthorIdFilter] = useState(\"\"); // Filter by employee_id\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: string | null;\n platform: string;\n mediaName: string;\n title: string;\n mainIdea: string;\n sentiment: string;\n link: string;\n employee_id: number | null; // Read-only, but included for completeness\n publishedDate: string;\n }>({\n id: null,\n platform: \"\",\n mediaName: \"\",\n title: \"\",\n mainIdea: \"\",\n sentiment: \"\",\n link: \"\",\n employee_id: null,\n publishedDate: \"\",\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 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 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 // Filter by employee_id (author)\n const matchesAuthor = authorIdFilter ? String(entry.employee_id) === authorIdFilter : true;\n\n return matchesPlatform && matchesMediaName && matchesTitle && matchesSentiment && matchesAuthor;\n });\n }, [entries, platformFilter, mediaNameFilter, titleFilter, sentimentFilter, authorIdFilter]);\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 || !publishedDate) {\n setErrorMessage(\"Please fill in all required fields.\");\n setSuccessMessage(\"\");\n return;\n }\n\n setIsSubmitting(true);\n setErrorMessage(\"\");\n\n try {\n const newId = crypto.randomUUID(); // Generate UUID for new media entry\n const response = await fetch(\"/submit-media\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n id: newId, // Send generated ID\n platform,\n mediaName,\n title,\n mainIdea,\n sentiment,\n link,\n employee_id: user?.id, // Send the logged-in user's employee_id\n publishedDate,\n }),\n });\n\n const result = await response.json();\n if (response.ok && result.success && result.entry) {\n setEntries(prevEntries => [result.entry, ...prevEntries]);\n setSuccessMessage(\"Entry submitted successfully!\");\n setPlatform(\"\");\n setMediaName(\"\");\n setTitle(\"\");\n setMainIdea(\"\");\n setSentiment(\"neutral\");\n setLink(\"\");\n setPublishedDate(\"\");\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: string) => {\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: MediaEntry) => {\n setEditingEntry(entry);\n setEditFormData({\n id: entry.id,\n platform: entry.platform,\n mediaName: entry.media_name,\n title: entry.title,\n mainIdea: entry.main_idea,\n sentiment: entry.sentiment,\n link: entry.link,\n employee_id: entry.employee_id,\n publishedDate: entry.published_date ? new Date(entry.published_date).toISOString().split(\"T\")[0] : \"\",\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 employee_id: null,\n publishedDate: \"\",\n });\n setIsSavingEdit(false); // Reset saving state\n };\n\n // Function to handle changes in the edit modal form\n const handleEditFormChange = (e: React.ChangeEvent) => {\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 || !editFormData.publishedDate\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 body: JSON.stringify(editFormData),\n });\n\n const result = await response.json();\n\n if (response.ok && result.success && result.entry) {\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 setPublishedDate(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 setAuthorIdFilter(e.target.value)}\n style={styles.input}\n />\n

\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {paginatedMonitoring.map((entry, index) => {\n const isAuthor = user && (user.id === entry.employee_id);\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n })}\n \n

S.No.	Platform	Media Name	Title	Sentiment	Author ID	Link	Published Date	Action
{(page - 1) * itemsPerPage + index + 1}	{entry.platform}	{entry.media_name}	{entry.title}	{entry.sentiment}	{entry.employee_id}	\n {entry.link\n ? (\n \n View Content\n \n )\n : \"No link\"}\n	\n {entry.published_date ? new Date(entry.published_date).toLocaleDateString() : \"N/A\"}\n	\n {/* Edit Button - greyed out if not author /}\n handleEditClick(entry) : undefined}\n style={{\n ...styles.actionButton,\n marginRight: \"5px\",\n backgroundColor: isAuthor ? BRAND_COLORS.darkGreen : \"#cccccc\",\n cursor: isAuthor ? \"pointer\" : \"not-allowed\",\n opacity: isAuthor ? 1 : 0.6,\n }}\n aria-label={isAuthor ? `Edit entry: ${entry.title}` : \"Edit (disabled)\"}\n disabled={!isAuthor}\n >\n ✏️ Edit\n \n {/ Delete Button - greyed out if not author */}\n handleDelete(entry.id) : undefined}\n style={{\n ...styles.actionButton,\n backgroundColor: isAuthor ? BRAND_COLORS.red : \"#cccccc\",\n cursor: isAuthor ? \"pointer\" : \"not-allowed\",\n opacity: isAuthor ? 1 : 0.6,\n }}\n aria-label={isAuthor ? `Delete entry: ${entry.title}` : \"Delete (disabled)\"}\n disabled={!isAuthor}\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 \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: { [key: string]: React.CSSProperties } = {\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.darkGreen,\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.darkGreen}`,\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.darkGreen}`,\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.darkGreen,\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.darkGreen,\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.darkGreen}`,\n // \"&:last-child\": { // Not valid in inline styles\n // borderBottom: \"none\",\n // },\n // \"& td\": { // Not valid in inline styles\n // padding: \"8px\",\n // },\n // \"&:hover\": { // Not valid in inline styles\n // backgroundColor: BRAND_COLORS.gray,\n // },\n },\n tableCell: { // Added for individual cell styling\n padding: \"8px\",\n },\n link: {\n color: BRAND_COLORS.darkGreen,\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.darkGreen,\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.darkGreen, // 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;",[],[160,213],{"_106":220,"_96":221,"_161":222,"_163":162,"_164":144,"_165":223,"_167":120,"_108":224,"_102":225,"_169":181,"_171":226,"_172":22,"_173":-5,"_174":227,"_100":228},"2c658c92-4310-11f0-9adf-76b3cceeab13","newsArticle.tsx","5d7323f8-42cf-11f0-a755-76b3cceeab13",261,["D",1749239719177],11,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useMemo, useState } from \"https://esm.sh/react@18.2.0\";\nconst BRAND_COLORS = {\n darkGreen: \"#1E590C\",\n gray: \"#f8f8f8\",\n red: \"#DD1407 \",\n white: \"#ffffff\",\n background: \"#f3f9f2\",\n indigo: \"#4f46e5\",\n};\nconst styles: { [key: string]: React.CSSProperties } = {\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.darkGreen, // 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\",\n padding: \"15px\",\n borderRadius: \"8px\",\n boxShadow: \"0 2px 4px rgba(0,0,0,0.1)\",\n border: `1px solid ${BRAND_COLORS.darkGreen}`,\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.darkGreen}`,\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.darkGreen}`,\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.darkGreen,\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\",\n padding: \"15px\", //\n borderRadius: \"8px\", //\n boxShadow: \"0 2px 4px rgba(0,0,0,0.1)\",\n border: `1px solid ${BRAND_COLORS.darkGreen}`,\n },\n filterInput: { // Specific style for filter inputs\n padding: \"8px\",\n borderRadius: \"8px\",\n border: `2px solid ${BRAND_COLORS.darkGreen}`,\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\",\n borderRadius: \"8px\",\n boxShadow: \"0 2px 4px rgba(0,0,0,0.1)\",\n overflow: \"hidden\",\n },\n tableHeader: {\n backgroundColor: BRAND_COLORS.darkGreen,\n color: \"white\",\n padding: \"10px\",\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.darkGreen}`,\n },\n tableCell: { // Added for individual cell styling\n padding: \"10px\",\n fontSize: \"0.9rem\",\n verticalAlign: \"top\",\n },\n link: {\n color: BRAND_COLORS.darkGreen, // Use dark green for links\n textDecoration: \"underline\",\n cursor: \"pointer\",\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.darkGreen,\n color: \"white\",\n cursor: \"pointer\",\n transition: \"background-color 0.3s ease, opacity 0.3s ease\",\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.darkGreen, // Default green for Edit\n color: \"white\",\n cursor: \"pointer\",\n fontSize: \"0.8rem\",\n transition: \"background-color 0.3s ease\",\n },\n deleteButton: { // Specific style for delete button\n backgroundColor: BRAND_COLORS.red,\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.darkGreen}`, // Thinner border\n fontSize: \"1rem\",\n width: \"100%\",\n transition: \"border-color 0.3s ease\",\n },\n modalTextarea: { // Style for modal textarea\n padding: \"10px\",\n borderRadius: \"8px\",\n border: `1px solid ${BRAND_COLORS.darkGreen}`,\n fontSize: \"1rem\",\n width: \"100%\",\n minHeight: \"80px\",\n resize: \"vertical\",\n transition: \"border-color 0.3s ease\",\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 },\n modalSaveButton: {\n backgroundColor: BRAND_COLORS.darkGreen, // Corrected typo from darkreen\n // \"&:hover:not(:disabled)\": { // Not valid in inline styles\n // backgroundColor: BRAND_COLORS.darkGreen,\n // },\n },\n modalCancelButton: {\n backgroundColor: BRAND_COLORS.red,\n },\n};\ninterface Article {\n id: number; // **CORRECTED: INTEGER PRIMARY KEY AUTOINCREMENT in DB, so number here**\n title: string;\n main_idea: string;\n link: string;\n employee_id: number; // FK to employees.employee_id\n reviewer_id: number; // FK to employees.employee_id\n created_at: string;\n updated_at: string;\n is_published: number; // 0 or 1\n comments: string;\n published_at: string;\n // Aliased from join with employees table for display\n author_username?: string; // user_name of the employee_id\n firstName?: string; // first_name of the employee_id\n fatherName?: string; // last_name of the employee_id\n}\ninterface CurrentUser {\n id: number; // This is the employee_id\n username: string;\n role: string;\n}\nexport const TableRow = ({ serialNumber, id, title, article, date, link, onDelete, onEdit, currentUser }: {\n serialNumber: number;\n id: number; // **CORRECTED: id is number**\n title: string;\n article: Article;\n date: string;\n link: string;\n onDelete: (id: number) => void; // **CORRECTED: id is number**\n onEdit: (article: Article) => void;\n currentUser: CurrentUser;\n}) => {\n const handleDeleteClick = () => {\n if (window.confirm(`Are you sure you want to delete the article \"${title}\"?`)) {\n onDelete(id);\n }\n };\n const handleEditClick = () => {\n onEdit(article);\n };\n // Combine first and father's name, fallback to username if names are missing\n const authorFullName = `${article.firstName || article.author_username || \"Unknown\"} ${article.fatherName || \"\"}`\n .trim();\n // Check if current user is the author of this article\n const isAuthor = currentUser && (currentUser.id === article.employee_id);\n return (\n \n {serialNumber}\n {title}\n {authorFullName}\n {date}\n \n \n 🔗 View Article\n \n \n \n {/* Edit Button - show for all but grey out if not author */}\n \n ✏️ Edit\n \n {/* Delete Button - show for all but grey out if not author */}\n \n 🗑 Delete\n \n \n \n );\n};\n// Component for Table Pagination Controls\nexport const TablePagination = ({ page, setPage, totalPages }: {\n page: number;\n setPage: React.Dispatch>;\n totalPages: number;\n}) => (\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 {/* Inline text style */}\n Page {page} of {totalPages > 0 ? totalPages : 1}\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// Main Component for the News Article (Contents) Tab\nexport function NewsArticleTab({ user }: { user: CurrentUser | null }) {\n const [articles, setArticles] = useState([]);\n const [title, setTitle] = useState(\"\");\n const [mainIdea, setMainIdea] = useState(\"\");\n const [link, setLink] = useState(\"\");\n const [isPublishedNew, setIsPublishedNew] = useState(0); // New state for the submission form\n // Filters - Adapted for News Articles\n const [titleFilter, setTitleFilter] = useState(\"\");\n const [authorFilter, setAuthorFilter] = useState(\"\"); // This filter still searches by username\n const [dateFilter, setDateFilter] = useState(\"\");\n const [page, setPage] = useState(1);\n const itemsPerPage = 8;\n const [successMessage, setSuccessMessage] = useState(\"\");\n const [errorMessage, setErrorMessage] = useState(\"\");\n const [isSubmitting, setIsSubmitting] = useState(false); // For submit button state\n // State for edit modal\n const [isEditModalOpen, setIsEditModalOpen] = useState(false);\n const [editFormData, setEditFormData] = useState<{\n id: number | null; // **CORRECTED: id is number**\n title: string;\n mainIdea: string;\n link: string;\n employee_id: number | null; // Store the original employee_id (read-only)\n authorFullName: string; // Store the full name for display (read-only)\n isPublished: number;\n comments: string;\n publishedAt: string;\n }>({\n id: null,\n title: \"\",\n mainIdea: \"\",\n link: \"\",\n employee_id: null,\n authorFullName: \"\",\n isPublished: 0,\n comments: \"\",\n publishedAt: \"\",\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 // --- Moved fetchArticles outside 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 setArticles(data.articles || []);\n } catch (error: any) {\n console.error(\"Failed to fetch articles:\", error);\n setErrorMessage(\"Failed to load articles. Please try again later.\");\n }\n };\n // --- End Move ---\n // Effect to fetch articles on mount\n useEffect(() => {\n fetchArticles(); // Now fetchArticles is defined in the component's scope\n }, []); // Empty dependency array means this runs only once on mount\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 // 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 const filteredArticles = useMemo(() => {\n return articles.filter(article =>\n article.title.toLowerCase().includes(titleFilter.toLowerCase())\n // Author filter now searches by the author_username\n && (article.author_username?.toLowerCase().includes(authorFilter.toLowerCase()) || \"\")\n && (!dateFilter || new Date(article.created_at).toLocaleDateString(\"en-CA\") === dateFilter)\n );\n }, [articles, titleFilter, authorFilter, dateFilter]);\n const totalPages = Math.ceil(filteredArticles.length / itemsPerPage); // Use itemsPerPage\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 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 const submitArticle = async () => {\n // Updated validation logic\n if (!title.trim() || !mainIdea.trim()) {\n setErrorMessage(\"Please fill in Content Title and About content.\");\n setSuccessMessage(\"\");\n return;\n }\n if (isPublishedNew === 1 && !link.trim()) { // If published, link is required\n setErrorMessage(\"URL Link is required for published content.\");\n setSuccessMessage(\"\");\n return;\n }\n if (isPublishedNew === 1 && link.trim()) { // Only validate URL if it's present and published\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 try {\n // **REMOVED: newId = crypto.randomUUID();**\n // The database will auto-increment the ID.\n const response = await fetch(\"/submit-news\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n // **REMOVED: id: newId,**\n title,\n mainIdea,\n link: isPublishedNew === 1 ? link : null, // Send link only if published, otherwise null\n employee_id: user?.id, // Send the logged-in user's employee_id\n isPublished: isPublishedNew, // Include the new state\n comments: null,\n publishedAt: isPublishedNew === 1 ? new Date().toISOString() : null, // Set publishedAt only if published\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 setSuccessMessage(\"✅ Article submitted successfully!\");\n setErrorMessage(\"\");\n setTitle(\"\");\n setMainIdea(\"\");\n setLink(\"\");\n setIsPublishedNew(0); // Reset publish status\n fetchArticles(); // <-- Refetch the entire list to get author names\n } else {\n throw new Error(result.message || \"Submission failed. Unknown error.\");\n }\n } catch (error: any) {\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 // Renamed deleteArticle to handleDelete for consistency\n const handleDelete = async (id: number) => { // **CORRECTED: id type to number**\n const confirmed = window.confirm(\"Are you sure you want to delete this article?\");\n if (!confirmed) return;\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: any) {\n console.error(\"Failed to delete article:\", error);\n setErrorMessage(`❌ Failed to delete article: ${error.message}`);\n setSuccessMessage(\"\");\n }\n };\n // Function to open the edit modal - Similar pattern to MediaMonitoringTab\n const handleEditClick = (article: Article) => {\n setEditFormData({\n id: article.id, // This will now be a number\n title: article.title,\n mainIdea: article.main_idea || \"\",\n link: article.link,\n employee_id: article.employee_id,\n authorFullName: `${article.firstName || article.author_username || \"Unknown\"} ${article.fatherName || \"\"}`.trim(),\n isPublished: article.is_published,\n comments: article.comments || \"\",\n publishedAt: article.published_at ? new Date(article.published_at).toISOString().split(\"T\")[0] : \"\",\n });\n setIsEditModalOpen(true);\n setSuccessMessage(\"\"); // Clear main messages when opening modal\n setErrorMessage(\"\");\n setEditModalError(\"\"); // Clear modal-specific error\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 employee_id: null,\n authorFullName: \"\",\n isPublished: 0,\n comments: \"\",\n publishedAt: \"\",\n });\n setIsSavingEdit(false); // Reset saving state\n setEditModalError(\"\"); // Clear modal-specific error on close\n };\n // Function to handle changes in the edit modal form - Similar pattern to MediaMonitoringTab\n const handleEditFormChange = (e: React.ChangeEvent) => {\n const { name, value } = e.target;\n setEditFormData(prevState => ({\n ...prevState,\n [name]: name === \"isPublished\" ? Number(value) : value,\n }));\n };\n // Function to save the edited entry\n const handleSaveEdit = async () => {\n // Validate required fields from editFormData\n if (!editFormData.title.trim() || !editFormData.mainIdea.trim()) {\n setEditModalError(\"Please fill in Content Title and About content.\");\n return;\n }\n if (editFormData.isPublished === 1 && !editFormData.link.trim()) {\n setEditModalError(\"URL Link is required for published content.\");\n return;\n }\n if (editFormData.isPublished === 1 && editFormData.link.trim()) {\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 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, // id is correctly a number\n title: editFormData.title,\n mainIdea: editFormData.mainIdea, // Send mainIdea (camelCase)\n link: editFormData.isPublished === 1 ? editFormData.link : null, // Conditionally send link\n isPublished: editFormData.isPublished,\n comments: editFormData.comments,\n publishedAt: editFormData.isPublished === 1 ? editFormData.publishedAt : null, // Conditionally send publishedAt\n }),\n });\n const result = await response.json();\n if (response.ok && result.success && result.article) {\n // Update the articles state with the updated article received from the backend\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: any) {\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 // Function to clear all filters\n const clearFilters = () => {\n setTitleFilter(\"\");\n setAuthorFilter(\"\");\n setDateFilter(\"\");\n setPage(1); // Reset to first page when clearing filters\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        {/* New dropdown for is_published */}\n        <div>\n          <label style={{ display: \"block\", marginBottom: \"5px\", fontWeight: \"bold\", color: BRAND_COLORS.darkGreen }}>\n            Publish Status:\n          </label>\n          <select\n            name=\"isPublished\"\n            value={isPublishedNew}\n            onChange={(e) => setIsPublishedNew(Number(e.target.value))}\n            style={styles.select} // Use select style\n            aria-label=\"Publish status\"\n          >\n            <option value={0}>Draft</option>\n            <option value={1}>Published</option>\n          </select>\n        </div>\n        {/* Conditional rendering for link input */}\n        {isPublishedNew === 1 && ( // Only show if 'Published' is selected\n          <div>\n            <label style={{ display: \"block\", marginBottom: \"5px\", fontWeight: \"bold\", color: BRAND_COLORS.darkGreen }}>\n              URL Link (if published):\n            </label>\n            <input\n              type=\"url\"\n              placeholder=\"https://example.com\" // Changed text\n              aria-label=\"URL Link (if published)\"\n              style={styles.input} // Use input style\n              value={link}\n              onChange={(e) => setLink(e.target.value)}\n            />\n          </div>\n        )}\n        <button\n          onClick={submitArticle}\n          style={{ ...styles.button, opacity: isSubmitting ? 0.6 : 1 }} // Use button style + opacity\n          disabled={isSubmitting}\n        >\n          {isSubmitting ? \"Submitting...\" : \"📤 Submit Article\"}\n        </button>\n      </div>\n      {/* Filters Section */}\n      <div style={styles.filters}>\n        <input\n          type=\"text\"\n          placeholder=\"Filter by title...\"\n          aria-label=\"Filter by title\"\n          style={styles.filterInput}\n          value={titleFilter}\n          onChange={(e) => setTitleFilter(e.target.value)}\n        />\n        <input\n          type=\"text\"\n          placeholder=\"Filter by author...\"\n          aria-label=\"Filter by author\"\n          style={styles.filterInput}\n          value={authorFilter}\n          onChange={(e) => setAuthorFilter(e.target.value)}\n        />\n        <input\n          type=\"date\"\n          aria-label=\"Filter by date\"\n          style={styles.filterInput}\n          value={dateFilter}\n          onChange={(e) => setDateFilter(e.target.value)}\n        />\n        <button\n          onClick={clearFilters}\n          style={styles.filterButton}\n          aria-label=\"Clear all filters\"\n        >\n          🔄 Clear Filters\n        </button>\n      </div>\n      {/* Articles Table */}\n      <table style={styles.table}>\n        <thead>\n          <tr>\n            <th style={styles.tableHeader}>S/N</th>\n            <th style={styles.tableHeader}>Title</th>\n            <th style={styles.tableHeader}>Author</th>\n            <th style={styles.tableHeader}>Date</th>\n            <th style={styles.tableHeader}>Link</th>\n            <th style={styles.tableHeader}>Actions</th>\n          </tr>\n        </thead>\n        <tbody>\n          {paginatedArticles.length > 0\n            ? (\n              paginatedArticles.map((article, index) => (\n                <TableRow\n                  key={article.id}\n                  serialNumber={(page - 1) * itemsPerPage + index + 1}\n                  id={article.id}\n                  title={article.title}\n                  article={article}\n                  date={new Date(article.created_at).toLocaleDateString()}\n                  link={article.link}\n                  onDelete={handleDelete}\n                  onEdit={handleEditClick}\n                  currentUser={user || { id: 0, username: \"\", role: \"\" }}\n                />\n              ))\n            )\n            : (\n              <tr>\n                <td\n                  colSpan={6}\n                  style={{ ...styles.tableCell, textAlign: \"center\", fontStyle: \"italic\", color: \"#666\" }}\n                >\n                  No articles found matching your criteria.\n                </td>\n              </tr>\n            )}\n        </tbody>\n      </table>\n      {/* Pagination */}\n      {totalPages > 1 && (\n        <TablePagination\n          page={page}\n          setPage={setPage}\n          totalPages={totalPages}\n        />\n      )}\n      {/* Edit Modal */}\n      {isEditModalOpen && (\n        <div style={styles.modalOverlay} onClick={handleCloseEditModal}>\n          <div style={styles.modalContent} onClick={(e) => e.stopPropagation()}>\n            <h3 style={styles.modalTitle}>✏️ Edit Article</h3>\n            {/* Modal Error Message */}\n            {editModalError && (\n              <div style={styles.errorMessage}>\n                {editModalError}\n              </div>\n            )}\n            {/* Author field (read-only) */}\n            <div>\n              <label\n                style={{ display: \"block\", marginBottom: \"5px\", fontWeight: \"bold\", color: BRAND_COLORS.darkGreen }}\n              >\n                Author:\n              </label>\n              <input\n                type=\"text\"\n                value={editFormData.authorFullName}\n                style={styles.modalReadOnlyInput}\n                readOnly\n                aria-label=\"Author (read-only)\"\n              />\n            </div>\n            {/* Title field */}\n            <div>\n              <label\n                style={{ display: \"block\", marginBottom: \"5px\", fontWeight: \"bold\", color: BRAND_COLORS.darkGreen }}\n              >\n                Title: <span style={{ color: BRAND_COLORS.red }}>*</span>\n              </label>\n              <input\n                type=\"text\"\n                name=\"title\"\n                value={editFormData.title}\n                onChange={handleEditFormChange}\n                style={styles.modalInput}\n                placeholder=\"Enter article title\"\n                aria-label=\"Article title\"\n              />\n            </div>\n            {/* Main Idea field */}\n            <div>\n              <label\n                style={{ display: \"block\", marginBottom: \"5px\", fontWeight: \"bold\", color: BRAND_COLORS.darkGreen }}\n              >\n                Main Idea: <span style={{ color: BRAND_COLORS.red }}>*</span>\n              </label>\n              <textarea\n                name=\"mainIdea\"\n                value={editFormData.mainIdea}\n                onChange={handleEditFormChange}\n                style={styles.modalTextarea}\n                placeholder=\"Enter main idea\"\n                aria-label=\"Main idea\"\n              />\n            </div>\n            {/* Published Status field */}\n            <div>\n              <label\n                style={{ display: \"block\", marginBottom: \"5px\", fontWeight: \"bold\", color: BRAND_COLORS.darkGreen }}\n              >\n                Publish Status:\n              </label>\n              <select\n                name=\"isPublished\"\n                value={editFormData.isPublished}\n                onChange={handleEditFormChange}\n                style={styles.select}\n                aria-label=\"Publish status\"\n              >\n                <option value={0}>Draft</option>\n                <option value={1}>Published</option>\n              </select>\n            </div>\n            {/* Conditional Link field for Edit Modal */}\n            {editFormData.isPublished === 1 && (\n              <div>\n                <label\n                  style={{ display: \"block\", marginBottom: \"5px\", fontWeight: \"bold\", color: BRAND_COLORS.darkGreen }}\n                >\n                  URL Link (if published):\n                </label>\n                <input\n                  type=\"url\"\n                  name=\"link\"\n                  value={editFormData.link}\n                  onChange={handleEditFormChange}\n                  style={styles.modalInput}\n                  placeholder=\"https://example.com\"\n                  aria-label=\"URL Link\"\n                />\n              </div>\n            )}\n            {/* Comments field */}\n            <div>\n              <label\n                style={{ display: \"block\", marginBottom: \"5px\", fontWeight: \"bold\", color: BRAND_COLORS.darkGreen }}\n              >\n                Comments:\n              </label>\n              <textarea\n                name=\"comments\"\n                value={editFormData.comments}\n                onChange={handleEditFormChange}\n                style={styles.modalTextarea}\n                placeholder=\"Add comments...\"\n                aria-label=\"Comments\"\n              />\n            </div>\n            {/* Published At field (read-only for published articles, editable for drafts) */}\n            <div>\n              <label\n                style={{ display: \"block\", marginBottom: \"5px\", fontWeight: \"bold\", color: BRAND_COLORS.darkGreen }}\n              >\n                Published At:\n              </label>\n              <input\n                type=\"date\"\n                name=\"publishedAt\"\n                value={editFormData.publishedAt}\n                onChange={handleEditFormChange}\n                style={editFormData.isPublished === 1\n                  ? styles.modalReadOnlyInput\n                  : styles.modalInput}\n                readOnly={editFormData.isPublished === 1} // Read-only if published\n                aria-label=\"Published date\"\n              />\n            </div>\n            <div style={styles.modalActions}>\n              <button\n                onClick={handleSaveEdit}\n                style={{ ...styles.modalButton, ...styles.modalSaveButton, opacity: isSavingEdit ? 0.6 : 1 }}\n                disabled={isSavingEdit}\n                aria-label=\"Save changes\"\n              >\n                {isSavingEdit ? \"Saving...\" : \"💾 Save Changes\"}\n              </button>\n              <button\n                onClick={handleCloseEditModal}\n                style={{ ...styles.modalButton, ...styles.modalCancelButton }}\n                aria-label=\"Cancel edit\"\n              >\n                ✖ Cancel\n              </button>\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}",[],[160,221],{"_106":230,"_96":231,"_161":232,"_163":162,"_164":144,"_165":233,"_167":120,"_108":234,"_102":235,"_169":181,"_171":236,"_172":22,"_173":-5,"_174":237,"_100":238},"388f7f64-4310-11f0-9a25-76b3cceeab13","profileTab.tsx","5d734022-42cf-11f0-a755-76b3cceeab13",262,["D",1749239739586],5,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\n\nconst BRAND_COLORS = {\n  darkGreen: \"##1E590C\",\n  gray: \"#f8f8f8\",\n  red: \"#DD1407\",\n  yellow: \"#FFC107\",\n  white: \"#ffffff\",\n  background: \"#f3f9f2\",\n  indigo: \"#4f46e5\",\n  text: \"#333\",\n  border: \"#ccc\",\n};\n\nconst ProfileTab = ({ user, setView }) => {\n  const [employeeData, setEmployeeData] = useState(null);\n  const [formData, setFormData] = useState({\n    firstName: \"\",\n    fatherName: \"\",\n    jobTitle: \"\",\n    grade: \"\",\n    sex: \"\",\n    email: \"\",\n    phoneNumber: \"\",\n    department: \"\",\n    dateOfEmployment: \"\",\n    status: \"Active\",\n    dateOfBirth: \"\",\n    address: \"\",\n    supervisor: \"\",\n  });\n\n  const [isLoading, setIsLoading] = useState(true);\n  const [isSaving, setIsSaving] = useState(false);\n  const [error, setError] = useState(null);\n  const [saveSuccess, setSaveSuccess] = useState(false);\n  const [hasChanges, setHasChanges] = useState(false);\n  const [initialData, setInitialData] = useState(null);\n\n  // Required fields configuration\n  const requiredFields = {\n    firstName: true,\n    jobTitle: true,\n    email: true,\n    phoneNumber: true,\n    department: true,\n    dateOfEmployment: true,\n    status: true,\n    address: true,\n  };\n\n  useEffect(() => {\n    const fetchProfile = async () => {\n      setIsLoading(true);\n      setError(null);\n      try {\n        const response = await fetch(`/fetch-employee/${user.id}`);\n        const data = await response.json();\n\n        if (response.ok && data.success) {\n          const emp = data.employee;\n          setEmployeeData(emp);\n          setInitialData(emp);\n          setFormData({\n            firstName: emp.firstName || \"\",\n            fatherName: emp.fatherName || \"\",\n            jobTitle: emp.jobTitle || \"\",\n            grade: emp.grade || \"\",\n            sex: emp.sex || \"\",\n            email: emp.email || \"\",\n            phoneNumber: emp.phoneNumber || \"\",\n            department: emp.department || \"\",\n            dateOfEmployment: emp.dateOfEmployment ? new Date(emp.dateOfEmployment).toISOString().split(\"T\")[0] : \"\",\n            status: emp.status || \"Active\",\n            dateOfBirth: emp.dateOfBirth ? new Date(emp.dateOfBirth).toISOString().split(\"T\")[0] : \"\",\n            address: emp.address || \"\",\n            supervisor: emp.supervisor || \"\",\n          });\n        } else {\n          setError(data.message || \"Failed to fetch profile data.\");\n        }\n      } catch (err) {\n        console.error(\"Error fetching profile:\", err);\n        setError(\"An error occurred while fetching your profile.\");\n      } finally {\n        setIsLoading(false);\n      }\n    };\n\n    if (user?.id) {\n      fetchProfile();\n    }\n  }, [user?.id]);\n\n  useEffect(() => {\n    if (!initialData) return;\n\n    const currentData = {\n      firstName: formData.firstName,\n      fatherName: formData.fatherName,\n      jobTitle: formData.jobTitle,\n      grade: formData.grade,\n      sex: formData.sex,\n      email: formData.email,\n      phoneNumber: formData.phoneNumber,\n      department: formData.department,\n      dateOfEmployment: formData.dateOfEmployment,\n      status: formData.status,\n      dateOfBirth: formData.dateOfBirth,\n      address: formData.address,\n      supervisor: formData.supervisor,\n    };\n\n    const initialFormattedData = {\n      firstName: initialData.firstName || \"\",\n      fatherName: initialData.fatherName || \"\",\n      jobTitle: initialData.jobTitle || \"\",\n      grade: initialData.grade || \"\",\n      sex: initialData.sex || \"\",\n      email: initialData.email || \"\",\n      phoneNumber: initialData.phoneNumber || \"\",\n      department: initialData.department || \"\",\n      dateOfEmployment: initialData.dateOfEmployment\n        ? new Date(initialData.dateOfEmployment).toISOString().split(\"T\")[0]\n        : \"\",\n      status: initialData.status || \"Active\",\n      dateOfBirth: initialData.dateOfBirth ? new Date(initialData.dateOfBirth).toISOString().split(\"T\")[0] : \"\",\n      address: initialData.address || \"\",\n      supervisor: initialData.supervisor || \"\",\n    };\n\n    setHasChanges(JSON.stringify(currentData) !== JSON.stringify(initialFormattedData));\n  }, [formData, initialData]);\n\n  const handleInputChange = (e) => {\n    const { name, value } = e.target;\n    setFormData(prev => ({\n      ...prev,\n      [name]: value,\n    }));\n  };\n\n  const handleSaveChanges = async (e) => {\n    e.preventDefault();\n\n    // Validate required fields\n    for (const field in requiredFields) {\n      if (requiredFields[field] && !formData[field]) {\n        setError(`Please fill in the required field: ${field}`);\n        return;\n      }\n    }\n\n    if (!/\\S+@\\S+\\.\\S+/.test(formData.email)) {\n      setError(\"Please enter a valid email address.\");\n      return;\n    }\n\n    if (!hasChanges) {\n      setView(\"dashboard\"); // Or whatever your default view is\n      return;\n    }\n\n    setIsSaving(true);\n    setError(null);\n\n    try {\n      const response = await fetch(`/update-employee/${user.id}`, {\n        method: \"PUT\",\n        headers: {\n          \"Content-Type\": \"application/json\",\n        },\n        body: JSON.stringify(formData),\n      });\n\n      const result = await response.json();\n\n      if (response.ok && result.success) {\n        setSaveSuccess(true);\n        setTimeout(() => setView(\"dashboard\"), 1500);\n      } else {\n        setError(result.message || \"Failed to update profile.\");\n      }\n    } catch (err) {\n      console.error(\"Error updating profile:\", err);\n      setError(\"An error occurred while saving your profile.\");\n    } finally {\n      setIsSaving(false);\n    }\n  };\n\n  const handleCancel = () => {\n    setView(\"dashboard\"); // Or whatever your default view is\n  };\n\n  // --- Styling ---\n  const formContainerStyle = {\n    maxWidth: \"800px\",\n    margin: \"20px auto\",\n    padding: \"30px\",\n    backgroundColor: BRAND_COLORS.white,\n    borderRadius: \"8px\",\n    boxShadow: \"0 2px 10px rgba(0,0,0,0.1)\",\n    fontFamily: \"'Segoe UI', Tahoma, Geneva, Verdana, sans-serif\",\n  };\n\n  const formGroupStyle = {\n    marginBottom: \"15px\",\n  };\n\n  const labelStyle = {\n    display: \"block\",\n    marginBottom: \"5px\",\n    fontWeight: \"bold\",\n    color: BRAND_COLORS.darkGreen,\n  };\n\n  const inputStyle = {\n    width: \"100%\",\n    padding: \"10px\",\n    border: `1px solid ${BRAND_COLORS.darkGreen}`,\n    borderRadius: \"4px\",\n    boxSizing: \"border-box\",\n    fontSize: \"1rem\",\n  };\n\n  const selectStyle = {\n    ...inputStyle,\n    appearance: \"none\",\n    backgroundImage:\n      `url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23${\n        BRAND_COLORS.darkGreen.substring(1)\n      }%22%20d%3D%22M287%2C114.7L159.1%2C21.2c-5.3-3.3-12.1-3.3-17.4%2C0L5.4%2C114.7c-6.6%2C4.3-5.7%2C14.8%2C1.7%2C17.1l127.9%2C77.8c5.3%2C3.3%2C12.1%2C3.3%2C17.4%2C0l127.9-77.8C292.7%2C129.5%2C293.6%2C119%2C287%2C114.7z%22%2F%3E%3C%2Fsvg%3E')`,\n    backgroundRepeat: \"no-repeat\",\n    backgroundPosition: \"right 10px top 50%\",\n    backgroundSize: \"12px auto\",\n    paddingRight: \"30px\",\n  };\n\n  const textareaStyle = {\n    ...inputStyle,\n    minHeight: \"80px\",\n    resize: \"vertical\",\n  };\n\n  const buttonStyle = {\n    padding: \"12px 24px\",\n    border: \"none\",\n    borderRadius: \"4px\",\n    fontSize: \"1rem\",\n    fontWeight: \"bold\",\n    cursor: \"pointer\",\n    transition: \"background-color 0.3s ease\",\n    margin: \"0 10px\",\n  };\n\n  const saveButtonStyle = {\n    ...buttonStyle,\n    backgroundColor: BRAND_COLORS.yellow,\n    color: \"#333\",\n  };\n\n  const cancelButtonStyle = {\n    ...buttonStyle,\n    backgroundColor: BRAND_COLORS.red,\n    color: BRAND_COLORS.white,\n  };\n\n  const readOnlyInputStyle = {\n    ...inputStyle,\n    backgroundColor: BRAND_COLORS.gray,\n    cursor: \"not-allowed\",\n    borderColor: BRAND_COLORS.border,\n  };\n\n  const requiredStyle = {\n    color: BRAND_COLORS.red,\n    marginLeft: \"4px\",\n  };\n\n  const formGridStyle = {\n    display: \"grid\",\n    gridTemplateColumns: \"1fr 1fr\",\n    gap: \"20px\",\n  };\n\n  const fullWidthStyle = {\n    gridColumn: \"1 / -1\",\n  };\n\n  const buttonContainerStyle = {\n    display: \"flex\",\n    justifyContent: \"center\",\n    marginTop: \"30px\",\n  };\n\n  if (isLoading) {\n    return <div style={formContainerStyle}>Loading profile...</div>;\n  }\n\n  if (error && !employeeData) {\n    return <div style={formContainerStyle}>Error: {error}</div>;\n  }\n\n  return (\n    <div style={formContainerStyle}>\n      <h2>My Profile</h2>\n\n      {saveSuccess && <p style={{ color: BRAND_COLORS.darkGreen }}>Profile updated successfully!</p>}\n      {error && <p style={{ color: BRAND_COLORS.red }}>Error: {error}</p>}\n\n      <form onSubmit={handleSaveChanges}>\n        <div style={formGridStyle}>\n          {/* Employee ID (Read-only) */}\n          <div style={formGroupStyle}>\n            <label style={labelStyle} htmlFor=\"employeeId\">\n              Employee ID\n            </label>\n            <input\n              type=\"text\"\n              id=\"employeeId\"\n              style={readOnlyInputStyle}\n              value={employeeData?.employeeId || \"\"}\n              readOnly\n            />\n          </div>\n\n          {/* Username (Read-only) */}\n          <div style={formGroupStyle}>\n            <label style={labelStyle} htmlFor=\"username\">\n              Username\n            </label>\n            <input\n              type=\"text\"\n              id=\"username\"\n              style={readOnlyInputStyle}\n              value={employeeData?.username || \"\"}\n              readOnly\n            />\n          </div>\n\n          {/* Role (Read-only) */}\n          <div style={formGroupStyle}>\n            <label style={labelStyle} htmlFor=\"role\">\n              Role\n            </label>\n            <input\n              type=\"text\"\n              id=\"role\"\n              style={readOnlyInputStyle}\n              value={employeeData?.role || \"\"}\n              readOnly\n            />\n          </div>\n\n          {/* First Name (Editable) */}\n          <div style={formGroupStyle}>\n            <label style={labelStyle} htmlFor=\"firstName\">\n              First Name {requiredFields.firstName && <span style={requiredStyle}>*</span>}\n            </label>\n            <input\n              type=\"text\"\n              id=\"firstName\"\n              name=\"firstName\"\n              style={inputStyle}\n              value={formData.firstName}\n              onChange={handleInputChange}\n              required={requiredFields.firstName}\n            />\n          </div>\n\n          {/* Father's Name (Editable) */}\n          <div style={formGroupStyle}>\n            <label style={labelStyle} htmlFor=\"fatherName\">\n              Father's Name\n            </label>\n            <input\n              type=\"text\"\n              id=\"fatherName\"\n              name=\"fatherName\"\n              style={inputStyle}\n              value={formData.fatherName}\n              onChange={handleInputChange}\n            />\n          </div>\n\n          {/* Job Title (Editable) */}\n          <div style={formGroupStyle}>\n            <label style={labelStyle} htmlFor=\"jobTitle\">\n              Job Title {requiredFields.jobTitle && <span style={requiredStyle}>*</span>}\n            </label>\n            <input\n              type=\"text\"\n              id=\"jobTitle\"\n              name=\"jobTitle\"\n              style={inputStyle}\n              value={formData.jobTitle}\n              onChange={handleInputChange}\n              required={requiredFields.jobTitle}\n            />\n          </div>\n\n          {/* Grade (Editable) */}\n          <div style={formGroupStyle}>\n            <label style={labelStyle} htmlFor=\"grade\">\n              Grade\n            </label>\n            <input\n              type=\"text\"\n              id=\"grade\"\n              name=\"grade\"\n              style={inputStyle}\n              value={formData.grade}\n              onChange={handleInputChange}\n            />\n          </div>\n\n          {/* Sex (Editable) */}\n          <div style={formGroupStyle}>\n            <label style={labelStyle} htmlFor=\"sex\">\n              Sex\n            </label>\n            <select\n              id=\"sex\"\n              name=\"sex\"\n              style={selectStyle}\n              value={formData.sex}\n              onChange={handleInputChange}\n            >\n              <option value=\"\">Select Sex</option>\n              <option value=\"Male\">Male</option>\n              <option value=\"Female\">Female</option>\n              <option value=\"Other\">Other</option>\n            </select>\n          </div>\n\n          {/* Email Address (Editable) */}\n          <div style={formGroupStyle}>\n            <label style={labelStyle} htmlFor=\"email\">\n              Email Address {requiredFields.email && <span style={requiredStyle}>*</span>}\n            </label>\n            <input\n              type=\"email\"\n              id=\"email\"\n              name=\"email\"\n              style={inputStyle}\n              value={formData.email}\n              onChange={handleInputChange}\n              required={requiredFields.email}\n            />\n          </div>\n\n          {/* Phone Number (Editable) */}\n          <div style={formGroupStyle}>\n            <label style={labelStyle} htmlFor=\"phoneNumber\">\n              Phone Number {requiredFields.phoneNumber && <span style={requiredStyle}>*</span>}\n            </label>\n            <input\n              type=\"tel\"\n              id=\"phoneNumber\"\n              name=\"phoneNumber\"\n              style={inputStyle}\n              value={formData.phoneNumber}\n              onChange={handleInputChange}\n              required={requiredFields.phoneNumber}\n            />\n          </div>\n\n          {/* Department (Editable) */}\n          <div style={formGroupStyle}>\n            <label style={labelStyle} htmlFor=\"department\">\n              Department {requiredFields.department && <span style={requiredStyle}>*</span>}\n            </label>\n            <input\n              type=\"text\"\n              id=\"department\"\n              name=\"department\"\n              style={inputStyle}\n              value={formData.department}\n              onChange={handleInputChange}\n              required={requiredFields.department}\n            />\n          </div>\n\n          {/* Date of Employment (Editable) */}\n          <div style={formGroupStyle}>\n            <label style={labelStyle} htmlFor=\"dateOfEmployment\">\n              Date of Employment {requiredFields.dateOfEmployment && <span style={requiredStyle}>*</span>}\n            </label>\n            <input\n              type=\"date\"\n              id=\"dateOfEmployment\"\n              name=\"dateOfEmployment\"\n              style={inputStyle}\n              value={formData.dateOfEmployment}\n              onChange={handleInputChange}\n              required={requiredFields.dateOfEmployment}\n            />\n          </div>\n\n          {/* Status (Editable) */}\n          <div style={formGroupStyle}>\n            <label style={labelStyle} htmlFor=\"status\">\n              Status {requiredFields.status && <span style={requiredStyle}>*</span>}\n            </label>\n            <select\n              id=\"status\"\n              name=\"status\"\n              style={selectStyle}\n              value={formData.status}\n              onChange={handleInputChange}\n              required={requiredFields.status}\n            >\n              <option value=\"Active\">Active</option>\n              <option value=\"Inactive\">Inactive</option>\n            </select>\n          </div>\n\n          {/* Date of Birth (Editable) */}\n          <div style={formGroupStyle}>\n            <label style={labelStyle} htmlFor=\"dateOfBirth\">\n              Date of Birth\n            </label>\n            <input\n              type=\"date\"\n              id=\"dateOfBirth\"\n              name=\"dateOfBirth\"\n              style={inputStyle}\n              value={formData.dateOfBirth}\n              onChange={handleInputChange}\n            />\n          </div>\n\n          {/* Address (Editable) - Full width */}\n          <div style={{ ...formGroupStyle, ...fullWidthStyle }}>\n            <label style={labelStyle} htmlFor=\"address\">\n              Address {requiredFields.address && <span style={requiredStyle}>*</span>}\n            </label>\n            <textarea\n              id=\"address\"\n              name=\"address\"\n              style={textareaStyle}\n              value={formData.address}\n              onChange={handleInputChange}\n              required={requiredFields.address}\n            />\n          </div>\n\n          {/* Supervisor/Manager (Editable) */}\n          <div style={formGroupStyle}>\n            <label style={labelStyle} htmlFor=\"supervisor\">\n              Supervisor/Manager\n            </label>\n            <input\n              type=\"text\"\n              id=\"supervisor\"\n              name=\"supervisor\"\n              style={inputStyle}\n              value={formData.supervisor}\n              onChange={handleInputChange}\n            />\n          </div>\n        </div>\n\n        {/* Button Container */}\n        <div style={buttonContainerStyle}>\n          <button\n            type=\"button\"\n            style={cancelButtonStyle}\n            onClick={handleCancel}\n          >\n            Cancel\n          </button>\n          <button\n            type=\"submit\"\n            style={saveButtonStyle}\n            disabled={!hasChanges || isSaving}\n          >\n            {isSaving ? \"Saving...\" : \"Save Changes\"}\n          </button>\n        </div>\n      </form>\n    </div>\n  );\n};\n\nexport default ProfileTab;",[],[160,231],{"_106":240,"_96":241,"_161":242,"_163":162,"_164":144,"_165":243,"_167":120,"_108":244,"_102":245,"_169":181,"_171":246,"_172":22,"_173":-5,"_174":247,"_100":248},"99fdeffa-4307-11f0-9934-76b3cceeab13","setting.tsx","5d73508a-42cf-11f0-a755-76b3cceeab13",247,["D",1749236037578],26,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\n\nconst BRAND_COLORS = {\n  darkGreen: \"#1E590C\",\n  gray: \"#f8f8f8\",\n  red: \"#DD1407\",\n  white: \"#ffffff\",\n  background: \"#f3f9f2\",\n  indigo: \"#4f46e5\",\n};\n\nconst ROLES = [\"CEO\", \"Director\", \"Manager\", \"Employee\", \"Admin\"];\n\nconst SettingTab = () => {\n  const [currentView, setCurrentView] = useState(\"list\");\n  const [employees, setEmployees] = useState([]);\n  const [isLoading, setIsLoading] = useState(false);\n  const [error, setError] = useState(null);\n  const [saveSuccess, setSaveSuccess] = useState(false);\n  const [currentUser, setCurrentUser] = useState(null);\n\n  // Employee form state - aligned with database schema\n  const [formData, setFormData] = useState({\n    employeeId: \"\",\n    username: \"\",\n    firstName: \"\",\n    fatherName: \"\",\n    role: \"Employee\",\n    status: \"active\",\n    email: \"\",\n    phoneNumber: \"\",\n    password: \"\",\n    dateOfEmployment: \"\",\n    createdAt: \"\",\n    updatedAt: \"\",\n    address: \"\",\n    grade: \"\",\n    sex: \"\",\n    supervisor: \"\",\n    department: \"\",\n    jobTitle: \"\",\n    dateOfBirth: \"\",\n  });\n\n  useEffect(() => {\n    fetchEmployees();\n    // Simulate fetching current user - in a real app, this would come from your auth system\n    setCurrentUser({\n      employeeId: \"admin1\",\n      role: \"Admin\",\n      manager_id: null,\n    });\n  }, []);\n\n  // Function to calculate experience based on dateOfEmployment\n  const calculateExperience = (dateOfEmployment) => {\n    if (!dateOfEmployment) return \"N/A\";\n\n    const employmentDate = new Date(dateOfEmployment);\n    const today = new Date();\n\n    let months = (today.getFullYear() - employmentDate.getFullYear()) * 12;\n    months += today.getMonth() - employmentDate.getMonth();\n\n    if (today.getDate() < employmentDate.getDate()) {\n      months--;\n    }\n\n    const years = Math.floor(months / 12);\n    const remainingMonths = months % 12;\n\n    return `${years}.${remainingMonths} years`;\n  };\n\n  const fetchEmployees = async () => {\n    setIsLoading(true);\n    setError(null);\n    try {\n      const response = await fetch(\"/fetch-employees\");\n      const data = await response.json();\n      if (data.success) {\n        setEmployees(data.employees);\n      } else {\n        setError(data.message || \"Failed to fetch employees.\");\n      }\n    } catch (err) {\n      setError(\"An error occurred while fetching employees.\");\n      console.error(\"Error:\", err);\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  const handleEditEmployee = async (employee) => {\n    setIsLoading(true);\n    try {\n      // Fetch the full employee details including sensitive fields\n      const response = await fetch(`/fetch-employee/${employee.employeeId}`);\n      const data = await response.json();\n\n      if (data.success) {\n        setFormData({\n          employeeId: data.employee.employeeId,\n          username: data.employee.username,\n          password: \"\", // Don't pre-fill password for security\n          firstName: data.employee.firstName,\n          fatherName: data.employee.fatherName,\n          role: data.employee.role,\n          status: data.employee.status,\n          jobTitle: data.employee.jobTitle,\n          email: data.employee.email,\n          phoneNumber: data.employee.phoneNumber,\n          department: data.employee.department,\n          dateOfEmployment: data.employee.dateOfEmployment,\n          address: data.employee.address,\n          supervisor: data.employee.supervisor || null,\n          sex: data.employee.sex || \"\",\n          dateOfBirth: data.employee.dateOfBirth || \"\",\n          createdAt: data.employee.created_at,\n          updatedAt: data.employee.updated_at || \"\",\n          grade: data.employee.grade || \"\",\n        });\n        setCurrentView(\"edit\");\n      } else {\n        setError(data.message || \"Failed to fetch employee details.\");\n      }\n    } catch (err) {\n      setError(\"An error occurred while fetching employee details.\");\n      console.error(\"Error:\", err);\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  const handleDeleteEmployee = async (employeeId) => {\n    if (!confirm(\"Are you sure you want to delete this employee?\")) return;\n\n    setIsLoading(true);\n    setError(null);\n    try {\n      const response = await fetch(`/delete-employee/${employeeId}`, {\n        method: \"DELETE\",\n      });\n      const data = await response.json();\n      if (data.success) {\n        setEmployees(employees.filter((emp) => emp.employeeId !== employeeId));\n        setSaveSuccess(true);\n        setTimeout(() => setSaveSuccess(false), 3000);\n      } else {\n        setError(data.message || \"Failed to delete employee.\");\n      }\n    } catch (err) {\n      setError(\"An error occurred while deleting the employee.\");\n      console.error(\"Error:\", err);\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  const handleSubmit = async (e) => {\n    e.preventDefault();\n\n    // Validation\n    const requiredFields = [\n      \"firstName\",\n      \"jobTitle\",\n      \"email\",\n      \"phoneNumber\",\n      \"department\",\n      \"dateOfEmployment\",\n      \"address\",\n    ];\n\n    for (const field of requiredFields) {\n      if (!formData[field]) {\n        setError(`Please fill in the required field: ${field}`);\n        return;\n      }\n    }\n\n    if (!/\\S+@\\S+\\.\\S+/.test(formData.email)) {\n      setError(\"Please enter a valid email address.\");\n      return;\n    }\n\n    // New employee validation\n    if (!formData.createdAt) {\n      if (!formData.employeeId) {\n        setError(\"Employee ID is required.\");\n        return;\n      }\n      if (!formData.username) {\n        setError(\"Username is required.\");\n        return;\n      }\n      if (!formData.password) {\n        setError(\"Password is required.\");\n        return;\n      }\n    }\n\n    // Supervisor validation\n    if (formData.role !== \"CEO\" && !formData.supervisor) {\n      setError(\"Supervisor is required for this role.\");\n      return;\n    }\n\n    setIsLoading(true);\n    setError(null);\n    setSaveSuccess(false);\n\n    try {\n      const url = formData.createdAt\n        ? `/update-employee/${formData.employeeId}`\n        : \"/create-employee\";\n      const method = formData.createdAt ? \"PUT\" : \"POST\";\n\n      const payload = {\n        employeeId: formData.employeeId,\n        username: formData.username,\n        password: formData.password,\n        firstName: formData.firstName,\n        fatherName: formData.fatherName,\n        role: formData.role,\n        jobTitle: formData.jobTitle,\n        grade: formData.grade,\n        sex: formData.sex,\n        email: formData.email,\n        phoneNumber: formData.phoneNumber,\n        department: formData.department,\n        dateOfEmployment: formData.dateOfEmployment,\n        status: formData.status,\n        dateOfBirth: formData.dateOfBirth,\n        address: formData.address,\n        supervisor: formData.role === \"CEO\" ? null : formData.supervisor,\n      };\n\n      // Don't send password if empty (for updates)\n      if (formData.createdAt && !payload.password) delete payload.password;\n\n      const response = await fetch(url, {\n        method,\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify(payload),\n      });\n\n      const result = await response.json();\n\n      if (!response.ok || !result.success) {\n        throw new Error(result.message || \"Failed to save employee\");\n      }\n\n      setSaveSuccess(true);\n      setCurrentView(\"list\");\n      fetchEmployees();\n\n      if (!formData.createdAt) {\n        // Reset form after successful creation\n        setFormData({\n          employeeId: \"\",\n          username: \"\",\n          password: \"\",\n          firstName: \"\",\n          fatherName: \"\",\n          role: \"Employee\",\n          jobTitle: \"\",\n          email: \"\",\n          phoneNumber: \"\",\n          department: \"\",\n          dateOfEmployment: \"\",\n          address: \"\",\n          supervisor: null,\n          sex: \"\",\n          dateOfBirth: \"\",\n          createdAt: \"\",\n          updatedAt: \"\",\n          grade: \"\",\n        });\n      }\n    } catch (err) {\n      setError(err.message);\n      console.error(\"Error:\", err);\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  const handleInputChange = (e) => {\n    const { name, value } = e.target;\n    setFormData(prev => ({\n      ...prev,\n      [name]: value,\n    }));\n  };\n\n  // Check if current user can edit/delete the employee\n  const canEditEmployee = (employee) => {\n    if (!currentUser) return false;\n\n    // Admin, Director and CEO can edit any employee\n    if ([\"Admin\", \"Director\", \"CEO\"].includes(currentUser.role)) {\n      return true;\n    }\n\n    // Manager can only edit their direct reports\n    if (currentUser.role === \"Manager\" && employee.manager_id === currentUser.employeeId) {\n      return true;\n    }\n\n    return false;\n  };\n\n  // Styles (same as before)\n  const containerStyle = {\n    padding: \"20px\",\n    backgroundColor: BRAND_COLORS.background,\n    borderRadius: \"8px\",\n    fontFamily: \"'Segoe UI', Tahoma, Geneva, Verdana, sans-serif\",\n    width: \"100%\",\n    boxSizing: \"border-box\",\n  };\n\n  const headerStyle = {\n    display: \"flex\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n    marginBottom: \"20px\",\n    borderBottom: `2px solid ${BRAND_COLORS.darkGreen}`,\n    paddingBottom: \"10px\",\n  };\n\n  const buttonStyle = {\n    padding: \"10px 15px\",\n    backgroundColor: BRAND_COLORS.darkGreen,\n    color: BRAND_COLORS.white,\n    border: \"none\",\n    borderRadius: \"4px\",\n    cursor: \"pointer\",\n    fontSize: \"1rem\",\n    transition: \"background-color 0.3s ease\",\n  };\n\n  const formContainerStyle = {\n    maxWidth: \"800px\",\n    margin: \"20px auto\",\n    padding: \"30px\",\n    backgroundColor: BRAND_COLORS.white,\n    borderRadius: \"8px\",\n    boxShadow: \"0 2px 10px rgba(0,0,0,0.1)\",\n  };\n\n  const formGroupStyle = {\n    marginBottom: \"15px\",\n  };\n\n  const labelStyle = {\n    display: \"block\",\n    marginBottom: \"5px\",\n    fontWeight: \"bold\",\n    color: BRAND_COLORS.darkGreen,\n  };\n\n  const inputStyle = {\n    width: \"100%\",\n    padding: \"10px\",\n    border: `1px solid ${BRAND_COLORS.darkGreen}`,\n    borderRadius: \"4px\",\n    boxSizing: \"border-box\",\n    fontSize: \"1rem\",\n  };\n\n  const selectStyle = {\n    ...inputStyle,\n    appearance: \"auto\",\n    backgroundColor: BRAND_COLORS.white,\n  };\n\n  const textareaStyle = {\n    ...inputStyle,\n    minHeight: \"80px\",\n    resize: \"vertical\",\n  };\n\n  const submitButtonStyle = {\n    display: \"block\",\n    width: \"100%\",\n    padding: \"12px\",\n    backgroundColor: BRAND_COLORS.darkGreen,\n    color: BRAND_COLORS.white,\n    border: \"none\",\n    borderRadius: \"4px\",\n    fontSize: \"1.1rem\",\n    fontWeight: \"bold\",\n    cursor: \"pointer\",\n    transition: \"background-color 0.3s ease\",\n    marginTop: \"20px\",\n  };\n\n  const tableStyle = {\n    width: \"100%\",\n    borderCollapse: \"collapse\",\n    marginTop: \"20px\",\n    backgroundColor: BRAND_COLORS.white,\n    boxShadow: \"0 2px 10px rgba(0,0,0,0.05)\",\n    borderRadius: \"8px\",\n    overflow: \"hidden\",\n  };\n\n  const thStyle = {\n    backgroundColor: BRAND_COLORS.darkGreen,\n    color: BRAND_COLORS.white,\n    padding: \"12px 15px\",\n    textAlign: \"left\",\n    fontWeight: \"bold\",\n    fontSize: \"0.9rem\",\n  };\n\n  const tdStyle = {\n    padding: \"10px 15px\",\n    borderBottom: `1px solid ${BRAND_COLORS.gray}`,\n    fontSize: \"0.9rem\",\n  };\n\n  const tableRowEvenStyle = {\n    backgroundColor: BRAND_COLORS.background,\n  };\n\n  const tableRowOddStyle = {\n    backgroundColor: BRAND_COLORS.white,\n  };\n\n  const messageStyle = {\n    textAlign: \"center\",\n    padding: \"20px\",\n    color: BRAND_COLORS.darkGreen,\n    fontSize: \"1.1rem\",\n  };\n\n  const errorStyle = {\n    ...messageStyle,\n    color: BRAND_COLORS.red,\n  };\n\n  const actionButtonStyle = {\n    padding: \"4px 8px\",\n    border: \"none\",\n    borderRadius: \"4px\",\n    cursor: \"pointer\",\n    fontSize: \"0.8rem\",\n    marginRight: \"5px\",\n  };\n\n  const editButtonStyle = {\n    ...actionButtonStyle,\n    backgroundColor: \"#ffc107\",\n    color: \"#333\",\n  };\n\n  const deleteButtonStyle = {\n    ...actionButtonStyle,\n    backgroundColor: \"#dc3545\",\n    color: \"white\",\n  };\n\n  const disabledButtonStyle = {\n    ...actionButtonStyle,\n    backgroundColor: \"#cccccc\",\n    color: \"#666666\",\n    cursor: \"not-allowed\",\n  };\n\n  const renderForm = () => (\n    <div style={formContainerStyle}>\n      <div style={headerStyle}>\n        <h2>{formData.createdAt ? \"Edit Employee\" : \"Add Employee\"}</h2>\n        <button\n          style={buttonStyle}\n          onClick={() => {\n            setCurrentView(\"list\");\n            setSaveSuccess(false);\n            setError(null);\n          }}\n        >\n          ← Back to List\n        </button>\n      </div>\n\n      {saveSuccess && <p style={{ color: \"green\" }}>Employee saved successfully!</p>}\n      {error && <p style={errorStyle}>{error}</p>}\n\n      <form onSubmit={handleSubmit}>\n        <div style={{ display: \"grid\", gridTemplateColumns: \"1fr 1fr\", gap: \"20px\" }}>\n          {/* Left Column */}\n          <div>\n            {/* Employee ID */}\n            <div style={formGroupStyle}>\n              <label style={labelStyle}>\n                Employee ID<span style={{ color: BRAND_COLORS.red }}>*</span>\n              </label>\n              <input\n                type=\"text\"\n                name=\"employeeId\"\n                value={formData.employeeId}\n                onChange={handleInputChange}\n                style={inputStyle}\n                required={!formData.createdAt}\n                disabled={!!formData.createdAt}\n              />\n            </div>\n\n            {/* First Name */}\n            <div style={formGroupStyle}>\n              <label style={labelStyle}>\n                First Name<span style={{ color: BRAND_COLORS.red }}>*</span>\n              </label>\n              <input\n                type=\"text\"\n                name=\"firstName\"\n                value={formData.firstName}\n                onChange={handleInputChange}\n                style={inputStyle}\n                required\n              />\n            </div>\n\n            {/* Last Name */}\n            <div style={formGroupStyle}>\n              <label style={labelStyle}>Last Name</label>\n              <input\n                type=\"text\"\n                name=\"fatherName\"\n                value={formData.fatherName}\n                onChange={handleInputChange}\n                style={inputStyle}\n              />\n            </div>\n\n            {/* Username */}\n            <div style={formGroupStyle}>\n              <label style={labelStyle}>\n                Username<span style={{ color: BRAND_COLORS.red }}>*</span>\n              </label>\n              <input\n                type=\"text\"\n                name=\"username\"\n                value={formData.username}\n                onChange={handleInputChange}\n                style={inputStyle}\n                required={!formData.createdAt}\n                disabled={!!formData.createdAt}\n              />\n            </div>\n\n            {/* Password (only for new employees) */}\n            {!formData.createdAt && (\n              <div style={formGroupStyle}>\n                <label style={labelStyle}>\n                  Password<span style={{ color: BRAND_COLORS.red }}>*</span>\n                </label>\n                <input\n                  type=\"password\"\n                  name=\"password\"\n                  value={formData.password}\n                  onChange={handleInputChange}\n                  style={inputStyle}\n                  required\n                />\n              </div>\n            )}\n\n            {/* Role - Now Required */}\n            <div style={formGroupStyle}>\n              <label style={labelStyle}>\n                Role<span style={{ color: BRAND_COLORS.red }}>*</span>\n              </label>\n              <select\n                name=\"role\"\n                value={formData.role}\n                onChange={handleInputChange}\n                style={selectStyle}\n                required\n              >\n                {ROLES.map((role) => (\n                  <option key={role} value={role}>\n                    {role}\n                  </option>\n                ))}\n              </select>\n            </div>\n\n            {/* Job Title */}\n            <div style={formGroupStyle}>\n              <label style={labelStyle}>\n                Job Title<span style={{ color: BRAND_COLORS.red }}>*</span>\n              </label>\n              <input\n                type=\"text\"\n                name=\"jobTitle\"\n                value={formData.jobTitle}\n                onChange={handleInputChange}\n                style={inputStyle}\n                required\n              />\n            </div>\n\n            {/* Grade */}\n            <div style={formGroupStyle}>\n              <label style={labelStyle}>Grade</label>\n              <input\n                type=\"text\"\n                name=\"grade\"\n                value={formData.grade}\n                onChange={handleInputChange}\n                style={inputStyle}\n              />\n            </div>\n\n            {/* Sex */}\n            <div style={formGroupStyle}>\n              <label style={labelStyle}>Sex</label>\n              <select\n                name=\"sex\"\n                value={formData.sex}\n                onChange={handleInputChange}\n                style={selectStyle}\n              >\n                <option value=\"\">Select</option>\n                <option value=\"Male\">Male</option>\n                <option value=\"Female\">Female</option>\n                <option value=\"Other\">Other</option>\n              </select>\n            </div>\n          </div>\n\n          {/* Right Column */}\n          <div>\n            {/* Email */}\n            <div style={formGroupStyle}>\n              <label style={labelStyle}>\n                Email<span style={{ color: BRAND_COLORS.red }}>*</span>\n              </label>\n              <input\n                type=\"email\"\n                name=\"email\"\n                value={formData.email}\n                onChange={handleInputChange}\n                style={inputStyle}\n                required\n              />\n            </div>\n\n            {/* Phone Number */}\n            <div style={formGroupStyle}>\n              <label style={labelStyle}>\n                Phone Number<span style={{ color: BRAND_COLORS.red }}>*</span>\n              </label>\n              <input\n                type=\"tel\"\n                name=\"phoneNumber\"\n                value={formData.phoneNumber}\n                onChange={handleInputChange}\n                style={inputStyle}\n                required\n              />\n            </div>\n\n            {/* Department */}\n            <div style={formGroupStyle}>\n              <label style={labelStyle}>\n                Department<span style={{ color: BRAND_COLORS.red }}>*</span>\n              </label>\n              <input\n                type=\"text\"\n                name=\"department\"\n                value={formData.department}\n                onChange={handleInputChange}\n                style={inputStyle}\n                required\n              />\n            </div>\n\n            {/* Date of Employment */}\n            <div style={formGroupStyle}>\n              <label style={labelStyle}>\n                Date of Employment<span style={{ color: BRAND_COLORS.red }}>*</span>\n              </label>\n              <input\n                type=\"date\"\n                name=\"dateOfEmployment\"\n                value={formData.dateOfEmployment}\n                onChange={handleInputChange}\n                style={inputStyle}\n                required\n              />\n            </div>\n\n            {/* Address */}\n            <div style={formGroupStyle}>\n              <label style={labelStyle}>Address</label>\n              <textarea\n                name=\"address\"\n                value={formData.address}\n                onChange={handleInputChange}\n                style={textareaStyle}\n              />\n            </div>\n\n            {/* Supervisor - Now Required except for CEO */}\n            <div style={formGroupStyle}>\n              <label style={labelStyle}>\n                Supervisor{formData.role === \"CEO\" ? \"\" : <span style={{ color: BRAND_COLORS.red }}>*</span>}\n              </label>\n              <select\n                name=\"supervisor\"\n                value={formData.supervisor || \"\"}\n                onChange={handleInputChange}\n                style={selectStyle}\n                required={formData.role !== \"CEO\"}\n                disabled={formData.role === \"CEO\"}\n              >\n                <option value=\"\">Select Supervisor</option>\n                {employees\n                  .filter(emp => emp.employeeId !== formData.employeeId && emp.role !== \"CEO\")\n                  .map(employee => (\n                    <option key={employee.employeeId} value={employee.employeeId}>\n                      {employee.firstName} {employee.fatherName} ({employee.role})\n                    </option>\n                  ))}\n              </select>\n            </div>\n\n            {/* Date of Birth */}\n            <div style={formGroupStyle}>\n              <label style={labelStyle}>Date of Birth</label>\n              <input\n                type=\"date\"\n                name=\"dateOfBirth\"\n                value={formData.dateOfBirth}\n                onChange={handleInputChange}\n                style={inputStyle}\n              />\n            </div>\n          </div>\n        </div>\n\n        <button type=\"submit\" style={submitButtonStyle} disabled={isLoading}>\n          {isLoading ? \"Saving...\" : \"Save Employee\"}\n        </button>\n      </form>\n    </div>\n  );\n\n  const renderList = () => (\n    <div>\n      <div style={headerStyle}>\n        <h2>Employee List</h2>\n        <button\n          style={buttonStyle}\n          onClick={() => {\n            setFormData({\n              employeeId: \"\",\n              username: \"\",\n              password: \"\",\n              firstName: \"\",\n              fatherName: \"\",\n              role: \"Employee\",\n              jobTitle: \"\",\n              email: \"\",\n              phoneNumber: \"\",\n              department: \"\",\n              dateOfEmployment: \"\",\n              address: \"\",\n              supervisor: null,\n              sex: \"\",\n              dateOfBirth: \"\",\n              createdAt: \"\",\n              updatedAt: \"\",\n              grade: \"\",\n            });\n            setCurrentView(\"edit\");\n            setSaveSuccess(false);\n            setError(null);\n          }}\n        >\n          + Add New Employee\n        </button>\n      </div>\n\n      {saveSuccess && <p style={{ color: \"green\" }}>Operation completed successfully!</p>}\n      {isLoading && <p style={messageStyle}>Loading employees...</p>}\n      {error && <p style={errorStyle}>{error}</p>}\n\n      {employees.length > 0\n        ? (\n          <table style={tableStyle}>\n            <thead>\n              <tr>\n                <th style={thStyle}>ID</th>\n                <th style={thStyle}>Name</th>\n                <th style={thStyle}>Username</th>\n                <th style={thStyle}>Role</th>\n                <th style={thStyle}>Department</th>\n                <th style={thStyle}>Grade</th>\n                <th style={thStyle}>Experience</th>\n                <th style={thStyle}>Status</th>\n                <th style={thStyle}>Actions</th>\n              </tr>\n            </thead>\n            <tbody>\n              {employees.map((employee, index) => (\n                <tr\n                  key={employee.employeeId}\n                  style={index % 2 === 0 ? tableRowEvenStyle : tableRowOddStyle}\n                >\n                  <td style={tdStyle}>{employee.employeeId}</td>\n                  <td style={tdStyle}>\n                    {employee.firstName} {employee.fatherName}\n                  </td>\n                  <td style={tdStyle}>{employee.username}</td>\n                  <td style={tdStyle}>{employee.role}</td>\n                  <td style={tdStyle}>{employee.department}</td>\n                  <td style={tdStyle}>{employee.grade || \"-\"}</td>\n                  <td style={tdStyle}>{calculateExperience(employee.dateOfEmployment)}</td>\n                  <td style={tdStyle}>{employee.status}</td>\n                  <td style={tdStyle}>\n                    <button\n                      style={canEditEmployee(employee) ? editButtonStyle : disabledButtonStyle}\n                      onClick={() => canEditEmployee(employee) && handleEditEmployee(employee)}\n                      disabled={!canEditEmployee(employee)}\n                    >\n                      Edit\n                    </button>\n                    <button\n                      style={canEditEmployee(employee) ? deleteButtonStyle : disabledButtonStyle}\n                      onClick={() => canEditEmployee(employee) && handleDeleteEmployee(employee.employeeId)}\n                      disabled={!canEditEmployee(employee)}\n                    >\n                      Delete\n                    </button>\n                  </td>\n                </tr>\n              ))}\n            </tbody>\n          </table>\n        )\n        : (\n          !isLoading && <p style={messageStyle}>No employees found</p>\n        )}\n    </div>\n  );\n\n  return (\n    <div style={containerStyle}>\n      {currentView === \"list\" ? renderList() : renderForm()}\n    </div>\n  );\n};\n\nexport default SettingTab;",[],[160,241],{"_106":250,"_96":251,"_161":252,"_163":162,"_164":144,"_165":253,"_167":120,"_108":254,"_102":255,"_169":181,"_171":256,"_172":22,"_173":-5,"_174":257,"_100":258},"0d64c2a8-42ee-11f0-94a9-76b3cceeab13","taskDashboard.tsx","5d7369bc-42cf-11f0-a755-76b3cceeab13",216,["D",1749225064270],7,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useMemo, useState } from \"https://esm.sh/react@18.2.0\";\n\n// Updated status colors to match your database\nconst STATUS_COLORS = {\n  pending: \"#FFA500\", // orange\n  in_progress: \"#1E90FF\", // blue\n  completion_requested: \"#FFD700\", // gold/yellow\n  completed: \"#1E590C\", // green\n  cancelled: \"#DD1407\", // red\n};\n\nconst PRIORITY_OPTIONS = [\"low\", \"medium\", \"high\"];\nconst STATUS_OPTIONS = [\"pending\", \"in_progress\", \"completion_requested\", \"completed\", \"cancelled\"];\n\ninterface Employee {\n  employee_id: number;\n  user_name: string;\n  first_name: string;\n  last_name: string;\n  role: string;\n}\n\ninterface Task {\n  id: number;\n  title: string;\n  description: string | null;\n  assignee_id: number;\n  manager_id: number;\n  created_at: string;\n  updated_at: string;\n  due_date: string;\n  completed_at: string | null;\n  status: string;\n  priority: string;\n  final_remark: string | null;\n  incompletion_reason: string | null;\n  attachments: string | null;\n}\n\ninterface NewTaskFormData {\n  title: string;\n  description: string;\n  assignee_id: number | \"\";\n  manager_id: number | \"\";\n  due_date: string;\n  priority: string;\n}\n\ninterface EditTaskFormData {\n  id: number;\n  title: string;\n  description: string;\n  assignee_id: number | \"\";\n  manager_id: number | \"\";\n  due_date: string;\n  status: string;\n  priority: string;\n  final_remark: string;\n  incompletion_reason: string;\n}\n\ninterface CurrentUser {\n  employee_id: number;\n  role: \"Employee\" | \"Manager\" | \"Director\" | \"CEO\" | \"Admin\";\n  user_name: string;\n}\n\nconst TaskDashboard = ({ currentUser }: { currentUser: CurrentUser | null }) => {\n  const [tasks, setTasks] = useState<Task[]>([]);\n  const [allTasks, setAllTasks] = useState<Task[]>([]);\n  const [isLoadingTasks, setIsLoadingTasks] = useState(false);\n  const [selectedTask, setSelectedTask] = useState<Task | null>(null);\n  const [employees, setEmployees] = useState<Employee[]>([]);\n  const [isLoadingEmployees, setIsLoadingEmployees] = useState(false);\n  const [employeeError, setEmployeeError] = useState<string | null>(null);\n  const [statusFilter, setStatusFilter] = useState<string>(\"all\");\n  const [assigneeFilter, setAssigneeFilter] = useState<number | \"\">(\"\");\n  const [showCreateForm, setShowCreateForm] = useState(false);\n  const [newTaskData, setNewTaskData] = useState<NewTaskFormData>({\n    title: \"\",\n    description: \"\",\n    assignee_id: \"\",\n    manager_id: \"\",\n    due_date: \"\",\n    priority: \"medium\",\n  });\n  const [isCreating, setIsCreating] = useState(false);\n  const [createError, setCreateError] = useState<string | null>(null);\n  const [createSuccess, setCreateSuccess] = useState(false);\n  const [editingTask, setEditingTask] = useState<Task | null>(null);\n  const [editFormData, setEditFormData] = useState<EditTaskFormData | null>(null);\n  const [isUpdating, setIsUpdating] = useState(false);\n  const [updateError, setUpdateError] = useState<string | null>(null);\n  const [updateSuccess, setUpdateSuccess] = useState(false);\n  const [isDeleting, setIsDeleting] = useState<number | null>(null);\n  const [isChangingStatus, setIsChangingStatus] = useState<number | null>(null);\n\n  const fetchEmployees = async () => {\n    setIsLoadingEmployees(true);\n    setEmployeeError(null);\n    try {\n      const response = await fetch(\"/fetch-employees\");\n      if (!response.ok) throw new Error(\"Failed to fetch employees\");\n      const data = await response.json();\n\n      if (data.success && Array.isArray(data.employees)) {\n        setEmployees(data.employees);\n      } else {\n        throw new Error(\"Invalid employees data format\");\n      }\n    } catch (err: any) {\n      console.error(\"Error fetching employees:\", err);\n      setEmployeeError(err.message || \"Failed to load employees\");\n    } finally {\n      setIsLoadingEmployees(false);\n    }\n  };\n\n  const fetchTasks = async () => {\n    if (!currentUser) return;\n\n    setIsLoadingTasks(true);\n    try {\n      const queryParams = new URLSearchParams();\n      if (statusFilter !== \"all\") queryParams.append(\"status\", statusFilter);\n\n      queryParams.append(\"user_id\", String(currentUser.employee_id));\n      queryParams.append(\"user_role\", currentUser.role);\n\n      if (\n        assigneeFilter !== \"\" && (\n          currentUser.role === \"Admin\"\n          || currentUser.role === \"CEO\"\n          || currentUser.role === \"Director\"\n          || currentUser.role === \"Manager\"\n        )\n      ) {\n        queryParams.append(\"assignee_id\", String(assigneeFilter));\n      }\n\n      const response = await fetch(`/tasks?${queryParams.toString()}`);\n      if (!response.ok) throw new Error(\"Failed to fetch tasks\");\n\n      const data = await response.json();\n\n      if (data.success && Array.isArray(data.tasks)) {\n        setAllTasks(data.tasks);\n        setTasks(data.tasks);\n      } else {\n        throw new Error(\"Invalid tasks data format\");\n      }\n    } catch (err) {\n      console.error(\"Error fetching tasks:\", err);\n      setTasks([]);\n      setAllTasks([]);\n    } finally {\n      setIsLoadingTasks(false);\n    }\n  };\n\n  useEffect(() => {\n    if (currentUser) {\n      fetchTasks();\n    }\n  }, [currentUser, statusFilter, assigneeFilter]);\n\n  useEffect(() => {\n    fetchEmployees();\n  }, []);\n\n  const employeeMap = useMemo(() => {\n    const map = new Map<number, Employee>();\n    employees.forEach(emp => map.set(emp.employee_id, emp));\n    return map;\n  }, [employees]);\n\n  const getEmployeeName = (employeeId: number | null): string => {\n    if (employeeId === null) return \"N/A\";\n    const employee = employeeMap.get(employeeId);\n    if (!employee) return `ID: ${employeeId}`;\n    return `${employee.first_name} ${employee.last_name}`.trim() || employee.user_name;\n  };\n\n  const handleCreateTask = async (e: React.FormEvent) => {\n    e.preventDefault();\n\n    if (\n      !newTaskData.title || newTaskData.assignee_id === \"\" || newTaskData.manager_id === \"\" || !newTaskData.due_date\n    ) {\n      setCreateError(\"Please fill in all required fields\");\n      return;\n    }\n\n    setIsCreating(true);\n    setCreateError(null);\n\n    try {\n      const response = await fetch(\"/submit-task\", {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify({\n          ...newTaskData,\n          assignee_id: Number(newTaskData.assignee_id),\n          manager_id: Number(newTaskData.manager_id),\n          status: \"pending\",\n        }),\n      });\n\n      const result = await response.json();\n\n      if (!response.ok || !result.success) {\n        throw new Error(result.message || \"Failed to create task\");\n      }\n\n      setCreateSuccess(true);\n      setNewTaskData({\n        title: \"\",\n        description: \"\",\n        assignee_id: \"\",\n        manager_id: currentUser?.employee_id || \"\",\n        due_date: \"\",\n        priority: \"medium\",\n      });\n      setShowCreateForm(false);\n      fetchTasks();\n    } catch (err: any) {\n      console.error(\"Error creating task:\", err);\n      setCreateError(err.message || \"Failed to create task\");\n    } finally {\n      setIsCreating(false);\n    }\n  };\n\n  const handleEditTask = (task: Task) => {\n    setEditingTask(task);\n    setEditFormData({\n      id: task.id,\n      title: task.title,\n      description: task.description || \"\",\n      assignee_id: task.assignee_id,\n      manager_id: task.manager_id,\n      due_date: task.due_date,\n      status: task.status,\n      priority: task.priority,\n      final_remark: task.final_remark || \"\",\n      incompletion_reason: task.incompletion_reason || \"\",\n    });\n  };\n\n  const handleUpdateTask = async (e: React.FormEvent) => {\n    e.preventDefault();\n    if (!editFormData) return;\n\n    if (\n      !editFormData.title || editFormData.assignee_id === \"\" || editFormData.manager_id === \"\" || !editFormData.due_date\n    ) {\n      setUpdateError(\"Please fill in all required fields\");\n      return;\n    }\n\n    setIsUpdating(true);\n    setUpdateError(null);\n\n    try {\n      const response = await fetch(`/tasks/${editFormData.id}`, {\n        method: \"PATCH\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify({\n          ...editFormData,\n          assignee_id: Number(editFormData.assignee_id),\n          manager_id: Number(editFormData.manager_id),\n          userId: currentUser?.employee_id,\n          userRole: currentUser?.role,\n        }),\n      });\n\n      const result = await response.json();\n\n      if (!response.ok || !result.success) {\n        throw new Error(result.message || \"Failed to update task\");\n      }\n\n      setUpdateSuccess(true);\n      setEditingTask(null);\n      fetchTasks();\n    } catch (err: any) {\n      console.error(\"Error updating task:\", err);\n      setUpdateError(err.message || \"Failed to update task\");\n    } finally {\n      setIsUpdating(false);\n    }\n  };\n\n  const handleDeleteTask = async (taskId: number) => {\n    if (!window.confirm(\"Are you sure you want to delete this task?\")) return;\n\n    setIsDeleting(taskId);\n    try {\n      const response = await fetch(`/tasks/${taskId}`, {\n        method: \"DELETE\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify({\n          userId: currentUser?.employee_id,\n          userRole: currentUser?.role,\n        }),\n      });\n\n      const result = await response.json();\n\n      if (!response.ok || !result.success) {\n        throw new Error(result.message || \"Failed to delete task\");\n      }\n\n      fetchTasks();\n      if (selectedTask?.id === taskId) setSelectedTask(null);\n      if (editingTask?.id === taskId) {\n        setEditingTask(null);\n        setEditFormData(null);\n      }\n    } catch (err: any) {\n      console.error(\"Error deleting task:\", err);\n      alert(err.message || \"Failed to delete task\");\n    } finally {\n      setIsDeleting(null);\n    }\n  };\n\n  const handleChangeStatus = async (task: Task, newStatus: string) => {\n    if (!window.confirm(`Are you sure you want to change status to ${newStatus.replace(\"_\", \" \")}?`)) return;\n\n    setIsChangingStatus(task.id);\n    try {\n      const response = await fetch(`/tasks/${task.id}`, {\n        method: \"PATCH\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify({\n          status: newStatus,\n          userId: currentUser?.employee_id,\n          userRole: currentUser?.role,\n        }),\n      });\n\n      const result = await response.json();\n\n      if (!response.ok || !result.success) {\n        throw new Error(result.message || \"Failed to change status\");\n      }\n\n      fetchTasks();\n      if (selectedTask?.id === task.id) setSelectedTask(result.task);\n    } catch (err: any) {\n      console.error(\"Error changing status:\", err);\n      alert(err.message || \"Failed to change status\");\n    } finally {\n      setIsChangingStatus(null);\n    }\n  };\n\n  const isAdmin = [\"Admin\", \"CEO\", \"Director\", \"Manager\"].includes(currentUser?.role || \"\");\n\n  return (\n    <div style={{ padding: \"20px\", maxWidth: \"1200px\", margin: \"0 auto\" }}>\n      <h1 style={{ color: \"#1a7c38\" }}>Task Dashboard</h1>\n\n      {/* Create Task Button */}\n      {isAdmin && !showCreateForm && !editingTask && (\n        <button\n          onClick={() => setShowCreateForm(true)}\n          disabled={isLoadingEmployees}\n          style={{\n            backgroundColor: \"#1a7c38\",\n            color: \"white\",\n            padding: \"10px 15px\",\n            border: \"none\",\n            borderRadius: \"4px\",\n            cursor: \"pointer\",\n            marginBottom: \"20px\",\n          }}\n        >\n          Create New Task\n        </button>\n      )}\n\n      {/* Create Task Form */}\n      {showCreateForm && (\n        <div\n          style={{\n            backgroundColor: \"#f9f9f9\",\n            padding: \"20px\",\n            borderRadius: \"8px\",\n            marginBottom: \"20px\",\n          }}\n        >\n          <h2>Create New Task</h2>\n          <form onSubmit={handleCreateTask}>\n            <div style={{ marginBottom: \"15px\" }}>\n              <label>Title*</label>\n              <input\n                type=\"text\"\n                name=\"title\"\n                value={newTaskData.title}\n                onChange={(e) => setNewTaskData({ ...newTaskData, title: e.target.value })}\n                required\n                style={{ width: \"100%\", padding: \"8px\" }}\n              />\n            </div>\n\n            <div style={{ marginBottom: \"15px\" }}>\n              <label>Description</label>\n              <textarea\n                name=\"description\"\n                value={newTaskData.description}\n                onChange={(e) => setNewTaskData({ ...newTaskData, description: e.target.value })}\n                style={{ width: \"100%\", padding: \"8px\", minHeight: \"100px\" }}\n              />\n            </div>\n\n            <div style={{ display: \"grid\", gridTemplateColumns: \"1fr 1fr\", gap: \"20px\", marginBottom: \"15px\" }}>\n              <div>\n                <label>Assignee*</label>\n                <select\n                  name=\"assignee_id\"\n                  value={newTaskData.assignee_id}\n                  onChange={(e) =>\n                    setNewTaskData({\n                      ...newTaskData,\n                      assignee_id: e.target.value === \"\" ? \"\" : Number(e.target.value),\n                    })}\n                  required\n                  disabled={isLoadingEmployees}\n                  style={{ width: \"100%\", padding: \"8px\" }}\n                >\n                  <option value=\"\">Select Assignee</option>\n                  {employees.map(emp => (\n                    <option key={emp.employee_id} value={emp.employee_id}>\n                      {getEmployeeName(emp.employee_id)}\n                    </option>\n                  ))}\n                </select>\n              </div>\n\n              <div>\n                <label>Manager*</label>\n                <select\n                  name=\"manager_id\"\n                  value={newTaskData.manager_id}\n                  onChange={(e) =>\n                    setNewTaskData({ ...newTaskData, manager_id: e.target.value === \"\" ? \"\" : Number(e.target.value) })}\n                  required\n                  disabled={isLoadingEmployees}\n                  style={{ width: \"100%\", padding: \"8px\" }}\n                >\n                  <option value=\"\">Select Manager</option>\n                  {employees.map(emp => (\n                    <option key={emp.employee_id} value={emp.employee_id}>\n                      {getEmployeeName(emp.employee_id)}\n                    </option>\n                  ))}\n                </select>\n              </div>\n            </div>\n\n            <div style={{ marginBottom: \"15px\" }}>\n              <label>Due Date*</label>\n              <input\n                type=\"date\"\n                name=\"due_date\"\n                value={newTaskData.due_date}\n                onChange={(e) => setNewTaskData({ ...newTaskData, due_date: e.target.value })}\n                required\n                style={{ width: \"100%\", padding: \"8px\" }}\n              />\n            </div>\n\n            <div style={{ marginBottom: \"15px\" }}>\n              <label>Priority</label>\n              <select\n                name=\"priority\"\n                value={newTaskData.priority}\n                onChange={(e) => setNewTaskData({ ...newTaskData, priority: e.target.value })}\n                style={{ width: \"100%\", padding: \"8px\" }}\n              >\n                {PRIORITY_OPTIONS.map(opt => (\n                  <option key={opt} value={opt}>{opt.charAt(0).toUpperCase() + opt.slice(1)}</option>\n                ))}\n              </select>\n            </div>\n\n            {createError && <div style={{ color: \"red\", marginBottom: \"15px\" }}>{createError}</div>}\n            {createSuccess && <div style={{ color: \"green\", marginBottom: \"15px\" }}>Task created successfully!</div>}\n\n            <div style={{ display: \"flex\", gap: \"10px\" }}>\n              <button\n                type=\"submit\"\n                disabled={isCreating}\n                style={{\n                  backgroundColor: \"#1a7c38\",\n                  color: \"white\",\n                  padding: \"10px 15px\",\n                  border: \"none\",\n                  borderRadius: \"4px\",\n                  cursor: \"pointer\",\n                }}\n              >\n                {isCreating ? \"Creating...\" : \"Create Task\"}\n              </button>\n              <button\n                type=\"button\"\n                onClick={() => setShowCreateForm(false)}\n                style={{\n                  backgroundColor: \"#ccc\",\n                  color: \"#333\",\n                  padding: \"10px 15px\",\n                  border: \"none\",\n                  borderRadius: \"4px\",\n                  cursor: \"pointer\",\n                }}\n              >\n                Cancel\n              </button>\n            </div>\n          </form>\n        </div>\n      )}\n\n      {/* Edit Task Form */}\n      {editingTask && editFormData && (\n        <div\n          style={{\n            backgroundColor: \"#f9f9f9\",\n            padding: \"20px\",\n            borderRadius: \"8px\",\n            marginBottom: \"20px\",\n          }}\n        >\n          <h2>Edit Task</h2>\n          <form onSubmit={handleUpdateTask}>\n            <div style={{ marginBottom: \"15px\" }}>\n              <label>Title*</label>\n              <input\n                type=\"text\"\n                name=\"title\"\n                value={editFormData.title}\n                onChange={(e) => setEditFormData({ ...editFormData, title: e.target.value })}\n                required\n                style={{ width: \"100%\", padding: \"8px\" }}\n              />\n            </div>\n\n            <div style={{ marginBottom: \"15px\" }}>\n              <label>Description</label>\n              <textarea\n                name=\"description\"\n                value={editFormData.description}\n                onChange={(e) => setEditFormData({ ...editFormData, description: e.target.value })}\n                style={{ width: \"100%\", padding: \"8px\", minHeight: \"100px\" }}\n              />\n            </div>\n\n            <div style={{ display: \"grid\", gridTemplateColumns: \"1fr 1fr\", gap: \"20px\", marginBottom: \"15px\" }}>\n              <div>\n                <label>Assignee*</label>\n                <select\n                  name=\"assignee_id\"\n                  value={editFormData.assignee_id}\n                  onChange={(e) =>\n                    setEditFormData({\n                      ...editFormData,\n                      assignee_id: e.target.value === \"\" ? \"\" : Number(e.target.value),\n                    })}\n                  required\n                  disabled={isLoadingEmployees}\n                  style={{ width: \"100%\", padding: \"8px\" }}\n                >\n                  <option value=\"\">Select Assignee</option>\n                  {employees.map(emp => (\n                    <option key={emp.employee_id} value={emp.employee_id}>\n                      {getEmployeeName(emp.employee_id)}\n                    </option>\n                  ))}\n                </select>\n              </div>\n\n              <div>\n                <label>Manager*</label>\n                <select\n                  name=\"manager_id\"\n                  value={editFormData.manager_id}\n                  onChange={(e) =>\n                    setEditFormData({\n                      ...editFormData,\n                      manager_id: e.target.value === \"\" ? \"\" : Number(e.target.value),\n                    })}\n                  required\n                  disabled={isLoadingEmployees}\n                  style={{ width: \"100%\", padding: \"8px\" }}\n                >\n                  <option value=\"\">Select Manager</option>\n                  {employees.map(emp => (\n                    <option key={emp.employee_id} value={emp.employee_id}>\n                      {getEmployeeName(emp.employee_id)}\n                    </option>\n                  ))}\n                </select>\n              </div>\n            </div>\n\n            <div style={{ marginBottom: \"15px\" }}>\n              <label>Due Date*</label>\n              <input\n                type=\"date\"\n                name=\"due_date\"\n                value={editFormData.due_date}\n                onChange={(e) => setEditFormData({ ...editFormData, due_date: e.target.value })}\n                required\n                style={{ width: \"100%\", padding: \"8px\" }}\n              />\n            </div>\n\n            <div style={{ marginBottom: \"15px\" }}>\n              <label>Status*</label>\n              <select\n                name=\"status\"\n                value={editFormData.status}\n                onChange={(e) => setEditFormData({ ...editFormData, status: e.target.value })}\n                required\n                style={{ width: \"100%\", padding: \"8px\" }}\n              >\n                {STATUS_OPTIONS.map(opt => (\n                  <option key={opt} value={opt}>\n                    {opt.split(\"_\").map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(\" \")}\n                  </option>\n                ))}\n              </select>\n            </div>\n\n            <div style={{ marginBottom: \"15px\" }}>\n              <label>Priority</label>\n              <select\n                name=\"priority\"\n                value={editFormData.priority}\n                onChange={(e) => setEditFormData({ ...editFormData, priority: e.target.value })}\n                style={{ width: \"100%\", padding: \"8px\" }}\n              >\n                {PRIORITY_OPTIONS.map(opt => (\n                  <option key={opt} value={opt}>{opt.charAt(0).toUpperCase() + opt.slice(1)}</option>\n                ))}\n              </select>\n            </div>\n\n            {(editFormData.status === \"completed\" || editFormData.status === \"cancelled\") && (\n              <div style={{ marginBottom: \"15px\" }}>\n                <label>Final Remark</label>\n                <textarea\n                  name=\"final_remark\"\n                  value={editFormData.final_remark}\n                  onChange={(e) =>\n                    setEditFormData({ ...editFormData, final_remark: e.target.value })}\n                  style={{ width: \"100%\", padding: \"8px\", minHeight: \"60px\" }}\n                />\n              </div>\n            )}\n\n            {editFormData.status === \"cancelled\" && (\n              <div style={{ marginBottom: \"15px\" }}>\n                <label>Incompletion Reason</label>\n                <textarea\n                  name=\"incompletion_reason\"\n                  value={editFormData.incompletion_reason}\n                  onChange={(e) => setEditFormData({ ...editFormData, incompletion_reason: e.target.value })}\n                  style={{ width: \"100%\", padding: \"8px\", minHeight: \"60px\" }}\n                />\n              </div>\n            )}\n\n            {updateError && <div style={{ color: \"red\", marginBottom: \"15px\" }}>{updateError}</div>}\n            {updateSuccess && <div style={{ color: \"green\", marginBottom: \"15px\" }}>Task updated successfully!</div>}\n\n            <div style={{ display: \"flex\", gap: \"10px\" }}>\n              <button\n                type=\"submit\"\n                disabled={isUpdating}\n                style={{\n                  backgroundColor: \"#1a7c38\",\n                  color: \"white\",\n                  padding: \"10px 15px\",\n                  border: \"none\",\n                  borderRadius: \"4px\",\n                  cursor: \"pointer\",\n                }}\n              >\n                {isUpdating ? \"Updating...\" : \"Update Task\"}\n              </button>\n              <button\n                type=\"button\"\n                onClick={() => {\n                  setEditingTask(null);\n                  setEditFormData(null);\n                }}\n                style={{\n                  backgroundColor: \"#ccc\",\n                  color: \"#333\",\n                  padding: \"10px 15px\",\n                  border: \"none\",\n                  borderRadius: \"4px\",\n                  cursor: \"pointer\",\n                }}\n              >\n                Cancel\n              </button>\n            </div>\n          </form>\n        </div>\n      )}\n\n      {/* Filters */}\n      <div style={{ marginBottom: \"20px\", display: \"flex\", gap: \"15px\" }}>\n        <div>\n          <label>Status Filter:</label>\n          <select\n            value={statusFilter}\n            onChange={(e) => setStatusFilter(e.target.value)}\n            style={{ padding: \"8px\", marginLeft: \"5px\" }}\n          >\n            <option value=\"all\">All Statuses</option>\n            {STATUS_OPTIONS.map(opt => (\n              <option key={opt} value={opt}>\n                {opt.split(\"_\").map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(\" \")}\n              </option>\n            ))}\n          </select>\n        </div>\n\n        {isAdmin && (\n          <div>\n            <label>Assignee Filter:</label>\n            <select\n              value={assigneeFilter}\n              onChange={(e) => setAssigneeFilter(e.target.value === \"\" ? \"\" : Number(e.target.value))}\n              style={{ padding: \"8px\", marginLeft: \"5px\" }}\n              disabled={isLoadingEmployees}\n            >\n              <option value=\"\">All Assignees</option>\n              {employees.map(emp => (\n                <option key={emp.employee_id} value={emp.employee_id}>\n                  {getEmployeeName(emp.employee_id)}\n                </option>\n              ))}\n            </select>\n          </div>\n        )}\n      </div>\n\n      {/* Task List */}\n      {isLoadingTasks\n        ? <p>Loading tasks...</p>\n        : tasks.length === 0\n        ? <p>No tasks found</p>\n        : (\n          <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(auto-fill, minmax(300px, 1fr))\", gap: \"20px\" }}>\n            {tasks.map(task => (\n              <div\n                key={task.id}\n                style={{\n                  backgroundColor: \"white\",\n                  padding: \"15px\",\n                  borderRadius: \"8px\",\n                  boxShadow: \"0 2px 5px rgba(0,0,0,0.1)\",\n                  borderLeft: `5px solid ${STATUS_COLORS[task.status] || \"#ccc\"}`,\n                }}\n              >\n                <h3 style={{ marginTop: 0 }}>{task.title}</h3>\n                <p>\n                  <strong>Assignee:</strong> {getEmployeeName(task.assignee_id)}\n                </p>\n                <p>\n                  <strong>Manager:</strong> {getEmployeeName(task.manager_id)}\n                </p>\n                <p>\n                  <strong>Due:</strong> {task.due_date}\n                </p>\n                <p>\n                  <strong>Status:</strong>\n                  <span\n                    style={{\n                      color: STATUS_COLORS[task.status] || \"#333\",\n                      fontWeight: \"bold\",\n                      marginLeft: \"5px\",\n                    }}\n                  >\n                    {task.status.split(\"_\").map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(\" \")}\n                  </span>\n                </p>\n                <p>\n                  <strong>Priority:</strong>\n                  <span\n                    style={{\n                      color: task.priority === \"high\"\n                        ? \"red\"\n                        : (task.priority === \"medium\" ? \"#FFA500\" : \"#333\"),\n                      fontWeight: \"bold\",\n                      marginLeft: \"5px\",\n                    }}\n                  >\n                    {task.priority.charAt(0).toUpperCase() + task.priority.slice(1)}\n                  </span>\n                </p>\n\n                <div style={{ marginTop: \"15px\", display: \"flex\", flexWrap: \"wrap\", gap: \"8px\" }}>\n                  <button\n                    onClick={() => setSelectedTask(task)}\n                    style={{\n                      backgroundColor: \"#1a7c38\",\n                      color: \"white\",\n                      padding: \"5px 10px\",\n                      border: \"none\",\n                      borderRadius: \"4px\",\n                      cursor: \"pointer\",\n                    }}\n                  >\n                    View Details\n                  </button>\n\n                  {isAdmin && (\n                    <>\n                      <button\n                        onClick={() => handleEditTask(task)}\n                        style={{\n                          backgroundColor: \"#1E90FF\",\n                          color: \"white\",\n                          padding: \"5px 10px\",\n                          border: \"none\",\n                          borderRadius: \"4px\",\n                          cursor: \"pointer\",\n                        }}\n                      >\n                        Edit\n                      </button>\n\n                      <button\n                        onClick={() => handleDeleteTask(task.id)}\n                        disabled={isDeleting === task.id}\n                        style={{\n                          backgroundColor: \"#DD1407\",\n                          color: \"white\",\n                          padding: \"5px 10px\",\n                          border: \"none\",\n                          borderRadius: \"4px\",\n                          cursor: \"pointer\",\n                        }}\n                      >\n                        {isDeleting === task.id ? \"Deleting...\" : \"Delete\"}\n                      </button>\n                    </>\n                  )}\n\n                  {/* Status Change Buttons */}\n                  {task.status === \"pending\" && (\n                    <button\n                      onClick={() => handleChangeStatus(task, \"in_progress\")}\n                      disabled={isChangingStatus === task.id}\n                      style={{\n                        backgroundColor: STATUS_COLORS.in_progress,\n                        color: \"white\",\n                        padding: \"5px 10px\",\n                        border: \"none\",\n                        borderRadius: \"4px\",\n                        cursor: \"pointer\",\n                      }}\n                    >\n                      {isChangingStatus === task.id ? \"Updating...\" : \"Start Progress\"}\n                    </button>\n                  )}\n\n                  {task.status === \"in_progress\" && currentUser?.employee_id === task.assignee_id && (\n                    <button\n                      onClick={() => handleChangeStatus(task, \"completion_requested\")}\n                      disabled={isChangingStatus === task.id}\n                      style={{\n                        backgroundColor: STATUS_COLORS.completion_requested,\n                        color: \"black\",\n                        padding: \"5px 10px\",\n                        border: \"none\",\n                        borderRadius: \"4px\",\n                        cursor: \"pointer\",\n                      }}\n                    >\n                      {isChangingStatus === task.id ? \"Updating...\" : \"Request Completion\"}\n                    </button>\n                  )}\n\n                  {task.status === \"completion_requested\" && (\n                    <button\n                      onClick={() => handleChangeStatus(task, \"completed\")}\n                      disabled={isChangingStatus === task.id}\n                      style={{\n                        backgroundColor: STATUS_COLORS.completed,\n                        color: \"white\",\n                        padding: \"5px 10px\",\n                        border: \"none\",\n                        borderRadius: \"4px\",\n                        cursor: \"pointer\",\n                      }}\n                    >\n                      {isChangingStatus === task.id ? \"Updating...\" : \"Complete\"}\n                    </button>\n                  )}\n\n                  {(task.status === \"pending\" || task.status === \"in_progress\"\n                    || task.status === \"completion_requested\") && (\n                    <button\n                      onClick={() => handleChangeStatus(task, \"cancelled\")}\n                      disabled={isChangingStatus === task.id}\n                      style={{\n                        backgroundColor: STATUS_COLORS.cancelled,\n                        color: \"white\",\n                        padding: \"5px 10px\",\n                        border: \"none\",\n                        borderRadius: \"4px\",\n                        cursor: \"pointer\",\n                      }}\n                    >\n                      {isChangingStatus === task.id ? \"Updating...\" : \"Cancel\"}\n                    </button>\n                  )}\n\n                  {(task.status === \"completed\" || task.status === \"cancelled\") && (\n                    <button\n                      onClick={() => handleChangeStatus(task, \"pending\")}\n                      disabled={isChangingStatus === task.id}\n                      style={{\n                        backgroundColor: STATUS_COLORS.pending,\n                        color: \"white\",\n                        padding: \"5px 10px\",\n                        border: \"none\",\n                        borderRadius: \"4px\",\n                        cursor: \"pointer\",\n                      }}\n                    >\n                      {isChangingStatus === task.id ? \"Updating...\" : \"Reopen\"}\n                    </button>\n                  )}\n                </div>\n              </div>\n            ))}\n          </div>\n        )}\n\n      {/* Task Details Modal */}\n      {selectedTask && (\n        <div\n          style={{\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,\n          }}\n          onClick={() => setSelectedTask(null)}\n        >\n          <div\n            style={{\n              backgroundColor: \"white\",\n              padding: \"20px\",\n              borderRadius: \"8px\",\n              maxWidth: \"600px\",\n              width: \"90%\",\n              maxHeight: \"90vh\",\n              overflowY: \"auto\",\n            }}\n            onClick={e => e.stopPropagation()}\n          >\n            <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"center\" }}>\n              <h2 style={{ marginTop: 0 }}>{selectedTask.title}</h2>\n              <button\n                onClick={() => setSelectedTask(null)}\n                style={{\n                  backgroundColor: \"transparent\",\n                  border: \"none\",\n                  fontSize: \"1.5em\",\n                  cursor: \"pointer\",\n                }}\n              >\n                ×\n              </button>\n            </div>\n\n            <p>\n              <strong>Description:</strong> {selectedTask.description || \"N/A\"}\n            </p>\n            <p>\n              <strong>Status:</strong>\n              <span\n                style={{\n                  color: STATUS_COLORS[selectedTask.status] || \"#333\",\n                  fontWeight: \"bold\",\n                  marginLeft: \"5px\",\n                }}\n              >\n                {selectedTask.status.split(\"_\").map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(\" \")}\n              </span>\n            </p>\n            <p>\n              <strong>Priority:</strong>\n              <span\n                style={{\n                  color: selectedTask.priority === \"high\"\n                    ? \"red\"\n                    : (selectedTask.priority === \"medium\" ? \"#FFA500\" : \"#333\"),\n                  fontWeight: \"bold\",\n                  marginLeft: \"5px\",\n                }}\n              >\n                {selectedTask.priority.charAt(0).toUpperCase() + selectedTask.priority.slice(1)}\n              </span>\n            </p>\n            <p>\n              <strong>Assignee:</strong> {getEmployeeName(selectedTask.assignee_id)}\n            </p>\n            <p>\n              <strong>Manager:</strong> {getEmployeeName(selectedTask.manager_id)}\n            </p>\n            <p>\n              <strong>Due Date:</strong> {selectedTask.due_date}\n            </p>\n            <p>\n              <strong>Created At:</strong> {selectedTask.created_at}\n            </p>\n            <p>\n              <strong>Updated At:</strong> {selectedTask.updated_at}\n            </p>\n            {selectedTask.completed_at && (\n              <p>\n                <strong>Completed At:</strong> {selectedTask.completed_at}\n              </p>\n            )}\n            {selectedTask.final_remark && (\n              <p>\n                <strong>Final Remark:</strong> {selectedTask.final_remark}\n              </p>\n            )}\n            {selectedTask.incompletion_reason && (\n              <p>\n                <strong>Incompletion Reason:</strong> {selectedTask.incompletion_reason}\n              </p>\n            )}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default TaskDashboard;",[],[160,251],{"_106":260,"_96":261,"_161":262,"_163":162,"_164":144,"_165":166,"_167":120,"_108":263,"_102":32,"_169":181,"_171":264,"_172":22,"_173":-5,"_174":265,"_100":266},"5d7381d6-42cf-11f0-a755-76b3cceeab13","weeklyReport.tsx","5d73824e-42cf-11f0-a755-76b3cceeab13",["D",1749211884180],"/** @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  darkGreen: \"#1E590C\",\n  lightGreen: \"#a8e0a3\",\n  gray: \"#f8f8f8\",\n  red: \"#dc3545\",\n  orange: \"#FFA500\", // Added for draft content\n};\n\n// Define styles based on the MediaMonitoringTab reference\nconst styles: { [key: string]: React.CSSProperties } = {\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.darkGreen,\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.darkGreen}`,\n    backgroundColor: \"transparent\", // Default\n    color: BRAND_COLORS.darkGreen, // Default\n    transition: \"background-color 0.3s ease, color 0.3s ease\",\n  },\n  tabButtonActive: {\n    backgroundColor: BRAND_COLORS.darkGreen,\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.darkGreen}`, // Add outer border\n  },\n  tableHeader: {\n    backgroundColor: BRAND_COLORS.darkGreen,\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.darkGreen}`, // 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.darkGreen}`, // 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.darkGreen,\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.darkGreen,\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.darkGreen,\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.darkGreen}`, // 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.darkGreen, // Changed to darkGreen for consistency with other links/buttons\n    textDecoration: \"underline\",\n    cursor: \"pointer\",\n    padding: 0,\n    fontFamily: \"inherit\",\n    fontSize: \"inherit\",\n    textAlign: \"left\",\n  },\n  daysInputContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: \"10px\",\n    marginBottom: \"15px\",\n  },\n  daysInput: {\n    padding: \"8px\",\n    borderRadius: \"8px\",\n    border: `1px solid #ccc`,\n    fontSize: \"14px\",\n    width: \"80px\",\n  },\n  applyButton: {\n    padding: \"8px 15px\",\n    borderRadius: \"5px\",\n    backgroundColor: BRAND_COLORS.darkGreen,\n    color: \"white\",\n    cursor: \"pointer\",\n    border: \"none\",\n    transition: \"background-color 0.3s ease\",\n  },\n};\n\nconst modalStyles = {\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  alignItems: \"center\",\n  justifyContent: \"center\",\n  zIndex: 1000,\n};\n\nconst modalContentStyles = {\n  backgroundColor: \"white\",\n  padding: \"20px\",\n  borderRadius: \"5px\",\n  maxWidth: \"80%\",\n  maxHeight: \"80%\",\n  overflow: \"auto\",\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 for detailed report - published news\n  const [publishedTitleFilter, setPublishedTitleFilter] = useState(\"\");\n  const [publishedAuthorFilter, setPublishedAuthorFilter] = useState(\"\");\n  const [publishedDateFilter, setPublishedDateFilter] = useState(\"\");\n\n  // Filter states for detailed report - draft news\n  const [draftTitleFilter, setDraftTitleFilter] = useState(\"\");\n  const [draftAuthorFilter, setDraftAuthorFilter] = useState(\"\");\n  const [draftDateFilter, setDraftDateFilter] = useState(\"\");\n\n  // Filter states for media monitoring\n  const [mediaPlatformFilter, setMediaPlatformFilter] = useState(\"\");\n  const [mediaTitleFilter, setMediaTitleFilter] = useState(\"\");\n  const [mediaSentimentFilter, setMediaSentimentFilter] = useState(\"\");\n  const [mediaAuthorFilter, setMediaAuthorFilter] = useState(\"\");\n\n  // Pagination states for detailed report\n  const [publishedPage, setPublishedPage] = useState(1);\n  const [draftPage, setDraftPage] = 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);\n  const [selectedAuthorId, setSelectedAuthorId] = useState(\"\");\n  const [selectedAuthorFullName, setSelectedAuthorFullName] = useState(\"\");\n\n  // State for custom days selection in weekly summary\n  const [daysToShow, setDaysToShow] = useState(7);\n  const [inputDays, setInputDays] = useState(\"7\");\n\n  const [showContentModal, setShowContentModal] = useState(false);\n  const [selectedContent, setSelectedContent] = useState(\"\");\n\n  // Function to fetch the detailed report\n  const fetchDetailedReport = async () => {\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 with custom days\n  const fetchWeeklySummary = async (days = 7) => {\n    setWeeklySummary(null); // Clear previous summary data while fetching\n    try {\n      // This fetches the summary data for the specified number of days for all users\n      const response = await fetch(`/generate-weekly-summary?days=${days}`);\n      const data = await response.json();\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      fetchDetailedReport();\n    } else if (currentView === \"summary\") {\n      fetchWeeklySummary(daysToShow);\n    }\n    // Reset pagination and filters when changing tabs\n    setPublishedPage(1);\n    setDraftPage(1);\n    setMediaPage(1);\n    setPublishedTitleFilter(\"\");\n    setPublishedAuthorFilter(\"\");\n    setPublishedDateFilter(\"\");\n    setDraftTitleFilter(\"\");\n    setDraftAuthorFilter(\"\");\n    setDraftDateFilter(\"\");\n    setMediaPlatformFilter(\"\");\n    setMediaTitleFilter(\"\");\n    setMediaSentimentFilter(\"\");\n    setMediaAuthorFilter(\"\");\n  }, [currentView, daysToShow]); // Add daysToShow to dependency array\n\n  // Handle applying custom days filter\n  const handleApplyDays = () => {\n    const days = parseInt(inputDays, 10);\n    if (isNaN(days) || days <= 0) {\n      alert(\"Please enter a valid number of days (greater than 0)\");\n      return;\n    }\n    setDaysToShow(days);\n    // No need to call fetchWeeklySummary here - it will be triggered by the effect\n  };\n\n  // Memoized filters and pagination for published content\n  const publishedArticles = useMemo(() => {\n    if (!detailedReport || !detailedReport.newsArticles) return [];\n    return detailedReport.newsArticles.filter(article =>\n      article.is_published === 1 // Only published articles\n      && article.title.toLowerCase().includes(publishedTitleFilter.toLowerCase())\n      && article.authorFullName?.toLowerCase().includes(publishedAuthorFilter.toLowerCase())\n      && (!publishedDateFilter || new Date(article.created_at).toLocaleDateString().includes(publishedDateFilter))\n    );\n  }, [detailedReport, publishedTitleFilter, publishedAuthorFilter, publishedDateFilter]);\n\n  // Memoized filters and pagination for draft content\n  const draftArticles = useMemo(() => {\n    if (!detailedReport || !detailedReport.newsArticles) return [];\n    return detailedReport.newsArticles.filter(article =>\n      article.is_published === 0 // Only draft/unpublished articles\n      && article.title.toLowerCase().includes(draftTitleFilter.toLowerCase())\n      && article.authorFullName?.toLowerCase().includes(draftAuthorFilter.toLowerCase())\n      && (!draftDateFilter || new Date(article.created_at).toLocaleDateString().includes(draftDateFilter))\n    );\n  }, [detailedReport, draftTitleFilter, draftAuthorFilter, draftDateFilter]);\n\n  // Memoized filters and pagination for media monitoring\n  const filteredMonitorings = useMemo(() => {\n    if (!detailedReport || !detailedReport.mediaEntries) return [];\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.authorFullName?.toLowerCase().includes(mediaAuthorFilter.toLowerCase())\n    );\n  }, [detailedReport, mediaPlatformFilter, mediaTitleFilter, mediaSentimentFilter, mediaAuthorFilter]);\n\n  // Paginated articles - published\n  const paginatedPublishedArticles = useMemo(() => {\n    const start = (publishedPage - 1) * itemsPerPage;\n    return publishedArticles.slice(start, start + itemsPerPage);\n  }, [publishedArticles, publishedPage, itemsPerPage]);\n\n  // Paginated articles - draft\n  const paginatedDraftArticles = useMemo(() => {\n    const start = (draftPage - 1) * itemsPerPage;\n    return draftArticles.slice(start, start + itemsPerPage);\n  }, [draftArticles, draftPage, itemsPerPage]);\n\n  // Paginated media entries\n  const paginatedMonitorings = useMemo(() => {\n    const start = (mediaPage - 1) * itemsPerPage;\n    return filteredMonitorings.slice(start, start + itemsPerPage);\n  }, [filteredMonitorings, mediaPage, itemsPerPage]);\n\n  // Calculate total pages\n  const totalPublishedPages = Math.ceil(publishedArticles.length / itemsPerPage);\n  const totalDraftPages = Math.ceil(draftArticles.length / itemsPerPage);\n  const totalMediaPages = Math.ceil(filteredMonitorings.length / itemsPerPage);\n\n  // Calculate total counts for Weekly Summary and get the correct data structure\n  const weeklySummaryData = useMemo(() => {\n    if (!weeklySummary)\n      return {\n        totalArticles: 0,\n        publishedArticles: 0,\n        draftArticles: 0,\n        totalMedia: 0,\n        formattedData: [],\n      };\n\n    let totalArticles = 0;\n    let publishedArticles = 0;\n    let draftArticles = 0;\n    let totalMedia = 0;\n\n    // Map the data to include published, draft, and total content\n    const formattedData = weeklySummary.map(item => {\n      const published = item.publishedContent || 0;\n      const draft = item.draftContent || 0;\n      const total = published + draft;\n      const media = item.monitoredMedia || 0;\n\n      // Update totals\n      totalArticles += total;\n      publishedArticles += published;\n      draftArticles += draft;\n      totalMedia += media;\n\n      return {\n        ...item,\n        totalContent: total,\n        publishedContent: published,\n        draftContent: draft,\n        monitoredMedia: media,\n      };\n    });\n\n    return {\n      totalArticles,\n      publishedArticles,\n      draftArticles,\n      totalMedia,\n      formattedData,\n    };\n  }, [weeklySummary]);\n\n  // Function to handle click on author name in Weekly Summary\n  const handleAuthorClick = (authorId, authorFullName) => {\n    if (!detailedReport || !detailedReport.newsArticles || !detailedReport.mediaEntries) {\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    // Filter by author_id\n    const authorNews = detailedReport.newsArticles.filter(article => article.author_id === authorId);\n    const authorMedia = detailedReport.mediaEntries.filter(entry => entry.author_id === authorId);\n\n    // Separate published and draft articles\n    const publishedNews = authorNews.filter(article => article.is_published === 1);\n    const draftNews = authorNews.filter(article => article.is_published === 0);\n\n    setAuthorDetailedData({\n      publishedNews,\n      draftNews,\n      media: authorMedia,\n    });\n    setSelectedAuthorId(authorId);\n    setSelectedAuthorFullName(authorFullName);\n    setIsAuthorDetailModalOpen(true);\n  };\n\n  // Function to close the author detail modal\n  const handleCloseAuthorDetailModal = () => {\n    setIsAuthorDetailModalOpen(false);\n    setAuthorDetailedData(null);\n    setSelectedAuthorId(\"\");\n    setSelectedAuthorFullName(\"\");\n  };\n\n  // Helper function for CSV export\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    const rows = data.map(row =>\n      headers.map(field => {\n        const value = row[field] == null ? \"\" : String(row[field]);\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  const showMainIdeaContent = (content) => {\n    setSelectedContent(content);\n    setShowContentModal(true);\n  };\n\n  // Then somewhere in your JSX (probably near the table):\n  {\n    showContentModal && (\n      <div style={modalStyles}>\n        <div style={modalContentStyles}>\n          <button onClick={() => setShowContentModal(false)}>Close</button>\n          <p>{selectedContent}</p>\n        </div>\n      </div>\n    );\n  }\n  return (\n    <div style={styles.container}>\n      <h2 style={styles.title}>🗂 Report Generator</h2>\n\n      {/* Buttons to switch between report views */}\n      <div style={styles.tabButtonContainer}>\n        <button\n          onClick={() => setCurrentView(\"summary\")}\n          style={{\n            ...styles.tabButton,\n            ...(currentView === \"summary\" ? styles.tabButtonActive : {}),\n          }}\n        >\n          Report By Expert\n        </button>\n        <button\n          onClick={() => setCurrentView(\"detailed\")}\n          style={{\n            ...styles.tabButton,\n            ...(currentView === \"detailed\" ? styles.tabButtonActive : {}),\n          }}\n        >\n          Detailed Report\n        </button>\n      </div>\n\n      {/* Conditional Rendering based on currentView state */}\n      {currentView === \"detailed\" && (\n        <>\n          {/* Detailed Report Section */}\n          <h3 style={styles.reportSectionTitle}>📰 News Articles & 📺 Media Monitoring</h3>\n\n          {detailedReport\n            ? (\n              <>\n                {/* Display total counts for Detailed Report */}\n                <div\n                  style={{\n                    display: \"flex\",\n                    justifyContent: \"center\",\n                    gap: \"20px\",\n                    padding: \"1px\",\n                    borderRadius: \"8px\",\n                    marginTop: \"1px\",\n                    textAlign: \"center\",\n                  }}\n                >\n                  <div style={{ display: \"flex\", flexDirection: \"column\", alignItems: \"center\" }}>\n                    <div\n                      style={{\n                        width: \"40px\",\n                        height: \"40px\",\n                        borderRadius: \"50%\",\n                        backgroundColor: \"#0A5C1E\",\n                        color: \"#fff\",\n                        display: \"flex\",\n                        alignItems: \"center\",\n                        justifyContent: \"center\",\n                        fontSize: \"1.3rem\",\n                        marginBottom: \"4px\",\n                      }}\n                    >\n                      {detailedReport.newsArticles\n                        ? detailedReport.newsArticles.filter(a => a.is_published === 1).length\n                        : 0}\n                    </div>\n                    <p style={{ fontWeight: \"500\", fontSize: \"1.2rem\", color: \"#333\", margin: 0 }}>\n                      Published Content\n                    </p>\n                  </div>\n\n                  <div style={{ display: \"flex\", flexDirection: \"column\", alignItems: \"center\" }}>\n                    <div\n                      style={{\n                        width: \"40px\",\n                        height: \"40px\",\n                        borderRadius: \"50%\",\n                        backgroundColor: BRAND_COLORS.orange,\n                        color: \"#fff\",\n                        display: \"flex\",\n                        alignItems: \"center\",\n                        justifyContent: \"center\",\n                        fontSize: \"1.3rem\",\n                        marginBottom: \"4px\",\n                      }}\n                    >\n                      {detailedReport.newsArticles\n                        ? detailedReport.newsArticles.filter(a => a.is_published === 0).length\n                        : 0}\n                    </div>\n                    <p style={{ fontWeight: \"500\", fontSize: \"1.2rem\", color: \"#333\", margin: 0 }}>\n                      Draft Content\n                    </p>\n                  </div>\n\n                  <div style={{ display: \"flex\", flexDirection: \"column\", alignItems: \"center\" }}>\n                    <div\n                      style={{\n                        width: \"40px\",\n                        height: \"40px\",\n                        borderRadius: \"50%\",\n                        backgroundColor: \"#B22222\",\n                        color: \"#fff\",\n                        display: \"flex\",\n                        alignItems: \"center\",\n                        justifyContent: \"center\",\n                        fontSize: \"1.3rem\",\n                        marginBottom: \"4px\",\n                      }}\n                    >\n                      {detailedReport.mediaEntries ? detailedReport.mediaEntries.length : 0}\n                    </div>\n                    <p style={{ fontWeight: \"500\", fontSize: \"1.2rem\", color: \"#333\", margin: 0 }}>\n                      Media Monitored\n                    </p>\n                  </div>\n                </div>\n\n                {/* Published Content Section */}\n                <h2>Published Content</h2>\n                <div style={styles.filters}>\n                  <input\n                    placeholder=\"Title Filter\"\n                    value={publishedTitleFilter}\n                    onChange={e => setPublishedTitleFilter(e.target.value)}\n                    style={styles.filterInput}\n                  />\n                  <input\n                    placeholder=\"Author Filter\"\n                    value={publishedAuthorFilter}\n                    onChange={e => setPublishedAuthorFilter(e.target.value)}\n                    style={styles.filterInput}\n                  />\n                  <input\n                    placeholder=\"Date Filter (MM/DD/YYYY)\"\n                    value={publishedDateFilter}\n                    onChange={e => setPublishedDateFilter(e.target.value)}\n                    style={styles.filterInput}\n                  />\n                </div>\n                <table style={styles.table}>\n                  <thead>\n                    <tr>\n                      <th style={styles.tableHeader}>#</th>\n                      <th style={styles.tableHeader}>Title</th>\n                      <th style={styles.tableHeader}>Author</th>\n                      <th style={styles.tableHeader}>Date</th>\n                      <th style={styles.tableHeader}>Link</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    {paginatedPublishedArticles.length > 0\n                      ? (\n                        paginatedPublishedArticles.map((article, index) => (\n                          <tr key={article.id} style={styles.tableRow}>\n                            <td>{(publishedPage - 1) * itemsPerPage + index + 1}</td>\n                            <td>{article.title}</td>\n                            <td>{article.authorFullName}</td>\n                            <td>{new Date(article.created_at).toLocaleDateString()}</td>\n                            <td>\n                              <a href={article.link} target=\"_blank\" rel=\"noopener noreferrer\" style={styles.link}>\n                                View Content\n                              </a>\n                            </td>\n                          </tr>\n                        ))\n                      )\n                      : (\n                        <tr>\n                          <td colSpan={5} style={{ textAlign: \"center\" }}>No published content found</td>\n                        </tr>\n                      )}\n                  </tbody>\n                </table>\n\n                {/* Pagination for Published Content */}\n                {paginatedPublishedArticles.length > 0 && (\n                  <div style={styles.pagination}>\n                    <button\n                      onClick={() => setPublishedPage(prev => Math.max(prev - 1, 1))}\n                      disabled={publishedPage === 1}\n                      style={styles.paginationButton}\n                    >\n                      Previous\n                    </button>\n                    <span>Page {publishedPage} of {totalPublishedPages}</span>\n                    <button\n                      onClick={() => setPublishedPage(prev => Math.min(prev + 1, totalPublishedPages))}\n                      disabled={publishedPage >= totalPublishedPages\n                        || paginatedPublishedArticles.length < itemsPerPage}\n                      style={styles.paginationButton}\n                    >\n                      Next\n                    </button>\n                  </div>\n                )}\n\n                <div style={styles.exportButtonContainer}>\n                  <button\n                    onClick={() => exportToCSV(publishedArticles, \"published_content_report\")}\n                    style={styles.exportButton}\n                    disabled={publishedArticles.length === 0}\n                  >\n                    Export Published Content to Excel\n                  </button>\n                </div>\n\n                {/* Draft Content Section */}\n                <h2>Draft Content</h2>\n                <div style={styles.filters}>\n                  <input\n                    placeholder=\"Title Filter\"\n                    value={draftTitleFilter}\n                    onChange={e => setDraftTitleFilter(e.target.value)}\n                    style={styles.filterInput}\n                  />\n                  <input\n                    placeholder=\"Author Filter\"\n                    value={draftAuthorFilter}\n                    onChange={e => setDraftAuthorFilter(e.target.value)}\n                    style={styles.filterInput}\n                  />\n                  <input\n                    placeholder=\"Date Filter (MM/DD/YYYY)\"\n                    value={draftDateFilter}\n                    onChange={e => setDraftDateFilter(e.target.value)}\n                    style={styles.filterInput}\n                  />\n                </div>\n                <table style={styles.table}>\n                  <thead>\n                    <tr>\n                      <th style={styles.tableHeader}>#</th>\n                      <th style={styles.tableHeader}>Title</th>\n                      <th style={styles.tableHeader}>Author</th>\n                      <th style={styles.tableHeader}>Date</th>\n                      <th style={styles.tableHeader}>Main Idea</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    {paginatedDraftArticles.length > 0\n                      ? (\n                        paginatedDraftArticles.map((article, index) => (\n                          <tr key={article.id} style={styles.tableRow}>\n                            <td>{(draftPage - 1) * itemsPerPage + index + 1}</td>\n                            <td>{article.title}</td>\n                            <td>{article.authorFullName}</td>\n                            <td>{new Date(article.created_at).toLocaleDateString()}</td>\n                            <td\n                              style={{\n                                cursor: \"pointer\",\n                                textDecoration: \"underline\",\n                                color: BRAND_COLORS.darkGreen,\n                                maxWidth: \"300px\",\n                                whiteSpace: \"nowrap\",\n                                overflow: \"hidden\",\n                                textOverflow: \"ellipsis\",\n                              }}\n                              onClick={() => {\n                                setSelectedContent(article.main_idea);\n                                setShowContentModal(true);\n                              }}\n                            >\n                              {article.main_idea}\n                            </td>\n                          </tr>\n                        ))\n                      )\n                      : (\n                        <tr>\n                          <td colSpan={5} style={{ textAlign: \"center\" }}>No draft content found</td>\n                        </tr>\n                      )}\n                  </tbody>\n                </table>\n\n                {/* Main Idea Content Modal */}\n                {showContentModal && (\n                  <div style={styles.modalOverlay}>\n                    <div style={styles.modalContent}>\n                      <button\n                        onClick={() => setShowContentModal(false)}\n                        style={styles.modalCloseButton}\n                      >\n                        ×\n                      </button>\n                      <h3 style={styles.modalTitle}>Main Idea Content</h3>\n                      <div\n                        style={{\n                          padding: \"15px\",\n                          backgroundColor: styles.tableRow[\"&:nth-child(even)\"].backgroundColor,\n                          borderRadius: \"5px\",\n                          whiteSpace: \"pre-wrap\",\n                          wordBreak: \"break-word\",\n                        }}\n                      >\n                        {selectedContent}\n                      </div>\n                    </div>\n                  </div>\n                )}\n\n                {/* Pagination for Draft Content */}\n                {paginatedDraftArticles.length > 0 && (\n                  <div style={styles.pagination}>\n                    <button\n                      onClick={() => setDraftPage(prev => Math.max(prev - 1, 1))}\n                      disabled={draftPage === 1}\n                      style={styles.paginationButton}\n                    >\n                      Previous\n                    </button>\n                    <span>Page {draftPage} of {totalDraftPages}</span>\n                    <button\n                      onClick={() => setDraftPage(prev => Math.min(prev + 1, totalDraftPages))}\n                      disabled={draftPage >= totalDraftPages || paginatedDraftArticles.length < itemsPerPage}\n                      style={styles.paginationButton}\n                    >\n                      Next\n                    </button>\n                  </div>\n                )}\n\n                <div style={styles.exportButtonContainer}>\n                  <button\n                    onClick={() => exportToCSV(draftArticles, \"draft_content_report\")}\n                    style={styles.exportButton}\n                    disabled={draftArticles.length === 0}\n                  >\n                    Export Draft Content to Excel\n                  </button>\n                </div>\n\n                {/* Media Monitoring Section */}\n                <h2>Monitored Media</h2>\n                <div style={styles.filters}>\n                  <input\n                    placeholder=\"Platform\"\n                    value={mediaPlatformFilter}\n                    onChange={e => setMediaPlatformFilter(e.target.value)}\n                    style={styles.filterInput}\n                  />\n                  <input\n                    placeholder=\"Title\"\n                    value={mediaTitleFilter}\n                    onChange={e => setMediaTitleFilter(e.target.value)}\n                    style={styles.filterInput}\n                  />\n                  <input\n                    placeholder=\"Sentiment\"\n                    value={mediaSentimentFilter}\n                    onChange={e => setMediaSentimentFilter(e.target.value)}\n                    style={styles.filterInput}\n                  />\n                  <input\n                    placeholder=\"Author\"\n                    value={mediaAuthorFilter}\n                    onChange={e => setMediaAuthorFilter(e.target.value)}\n                    style={styles.filterInput}\n                  />\n                </div>\n                <table style={styles.table}>\n                  <thead>\n                    <tr>\n                      <th style={styles.tableHeader}>#</th>\n                      <th style={styles.tableHeader}>Platform</th>\n                      <th style={styles.tableHeader}>Title</th>\n                      <th style={styles.tableHeader}>Sentiment</th>\n                      <th style={styles.tableHeader}>Author</th>\n                      <th style={styles.tableHeader}>Link</th>\n                      <th style={styles.tableHeader}>Date</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    {paginatedMonitorings.length > 0\n                      ? (\n                        paginatedMonitorings.map((item, index) => (\n                          <tr key={item.id || index} style={styles.tableRow}>\n                            <td>{(mediaPage - 1) * itemsPerPage + index + 1}</td>\n                            <td>{item.platform}</td>\n                            <td>{item.title}</td>\n                            <td>{item.sentiment}</td>\n                            <td>{item.authorFullName}</td>\n                            <td>\n                              {item.link\n                                ? (\n                                  <a\n                                    href={item.link}\n                                    target=\"_blank\"\n                                    rel=\"noopener noreferrer\"\n                                    style={styles.link}\n                                  >\n                                    View Content\n                                  </a>\n                                )\n                                : (\n                                  \"No link\"\n                                )}\n                            </td>\n                            <td>{new Date(item.created_at).toLocaleDateString()}</td>\n                          </tr>\n                        ))\n                      )\n                      : (\n                        <tr>\n                          <td colSpan={7} style={{ textAlign: \"center\" }}>No media entries found</td>\n                        </tr>\n                      )}\n                  </tbody>\n                </table>\n\n                {/* Pagination for Media */}\n                {paginatedMonitorings.length > 0 && (\n                  <div style={styles.pagination}>\n                    <button\n                      onClick={() => setMediaPage(prev => Math.max(prev - 1, 1))}\n                      disabled={mediaPage === 1}\n                      style={styles.paginationButton}\n                    >\n                      Previous\n                    </button>\n                    <span>Page {mediaPage} of {totalMediaPages}</span>\n                    <button\n                      onClick={() => setMediaPage(prev => Math.min(prev + 1, totalMediaPages))}\n                      disabled={mediaPage >= totalMediaPages || paginatedMonitorings.length < itemsPerPage}\n                      style={styles.paginationButton}\n                    >\n                      Next\n                    </button>\n                  </div>\n                )}\n\n                <div style={styles.exportButtonContainer}>\n                  <button\n                    onClick={() => exportToCSV(filteredMonitorings, \"media_report\")}\n                    style={styles.exportButton}\n                    disabled={filteredMonitorings.length === 0}\n                  >\n                    Export Media to Excel\n                  </button>\n                </div>\n              </>\n            )\n            : <p>Fetching detailed report...</p>}\n        </>\n      )}\n\n      {currentView === \"summary\" && (\n        <>\n          {/* Weekly Summary Section */}\n          <h3 style={styles.reportSectionTitle}>📊 User Activity Summary</h3>\n\n          {/* Days selection input */}\n          <div style={styles.daysInputContainer}>\n            <label htmlFor=\"daysInput\">Show data for last:</label>\n            <input\n              id=\"daysInput\"\n              type=\"number\"\n              min=\"1\"\n              value={inputDays}\n              onChange={(e) => setInputDays(e.target.value)}\n              style={styles.daysInput}\n              placeholder=\"Number of days\"\n            />\n            <button onClick={handleApplyDays} style={styles.applyButton}>\n              Apply\n            </button>\n          </div>\n\n          {weeklySummary\n            ? (\n              <>\n                {/* Display total counts for Weekly Summary */}\n                <div\n                  style={{\n                    display: \"flex\",\n                    justifyContent: \"center\",\n                    gap: \"20px\",\n                    padding: \"10px\",\n                    borderRadius: \"8px\",\n                    marginTop: \"10px\",\n                    textAlign: \"center\",\n                  }}\n                >\n                  <div style={{ display: \"flex\", flexDirection: \"column\", alignItems: \"center\" }}>\n                    <div\n                      style={{\n                        width: \"40px\",\n                        height: \"40px\",\n                        borderRadius: \"50%\",\n                        backgroundColor: \"#0A5C1E\",\n                        color: \"#fff\",\n                        display: \"flex\",\n                        alignItems: \"center\",\n                        justifyContent: \"center\",\n                        fontSize: \"0.9rem\",\n                        marginBottom: \"4px\",\n                      }}\n                    >\n                      {weeklySummaryData.publishedArticles}\n                    </div>\n                    <p style={{ fontWeight: \"500\", fontSize: \"0.8rem\", color: \"#333\", margin: 0 }}>\n                      Published ({daysToShow} Days)\n                    </p>\n                  </div>\n\n                  <div style={{ display: \"flex\", flexDirection: \"column\", alignItems: \"center\" }}>\n                    <div\n                      style={{\n                        width: \"40px\",\n                        height: \"40px\",\n                        borderRadius: \"50%\",\n                        backgroundColor: BRAND_COLORS.orange,\n                        color: \"#fff\",\n                        display: \"flex\",\n                        alignItems: \"center\",\n                        justifyContent: \"center\",\n                        fontSize: \"0.9rem\",\n                        marginBottom: \"4px\",\n                      }}\n                    >\n                      {weeklySummaryData.draftArticles}\n                    </div>\n                    <p style={{ fontWeight: \"500\", fontSize: \"0.8rem\", color: \"#333\", margin: 0 }}>\n                      Draft ({daysToShow} Days)\n                    </p>\n                  </div>\n\n                  <div style={{ display: \"flex\", flexDirection: \"column\", alignItems: \"center\" }}>\n                    <div\n                      style={{\n                        width: \"40px\",\n                        height: \"40px\",\n                        borderRadius: \"50%\",\n                        backgroundColor: \"#B22222\",\n                        color: \"#fff\",\n                        display: \"flex\",\n                        alignItems: \"center\",\n                        justifyContent: \"center\",\n                        fontSize: \"0.9rem\",\n                        marginBottom: \"4px\",\n                      }}\n                    >\n                      {weeklySummaryData.totalMedia}\n                    </div>\n                    <p style={{ fontWeight: \"500\", fontSize: \"0.8rem\", color: \"#333\", margin: 0 }}>\n                      Media ({daysToShow} Days)\n                    </p>\n                  </div>\n                </div>\n\n                <table style={styles.table}>\n                  <thead>\n                    <tr>\n                      <th style={styles.tableHeader}>S. No</th>\n                      <th style={styles.tableHeader}>Author</th>\n                      <th style={styles.tableHeader}>Total Content</th>\n                      <th style={styles.tableHeader}>Published</th>\n                      <th style={styles.tableHeader}>Draft</th>\n                      <th style={styles.tableHeader}>Media Monitored</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    {weeklySummaryData.formattedData.map((item, index) => (\n                      <tr key={item.author_id || index} style={styles.tableRow}>\n                        <td>{index + 1}</td>\n                        <td>\n                          <button\n                            onClick={() =>\n                              handleAuthorClick(item.author_id, item.authorFullName)}\n                            style={styles.authorNameButton}\n                            title={`View detailed report for ${item.authorFullName}`}\n                          >\n                            {item.authorFullName}\n                          </button>\n                        </td>\n                        <td>{item.totalContent}</td>\n                        <td>{item.publishedContent}</td>\n                        <td>{item.draftContent}</td>\n                        <td>{item.monitoredMedia}</td>\n                      </tr>\n                    ))}\n                  </tbody>\n                </table>\n\n                <div style={styles.exportButtonContainer}>\n                  <button\n                    onClick={() => exportToCSV(weeklySummaryData.formattedData, `activity_report_${daysToShow}days`)}\n                    style={styles.exportButton}\n                    disabled={!weeklySummaryData.formattedData.length}\n                  >\n                    Export Summary to Excel\n                  </button>\n                </div>\n              </>\n            )\n            : <p>Fetching weekly summary...</p>}\n        </>\n      )}\n\n      {/* Author Detail Modal */}\n      {isAuthorDetailModalOpen && authorDetailedData && (\n        <div style={styles.modalOverlay}>\n          <div style={styles.modalContent}>\n            <button onClick={handleCloseAuthorDetailModal} style={styles.modalCloseButton}>×</button>\n            <h3 style={styles.modalTitle}>Detailed Report for {selectedAuthorFullName}</h3>\n\n            {/* Published Content by Author */}\n            <h4 style={styles.modalSectionTitle}>\n              Published Content by {selectedAuthorFullName} ({authorDetailedData.publishedNews.length})\n            </h4>\n            {authorDetailedData.publishedNews.length > 0\n              ? (\n                <table style={styles.table}>\n                  <thead>\n                    <tr>\n                      <th style={styles.tableHeader}>#</th>\n                      <th style={styles.tableHeader}>Title</th>\n                      <th style={styles.tableHeader}>Date</th>\n                      <th style={styles.tableHeader}>Link</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    {authorDetailedData.publishedNews.map((article, index) => (\n                      <tr key={article.id} style={styles.tableRow}>\n                        <td>{index + 1}</td>\n                        <td>{article.title}</td>\n                        <td>{new Date(article.created_at).toLocaleDateString()}</td>\n                        <td>\n                          <a href={article.link} target=\"_blank\" rel=\"noopener noreferrer\" style={styles.link}>\n                            View Content\n                          </a>\n                        </td>\n                      </tr>\n                    ))}\n                  </tbody>\n                </table>\n              )\n              : <p>No published content found for this author.</p>}\n\n            {/* Draft Content by Author */}\n            <h4 style={styles.modalSectionTitle}>\n              Draft Content by {selectedAuthorFullName} ({authorDetailedData.draftNews.length})\n            </h4>\n            {authorDetailedData.draftNews.length > 0\n              ? (\n                <table style={styles.table}>\n                  <thead>\n                    <tr>\n                      <th style={styles.tableHeader}>#</th>\n                      <th style={styles.tableHeader}>Title</th>\n                      <th style={styles.tableHeader}>Date</th>\n                      <th style={styles.tableHeader}>Main Idea</th> {/* Display Main Idea for drafts */}\n                    </tr>\n                  </thead>\n                  <tbody>\n                    {authorDetailedData.draftNews.map((article, index) => (\n                      <tr key={article.id} style={styles.tableRow}>\n                        <td>{index + 1}</td>\n                        <td>{article.title}</td>\n                        <td>{new Date(article.created_at).toLocaleDateString()}</td>\n                        <td>{article.main_idea}</td> {/* Display Main Idea for drafts */}\n                      </tr>\n                    ))}\n                  </tbody>\n                </table>\n              )\n              : <p>No draft content found for this author.</p>}\n\n            {/* Monitored Media by Author */}\n            <h4 style={styles.modalSectionTitle}>\n              Monitored Media by {selectedAuthorFullName} ({authorDetailedData.media.length})\n            </h4>\n            {authorDetailedData.media.length > 0\n              ? (\n                <table style={styles.table}>\n                  <thead>\n                    <tr>\n                      <th style={styles.tableHeader}>#</th>\n                      <th style={styles.tableHeader}>Platform</th>\n                      <th style={styles.tableHeader}>Title</th>\n                      <th style={styles.tableHeader}>Sentiment</th>\n                      <th style={styles.tableHeader}>Link</th>\n                      <th style={styles.tableHeader}>Date</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    {authorDetailedData.media.map((item, index) => (\n                      <tr key={item.id || index} style={styles.tableRow}>\n                        <td>{index + 1}</td>\n                        <td>{item.platform}</td>\n                        <td>{item.title}</td>\n                        <td>{item.sentiment}</td>\n                        <td>\n                          {item.link\n                            ? (\n                              <a\n                                href={item.link}\n                                target=\"_blank\"\n                                rel=\"noopener noreferrer\"\n                                style={styles.link}\n                              >\n                                View Content\n                              </a>\n                            )\n                            : (\n                              \"No link\"\n                            )}\n                        </td>\n                        <td>{new Date(item.created_at).toLocaleDateString()}</td>\n                      </tr>\n                    ))}\n                  </tbody>\n                </table>\n              )\n              : <p>No media reports found for this author.</p>}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport default WeeklyReportTab;",[],[160,261],[160],{"_106":269,"_96":270,"_161":271,"_163":-5,"_164":144,"_165":272,"_167":22,"_108":273,"_102":274,"_169":170,"_171":-5,"_172":22,"_173":-5,"_174":275,"_100":284},"68715e7a-41d3-11f0-b8d3-76b3cceeab13","css","627c91ce-41d3-11f0-8c59-76b3cceeab13",21,["D",1749103669456],1,[276],{"_106":277,"_96":278,"_161":279,"_163":271,"_164":144,"_165":280,"_167":22,"_108":281,"_102":274,"_169":181,"_171":73,"_172":22,"_173":-5,"_174":282,"_100":283},"73392d10-41d3-11f0-a770-76b3cceeab13","app_css.tsx","6d4a6b4e-41d3-11f0-9c8a-76b3cceeab13",23,["D",1749103687542],[],[270,278],[270],{"_106":286,"_96":101,"_161":287,"_163":-5,"_164":144,"_165":103,"_167":22,"_108":288,"_102":289,"_169":290,"_171":291,"_172":22,"_173":-5,"_174":292,"_100":293},"4d35d87e-4314-11f0-ac89-76b3cceeab13","105a4bc9-e4dc-4e8e-8911-c960fee6dc98",["D",1749241492217],146,"http","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\n// Component Imports\nimport { css } from \"./components/css-root.tsx\";\nimport { FeedsTab } from \"./components/feeds.tsx\";\nimport { LoginForm } from \"./components/login.tsx\";\nimport MediaMonitoringTab from \"./components/mediaMonitoring.tsx\";\nimport { NewsArticleTab } from \"./components/newsArticle.tsx\";\nimport ProfileTab from \"./components/profileTab.tsx\";\nimport SettingTab from \"./components/setting.tsx\";\nimport TaskDashboard from \"./components/taskDashboard.tsx\";\nimport WeeklyReportTab from \"./components/weeklyReport.tsx\";\n\nconst BRAND_COLORS = {\n  darkGreen: \"#1E590C\",\n  gray: \"#f8f8f8\",\n  red: \"#DD1407 \",\n  white: \"#ffffff\",\n  background: \"#f3f9f2\",\n  indigo: \"#4f46e5\",\n};\n\nasync function hashPassword(password: string): Promise<string> {\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\nfunction App() {\n  const [user, setUser] = useState<any>(null);\n  const [view, setView] = useState(\"login\");\n  const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n\n  useEffect(() => {\n    const savedUser = localStorage.getItem(\"eepUser\");\n    if (savedUser) {\n      try {\n        const parsedUser = JSON.parse(savedUser);\n        if (parsedUser && parsedUser.username && parsedUser.role && parsedUser.id) {\n          setUser(parsedUser);\n          // Get the last viewed page from localStorage if it exists\n          const lastView = localStorage.getItem(\"eepLastView\");\n          if (lastView) {\n            setView(lastView);\n          } else {\n            // Default view based on role if no last view is stored\n            setView(\n              parsedUser.role === \"Admin\" || parsedUser.role === \"CEO\" || parsedUser.role === \"Director\"\n                ? \"report\"\n                : \"news\",\n            );\n          }\n        } else {\n          localStorage.removeItem(\"eepUser\");\n          localStorage.removeItem(\"eepLastView\");\n        }\n      } catch (error) {\n        console.error(\"Failed to parse user from localStorage:\", error);\n        localStorage.removeItem(\"eepUser\");\n        localStorage.removeItem(\"eepLastView\");\n      }\n    }\n  }, []);\n\n  useEffect(() => {\n    if (user && view !== \"login\") {\n      localStorage.setItem(\"eepLastView\", view);\n    }\n  }, [view, user]);\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (\n        dropdownRef.current && !dropdownRef.current.contains(event.target as Node)\n        && buttonRef.current && !buttonRef.current.contains(event.target as Node)\n      ) {\n        setIsDropdownOpen(false);\n      }\n    };\n\n    if (isDropdownOpen) {\n      document.addEventListener(\"mousedown\", handleClickOutside);\n    } else {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    }\n\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, [isDropdownOpen]);\n\n  const handleLogin = async (username: string, password: string) => {\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\n      if (!response.ok) {\n        const errorBody = await response.text();\n        let errorMessage = `Login failed: ${response.status} ${response.statusText}`;\n        try {\n          const errorJson = JSON.parse(errorBody);\n          errorMessage = `Login failed: ${errorJson.message || errorMessage}`;\n        } catch (parseError) {\n          console.error(\"Failed to parse error response as JSON:\", parseError, \"Response body:\", errorBody);\n        }\n        alert(errorMessage);\n        return;\n      }\n\n      const result = await response.json();\n\n      if (result.success) {\n        if (result.user && result.user.id) {\n          setUser(result.user);\n          localStorage.setItem(\"eepUser\", JSON.stringify(result.user));\n          const lastView = localStorage.getItem(\"eepLastView\");\n          if (lastView) {\n            setView(lastView);\n          } else {\n            setView(\n              (result.user.role === \"Admin\" || result.user.role === \"CEO\" || result.user.role === \"Director\")\n                ? \"report\"\n                : \"news\",\n            );\n          }\n        } else {\n          alert(\"Login successful, but user data is incomplete.\");\n          console.error(\"Login response missing user ID:\", result);\n          setUser(null);\n          localStorage.removeItem(\"eepUser\");\n          setView(\"login\");\n        }\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 during the request.\");\n    }\n  };\n\n  const handleLogout = () => {\n    setUser(null);\n    setView(\"login\");\n    setIsDropdownOpen(false);\n    localStorage.removeItem(\"eepUser\");\n    localStorage.removeItem(\"eepLastView\");\n  };\n\n  const handleProfileDetail = () => {\n    setView(\"profile\");\n    setIsDropdownOpen(false);\n  };\n\n  // Function to navigate to NewsArticleTab\n  const navigateToNewsArticleTab = () => {\n    setView(\"news\");\n  };\n\n  const renderContent = () => {\n    if (!user) {\n      return <LoginForm onLogin={handleLogin} />;\n    }\n\n    switch (view) {\n      case \"news\":\n        return <NewsArticleTab user={user} />;\n      case \"feeds\":\n        return <FeedsTab user={user} onNavigateToNewsArticleTab={navigateToNewsArticleTab} />; // Pass the new prop\n      case \"media\":\n        return <MediaMonitoringTab user={user} />;\n      case \"report\":\n        return [\"CEO\", \"Director\", \"Manager\", \"Admin\"].includes(user?.role)\n          ? <WeeklyReportTab />\n          : (\n            <p style={{ textAlign: \"center\", color: BRAND_COLORS.red, fontWeight: \"bold\" }}>\n              Access Denied. Reports are available for authorized personnel only.\n            </p>\n          );\n      case \"task\":\n        return <TaskDashboard currentUser={user} />;\n      case \"setting\":\n        return [\"CEO\", \"Director\", \"Manager\", \"Admin\"].includes(user?.role)\n          ? <SettingTab />\n          : (\n            <p style={{ textAlign: \"center\", color: BRAND_COLORS.red, fontWeight: \"bold\" }}>\n              Settings is not implemented yet.\n            </p>\n          );\n      case \"profile\":\n        return <ProfileTab user={user} />;\n      default:\n        setView(\"news\");\n        return <NewsArticleTab user={user} />;\n    }\n  };\n\n  const sidebarBtnStyle: React.CSSProperties = {\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  const topBarButtonStyle: React.CSSProperties = {\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    position: \"relative\",\n    zIndex: 10,\n  };\n\n  const dropdownMenuStyle: React.CSSProperties = {\n    position: \"absolute\",\n    top: \"calc(100% + 5px)\",\n    right: \"0\",\n    backgroundColor: BRAND_COLORS.white,\n    border: `1px solid ${BRAND_COLORS.darkGreen}`,\n    borderRadius: \"8px\",\n    boxShadow: \"0 2px 10px rgba(0,0,0,0.1)\",\n    minWidth: \"150px\",\n    zIndex: 20,\n    display: \"flex\",\n    flexDirection: \"column\",\n    padding: \"5px 0\",\n  };\n\n  const dropdownItemStyle: React.CSSProperties = {\n    backgroundColor: \"transparent\",\n    border: \"none\",\n    padding: \"10px 15px\",\n    textAlign: \"left\",\n    cursor: \"pointer\",\n    fontSize: \"0.9rem\",\n    color: BRAND_COLORS.darkGreen,\n    // \"&:hover\": { // This is not valid in inline styles\n    //   backgroundColor: BRAND_COLORS.gray,\n    // },\n  };\n\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        minHeight: \"100vh\",\n        backgroundColor: BRAND_COLORS.background,\n        fontFamily: \"'Segoe UI', Tahoma, Geneva, Verdana, sans-serif\",\n        flexDirection: user ? \"row\" : \"column\",\n        width: \"100%\",\n      }}\n    >\n      {user && (\n        <aside\n          style={{\n            width: \"240px\",\n            backgroundColor: BRAND_COLORS.darkGreen,\n            color: BRAND_COLORS.white,\n            padding: \"6px 20px 20px 20px\",\n            display: \"flex\",\n            flexDirection: \"column\",\n            boxShadow: \"2px 0 10px rgba(0,0,0,0.1)\",\n            flexShrink: 0,\n          }}\n        >\n          <div\n            style={{\n              display: \"flex\",\n              flexDirection: \"column\",\n              alignItems: \"center\",\n              paddingTop: \"0px\",\n            }}\n          >\n            <img\n              src=\"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSIGEJA8-xL8Aa9oC7Y7gFqBoICxvhebGig6ADUJYSFVEzWRD0Y5GmuhnjW6B6e11C07iE&usqp=CAU\"\n              alt=\"EEP Portal Logo\"\n              style={{\n                height: \"60px\",\n                width: \"60px\",\n                borderRadius: \"50%\",\n                border: \"2px solid red\",\n                objectFit: \"cover\",\n              }}\n            />\n            <h2\n              style={{\n                marginTop: \"0px\",\n                fontSize: \"1rem\",\n                color: BRAND_COLORS.white,\n              }}\n            >\n              Ethiopian Electric Power የኢትዮጵያ ኤሌክትሪክ ኃይል\n            </h2>\n          </div>\n          <br />\n          <nav style={{ flexGrow: 1 }}>\n            {(user.role === \"CEO\" || user.role === \"Director\" || user.role === \"Manager\" || user.role === \"Admin\") && (\n              <button\n                onClick={() => setView(\"report\")}\n                style={{\n                  ...sidebarBtnStyle,\n                  backgroundColor: view === \"report\" ? BRAND_COLORS.darkGreen : \"transparent\",\n                }}\n              >\n                📊 Dashboard\n              </button>\n            )}\n            <button\n              onClick={() => setView(\"feeds\")}\n              style={{ ...sidebarBtnStyle, backgroundColor: view === \"feeds\" ? BRAND_COLORS.darkGreen : \"transparent\" }}\n            >\n              📡 News feed\n            </button>\n            <button\n              onClick={() => setView(\"news\")}\n              style={{ ...sidebarBtnStyle, backgroundColor: view === \"news\" ? BRAND_COLORS.darkGreen : \"transparent\" }}\n            >\n              📰 Manage contents\n            </button>\n            <button\n              onClick={() => setView(\"media\")}\n              style={{ ...sidebarBtnStyle, backgroundColor: view === \"media\" ? BRAND_COLORS.darkGreen : \"transparent\" }}\n            >\n              📺 Media Monitoring\n            </button>\n            {user && (\n              <button\n                onClick={() => setView(\"task\")}\n                style={{\n                  ...sidebarBtnStyle,\n                  backgroundColor: view === \"task\" ? BRAND_COLORS.darkGreen : \"transparent\",\n                }}\n              >\n                ✅ Tasks\n              </button>\n            )}\n            {(user.role === \"CEO\" || user.role === \"Director\" || user.role === \"Manager\" || user.role === \"Admin\") && (\n              <button\n                onClick={() => setView(\"setting\")}\n                style={{\n                  ...sidebarBtnStyle,\n                  backgroundColor: view === \"setting\" ? BRAND_COLORS.darkGreen : \"transparent\",\n                }}\n              >\n                👥Employee\n              </button>\n            )}\n          </nav>\n          <div style={{ marginTop: \"auto\" }}></div>\n        </aside>\n      )}\n\n      <main\n        style={{\n          flex: 1,\n          display: \"flex\",\n          flexDirection: \"column\",\n          overflowY: \"auto\",\n          backgroundColor: user ? BRAND_COLORS.background : BRAND_COLORS.white,\n          width: user ? \"calc(100% - 240px)\" : \"100%\",\n          boxSizing: \"border-box\",\n        }}\n      >\n        {user && (\n          <div\n            style={{\n              backgroundColor: BRAND_COLORS.darkGreen,\n              padding: \"10px 25px\",\n              display: \"flex\",\n              justifyContent: \"space-between\",\n              alignItems: \"center\",\n              borderBottom: \"1px solid #eee\",\n              boxShadow: \"0 1px 3px rgba(0,0,0,0.05)\",\n              flexShrink: 0,\n              position: \"relative\",\n              zIndex: 5,\n            }}\n          >\n            <span style={{ fontSize: \"1.3rem\", fontWeight: \"bold\", color: BRAND_COLORS.white }}>\n              EEP Communication Portal\n            </span>\n            <div style={{ position: \"relative\" }}>\n              <button\n                ref={buttonRef}\n                onClick={() => setIsDropdownOpen(!isDropdownOpen)}\n                style={topBarButtonStyle}\n              >\n                👤 {user.username} ({user.role})\n              </button>\n              {isDropdownOpen && (\n                <div ref={dropdownRef} style={dropdownMenuStyle}>\n                  <button onClick={handleProfileDetail} style={dropdownItemStyle}>Profile Detail</button>\n                  <button onClick={handleLogout} style={dropdownItemStyle}>Logout</button>\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n\n        <div\n          style={{\n            flex: 1,\n            padding: user ? \"30px\" : \"50px 20px\",\n            display: \"flex\",\n            justifyContent: \"center\",\n            alignItems: user ? \"flex-start\" : \"center\",\n            width: \"100%\",\n            boxSizing: \"border-box\",\n            overflowY: \"auto\",\n          }}\n        >\n          <div\n            style={{\n              width: \"100%\",\n              maxWidth: user ? \"1200px\" : \"auto\",\n              margin: user ? \"0 auto\" : \"initial\",\n              boxSizing: \"border-box\",\n            }}\n          >\n            {renderContent()}\n          </div>\n        </div>\n      </main>\n    </div>\n  );\n}\n\nfunction client() {\n  const rootElement = document.getElementById(\"root\");\n  if (rootElement) {\n    createRoot(rootElement).render(<App />);\n  } else {\n    console.error(\"Failed to find the root element\");\n  }\n}\n\nif (typeof document !== \"undefined\") {\n  client();\n}\n\nexport default async function server(request: Request) {\n  try {\n    const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n    const KEY = \"MediaMonitoring_1\";\n\n    await sqlite.execute(`\n      CREATE TABLE IF NOT EXISTS ${KEY}_employees (\n        employee_id INTEGER PRIMARY KEY,\n        first_name TEXT,\n        last_name TEXT,\n        role TEXT,\n        status TEXT DEFAULT 'active',\n        email TEXT UNIQUE,\n        phone TEXT,\n        password TEXT,\n        date_hired datetime,\n        created_at datetime DEFAULT CURRENT_TIMESTAMP,\n        updated_at datetime DEFAULT CURRENT_TIMESTAMP,\n        user_name TEXT UNIQUE,\n        address varchar(120),\n        grade TEXT,\n        sex varchar(10),\n        supervisor_id INTEGER,\n        department TEXT,\n        job_title TEXT,\n        date_of_birth datetime DEFAULT CURRENT_TIMESTAMP,\n        FOREIGN KEY (supervisor_id) REFERENCES ${KEY}_employees(employee_id)\n      )`);\n\n    // Media Monitored\n    await sqlite.execute(`\n  CREATE TABLE IF NOT EXISTS ${KEY}_media_monitored (\n    id INTEGER PRIMARY KEY AUTOINCREMENT,\n    employee_id INTEGER,\n    title TEXT,\n    link TEXT,\n    published_date DATETIME,\n    main_idea TEXT,\n    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,\n    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,\n    media_name TEXT,\n    sentiment TEXT,\n    platform TEXT,\n    FOREIGN KEY (employee_id) REFERENCES ${KEY}_employees(employee_id)\n  )`);\n\n    // Contents\n    await sqlite.execute(`\n  CREATE TABLE IF NOT EXISTS ${KEY}_contents (\n    id INTEGER PRIMARY KEY AUTOINCREMENT,\n    employee_id INTEGER,\n    reviewer_id INTEGER,\n    title TEXT,\n    main_idea TEXT,\n    link TEXT,\n    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,\n    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,\n    is_published INTEGER,\n    comments TEXT,\n    published_at DATETIME,\n    FOREIGN KEY (employee_id) REFERENCES ${KEY}_employees(employee_id),\n    FOREIGN KEY (reviewer_id) REFERENCES ${KEY}_employees(employee_id)\n  )\n`);\n\n    // Tasks\n    await sqlite.execute(`\n  CREATE TABLE IF NOT EXISTS ${KEY}_tasks (\n    id INTEGER PRIMARY KEY AUTOINCREMENT,\n    assignee_id INTEGER,\n    manager_id INTEGER,\n    title TEXT,\n    description TEXT,\n    due_date DATETIME,\n    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,\n    completed_at DATETIME,\n    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,\n    status TEXT, -- Corrected from enum\n    priority TEXT, -- Corrected from enum\n    final_remark TEXT,\n    incompletion_reason TEXT,\n    attachments TEXT,\n    FOREIGN KEY (assignee_id) REFERENCES ${KEY}_employees(employee_id),\n    FOREIGN KEY (manager_id) REFERENCES ${KEY}_employees(employee_id)\n  )`);\n\n    // Comments\n    await sqlite.execute(`\n  CREATE TABLE IF NOT EXISTS ${KEY}_comments (\n    id TEXT PRIMARY KEY,\n    employee_id INTEGER,\n    comment TEXT,\n    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,\n    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,\n    content_id TEXT,\n    FOREIGN KEY (employee_id) REFERENCES ${KEY}_employees(employee_id),\n    FOREIGN KEY (content_id) REFERENCES ${KEY}_contents(id)\n  )`);\n\n    // Logs\n    await sqlite.execute(`\n  CREATE TABLE IF NOT EXISTS ${KEY}_logs (\n    id INTEGER PRIMARY KEY AUTOINCREMENT,\n    employee_id INTEGER,\n    action TEXT,\n    table_name TEXT, -- Corrected from datetime\n    description TEXT, -- Corrected from datetime\n    record_id TEXT,\n    ip_address TEXT,\n    device TEXT,\n    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,\n    FOREIGN KEY (employee_id) REFERENCES ${KEY}_employees(employee_id)\n  )`);\n\n    // Notifications\n    await sqlite.execute(`\n  CREATE TABLE IF NOT EXISTS ${KEY}_notifications (\n    id INTEGER PRIMARY KEY AUTOINCREMENT,\n    employee_id INTEGER,\n    message TEXT,\n    type TEXT, -- Corrected from enum\n    related_id INTEGER,\n    is_read INTEGER, -- Corrected from boolean\n    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,\n    read_at DATETIME,\n    FOREIGN KEY (employee_id) REFERENCES ${KEY}_employees(employee_id),\n    FOREIGN KEY (related_id) REFERENCES ${KEY}_tasks(id)\n  )`);\n\n    // Seed initial admin user\n    const initialAdminEmployee = {\n      employee_id: 1,\n      user_name: \"admin\",\n      password: \"admin123\",\n      first_name: \"Admin\",\n      last_name: \"User\",\n      role: \"Admin\",\n      email: \"admin@eep.com\",\n      phone: \"1234567890\",\n      date_hired: new Date().toISOString(),\n      address: \"Head Office\",\n      department: \"IT\",\n      job_title: \"System Administrator\",\n      supervisor_id: null,\n    };\n\n    try {\n      // Check by employee_id, as it's unique and consistent for login\n      const existingEmployee = await sqlite.execute(`SELECT employee_id FROM ${KEY}_employees WHERE employee_id = ?`, [\n        initialAdminEmployee.employee_id,\n      ]);\n      if (existingEmployee.rows.length === 0) {\n        const hashedPassword = await hashPassword(initialAdminEmployee.password);\n        await sqlite.execute(\n          `INSERT INTO ${KEY}_employees (\n            employee_id, first_name, last_name, role, email, phone, password,\n            date_hired, user_name, address, department, job_title, supervisor_id, created_at\n          ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, datetime('now'))`,\n          [\n            initialAdminEmployee.employee_id,\n            initialAdminEmployee.first_name,\n            initialAdminEmployee.last_name,\n            initialAdminEmployee.role,\n            initialAdminEmployee.email,\n            initialAdminEmployee.phone,\n            hashedPassword,\n            initialAdminEmployee.date_hired,\n            initialAdminEmployee.user_name,\n            initialAdminEmployee.address,\n            initialAdminEmployee.department,\n            initialAdminEmployee.job_title,\n            initialAdminEmployee.supervisor_id,\n          ],\n        );\n        console.log(\"Initial admin employee seeded.\");\n      } else {\n        console.log(\"Initial admin employee already exists.\");\n      }\n    } catch (e: any) {\n      console.error(`Initial admin employee seeding error: ${e.message}`);\n    }\n\n    const url = new URL(request.url);\n    const path = url.pathname;\n    const method = request.method;\n\n    // Login endpoint\n    if (path === \"/login\" && method === \"POST\") {\n      try {\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        }\n        const hashedPassword = await hashPassword(body.password);\n\n        const result = await sqlite.execute(\n          `SELECT employee_id, user_name, role FROM ${KEY}_employees WHERE user_name = ? AND password = ?`,\n          [body.username, hashedPassword],\n        );\n\n        if (result.rows.length > 0) {\n          return new Response(\n            JSON.stringify({\n              success: true,\n              user: {\n                id: result.rows[0].employee_id, // Use employee_id as the user ID for frontend\n                username: result.rows[0].user_name,\n                role: result.rows[0].role,\n              },\n            }),\n            {\n              headers: { \"Content-Type\": \"application/json\" },\n            },\n          );\n        } else {\n          return new Response(JSON.stringify({ success: false, message: \"Invalid username or password\" }), {\n            status: 401,\n            headers: { \"Content-Type\": \"application/json\" },\n          });\n        }\n      } catch (error) {\n        console.error(\"Error during login process:\", error);\n        return new Response(\n          JSON.stringify({ success: false, message: \"An internal server error occurred during login.\" }),\n          {\n            status: 500,\n            headers: { \"Content-Type\": \"application/json\" },\n          },\n        );\n      }\n    }\n\n    // Submit Content\n    if (path === \"/submit-news\" && method === \"POST\") {\n      const body = await request.json();\n      // Expecting id from frontend (UUID)\n      if (!body.title || !body.employee_id)\n        return new Response(JSON.stringify({ success: false, message: \"Missing ID, title or employee_id\" }), {\n          status: 400,\n          headers: { \"Content-Type\": \"application/json\" },\n        });\n      try {\n        const result = await sqlite.execute(\n          `INSERT INTO ${KEY}_contents (title, main_idea, link, employee_id, created_at, updated_at, is_published, comments, published_at) VALUES (?, ?, ?, ?, datetime('now'), datetime('now'), ?, ?, ?)`,\n          [\n            body.title,\n            body.mainIdea || null,\n            body.link || null,\n            body.employee_id, // Use employee_id\n            body.isPublished || 0, // Default to 0\n            body.comments || null,\n            body.publishedAt || null,\n          ],\n        );\n\n        const lastInsertId = result.lastID;\n        const newContent = await sqlite.get(`SELECT * FROM contents WHERE id = ?`, [lastInsertId]);\n\n        return new Response(JSON.stringify({ success: true, article: newContent.rows[0] }), {\n          headers: { \"Content-Type\": \"application/json\" },\n        });\n      } catch (error: any) {\n        console.error(\"Error submitting content:\", error);\n        return new Response(JSON.stringify({ success: false, message: `Failed to submit content: ${error.message}` }), {\n          status: 500,\n          headers: { \"Content-Type\": \"application/json\" },\n        });\n      }\n    }\n\n    // --- Fetch Contents\n    if (path === \"/fetch-news\" && method === \"GET\") {\n      try {\n        const contents = await sqlite.execute(`\n            SELECT\n                c.id, c.title, c.main_idea, c.link, c.employee_id, c.reviewer_id, c.created_at, c.updated_at, c.is_published, c.comments, c.published_at,\n                e.user_name AS author_username,\n                e.first_name AS firstName,\n                e.last_name AS fatherName\n            FROM ${KEY}_contents c\n            LEFT JOIN ${KEY}_employees e ON c.employee_id = e.employee_id\n            ORDER BY c.created_at DESC\n        `);\n        return new Response(JSON.stringify({ success: true, articles: contents.rows }), {\n          headers: { \"Content-Type\": \"application/json\" },\n        });\n      } catch (error) {\n        console.error(\"Error fetching contents:\", error);\n        return new Response(JSON.stringify({ success: false, message: \"Failed to fetch contents\" }), {\n          status: 500,\n          headers: { \"Content-Type\": \"application/json\" },\n        });\n      }\n    }\n    // --- END Fetch Content ---\n\n    // Delete Content (formerly News)\n    if (path === \"/delete-news\" && method === \"DELETE\") {\n      const id = url.searchParams.get(\"id\");\n      if (!id)\n        return new Response(JSON.stringify({ success: false, message: \"Missing content ID\" }), {\n          status: 400,\n          headers: { \"Content-Type\": \"application/json\" },\n        });\n      const result = await sqlite.execute(`DELETE FROM ${KEY}_contents 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: \"Content not found\" }), {\n        status: 404,\n        headers: { \"Content-Type\": \"application/json\" },\n      });\n    }\n\n    // Edit Content (formerly News)\n    if (path === \"/edit-news\" && method === \"PUT\") {\n      try {\n        const body = await request.json();\n        const { id, title, mainIdea, link, isPublished, comments, publishedAt } = body;\n\n        if (!id || !title || !mainIdea) { // Link is conditional\n          return new Response(\n            JSON.stringify({\n              success: false,\n              message: \"Missing required fields (id, title, mainIdea) for content update\",\n            }),\n            {\n              status: 400, // Bad Request\n              headers: { \"Content-Type\": \"application/json\" },\n            },\n          );\n        }\n\n        if (isPublished === 1 && !link) { // If published, link is required\n          return new Response(\n            JSON.stringify({ success: false, message: \"URL Link is required for published content.\" }),\n            {\n              status: 400,\n              headers: { \"Content-Type\": \"application/json\" },\n            },\n          );\n        }\n\n        if (isPublished === 1 && link) { // Only validate URL if it's present and published\n          try {\n            new URL(link);\n          } catch (_) {\n            return new Response(\n              JSON.stringify({ success: false, message: \"Invalid URL format for link\" }),\n              {\n                status: 400, // Bad Request\n                headers: { \"Content-Type\": \"application/json\" },\n              },\n            );\n          }\n        }\n\n        const result = await sqlite.execute(\n          `UPDATE ${KEY}_contents SET title = ?, main_idea = ?, link = ?, is_published = ?, comments = ?, published_at = ?, updated_at = datetime('now') WHERE id = ?`,\n          [\n            title,\n            mainIdea,\n            isPublished === 1 ? link : null,\n            isPublished || 0,\n            comments || null,\n            isPublished === 1 ? publishedAt : null,\n            id,\n          ],\n        );\n\n        if (result.rowsAffected > 0) {\n          const updatedContent = await sqlite.execute(\n            `\n              SELECT\n                  c.id, c.title, c.main_idea, c.link, c.employee_id, c.reviewer_id, c.created_at, c.updated_at, c.is_published, c.comments, c.published_at,\n                  e.user_name AS author_username,\n                  e.first_name AS firstName,\n                  e.last_name AS fatherName\n              FROM ${KEY}_contents c\n              LEFT JOIN ${KEY}_employees e ON c.employee_id = e.employee_id\n              WHERE c.id = ?`,\n            [id],\n          );\n\n          if (updatedContent.rows.length > 0) {\n            return new Response(JSON.stringify({ success: true, article: updatedContent.rows[0] }), {\n              status: 200, // OK\n              headers: { \"Content-Type\": \"application/json\" },\n            });\n          } else {\n            return new Response(\n              JSON.stringify({ success: false, message: \"Content 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          return new Response(\n            JSON.stringify({ success: false, message: \"Content 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 content:\", error);\n        return new Response(JSON.stringify({ success: false, message: \"Failed to update content\" }), {\n          status: 500, // Internal Server Error\n          headers: { \"Content-Type\": \"application/json\" },\n        });\n      }\n    }\n\n    // Submit Media\n    if (path === \"/submit-media\" && method === \"POST\") {\n      const body = await request.json();\n      if (\n        !body.id || !body.platform || !body.mediaName || !body.title || !body.mainIdea || !body.sentiment\n        || !body.employee_id\n      ) // Changed author to employee_id\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      try {\n        const result = await sqlite.execute(\n          `INSERT INTO ${KEY}_media_monitored (id, platform, media_name, title, main_idea, sentiment, link, employee_id, published_date, created_at, updated_at) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, datetime('now'), datetime('now'))`,\n          [\n            body.id,\n            body.platform,\n            body.mediaName,\n            body.title,\n            body.mainIdea,\n            body.sentiment,\n            body.link || null,\n            body.employee_id, // Use employee_id\n            body.publishedDate || null,\n          ],\n        );\n        const newEntry = await sqlite.execute(`SELECT * FROM ${KEY}_media_monitored WHERE id = ?`, [\n          body.id, // Use the provided ID to retrieve\n        ]);\n        return new Response(JSON.stringify({ success: true, entry: newEntry.rows[0] }), {\n          headers: { \"Content-Type\": \"application/json\" },\n        });\n      } catch (error: any) {\n        console.error(\"Error submitting media entry:\", error);\n        return new Response(\n          JSON.stringify({ success: false, message: `Failed to submit media entry: ${error.message}` }),\n          {\n            status: 500,\n            headers: { \"Content-Type\": \"application/json\" },\n          },\n        );\n      }\n    }\n\n    // Fetch Media\n    if (path === \"/fetch-media\" && method === \"GET\") {\n      const mediaEntries = await sqlite.execute(`SELECT * FROM ${KEY}_media_monitored ORDER BY created_at DESC`);\n      return new Response(JSON.stringify({ entries: mediaEntries.rows }), {\n        headers: { \"Content-Type\": \"application/json\" },\n      });\n    }\n\n    // Delete Media\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_monitored 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    // Edit Media\n    if (path === \"/edit-media\" && method === \"PUT\") {\n      const body = await request.json();\n      const { id, platform, mediaName, title, mainIdea, sentiment, link, publishedDate } = 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_monitored SET platform = ?, media_name = ?, title = ?, main_idea = ?, sentiment = ?, link = ?, published_date = ?, updated_at = datetime('now') WHERE id = ?`,\n          [platform, mediaName, title, mainIdea, sentiment, link, publishedDate || null, id],\n        );\n\n        if (result.rowsAffected > 0) {\n          const updatedEntry = await sqlite.execute(`SELECT * FROM ${KEY}_media_monitored 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    // Generate detail report\n    if (path === \"/generate-report\" && method === \"GET\") {\n      try {\n        const newsArticlesResult = await sqlite.execute(`\n      SELECT\n        c.id,\n        c.title,\n        c.main_idea,\n        c.link,\n        c.is_published,\n        c.created_at,\n        c.employee_id AS author_id,\n        e.user_name AS author_username,\n        e.first_name AS firstName,\n        e.last_name AS fatherName\n      FROM ${KEY}_contents c\n      JOIN ${KEY}_employees e ON c.employee_id = e.employee_id\n    `);\n\n        const mediaEntriesResult = await sqlite.execute(`\n      SELECT\n        mm.id,\n        mm.platform,\n        mm.title,\n        mm.sentiment,\n        mm.created_at,\n        mm.link,\n        mm.employee_id AS author_id,\n        e.user_name AS author_username,\n        e.first_name AS firstName,\n        e.last_name AS fatherName\n      FROM ${KEY}_media_monitored mm\n      JOIN ${KEY}_employees e ON mm.employee_id = e.employee_id\n    `);\n\n        // Combine firstName and fatherName to create a fullName for each entry\n        const newsArticles = newsArticlesResult.rows.map((row: any) => ({\n          ...row,\n          authorFullName: `${row.firstName} ${row.fatherName || \"\"}`.trim(), // Handle fatherName being null\n        }));\n\n        const mediaEntries = mediaEntriesResult.rows.map((row: any) => ({\n          ...row,\n          authorFullName: `${row.firstName} ${row.fatherName || \"\"}`.trim(), // Handle fatherName being null\n        }));\n\n        return new Response(\n          JSON.stringify({\n            newsArticles,\n            mediaEntries,\n          }),\n          {\n            headers: { \"Content-Type\": \"application/json\" },\n          },\n        );\n      } catch (error) {\n        console.error(\"Failed to fetch detailed report:\", error);\n        return new Response(\n          JSON.stringify({ success: false, message: \"Failed to fetch detailed report\" }),\n          { status: 500, headers: { \"Content-Type\": \"application/json\" } },\n        );\n      }\n    }\n\n    // generate-weekly-summary endpoint\n    if (path === \"/generate-weekly-summary\" && method === \"GET\") {\n      try {\n        const url = new URL(request.url);\n        const daysParam = url.searchParams.get(\"days\");\n        let days = parseInt(daysParam || \"7\", 10); // Default to 7 if not provided or invalid\n\n        if (isNaN(days) || days <= 0) {\n          days = 7;\n          console.warn(`Invalid or missing 'days' parameter, defaulting to ${days} days.`);\n        }\n\n        const relevantDate = new Date();\n        relevantDate.setDate(relevantDate.getDate() - days);\n        const relevantDateISO = relevantDate.toISOString();\n\n        const newsCountsResult = await sqlite.execute(\n          `\n      SELECT\n        c.employee_id AS author_id,\n        e.user_name AS author_username,\n        e.first_name AS firstName,\n        e.last_name AS fatherName,\n        SUM(CASE WHEN c.is_published = 1 THEN 1 ELSE 0 END) as publishedContent,\n        SUM(CASE WHEN c.is_published = 0 THEN 1 ELSE 0 END) as draftContent\n      FROM ${KEY}_contents c\n      JOIN ${KEY}_employees e ON c.employee_id = e.employee_id\n      WHERE c.created_at >= ?\n      GROUP BY c.employee_id, e.user_name, e.first_name, e.last_name\n    `,\n          [relevantDateISO],\n        );\n\n        const mediaCountsResult = await sqlite.execute(\n          `\n      SELECT\n        mm.employee_id AS author_id,\n        e.user_name AS author_username,\n        e.first_name AS firstName,\n        e.last_name AS fatherName,\n        COUNT(*) as monitoredMedia\n      FROM ${KEY}_media_monitored mm\n      JOIN ${KEY}_employees e ON mm.employee_id = e.employee_id\n      WHERE mm.created_at >= ?\n      GROUP BY mm.employee_id, e.user_name, e.first_name, e.last_name\n    `,\n          [relevantDateISO],\n        );\n\n        const weeklySummaryMap = new Map();\n\n        for (const row of newsCountsResult.rows) {\n          const fullName = `${(row as any).firstName} ${(row as any).fatherName || \"\"}`.trim();\n          weeklySummaryMap.set((row as any).author_id, {\n            author_id: (row as any).author_id,\n            author_username: (row as any).author_username,\n            authorFullName: fullName,\n            publishedContent: (row as any).publishedContent,\n            draftContent: (row as any).draftContent,\n            monitoredMedia: 0,\n          });\n        }\n\n        for (const row of mediaCountsResult.rows) {\n          const fullName = `${(row as any).firstName} ${(row as any).fatherName || \"\"}`.trim();\n          if (weeklySummaryMap.has((row as any).author_id)) {\n            weeklySummaryMap.get((row as any).author_id).monitoredMedia = (row as any).monitoredMedia;\n          } else {\n            weeklySummaryMap.set((row as any).author_id, {\n              author_id: (row as any).author_id,\n              author_username: (row as any).author_username,\n              authorFullName: fullName,\n              publishedContent: 0,\n              draftContent: 0,\n              monitoredMedia: row.monitoredMedia,\n            });\n          }\n        }\n\n        const weeklySummary = Array.from(weeklySummaryMap.values());\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(\n          JSON.stringify({ success: false, message: \"Failed to generate weekly summary\" }),\n          { status: 500, headers: { \"Content-Type\": \"application/json\" } },\n        );\n      }\n    }\n\n    // Fetch Employees\n    if (path === \"/fetch-employees\" && method === \"GET\") {\n      try {\n        const employees = await sqlite.execute(`\n          SELECT\n            employee_id AS employeeId, user_name AS username, first_name AS firstName, last_name AS fatherName,\n            role, job_title AS jobTitle, grade, sex, email, phone AS phoneNumber, department,\n            date_hired AS dateOfEmployment, status, date_of_birth As dateOfBirth, address, supervisor_id AS supervisor, created_at, updated_at\n          FROM ${KEY}_employees ORDER BY first_name ASC\n        `);\n        return new Response(JSON.stringify({ success: true, employees: employees.rows }), {\n          headers: { \"Content-Type\": \"application/json\" },\n        });\n      } catch (error) {\n        console.error(\"Error fetching employees:\", error);\n        return new Response(JSON.stringify({ success: false, message: \"Failed to fetch employees\" }), {\n          status: 500,\n          headers: { \"Content-Type\": \"application/json\" },\n        });\n      }\n    }\n    // --- END Fetch Employees ---\n\n    // Fetch Single Employee by employee_id\n    if (path.startsWith(\"/fetch-employee/\") && method === \"GET\") {\n      try {\n        const id = path.split(\"/\").pop(); // This 'id' is the PK 'employee_id'\n        if (!id || isNaN(parseInt(id))) {\n          return new Response(JSON.stringify({ success: false, message: \"Invalid employee ID\" }), {\n            status: 400,\n            headers: { \"Content-Type\": \"application/json\" },\n          });\n        }\n\n        const result = await sqlite.execute(\n          `\n          SELECT\n             employee_id AS employeeId, user_name AS username, first_name AS firstName, last_name AS fatherName,\n            role, job_title AS jobTitle, grade, sex, email, phone AS phoneNumber, department,\n            date_hired AS dateOfEmployment, status, date_of_birth AS dateOfBirth, address, supervisor_id AS supervisor, created_at, updated_at\n          FROM ${KEY}_employees WHERE employee_id = ?`,\n          [id],\n        );\n\n        if (result.rows.length > 0) {\n          return new Response(JSON.stringify({ success: true, employee: result.rows[0] }), {\n            headers: { \"Content-Type\": \"application/json\" },\n          });\n        } else {\n          return new Response(JSON.stringify({ success: false, message: \"Employee not found\" }), {\n            status: 404,\n            headers: { \"Content-Type\": \"application/json\" },\n          });\n        }\n      } catch (error) {\n        console.error(\"Error fetching employee by ID:\", error);\n        return new Response(JSON.stringify({ success: false, message: \"Failed to fetch employee details\" }), {\n          status: 500,\n          headers: { \"Content-Type\": \"application/json\" },\n        });\n      }\n    }\n    // --- END Fetch Single Employee by ID ---\n\n    // Create Employee\n    if (path === \"/create-employee\" && method === \"POST\") {\n      try {\n        const body = await request.json();\n\n        // Basic validation for required fields for creation\n        const requiredFields = [\n          \"employeeId\",\n          \"username\",\n          \"password\",\n          \"firstName\",\n          \"jobTitle\",\n          \"email\",\n          \"phoneNumber\",\n          \"department\",\n          \"dateOfEmployment\",\n        ];\n\n        for (const field of requiredFields) {\n          if (!body[field]) {\n            return new Response(\n              JSON.stringify({\n                success: false,\n                message: `Missing required field: ${field}`,\n              }),\n              { status: 400, headers: { \"Content-Type\": \"application/json\" } },\n            );\n          }\n        }\n\n        // Email format validation\n        if (!/\\S+@\\S+\\.\\S+/.test(body.email)) {\n          return new Response(\n            JSON.stringify({ success: false, message: \"Invalid email format\" }),\n            { status: 400, headers: { \"Content-Type\": \"application/json\" } },\n          );\n        }\n\n        // Hashed the password if found\n        if (body.password) {\n          body.password = await hashPassword(body.password);\n        }\n\n        // Supervisor validation for non-CEO roles\n        if (body.role !== \"CEO\" && !body.supervisor) {\n          return new Response(\n            JSON.stringify({\n              success: false,\n              message: \"Supervisor is required for this role.\",\n            }),\n            { status: 400, headers: { \"Content-Type\": \"application/json\" } },\n          );\n        }\n\n        // Insert into database\n        const result = await sqlite.execute(\n          `INSERT INTO ${KEY}_employees (\n            employee_id, user_name, password, first_name, last_name, role, job_title, grade, sex,\n            email, phone, department, date_hired, status, date_of_birth, address, supervisor_id\n           ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,\n          [\n            body.employeeId,\n            body.username,\n            body.password,\n            body.firstName,\n            body.fatherName || null,\n            body.role,\n            body.jobTitle,\n            body.grade || null,\n            body.sex || null,\n            body.email,\n            body.phoneNumber,\n            body.department,\n            body.dateOfEmployment,\n            body.status || \"active\",\n            body.dateOfBirth,\n            body.address,\n            body.role === \"CEO\" ? null : (body.supervisor || null), // Supervisor is null if CEO, otherwise use provided or null\n          ],\n        );\n\n        if (result.rowsAffected > 0) {\n          // Fetch the newly created employee to return it with its ID\n          const newEmployeeResult = await sqlite.execute(\n            `SELECT employee_id AS employeeId, user_name AS username, first_name AS firstName, last_name AS fatherName,\n                role, job_title AS jobTitle, grade, sex, email, phone AS phoneNumber, department,\n                date_hired AS dateOfEmployment, status, date_of_birth AS dateOfBirth,\n                address, supervisor_id AS supervisor, created_at, updated_at\n                FROM ${KEY}_employees WHERE employee_id = ?`,\n            [body.employeeId],\n          );\n          return new Response(\n            JSON.stringify({\n              success: true,\n              message: \"Employee created successfully\",\n              employee: newEmployeeResult.rows[0],\n            }),\n            { status: 201, headers: { \"Content-Type\": \"application/json\" } }, // 201 Created\n          );\n        } else {\n          return new Response(\n            JSON.stringify({ success: false, message: \"Failed to create employee\" }),\n            { status: 500, headers: { \"Content-Type\": \"application/json\" } },\n          );\n        }\n      } catch (error) {\n        console.error(\"Error creating employee:\", error);\n        // Check for unique constraint errors\n        if (\n          error.message && (error.message.includes(\"UNIQUE constraint failed: MediaMonitoring_1_employees.employee_id\")\n            || error.message.includes(\"UNIQUE constraint failed: MediaMonitoring_1_employees.user_name\")\n            || error.message.includes(\"UNIQUE constraint failed: MediaMonitoring_1_employees.email\"))\n        ) {\n          return new Response(\n            JSON.stringify({ success: false, message: \"Employee ID, Username, or Email already exists.\" }),\n            { status: 409, headers: { \"Content-Type\": \"application/json\" } }, // 409 Conflict\n          );\n        }\n        return new Response(\n          JSON.stringify({ success: false, message: \"An error occurred while creating the employee.\" }),\n          { status: 500, headers: { \"Content-Type\": \"application/json\" } },\n        );\n      }\n    }\n    // --- END Create Employee ---\n\n    // Update Employee by employee_id\n    if (path.startsWith(\"/update-employee/\") && method === \"PUT\") {\n      try {\n        const id = path.split(\"/\").pop(); // This 'id' is the PK 'id'\n        if (!id || isNaN(parseInt(id))) {\n          return new Response(JSON.stringify({ success: false, message: \"Invalid employee ID\" }), {\n            status: 400,\n            headers: { \"Content-Type\": \"application/json\" },\n          });\n        }\n\n        const body = await request.json();\n\n        const allowedFields = [\n          \"firstName\", // maps to first_name\n          \"fatherName\", // maps to last_name\n          \"role\",\n          \"jobTitle\", // maps to job_title\n          \"grade\", // New\n          \"sex\", // New\n          \"email\",\n          \"phoneNumber\", // maps to phone\n          \"department\",\n          \"dateOfEmployment\", // maps to date_hired\n          \"status\", // New\n          \"dateOfBirth\", // New\n          \"address\",\n          \"supervisor\", // maps to supervisor_id\n          \"password\",\n        ];\n\n        const updateFields = [];\n        const updateValues = [];\n\n        // Hash password if present\n        if (body.password) {\n          body.password = await hashPassword(body.password);\n        }\n\n        for (const field of allowedFields) {\n          if (body[field] !== undefined) {\n            let dbFieldName = field;\n            let value = body[field];\n\n            // Map frontend field names to database column names\n            if (field === \"firstName\") dbFieldName = \"first_name\";\n            else if (field === \"fatherName\") dbFieldName = \"last_name\";\n            else if (field === \"jobTitle\") dbFieldName = \"job_title\";\n            else if (field === \"phoneNumber\") dbFieldName = \"phone\";\n            else if (field === \"dateOfEmployment\") dbFieldName = \"date_hired\";\n            else if (field === \"status\") dbFieldName = \"status\";\n            else if (field === \"dateOfBirth\") dbFieldName = \"date_of_birth\";\n            else if (field === \"supervisor\") dbFieldName = \"supervisor_id\";\n\n            updateFields.push(`${dbFieldName} = ?`);\n            // Handle null for empty strings for optional fields and for supervisor_id if CEO\n            if (\n              (dbFieldName === \"last_name\" || dbFieldName === \"grade\" || dbFieldName === \"sex\"\n                || dbFieldName === \"address\") && value === \"\"\n            ) {\n              updateValues.push(null);\n            } else if (dbFieldName === \"supervisor_id\" && body.role === \"CEO\") {\n              updateValues.push(null);\n            }\n            else {\n              updateValues.push(value);\n            }\n          }\n        }\n\n        const requiredAllowedFields = [\n          \"firstName\",\n          \"jobTitle\",\n          \"email\",\n          \"phoneNumber\",\n          \"department\",\n          \"dateOfEmployment\",\n          \"status\",\n          \"address\",\n        ];\n        for (const field of requiredAllowedFields) {\n          if (body[field] === undefined || body[field] === null || body[field] === \"\") {\n            return new Response(JSON.stringify({ success: false, message: `Missing required field: ${field}` }), {\n              status: 400,\n              headers: { \"Content-Type\": \"application/json\" },\n            });\n          }\n        }\n\n        // Special validation for supervisor based on role for update\n        if (\n          body.role !== \"CEO\" && (body.supervisor === undefined || body.supervisor === null || body.supervisor === \"\")\n        ) {\n          return new Response(JSON.stringify({ success: false, message: \"Supervisor is required for this role.\" }), {\n            status: 400,\n            headers: { \"Content-Type\": \"application/json\" },\n          });\n        }\n        // If role is CEO, ensure supervisor is explicitly set to null\n        if (body.role === \"CEO\") {\n          const supervisorIndex = updateFields.indexOf(\"supervisor_id = ?\");\n          if (supervisorIndex !== -1) {\n            updateValues[supervisorIndex] = null; // Update existing supervisor_id value\n          } else {\n            updateFields.push(\"supervisor_id = ?\"); // Add if not already present\n            updateValues.push(null);\n          }\n        }\n\n        if (body.email !== undefined && !/\\S+@\\S+\\.\\S+/.test(body.email)) {\n          return new Response(JSON.stringify({ success: false, message: \"Invalid email format\" }), {\n            status: 400,\n            headers: { \"Content-Type\": \"application/json\" },\n          });\n        }\n\n        if (updateFields.length === 0) {\n          return new Response(JSON.stringify({ success: false, message: \"No valid fields provided for update\" }), {\n            status: 400,\n            headers: { \"Content-Type\": \"application/json\" },\n          });\n        }\n\n        updateFields.push(\"updated_at = datetime('now')\");\n        updateValues.push(id); // Add the PK 'id' to the end for the WHERE clause\n\n        const result = await sqlite.execute(\n          `UPDATE ${KEY}_employees SET ${updateFields.join(\", \")} WHERE employee_id = ?`,\n          updateValues,\n        );\n\n        if (result.rowsAffected > 0) {\n          const updatedEmployee = await sqlite.execute(\n            `\n        SELECT\n            employee_id AS employeeId, user_name AS username, first_name AS firstName, last_name AS fatherName,\n            role, job_title AS jobTitle, grade, sex, email, phone AS phoneNumber, department,\n            date_hired AS dateOfEmployment, status, date_of_birth AS dateOfBirth,\n            address, supervisor_id AS supervisor, created_at, updated_at\n        FROM ${KEY}_employees WHERE employee_id = ?`,\n            [id],\n          );\n          return new Response(JSON.stringify({ success: true, employee: updatedEmployee.rows[0] }), {\n            status: 200, // OK\n            headers: { \"Content-Type\": \"application/json\" },\n          });\n        } else {\n          const existingCheck = await sqlite.execute(`SELECT employee_id FROM ${KEY}_employees WHERE employee_id = ?`, [\n            id,\n          ]);\n          if (existingCheck.rows.length === 0) {\n            return new Response(JSON.stringify({ success: false, message: \"Employee not found or no changes made.\" }), {\n              status: 404,\n              headers: { \"Content-Type\": \"application/json\" },\n            });\n          } else { // Employee found but no rows affected, means no change or a logic issue\n            return new Response(JSON.stringify({ success: false, message: \"No changes detected or update failed.\" }), {\n              status: 200, // Still 200 OK as request was valid but no change.\n              headers: { \"Content-Type\": \"application/json\" },\n            });\n          }\n        }\n      } catch (error) {\n        console.error(\"Error updating employee by ID:\", error);\n        // Check for unique constraint errors for username/email during update\n        if (\n          error.message && (error.message.includes(\"UNIQUE constraint failed: MediaMonitoring_1_employees.user_name\")\n            || error.message.includes(\"UNIQUE constraint failed: MediaMonitoring_1_employees.email\"))\n        ) {\n          return new Response(\n            JSON.stringify({ success: false, message: \"Username or Email already exists for another employee.\" }),\n            { status: 409, headers: { \"Content-Type\": \"application/json\" } }, // 409 Conflict\n          );\n        }\n        return new Response(JSON.stringify({ success: false, message: \"Failed to update employee details\" }), {\n          status: 500,\n          headers: { \"Content-Type\": \"application/json\" },\n        });\n      }\n    }\n\n    // Delete Employee by employee_id\n    if (path.startsWith(\"/delete-employee/\") && method === \"DELETE\") {\n      try {\n        const id = path.split(\"/\").pop(); // This 'id' is the PK 'id'\n        if (!id || isNaN(parseInt(id))) {\n          return new Response(JSON.stringify({ success: false, message: \"Invalid employee ID\" }), {\n            status: 400,\n            headers: { \"Content-Type\": \"application/json\" },\n          });\n        }\n\n        const result = await sqlite.execute(`DELETE FROM ${KEY}_employees WHERE employee_id = ?`, [id]);\n\n        if (result.rowsAffected > 0) {\n          return new Response(JSON.stringify({ success: true, message: \"Employee deleted successfully\" }), {\n            status: 200,\n            headers: { \"Content-Type\": \"application/json\" },\n          });\n        } else {\n          return new Response(JSON.stringify({ success: false, message: \"Employee not found\" }), {\n            status: 404,\n            headers: { \"Content-Type\": \"application/json\" },\n          });\n        }\n      } catch (error) {\n        console.error(\"Error deleting employee:\", error);\n        return new Response(JSON.stringify({ success: false, message: \"Failed to delete employee\" }), {\n          status: 500,\n          headers: { \"Content-Type\": \"application/json\" },\n        });\n      }\n    }\n    // --- END Delete Employee ---\n\n    // submit task\n    if (path === \"/submit-task\" && method === \"POST\") {\n      const body = await request.json();\n\n      // Basic validation\n      if (!body.title || body.assignee_id === \"\" || body.manager_id === \"\" || !body.due_date)\n        return new Response(JSON.stringify({ success: false, message: \"Missing required fields\" }), {\n          status: 400,\n          headers: { \"Content-Type\": \"application/json\" },\n        });\n\n      const assigneeIdNum = Number(body.assignee_id);\n      const managerIdNum = Number(body.manager_id);\n\n      if (isNaN(assigneeIdNum) || isNaN(managerIdNum)) {\n        return new Response(JSON.stringify({ success: false, message: \"Invalid Assignee ID or Manager ID\" }), {\n          status: 400,\n          headers: { \"Content-Type\": \"application/json\" },\n        });\n      }\n\n      try {\n        const result = await sqlite.execute(\n          `INSERT INTO ${KEY}_tasks\n        (title, description, assignee_id, manager_id, created_at, updated_at, due_date, status, priority, final_remark, incompletion_reason, attachments)\n        VALUES (?, ?, ?, ?, datetime('now'), datetime('now'), ?, ?, ?, ?, ?, ?)`,\n          [\n            body.title,\n            body.description || null,\n            assigneeIdNum,\n            managerIdNum,\n            body.due_date,\n            body.status || \"pending\",\n            body.priority || \"medium\",\n            body.final_remark || null,\n            body.incompletion_reason || null,\n            body.attachments || null,\n          ],\n        );\n\n        const newTask = await sqlite.execute(`SELECT * FROM ${KEY}_tasks WHERE id = ?`, [\n          result.lastInsertRowid,\n        ]);\n\n        return new Response(JSON.stringify({ success: true, task: newTask.rows[0] }), {\n          headers: { \"Content-Type\": \"application/json\" },\n        });\n      } catch (error: any) {\n        console.error(\"Error creating task:\", error);\n        if (error.message && error.message.includes(\"FOREIGN KEY constraint failed\")) {\n          return new Response(\n            JSON.stringify({ success: false, message: \"Invalid Assignee ID or Manager ID. Employee not found.\" }),\n            {\n              status: 400,\n              headers: { \"Content-Type\": \"application/json\" },\n            },\n          );\n        }\n        return new Response(JSON.stringify({ success: false, message: \"Database error creating task.\" }), {\n          status: 500,\n          headers: { \"Content-Type\": \"application/json\" },\n        });\n      }\n    }\n\n    // Get tasks\n    if (path === \"/tasks\" && method === \"GET\") {\n      try {\n        const statusFilter = url.searchParams.get(\"status\");\n        const assigneeFilter = url.searchParams.get(\"assignee_id\");\n        const userId = url.searchParams.get(\"user_id\");\n        const userRole = url.searchParams.get(\"user_role\");\n\n        let query = `SELECT * FROM ${KEY}_tasks`;\n        const conditions = [];\n        const values = [];\n\n        if (statusFilter && statusFilter !== \"all\") {\n          conditions.push(\"status = ?\");\n          values.push(statusFilter);\n        }\n\n        if (userRole === \"Employee\") {\n          conditions.push(\"(assignee_id = ? OR manager_id = ?)\");\n          values.push(Number(userId), Number(userId));\n        } else if (userRole === \"Manager\") {\n          if (assigneeFilter) {\n            conditions.push(\"assignee_id = ?\");\n            values.push(Number(assigneeFilter));\n          } else {\n            conditions.push(\"(assignee_id = ? OR manager_id = ?)\");\n            values.push(Number(userId), Number(userId));\n          }\n        } else if (userRole === \"Admin\" || userRole === \"CEO\" || userRole === \"Director\") {\n          if (assigneeFilter) {\n            conditions.push(\"assignee_id = ?\");\n            values.push(Number(assigneeFilter));\n          }\n        }\n\n        if (conditions.length > 0) {\n          query += \" WHERE \" + conditions.join(\" AND \");\n        }\n\n        query += \" ORDER BY due_date ASC\";\n\n        const result = await sqlite.execute(query, values);\n\n        return new Response(JSON.stringify({ success: true, tasks: result.rows }), {\n          headers: { \"Content-Type\": \"application/json\" },\n        });\n      } catch (error) {\n        console.error(\"Error fetching tasks:\", error);\n        return new Response(JSON.stringify({ success: false, message: \"Failed to fetch tasks\" }), {\n          status: 500,\n          headers: { \"Content-Type\": \"application/json\" },\n        });\n      }\n    }\n\n    // GET /tasks/:id ---\n    if (path.startsWith(\"/tasks/\") && method === \"GET\") {\n      const taskId = path.split(\"/\")[2];\n      if (!taskId || isNaN(Number(taskId))) {\n        return new Response(JSON.stringify({ success: false, message: \"Invalid task ID\" }), {\n          status: 400,\n          headers: { \"Content-Type\": \"application/json\" },\n        });\n      }\n      try {\n        const result = await sqlite.execute(`SELECT * FROM ${KEY}_tasks WHERE id = ?`, [\n          Number(taskId),\n        ]);\n        if (result.rows.length === 0)\n          return new Response(JSON.stringify({ success: false, message: \"Task not found\" }), {\n            status: 404,\n            headers: { \"Content-Type\": \"application/json\" },\n          });\n        return new Response(JSON.stringify({ success: true, task: result.rows[0] }), {\n          headers: { \"Content-Type\": \"application/json\" },\n        });\n      } catch (error) {\n        console.error(\"Error fetching single task:\", error);\n        return new Response(JSON.stringify({ success: false, message: \"Database error fetching task.\" }), {\n          status: 500,\n          headers: { \"Content-Type\": \"application/json\" },\n        });\n      }\n    }\n\n    // PATCH /tasks/:id ---\n    if (path.startsWith(\"/tasks/\") && method === \"PATCH\") {\n      const taskId = path.split(\"/\")[2];\n      if (!taskId || isNaN(Number(taskId))) {\n        return new Response(JSON.stringify({ success: false, message: \"Invalid task ID\" }), {\n          status: 400,\n          headers: { \"Content-Type\": \"application/json\" },\n        });\n      }\n      const body = await request.json();\n      const { userId, userRole, ...updateFieldsFromBody } = body;\n\n      const requestingUserId = userId;\n      const requestingUserRole = userRole;\n\n      const currentTaskResult = await sqlite.execute(`SELECT * FROM ${KEY}_tasks WHERE id = ?`, [Number(taskId)]);\n      if (currentTaskResult.rows.length === 0) {\n        return new Response(JSON.stringify({ success: false, message: \"Task not found\" }), {\n          status: 404,\n          headers: { \"Content-Type\": \"application/json\" },\n        });\n      }\n      const currentTask = currentTaskResult.rows[0];\n      const currentStatus = currentTask.status;\n      const taskManagerId = currentTask.manager_id;\n      const taskAssigneeId = currentTask.assignee_id;\n\n      let updates = [];\n      let values = [];\n\n      const allowedEditableFields = [\n        \"title\",\n        \"description\",\n        \"assignee_id\",\n        \"manager_id\",\n        \"due_date\",\n        \"priority\",\n        \"final_remark\",\n        \"incompletion_reason\",\n        \"attachments\",\n      ];\n\n      if (requestingUserRole === \"Admin\" || requestingUserRole === \"CEO\" || requestingUserRole === \"Director\") {\n        for (const field of allowedEditableFields) {\n          if (\n            updateFieldsFromBody.hasOwnProperty(field) && field !== \"status\" && field !== \"final_remark\"\n            && field !== \"incompletion_reason\"\n          ) {\n            updates.push(`${field} = ?`);\n            values.push(updateFieldsFromBody[field]);\n          }\n        }\n      }\n\n      if (updateFieldsFromBody.hasOwnProperty(\"status\")) {\n        const newStatus = updateFieldsFromBody.status;\n\n        let isAuthorized = false;\n        const isTaskAssignee = requestingUserId === taskAssigneeId;\n        const isTaskManager = requestingUserId === taskManagerId;\n\n        if (requestingUserRole === \"Admin\" || requestingUserRole === \"CEO\" || requestingUserRole === \"Director\") {\n          isAuthorized = true;\n        } else if (requestingUserRole === \"Employee\" || requestingUserRole === \"Manager\") {\n          switch (newStatus) {\n            case \"in_progress\":\n              if (currentStatus === \"pending\" && (isTaskAssignee || isTaskManager)) {\n                isAuthorized = true;\n              }\n              if (\n                (currentStatus === \"completed\" || currentStatus === \"cancelled\") && (isTaskAssignee || isTaskManager)\n              ) {\n                isAuthorized = true;\n              }\n              break;\n            case \"completion_requested\":\n              if (currentStatus === \"in_progress\" && isTaskAssignee) {\n                isAuthorized = true;\n              }\n              break;\n            case \"completed\":\n              if (currentStatus === \"completion_requested\" && isTaskManager) {\n                isAuthorized = true;\n              }\n              break;\n            case \"cancelled\":\n              if (\n                (currentStatus === \"pending\" || currentStatus === \"in_progress\"\n                  || currentStatus === \"completion_requested\") && isTaskManager\n              ) {\n                isAuthorized = true;\n              }\n              break;\n            case \"pending\":\n              if ((currentStatus === \"completed\" || currentStatus === \"cancelled\") && isTaskManager) {\n                isAuthorized = true;\n              }\n              break;\n            default:\n              isAuthorized = false;\n          }\n        }\n\n        if (!isAuthorized) {\n          console.warn(\n            `Unauthorized status change attempt: User ${requestingUserId} (Role: ${requestingUserRole}) tried to change task ${taskId} from ${currentStatus} to ${newStatus}.`,\n          );\n          return new Response(\n            JSON.stringify({ success: false, message: \"You are not authorized to change the status of this task.\" }),\n            {\n              status: 403,\n              headers: { \"Content-Type\": \"application/json\" },\n            },\n          );\n        }\n\n        updates.push(\"status = ?\");\n        values.push(newStatus);\n\n        if (newStatus === \"completed\") {\n          updates.push(\"completed_at = datetime('now')\");\n        } else {\n          if (currentStatus === \"completed\") {\n            updates.push(\"completed_at = NULL\");\n          }\n          if (newStatus !== \"completed\") {\n            updates.push(\"completed_at = NULL\");\n          }\n        }\n\n        if (newStatus === \"completed\" || newStatus === \"cancelled\") {\n          if (updateFieldsFromBody.hasOwnProperty(\"final_remark\")) {\n            updates.push(\"final_remark = ?\");\n            values.push(updateFieldsFromBody.final_remark || null);\n          }\n          if (updateFieldsFromBody.hasOwnProperty(\"incompletion_reason\")) {\n            updates.push(\"incompletion_reason = ?\");\n            values.push(updateFieldsFromBody.incompletion_reason || null);\n          }\n        } else {\n          if (currentStatus === \"completed\" || currentStatus === \"cancelled\") {\n            updates.push(\"final_remark = NULL\");\n            updates.push(\"incompletion_reason = NULL\");\n          }\n          if (newStatus !== \"completed\" && newStatus !== \"cancelled\") {\n            updates.push(\"final_remark = NULL\");\n            updates.push(\"incompletion_reason = NULL\");\n          }\n        }\n      } else {\n        if (currentStatus === \"completed\" || currentStatus === \"cancelled\") {\n          if (updateFieldsFromBody.hasOwnProperty(\"final_remark\")) {\n            updates.push(\"final_remark = ?\");\n            values.push(updateFieldsFromBody.final_remark || null);\n          }\n          if (updateFieldsFromBody.hasOwnProperty(\"incompletion_reason\")) {\n            updates.push(\"incompletion_reason = ?\");\n            values.push(updateFieldsFromBody.incompletion_reason || null);\n          }\n        }\n      }\n\n      if (updates.length === 0)\n        return new Response(JSON.stringify({ success: false, message: \"No valid fields to update\" }), {\n          status: 400,\n          headers: { \"Content-Type\": \"application/json\" },\n        });\n\n      updates.push(\"updated_at = datetime('now')\");\n      const updateQuery = `UPDATE ${KEY}_tasks SET ${updates.join(\", \")} WHERE id = ?`;\n      values.push(Number(taskId));\n\n      try {\n        const result = await sqlite.execute(updateQuery, values);\n\n        if (result.rowsAffected === 0) {\n          const unchangedTask = await sqlite.execute(`SELECT * FROM ${KEY}_tasks WHERE id = ?`, [\n            Number(taskId),\n          ]);\n          return new Response(\n            JSON.stringify({ success: true, message: \"No changes detected\", task: unchangedTask.rows[0] }),\n            {\n              status: 200,\n              headers: { \"Content-Type\": \"application/json\" },\n            },\n          );\n        }\n\n        const updatedTask = await sqlite.execute(`SELECT * FROM ${KEY}_tasks WHERE id = ?`, [\n          Number(taskId),\n        ]);\n\n        if (updatedTask.rows.length === 0) {\n          return new Response(JSON.stringify({ success: false, message: \"Task updated but could not be retrieved.\" }), {\n            status: 500,\n            headers: { \"Content-Type\": \"application/json\" },\n          });\n        }\n\n        return new Response(JSON.stringify({ success: true, task: updatedTask.rows[0] }), {\n          headers: { \"Content-Type\": \"application/json\" },\n        });\n      } catch (error: any) {\n        console.error(\"Error patching task:\", error);\n        if (error.message && error.message.includes(\"FOREIGN KEY constraint failed\")) {\n          return new Response(\n            JSON.stringify({ success: false, message: \"Invalid Assignee ID or Manager ID. Employee not found.\" }),\n            {\n              status: 400,\n              headers: { \"Content-Type\": \"application/json\" },\n            },\n          );\n        }\n        return new Response(JSON.stringify({ success: false, message: \"Database error updating task.\" }), {\n          status: 500,\n          headers: { \"Content-Type\": \"application/json\" },\n        });\n      }\n    }\n\n    // DELETE /tasks/:id ---\n    if (path.startsWith(\"/tasks/\") && method === \"DELETE\") {\n      const taskId = path.split(\"/\")[2];\n      if (!taskId || isNaN(Number(taskId))) {\n        return new Response(JSON.stringify({ success: false, message: \"Invalid task ID\" }), {\n          status: 400,\n          headers: { \"Content-Type\": \"application/json\" },\n        });\n      }\n\n      const body = await request.json();\n      const { userId, userRole } = body;\n\n      const requestingUserId = userId;\n      const requestingUserRole = userRole;\n\n      const taskResult = await sqlite.execute(`SELECT manager_id FROM ${KEY}_tasks WHERE id = ?`, [\n        Number(taskId),\n      ]);\n      if (taskResult.rows.length === 0) {\n        return new Response(JSON.stringify({ success: false, message: \"Task not found\" }), {\n          status: 404,\n          headers: { \"Content-Type\": \"application/json\" },\n        });\n      }\n      const taskManagerId = taskResult.rows[0].manager_id;\n\n      const isAuthorizedToDelete = requestingUserRole === \"Admin\" || requestingUserRole === \"CEO\"\n        || requestingUserRole === \"Director\" || requestingUserId === taskManagerId;\n\n      if (!isAuthorizedToDelete) {\n        console.warn(\n          `Unauthorized delete attempt: User ${requestingUserId} (Role: ${requestingUserRole}) tried to delete task ${taskId}.`,\n        );\n        return new Response(\n          JSON.stringify({ success: false, message: \"You are not authorized to delete this task.\" }),\n          {\n            status: 403,\n            headers: { \"Content-Type\": \"application/json\" },\n          },\n        );\n      }\n\n      try {\n        const result = await sqlite.execute(`DELETE FROM ${KEY}_tasks WHERE id = ?`, [Number(taskId)]);\n        if (result.rowsAffected === 0) {\n          return new Response(JSON.stringify({ success: false, message: \"Task not found after auth check?\" }), {\n            status: 404,\n            headers: { \"Content-Type\": \"application/json\" },\n          });\n        }\n        return new Response(JSON.stringify({ success: true, message: \"Task deleted\" }), {\n          headers: { \"Content-Type\": \"application/json\" },\n        });\n      } catch (error) {\n        console.error(\"Error deleting task:\", error);\n        return new Response(JSON.stringify({ success: false, message: \"Database error deleting task.\" }), {\n          status: 500,\n          headers: { \"Content-Type\": \"application/json\" },\n        });\n      }\n    }\n\n    // Fetch Comments\n    if (path === \"/fetch-comments\" && method === \"GET\") {\n      try {\n        const contentId = url.searchParams.get(\"content_id\"); // Optional: fetch for specific content\n        let query = `\n          SELECT\n            c.id, c.employee_id, c.comment, c.created_at, c.updated_at, c.content_id,\n            e.user_name AS author_username,\n            e.first_name AS firstName,\n            e.last_name AS fatherName\n          FROM ${KEY}_comments c\n          JOIN ${KEY}_employees e ON c.employee_id = e.employee_id\n        `;\n        const values = [];\n        if (contentId) {\n          query += ` WHERE c.content_id = ?`;\n          values.push(contentId);\n        }\n        query += ` ORDER BY c.created_at ASC`;\n\n        const comments = await sqlite.execute(query, values);\n        return new Response(JSON.stringify({ success: true, comments: comments.rows }), {\n          headers: { \"Content-Type\": \"application/json\" },\n        });\n      } catch (error) {\n        console.error(\"Error fetching comments:\", error);\n        return new Response(JSON.stringify({ success: false, message: \"Failed to fetch comments\" }), {\n          status: 500,\n          headers: { \"Content-Type\": \"application/json\" },\n        });\n      }\n    }\n\n    // Submit Comment\n    if (path === \"/submit-comment\" && method === \"POST\") {\n      const body = await request.json();\n      const { content_id, employee_id, comment } = body;\n\n      if (!content_id || !employee_id || !comment || comment.trim() === \"\") {\n        return new Response(\n          JSON.stringify({ success: false, message: \"Missing content ID, employee ID, or comment text\" }),\n          {\n            status: 400,\n            headers: { \"Content-Type\": \"application/json\" },\n          },\n        );\n      }\n\n      try {\n        const newCommentId = crypto.randomUUID(); // Generate UUID for the new comment\n\n        const result = await sqlite.execute(\n          `INSERT INTO ${KEY}_comments (id, content_id, employee_id, comment, created_at, updated_at) VALUES (?, ?, ?, ?, datetime('now'), datetime('now'))`,\n          [newCommentId, content_id, employee_id, comment],\n        );\n\n        // Fetch the newly inserted comment with author details\n        const newComment = await sqlite.execute(\n          `\n          SELECT\n            c.id, c.employee_id, c.comment, c.created_at, c.updated_at, c.content_id,\n            e.user_name AS author_username,\n            e.first_name AS firstName,\n            e.last_name AS fatherName\n          FROM ${KEY}_comments c\n          JOIN ${KEY}_employees e ON c.employee_id = e.employee_id\n          WHERE c.id = ?\n        `,\n          [newCommentId],\n        );\n\n        if (newComment.rows.length > 0) {\n          return new Response(JSON.stringify({ success: true, comment: newComment.rows[0] }), {\n            headers: { \"Content-Type\": \"application/json\" },\n          });\n        } else {\n          throw new Error(\"Comment inserted but could not be retrieved.\");\n        }\n      } catch (error: any) {\n        console.error(\"Error submitting comment:\", error);\n        if (error.message && error.message.includes(\"FOREIGN KEY constraint failed\")) {\n          return new Response(\n            JSON.stringify({\n              success: false,\n              message: \"Invalid Content ID or Employee ID. Content or employee not found.\",\n            }),\n            {\n              status: 400,\n              headers: { \"Content-Type\": \"application/json\" },\n            },\n          );\n        }\n        return new Response(JSON.stringify({ success: false, message: `Failed to submit comment: ${error.message}` }), {\n          status: 500,\n          headers: { \"Content-Type\": \"application/json\" },\n        });\n      }\n    }\n\n    // Root Path\n    if (path === \"/\" && method === \"GET\") {\n      return new Response(\n        `\n        <!DOCTYPE html>\n        <html lang=\"en\">\n          <head>\n            <title>EEP Communication App</title>\n            <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n            <meta charset=\"UTF-8\">\n            <style>${css}</style>\n            <link rel=\"icon\" href=\"data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📰</text></svg>\">\n          </head>\n          <body>\n            <noscript>You need to enable JavaScript to run this app.</noscript>\n            <div id=\"root\"></div>\n            <script src=\"https://esm.town/v/std/catch\"></script>\n            <script type=\"module\" src=\"${import.meta.url}\"></script>\n          </body>\n        </html>\n      `,\n        { headers: { \"Content-Type\": \"text/html; charset=utf-8\" } },\n      );\n    }\n\n    // Fallback for unknown paths\n    return new Response(\"Not Found\", { status: 404, headers: { \"Content-Type\": \"text/plain\" } });\n  } catch (error: any) {\n    console.error(\"Server error:\", error);\n    return new Response(JSON.stringify({ success: false, message: `Internal Server Error: ${error.message}` }), {\n      status: 500,\n      headers: { \"Content-Type\": \"application/json\" },\n    });\n  }\n}",[],[101],{"_106":295,"_96":296,"_161":297,"_163":-5,"_164":144,"_165":274,"_167":22,"_108":298,"_102":32,"_169":181,"_171":73,"_172":22,"_173":-5,"_174":299,"_100":300},"c97e344a-407a-11f0-a135-76b3cceeab13","server.tsx","628fd8e0-fc31-4e2f-bba2-838a58b08c86",["D",1748955655897],[],[296],"files",[158,176,185,195,203,211,219,229,239,249,259,268,276,285,294],"counts",{"_305":32,"_306":307,"_308":32,"_309":310,"_313":314},"pulls","branches",2,"forks","envVars",{"_311":32,"_312":32},"count","emptyCount","connections",{"_311":32,"_315":32},"unfilledCount","contents",[],"file",{"_106":286,"_96":101,"_161":287,"_163":-5,"_164":144,"_165":103,"_167":22,"_108":320,"_102":289,"_169":290,"_171":291,"_172":22,"_173":-5,"_100":321},["D",1749241492217],[101],"upstreamProject","upstreamBranch",{"_106":147,"_108":325,"_326":327,"_96":44,"_145":107,"_102":328,"_146":-5,"_148":-5,"_329":330,"_110":-5,"_155":22,"_112":113,"_154":95,"_16":125,"_153":97},["D",1746230733663],"updatedAt",["D",1750169294978],964,"lockfileKey","1767263732483-esm.town_v_solomonferede_EEPPortal@964-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_94":95,"_96":97,"_98":99,"_102":103,"_100":101,"_104":337,"_156":342,"_301":388,"_318":389,"_316":391,"_392":393,"_396":-5,"_397":32,"_398":399,"_400":401,"_309":-5},{"_106":107,"_96":97,"_108":338,"_110":-5,"_111":22,"_112":113,"_114":-5,"_115":-5,"_14":116,"_117":118,"_119":120,"_121":120,"_122":123,"_124":32,"_16":125,"_126":127,"_128":127,"_129":130,"_131":130,"_132":130,"_133":127,"_134":127,"_23":339,"_138":340,"_141":341,"_155":22},["D",1746230733663],{"_94":95,"_136":137},{"_94":95,"_140":137,"_14":116},{"_102":143,"_96":99,"_106":144,"_145":107,"_146":147,"_148":149,"_150":113,"_151":107,"_152":125,"_153":97,"_154":95},[343,376,382,385],{"_106":159,"_96":160,"_161":162,"_163":-5,"_164":144,"_165":166,"_167":120,"_108":168,"_102":32,"_169":170,"_171":-5,"_172":22,"_173":-5,"_174":344,"_100":375},[345,348,351,354,357,360,363,366,369,372],{"_106":177,"_96":178,"_161":179,"_163":162,"_164":144,"_165":166,"_167":120,"_108":180,"_102":32,"_169":181,"_171":182,"_172":22,"_173":-5,"_174":346,"_100":347},[],[160,178],{"_106":186,"_96":187,"_161":188,"_163":162,"_164":144,"_165":189,"_167":120,"_108":190,"_102":191,"_169":181,"_171":192,"_172":22,"_173":-5,"_174":349,"_100":350},[],[160,187],{"_106":196,"_96":197,"_161":198,"_163":162,"_164":144,"_165":166,"_167":120,"_108":199,"_102":32,"_169":181,"_171":200,"_172":22,"_173":-5,"_174":352,"_100":353},[],[160,197],{"_106":204,"_96":205,"_161":206,"_163":162,"_164":144,"_165":166,"_167":120,"_108":207,"_102":32,"_169":181,"_171":208,"_172":22,"_173":-5,"_174":355,"_100":356},[],[160,205],{"_106":212,"_96":213,"_161":214,"_163":162,"_164":144,"_165":166,"_167":120,"_108":215,"_102":32,"_169":181,"_171":216,"_172":22,"_173":-5,"_174":358,"_100":359},[],[160,213],{"_106":220,"_96":221,"_161":222,"_163":162,"_164":144,"_165":223,"_167":120,"_108":224,"_102":225,"_169":181,"_171":226,"_172":22,"_173":-5,"_174":361,"_100":362},[],[160,221],{"_106":230,"_96":231,"_161":232,"_163":162,"_164":144,"_165":233,"_167":120,"_108":234,"_102":235,"_169":181,"_171":236,"_172":22,"_173":-5,"_174":364,"_100":365},[],[160,231],{"_106":240,"_96":241,"_161":242,"_163":162,"_164":144,"_165":243,"_167":120,"_108":244,"_102":245,"_169":181,"_171":246,"_172":22,"_173":-5,"_174":367,"_100":368},[],[160,241],{"_106":250,"_96":251,"_161":252,"_163":162,"_164":144,"_165":253,"_167":120,"_108":254,"_102":255,"_169":181,"_171":256,"_172":22,"_173":-5,"_174":370,"_100":371},[],[160,251],{"_106":260,"_96":261,"_161":262,"_163":162,"_164":144,"_165":166,"_167":120,"_108":263,"_102":32,"_169":181,"_171":264,"_172":22,"_173":-5,"_174":373,"_100":374},[],[160,261],[160],{"_106":269,"_96":270,"_161":271,"_163":-5,"_164":144,"_165":272,"_167":22,"_108":273,"_102":274,"_169":170,"_171":-5,"_172":22,"_173":-5,"_174":377,"_100":381},[378],{"_106":277,"_96":278,"_161":279,"_163":271,"_164":144,"_165":280,"_167":22,"_108":281,"_102":274,"_169":181,"_171":73,"_172":22,"_173":-5,"_174":379,"_100":380},[],[270,278],[270],{"_106":286,"_96":101,"_161":287,"_163":-5,"_164":144,"_165":103,"_167":22,"_108":288,"_102":289,"_169":290,"_171":291,"_172":22,"_173":-5,"_174":383,"_100":384},[],[101],{"_106":295,"_96":296,"_161":297,"_163":-5,"_164":144,"_165":274,"_167":22,"_108":298,"_102":32,"_169":181,"_171":73,"_172":22,"_173":-5,"_174":386,"_100":387},[],[296],[343,345,348,351,354,357,360,363,366,369,372,376,378,382,385],{"_106":286,"_96":101,"_161":287,"_163":-5,"_164":144,"_165":103,"_167":22,"_108":320,"_102":289,"_169":290,"_171":291,"_172":22,"_173":-5,"_100":390},[101],[],"upstream",{"_106":147,"_108":394,"_326":395,"_96":44,"_145":107,"_102":328,"_146":-5,"_148":-5,"_329":330,"_110":-5,"_155":22,"_112":113,"_154":95,"_16":125,"_153":97},["D",1746230733663],["D",1750169294978],"pull","ahead","behind",347,"templates",[],"actionData","errors"]
</article></body></html>