@manojkmfsi/monodog 1.1.38 → 1.1.39

package/monodog-dashboard/src/components/modules/packages/components/HealthMetricsTab.tsx

@@ -1,275 +0,0 @@
-import {
-  CheckCircleIcon,
-  XCircleIcon,
-  ExclamationTriangleIcon,
-} from '../../../../icons/heroicons';
-import { PackageDetail } from '../types/packages.types';
-
-interface HealthMetricsTabProps {
-  packageData: PackageDetail;
-}
-
-export default function HealthMetricsTab({
-  packageData,
-}: HealthMetricsTabProps) {
-  const getHealthScoreColor = (score: number) => {
-    if (score >= 80) return 'text-green-600';
-    if (score >= 60) return 'text-yellow-600';
-    return 'text-red-600';
-  };
-
-  const getHealthScoreBg = (score: number) => {
-    if (score >= 80) return 'bg-green-100';
-    if (score >= 60) return 'bg-yellow-100';
-    return 'bg-red-100';
-  };
-
-  const getBuildStatusIcon = (status: string) => {
-    switch (status) {
-      case 'success':
-        return <CheckCircleIcon className="w-5 h-5 text-green-500" />;
-      case 'failed':
-        return <XCircleIcon className="w-5 h-5 text-red-500" />;
-      case 'running':
-        return (
-          <div className="w-5 h-5 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
-        );
-      default:
-        return <ExclamationTriangleIcon className="w-5 h-5 text-gray-500" />;
-    }
-  };
-
-  const getBuildStatusColor = (status: string) => {
-    switch (status) {
-      case 'success':
-        return 'bg-green-100 text-green-800';
-      case 'failed':
-        return 'bg-red-100 text-red-800';
-      case 'running':
-        return 'bg-blue-100 text-blue-800';
-      default:
-        return 'bg-gray-100 text-gray-800';
-    }
-  };
-
-  const getLintStatusColor = (status: string) => {
-    switch (status) {
-      case 'pass':
-        return 'bg-green-100 text-green-800';
-      case 'fail':
-        return 'bg-red-100 text-red-800';
-      case 'warning':
-        return 'bg-yellow-100 text-yellow-800';
-      default:
-        return 'bg-gray-100 text-gray-800';
-    }
-  };
-  if (!packageData.packageHealth?.packageOverallScore) {
-    return <p className="py-6 text-gray-600">No health data available.</p>;
-  }
-  return (
-    <div className="py-6">
-      {/* Health Score Overview */}
-      <div className="bg-white border rounded-lg p-6 mb-6">
-        <div className="flex items-center justify-between mb-4">
-          <h3 className="text-lg font-medium text-gray-900">Health Score</h3>
-          <div
-            className={`text-3xl font-bold ${getHealthScoreColor(packageData.packageHealth.packageOverallScore)}`}
-          >
-            {packageData.packageHealth.packageOverallScore}%
-          </div>
-        </div>
-
-        <div className="w-full bg-gray-200 rounded-full h-3 mb-4">
-          <div
-            className={`h-3 rounded-full transition-all duration-300 ${
-              packageData.packageHealth.packageOverallScore >= 80
-                ? 'bg-green-500'
-                : packageData.packageHealth.packageOverallScore >= 60
-                  ? 'bg-yellow-500'
-                  : 'bg-red-500'
-            }`}
-            style={{
-              width: `${packageData.packageHealth.packageOverallScore}%`,
-            }}
-          />
-        </div>
-
-        <p className="text-sm text-gray-600">
-          {packageData.packageHealth.packageOverallScore >= 80 &&
-            'Excellent health - package is in great condition'}
-          {packageData.packageHealth.packageOverallScore >= 60 &&
-            packageData.packageHealth.packageOverallScore < 80 &&
-            'Good health - minor issues detected'}
-          {packageData.packageHealth.packageOverallScore < 60 &&
-            'Needs attention - several issues require fixing'}
-        </p>
-      </div>
-
-      {/* Health Metrics Grid */}
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
-        {/* Build Status */}
-        <div className="bg-white border rounded-lg p-6">
-          <div className="flex items-center justify-between mb-4">
-            <h4 className="text-sm font-medium text-gray-900">Build Status</h4>
-            {getBuildStatusIcon(packageData.packageHealth.packageBuildStatus)}
-          </div>
-          <div className="flex items-center justify-between">
-            <span
-              className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getBuildStatusColor(packageData.packageHealth.packageBuildStatus)}`}
-            >
-              {packageData.packageHealth.packageBuildStatus}
-            </span>
-            <button className="hidden text-blue-600 hover:text-blue-500 text-sm">
-              View Logs
-            </button>
-          </div>
-        </div>
-
-        {/* Test Coverage */}
-        <div className="hidden bg-white border rounded-lg p-6">
-          <div className="flex items-center justify-between mb-4">
-            <h4 className="text-sm font-medium text-gray-900">Test Coverage</h4>
-            <div
-              className={`text-lg font-semibold ${
-                packageData.packageHealth.packageTestCoverage >= 80
-                  ? 'text-green-600'
-                  : packageData.packageHealth.packageTestCoverage >= 60
-                    ? 'text-yellow-600'
-                    : 'text-red-600'
-              }`}
-            >
-              {packageData.packageHealth.packageTestCoverage}%
-            </div>
-          </div>
-          <div className="w-full bg-gray-200 rounded-full h-2">
-            <div
-              className={`h-2 rounded-full ${
-                packageData.packageHealth.packageTestCoverage >= 80
-                  ? 'bg-green-500'
-                  : packageData.packageHealth.packageTestCoverage >= 60
-                    ? 'bg-yellow-500'
-                    : 'bg-red-500'
-              }`}
-              style={{
-                width: `${packageData.packageHealth.packageTestCoverage}%`,
-              }}
-            />
-          </div>
-        </div>
-
-        {/* Lint Status */}
-        <div className="bg-white border rounded-lg p-6">
-          <div className="flex items-center justify-between mb-4">
-            <h4 className="text-sm font-medium text-gray-900">Lint Status</h4>
-            {packageData.packageHealth.packageLintStatus === 'pass' && (
-              <CheckCircleIcon className="w-5 h-5 text-green-500" />
-            )}
-            {packageData.packageHealth.packageLintStatus === 'fail' && (
-              <XCircleIcon className="w-5 h-5 text-red-500" />
-            )}
-            {packageData.packageHealth.packageLintStatus === 'warning' && (
-              <ExclamationTriangleIcon className="w-5 h-5 text-yellow-500" />
-            )}
-          </div>
-          <div className="flex items-center justify-between">
-            <span
-              className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getLintStatusColor(packageData.packageHealth.packageLintStatus)}`}
-            >
-              {packageData.packageHealth.packageLintStatus}
-            </span>
-            <button className="hidden text-blue-600 hover:text-blue-500 text-sm">
-              View Issues
-            </button>
-          </div>
-        </div>
-      </div>
-
-      {/* Detailed Metrics */}
-      <div className="bg-white border rounded-lg p-6">
-        <h4 className="text-lg font-medium text-gray-900 mb-4">
-          Detailed Metrics
-        </h4>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <div>
-            <h5 className="text-sm font-medium text-gray-700 mb-3">
-              Dependencies
-            </h5>
-            <div className="space-y-2 text-sm">
-              <div className="flex justify-between">
-                <span className="text-gray-600">Total Dependencies:</span>
-                <span className="font-medium">
-                  {Object.keys(packageData.dependenciesInfo).length}
-                </span>
-              </div>
-              <div className="flex justify-between">
-                <span className="text-gray-600">Outdated:</span>
-                <span className="font-medium text-yellow-600">
-                  {
-                    packageData.dependenciesInfo.filter(
-                      d => d.status === 'outdated'
-                    ).length
-                  }
-                </span>
-              </div>
-              <div className="flex justify-between">
-                <span className="text-gray-600">Major Updates Available:</span>
-                <span className="font-medium text-red-600">
-                  {
-                    packageData.dependenciesInfo.filter(
-                      d => d.status === 'major-update'
-                    ).length
-                  }
-                </span>
-              </div>
-            </div>
-          </div>
-
-          <div>
-            <h5 className="text-sm font-medium text-gray-700 mb-3">
-              Code Quality
-            </h5>
-            <div className="space-y-2 text-sm">
-              <div className="flex justify-between">
-                <span className="text-gray-600">Build Status:</span>
-                <span
-                  className={`font-medium ${
-                    packageData.packageHealth.packageBuildStatus === 'success'
-                      ? 'text-green-600'
-                      : packageData.packageHealth.packageBuildStatus ===
-                          'failed'
-                        ? 'text-red-600'
-                        : 'text-yellow-600'
-                  }`}
-                >
-                  {packageData.packageHealth.packageBuildStatus}
-                </span>
-              </div>
-              <div className="hidden flex justify-between">
-                <span className="text-gray-600">Test Coverage:</span>
-                <span className="font-medium">
-                  {packageData.packageHealth.packageTestCoverage}%
-                </span>
-              </div>
-              <div className="flex justify-between">
-                <span className="text-gray-600">Lint Status:</span>
-                <span
-                  className={`font-medium ${
-                    packageData.packageHealth.packageLintStatus === 'pass'
-                      ? 'text-green-600'
-                      : packageData.packageHealth.packageLintStatus === 'fail'
-                        ? 'text-red-600'
-                        : 'text-yellow-600'
-                  }`}
-                >
-                  {packageData.packageHealth.packageLintStatus}
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

