excelApp/src/App.vue

<template>
  <div class="container">
    <h1>Data Flow Tables</h1>
    <FileUpload v-if="currentStep === 'upload'" @file-processed="handleFileProcessed" />
    <DataTable 
      v-if="currentStep === 'preview'" 
      :jsonData="tableData"
      @reset="resetData"
      @configure="currentStep = 'metadata'"
    />
    <MetaData 
      v-if="currentStep === 'metadata'" 
      :jsonData="tableData" 
      @back="currentStep = 'preview'"
      @sql-generated="handleSQLGenerated" 
    />
    <div v-if="currentStep === 'sql'" class="sql-preview">
      <Navigation 
        @back="currentStep = 'metadata'"
        :show-next="false"
      />
      <pre>{{ sqlStatements }}</pre>
    </div>
  </div>
</template>

<script>
import FileUpload from './components/FileUpload.vue'
import DataTable from './components/DataTable.vue'
import MetaData from './components/MetaData.vue'
import Navigation from './components/Navigation.vue'
import { apiClient } from './services/ApiClient'

export default {
  name: 'App',
  components: {
    FileUpload,
    DataTable,
    MetaData,
    Navigation
  },
  data() {
    return {
      currentStep: 'upload',
      tableData: null,
      sqlStatements: null,
      tableName: null
    }
  },
  methods: {
    handleFileProcessed(data) {
      this.tableData = data
      this.currentStep = 'preview'
    },
    async handleSQLGenerated(data) {
      try {
        this.sqlStatements = data.sql
        this.tableName = data.tableName
        this.currentStep = 'sql'

        await apiClient.createTable(data.sql.createTable)

        // Next steps would be:
        // 1. Generate tab-delimited data
        // 2. Upload to temp file
        // 3. Import records
        // 4. Verify record count
        // 5. Create data load record

      } catch (error) {
        console.error('Error creating table:', error)
        // Handle error - show message to user
      }
    },
    resetData() {
      this.tableData = null
      this.sqlStatements = null
      this.currentStep = 'upload'
    }
  }
}
</script>

<style>
:root {
  --primary-color: #2563eb;
  --primary-hover: #1d4ed8;
  --background-color: #f8fafc;
  --border-color: #e2e8f0;
  --text-color: #1e293b;
  --n-th-color: var(--primary-color) !important;
  --n-th-text-color: white !important;
  --n-th-font-weight: 500 !important;
  --n-th-button-color-hover: white !important;
  --n-th-icon-color: white !important;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: 'Inter', sans-serif;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  color: var(--text-color);
  font-size: 2rem;
  margin-bottom: 2rem;
}

/* Table styles */
.n-data-table .n-data-table-th {
  background-color: var(--primary-color) !important;
  color: white !important;
  border-right: none !important;
  padding: 12px 16px !important;
}

.n-data-table .n-data-table-td {
  border-right: none !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.n-data-table .n-data-table-th:last-child,
.n-data-table .n-data-table-td:last-child {
  border-right: 1px solid var(--border-color) !important;
}

.n-data-table .n-data-table-th:first-child,
.n-data-table .n-data-table-td:first-child {
  border-left: 1px solid var(--border-color) !important;
}

.n-data-table .n-data-table-sorter {
  color: white !important;
}

.n-data-table-th svg {
  fill: white !important;
}

.nav-buttons {
  margin-bottom: 1rem;
  display: flex;
  gap: 1rem;
}

.next-btn {
  background-color: var(--primary-color);
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s;
}

.next-btn:hover {
  background-color: var(--primary-hover);
}

.sql-preview {
  background: white;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
}

.sql-preview pre {
  background: #f8fafc;
  padding: 1rem;
  border-radius: 6px;
  overflow-x: auto;
}
</style>