Hugging Face's logo

Spaces:
Underground-Digital
/
ACE
Running

App Files Community
Severian commited on
Commit
e1faa07
·
verified ·
1 Parent(s): ebf109c

Update App.tsx

Browse files
Files changed (1) hide show
  1. App.tsx +87 -103
App.tsx CHANGED
@@ -749,9 +749,9 @@ const App: React.FC = () => {
749
  };
750
 
751
  return (
752
- <div className="flex h-screen bg-gray-900 text-gray-100">
753
- {/* --- FIXED HEADER --- */}
754
- <div className="fixed top-0 left-0 right-0 z-40 bg-gray-800/95 backdrop-blur-sm border-b border-gray-700 px-6 py-3">
755
  <div className="flex justify-between items-center">
756
  <div className="flex items-center gap-4">
757
  <h1 className="text-xl font-bold text-white">ACE Pipeline</h1>
@@ -769,93 +769,96 @@ const App: React.FC = () => {
769
  </button>
770
  </div>
771
  </div>
772
- </div>
773
 
774
- {/* --- SIDEBAR --- */}
775
- <aside className="w-80 bg-gray-800/50 p-4 flex flex-col flex-shrink-0 border-r border-gray-700 overflow-hidden" style={{ marginTop: '60px' }}>
776
- <button
777
- onClick={handleStartNewJob}
778
- className={`w-full flex items-center gap-3 p-3 rounded-lg text-left font-semibold mb-4 transition-colors min-w-0 ${getActiveJobId() === jobId && view.type === 'new_job' ? 'bg-blue-600 text-white' : 'bg-gray-700 hover:bg-gray-600 text-gray-200'}`}
779
- >
780
- <PlusIcon className="w-6 h-6 flex-shrink-0"/>
781
- <span className="truncate">New Job</span>
782
- </button>
783
- <h2 className="px-2 text-sm font-semibold text-gray-400 uppercase tracking-wider mb-2">History</h2>
784
- <div className="flex-grow overflow-y-auto overflow-x-hidden pr-1">
785
- {history.length === 0 ? (
786
- <div className="text-center text-gray-500 p-4">No jobs completed yet.</div>
787
- ) : (
788
- <ul className="space-y-1">
789
- {history
790
- .filter((h, index, arr) => arr.findIndex(item => item.id === h.id) === index) // Remove any runtime duplicates
791
- .map(h => (
792
- <li key={h.id} className="group">
793
- <div className="flex items-center min-w-0">
794
- <button
795
- onClick={() => setView({ type: 'view_history', jobId: h.id })}
796
- className={`flex-1 min-w-0 text-left p-3 rounded-l-lg transition-colors ${getActiveJobId() === h.id ? 'bg-gray-700' : 'hover:bg-gray-700/50'}`}
797
- >
798
- <div className="flex items-start gap-3 min-w-0">
799
- <DocumentTextIcon className="w-6 h-6 text-gray-400 mt-0.5 flex-shrink-0"/>
800
- <div className="flex-1 min-w-0">
801
- <p className="font-medium text-gray-200 truncate" title={h.filename}>{h.filename}</p>
802
- <p className="text-xs text-gray-400 truncate">{new Date(h.date).toLocaleDateString()}</p>
803
- <div className="text-xs mt-1">
804
- <span className="text-green-400">{h.completedCount}</span>
805
- <span className="text-gray-500"> / </span>
806
- <span className="text-red-400">{h.failedCount}</span>
807
- {h.results && h.results.length > 0 && (
808
- <span className="text-blue-400 ml-2">• Full Results</span>
809
- )}
 
 
 
810
  </div>
811
  </div>
812
- </div>
813
- </button>
814
- <button
815
- onClick={(e) => {
816
- e.stopPropagation();
817
- setDeleteConfirmId(h.id);
818
- }}
819
- className="p-3 text-gray-500 hover:text-red-400 hover:bg-red-900/20 rounded-r-lg transition-colors opacity-0 group-hover:opacity-100 flex-shrink-0"
820
- title="Delete job"
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
821
  >
822
- <TrashIcon className="w-4 h-4" />
823
  </button>
824
- </div>
825
- </li>
826
- ))}
827
- </ul>
828
- )}
829
- </div>
830
- </aside>
831
-
832
- {/* --- MAIN CONTENT --- */}
833
- <main className="flex-grow p-8 flex items-center justify-center overflow-auto" style={{ marginTop: '60px' }}>
834
- {error && view.type === 'new_job' && (
835
- <div className="fixed top-20 right-4 max-w-sm text-left text-red-200 bg-red-900/70 p-4 rounded-lg shadow-lg border border-red-700 z-50">
836
- <div className="flex items-start justify-between gap-3">
837
- <div>
838
- <div className="font-semibold">Issues detected during processing</div>
839
- <div className="text-sm mt-1">{error}</div>
840
- {errors.length > 0 && (
841
- <button
842
- className="mt-3 text-xs underline text-red-200 hover:text-white"
843
- onClick={() => setShowErrorDetails(true)}
844
- >
845
- View details ({errors.length})
846
- </button>
847
- )}
848
  </div>
849
- <button
850
- onClick={() => { setError(null); }}
851
- className="text-xs px-2 py-1 bg-red-800 hover:bg-red-700 rounded text-red-100"
852
- title="Dismiss"
853
- >Dismiss</button>
854
  </div>
855
- </div>
856
- )}
857
- {renderMainContent()}
858
- </main>
859
 
860
  {/* --- DELETE CONFIRMATION DIALOG --- */}
861
  {deleteConfirmId && (
@@ -912,26 +915,7 @@ const AuthenticatedApp: React.FC = () => {
912
  return <SignInPage />;
913
  }
914
 
915
- return (
916
- <div className="min-h-screen bg-gray-900">
917
- {/* Header with logout */}
918
- <header className="bg-gray-800 border-b border-gray-700 px-6 py-4">
919
- <div className="flex justify-between items-center">
920
- <h1 className="text-2xl font-bold text-white">ACE UI Dashboard</h1>
921
- <div className="flex items-center gap-4">
922
- <span className="text-gray-300">Welcome, {user.name}</span>
923
- <button
924
- onClick={() => logout()}
925
- className="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors"
926
- >
927
- Sign Out
928
- </button>
929
- </div>
930
- </div>
931
- </header>
932
- <App />
933
- </div>
934
- );
935
  };
936
 
937
  // Root component with routing
 
749
  };
750
 
751
  return (
752
+ <div className="flex flex-col h-screen bg-gray-900 text-gray-100">
753
+ {/* --- HEADER --- */}
754
+ <header className="bg-gray-800/95 backdrop-blur-sm border-b border-gray-700 px-6 py-3 flex-shrink-0">
755
  <div className="flex justify-between items-center">
756
  <div className="flex items-center gap-4">
757
  <h1 className="text-xl font-bold text-white">ACE Pipeline</h1>
 
769
  </button>
770
  </div>
771
  </div>
772
+ </header>
773
 
774
+ {/* --- MAIN LAYOUT --- */}
775
+ <div className="flex flex-1 overflow-hidden">
776
+ {/* --- SIDEBAR --- */}
777
+ <aside className="w-80 bg-gray-800/50 p-4 flex flex-col flex-shrink-0 border-r border-gray-700 overflow-hidden">
778
+ <button
779
+ onClick={handleStartNewJob}
780
+ className={`w-full flex items-center gap-3 p-3 rounded-lg text-left font-semibold mb-4 transition-colors min-w-0 ${getActiveJobId() === jobId && view.type === 'new_job' ? 'bg-blue-600 text-white' : 'bg-gray-700 hover:bg-gray-600 text-gray-200'}`}
781
+ >
782
+ <PlusIcon className="w-6 h-6 flex-shrink-0"/>
783
+ <span className="truncate">New Job</span>
784
+ </button>
785
+ <h2 className="px-2 text-sm font-semibold text-gray-400 uppercase tracking-wider mb-2">History</h2>
786
+ <div className="flex-grow overflow-y-auto overflow-x-hidden pr-1">
787
+ {history.length === 0 ? (
788
+ <div className="text-center text-gray-500 p-4">No jobs completed yet.</div>
789
+ ) : (
790
+ <ul className="space-y-1">
791
+ {history
792
+ .filter((h, index, arr) => arr.findIndex(item => item.id === h.id) === index) // Remove any runtime duplicates
793
+ .map(h => (
794
+ <li key={h.id} className="group">
795
+ <div className="flex items-center min-w-0">
796
+ <button
797
+ onClick={() => setView({ type: 'view_history', jobId: h.id })}
798
+ className={`flex-1 min-w-0 text-left p-3 rounded-l-lg transition-colors ${getActiveJobId() === h.id ? 'bg-gray-700' : 'hover:bg-gray-700/50'}`}
799
+ >
800
+ <div className="flex items-start gap-3 min-w-0">
801
+ <DocumentTextIcon className="w-6 h-6 text-gray-400 mt-0.5 flex-shrink-0"/>
802
+ <div className="flex-1 min-w-0">
803
+ <p className="font-medium text-gray-200 truncate" title={h.filename}>{h.filename}</p>
804
+ <p className="text-xs text-gray-400 truncate">{new Date(h.date).toLocaleDateString()}</p>
805
+ <div className="text-xs mt-1">
806
+ <span className="text-green-400">{h.completedCount}</span>
807
+ <span className="text-gray-500"> / </span>
808
+ <span className="text-red-400">{h.failedCount}</span>
809
+ {h.results && h.results.length > 0 && (
810
+ <span className="text-blue-400 ml-2">• Full Results</span>
811
+ )}
812
+ </div>
813
  </div>
814
  </div>
815
+ </button>
816
+ <button
817
+ onClick={(e) => {
818
+ e.stopPropagation();
819
+ setDeleteConfirmId(h.id);
820
+ }}
821
+ className="p-3 text-gray-500 hover:text-red-400 hover:bg-red-900/20 rounded-r-lg transition-colors opacity-0 group-hover:opacity-100 flex-shrink-0"
822
+ title="Delete job"
823
+ >
824
+ <TrashIcon className="w-4 h-4" />
825
+ </button>
826
+ </div>
827
+ </li>
828
+ ))}
829
+ </ul>
830
+ )}
831
+ </div>
832
+ </aside>
833
+
834
+ {/* --- MAIN CONTENT --- */}
835
+ <main className="flex-grow p-8 flex items-center justify-center overflow-auto">
836
+ {error && view.type === 'new_job' && (
837
+ <div className="fixed top-20 right-4 max-w-sm text-left text-red-200 bg-red-900/70 p-4 rounded-lg shadow-lg border border-red-700 z-50">
838
+ <div className="flex items-start justify-between gap-3">
839
+ <div>
840
+ <div className="font-semibold">Issues detected during processing</div>
841
+ <div className="text-sm mt-1">{error}</div>
842
+ {errors.length > 0 && (
843
+ <button
844
+ className="mt-3 text-xs underline text-red-200 hover:text-white"
845
+ onClick={() => setShowErrorDetails(true)}
846
  >
847
+ View details ({errors.length})
848
  </button>
849
+ )}
850
+ </div>
851
+ <button
852
+ onClick={() => { setError(null); }}
853
+ className="text-xs px-2 py-1 bg-red-800 hover:bg-red-700 rounded text-red-100"
854
+ title="Dismiss"
855
+ >Dismiss</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
856
  </div>
 
 
 
 
 
857
  </div>
858
+ )}
859
+ {renderMainContent()}
860
+ </main>
861
+ </div>
862
 
863
  {/* --- DELETE CONFIRMATION DIALOG --- */}
864
  {deleteConfirmId && (
 
915
  return <SignInPage />;
916
  }
917
 
918
+ return <App />;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
919
  };
920
 
921
  // Root component with routing