Spaces:

syncora
/

synthetic-generation

Running

App Files Files Community

Khushal-kreeda commited on Jun 30

Commit

56bf851

1 Parent(s): 7748079

app init

Browse files

Files changed (22) hide show

.env.example +31 -0
.gitignore +1 -0
package-lock.json +0 -0
package.json +6 -5
public/index.html +1 -1
src/App.css +1167 -17
src/App.js +184 -15
src/App.test.js +0 -8
src/components/DataViewer.css +292 -0
src/components/DataViewer.js +393 -0
src/components/Step1.js +144 -0
src/components/Step2.js +362 -0
src/components/Step3.js +223 -0
src/components/Step4.js +509 -0
src/components/TroubleshootingGuide.js +113 -0
src/index.css +3 -3
src/index.js +5 -11
src/logo.svg +0 -1
src/reportWebVitals.js +0 -13
src/setupTests.js +0 -5
src/utils/apiService.js +739 -0
src/utils/config.js +133 -0

.env.example ADDED Viewed

	@@ -0,0 +1,31 @@

+# Syncora Environment Configuration
+# Copy this file to .env.local and fill in your actual values
+# AWS Configuration (Required for client-side S3 upload)
+REACT_APP_AWS_ACCESS_KEY_ID=your_aws_access_key_id_here
+REACT_APP_AWS_SECRET_ACCESS_KEY=your_aws_secret_access_key_here
+REACT_APP_AWS_REGION=aws_region_here
+REACT_APP_S3_BUCKET_NAME=your_s3_bucket_name_here
+# API Configuration
+REACT_APP_API_BASE_URL=api.example.com
+REACT_APP_API_TIMEOUT=30
+REACT_APP_MAX_RETRIES=3
+# Application Settings
+REACT_APP_DEFAULT_NUM_RECORDS=100
+REACT_APP_MAX_FILE_SIZE_MB=10
+# Debug Mode (set to 'true' for development)
+REACT_APP_DEBUG=false
+# Note: API key encryption/decryption keys are hardcoded in config.js for security
+# In production, these should be environment variables on the server side
+DEBUG=false
+LOG_LEVEL=INFO
+MAX_FILE_SIZE_MB=10
+DEFAULT_NUM_RECORDS=25
+# Optional: Custom API timeout settings (Server-side)
+API_TIMEOUT=1800
+MAX_RETRIES=3

.gitignore CHANGED Viewed

@@ -17,6 +17,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
 npm-debug.log*
 yarn-debug.log*

 .env.development.local
 .env.test.local
 .env.production.local
+.env
 npm-debug.log*
 yarn-debug.log*

package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

package.json CHANGED Viewed

@@ -1,12 +1,13 @@
 {
-  "name": "react-template",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^13.5.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-scripts": "5.0.1",

 {
+  "name": "syncora-synthetic-generation",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@aws-sdk/client-s3": "^3.837.0",
+    "@aws-sdk/s3-request-presigner": "^3.837.0",
+    "crypto-js": "^4.2.0",
+    "dotenv": "^17.0.0",
+    "papaparse": "^5.5.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-scripts": "5.0.1",

public/index.html CHANGED Viewed

@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <title>Syncora Data Generation</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

src/App.css CHANGED Viewed

@@ -1,34 +1,182 @@
 .App {
-  text-align: center;
 }
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
 }
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
 }
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
 }
-.App-link {
-  color: #61dafb;
 }
-@keyframes App-logo-spin {
   from {
     transform: rotate(0deg);
   }
@@ -36,3 +184,1005 @@
     transform: rotate(360deg);
   }
 }

+/* Import Google Fonts */
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+:root {
+  --primary-color: #3b82f6;
+  --primary-hover: #2563eb;
+  --primary-light: rgba(59, 130, 246, 0.1);
+  --secondary-color: #6b7280;
+  --success-color: #10b981;
+  --error-color: #ef4444;
+  --warning-color: #f59e0b;
+  --bg-primary: #0f172a;
+  --bg-secondary: #1e293b;
+  --bg-tertiary: #334155;
+  --bg-card: #1e293b;
+  --border-color: #475569;
+  --border-light: #64748b;
+  --text-primary: #f8fafc;
+  --text-secondary: #cbd5e1;
+  --text-muted: #94a3b8;
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+  --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+  --gradient-card: linear-gradient(145deg, #1e293b 0%, #334155 100%);
+}
 .App {
+  min-height: 100vh;
+  background: var(--bg-primary);
+  background-image: radial-gradient(
+      circle at 20% 20%,
+      rgba(59, 130, 246, 0.08) 0%,
+      transparent 50%
+    ),
+    radial-gradient(
+      circle at 80% 80%,
+      rgba(16, 185, 129, 0.05) 0%,
+      transparent 50%
+    );
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: var(--text-primary);
 }
+.app-header {
+  text-align: left;
+  padding: 2rem 2.5rem;
+  border-bottom: 1px solid var(--border-color);
+  background: var(--bg-card);
+  backdrop-filter: blur(10px);
+  box-shadow: var(--shadow-lg);
+  position: relative;
 }
+.app-header::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: var(--gradient-primary);
 }
+.header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+.app-header h1 {
+  font-size: 2.25rem;
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+  color: var(--text-primary);
+  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+.app-header p {
+  font-size: 1rem;
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+.status-indicator {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  background: rgba(16, 185, 129, 0.15);
+  padding: 0.75rem 1.25rem;
+  border-radius: 12px;
+  border: 1px solid rgba(16, 185, 129, 0.3);
+  backdrop-filter: blur(10px);
+  box-shadow: var(--shadow-md);
+  transition: all 0.3s ease;
+}
+.status-indicator:hover {
+  background: rgba(16, 185, 129, 0.2);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-lg);
+}
+.status-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--success-color);
+  box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
+  animation: pulse 2s infinite;
+}
+.status-dot.success {
+  background: var(--success-color);
+  box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
+}
+.status-dot.error {
+  background: var(--error-color);
+  box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
+}
+.status-dot.checking {
+  background: var(--warning-color);
+  box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
+  animation: pulse-checking 1s infinite;
+}
+.status-indicator {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+}
+.status-refresh-btn {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  font-size: 0.875rem;
+  transition: all 0.2s ease;
   display: flex;
   align-items: center;
   justify-content: center;
 }
+.status-refresh-btn:hover:not(:disabled) {
+  color: var(--text-secondary);
+  background: rgba(255, 255, 255, 0.1);
+  transform: scale(1.1);
 }
+.status-refresh-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  animation: spin 1s linear infinite;
+}
+@keyframes spin {
   from {
     transform: rotate(0deg);
   }
     transform: rotate(360deg);
   }
 }
