@manojkmfsi/monodog 1.1.37 → 1.1.39

package/monodog-dashboard/src/components/modules/health-status/components/ErrorState.tsx

@@ -1,25 +0,0 @@
-import { ExclamationTriangleIcon } from '../../../../icons/heroicons';
-
-interface ErrorStateProps {
-  error: string;
-  onRetry?: () => void;
-}
-
-export default function ErrorState({ error, onRetry }: ErrorStateProps) {
-  return (
-    <div className="flex items-center justify-center h-64">
-      <div className="text-center">
-        <ExclamationTriangleIcon className="w-12 h-12 text-red-500 mx-auto" />
-        <p className="mt-4 text-red-600">{error}</p>
-        {onRetry && (
-          <button
-            onClick={onRetry}
-            className="mt-4 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
-          >
-            Retry
-          </button>
-        )}
-      </div>
-    </div>
-  );
-}

package/monodog-dashboard/src/components/modules/health-status/components/HealthActions.tsx

@@ -1,122 +0,0 @@
-import {
-  ArrowPathIcon,
-  BeakerIcon,
-  ShieldCheckIcon,
-  ArrowUpIcon,
-} from '../../../../icons/heroicons';
-import { HealthActionsProps } from '../types/health.types';
-
-export default function HealthActions({
-  onRefresh,
-  onRunAllTests,
-  onRunSecurityAudit,
-  onUpdateDependencies,
-  loading = false,
-}: HealthActionsProps) {
-  const ActionButton = ({
-    onClick,
-    icon,
-    label,
-    description,
-    color = 'blue',
-    disabled = false,
-  }: {
-    onClick?: () => void;
-    icon: React.ReactNode;
-    label: string;
-    description: string;
-    color?: 'blue' | 'green' | 'yellow' | 'purple';
-    disabled?: boolean;
-  }) => {
-    const getColorClasses = () => {
-      switch (color) {
-        case 'green':
-          return 'bg-green-600 hover:bg-green-700 text-white';
-        case 'yellow':
-          return 'bg-yellow-600 hover:bg-yellow-700 text-white';
-        case 'purple':
-          return 'bg-purple-600 hover:bg-purple-700 text-white';
-        default:
-          return 'bg-blue-600 hover:bg-blue-700 text-white';
-      }
-    };
-
-    return (
-      <div className="bg-white p-4 rounded-lg shadow border">
-        <div className="flex items-center space-x-3 mb-2">
-          {icon}
-          <h4 className="text-sm font-medium text-gray-900">{label}</h4>
-        </div>
-        <p className="text-xs text-gray-600 mb-3">{description}</p>
-        <button
-          onClick={onClick}
-          disabled={disabled || loading}
-          className={`w-full px-3 py-2 rounded-lg text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed ${getColorClasses()}`}
-        >
-          {loading ? 'Running...' : 'Run Now'}
-        </button>
-      </div>
-    );
-  };
-
-  return (
-    <div className="space-y-4">
-      <h3 className="text-lg font-medium text-gray-900">Quick Actions</h3>
-
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-        <ActionButton
-          onClick={onRefresh}
-          icon={<ArrowPathIcon className="h-5 w-5 text-blue-600" />}
-          label="Refresh Data"
-          description="Update all health metrics and package status"
-          color="blue"
-        />
-
-        {onRunAllTests && (
-          <ActionButton
-            onClick={onRunAllTests}
-            icon={<BeakerIcon className="h-5 w-5 text-green-600" />}
-            label="Run All Tests"
-            description="Execute test suites for all packages"
-            color="green"
-          />
-        )}
-
-        {onRunSecurityAudit && (
-          <ActionButton
-            onClick={onRunSecurityAudit}
-            icon={<ShieldCheckIcon className="h-5 w-5 text-yellow-600" />}
-            label="Security Audit"
-            description="Check for security vulnerabilities"
-            color="yellow"
-          />
-        )}
-
-        {onUpdateDependencies && (
-          <ActionButton
-            onClick={onUpdateDependencies}
-            icon={<ArrowUpIcon className="h-5 w-5 text-purple-600" />}
-            label="Update Dependencies"
-            description="Update outdated package dependencies"
-            color="purple"
-          />
-        )}
-      </div>
-
-      {/* Health Improvement Tips */}
-      <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
-        <h4 className="text-sm font-medium text-blue-900 mb-2">
-          💡 Health Improvement Tips
-        </h4>
-        <div className="text-xs text-blue-800 space-y-1">
-          <div>• Maintain test coverage above 80% for better code quality</div>
-          <div>
-            • Run security audits regularly to catch vulnerabilities early
-          </div>
-          <div>• Keep dependencies up-to-date to benefit from latest fixes</div>
-          <div>• Set up automated health checks in your CI/CD pipeline</div>
-        </div>
-      </div>
-    </div>
-  );
-}

