display cron warning in ui

Author: pierre-b

CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to this project will be documented in this file.
 
+## [7.0] - 2025-09-28
+
+- Add cron status monitoring endpoint `/api/cron.status`
+- Add SettingRepository for managing application settings
+- Add automatic cron health checking in frontend console
+- Add visual banner with setup instructions when cron is not running
+- Update TaskService to track last cron execution timestamp
+
 ## [6.8] - 2025-09-24
 
 - Fix scheduled broadcast time handling to use string format instead of time.Time

config/config.go

@@ -10,7 +10,7 @@ import (
 	"github.com/spf13/viper"
 )
 
-const VERSION = "6.8"
+const VERSION = "7.0"
 
 type Config struct {
 	Server          ServerConfig

console/src/App.tsx

@@ -1,9 +1,10 @@
-import { ConfigProvider, App as AntApp, ThemeConfig } from 'antd'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { ConfigProvider, App as AntApp, ThemeConfig, Alert, Space } from 'antd'
+import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query'
 import { RouterProvider } from '@tanstack/react-router'
 import { router } from './router'
 import { AuthProvider } from './contexts/AuthContext'
 import { initializeAnalytics } from './utils/analytics-config'
+import { useState, useEffect } from 'react'
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -50,13 +51,113 @@ const theme: ThemeConfig = {
 // Initialize analytics service
 initializeAnalytics()
 
+interface CronStatusResponse {
+  success: boolean
+  last_run: string | null
+  last_run_unix: number | null
+  time_since_last_run: string | null
+  time_since_last_run_seconds: number | null
+  message?: string
+}
+
+function CronStatusBanner() {
+  const [apiEndpoint, setApiEndpoint] = useState<string>('')
+
+  useEffect(() => {
+    // Get API endpoint from window object
+    setApiEndpoint((window as any).API_ENDPOINT || '')
+  }, [])
+
+  const { data: cronStatus, isError } = useQuery<CronStatusResponse>({
+    queryKey: ['cronStatus'],
+    queryFn: async () => {
+      const response = await fetch(`${apiEndpoint}/api/cron.status`)
+      if (!response.ok) {
+        throw new Error('Failed to fetch cron status')
+      }
+      return response.json()
+    },
+    refetchInterval: 3600000, // Refetch every hour
+    enabled: !!apiEndpoint // Only run query if we have an API endpoint
+  })
+
+  // Don't show banner if we can't fetch status or if there's an error
+  if (!cronStatus || isError) {
+    return null
+  }
+
+  // Check if last run was more than 90 seconds ago
+  const needsCronSetup =
+    !cronStatus.last_run ||
+    (cronStatus.time_since_last_run_seconds && cronStatus.time_since_last_run_seconds > 90)
+
+  if (!needsCronSetup) {
+    return null
+  }
+
+  const cronCommand = `# Run every minute
+* * * * * curl ${apiEndpoint}/api/cron > /dev/null 2>&1`
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        bottom: 16,
+        right: 16,
+        width: '500px',
+        zIndex: 1000
+      }}
+    >
+      <Alert
+        message="Cron Job Setup Required"
+        description={
+          <Space direction="vertical" style={{ width: '100%' }}>
+            <div>
+              {cronStatus.last_run
+                ? `Last cron run was ${Math.floor((cronStatus.time_since_last_run_seconds || 0) / 60)} minutes ago. `
+                : 'No cron run detected. '}
+              Add this cron job to your server to enable automatic task processing:{' '}
+              <a
+                href="https://docs.notifuse.com/installation#a-cron-scheduler"
+                target="_blank"
+                rel="noopener noreferrer"
+                style={{ color: '#7763F1' }}
+              >
+                Learn more
+              </a>
+            </div>
+            <code
+              style={{
+                display: 'block',
+                padding: '8px',
+                backgroundColor: '#f5f5f5',
+                border: '1px solid #d9d9d9',
+                borderRadius: '4px',
+                fontFamily: 'monospace',
+                fontSize: '12px',
+                whiteSpace: 'pre-wrap'
+              }}
+            >
+              {cronCommand}
+            </code>
+          </Space>
+        }
+        type="warning"
+        showIcon
+        closable
+      />
+    </div>
+  )
+}
+
 export function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <AuthProvider>
         <ConfigProvider theme={theme}>
           <AntApp>
             <RouterProvider router={router} />
+            <CronStatusBanner />
           </AntApp>
         </ConfigProvider>
       </AuthProvider>

console/src/layouts/WorkspaceLayout.tsx

@@ -18,7 +18,7 @@ import {
   faChartLine
 } from '@fortawesome/free-solid-svg-icons'
 import { useAuth } from '../contexts/AuthContext'
-import { Workspace, WorkspaceMember, UserPermissions } from '../services/api/types'
+import { Workspace, UserPermissions } from '../services/api/types'
 import { ContactsCsvUploadProvider } from '../components/contacts/ContactsCsvUploadProvider'
 import { useState, useEffect } from 'react'
 import { FileManagerProvider } from '../components/file_manager/context'