+.status-details {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  margin-top: 2px;
+  max-width: 200px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+@keyframes pulse-checking {
+  0%,
+  100% {
+    opacity: 0.6;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.2);
+  }
+}
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.8;
+    transform: scale(1.1);
+  }
+}
+.status-indicator span {
+  color: var(--success-color);
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+.main-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  min-height: calc(100vh - 140px);
+  gap: 1.5rem;
+  padding: 1.5rem;
+  max-width: 1400px;
+  margin: 0 auto;
+  align-items: start;
+}
+/* Steps Columns */
+.steps-column {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+/* Step Content Areas */
+.step-content {
+  background: var(--bg-card);
+  background-image: var(--gradient-card);
+  padding: 2rem;
+  border-radius: 16px;
+  border: 1px solid var(--border-color);
+  box-shadow: var(--shadow-lg);
+  opacity: 1;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  backdrop-filter: blur(10px);
+  border-color: var(--primary-color);
+  box-shadow: var(--shadow-xl), 0 0 0 1px var(--primary-color),
+    0 0 40px rgba(99, 102, 241, 0.15);
+  transform: translateY(-2px);
+  min-height: fit-content;
+}
+.step-content::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 16px;
+  padding: 1px;
+  background: linear-gradient(
+    135deg,
+    transparent,
+    rgba(99, 102, 241, 0.2),
+    transparent
+  );
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  opacity: 1;
+  transition: opacity 0.4s ease;
+}
+/* Step Components Styling */
+.step-container {
+  display: flex;
+  flex-direction: column;
+  min-height: fit-content;
+}
+.step-header {
+  margin-bottom: 2rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid var(--border-color);
+  position: relative;
+}
+.step-header::after {
+  content: "";
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  width: 60px;
+  height: 2px;
+  background: var(--gradient-primary);
+  border-radius: 1px;
+}
+.step-header h2 {
+  color: var(--text-primary);
+  font-size: 1.5rem;
+  margin-bottom: 0.75rem;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  letter-spacing: -0.025em;
+}
+.step-number {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: var(--gradient-primary);
+  border-radius: 8px;
+  font-size: 0.875rem;
+  font-weight: 700;
+  color: white;
+  box-shadow: var(--shadow-md);
+}
+.step-header p {
+  color: var(--text-secondary);
+  font-size: 1rem;
+  line-height: 1.6;
+}
+.step-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+.step-footer {
+  margin-top: 2rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--border-color);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+/* Form Elements */
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-bottom: 2rem;
+}
+.form-group:last-child {
+  margin-bottom: 0;
+}
+.form-group label {
+  font-weight: 600;
+  color: var(--text-primary);
+  font-size: 0.9rem;
+  letter-spacing: 0.025em;
+  margin-bottom: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.form-input {
+  padding: 1rem 1.25rem;
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  font-size: 0.875rem;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  background: rgba(15, 23, 42, 0.8);
+  color: var(--text-primary);
+  backdrop-filter: blur(10px);
+  box-shadow: var(--shadow-sm);
+}
+.form-input:focus {
+  outline: none;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1), var(--shadow-md);
+  transform: translateY(-1px);
+}
+.form-input::placeholder {
+  color: var(--text-muted);
+}
+.btn {
+  padding: 1rem 1.5rem;
+  border: none;
+  border-radius: 12px;
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  position: relative;
+  overflow: hidden;
+  letter-spacing: -0.025em;
+  box-shadow: var(--shadow-md);
+}
+.btn::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.1),
+    transparent
+  );
+  transition: left 0.5s ease;
+}
+.btn:hover::before {
+  left: 100%;
+}
+.btn-primary {
+  background: var(--gradient-primary);
+  color: white;
+}
+.btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+}
+.btn-secondary {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+}
+.btn-secondary:hover {
+  background: var(--border-light);
+  transform: translateY(-1px);
+}
+.btn-success {
+  background: linear-gradient(135deg, var(--success-color) 0%, #059669 100%);
+  color: white;
+}
+.btn-success:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+}
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+}
+.btn:disabled:hover {
+  transform: none;
+}
+/* File Upload */
+.file-upload,
+.file-upload-area {
+  border: 2px dashed var(--border-color);
+  border-radius: 16px;
+  padding: 3rem 2rem;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  background: rgba(15, 23, 42, 0.5);
+  color: var(--text-secondary);
+  position: relative;
+  overflow: hidden;
+  margin-top: 1rem;
+}
+.file-upload::before,
+.file-upload-area::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: radial-gradient(
+    circle at center,
+    rgba(99, 102, 241, 0.05) 0%,
+    transparent 70%
+  );
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+.file-upload:hover,
+.file-upload-area:hover {
+  border-color: var(--primary-color);
+  background: rgba(99, 102, 241, 0.05);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+}
+.file-upload:hover::before,
+.file-upload-area:hover::before {
+  opacity: 1;
+}
+.file-upload.drag-over,
+.file-upload-area.drag-over {
+  border-color: var(--primary-color);
+  background: rgba(99, 102, 241, 0.1);
+  box-shadow: var(--shadow-lg), 0 0 0 1px var(--primary-color);
+}
+.file-upload input[type="file"],
+.file-upload-area input[type="file"] {
+  display: none;
+}
+.file-upload-icon {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+  color: var(--primary-color);
+}
+.file-upload-text {
+  font-size: 1.125rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  color: var(--text-primary);
+  letter-spacing: -0.025em;
+}
+.file-upload-subtext {
+  font-size: 0.875rem;
+  color: var(--text-muted);
+}
+.file-uploaded {
+  background: var(--bg-tertiary);
+  border: 2px solid var(--success-color);
+  border-radius: 12px;
+  padding: 1.5rem;
+  box-shadow: var(--shadow-md), 0 0 20px rgba(16, 185, 129, 0.1);
+  margin-top: 1rem;
+  position: relative;
+  overflow: hidden;
+}
+.file-uploaded::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, var(--success-color) 0%, #34d399 100%);
+}
+.file-info {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  color: var(--success-color);
+}
+.file-icon {
+  font-size: 2rem;
+  background: rgba(16, 185, 129, 0.1);
+  padding: 0.75rem;
+  border-radius: 8px;
+  border: 1px solid rgba(16, 185, 129, 0.3);
+}
+.file-details {
+  flex: 1;
+}
+.file-details h4 {
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  color: var(--text-primary);
+  font-size: 1.1rem;
+}
+.file-details p {
+  font-size: 0.875rem;
+  opacity: 0.8;
+  color: var(--text-secondary);
+  margin-bottom: 0.25rem;
+}
+.file-details p:last-child {
+  margin-bottom: 0;
+}
+/* Output Options */
+.output-options {
+  display: flex;
+  gap: 0.75rem;
+  margin-bottom: 1.5rem;
+}
+.output-option {
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  text-align: left;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+  position: relative;
+  overflow: hidden;
+  flex: 1;
+  min-width: 0;
+}
+.output-option::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--gradient-primary);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+.output-option:hover {
+  border-color: var(--primary-color);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+}
+.output-option.selected {
+  border-color: var(--primary-color);
+  background: rgba(99, 102, 241, 0.1);
+  box-shadow: var(--shadow-md), 0 0 0 1px var(--primary-color);
+}
+.output-option.selected::before {
+  opacity: 0.05;
+}
+.output-option.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.output-option.disabled:hover {
+  transform: none;
+  box-shadow: none;
+}
+.output-option h4 {
+  margin-bottom: 0.25rem;
+  color: var(--text-primary);
+  font-weight: 600;
+  position: relative;
+  z-index: 1;
+  font-size: 0.875rem;
+}
+.output-option p {
+  color: var(--text-secondary);
+  font-size: 0.75rem;
+  line-height: 1.4;
+  position: relative;
+  z-index: 1;
+  opacity: 0.8;
+}
+/* Data Preview */
+.data-preview {
+  margin-top: 1.5rem;
+  background: var(--bg-card);
+  border-radius: 12px;
+  padding: 1.5rem;
+  border: 1px solid var(--border-color);
+  box-shadow: var(--shadow-md);
+}
+.data-preview h4 {
+  color: var(--text-primary);
+  margin-bottom: 1rem;
+  font-size: 1rem;
+  font-weight: 600;
+}
+.data-table-container {
+  width: 100%;
+  max-height: 400px;
+  overflow: auto;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  box-shadow: var(--shadow-md);
+  background: var(--bg-secondary);
+}
+.data-table-scrollable {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.8rem;
+  min-width: 600px; /* Ensure minimum width for horizontal scrolling */
+}
+.data-table-scrollable th,
+.data-table-scrollable td {
+  padding: 0.75rem 1rem;
+  text-align: left;
+  border-bottom: 1px solid var(--border-color);
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 200px; /* Limit column width */
+  min-width: 100px; /* Minimum column width */
+}
+.data-table-scrollable th {
+  background: var(--bg-primary);
+  font-weight: 600;
+  color: var(--text-primary);
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  border-right: 1px solid var(--border-color);
+}
+.data-table-scrollable td {
+  border-right: 1px solid var(--border-color);
+}
+.data-table-scrollable tr:hover {
+  background: rgba(59, 130, 246, 0.08);
+}
+.data-table-scrollable tr:nth-child(even) {
+  background: rgba(255, 255, 255, 0.02);
+}
+.preview-note {
+  margin-top: 0.75rem;
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  text-align: center;
+  font-style: italic;
+}
+/* Custom scrollbar for the data table container */
+.data-table-container::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.data-table-container::-webkit-scrollbar-track {
+  background: var(--bg-tertiary);
+  border-radius: 4px;
+}
+.data-table-container::-webkit-scrollbar-thumb {
+  background: var(--border-light);
+  border-radius: 4px;
+}
+.data-table-container::-webkit-scrollbar-thumb:hover {
+  background: var(--primary-color);
+}
+/* Legacy data-table styles for backward compatibility */
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.8rem;
+  border-radius: 8px;
+  overflow: hidden;
+}
+.data-table th,
+.data-table td {
+  padding: 0.75rem 0.5rem;
+  text-align: left;
+  border-bottom: 1px solid var(--border-color);
+  color: var(--text-primary);
+}
+.data-table th {
+  background: var(--bg-primary);
+  font-weight: 600;
+  color: var(--text-primary);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+.data-table tr:hover {
+  background: rgba(99, 102, 241, 0.05);
+}
+/* Slider */
+.slider-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.slider {
+  width: 100%;
+  height: 8px;
+  border-radius: 4px;
+  background: var(--bg-tertiary);
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+  position: relative;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: var(--gradient-primary);
+  cursor: pointer;
+  box-shadow: var(--shadow-md);
+  transition: all 0.3s ease;
+}
+.slider::-webkit-slider-thumb:hover {
+  transform: scale(1.1);
+  box-shadow: var(--shadow-lg);
+}
+.slider::-moz-range-thumb {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: var(--gradient-primary);
+  cursor: pointer;
+  border: none;
+  box-shadow: var(--shadow-md);
+  transition: all 0.3s ease;
+}
+slider::-moz-range-thumb:hover {
+  transform: scale(1.1);
+  box-shadow: var(--shadow-lg);
+}
+.slider-value {
+  text-align: center;
+  font-weight: 600;
+  color: var(--primary-color);
+  font-size: 1rem;
+  background: rgba(99, 102, 241, 0.1);
+  padding: 0.5rem 1rem;
+  border-radius: 8px;
+  border: 1px solid rgba(99, 102, 241, 0.2);
+}
+/* Status Messages */
+.status-message {
+  padding: 1rem 1.25rem;
+  border-radius: 12px;
+  font-weight: 500;
+  font-size: 0.875rem;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  backdrop-filter: blur(10px);
+  box-shadow: var(--shadow-md);
+  font-family: "Inter", sans-serif;
+}
+.status-message.success {
+  background: rgba(16, 185, 129, 0.15);
+  color: var(--success-color);
+  border: 1px solid rgba(16, 185, 129, 0.3);
+}
+.status-message.error {
+  background: rgba(248, 113, 113, 0.15);
+  color: var(--error-color);
+  border: 1px solid rgba(248, 113, 113, 0.3);
+}
+.status-message.info {
+  background: rgba(99, 102, 241, 0.15);
+  color: var(--primary-color);
+  border: 1px solid rgba(99, 102, 241, 0.3);
+}
+.status-message.warning {
+  background: rgba(245, 158, 11, 0.15);
+  color: var(--warning-color);
+  border: 1px solid rgba(245, 158, 11, 0.3);
+}
+.status-message-icon {
+  font-size: 1.25rem;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.status-message-content h4 {
+  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+.status-message-content ul {
+  margin: 0;
+  color: inherit;
+  opacity: 0.9;
+}
+/* Status Summary List */
+.status-summary {
+  margin-top: 0.75rem;
+  background: rgba(15, 23, 42, 0.3);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  padding: 0.75rem;
+  backdrop-filter: blur(5px);
+}
+.status-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.4rem 0;
+  border-bottom: 1px solid rgba(71, 85, 105, 0.2);
+  font-size: 0.8rem;
+}
+.status-row:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+.status-row:first-child {
+  padding-top: 0;
+}
+.status-label {
+  font-weight: 500;
+  color: var(--text-secondary);
+  min-width: 80px;
+  font-size: 0.8rem;
+}
+.status-badge {
+  padding: 0.15rem 0.5rem;
+  border-radius: 12px;
+  font-size: 0.65rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+  border: 1px solid;
+  backdrop-filter: blur(10px);
+  transition: all 0.2s ease;
+}
+.status-badge.success {
+  background: rgba(16, 185, 129, 0.15);
+  color: var(--success-color);
+  border-color: rgba(16, 185, 129, 0.3);
+}
+.status-badge.warning {
+  background: rgba(245, 158, 11, 0.15);
+  color: var(--warning-color);
+  border-color: rgba(245, 158, 11, 0.3);
+}
+.status-badge.info {
+  background: rgba(99, 102, 241, 0.15);
+  color: var(--primary-color);
+  border-color: rgba(99, 102, 241, 0.3);
+}
+/* Step wrapper states */
+.step-wrapper.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+  position: relative;
+}
+.step-wrapper.disabled::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.1);
+  z-index: 1;
+  border-radius: 12px;
+}
+.step-wrapper.enabled {
+  opacity: 1;
+  pointer-events: auto;
+}
+/* Disabled step content */
+.step-wrapper.disabled .btn {
+  pointer-events: none;
+  opacity: 0.6;
+}
+.step-wrapper.disabled input,
+.step-wrapper.disabled select,
+.step-wrapper.disabled textarea {
+  pointer-events: none;
+  opacity: 0.6;
+}
+.step-wrapper.disabled .file-upload-zone {
+  pointer-events: none;
+  opacity: 0.6;
+}
+/* Results Section Styles */
+.results-section {
+  margin-top: 2rem;
+}
+.generate-new-section {
+  border-top: 1px solid var(--border-color);
+  padding-top: 1.5rem;
+  margin-top: 2rem;
+}
+.success-details {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+  margin-top: 0.75rem;
+}
+.success-stat {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+}
+.success-label {
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+.success-value {
+  color: var(--text-primary);
+  font-weight: 600;
+  padding: 0.25rem 0.5rem;
+  background: rgba(16, 185, 129, 0.1);
+  border-radius: 4px;
+  border: 1px solid rgba(16, 185, 129, 0.2);
+}
+.download-actions {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+.download-btn-primary {
+  font-size: 1rem;
+  padding: 0.875rem 2rem;
+  font-weight: 600;
+  background: linear-gradient(135deg, var(--success-color) 0%, #059669 100%);
+  border: none;
+  color: white;
+}
+.download-btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+}
+.btn-outline {
+  background: transparent;
+  border: 2px solid var(--border-color);
+  color: var(--text-secondary);
+  padding: 0.75rem 1.5rem;
+  border-radius: 8px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-decoration: none;
+}
+.btn-outline:hover {
+  border-color: var(--primary-color);
+  color: var(--primary-color);
+  background: rgba(59, 130, 246, 0.05);
+}
+/* Error Section Improvements */
+.error-section {
+  margin-top: 2rem;
+}
+.error-details {
+  margin-top: 0.75rem;
+  padding: 0.75rem;
+  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.2);
+  border-radius: 8px;
+  font-size: 0.875rem;
+}
+.error-help {
+  color: var(--text-secondary);
+}
+.error-help ul {
+  color: var(--text-secondary);
+  opacity: 0.9;
+}
+.error-help li {
+  margin-bottom: 0.25rem;
+}
+/* Generation section improvements */
+.generation-progress {
+  text-align: center;
+  padding: 2rem;
+  background: var(--bg-card);
+  border-radius: 12px;
+  border: 1px solid var(--border-color);
+}
+.generation-progress .spinner {
+  margin: 0 auto 1rem;
+}
+.progress-bar {
+  width: 100%;
+  height: 8px;
+  background: var(--bg-tertiary);
+  border-radius: 4px;
+  overflow: hidden;
+  margin: 1rem 0;
+}
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    var(--primary-color),
+    var(--success-color)
+  );
+  border-radius: 4px;
+  transition: width 0.3s ease;
+}

src/App.js CHANGED Viewed

@@ -1,23 +1,192 @@
-import logo from './logo.svg';
-import './App.css';
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
       </header>
     </div>
   );
 }

+import React, { useState, useEffect } from "react";
+import "./App.css";
+import Step1 from "./components/Step1";
+import Step2 from "./components/Step2";
+import Step3 from "./components/Step3";
+import Step4 from "./components/Step4";
+import { config as appConfig, debugLog } from "./utils/config";
+import { ApiService } from "./utils/apiService";
+// Make ApiService available globally for debugging
+if (process.env.NODE_ENV === "development") {
+  window.ApiService = ApiService;
+  console.log("[Debug] ApiService is available globally as window.ApiService");
+}
 function App() {
+  const [apiKey, setApiKey] = useState("");
+  const [isApiKeyValid, setIsApiKeyValid] = useState(false); // Explicitly initialized to false
+  // Debug log when API key validity changes
+  useEffect(() => {
+    console.log("[App] API key validity changed:", isApiKeyValid);
+  }, [isApiKeyValid]);
+  const [uploadedFile, setUploadedFile] = useState(null);
+  const [s3Link, setS3Link] = useState("");
+  const [fileMetadata, setFileMetadata] = useState({
+    fileSizeBytes: 0,
+    sourceFileRows: 0,
+  });
+  const [config, setConfig] = useState({
+    numRows: appConfig.defaultNumRecords,
+    targetColumn: "",
+  });
+  const [generatedDataLink, setGeneratedDataLink] = useState("");
+  // Check for previously stored and valid API key on app load
+  useEffect(() => {
+    const checkStoredApiKey = async () => {
+      try {
+        debugLog("Checking for stored API key on app initialization");
+        const storedKeyStatus = await ApiService.verifyStoredApiKey();
+        if (storedKeyStatus.valid) {
+          setIsApiKeyValid(true);
+          debugLog("Valid stored API key found", storedKeyStatus);
+        } else {
+          setIsApiKeyValid(false);
+          debugLog("No valid stored API key", storedKeyStatus);
+        }
+      } catch (error) {
+        debugLog("Error checking stored API key", error);
+        setIsApiKeyValid(false);
+      }
+    };
+    checkStoredApiKey();
+  }, []);
+  // Log app initialization in debug mode
+  useEffect(() => {
+    debugLog("Syncora app initialized", {
+      defaultNumRecords: appConfig.defaultNumRecords,
+      maxFileSizeMB: appConfig.maxFileSizeMB,
+      apiBaseUrl: appConfig.apiBaseUrl,
+    });
+  }, []);
+  const steps = [
+    { number: 1, title: "API Key Validation", component: Step1, icon: "🔑" },
+    { number: 2, title: "Upload Files", component: Step2, icon: "📁" },
+    { number: 3, title: "Configuration", component: Step3, icon: "⚙️" },
+    { number: 4, title: "Generate Data", component: Step4, icon: "🚀" },
+  ];
+  // Helper function to check if a step should be enabled
+  const isStepEnabled = (stepNumber) => {
+    switch (stepNumber) {
+      case 1:
+        return true; // Step 1 is always enabled
+      case 2:
+        const step2Enabled = isApiKeyValid;
+        debugLog(`Step 2 enabled check: ${step2Enabled}`, {
+          isApiKeyValid,
+          apiKeyLength: apiKey.length,
+          hasApiKey: !!apiKey,
+        });
+        return step2Enabled; // Step 2 enabled when API key is valid
+      case 3:
+        return isApiKeyValid && uploadedFile && s3Link; // Step 3 enabled when file is uploaded
+      case 4:
+        return isApiKeyValid && uploadedFile && s3Link && config.targetColumn; // Step 4 enabled when config is complete
+      default:
+        return false;
+    }
+  };
+  const renderStep = (stepNumber) => {
+    const step = steps[stepNumber - 1];
+    const StepComponent = step.component;
+    const enabled = isStepEnabled(stepNumber);
+    return (
+      <div className={`step-wrapper ${enabled ? "enabled" : "disabled"}`}>
+        <StepComponent
+          apiKey={apiKey}
+          setApiKey={setApiKey}
+          isApiKeyValid={isApiKeyValid}
+          setIsApiKeyValid={setIsApiKeyValid}
+          uploadedFile={uploadedFile}
+          setUploadedFile={setUploadedFile}
+          s3Link={s3Link}
+          setS3Link={setS3Link}
+          fileMetadata={fileMetadata}
+          setFileMetadata={setFileMetadata}
+          config={config}
+          setConfig={setConfig}
+          generatedDataLink={generatedDataLink}
+          setGeneratedDataLink={setGeneratedDataLink}
+          stepNumber={stepNumber}
+          stepTitle={step.title}
+          stepIcon={step.icon}
+          enabled={enabled}
+        />
+      </div>
+    );
+  };
   return (
     <div className="App">
+      <header className="app-header">
+        <div className="header-content">
+          <div>
+            <h1>Syncora</h1>
+            <p>AI-Powered Data Generation Platform</p>
+          </div>
+          <div className="progress-indicator">
+            {steps.map((step, index) => {
+              const stepNumber = step.number;
+              const isEnabled = isStepEnabled(stepNumber);
+              const isCompleted =
+                stepNumber < steps.length
+                  ? isStepEnabled(stepNumber + 1)
+                  : stepNumber === 4 && generatedDataLink;
+              return (
+                <div
+                  key={step.number}
+                  className={`progress-step ${
+                    isCompleted
+                      ? "completed"
+                      : isEnabled
+                      ? "active"
+                      : "disabled"
+                  }`}
+                  title={`Step ${step.number}: ${step.title}`}
+                />
+              );
+            })}
+          </div>
+        </div>
       </header>
+      <div className="main-container">
+        {/* Left Column */}
+        <div className="steps-column">
+          {/* Step 1 */}
+          <div className="step-content">{renderStep(1)}</div>
+          {/* Step 2 */}
+          <div className="step-content">{renderStep(2)}</div>
+        </div>
+        {/* Right Column */}
+        <div className="steps-column">
+          {/* Step 3 */}
+          <div className="step-content">{renderStep(3)}</div>
+          {/* Step 4 */}
+          <div className="step-content">{renderStep(4)}</div>
+        </div>
+      </div>
+      {/* Floating Help Button */}
+      <button
+        className="floating-help"
+        onClick={() => window.open("https://docs.syncora.ai/help", "_blank")}
+        title="Get Help"
+      >
+        ?
+      </button>
     </div>
   );
 }