package/monodog-dashboard/src/components/modules/health-status/components/HealthAlerts.tsx

@@ -1,151 +0,0 @@
-import {
-  ExclamationTriangleIcon,
-  XCircleIcon,
-  InformationCircleIcon,
-  XMarkIcon,
-} from '../../../../icons/heroicons';
-import { HealthAlertsProps } from '../types/health.types';
-import { formatTimeAgo } from '../utils/health.utils';
-
-export default function HealthAlerts({
-  alerts,
-  onAlertDismiss,
-}: HealthAlertsProps) {
-  const getAlertIcon = (type: string) => {
-    switch (type) {
-      case 'error':
-        return <XCircleIcon className="h-5 w-5 text-red-500" />;
-      case 'warning':
-        return <ExclamationTriangleIcon className="h-5 w-5 text-yellow-500" />;
-      case 'info':
-        return <InformationCircleIcon className="h-5 w-5 text-blue-500" />;
-      default:
-        return <InformationCircleIcon className="h-5 w-5 text-gray-500" />;
-    }
-  };
-
-  const getAlertBgColor = (type: string) => {
-    switch (type) {
-      case 'error':
-        return 'bg-red-50 border-red-200';
-      case 'warning':
-        return 'bg-yellow-50 border-yellow-200';
-      case 'info':
-        return 'bg-blue-50 border-blue-200';
-      default:
-        return 'bg-gray-50 border-gray-200';
-    }
-  };
-
-  const getAlertTextColor = (type: string) => {
-    switch (type) {
-      case 'error':
-        return 'text-red-800';
-      case 'warning':
-        return 'text-yellow-800';
-      case 'info':
-        return 'text-blue-800';
-      default:
-        return 'text-gray-800';
-    }
-  };
-
-  if (alerts.length === 0) {
-    return (
-      <div className="space-y-4">
-        <h3 className="text-lg font-medium text-gray-900">Health Alerts</h3>
-        <div className="bg-green-50 border border-green-200 rounded-lg p-6 text-center">
-          <div className="text-green-400 text-4xl mb-2"></div>
-          <h4 className="text-green-800 font-medium mb-1">All Clear!</h4>
-          <p className="text-green-700 text-sm">
-            No health alerts at this time. Your monorepo is running smoothly.
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <h3 className="text-lg font-medium text-gray-900">Health Alerts</h3>
-        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
-          {alerts.length} alert{alerts.length > 1 ? 's' : ''}
-        </span>
-      </div>
-
-      <div className="space-y-3">
-        {alerts.map(alert => (
-          <div
-            key={alert.id}
-            className={`border rounded-lg p-4 ${getAlertBgColor(alert.type)}`}
-          >
-            <div className="flex items-start justify-between">
-              <div className="flex items-start space-x-3 flex-1">
-                {getAlertIcon(alert.type)}
-                <div className="flex-1">
-                  <div className="flex items-center space-x-2 mb-1">
-                    <h4
-                      className={`text-sm font-medium ${getAlertTextColor(alert.type)}`}
-                    >
-                      {alert.title}
-                    </h4>
-                    {alert.packageName && (
-                      <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800">
-                        {alert.packageName}
-                      </span>
-                    )}
-                  </div>
-                  <p
-                    className={`text-sm ${getAlertTextColor(alert.type)} opacity-90`}
-                  >
-                    {alert.message}
-                  </p>
-                  <p className="text-xs text-gray-500 mt-2">
-                    {formatTimeAgo(alert.timestamp)}
-                  </p>
-                </div>
-              </div>
-
-              {onAlertDismiss && (
-                <button
-                  onClick={() => onAlertDismiss(alert.id)}
-                  className="text-gray-400 hover:text-gray-600 ml-4"
-                >
-                  <XMarkIcon className="h-4 w-4" />
-                </button>
-              )}
-            </div>
-          </div>
-        ))}
-      </div>
-
-      {/* Summary */}
-      <div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
-        <h4 className="text-sm font-medium text-gray-900 mb-2">
-          Alert Summary
-        </h4>
-        <div className="grid grid-cols-3 gap-4 text-sm">
-          <div className="text-center">
-            <div className="text-red-600 font-semibold">
-              {alerts.filter(a => a.type === 'error').length}
-            </div>
-            <div className="text-gray-600">Errors</div>
-          </div>
-          <div className="text-center">
-            <div className="text-yellow-600 font-semibold">
-              {alerts.filter(a => a.type === 'warning').length}
-            </div>
-            <div className="text-gray-600">Warnings</div>
-          </div>
-          <div className="text-center">
-            <div className="text-blue-600 font-semibold">
-              {alerts.filter(a => a.type === 'info').length}
-            </div>
-            <div className="text-gray-600">Info</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

package/monodog-dashboard/src/components/modules/health-status/components/HealthMetrics.tsx

@@ -1,132 +0,0 @@
-import {
-  ArrowTrendingUpIcon,
-  ArrowTrendingDownIcon,
-  MinusIcon,
-} from '../../../../icons/heroicons';
-import { HealthMetricsProps } from '../types/health.types';
-import {
-  getStatusColor,
-  getMetricIcon,
-  formatTimeAgo,
-} from '../utils/health.utils';
-
-export default function HealthMetrics({
-  metrics,
-  selectedMetric,
-  onMetricSelect,
-}: HealthMetricsProps) {
-  const getTrendIcon = (trend: string) => {
-    switch (trend) {
-      case 'up':
-        return <ArrowTrendingUpIcon className="w-4 h-4 text-green-500" />;
-      case 'down':
-        return <ArrowTrendingDownIcon className="w-4 h-4 text-red-500" />;
-      default:
-        return <MinusIcon className="w-4 h-4 text-gray-500" />;
-    }
-  };
-
-  return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <h3 className="text-lg font-medium text-gray-900">
-          Key Health Metrics
-        </h3>
-        <select
-          value={selectedMetric}
-          onChange={e => onMetricSelect(e.target.value)}
-          className="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-        >
-          <option value="all">All Metrics</option>
-          {metrics.map(metric => (
-            <option key={metric.name} value={metric.name}>
-              {metric.name}
-            </option>
-          ))}
-        </select>
-      </div>
-
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-        {metrics
-          .filter(
-            metric => selectedMetric === 'all' || metric.name === selectedMetric
-          )
-          .map(metric => (
-            <div
-              key={metric.name}
-              className="bg-white p-4 rounded-lg shadow border hover:shadow-md transition-shadow cursor-pointer"
-              onClick={() =>
-                onMetricSelect(
-                  metric.name === selectedMetric ? 'all' : metric.name
-                )
-              }
-            >
-              <div className="flex items-center justify-between mb-3">
-                <div className="flex items-center space-x-2">
-                  <span className="text-2xl">{getMetricIcon(metric.name)}</span>
-                  <h4 className="text-sm font-medium text-gray-900">
-                    {metric.name}
-                  </h4>
-                </div>
-                <span
-                  className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getStatusColor(metric.status)}`}
-                >
-                  {metric.status}
-                </span>
-              </div>
-
-              <div className="flex items-baseline justify-between mb-2">
-                <div className="flex items-baseline space-x-1">
-                  <span className="text-2xl font-bold text-gray-900">
-                    {metric.value}
-                  </span>
-                  <span className="text-sm text-gray-500">{metric.unit}</span>
-                </div>
-                <div className="flex items-center space-x-1">
-                  {getTrendIcon(metric.trend)}
-                  <span
-                    className={`text-xs font-medium ${
-                      metric.trend === 'up'
-                        ? 'text-green-600'
-                        : metric.trend === 'down'
-                          ? 'text-red-600'
-                          : 'text-gray-600'
-                    }`}
-                  >
-                    {metric.trend}
-                  </span>
-                </div>
-              </div>
-
-              {/* Progress Bar */}
-              <div className="w-full bg-gray-200 rounded-full h-2 mb-2">
-                <div
-                  className={`h-2 rounded-full transition-all duration-300 ${
-                    metric.status === 'healthy'
-                      ? 'bg-green-500'
-                      : metric.status === 'warning'
-                        ? 'bg-yellow-500'
-                        : 'bg-red-500'
-                  }`}
-                  style={{ width: `${Math.min(metric.value, 100)}%` }}
-                />
-              </div>
-
-              <div className="text-xs text-gray-500">
-                Updated {formatTimeAgo(metric.lastUpdated)}
-              </div>
-            </div>
-          ))}
-      </div>
-
-      {metrics.filter(
-        metric => selectedMetric === 'all' || metric.name === selectedMetric
-      ).length === 0 && (
-        <div className="text-center py-8">
-          <div className="text-gray-400 text-4xl mb-2">📊</div>
-          <p className="text-gray-500">No metrics available</p>
-        </div>
-      )}
-    </div>
-  );
-}

package/monodog-dashboard/src/components/modules/health-status/components/HealthStatusHeader.tsx

@@ -1,30 +0,0 @@
-import { ArrowPathIcon } from '../../../../icons/heroicons';
-
-interface HealthStatusHeaderProps {
-  onRefresh: () => void;
-  loading?: boolean;
-}
-
-export default function HealthStatusHeader({
-  onRefresh,
-  loading = false,
-}: HealthStatusHeaderProps) {
-  return (
-    <div className="flex items-center justify-between">
-      <div>
-        <h1 className="text-2xl font-bold text-gray-900">Health Status</h1>
-        <p className="text-gray-600 mt-1">
-          Monitor the health and performance of your monorepo packages
-        </p>
-      </div>
-      <button
-        onClick={onRefresh}
-        disabled={loading}
-        className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-2 transition-colors"
-      >
-        <ArrowPathIcon className={`w-5 h-5 ${loading ? 'animate-spin' : ''}`} />
-        <span>Refresh</span>
-      </button>
-    </div>
-  );
-}

package/monodog-dashboard/src/components/modules/health-status/components/LoadingState.tsx

@@ -1,16 +0,0 @@
-interface LoadingStateProps {
-  message?: string;
-}
-
-export default function LoadingState({
-  message = 'Loading abc data...',
-}: LoadingStateProps) {
-  return (
-    <div className="flex items-center justify-center h-64">
-      <div className="text-center">
-        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
-        <p className="mt-4 text-gray-600">{message}</p>
-      </div>
-    </div>
-  );
-}

package/monodog-dashboard/src/components/modules/health-status/components/OverallHealthScore.tsx

@@ -1,122 +0,0 @@
-import {
-  ArrowTrendingUpIcon,
-  ArrowTrendingDownIcon,
-  MinusIcon,
-} from '../../../../icons/heroicons';
-import { OverallHealthProps } from '../types/health.types';
-import {
-  getHealthScoreColor,
-  getHealthScoreBgColor,
-} from '../utils/health.utils';
-
-export default function OverallHealthScore({
-  score,
-  trend,
-  loading = false,
-}: OverallHealthProps) {
-  const getTrendIcon = () => {
-    switch (trend) {
-      case 'up':
-        return <ArrowTrendingUpIcon className="w-6 h-6 text-green-500" />;
-      case 'down':
-        return <ArrowTrendingDownIcon className="w-6 h-6 text-red-500" />;
-      default:
-        return <MinusIcon className="w-6 h-6 text-gray-500" />;
-    }
-  };
-
-  const getTrendText = () => {
-    switch (trend) {
-      case 'up':
-        return 'Improving';
-      case 'down':
-        return 'Declining';
-      default:
-        return 'Stable';
-    }
-  };
-
-  const getHealthStatus = () => {
-    if (score >= 90) return 'Excellent';
-    if (score >= 80) return 'Good';
-    if (score >= 70) return 'Fair';
-    return 'Needs Attention';
-  };
-
-  if (loading) {
-    return (
-      <div className="bg-white p-6 rounded-lg shadow border">
-        <div className="animate-pulse">
-          <div className="h-8 bg-gray-200 rounded w-48 mb-4"></div>
-          <div className="h-16 bg-gray-200 rounded w-32 mb-4"></div>
-          <div className="h-4 bg-gray-200 rounded w-24"></div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className={`p-6 rounded-lg shadow border ${getHealthScoreBgColor(score)}`}
-    >
-      <div className="flex items-center justify-between mb-4">
-        <h3 className="text-lg font-medium text-gray-900">
-          Overall Health Score
-        </h3>
-        <div className="flex items-center space-x-2">
-          {getTrendIcon()}
-          <span
-            className={`text-sm font-medium ${
-              trend === 'up'
-                ? 'text-green-600'
-                : trend === 'down'
-                  ? 'text-red-600'
-                  : 'text-gray-600'
-            }`}
-          >
-            {getTrendText()}
-          </span>
-        </div>
-      </div>
-
-      <div className="flex items-baseline space-x-4">
-        <div className={`text-4xl font-bold ${getHealthScoreColor(score)}`}>
-          {score}%
-        </div>
-        <div className="text-lg text-gray-600">{getHealthStatus()}</div>
-      </div>
-
-      {/* Progress Bar */}
-      <div className="mt-4">
-        <div className="w-full bg-gray-200 rounded-full h-3">
-          <div
-            className={`h-3 rounded-full transition-all duration-500 ${
-              score >= 90
-                ? 'bg-green-500'
-                : score >= 80
-                  ? 'bg-yellow-500'
-                  : score >= 70
-                    ? 'bg-orange-500'
-                    : 'bg-red-500'
-            }`}
-            style={{ width: `${score}%` }}
-          />
-        </div>
-      </div>
-
-      {/* Health Status Description */}
-      <p className="mt-3 text-sm text-gray-600">
-        {score >= 90 &&
-          'Your monorepo is in excellent health with all systems running optimally.'}
-        {score >= 80 &&
-          score < 90 &&
-          'Your monorepo is in good health with minor areas for improvement.'}
-        {score >= 70 &&
-          score < 80 &&
-          'Your monorepo health is fair but could benefit from attention to key areas.'}
-        {score < 70 &&
-          'Your monorepo needs attention. Several critical issues require immediate action.'}
-      </p>
-    </div>
-  );
-}