package/monodog-dashboard/src/components/modules/packages/components/LoadingState.tsx

@@ -1,14 +0,0 @@
-import { LoadingStateProps } from '../types/packages.types';
-
-export default function LoadingState({
-  message = 'Loading packages...',
-}: 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/packages/components/PackageDetailHeader.tsx

@@ -1,167 +0,0 @@
-import { Link } from 'react-router-dom';
-import {
-  ArrowLeftIcon,
-  CalendarIcon,
-  UserIcon,
-  TagIcon,
-  CheckCircleIcon,
-  ExclamationTriangleIcon,
-  ClockIcon,
-  LinkIcon,
-} from '../../../../icons/heroicons';
-import { PackageDetail } from '../types/packages.types';
-import type { PackageDetailHeaderProps } from '../../../../types';
-import {
-  getStatusColor,
-  getTypeColor,
-  formatDate,
-  formatVersion,
-  getPackageTypeIcon,
-} from '../utils/packages.utils';
-
-export default function PackageDetailHeader({
-  packageData,
-}: PackageDetailHeaderProps) {
-  const getStatusIcon = (status: string) => {
-    switch (status) {
-      case 'healthy':
-        return <CheckCircleIcon className="h-5 w-5 text-green-500" />;
-      case 'warning':
-        return <ExclamationTriangleIcon className="h-5 w-5 text-yellow-500" />;
-      case 'error':
-        return <ExclamationTriangleIcon className="h-5 w-5 text-red-500" />;
-      default:
-        return <ClockIcon className="h-5 w-5 text-gray-500" />;
-    }
-  };
-
-  return (
-    <>
-      {/* Back Navigation */}
-      <div className="mb-6">
-        <Link
-          to="/packages"
-          className="inline-flex items-center text-sm text-gray-500 hover:text-gray-700"
-        >
-          <ArrowLeftIcon className="mr-2 h-4 w-4" />
-          Back to Packages
-        </Link>
-      </div>
-
-      {/* Package Header */}
-      <div className="bg-white rounded-lg shadow border p-6 mb-6">
-        <div className="flex items-start justify-between">
-          <div className="flex items-start space-x-4">
-            <div className="text-4xl">
-              {getPackageTypeIcon(packageData.type)}
-            </div>
-            <div>
-              <h1 className="text-2xl font-bold text-gray-900">
-                {packageData.name}
-              </h1>
-              <p className="text-gray-600 mt-1">{packageData.description}</p>
-
-              <div className="flex items-center space-x-4 mt-4">
-                <div className="flex items-center space-x-2">
-                  <span className="text-sm font-medium text-gray-500">
-                    Version:
-                  </span>
-                  <span className="text-sm font-mono bg-gray-100 px-2 py-1 rounded">
-                    {formatVersion(packageData.version)}
-                  </span>
-                </div>
-
-                <span
-                  className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getTypeColor(packageData.type)}`}
-                >
-                  {packageData.type}
-                </span>
-
-                <div className="flex items-center space-x-1">
-                  {getStatusIcon(packageData.status)}
-                  <span
-                    className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getStatusColor(packageData.status)}`}
-                  >
-                    {packageData.status}
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div className="text-right">
-            <div className="text-sm text-gray-500 mb-2">Health Score</div>
-            <div className="text-2xl font-bold text-blue-600">
-              {packageData.packageHealth?.packageOverallScore ?? ''}%
-            </div>
-          </div>
-        </div>
-
-        {/* Package Metadata */}
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mt-6 pt-6 border-t border-gray-200">
-          <div className="flex items-center space-x-2">
-            <CalendarIcon className="h-4 w-4 text-gray-400" />
-            <div>
-              <div className="text-xs text-gray-500">Last Updated</div>
-              <div className="text-sm font-medium">
-                {formatDate(packageData.lastUpdated)}
-              </div>
-            </div>
-          </div>
-
-          <div className="hidden flex items-center space-x-2">
-            <UserIcon className="h-4 w-4 text-gray-400" />
-            <div>
-              <div className="text-xs text-gray-500">Maintainers</div>
-              <div className="text-sm font-medium">
-                {packageData.maintainers.length}
-              </div>
-            </div>
-          </div>
-
-          <div className="flex items-center space-x-2">
-            <TagIcon className="h-4 w-4 text-gray-400" />
-            <div>
-              <div className="text-xs text-gray-500">License</div>
-              <div className="text-sm font-medium">{packageData.license}</div>
-            </div>
-          </div>
-
-          <div className="flex items-center space-x-2">
-            <div className="h-4 w-4 text-gray-400"><LinkIcon className="h-4 w-4 text-gray-400"></LinkIcon></div>
-            <div>
-              <div className="text-xs text-gray-500">Repository</div>
-              <div className="text-sm font-medium truncate">
-                <a
-                  href={packageData.repository.url || ''}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-blue-600 hover:text-blue-500"
-                >
-                  {packageData.repository?.url?.split('/').pop()}
-                </a>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Tags */}
-        {packageData.tags?.length > 0 && (
-          <div className="mt-4">
-            <div className="text-xs text-gray-500 mb-2">Tags</div>
-            <div className="flex flex-wrap gap-2">
-              {packageData.tags.map(tag => (
-                <span
-                  key={tag}
-                  className="inline-flex px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded-full"
-                >
-                  {tag}
-                </span>
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-    </>
-  );
-}

package/monodog-dashboard/src/components/modules/packages/components/PackageDetailTabs.tsx

@@ -1,49 +0,0 @@
-import {
-  CubeIcon,
-  DocumentTextIcon,
-  ClockIcon,
-  HeartIcon,
-  Cog6ToothIcon,
-} from '../../../../icons/heroicons';
-import { PackageDetailTabsProps } from '../types/packages.types';
-
-export default function PackageDetailTabs({
-  activeTab,
-  onTabChange,
-}: PackageDetailTabsProps) {
-  const tabs = [
-    { id: 'overview' as const, label: 'Overview', icon: CubeIcon },
-    {
-      id: 'dependencies' as const,
-      label: 'Dependencies',
-      icon: DocumentTextIcon,
-    },
-    { id: 'commits' as const, label: 'Recent Commits', icon: ClockIcon },
-    { id: 'health' as const, label: 'Health Metrics', icon: HeartIcon },
-    { id: 'config' as const, label: 'Configuration', icon: Cog6ToothIcon },
-  ];
-
-  return (
-    <div className="border-b border-gray-200">
-      <nav className="flex space-x-8">
-        {tabs.map(tab => {
-          const Icon = tab.icon;
-          return (
-            <button
-              key={tab.id}
-              onClick={() => onTabChange(tab.id)}
-              className={`py-4 px-1 border-b-2 font-medium text-sm flex items-center space-x-2 ${
-                activeTab === tab.id
-                  ? 'border-blue-500 text-blue-600'
-                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
-              }`}
-            >
-              <Icon className="w-4 h-4" />
-              <span>{tab.label}</span>
-            </button>
-          );
-        })}
-      </nav>
-    </div>
-  );
-}

package/monodog-dashboard/src/components/modules/packages/components/PackageStats.tsx

@@ -1,70 +0,0 @@
-import {
-  CheckCircleIcon,
-  ExclamationTriangleIcon,
-  XCircleIcon,
-} from '../../../../icons/heroicons';
-import { PackageStats as StatsType } from '../types/packages.types';
-import type { PackageStatsProps } from '../../../../types';
-import { CubeIcon } from '../../../../icons/heroicons';
-
-export default function PackageStats({ stats }: PackageStatsProps) {
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
-      <div className="bg-gray-100 p-6 rounded-lg shadow border">
-        <div className="flex items-center">
-          <div className="p-2 rounded-lg">
-            <CubeIcon className="w-6 h-6 text-primary-600" />
-          </div>
-          <div className="ml-4">
-            <p className="text-sm font-medium text-gray-600">Total Packages</p>
-            <p className="text-2xl font-semibold text-gray-900">
-              {stats.total}
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <div className="bg-green-100 p-6 rounded-lg shadow border">
-        <div className="flex items-center">
-          <div className="p-2 bg-green-100 rounded-lg">
-            <CheckCircleIcon className="w-6 h-6 text-primary-600" />
-          </div>
-          <div className="ml-4">
-            <p className="text-sm font-medium text-gray-600">Healthy</p>
-            <p className="text-2xl font-semibold text-gray-600">
-              {stats.healthy}
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <div className="bg-yellow-100 p-6 rounded-lg shadow border">
-        <div className="flex items-center">
-          <div className="p-2 bg-yellow-100 rounded-lg">
-            <ExclamationTriangleIcon className="w-6 h-6 text-primary-600" />
-          </div>
-          <div className="ml-4">
-            <p className="text-sm font-medium text-gray-600">Warnings</p>
-            <p className="text-2xl font-semibold text-gray-600">
-              {stats.warnings}
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <div className="bg-red-100 p-6 rounded-lg shadow border">
-        <div className="flex items-center">
-          <div className="p-2 bg-red-100 rounded-lg">
-            <XCircleIcon className="w-6 h-6 text-primary-600" />
-          </div>
-          <div className="ml-4">
-            <p className="text-sm font-medium text-gray-600">Errors</p>
-            <p className="text-2xl font-semibold text-gray-600">
-              {stats.errors}
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}