src/App.test.js DELETED Viewed

@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

src/components/DataViewer.css ADDED Viewed

	@@ -0,0 +1,292 @@

+/* Data Viewer Styles */
+.data-viewer {
+  width: 100%;
+}
+.data-viewer.loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  min-height: 200px;
+}
+.data-viewer.loading p {
+  margin-top: 1rem;
+  color: var(--text-secondary);
+}
+.data-viewer-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 1.5rem;
+  gap: 1rem;
+}
+.data-viewer-header .data-info h4 {
+  color: var(--text-primary);
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin-bottom: 0.25rem;
+}
+.data-viewer-header .data-info p {
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+}
+.download-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  background: var(--success-color);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-decoration: none;
+  white-space: nowrap;
+}
+.download-btn:hover {
+  background: #059669;
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+.data-table-container {
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: var(--shadow-md);
+}
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+.data-table thead {
+  background: var(--bg-tertiary);
+}
+.data-table th {
+  padding: 1rem 0.75rem;
+  text-align: left;
+  font-weight: 600;
+  color: var(--text-primary);
+  border-bottom: 1px solid var(--border-color);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 200px;
+}
+.data-table td {
+  padding: 0.75rem;
+  color: var(--text-secondary);
+  border-bottom: 1px solid rgba(71, 85, 105, 0.3);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 200px;
+}
+.data-table tbody tr:hover {
+  background: rgba(59, 130, 246, 0.05);
+}
+.data-table tbody tr:last-child td {
+  border-bottom: none;
+}
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  margin-top: 1.5rem;
+  padding: 1rem;
+}
+.pagination-info {
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+.pagination .btn {
+  padding: 0.5rem 1rem;
+  min-width: auto;
+}
+.data-viewer.error,
+.data-viewer.empty {
+  text-align: center;
+}
+.download-section {
+  text-align: center;
+}
+/* Additional styles for improved UI */
+.error-actions {
+  display: flex;
+  justify-content: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+.error-help ul {
+  color: var(--text-secondary);
+  opacity: 0.9;
+}
+.error-help li {
+  margin-bottom: 0.25rem;
+}
+.success-details {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+  margin-top: 0.75rem;
+}
+.success-stat {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+}
+.success-label {
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+.success-value {
+  color: var(--text-primary);
+  font-weight: 600;
+  padding: 0.25rem 0.5rem;
+  background: rgba(16, 185, 129, 0.1);
+  border-radius: 4px;
+}
+.download-actions {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+.download-btn-primary {
+  font-size: 1rem;
+  padding: 0.875rem 2rem;
+  font-weight: 600;
+}
+.btn-outline {
+  background: transparent;
+  border: 2px solid var(--border-color);
+  color: var(--text-secondary);
+  padding: 0.75rem 1.5rem;
+  border-radius: 8px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-decoration: none;
+}
+.btn-outline:hover {
+  border-color: var(--primary-color);
+  color: var(--primary-color);
+  background: rgba(59, 130, 246, 0.05);
+}
+.preview-note {
+  border: 1px solid var(--border-color);
+}
+/* Enhanced error display styles */
+.btn-large {
+  padding: 12px 24px !important;
+  font-size: 1rem !important;
+  font-weight: 600 !important;
+}
+.success-note {
+  animation: fadeIn 0.3s ease-in-out;
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.error-actions .btn {
+  min-width: 180px;
+}
+.status-message.error .status-message-content h4 {
+  color: var(--error-color, #dc3545);
+}
+.status-message.error .status-message-content p {
+  margin-bottom: 0.75rem;
+}
+/* Responsive data table */
+@media (max-width: 768px) {
+  .data-viewer-header {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 1rem;
+  }
+  .data-table-container {
+    overflow-x: auto;
+  }
+  .data-table th,
+  .data-table td {
+    padding: 0.5rem;
+    min-width: 120px;
+  }
+  .pagination {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+}
+/* Responsive improvements */
+@media (max-width: 568px) {
+  .error-actions {
+    flex-direction: column;
+    align-items: center;
+  }
+  .download-actions {
+    flex-direction: column;
+    align-items: center;
+  }
+  .success-details {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+}

src/components/DataViewer.js ADDED Viewed

	@@ -0,0 +1,393 @@

+import React, { useState, useEffect, useCallback } from "react";
+import { debugLog } from "../utils/config";
+import TroubleshootingGuide from "./TroubleshootingGuide";
+import "./DataViewer.css";
+const DataViewer = ({ s3Url, onDownload, showPreviewOnly = false }) => {
+  const [data, setData] = useState([]);
+  const [columns, setColumns] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [rowsPerPage] = useState(10);
+  const fetchData = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      debugLog("Fetching data from S3 URL:", s3Url);
+      // Try multiple approaches to fetch the data
+      let response;
+      // Method 1: Direct fetch with CORS
+      try {
+        response = await fetch(s3Url, {
+          method: "GET",
+          headers: {
+            Accept: "text/csv,text/plain,application/octet-stream,*/*",
+          },
+          mode: "cors",
+        });
+      } catch (corsError) {
+        debugLog("CORS fetch failed, trying no-cors:", corsError);
+        // Method 2: Try with no-cors mode (limited but might work)
+        try {
+          response = await fetch(s3Url, {
+            method: "GET",
+            mode: "no-cors",
+          });
+        } catch (noCorsError) {
+          debugLog("No-cors fetch also failed:", noCorsError);
+          throw new Error(
+            "Unable to preview data due to CORS restrictions. You can still download the file directly."
+          );
+        }
+      }
+      if (!response.ok && response.status !== 0) {
+        // If direct fetch fails, provide helpful error messages
+        if (response.status === 403 || response.status === 401) {
+          throw new Error(
+            "Access denied. The file may require authentication or have expired."
+          );
+        } else if (response.status === 404) {
+          throw new Error(
+            "File not found. The download link may have expired."
+          );
+        } else {
+          throw new Error(
+            `Unable to fetch data (${response.status}). You can still download the file directly.`
+          );
+        }
+      }
+      // For no-cors responses, we can't read the content
+      if (response.type === "opaque") {
+        throw new Error(
+          "Preview not available due to CORS restrictions. Please download the file to view the data."
+        );
+      }
+      const csvText = await response.text();
+      if (!csvText || csvText.trim().length === 0) {
+        throw new Error("The downloaded file appears to be empty");
+      }
+      const parsedData = parseCSV(csvText);
+      if (parsedData.length > 0) {
+        setColumns(Object.keys(parsedData[0]));
+        setData(parsedData);
+        debugLog("Data parsed successfully:", {
+          rows: parsedData.length,
+          columns: Object.keys(parsedData[0]).length,
+          sampleData: parsedData.slice(0, 2),
+        });
+      } else {
+        throw new Error("No valid data rows found in the file");
+      }
+    } catch (err) {
+      console.error("Error fetching data:", err);
+      setError(err.message);
+      debugLog("Error fetching data:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, [s3Url]);
+  useEffect(() => {
+    if (s3Url) {
+      fetchData();
+    }
+  }, [s3Url, fetchData]);
+  const parseCSV = (csvText) => {
+    try {
+      const lines = csvText.trim().split("\n");
+      if (lines.length < 2) return [];
+      // Handle different CSV formats and potential quotes
+      const parseCSVLine = (line) => {
+        const result = [];
+        let current = "";
+        let inQuotes = false;
+        for (let i = 0; i < line.length; i++) {
+          const char = line[i];
+          if (char === '"') {
+            inQuotes = !inQuotes;
+          } else if (char === "," && !inQuotes) {
+            result.push(current.trim());
+            current = "";
+          } else {
+            current += char;
+          }
+        }
+        result.push(current.trim());
+        return result.map((value) => value.replace(/^"(.*)"$/, "$1")); // Remove outer quotes
+      };
+      const headers = parseCSVLine(lines[0]);
+      const rows = [];
+      for (let i = 1; i < lines.length; i++) {
+        if (lines[i].trim() === "") continue; // Skip empty lines
+        const values = parseCSVLine(lines[i]);
+        if (values.length > 0 && values.some((val) => val.trim() !== "")) {
+          const row = {};
+          headers.forEach((header, index) => {
+            row[header] = values[index] || "";
+          });
+          rows.push(row);
+        }
+      }
+      return rows;
+    } catch (err) {
+      debugLog("Error parsing CSV:", err);
+      throw new Error(
+        "Failed to parse CSV data. The file format may be invalid."
+      );
+    }
+  };
+  const getPaginatedData = () => {
+    const startIndex = (currentPage - 1) * rowsPerPage;
+    const endIndex = startIndex + rowsPerPage;
+    return data.slice(startIndex, endIndex);
+  };
+  const totalPages = Math.ceil(data.length / rowsPerPage);
+  const handleDownload = () => {
+    if (onDownload) {
+      onDownload();
+    } else {
+      window.open(s3Url, "_blank");
+    }
+  };
+  if (loading) {
+    return (
+      <div className="data-viewer loading">
+        <div className="spinner"></div>
+        <p>Loading data preview...</p>
+      </div>
+    );
+  }
+  if (error) {
+    return (
+      <div className="data-viewer error">
+        <div className="status-message error">
+          <div className="status-message-icon">❌</div>
+          <div className="status-message-content">
+            <h4>Unable to Preview Data</h4>
+            <p>{error}</p>
+            <div
+              className="error-help"
+              style={{ marginTop: "0.75rem", fontSize: "0.875rem" }}
+            >
+              <strong>
+                Don't worry! Your data has been generated successfully.
+              </strong>
+              <br />
+              <strong>Possible solutions:</strong>
+              <ul
+                style={{
+                  marginTop: "0.5rem",
+                  paddingLeft: "1.5rem",
+                  textAlign: "left",
+                }}
+              >
+                <li>
+                  <strong>Download the file directly</strong> using the button
+                  below
+                </li>
+                <li>
+                  The preview may fail due to browser security restrictions
+                </li>
+                <li>
+                  Your generated data is still available and ready to download
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div
+          className="error-actions"
+          style={{ marginTop: "1.5rem", textAlign: "center" }}
+        >
+          <button
+            className="btn btn-primary btn-large"
+            onClick={handleDownload}
+            style={{
+              marginRight: "0.75rem",
+              padding: "12px 24px",
+              fontSize: "1rem",
+            }}
+          >
+            📥 Download Generated Data
+          </button>
+          <button
+            className="btn btn-secondary"
+            onClick={() => fetchData()}
+            style={{ marginLeft: "0.75rem" }}
+          >
+            🔄 Try Preview Again
+          </button>
+        </div>
+        <div
+          className="success-note"
+          style={{
+            marginTop: "1.5rem",
+            padding: "1rem",
+            background: "var(--success-light, #e8f5e8)",
+            borderRadius: "8px",
+            border: "1px solid var(--success, #28a745)",
+            textAlign: "center",
+          }}
+        >
+          <div
+            style={{
+              color: "var(--success, #28a745)",
+              fontWeight: "bold",
+              marginBottom: "0.5rem",
+            }}
+          >
+            ✅ Data Generation Completed Successfully!
+          </div>
+          <div style={{ fontSize: "0.875rem", color: "var(--text-secondary)" }}>
+            The preview failed, but your synthetic data has been generated and
+            is ready for download.
+          </div>
+        </div>
+        <TroubleshootingGuide
+          generatedDataLink={s3Url}
+          onDownload={handleDownload}
+        />
+      </div>
+    );
+  }
+  if (data.length === 0) {
+    return (
+      <div className="data-viewer empty">
+        <div className="status-message warning">
+          <div className="status-message-icon">⚠️</div>
+          <div className="status-message-content">
+            <h4>No Data Available</h4>
+            <p>The generated file appears to be empty.</p>
+          </div>
+        </div>
+        <div className="download-section" style={{ marginTop: "1rem" }}>
+          <button className="btn btn-primary" onClick={handleDownload}>
+            📥 Download File
+          </button>
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div className="data-viewer">
+      <div className="data-viewer-header">
+        <div className="data-info">
+          <h4>📊 Generated Data {showPreviewOnly ? "Preview" : ""}</h4>
+          <p>
+            Showing {getPaginatedData().length} of {data.length} rows •{" "}
+            {columns.length} columns
+          </p>
+        </div>
+        {!showPreviewOnly && (
+          <button
+            className="btn btn-success download-btn"
+            onClick={handleDownload}
+          >
+            📥 Download Complete File
+          </button>
+        )}
+      </div>
+      <div className="data-table-container">
+        <table className="data-table">
+          <thead>
+            <tr>
+              {columns.map((column, index) => (
+                <th key={index} title={column}>
+                  {column}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {getPaginatedData().map((row, index) => (
+              <tr key={index}>
+                {columns.map((column, colIndex) => (
+                  <td key={colIndex} title={row[column]}>
+                    {row[column]}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      {totalPages > 1 && (
+        <div className="pagination">
+          <button
+            className="btn btn-secondary"
+            onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
+            disabled={currentPage === 1}
+          >
+            ← Previous
+          </button>
+          <span className="pagination-info">
+            Page {currentPage} of {totalPages}
+          </span>
+          <button
+            className="btn btn-secondary"
+            onClick={() =>
+              setCurrentPage((prev) => Math.min(prev + 1, totalPages))
+            }
+            disabled={currentPage === totalPages}
+          >
+            Next →
+          </button>
+        </div>
+      )}
+      {showPreviewOnly && data.length > 0 && (
+        <div
+          className="preview-note"
+          style={{
+            marginTop: "1rem",
+            padding: "0.75rem",
+            background: "var(--bg-tertiary)",
+            borderRadius: "8px",
+            fontSize: "0.875rem",
+            color: "var(--text-secondary)",
+            textAlign: "center",
+          }}
+        >
+          💡 Showing first {Math.min(data.length, rowsPerPage * totalPages)}{" "}
+          rows. Download the complete file to view all {data.length} rows.
+        </div>
+      )}
+    </div>
+  );
+};
+export default DataViewer;

src/components/Step1.js ADDED Viewed

	@@ -0,0 +1,144 @@

+import React, { useState } from "react";
+import { ApiService } from "../utils/apiService";
+import { debugLog } from "../utils/config";
+const Step1 = ({
+  apiKey,
+  setApiKey,
+  isApiKeyValid,
+  setIsApiKeyValid,
+  stepNumber,
+  stepTitle,
+  stepIcon,
+  enabled = true,
+}) => {
+  const [isValidating, setIsValidating] = useState(false);
+  const [validationMessage, setValidationMessage] = useState("");
+  // Helper function to validate API key format
+  const isValidApiKeyFormat = (key) => {
+    return key.startsWith("sync_");
+  };
+  const validateApiKey = async () => {
+    if (!isValidApiKeyFormat(apiKey)) {
+      setValidationMessage(
+        'API key must start with "sync_" and be at least 37 characters long'
+      );
+      setIsApiKeyValid(false);
+      return;
+    }
+    setIsValidating(true);
+    setValidationMessage("");
+    try {
+      debugLog("Starting API key validation", {
+        apiKey: apiKey.substring(0, 8) + "...",
+        encrypted: "Key will be encrypted before transmission",
+      });
+      const result = await ApiService.retryRequest(async () => {
+        return await ApiService.validateApiKey(apiKey);
+      });
+      const isValid = result.success && result.data && result.data.isValid;
+      console.log("[Step1] Validation result details:", {
+        result,
+        isValid,
+        success: result.success,
+        hasData: !!result.data,
+        dataIsValid: result.data?.isValid,
+      });
+      setIsApiKeyValid(isValid);
+      setValidationMessage(
+        isValid
+          ? result.message || "API key validated successfully!"
+          : result.message || "Invalid API key"
+      );
+      debugLog("API key validation completed", {
+        valid: isValid,
+        response: result,
+      });
+    } catch (error) {
+      debugLog("API key validation failed", error);
+      setValidationMessage(
+        error.message || "Validation failed. Please try again."
+      );
+      setIsApiKeyValid(false);
+    } finally {
+      setIsValidating(false);
+    }
+  };
+  return (
+    <div className="step-container fade-in">
+      <div className="step-header">
+        <h2>
+          <span className="step-number">{stepNumber}</span>
+          {stepIcon} {stepTitle}
+        </h2>
+        <p>
+          Enter your Hugging Face API key to get started with synthetic data
+          generation. Your key will be securely encrypted before validation.
+        </p>
+      </div>
+      <div className="step-body">
+        <div className="form-group">
+          <label htmlFor="apiKey">API Key</label>
+          <input
+            id="apiKey"
+            type="password"
+            className="form-input"
+            placeholder="sync_xxxxxxxxxxxxxxxxxxxxxxx"
+            value={apiKey}
+            onChange={(e) => setApiKey(e.target.value)}
+            disabled={isValidating}
+          />
+          <small style={{ color: "var(--text-muted)", fontSize: "0.8rem" }}>
+            💡 Your API key should start with "sync_" and will be encrypted
+          </small>
+          {apiKey && !isValidApiKeyFormat(apiKey) && (
+            <div className="status-message error">
+              <div className="status-message-icon">⚠️</div>
+              <div className="status-message-content">
+                Invalid format. API key must start with "sync_".
+              </div>
+            </div>
+          )}
+        </div>
+        <button
+          className="btn btn-primary"
+          onClick={validateApiKey}
+          disabled={!apiKey || isValidating}
+        >
+          {isValidating ? (
+            <>
+              <div className="spinner spinner-small"></div>
+              Validating API Key...
+            </>
+          ) : (
+            <>🔍 Validate API Key</>
+          )}
+        </button>
+        {validationMessage && (
+          <div
+            className={`status-message ${isApiKeyValid ? "success" : "error"}`}
+          >
+            <div className="status-message-icon">
+              {isApiKeyValid ? "✅" : "❌"}
+            </div>
+            <div className="status-message-content">{validationMessage}</div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+export default Step1;

src/components/Step2.js ADDED Viewed

	@@ -0,0 +1,362 @@

+import React, { useState, useRef } from "react";
+import Papa from "papaparse";
+import { ApiService } from "../utils/apiService";
+import { config, debugLog } from "../utils/config";
+const Step2 = ({
+  uploadedFile,
+  setUploadedFile,
+  s3Link,
+  setS3Link,
+  fileMetadata,
+  setFileMetadata,
+  stepNumber,
+  stepTitle,
+  stepIcon,
+  enabled = true,
+  // Add API key props for validation
+  apiKey,
+  isApiKeyValid,
+}) => {
+  const [outputFormat, setOutputFormat] = useState("tabular");
+  const [isUploading, setIsUploading] = useState(false);
+  const [csvData, setCsvData] = useState(null);
+  const [dragOver, setDragOver] = useState(false);
+  const fileInputRef = useRef(null);
+  const handleFileUpload = async (file) => {
+    // Prevent action if step is disabled
+    if (!enabled) {
+      debugLog("File upload attempted but step is disabled");
+      return;
+    }
+    if (!file) {
+      alert("No file selected");
+      return;
+    }
+    if (!file.name.endsWith(".csv")) {
+      alert("Please upload a CSV file. Only CSV files are supported.");
+      return;
+    }
+    // Check file size against configured limit
+    const maxSizeBytes = config.maxFileSizeMB * 1024 * 1024;
+    if (file.size > maxSizeBytes) {
+      alert(
+        `File size (${(file.size / 1024 / 1024).toFixed(
+          2
+        )}MB) exceeds maximum allowed size of ${config.maxFileSizeMB}MB`
+      );
+      return;
+    }
+    // Check if file is empty
+    if (file.size === 0) {
+      alert(
+        "The selected file is empty. Please choose a valid CSV file with data."
+      );
+      return;
+    }
+    setUploadedFile(file);
+    debugLog("File selected for upload", {
+      name: file.name,
+      size: file.size,
+      type: file.type,
+    });
+    // Initialize file metadata with file size
+    setFileMetadata({
+      fileSizeBytes: file.size,
+      sourceFileRows: 0, // Will be updated after CSV parsing
+    });
+    // Parse CSV for preview
+    Papa.parse(file, {
+      complete: (results) => {
+        if (results.errors && results.errors.length > 0) {
+          debugLog("CSV parsing warnings", results.errors);
+        }
+        if (!results.data || results.data.length === 0) {
+          alert(
+            "The CSV file appears to be empty or invalid. Please check your file and try again."
+          );
+          setUploadedFile(null);
+          setFileMetadata({ fileSizeBytes: 0, sourceFileRows: 0 });
+          return;
+        }
+        setCsvData(results.data);
+        // Update file metadata with row count
+        setFileMetadata({
+          fileSizeBytes: file.size,
+          sourceFileRows: results.data.length,
+        });
+        debugLog("CSV parsed for preview", {
+          rows: results.data.length,
+          columns: results.data[0] ? Object.keys(results.data[0]).length : 0,
+        });
+      },
+      header: true,
+      skipEmptyLines: true,
+      error: (error) => {
+        debugLog("CSV parsing error", error);
+        alert("Error parsing CSV file. Please ensure it's a valid CSV format.");
+        setUploadedFile(null);
+      },
+    });
+    // Upload to S3 using ApiService
+    setIsUploading(true);
+    try {
+      debugLog("Starting file upload to S3");
+      // Use the ApiService with retry logic
+      const result = await ApiService.retryRequest(async () => {
+        return await ApiService.uploadFileToS3(file);
+      });
+      // Handle different response structures
+      const s3Url =
+        result.s3_link || result.link || result.publicUrl || result.url;
+      setS3Link(s3Url);
+      debugLog("File uploaded successfully", {
+        s3Link: s3Url,
+        result: result,
+      });
+    } catch (error) {
+      debugLog("File upload failed", error);
+      console.error("File upload error details:", {
+        error: error,
+        message: error.message,
+        stack: error.stack,
+      });
+      // More specific error messages
+      let errorMessage = "Failed to upload file. Please try again.";
+      if (error.message.includes("credentials")) {
+        errorMessage =
+          "AWS credentials are not configured properly. Please check your .env.local file and restart the application.";
+      } else if (error.message.includes("bucket")) {
+        errorMessage =
+          "Storage bucket configuration issue. Please check your S3 bucket name in .env.local file.";
+      } else if (error.message.includes("size")) {
+        errorMessage = `File size exceeds the maximum limit of ${config.maxFileSizeMB}MB.`;
+      } else if (
+        error.message.includes("network") ||
+        error.message.includes("fetch") ||
+        error.message.includes("CORS")
+      ) {
+        errorMessage =
+          "Network/CORS error. This might be due to S3 bucket CORS configuration or network connectivity issues.";
+      } else if (error.message.includes("AccessDenied")) {
+        errorMessage =
+          "Access denied to S3 bucket. Please check your AWS permissions.";
+      }
+      alert(errorMessage);
+      setUploadedFile(null);
+      setCsvData(null);
+    } finally {
+      setIsUploading(false);
+    }
+  };
+  const handleDrop = (e) => {
+    // Prevent action if step is disabled
+    if (!enabled) return;
+    e.preventDefault();
+    setDragOver(false);
+    const files = e.dataTransfer.files;
+    if (files.length > 0) {
+      handleFileUpload(files[0]);
+    }
+  };
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    setDragOver(true);
+  };
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    setDragOver(false);
+  };
+  const renderDataPreview = () => {
+    if (!csvData || csvData.length === 0) return null;
+    // Show more rows for better preview (up to 20 rows)
+    const previewData = csvData.slice(0, 20);
+    const columns = Object.keys(previewData[0]);
+    return (
+      <div className="data-preview">
+        <h4>
+          📊 Data Preview ({csvData.length} rows total, showing first{" "}
+          {previewData.length})
+        </h4>
+        <div className="data-table-container">
+          <table className="data-table-scrollable">
+            <thead>
+              <tr>
+                {columns.map((col, index) => (
+                  <th key={index}>{col}</th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {previewData.map((row, index) => (
+                <tr key={index}>
+                  {columns.map((col, colIndex) => (
+                    <td key={colIndex} title={row[col]}>
+                      {row[col]}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+        {csvData.length > 20 && (
+          <p className="preview-note">
+            Showing first 20 rows of {csvData.length} total rows
+          </p>
+        )}
+      </div>
+    );
+  };
+  return (
+    <div className="step-container fade-in">
+      <div className="step-header">
+        <h2>
+          <span className="step-number">{stepNumber}</span>
+          {stepIcon} {stepTitle}
+        </h2>
+        <p>
+          Choose your output format and upload a CSV file for analysis and
+          synthetic data generation.
+        </p>
+      </div>
+      <div className="step-body">
+        {!enabled && (
+          <div
+            className="status-message warning"
+            style={{ marginBottom: "1.5rem" }}
+          >
+            <div className="status-message-icon">⚠️</div>
+            <div className="status-message-content">
+              <h4>API Key Required</h4>
+              <p>
+                Please complete Step 1 (API Key Validation) before uploading
+                files.
+              </p>
+            </div>
+          </div>
+        )}
+        <div className="form-group output-format-section">
+          <label>Output Format</label>
+          <div className="output-options">
+            <div
+              className={`output-option ${
+                outputFormat === "tabular" ? "selected" : ""
+              }`}
+              onClick={() => setOutputFormat("tabular")}
+            >
+              <h4>📊 Tabular</h4>
+              <p>CSV format with structured rows and columns</p>
+            </div>
+            <div className="output-option disabled" title="Coming Soon">
+              <h4>📄 JSONL (Coming Soon)</h4>
+              <p>JSON Lines format for advanced use cases</p>
+            </div>
+          </div>
+        </div>
+        <div className="form-group file-upload-section">
+          <label>📤 Upload Source File</label>
+          {uploadedFile && s3Link ? (
+            <div className="file-uploaded">
+              <div className="file-info">
+                <div className="file-icon">📊</div>
+                <div className="file-details">
+                  <h4>{uploadedFile.name}</h4>
+                  <p>Successfully uploaded and ready for processing</p>
+                  <p
+                    style={{
+                      fontSize: "0.75rem",
+                      opacity: 0.8,
+                      marginTop: "0.25rem",
+                    }}
+                  >
+                    Size: {(uploadedFile.size / 1024 / 1024).toFixed(2)} MB
+                  </p>
+                </div>
+                <button
+                  className="btn btn-secondary"
+                  onClick={() => {
+                    setUploadedFile(null);
+                    setS3Link("");
+                    setCsvData(null);
+                    setFileMetadata({ fileSizeBytes: 0, sourceFileRows: 0 });
+                  }}
+                  style={{ marginLeft: "auto" }}
+                >
+                  🔄 Change File
+                </button>
+              </div>
+            </div>
+          ) : (
+            <div
+              className={`file-upload-area ${dragOver ? "drag-over" : ""}`}
+              onDrop={handleDrop}
+              onDragOver={handleDragOver}
+              onDragLeave={handleDragLeave}
+              onClick={() => fileInputRef.current?.click()}
+            >
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept=".csv"
+                onChange={(e) => handleFileUpload(e.target.files[0])}
+              />
+              {isUploading ? (
+                <div>
+                  <div className="spinner"></div>
+                  <div className="file-upload-text">Uploading your file...</div>
+                  <div className="file-upload-subtext">
+                    Please wait while we process your data
+                  </div>
+                </div>
+              ) : (
+                <div>
+                  <div className="file-upload-icon">📊</div>
+                  <div className="file-upload-text">
+                    Drop your CSV file here
+                  </div>
+                  <div className="file-upload-subtext">
+                    or click to browse • Max {config.maxFileSizeMB}MB • CSV
+                    files only
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+        {renderDataPreview()}
+      </div>
+    </div>
+  );
+};
+export default Step2;

src/components/Step3.js ADDED Viewed

	@@ -0,0 +1,223 @@

+import React, { useState, useEffect } from "react";
+import Papa from "papaparse";
+import { config as envConfig, debugLog } from "../utils/config";
+const Step3 = ({
+  uploadedFile,
+  fileMetadata,
+  config,
+  setConfig,
+  stepNumber,
+  stepTitle,
+  stepIcon,
+  enabled = true,
+  // Add validation props
+  apiKey,
+  isApiKeyValid,
+  s3Link,
+}) => {
+  const [columns, setColumns] = useState([]);
+  useEffect(() => {
+    if (uploadedFile) {
+      debugLog("Parsing uploaded file for columns", {
+        fileName: uploadedFile.name,
+      });
+      // Parse the uploaded file to get column names
+      Papa.parse(uploadedFile, {
+        complete: (results) => {
+          if (results.data.length > 0) {
+            const headers = Object.keys(results.data[0]);
+            setColumns(headers);
+            debugLog("Columns extracted from file", { columns: headers });
+            // Set first column as default target if not already set
+            if (!config.targetColumn && headers.length > 0) {
+              setConfig((prev) => ({
+                ...prev,
+                targetColumn: headers[0],
+                fileSizeBytes: fileMetadata?.fileSizeBytes || 0,
+                sourceFileRows: fileMetadata?.sourceFileRows || 0,
+              }));
+            }
+            // Set default number of rows from environment config if not already set
+            if (!config.numRows || config.numRows === 100) {
+              setConfig((prev) => ({
+                ...prev,
+                numRows: envConfig.defaultNumRecords,
+                fileSizeBytes: fileMetadata?.fileSizeBytes || 0,
+                sourceFileRows: fileMetadata?.sourceFileRows || 0,
+              }));
+              debugLog("Set default number of rows", {
+                numRows: envConfig.defaultNumRecords,
+              });
+            }
+          }
+        },
+        header: true,
+        skipEmptyLines: true,
+      });
+    }
+  }, [
+    uploadedFile,
+    config.targetColumn,
+    config.numRows,
+    setConfig,
+    fileMetadata?.fileSizeBytes,
+    fileMetadata?.sourceFileRows,
+  ]);
+  const handleNumRowsChange = (e) => {
+    // Prevent action if step is disabled
+    if (!enabled) return;
+    const numRows = parseInt(e.target.value, 10);
+    debugLog("Number of rows changed", { numRows });
+    setConfig((prev) => ({
+      ...prev,
+      numRows: numRows,
+      fileSizeBytes: fileMetadata?.fileSizeBytes || 0,
+      sourceFileRows: fileMetadata?.sourceFileRows || 0,
+    }));
+  };
+  const handleTargetColumnChange = (e) => {
+    // Prevent action if step is disabled
+    if (!enabled) return;
+    const targetColumn = e.target.value;
+    debugLog("Target column changed", { targetColumn });
+    setConfig((prev) => ({
+      ...prev,
+      targetColumn: targetColumn,
+      fileSizeBytes: fileMetadata?.fileSizeBytes || 0,
+      sourceFileRows: fileMetadata?.sourceFileRows || 0,
+    }));
+  };
+  return (
+    <div className="step-container fade-in">
+      <div className="step-header">
+        <h2>
+          <span className="step-number">{stepNumber}</span>
+          {stepIcon} {stepTitle}
+        </h2>
+        <p>
+          Configure the parameters for your synthetic data generation process
+        </p>
+      </div>
+      <div className="step-body">
+        {!enabled && (
+          <div
+            className="status-message warning"
+            style={{ marginBottom: "1.5rem" }}
+          >
+            <div className="status-message-icon">⚠️</div>
+            <div className="status-message-content">
+              <h4>Prerequisites Required</h4>
+              <p>
+                Please complete the previous steps before configuring data
+                generation settings.
+              </p>
+              <div style={{ marginTop: "0.5rem", fontSize: "0.875rem" }}>
+                <div>• {isApiKeyValid ? "✅" : "❌"} API Key Validation</div>
+                <div>• {uploadedFile && s3Link ? "✅" : "❌"} File Upload</div>
+              </div>
+            </div>
+          </div>
+        )}
+        <div className="config-section">
+          <h3>
+            <span className="config-icon">📊</span>
+            Data Generation Settings
+          </h3>
+          <div className="form-group">
+            <label htmlFor="numRows">Number of Rows to Generate</label>
+            <div className="slider-container">
+              <input
+                id="numRows"
+                type="range"
+                min="10"
+                max="1000"
+                step="10"
+                value={config.numRows}
+                onChange={handleNumRowsChange}
+                className="slider"
+                disabled={false}
+              />
+              <div className="slider-value">{config.numRows} rows</div>
+            </div>
+          </div>
+          <div className="form-group">
+            <label htmlFor="targetColumn">Target Column</label>
+            <select
+              id="targetColumn"
+              className="form-input"
+              value={config.targetColumn}
+              onChange={handleTargetColumnChange}
+              disabled={columns.length === 0}
+            >
+              <option value="">Select a target column...</option>
+              {columns.map((column, index) => (
+                <option key={index} value={column}>
+                  {column}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+        {columns.length > 0 && (
+          <div className="config-section">
+            <h3>
+              <span className="config-icon">📋</span>
+              Available Columns ({columns.length})
+            </h3>
+            <div
+              style={{
+                display: "flex",
+                flexWrap: "wrap",
+                gap: "0.5rem",
+                marginTop: "1rem",
+              }}
+            >
+              {columns.map((column, index) => (
+                <span
+                  key={index}
+                  style={{
+                    background:
+                      config.targetColumn === column
+                        ? "var(--primary-color)"
+                        : "var(--bg-tertiary)",
+                    color:
+                      config.targetColumn === column
+                        ? "white"
+                        : "var(--text-secondary)",
+                    padding: "0.5rem 0.75rem",
+                    borderRadius: "6px",
+                    fontSize: "0.8rem",
+                    fontWeight: "500",
+                    border:
+                      config.targetColumn === column
+                        ? "none"
+                        : "1px solid var(--border-color)",
+                  }}
+                >
+                  {column}
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+export default Step3;

src/components/Step4.js ADDED Viewed

	@@ -0,0 +1,509 @@

+import React, { useState } from "react";
+import { ApiService } from "../utils/apiService";
+import { debugLog } from "../utils/config";
+import DataViewer from "./DataViewer";
+const Step4 = ({
+  apiKey,
+  s3Link,
+  config: generationConfig,
+  fileMetadata,
+  generatedDataLink,
+  setGeneratedDataLink,
+  stepNumber,
+  stepTitle,
+  stepIcon,
+  enabled = true,
+}) => {
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [generationStatus, setGenerationStatus] = useState("");
+  const [generationProgress, setGenerationProgress] = useState(0);
+  const [hasError, setHasError] = useState(false);
+  const [errorMessage, setErrorMessage] = useState("");
+  const generateSyntheticData = async () => {
+    // Prevent action if step is disabled
+    if (!enabled) {
+      debugLog("Generation attempted but step is disabled");
+      return;
+    }
+    setIsGenerating(true);
+    setGenerationStatus("Initializing generation...");
+    setGenerationProgress(0);
+    setHasError(false);
+    setErrorMessage("");
+    try {
+      debugLog("Starting synthetic data generation", {
+        s3Link,
+        config: generationConfig,
+        fileMetadata,
+        apiKeyPrefix: apiKey.substring(0, 8) + "...",
+      });
+      // Use the ApiService with retry logic
+      const result = await ApiService.retryRequest(async () => {
+        // Update progress during API call
+        setGenerationStatus("Sending request to AI model...");
+        setGenerationProgress(10);
+        return await ApiService.generateSyntheticData(apiKey, s3Link, {
+          ...generationConfig,
+          fileSizeBytes: fileMetadata?.fileSizeBytes || 0,
+          sourceFileRows: fileMetadata?.sourceFileRows || 0,
+        });
+      });
+      // If the API returns progress updates, handle them
+      if (result.jobId) {
+        // For now, simulate progress since polling is not implemented
+        await simulateProgress();
+        // In a real implementation, you would poll for job status here
+        setGeneratedDataLink(
+          result.data?.fileUrl ||
+            result.fileUrl ||
+            result.download_link ||
+            result.link ||
+            result.s3_url
+        );
+      } else {
+        // Simulate progress for immediate results
+        await simulateProgress();
+        // Handle the specific response format: { "status": "success", "data": { "fileUrl": "..." } }
+        const dataLink =
+          result.data?.fileUrl ||
+          result.fileUrl ||
+          result.s3_url ||
+          result.download_link ||
+          result.link;
+        if (!dataLink) {
+          throw new Error(
+            "No download link received from the API. The generation may have failed on the server side."
+          );
+        }
+        setGeneratedDataLink(dataLink);
+      }
+      setGenerationStatus("Generation completed successfully!");
+      setGenerationProgress(100);
+      debugLog("Synthetic data generation completed", {
+        downloadLink:
+          result.data?.fileUrl ||
+          result.fileUrl ||
+          result.s3_url ||
+          result.download_link ||
+          result.link,
+        status: result.status,
+        message: result.message,
+        fullResult: result,
+      });
+    } catch (error) {
+      debugLog("Synthetic data generation failed", error);
+      setHasError(true);
+      setGenerationProgress(0);
+      // Create a user-friendly error message
+      let friendlyErrorMessage = "An error occurred during generation.";
+      if (error.message.includes("403") || error.message.includes("401")) {
+        friendlyErrorMessage =
+          "Authentication failed. Please check your API key and try again.";
+      } else if (error.message.includes("404")) {
+        friendlyErrorMessage =
+          "Generation service not found. Please try again later.";
+      } else if (error.message.includes("500")) {
+        friendlyErrorMessage =
+          "Server error occurred. The service may be temporarily unavailable.";
+      } else if (
+        error.message.includes("timeout") ||
+        error.message.includes("TimeoutError")
+      ) {
+        friendlyErrorMessage =
+          "Request timed out. The generation process may take longer than expected. Please try again.";
+      } else if (
+        error.message.includes("Network") ||
+        error.message.includes("fetch")
+      ) {
+        friendlyErrorMessage =
+          "Network error. Please check your internet connection and try again.";
+      } else if (error.message.includes("No download link")) {
+        friendlyErrorMessage =
+          "Generation completed but no download link was provided. Please try generating again.";
+      } else if (error.message) {
+        friendlyErrorMessage = error.message;
+      }
+      setErrorMessage(friendlyErrorMessage);
+      setGenerationStatus(`❌ Generation failed: ${friendlyErrorMessage}`);
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+  const simulateProgress = async () => {
+    const steps = [
+      { progress: 25, message: "Analyzing data structure..." },
+      { progress: 50, message: "Training AI model..." },
+      { progress: 75, message: "Generating synthetic data..." },
+      { progress: 90, message: "Finalizing output..." },
+    ];
+    for (const step of steps) {
+      setGenerationProgress(step.progress);
+      setGenerationStatus(step.message);
+      await new Promise((resolve) => setTimeout(resolve, 1500));
+    }
+  };
+  const handleDownload = () => {
+    if (generatedDataLink) {
+      debugLog("Downloading generated data", { link: generatedDataLink });
+      // Open in new tab so user can see if download works
+      const newWindow = window.open(generatedDataLink, "_blank");
+      // If popup blocked, provide fallback
+      if (!newWindow) {
+        // Fallback: create a temporary download link
+        const link = document.createElement("a");
+        link.href = generatedDataLink;
+        link.download = `synthetic_data_${Date.now()}.csv`;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+      }
+    }
+  };
+  const handleCopyLink = async () => {
+    if (generatedDataLink) {
+      try {
+        await navigator.clipboard.writeText(generatedDataLink);
+        // You could add a toast notification here
+        debugLog("Link copied to clipboard");
+      } catch (error) {
+        debugLog("Failed to copy link:", error);
+        // Fallback for older browsers
+        const textArea = document.createElement("textarea");
+        textArea.value = generatedDataLink;
+        document.body.appendChild(textArea);
+        textArea.select();
+        document.execCommand("copy");
+        document.body.removeChild(textArea);
+      }
+    }
+  };
+  const isReadyForGeneration =
+    apiKey &&
+    s3Link &&
+    generationConfig.targetColumn &&
+    generationConfig.numRows;
+  return (
+    <div className="step-container fade-in">
+      <div className="step-header">
+        <h2>
+          <span className="step-number">{stepNumber}</span>
+          {stepIcon} {stepTitle}
+        </h2>
+        <p>Generate high-quality synthetic data based on your configuration</p>
+      </div>
+      <div className="step-body">
+        {!generatedDataLink && !isGenerating && !hasError && (
+          <div className="generate-section">
+            {!enabled && (
+              <div
+                className="status-message warning"
+                style={{ marginBottom: "1.5rem" }}
+              >
+                <div className="status-message-icon">⚠️</div>
+                <div className="status-message-content">
+                  <h4>Prerequisites Required</h4>
+                  <p>
+                    Please complete all previous steps before generating
+                    synthetic data.
+                  </p>
+                  <div style={{ marginTop: "0.5rem", fontSize: "0.875rem" }}>
+                    <div>• {apiKey ? "✅" : "❌"} API Key Validation</div>
+                    <div>• {s3Link ? "✅" : "❌"} File Upload</div>
+                    <div>
+                      • {generationConfig.targetColumn ? "✅" : "❌"}{" "}
+                      Configuration
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+            <div
+              className={`status-message ${
+                isReadyForGeneration ? "info" : "warning"
+              }`}
+            >
+              <div className="status-message-icon">
+                {isReadyForGeneration ? "✅" : "⚠️"}
+              </div>
+              <div className="status-message-content">
+                <h4>
+                  {isReadyForGeneration
+                    ? "Ready for Generation"
+                    : "Configuration Required"}
+                </h4>
+                {!isReadyForGeneration && (
+                  <p
+                    style={{
+                      marginTop: "0.5rem",
+                      fontSize: "0.875rem",
+                      opacity: 0.9,
+                    }}
+                  >
+                    Please complete all previous steps before generating data.
+                  </p>
+                )}
+                <div className="status-summary">
+                  <div className="status-row">
+                    <span className="status-label">🔑 API Key:</span>
+                    <span
+                      className={`status-badge ${
+                        apiKey ? "success" : "warning"
+                      }`}
+                    >
+                      {apiKey ? "✓ Valid" : "⚠ Required"}
+                    </span>
+                  </div>
+                  <div className="status-row">
+                    <span className="status-label">📊 Data:</span>
+                    <span
+                      className={`status-badge ${
+                        s3Link ? "success" : "warning"
+                      }`}
+                    >
+                      {s3Link ? "✓ Uploaded" : "⚠ Required"}
+                    </span>
+                  </div>
+                  <div className="status-row">
+                    <span className="status-label">🎯 Target:</span>
+                    <span
+                      className={`status-badge ${
+                        generationConfig.targetColumn ? "success" : "warning"
+                      }`}
+                    >
+                      {generationConfig.targetColumn
+                        ? `✓ ${generationConfig.targetColumn}`
+                        : "⚠ Not set"}
+                    </span>
+                  </div>
+                  <div className="status-row">
+                    <span className="status-label">📥 Source:</span>
+                    <span className="status-badge info">
+                      {fileMetadata?.sourceFileRows || 0} rows
+                    </span>
+                  </div>
+                  <div className="status-row">
+                    <span className="status-label">📤 Generate:</span>
+                    <span className="status-badge info">
+                      {generationConfig.numRows} rows
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <button
+              className="btn btn-primary generate-btn"
+              onClick={generateSyntheticData}
+              disabled={!isReadyForGeneration || !enabled}
+              style={{ marginTop: "1.5rem" }}
+            >
+              🎯 Generate Synthetic Data
+            </button>
+          </div>
+        )}
+        {isGenerating && (
+          <div className="generation-progress">
+            <div className="spinner"></div>
+            <div className="file-upload-text" style={{ marginTop: "1rem" }}>
+              {generationStatus}
+            </div>
+            <div className="progress-bar">
+              <div
+                className="progress-fill"
+                style={{ width: `${generationProgress}%` }}
+              ></div>
+            </div>
+            <div
+              className="file-upload-subtext"
+              style={{ marginTop: "0.75rem" }}
+            >
+              {generationProgress}% Complete • This may take a few minutes
+            </div>
+          </div>
+        )}
+        {hasError && !isGenerating && (
+          <div className="error-section">
+            <div className="status-message error">
+              <div className="status-message-icon">❌</div>
+              <div className="status-message-content">
+                <h4>Generation Failed</h4>
+                <p>There was an error generating your synthetic data.</p>
+                <div className="error-details">
+                  <strong>Error:</strong> {errorMessage}
+                </div>
+                <div
+                  className="error-help"
+                  style={{ marginTop: "0.75rem", fontSize: "0.875rem" }}
+                >
+                  <strong>What you can try:</strong>
+                  <ul
+                    style={{
+                      marginTop: "0.5rem",
+                      paddingLeft: "1.5rem",
+                      textAlign: "left",
+                    }}
+                  >
+                    <li>Check your internet connection and try again</li>
+                    <li>
+                      Verify your API key is valid and has sufficient credits
+                    </li>
+                    <li>Try reducing the number of rows to generate</li>
+                    <li>Contact support if the problem persists</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+            <div style={{ marginTop: "1.5rem", textAlign: "center" }}>
+              <button
+                className="btn btn-primary"
+                onClick={() => {
+                  setHasError(false);
+                  setErrorMessage("");
+                  setGenerationStatus("");
+                  setGenerationProgress(0);
+                }}
+                style={{ marginRight: "1rem" }}
+              >
+                🔄 Try Again
+              </button>
+              <button
+                className="btn btn-secondary"
+                onClick={() => {
+                  // Reset to initial state
+                  setHasError(false);
+                  setErrorMessage("");
+                  setGenerationStatus("");
+                  setGenerationProgress(0);
+                  setGeneratedDataLink("");
+                }}
+              >
+                🔙 Start Over
+              </button>
+            </div>
+          </div>
+        )}
+        {generatedDataLink && !isGenerating && (
+          <div className="results-section">
+            <div className="status-message success">
+              <div className="status-message-icon">🎉</div>
+              <div className="status-message-content">
+                <h4>Generation Complete!</h4>
+                <p>Your synthetic data has been generated successfully.</p>
+                <div
+                  className="success-details"
+                  style={{ marginTop: "0.5rem" }}
+                >
+                  <div className="success-stat">
+                    <span className="success-label">📊 Target Column:</span>
+                    <span className="success-value">
+                      {generationConfig.targetColumn}
+                    </span>
+                  </div>
+                  <div className="success-stat">
+                    <span className="success-label">📈 Rows Generated:</span>
+                    <span className="success-value">
+                      {generationConfig.numRows}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              className="download-actions"
+              style={{ marginTop: "1.5rem", textAlign: "center" }}
+            >
+              <button
+                className="btn btn-success download-btn-primary"
+                onClick={handleDownload}
+                style={{ marginRight: "1rem" }}
+              >
+                📥 Download Generated Data
+              </button>
+              <button className="btn btn-outline" onClick={handleCopyLink}>
+                📋 Copy Link
+              </button>
+            </div>
+            <div className="data-preview-section" style={{ marginTop: "2rem" }}>
+              <h4
+                style={{ marginBottom: "1rem", color: "var(--text-primary)" }}
+              >
+                📊 Data Preview
+              </h4>
+              <DataViewer
+                s3Url={generatedDataLink}
+                onDownload={handleDownload}
+                showPreviewOnly={true}
+              />
+              <div
+                className="preview-info"
+                style={{
+                  marginTop: "1rem",
+                  padding: "0.75rem",
+                  background: "var(--bg-tertiary)",
+                  borderRadius: "8px",
+                  fontSize: "0.875rem",
+                  color: "var(--text-secondary)",
+                  textAlign: "center",
+                }}
+              >
+                💡 If the preview doesn't load, don't worry! Your data has been
+                generated successfully. Click the download button above to get
+                your file.
+              </div>
+            </div>
+            <div
+              className="generate-new-section"
+              style={{ marginTop: "2rem", textAlign: "center" }}
+            >
+              <button
+                className="btn btn-secondary"
+                onClick={() => {
+                  setGeneratedDataLink("");
+                  setGenerationProgress(0);
+                  setGenerationStatus("");
+                  setHasError(false);
+                  setErrorMessage("");
+                }}
+              >
+                🔄 Generate New Data
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+export default Step4;

src/components/TroubleshootingGuide.js ADDED Viewed

	@@ -0,0 +1,113 @@

+import React, { useState } from "react";
+const TroubleshootingGuide = ({ generatedDataLink, onDownload }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  return (
+    <div className="troubleshooting-guide" style={{ marginTop: "1rem" }}>
+      <button
+        className="btn btn-outline btn-small"
+        onClick={() => setIsExpanded(!isExpanded)}
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: "0.5rem",
+          fontSize: "0.875rem",
+          padding: "0.5rem 1rem",
+        }}
+      >
+        {isExpanded ? "🔽" : "🔍"} Troubleshooting Guide
+      </button>
+      {isExpanded && (
+        <div
+          className="troubleshooting-content"
+          style={{
+            marginTop: "1rem",
+            padding: "1rem",
+            background: "var(--bg-tertiary)",
+            borderRadius: "8px",
+            border: "1px solid var(--border-color)",
+            fontSize: "0.875rem",
+            lineHeight: "1.6",
+          }}
+        >
+          <h5 style={{ marginBottom: "1rem", color: "var(--text-primary)" }}>
+            🛠️ Common Issues and Solutions
+          </h5>
+          <div
+            className="troubleshooting-section"
+            style={{ marginBottom: "1rem" }}
+          >
+            <strong>📱 Preview not working?</strong>
+            <ul style={{ marginTop: "0.5rem", paddingLeft: "1.5rem" }}>
+              <li>
+                This is normal! Browser security prevents previewing some files
+              </li>
+              <li>Your data has been generated successfully</li>
+              <li>Click the download button to get your file</li>
+            </ul>
+          </div>
+          <div
+            className="troubleshooting-section"
+            style={{ marginBottom: "1rem" }}
+          >
+            <strong>💾 Download not working?</strong>
+            <ul style={{ marginTop: "0.5rem", paddingLeft: "1.5rem" }}>
+              <li>Check if your browser blocked popups</li>
+              <li>
+                Try right-clicking the download button and select "Open in new
+                tab"
+              </li>
+              <li>Copy the link and paste it in a new browser tab</li>
+            </ul>
+          </div>
+          <div
+            className="troubleshooting-section"
+            style={{ marginBottom: "1rem" }}
+          >
+            <strong>🔗 Direct download link:</strong>
+            <div
+              style={{
+                marginTop: "0.5rem",
+                padding: "0.5rem",
+                background: "var(--bg-secondary)",
+                borderRadius: "4px",
+                fontFamily: "monospace",
+                fontSize: "0.75rem",
+                wordBreak: "break-all",
+                border: "1px solid var(--border-color)",
+              }}
+            >
+              {generatedDataLink}
+            </div>
+            <div style={{ marginTop: "0.5rem", textAlign: "center" }}>
+              <button
+                className="btn btn-small"
+                onClick={() => navigator.clipboard.writeText(generatedDataLink)}
+                style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}
+              >
+                📋 Copy Link
+              </button>
+            </div>
+          </div>
+          <div className="troubleshooting-section">
+            <strong>❓ Still having issues?</strong>
+            <ul style={{ marginTop: "0.5rem", paddingLeft: "1.5rem" }}>
+              <li>Try using a different browser (Chrome, Firefox, Safari)</li>
+              <li>Disable browser extensions temporarily</li>
+              <li>Check if your antivirus is blocking downloads</li>
+              <li>Contact support if problems persist</li>
+            </ul>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+export default TroubleshootingGuide;

src/index.css CHANGED Viewed

@@ -1,13 +1,13 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }

 body {
   margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }

src/index.js CHANGED Viewed

@@ -1,17 +1,11 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
 );
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
 );

src/logo.svg DELETED Viewed

src/reportWebVitals.js DELETED Viewed

@@ -1,13 +0,0 @@
-const reportWebVitals = onPerfEntry => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-export default reportWebVitals;

src/setupTests.js DELETED Viewed

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';

src/utils/apiService.js ADDED Viewed

	@@ -0,0 +1,739 @@

+import {
+  S3Client,
+  PutObjectCommand,
+  HeadBucketCommand,
+} from "@aws-sdk/client-s3";
+import {
+  config,
+  getValidationUrl,
+  getGenerationUrl,
+  debugLog,
+  encryptApiKey,
+} from "./config";
+// Initialize S3 client
+const getS3Client = () => {
+  debugLog("Getting S3 client with config:", {
+    region: config.awsRegion,
+    bucket: config.s3BucketName,
+    hasAccessKey: !!config.awsAccessKeyId,
+    hasSecretKey: !!config.awsSecretAccessKey,
+  });
+  if (!config.awsAccessKeyId || !config.awsSecretAccessKey) {
+    const error = new Error(
+      "AWS credentials not configured. Please set REACT_APP_AWS_ACCESS_KEY_ID and REACT_APP_AWS_SECRET_ACCESS_KEY"
+    );
+    console.error("[AWS Error] Missing credentials:", error);
+    throw error;
+  }
+  try {
+    const client = new S3Client({
+      region: config.awsRegion,
+      credentials: {
+        accessKeyId: config.awsAccessKeyId,
+        secretAccessKey: config.awsSecretAccessKey,
+      },
+    });
+    debugLog("S3 client created successfully");
+    return client;
+  } catch (error) {
+    console.error("[AWS Error] Error creating S3 client:", error);
+    debugLog("Error creating S3 client:", error);
+    throw error;
+  }
+};
+// API utility functions
+export class ApiService {
+  // Check AWS S3 connection status
+  static async checkAwsConnection() {
+    debugLog("Checking AWS S3 connection status");
+    debugLog("AWS Configuration:", {
+      region: config.awsRegion,
+      bucket: config.s3BucketName,
+      hasAccessKey: !!config.awsAccessKeyId,
+      hasSecretKey: !!config.awsSecretAccessKey,
+    });
+    try {
+      // Check if AWS credentials are configured
+      if (!config.awsAccessKeyId || !config.awsSecretAccessKey) {
+        // In development mode, allow bypassing AWS connection requirement
+        if (process.env.NODE_ENV === "development") {
+          debugLog(
+            "Development mode: AWS credentials not configured, but allowing bypass"
+          );
+          return {
+            connected: true, // Allow development without AWS
+            status: "warning",
+            message: "Development mode: AWS configuration bypassed",
+            details: "AWS credentials not configured - using development mode",
+            development: true,
+            debug: {
+              hasAccessKey: !!config.awsAccessKeyId,
+              hasSecretKey: !!config.awsSecretAccessKey,
+              region: config.awsRegion,
+              bucket: config.s3BucketName,
+            },
+          };
+        }
+        return {
+          connected: false,
+          status: "error",
+          message: "AWS credentials not configured",
+          details: "Missing AWS Access Key ID or Secret Access Key",
+          debug: {
+            hasAccessKey: !!config.awsAccessKeyId,
+            hasSecretKey: !!config.awsSecretAccessKey,
+            region: config.awsRegion,
+            bucket: config.s3BucketName,
+          },
+        };
+      }
+      // Validate AWS Access Key format
+      if (!config.awsAccessKeyId.startsWith("AKIA")) {
+        console.warn(
+          "[AWS Connection] Access Key does not start with AKIA - this might be invalid"
+        );
+      }
+      // Validate Secret Key length (should be 40 characters)
+      if (config.awsSecretAccessKey.length !== 40) {
+        console.warn(
+          "[AWS Connection] Secret Key length is not 40 characters - this might be invalid"
+        );
+      }
+      if (!config.s3BucketName) {
+        return {
+          connected: false,
+          status: "error",
+          message: "S3 bucket not configured",
+          details: "Missing S3 bucket name configuration",
+          debug: {
+            bucket: config.s3BucketName,
+            region: config.awsRegion,
+          },
+        };
+      }
+      debugLog("Initializing S3 client with credentials...");
+      // Initialize S3 client and test connection
+      const s3Client = getS3Client();
+      debugLog("Testing S3 connection with HeadBucket operation...");
+      // Use HeadBucket operation to test connectivity and permissions
+      const headBucketCommand = new HeadBucketCommand({
+        Bucket: config.s3BucketName,
+      });
+      const startTime = Date.now();
+      try {
+        await s3Client.send(headBucketCommand);
+        const endTime = Date.now();
+        debugLog("AWS S3 connection successful", {
+          bucket: config.s3BucketName,
+          region: config.awsRegion,
+          responseTime: `${endTime - startTime}ms`,
+        });
+      } catch (headBucketError) {
+        // If HeadBucket fails due to CORS, it might still work for file uploads
+        // Let's check if it's a CORS error specifically
+        if (
+          headBucketError.message &&
+          headBucketError.message.includes("CORS")
+        ) {
+          debugLog(
+            "CORS error detected - this is common for browser S3 access"
+          );
+          return {
+            connected: true, // We'll mark as connected but with a warning
+            status: "warning",
+            message: "AWS S3 accessible with CORS limitations",
+            details:
+              "HeadBucket operation blocked by CORS, but file uploads should work",
+            bucket: config.s3BucketName,
+            region: config.awsRegion,
+            corsWarning: true,
+          };
+        }
+        // Re-throw if it's not a CORS issue
+        throw headBucketError;
+      }
+      return {
+        connected: true,
+        status: "success",
+        message: "AWS S3 connected successfully",
+        details: `Connected to bucket: ${config.s3BucketName} in ${config.awsRegion}`,
+        bucket: config.s3BucketName,
+        region: config.awsRegion,
+      };
+    } catch (error) {
+      debugLog("AWS S3 connection failed", error);
+      debugLog("Error details:", {
+        name: error.name,
+        message: error.message,
+        code: error.code,
+        statusCode: error.$metadata?.httpStatusCode,
+        requestId: error.$metadata?.requestId,
+      });
+      let message = "AWS S3 connection failed";
+      let details = error.message;
+      // Provide more specific error messages based on error type
+      if (error.name === "CredentialsProviderError") {
+        message = "Invalid AWS credentials";
+        details = "Check your AWS Access Key ID and Secret Access Key";
+      } else if (error.name === "NoSuchBucket") {
+        message = "S3 bucket not found";
+        details = `Bucket '${config.s3BucketName}' does not exist or is not accessible`;
+      } else if (error.name === "AccessDenied" || error.name === "Forbidden") {
+        message = "Access denied to S3 bucket";
+        details = "Check your AWS permissions for S3 operations";
+      } else if (
+        error.name === "NetworkingError" ||
+        error.message.includes("fetch") ||
+        error.name === "TypeError" ||
+        error.message.includes("CORS") ||
+        error.code === "NetworkingError"
+      ) {
+        message = "Network/CORS connection failed";
+        details =
+          "This is likely a CORS issue. The bucket exists but browser access is restricted. File uploads might still work.";
+      } else if (error.name === "TimeoutError") {
+        message = "Connection timeout";
+        details = "AWS S3 connection timed out";
+      } else if (error.code === "InvalidAccessKeyId") {
+        message = "Invalid AWS Access Key ID";
+        details = "The AWS Access Key ID you provided does not exist";
+      } else if (error.code === "SignatureDoesNotMatch") {
+        message = "Invalid AWS Secret Access Key";
+        details = "The AWS Secret Access Key you provided is incorrect";
+      }
+      return {
+        connected: false,
+        status: "error",
+        message,
+        details,
+        error: error.name || "Unknown error",
+        debug: {
+          errorCode: error.code,
+          errorName: error.name,
+          httpStatusCode: error.$metadata?.httpStatusCode,
+          requestId: error.$metadata?.requestId,
+          bucket: config.s3BucketName,
+          region: config.awsRegion,
+        },
+      };
+    }
+  }
+  // Retry mechanism for API requests
+  static async retryRequest(requestFunction, maxRetries = config.maxRetries) {
+    let lastError = null;
+    for (let attempt = 1; attempt <= maxRetries; attempt++) {
+      try {
+        debugLog(`API request attempt ${attempt}/${maxRetries}`);
+        const result = await requestFunction();
+        return result;
+      } catch (error) {
+        lastError = error;
+        debugLog(`API request attempt ${attempt} failed`, error);
+        if (attempt < maxRetries) {
+          // Wait before retrying (exponential backoff)
+          const waitTime = Math.pow(2, attempt - 1) * 1000;
+          debugLog(`Retrying in ${waitTime}ms...`);
+          await new Promise((resolve) => setTimeout(resolve, waitTime));
+        }
+      }
+    }
+    throw lastError;
+  }
+  static async validateApiKey(apiKey) {
+    debugLog("Validating API key", {
+      keyPrefix: apiKey.substring(0, 8) + "...",
+    });
+    try {
+      // Encrypt the API key before sending for validation
+      const encryptedApiKey = encryptApiKey(apiKey);
+      const response = await fetch(getValidationUrl(), {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ apiKey: encryptedApiKey }),
+        signal: AbortSignal.timeout(config.apiTimeout * 1000), // Convert to milliseconds
+      });
+      const result = await response.json();
+      debugLog("API key validation result", result);
+      // Handle the new API response format
+      if (response.ok && result.status === "success") {
+        // If validation is successful, store the encrypted key for future use
+        if (result.data && result.data.isValid) {
+          sessionStorage.setItem("encryptedApiKey", encryptedApiKey);
+          return {
+            success: true,
+            valid: true,
+            isValid: true,
+            message: result.message || "Api Credentials Validated Successfully",
+            data: result.data,
+          };
+        }
+      }
+      // Handle error responses or invalid API keys
+      if (result.status === "error") {
+        // Remove any stored invalid key
+        sessionStorage.removeItem("encryptedApiKey");
+        return {
+          success: false,
+          valid: false,
+          isValid: false,
+          message: result.message || "Invalid or revoked API key",
+          error: true,
+        };
+      }
+      // Fallback for unexpected response format
+      throw new Error(
+        result.message ||
+          `Validation failed: ${response.status} ${response.statusText}`
+      );
+    } catch (error) {
+      debugLog("API key validation error", error);
+      // Handle network errors - for development, allow bypass with proper format
+      if (error.name === "TypeError" && error.message.includes("fetch")) {
+        debugLog(
+          "Network error detected, using fallback validation for development"
+        );
+        // Simple validation for development - check if it's a valid sync_ token format
+        if (apiKey.startsWith("sync_") && apiKey.length > 20) {
+          const encryptedApiKey = encryptApiKey(apiKey);
+          sessionStorage.setItem("encryptedApiKey", encryptedApiKey);
+          return {
+            success: true,
+            valid: true,
+            isValid: true,
+            message: "API key format valid (offline validation)",
+            data: { isValid: true },
+          };
+        } else {
+          // Remove any stored invalid key
+          sessionStorage.removeItem("encryptedApiKey");
+          return {
+            success: false,
+            valid: false,
+            isValid: false,
+            message:
+              "Invalid API key format. Key must start with 'sync_' and be at least 20 characters long.",
+            error: true,
+          };
+        }
+      }
+      // Handle other network errors for development
+      if (
+        error.message.includes("Failed to fetch") ||
+        error.name === "TypeError"
+      ) {
+        debugLog(
+          "Network connection error, using fallback validation for development"
+        );
+        // Simple validation for development - check if it's a valid sync_ token format
+        if (apiKey.startsWith("sync_") && apiKey.length > 20) {
+          const encryptedApiKey = encryptApiKey(apiKey);
+          sessionStorage.setItem("encryptedApiKey", encryptedApiKey);
+          return {
+            success: true,
+            valid: true,
+            isValid: true,
+            message:
+              "API key format valid (offline validation - server not available)",
+            data: { isValid: true },
+          };
+        } else {
+          // Remove any stored invalid key
+          sessionStorage.removeItem("encryptedApiKey");
+          return {
+            success: false,
+            valid: false,
+            isValid: false,
+            message:
+              "Invalid API key format. Key must start with 'sync_' and be at least 20 characters long.",
+            error: true,
+          };
+        }
+      }
+      // Network or other errors
+      if (error.name === "AbortError") {
+        throw new Error("Request timeout: API validation took too long");
+      }
+      throw error;
+    }
+  }
+  static async uploadFileToS3(file) {
+    debugLog("Uploading file to S3", { fileName: file.name, size: file.size });
+    // Check file size
+    const maxSizeBytes = config.maxFileSizeMB * 1024 * 1024;
+    if (file.size > maxSizeBytes) {
+      throw new Error(
+        `File size exceeds maximum allowed size of ${config.maxFileSizeMB}MB`
+      );
+    }
+    // In development mode, if AWS credentials are not configured, simulate upload
+    if (
+      process.env.NODE_ENV === "development" &&
+      (!config.awsAccessKeyId || !config.awsSecretAccessKey)
+    ) {
+      debugLog(
+        "Development mode: Simulating S3 upload without actual AWS credentials"
+      );
+      // Generate a mock S3 URL for development
+      const timestamp = Date.now();
+      const fileName = `uploads/${timestamp}-${file.name}`;
+      const mockUrl = `https://mock-bucket.s3.mock-region.amazonaws.com/${fileName}`;
+      // Simulate upload delay
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      return {
+        success: true,
+        s3_link: mockUrl,
+        link: mockUrl,
+        publicUrl: mockUrl,
+        url: mockUrl,
+        s3Key: fileName,
+        etag: `"mock-etag-${timestamp}"`,
+        bucket: "mock-bucket",
+        region: "mock-region",
+        development: true,
+        message: "Development mode: Upload simulated successfully",
+      };
+    }
+    try {
+      // Initialize S3 client
+      const s3Client = getS3Client();
+      // Generate unique filename
+      const timestamp = Date.now();
+      const fileName = `uploads/${timestamp}-${file.name}`;
+      // Convert file to ArrayBuffer for compatibility with AWS SDK
+      const fileBuffer = await file.arrayBuffer();
+      // Create upload command
+      const uploadCommand = new PutObjectCommand({
+        Bucket: config.s3BucketName,
+        Key: fileName,
+        Body: fileBuffer,
+        ContentType: file.type,
+        ACL: "public-read", // Make the uploaded file publicly accessible
+        Metadata: {
+          "original-name": file.name,
+          "upload-timestamp": timestamp.toString(),
+        },
+      });
+      debugLog("Starting S3 upload", {
+        bucket: config.s3BucketName,
+        key: fileName,
+        contentType: file.type,
+        fileSize: file.size,
+        bufferSize: fileBuffer.byteLength,
+      });
+      // Upload to S3
+      const result = await s3Client.send(uploadCommand);
+      // Construct public URL
+      const publicUrl = `https://${config.s3BucketName}.s3.${config.awsRegion}.amazonaws.com/${fileName}`;
+      debugLog("File upload result", {
+        etag: result.ETag,
+        publicUrl: publicUrl,
+      });
+      return {
+        success: true,
+        s3_link: publicUrl,
+        link: publicUrl,
+        publicUrl: publicUrl,
+        url: publicUrl,
+        s3Key: fileName,
+        etag: result.ETag,
+        bucket: config.s3BucketName,
+        region: config.awsRegion,
+      };
+    } catch (error) {
+      debugLog("File upload error", error);
+      // Provide more specific error messages
+      if (error.name === "CredentialsProviderError") {
+        throw new Error(
+          "AWS credentials are invalid or not configured properly"
+        );
+      } else if (error.name === "NoSuchBucket") {
+        throw new Error(
+          `S3 bucket '${config.s3BucketName}' does not exist or is not accessible`
+        );
+      } else if (error.name === "AccessDenied") {
+        throw new Error(
+          "Access denied. Check your AWS permissions for S3 operations"
+        );
+      } else {
+        throw new Error(`Upload failed: ${error.message || "Unknown error"}`);
+      }
+    }
+  }
+  static async verifyStoredApiKey() {
+    try {
+      const encryptedApiKey = sessionStorage.getItem("encryptedApiKey");
+      if (!encryptedApiKey) {
+        return {
+          valid: false,
+          message: "No stored API key found",
+        };
+      }
+      // Actually verify the stored API key by making a validation call
+      debugLog("Verifying stored API key");
+      try {
+        const validationResponse = await fetch(getValidationUrl(), {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            encryptedApiKey: encryptedApiKey,
+          }),
+        });
+        const result = await validationResponse.json();
+        if (result.success && result.data && result.data.isValid) {
+          return {
+            valid: true,
+            message: "Stored API key is valid",
+            encryptedKey: encryptedApiKey,
+          };
+        } else {
+          // Remove invalid stored key
+          sessionStorage.removeItem("encryptedApiKey");
+          return {
+            valid: false,
+            message: "Stored API key is invalid",
+          };
+        }
+      } catch (validationError) {
+        debugLog("Error validating stored API key", validationError);
+        // On validation error, assume key might be invalid and remove it
+        sessionStorage.removeItem("encryptedApiKey");
+        return {
+          valid: false,
+          message: "Could not validate stored API key",
+          error: validationError.message,
+        };
+      }
+    } catch (error) {
+      debugLog("Error verifying stored API key", error);
+      return {
+        valid: false,
+        message: "Error verifying stored API key",
+        error: error.message,
+      };
+    }
+  }
+  static async generateSyntheticData(apiKey, s3Link, generationConfig) {
+    debugLog("Generating synthetic data", { s3Link, config: generationConfig });
+    try {
+      // Get encrypted API key from session storage or encrypt the provided key
+      let encryptedApiKey = sessionStorage.getItem("encryptedApiKey");
+      if (!encryptedApiKey) {
+        encryptedApiKey = encryptApiKey(apiKey);
+      }
+      const response = await fetch(getGenerationUrl(), {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "x-api-key": encryptedApiKey,
+        },
+        body: JSON.stringify({
+          fileUrl: s3Link,
+          type: "Tabular",
+          numberOfRows: generationConfig.numRows || config.defaultNumRecords,
+          targetColumn: generationConfig.targetColumn,
+          fileSizeBytes: generationConfig.fileSizeBytes || 0,
+          sourceFileRows: generationConfig.sourceFileRows || 0,
+        }),
+        signal: AbortSignal.timeout(config.apiTimeout * 1000),
+      });
+      if (!response.ok) {
+        throw new Error(
+          `Generation failed: ${response.status} ${response.statusText}`
+        );
+      }
+      const result = await response.json();
+      debugLog("Data generation result", result);
+      return result;
+    } catch (error) {
+      debugLog("Data generation error", error);
+      throw error;
+    }
+  }
+  // Check AWS credentials - equivalent to Python check_aws_credentials function
+  static async checkAwsCredentials() {
+    /**
+     * Check if AWS credentials are valid
+     *
+     * Returns:
+     *   Object: Status dictionary with 'valid' boolean and 'message' string
+     */
+    debugLog("Checking AWS credentials validity");
+    // Check if credentials are configured
+    if (!config.awsAccessKeyId || !config.awsSecretAccessKey) {
+      // In development mode, allow bypassing AWS credentials requirement
+      if (process.env.NODE_ENV === "development") {
+        debugLog(
+          "Development mode: AWS credentials not configured, but allowing bypass"
+        );
+        return {
+          valid: true,
+          connected: true,
+          message: "Development mode: AWS configuration bypassed",
+          development: true,
+        };
+      }
+      return {
+        valid: false,
+        connected: false,
+        message: "Cloud storage credentials not configured.",
+      };
+    }
+    // Check if bucket is configured
+    if (!config.s3BucketName) {
+      return {
+        valid: false,
+        connected: false,
+        message: "Cloud storage not configured.",
+      };
+    }
+    // Try to get S3 client
+    let s3Client;
+    try {
+      s3Client = getS3Client();
+    } catch (error) {
+      return {
+        valid: false,
+        connected: false,
+        message: "Cloud storage connection unavailable.",
+      };
+    }
+    // Check if bucket exists and is accessible
+    try {
+      const headBucketCommand = new HeadBucketCommand({
+        Bucket: config.s3BucketName,
+      });
+      await s3Client.send(headBucketCommand);
+      return {
+        valid: true,
+        connected: true,
+        message: "Cloud storage connected",
+      };
+    } catch (error) {
+      debugLog("HeadBucket operation failed:", error);
+      // Handle different error types similar to Python ClientError handling
+      if (
+        error.name === "NoSuchBucket" ||
+        error.$metadata?.httpStatusCode === 404
+      ) {
+        return {
+          valid: false,
+          connected: false,
+          message: "Storage location not found",
+          error: "Storage not found",
+        };
+      } else if (
+        error.name === "Forbidden" ||
+        error.$metadata?.httpStatusCode === 403
+      ) {
+        return {
+          valid: false,
+          connected: false,
+          message: "Storage access denied",
+          error: "Access denied",
+        };
+      } else if (
+        error.message &&
+        error.message.toLowerCase().includes("cors")
+      ) {
+        // Handle CORS errors specially - this is common in browser environments
+        debugLog("CORS error detected, but credentials may still be valid");
+        return {
+          valid: true,
+          connected: true,
+          message: "Cloud storage connected (CORS limitations)",
+          warning: "CORS restrictions apply in browser environment",
+        };
+      } else {
+        return {
+          valid: false,
+          connected: false,
+          message: "Storage connection error",
+          error: "Connection error",
+        };
+      }
+    }
+  }
+}
+export default ApiService;

src/utils/config.js ADDED Viewed

	@@ -0,0 +1,133 @@

+import CryptoJS from "crypto-js";
+// Fallback encryption keys for development (should be environment variables in production)
+const AES_SECRET_KEY =
+  process.env.REACT_APP_AES_SECRET_KEY ||
+  "2b7e151628aed2a6abf7158809cf4f3c2b7e151628aed2a6abf7158809cf4f3c";
+const AES_IV =
+  process.env.REACT_APP_AES_IV || "000102030405060708090a0b0c0d0e0f";
+// Encryption utilities
+export function encryptApiKey(rawKey) {
+  const key = CryptoJS.enc.Hex.parse(AES_SECRET_KEY);
+  const iv = CryptoJS.enc.Hex.parse(AES_IV);
+  const encrypted = CryptoJS.AES.encrypt(rawKey, key, {
+    iv,
+    mode: CryptoJS.mode.CBC,
+    padding: CryptoJS.pad.Pkcs7,
+  });
+  return encrypted.toString(); // base64
+}
+export function decryptApiKey(encryptedKey) {
+  const key = CryptoJS.enc.Hex.parse(AES_SECRET_KEY);
+  const iv = CryptoJS.enc.Hex.parse(AES_IV);
+  const decrypted = CryptoJS.AES.decrypt(encryptedKey, key, {
+    iv,
+    mode: CryptoJS.mode.CBC,
+    padding: CryptoJS.pad.Pkcs7,
+  });
+  return decrypted.toString(CryptoJS.enc.Utf8);
+}
+// Application configuration
+export const config = {
+  apiBaseUrl:
+    process.env.REACT_APP_API_BASE_URL || "http://localhost:8000/api/v1",
+  apiTimeout: parseInt(process.env.REACT_APP_API_TIMEOUT) || 30,
+  maxRetries: parseInt(process.env.REACT_APP_MAX_RETRIES) || 3,
+  // AWS S3 Configuration
+  awsRegion: process.env.REACT_APP_AWS_REGION || "ap-south-1",
+  s3BucketName: process.env.REACT_APP_S3_BUCKET_NAME || "test-bucket-name",
+  awsAccessKeyId:
+    process.env.REACT_APP_AWS_ACCESS_KEY_ID ||
+    process.env.REACT_APP_AWS_ACCESS_KEY,
+  awsSecretAccessKey:
+    process.env.REACT_APP_AWS_SECRET_ACCESS_KEY ||
+    process.env.REACT_APP_AWS_SECRET_KEY,
+  // Application Settings
+  defaultNumRecords: parseInt(process.env.REACT_APP_DEFAULT_NUM_RECORDS) || 100,
+  maxFileSizeMB: parseInt(process.env.REACT_APP_MAX_FILE_SIZE_MB) || 100,
+  // Debug mode
+  debugMode: process.env.REACT_APP_DEBUG === "true",
+};
+// API endpoints
+export const getValidationUrl = () =>
+  `${config.apiBaseUrl}/credentials/api/validate`;
+export const getGenerationUrl = () => `${config.apiBaseUrl}/ai/execute`;
+// Debug logging utility
+export const debugLog = (message, data = null) => {
+  if (config.debugMode || process.env.NODE_ENV === "development") {
+    console.log(`[DEBUG] ${message}`, data || "");
+  }
+};
+// Validate configuration on load
+const validateConfig = () => {
+  const requiredEnvVars = [
+    "REACT_APP_AWS_ACCESS_KEY_ID",
+    "REACT_APP_AWS_SECRET_ACCESS_KEY",
+  ];
+  const missing = requiredEnvVars.filter(
+    (envVar) =>
+      !process.env[envVar] &&
+      !process.env[envVar.replace("_ID", "").replace("_KEY", "")]
+  );
+  if (missing.length > 0) {
+    console.warn("Missing environment variables:", missing);
+  }
+};
+validateConfig();
+// Enhanced credential validation utilities for browser environment
+export const credentialValidation = {
+  // Validate AWS credential format without making API calls
+  validateCredentialFormat: () => {
+    const errors = [];
+    if (!config.awsAccessKeyId) {
+      errors.push("AWS Access Key ID is not configured");
+    } else if (!config.awsAccessKeyId.startsWith("AKIA")) {
+      errors.push(
+        "AWS Access Key ID format appears invalid (should start with AKIA)"
+      );
+    }
+    if (!config.awsSecretAccessKey) {
+      errors.push("AWS Secret Access Key is not configured");
+    } else if (config.awsSecretAccessKey.length !== 40) {
+      errors.push(
+        "AWS Secret Access Key format appears invalid (should be 40 characters)"
+      );
+    }
+    if (!config.s3BucketName) {
+      errors.push("S3 Bucket name is not configured");
+    }
+    if (!config.awsRegion) {
+      errors.push("AWS Region is not configured");
+    }
+    return {
+      valid: errors.length === 0,
+      errors: errors,
+      formatValid: errors.length === 0,
+    };
+  },
+  // Check if we're in a CORS-restricted environment
+  isBrowserEnvironment: () => {
+    return typeof window !== "undefined" && typeof document !== "undefined";
+  },
+};
+export default config;