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;","deleted","label",[172,154],"components","permalink","https://www.val.town/x/solomonferede/EEPPortal/code/components/mediaMonitoring.tsx","extension","actionData","errors"]