formatting improvement

2026-07-01 21:54:05 -04:00 · 2025-07-17 22:22:51 -07:00
parent 74f017f498
commit 41da7e7033
5 changed files with 53 additions and 90 deletions
@@ -26,7 +26,7 @@ export default function RootLayout({
  children: React.ReactNode;
 }>) {
  return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning={true}>
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
@@ -20,25 +20,9 @@ export default function LoginPage() {

          <div className="mt-8">
            <div className="mt-6">
-              <div className="space-y-3 mb-6">
-                <Button variant="outline" className="w-full" type="button" onClick={() => alert('GitHub login not implemented')}>
-                  <Github className="mr-2 h-4 w-4" />
-                  Continue with GitHub
-                </Button>
-                <Button variant="outline" className="w-full" type="button" onClick={() => alert('SSO login not implemented')}>
-                  <Lock className="mr-2 h-4 w-4" /> 
-                  Continue with SSO
-                </Button>
-              </div>
+  

-              <div className="relative my-6">
-                <div className="absolute inset-0 flex items-center" aria-hidden="true">
-                  <div className="w-full border-t border-gray-300" />
-                </div>
-                <div className="relative flex justify-center text-sm">
-                  <span className="bg-gray-50 px-2 text-gray-500">or sign in with email</span>
-                </div>
-              </div>
+  

              <form action={signInWithMagicLink} method="POST" className="space-y-6">
                <div>
@@ -61,7 +45,7 @@ export default function LoginPage() {
                <div>
                  <Button
                    type="submit"
-                    className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+                    className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium"
                  >
                    <Mail className="mr-2 h-4 w-4" />
                    Send Magic Link
@@ -73,15 +57,6 @@ export default function LoginPage() {
                We'll email you a magic link for a password-free sign in.
              </p>

-              <div className="mt-8 text-center">
-                <p className="text-sm text-gray-600">
-                  Need to create an account?{' '}
-                  {/* This link can point to a dedicated sign-up page or the same magic link flow */}
-                  <Link href="#" className="font-medium text-indigo-600 hover:text-indigo-500">
-                    Sign Up
-                  </Link>
-                </p>
-              </div>
            </div>
          </div>
        </div>
@@ -24,19 +24,21 @@ export function NoQuestionsAvailable({ projectId }: NoQuestionsAvailableProps) {
  };

  return (
-    <div className="flex flex-col items-center justify-center h-64 border-2 border-dashed border-gray-300 rounded-lg">
-      <div className="text-center max-w-md">
-        <FileText className="mx-auto h-12 w-12 text-gray-400 mb-4" />
-        <h3 className="text-lg font-medium text-gray-900 mb-2">No Questions Available</h3>
-        <p className="text-gray-500 mb-6">
+    <div className="flex flex-col items-center justify-center min-h-[60vh] py-12">
+      <div className="text-center max-w-lg px-4">
+        <div className="mb-6">
+          <FileText className="mx-auto h-16 w-16 text-gray-400 mb-4" />
+        </div>
+        <h3 className="text-2xl font-semibold text-gray-900 mb-3">No Questions Available</h3>
+        <p className="text-gray-600 mb-8 leading-relaxed">
          To get started, upload documents for AI to extract questions automatically, or add questions manually.
        </p>
-        <div className="flex gap-3 justify-center">
-          <Button onClick={handleUploadClick} className="gap-2">
+        <div className="flex flex-col sm:flex-row gap-4 justify-center">
+          <Button onClick={handleUploadClick} className="gap-2 px-6 py-2.5">
            <Upload className="h-4 w-4" />
            Upload Documents
          </Button>
-          <Button variant="outline" onClick={handleAddManuallyClick} className="gap-2">
+          <Button variant="outline" onClick={handleAddManuallyClick} className="gap-2 px-6 py-2.5">
            <Plus className="h-4 w-4" />
            Add Manually
          </Button>
@@ -39,44 +39,46 @@ function QuestionsSectionInner({ projectId }: QuestionsSectionProps) {
    handleSelectAllIndexes,
  } = useQuestions();

-  // Loading state
-  if (isLoading) {
-    return <QuestionsLoadingState />;
-  }
-
-  // Error state
-  if (error) {
-    return <QuestionsErrorState error={error} />;
-  }
-
-
-  console.log("In QuestionsSectionInner, rfpDocument", rfpDocument);
-  console.log("In QuestionsSectionInner, projectId", projectId);
-  // No questions state
-  if (!rfpDocument || rfpDocument.sections.length === 0 || 
-      rfpDocument.sections.every(section => section.questions.length === 0)) {
-    return <NoQuestionsAvailable projectId={projectId} />;
-  }
-
  return (
-    <div className="space-y-6 p-12">
-      <QuestionsHeader
-        searchQuery={searchQuery}
-        onSearchChange={setSearchQuery}
-        onSaveAll={saveAllAnswers}
-        onExport={handleExportAnswers}
-        unsavedCount={unsavedQuestions.size}
-        isSaving={savingQuestions.size > 0}
-      />
+    <div className="space-y-6 p-6 md:p-8 lg:p-12 min-h-screen">
+      {/* Loading state */}
+      {isLoading && <QuestionsLoadingState />}

-      {/* Index Selection Panel */}
-      <IndexSelector
-        availableIndexes={availableIndexes}
-        selectedIndexes={selectedIndexes}
-        organizationConnected={organizationConnected}
-        onIndexToggle={handleIndexToggle}
-        onSelectAllIndexes={handleSelectAllIndexes}
-      />
+      {/* Error state */}
+      {error && <QuestionsErrorState error={error} />}
+
+      {/* No questions state */}
+      {(!isLoading && !error && (!rfpDocument || rfpDocument.sections.length === 0 || 
+        rfpDocument.sections.every(section => section.questions.length === 0))) && (
+        <NoQuestionsAvailable projectId={projectId} />
+      )}
+
+      {/* Questions available state */}
+      {!isLoading && !error && rfpDocument && rfpDocument.sections.length > 0 && 
+       !rfpDocument.sections.every(section => section.questions.length === 0) && (
+        <>
+          <QuestionsHeader
+            searchQuery={searchQuery}
+            onSearchChange={setSearchQuery}
+            onSaveAll={saveAllAnswers}
+            onExport={handleExportAnswers}
+            unsavedCount={unsavedQuestions.size}
+            isSaving={savingQuestions.size > 0}
+          />
+
+          {/* Index Selection Panel */}
+          <IndexSelector
+            availableIndexes={availableIndexes}
+            selectedIndexes={selectedIndexes}
+            organizationConnected={organizationConnected}
+            onIndexToggle={handleIndexToggle}
+            onSelectAllIndexes={handleSelectAllIndexes}
+          />
+
+          {/* Questions Filter Tabs */}
+          <QuestionsFilterTabs rfpDocument={rfpDocument} />
+        </>
+      )}

      {/* Source Details Dialog */}
      <SourceDetailsDialog
@@ -84,9 +86,6 @@ function QuestionsSectionInner({ projectId }: QuestionsSectionProps) {
        onClose={() => setIsSourceModalOpen(false)}
        source={selectedSource}
      />
-
-      {/* Questions Filter Tabs */}
-      <QuestionsFilterTabs rfpDocument={rfpDocument} />
      
      {/* Multi-step Response Dialog */}
      <MultiStepResponseHandler />
@@ -101,7 +100,7 @@ export function QuestionsSection({ projectId }: QuestionsSectionProps) {
  return (
    <QuestionsProvider projectId={projectId}>
      <Suspense fallback={
-        <div className="space-y-6 p-12">
+        <div className="space-y-6 p-6 md:p-8 lg:p-12 min-h-screen">
          <div className="flex items-center justify-between">
            <div className="h-8 w-36 bg-muted animate-pulse rounded"></div>
            <div className="flex items-center gap-2">
@@ -187,10 +187,6 @@ function GlobalHeaderContent() {

          {/* Right side - User menu */}
          <div className="flex items-center gap-3">
-            <Button variant="ghost" size="sm">
-              <HelpCircle className="h-4 w-4 mr-1.5" />
-              Help
-            </Button>
            
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
@@ -215,15 +211,6 @@ function GlobalHeaderContent() {
                  </div>
                </DropdownMenuLabel>
                <DropdownMenuSeparator />
-                <DropdownMenuItem onClick={() => router.push('/organizations')}>
-                  <Building2 className="mr-2 h-4 w-4" />
-                  <span>Organizations</span>
-                </DropdownMenuItem>
-                <DropdownMenuItem>
-                  <Settings className="mr-2 h-4 w-4" />
-                  <span>Account Settings</span>
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
                <DropdownMenuItem 
                  className="text-destructive cursor-pointer"
                  onClick={() => {