Adjusted the terratech workflow.

app/terratech-facility-summaries/page.tsx

@@ -1,621 +1,501 @@
-'use client';
-
-import { useState, useEffect, useCallback } from 'react';
-import { FileText, Fuel, Upload, Database, BarChart3, CheckCircle, Loader2, History, PlusCircle } from 'lucide-react';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { UploadForm } from '@/app/components/uploadForm';
-import { createTerraTechImportRecord, processTerraTechImportData } from '@/app/actions/terratech-workflow';
-import { getImportsByLayoutName, getTerraTechFacilitySummary } from '@/app/actions/imports';
-import { TerraTechImportsTable } from '@/app/components/terratech/TerraTechImportsTable';
-import { TerraTechSummaryDialog } from '@/app/components/terratech/TerraTechSummaryDialog';
-import { useToast } from '@/hooks/use-toast';
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import {
+  FileText,
+  Fuel,
+  Upload,
+  Database,
+  CheckCircle,
+  Loader2,
+  History,
+  PlusCircle,
+} from "lucide-react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { UploadForm } from "@/app/components/uploadForm";
+import {
+  createTerraTechImportRecord,
+  processTerraTechImportData,
+} from "@/app/actions/terratech-workflow";
+import { getImportsByLayoutName } from "@/app/actions/imports";
+import { TerraTechImportsTable } from "@/app/components/terratech/TerraTechImportsTable";
+import { TerraTechSummaryDialog } from "@/app/components/terratech/TerraTechSummaryDialog";
+import { useToast } from "@/hooks/use-toast";
 
 interface FileData {
-    id: string;
-    filename: string;
-    mimetype: string;
-    size: number;
-    createdAt: string;
-    updatedAt: string;
+  id: string;
+  filename: string;
+  mimetype: string;
+  size: number;
+  createdAt: string;
+  updatedAt: string;
 }
 
 interface Import {
+  id: number;
+  name: string;
+  importDate: string;
+  layoutId: number;
+  layout: {
     id: number;
     name: string;
-    importDate: string;
-    layoutId: number;
-    layout: {
-        id: number;
-        name: string;
-    };
+  };
 }
 
 interface RawImportData {
+  id: number;
+  name: string;
+  importDate: Date | string;
+  layoutId: number;
+  layout: {
     id: number;
     name: string;
-    importDate: Date | string;
-    layoutId: number;
-    layout: {
-        id: number;
-        name: string;
-    };
+  };
 }
 
-interface SummaryData {
-    importId: number;
-    importName: string;
-    layoutName: string;
-    rows: any[];
-}
-
-const LAYOUT_NAME = 'TerraTech - GasOilWater Summary';
+const LAYOUT_NAME = "TerraTech - GasOilWater Summary";
 
 export default function TerraTechFacilitySummariesPage() {
-    const [imports, setImports] = useState<Import[]>([]);
-    const [loading, setLoading] = useState(true);
-    const [summaryDialogOpen, setSummaryDialogOpen] = useState(false);
-    const [selectedImportId, setSelectedImportId] = useState<number | null>(null);
-    const { toast } = useToast();
-
-    // Workflow state
-    const [viewMode, setViewMode] = useState<'imports' | 'new-import' | 'summary'>('imports');
-    const [currentStep, setCurrentStep] = useState(1);
-    const [uploadedFile, setUploadedFile] = useState<FileData | null>(null);
-    const [isProcessing, setIsProcessing] = useState(false);
-    const [importRecord, setImportRecord] = useState<Import | null>(null);
-    const [summaryData, setSummaryData] = useState<SummaryData | null>(null);
-    const [error, setError] = useState<string | null>(null);
-    const [selectedSummaryImport, setSelectedSummaryImport] = useState<Import | null>(null);
-
-    const loadImports = useCallback(async () => {
-        try {
-            setLoading(true);
-            setError(null);
-
-            const result = await getImportsByLayoutName(LAYOUT_NAME);
-            if (result.success && result.data) {
-                const transformedImports = result.data.map((item: RawImportData) => ({
-                    id: item.id,
-                    name: item.name,
-                    importDate: item.importDate instanceof Date
-                        ? item.importDate.toISOString()
-                        : String(item.importDate),
-                    layoutId: item.layoutId,
-                    layout: {
-                        id: item.layout.id,
-                        name: item.layout.name,
-                    },
-                }));
-                setImports(transformedImports);
-            } else {
-                toast({
-                    title: 'Error',
-                    description: result.error || 'Failed to load imports',
-                    variant: 'destructive',
-                });
-                setImports([]);
-            }
-        } catch {
-            toast({
-                title: 'Error',
-                description: 'Failed to load imports',
-                variant: 'destructive',
-            });
-        } finally {
-            setLoading(false);
-        }
-    }, [toast]);
-
-    useEffect(() => {
-        loadImports();
-    }, [loadImports]);
-
-    // Workflow handlers
-    const handleFileUploaded = (file: FileData) => {
-        setUploadedFile(file);
-        setCurrentStep(2);
-        setError(null);
-    };
-
-    const handleCreateImportRecord = async () => {
-        if (!uploadedFile) return;
-
-        setIsProcessing(true);
-        setError(null);
-
-        try {
-            const result = await createTerraTechImportRecord(uploadedFile.id, uploadedFile.filename);
-
-            if (result.success && result.data) {
-                const importData = result.data;
-
-                const importRecordData: Import = {
-                    id: importData.id,
-                    name: importData.name,
-                    importDate: importData.importDate instanceof Date
-                        ? importData.importDate.toISOString()
-                        : String(importData.importDate),
-                    layoutId: importData.layoutId,
-                    layout: {
-                        id: importData.layout?.id || 0,
-                        name: importData.layout?.name || LAYOUT_NAME,
-                    },
-                };
-
-                setImportRecord(importRecordData);
-                setCurrentStep(3);
-            } else {
-                setError(result.error || 'Failed to create import record');
-            }
-        } catch (err) {
-            setError(err instanceof Error ? err.message : 'Unknown error occurred');
-        } finally {
-            setIsProcessing(false);
-        }
-    };
-
-    const handleProcessImportData = async () => {
-        if (!importRecord) return;
-
-        setIsProcessing(true);
-        setError(null);
-
-        try {
-            const result = await processTerraTechImportData(importRecord.id);
-
-            if (result.success) {
-                setCurrentStep(4);
-            } else {
-                setError(result.error || 'Failed to process import data');
-            }
-        } catch (err) {
-            setError(err instanceof Error ? err.message : 'Unknown error occurred');
-        } finally {
-            setIsProcessing(false);
-        }
-    };
-
-    const handleGenerateSummary = async () => {
-        if (!importRecord) return;
-
-        setIsProcessing(true);
-        setError(null);
-
-        try {
-            const result = await getTerraTechFacilitySummary(importRecord.id);
-
-            if (result.success && result.data) {
-                setSummaryData(result.data);
-                setSelectedSummaryImport(importRecord);
-                setViewMode('summary');
-            } else {
-                setError(result.error || 'Failed to generate summary');
-            }
-        } catch (err) {
-            setError(err instanceof Error ? err.message : 'Failed to generate summary');
-        } finally {
-            setIsProcessing(false);
-        }
-    };
-
-    const handleStartNewImport = () => {
-        setViewMode('new-import');
-        setCurrentStep(1);
-        setUploadedFile(null);
-        setImportRecord(null);
-        setSummaryData(null);
-        setError(null);
-    };
-
-    const handleBackToImports = () => {
-        setViewMode('imports');
-        setSelectedSummaryImport(null);
-        setSummaryData(null);
-        loadImports();
-    };
-
-    function handleViewSummary(importRecord: Import) {
-        setSelectedSummaryImport(importRecord);
-        setSelectedImportId(importRecord.id);
-        setSummaryDialogOpen(true);
-    }
-
-    const formatDate = (dateString: string) => {
-        return new Date(dateString).toLocaleDateString('en-US', {
-            year: 'numeric',
-            month: 'short',
-            day: 'numeric',
-            hour: '2-digit',
-            minute: '2-digit'
+  const [imports, setImports] = useState<Import[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [summaryDialogOpen, setSummaryDialogOpen] = useState(false);
+  const [selectedImportId, setSelectedImportId] = useState<number | null>(null);
+  const { toast } = useToast();
+
+  // Workflow state
+  const [viewMode, setViewMode] = useState<"imports" | "new-import">("imports");
+  const [currentStep, setCurrentStep] = useState(1);
+  const [uploadedFile, setUploadedFile] = useState<FileData | null>(null);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [importRecord, setImportRecord] = useState<Import | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadImports = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const result = await getImportsByLayoutName(LAYOUT_NAME);
+      if (result.success && result.data) {
+        const transformedImports = result.data.map((item: RawImportData) => ({
+          id: item.id,
+          name: item.name,
+          importDate:
+            item.importDate instanceof Date
+              ? item.importDate.toISOString()
+              : String(item.importDate),
+          layoutId: item.layoutId,
+          layout: {
+            id: item.layout.id,
+            name: item.layout.name,
+          },
+        }));
+        setImports(transformedImports);
+      } else {
+        toast({
+          title: "Error",
+          description: result.error || "Failed to load imports",
+          variant: "destructive",
         });
-    };
-
-    if (loading && viewMode === 'imports') {
-        return (
-            <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
-                <div className="container mx-auto px-4 py-8">
-                    <div className="flex justify-center">
-                        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
-                    </div>
-                </div>
-            </div>
-        );
+        setImports([]);
+      }
+    } catch {
+      toast({
+        title: "Error",
+        description: "Failed to load imports",
+        variant: "destructive",
+      });
+    } finally {
+      setLoading(false);
     }
-
+  }, [toast]);
+
+  useEffect(() => {
+    loadImports();
+  }, [loadImports]);
+
+  // Workflow handlers
+  const handleFileUploaded = (file: FileData) => {
+    setUploadedFile(file);
+    setCurrentStep(2);
+    setError(null);
+  };
+
+  const handleCreateImportRecord = async () => {
+    if (!uploadedFile) return;
+
+    setIsProcessing(true);
+    setError(null);
+
+    try {
+      const result = await createTerraTechImportRecord(
+        uploadedFile.id,
+        uploadedFile.filename,
+      );
+
+      if (result.success && result.data) {
+        const importData = result.data;
+
+        const importRecordData: Import = {
+          id: importData.id,
+          name: importData.name,
+          importDate:
+            importData.importDate instanceof Date
+              ? importData.importDate.toISOString()
+              : String(importData.importDate),
+          layoutId: importData.layoutId,
+          layout: {
+            id: importData.layout?.id || 0,
+            name: importData.layout?.name || LAYOUT_NAME,
+          },
+        };
+
+        setImportRecord(importRecordData);
+        setCurrentStep(3);
+      } else {
+        setError(result.error || "Failed to create import record");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Unknown error occurred");
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  const handleProcessImportData = async () => {
+    if (!importRecord) return;
+
+    setIsProcessing(true);
+    setError(null);
+
+    try {
+      const result = await processTerraTechImportData(importRecord.id);
+
+      if (result.success) {
+        // After processing, go back to imports view
+        handleBackToImports();
+      } else {
+        setError(result.error || "Failed to process import data");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Unknown error occurred");
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  const handleStartNewImport = () => {
+    setViewMode("new-import");
+    setCurrentStep(1);
+    setUploadedFile(null);
+    setImportRecord(null);
+    setError(null);
+  };
+
+  const handleBackToImports = () => {
+    setViewMode("imports");
+    loadImports();
+  };
+
+  function handleViewSummary(importRecord: Import) {
+    setSelectedImportId(importRecord.id);
+    setSummaryDialogOpen(true);
+  }
+
+  if (loading && viewMode === "imports") {
     return (
-        <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
-            <div className="container mx-auto px-4 py-8">
-                <div className="flex justify-between items-center mb-8">
-                    <div className="flex items-center gap-4">
-                        <div className="bg-amber-500 w-12 h-12 rounded-full flex items-center justify-center text-white">
-                            <Fuel className="w-6 h-6" />
-                        </div>
+      <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
+        <div className="container mx-auto px-4 py-8">
+          <div className="flex justify-center">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
+      <div className="container mx-auto px-4 py-8">
+        <div className="flex justify-between items-center mb-8">
+          <div className="flex items-center gap-4">
+            <div className="bg-amber-500 w-12 h-12 rounded-full flex items-center justify-center text-white">
+              <Fuel className="w-6 h-6" />
+            </div>
+            <div>
+              <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+                TerraTech Facility Summaries
+              </h1>
+              <p className="text-gray-600 dark:text-gray-300">
+                View Gas, Oil, and Water production summaries for imported data
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {error && (
+          <div className="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg">
+            <p className="text-sm text-red-800">{error}</p>
+          </div>
+        )}
+
+        {/* Navigation Buttons */}
+        <div className="mb-6 flex gap-4">
+          <Button
+            variant={viewMode === "imports" ? "default" : "outline"}
+            onClick={handleBackToImports}
+            className="flex items-center gap-2"
+          >
+            <History className="h-4 w-4" />
+            Prior Imports
+          </Button>
+          <Button
+            variant={viewMode === "new-import" ? "default" : "outline"}
+            onClick={handleStartNewImport}
+            className="flex items-center gap-2"
+          >
+            <PlusCircle className="h-4 w-4" />
+            New Import
+          </Button>
+        </div>
+
+        {/* Prior Imports View */}
+        {viewMode === "imports" && (
+          <>
+            {imports.length === 0 ? (
+              <Card className="dark:bg-gray-800 dark:border-gray-700">
+                <CardContent className="flex flex-col items-center justify-center py-12">
+                  <FileText className="h-12 w-12 text-muted-foreground mb-4" />
+                  <h3 className="text-lg font-semibold mb-2 text-gray-900 dark:text-white">
+                    No imports found
+                  </h3>
+                  <p className="text-muted-foreground mb-4 dark:text-gray-300 text-center">
+                    No imports using the &quot;{LAYOUT_NAME}&quot; layout
+                    configuration were found.
+                    <br />
+                    Import data using this layout to see it here.
+                  </p>
+                  <Button onClick={handleStartNewImport}>
+                    Create First Import
+                  </Button>
+                </CardContent>
+              </Card>
+            ) : (
+              <div className="w-full">
+                <TerraTechImportsTable
+                  data={imports}
+                  onViewSummary={handleViewSummary}
+                />
+              </div>
+            )}
+          </>
+        )}
+
+        {/* New Import Workflow */}
+        {viewMode === "new-import" && (
+          <div className="space-y-6">
+            {/* Workflow Steps */}
+            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+              {[
+                {
+                  id: 1,
+                  title: "Upload Excel File",
+                  description: "Upload the TerraTech GasOilWater Excel file",
+                  icon: Upload,
+                  status:
+                    currentStep >= 1
+                      ? uploadedFile
+                        ? "completed"
+                        : "pending"
+                      : "pending",
+                },
+                {
+                  id: 2,
+                  title: "Create Import Record",
+                  description: "Create import record with layout configuration",
+                  icon: FileText,
+                  status:
+                    currentStep >= 2
+                      ? importRecord
+                        ? "completed"
+                        : "pending"
+                      : "disabled",
+                },
+                {
+                  id: 3,
+                  title: "Import Data",
+                  description: "Process Excel file and import data",
+                  icon: Database,
+                  status:
+                    currentStep > 3
+                      ? "completed"
+                      : currentStep === 3
+                        ? "pending"
+                        : "disabled",
+                },
+              ].map((step) => {
+                const Icon = step.icon;
+                const getStatusColor = (status: string) => {
+                  switch (status) {
+                    case "completed":
+                      return "text-green-600 bg-green-50 border-green-200";
+                    case "pending":
+                      return "text-amber-600 bg-amber-50 border-amber-200";
+                    case "disabled":
+                      return "text-gray-400 bg-gray-50 border-gray-200";
+                    default:
+                      return "text-gray-600 bg-gray-50 border-gray-200";
+                  }
+                };
+
+                return (
+                  <Card
+                    key={step.id}
+                    className={`border-2 ${getStatusColor(step.status)}`}
+                  >
+                    <CardHeader className="pb-3">
+                      <div className="flex items-center space-x-2">
+                        <Icon className="h-5 w-5" />
                         <div>
-                            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
-                                TerraTech Facility Summaries
-                            </h1>
-                            <p className="text-gray-600 dark:text-gray-300">
-                                View Gas, Oil, and Water production summaries for imported data
-                            </p>
+                          <CardTitle className="text-sm font-medium">
+                            Step {step.id}: {step.title}
+                          </CardTitle>
                         </div>
-                    </div>
-                </div>
+                      </div>
+                    </CardHeader>
+                    <CardContent>
+                      <CardDescription className="text-xs">
+                        {step.description}
+                      </CardDescription>
+                    </CardContent>
+                  </Card>
+                );
+              })}
+            </div>
 
-                {error && (
-                    <div className="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg">
-                        <p className="text-sm text-red-800">{error}</p>
+            {/* Step Content */}
+            <div className="space-y-6">
+              {currentStep === 1 && (
+                <Card>
+                  <CardHeader>
+                    <CardTitle>Step 1: Upload Excel File</CardTitle>
+                    <CardDescription>
+                      Upload your TerraTech GasOilWater Excel file to begin
+                      processing
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="space-y-4">
+                      <UploadForm onFileUploaded={handleFileUploaded} />
+                      {uploadedFile && (
+                        <div className="mt-4 p-4 bg-green-50 border border-green-200 rounded-lg">
+                          <div className="flex items-center space-x-2">
+                            <CheckCircle className="h-5 w-5 text-green-600" />
+                            <div>
+                              <p className="text-sm font-medium text-green-800">
+                                File uploaded successfully!
+                              </p>
+                              <p className="text-sm text-green-600">
+                                {uploadedFile.filename} (
+                                {(uploadedFile.size / 1024 / 1024).toFixed(2)}{" "}
+                                MB)
+                              </p>
+                            </div>
+                          </div>
+                        </div>
+                      )}
                     </div>
-                )}
-
-                {/* Navigation Buttons */}
-                <div className="mb-6 flex gap-4">
-                    <Button
-                        variant={viewMode === 'imports' ? 'default' : 'outline'}
-                        onClick={handleBackToImports}
-                        className="flex items-center gap-2"
-                    >
-                        <History className="h-4 w-4" />
-                        Prior Imports
-                    </Button>
-                    <Button
-                        variant={viewMode === 'new-import' ? 'default' : 'outline'}
-                        onClick={handleStartNewImport}
-                        className="flex items-center gap-2"
-                    >
-                        <PlusCircle className="h-4 w-4" />
-                        New Import
-                    </Button>
-                </div>
-
-                {/* Prior Imports View */}
-                {viewMode === 'imports' && (
-                    <>
-                        {imports.length === 0 ? (
-                            <Card className="dark:bg-gray-800 dark:border-gray-700">
-                                <CardContent className="flex flex-col items-center justify-center py-12">
-                                    <FileText className="h-12 w-12 text-muted-foreground mb-4" />
-                                    <h3 className="text-lg font-semibold mb-2 text-gray-900 dark:text-white">No imports found</h3>
-                                    <p className="text-muted-foreground mb-4 dark:text-gray-300 text-center">
-                                        No imports using the "{LAYOUT_NAME}" layout configuration were found.
-                                        <br />
-                                        Import data using this layout to see it here.
-                                    </p>
-                                    <Button onClick={handleStartNewImport}>
-                                        Create First Import
-                                    </Button>
-                                </CardContent>
-                            </Card>
+                  </CardContent>
+                </Card>
+              )}
+
+              {currentStep === 2 && (
+                <Card>
+                  <CardHeader>
+                    <CardTitle>Step 2: Create Import Record</CardTitle>
+                    <CardDescription>
+                      Creating import record with TerraTech - GasOilWater
+                      Summary layout configuration
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="space-y-4">
+                      <p className="text-sm text-muted-foreground">
+                        File: {uploadedFile?.filename}
+                      </p>
+                      <p className="text-sm text-muted-foreground">
+                        Layout: {LAYOUT_NAME}
+                      </p>
+                      <Button
+                        onClick={handleCreateImportRecord}
+                        disabled={isProcessing}
+                        className="w-full bg-amber-500 hover:bg-amber-600"
+                      >
+                        {isProcessing ? (
+                          <>
+                            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                            Creating Import Record...
+                          </>
                         ) : (
-                            <div className="w-full">
-                                <TerraTechImportsTable
-                                    data={imports}
-                                    onViewSummary={handleViewSummary}
-                                />
-                            </div>
+                          "Create Import Record"
                         )}
-                    </>
-                )}
-
-                {/* New Import Workflow */}
-                {viewMode === 'new-import' && (
-                    <div className="space-y-6">
-                        {/* Workflow Steps */}
-                        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-                            {[
-                                {
-                                    id: 1,
-                                    title: 'Upload Excel File',
-                                    description: 'Upload the TerraTech GasOilWater Excel file',
-                                    icon: Upload,
-                                    status: currentStep >= 1 ? (uploadedFile ? 'completed' : 'pending') : 'pending',
-                                },
-                                {
-                                    id: 2,
-                                    title: 'Create Import Record',
-                                    description: 'Create import record with layout configuration',
-                                    icon: FileText,
-                                    status: currentStep >= 2 ? (importRecord ? 'completed' : 'pending') : 'disabled',
-                                },
-                                {
-                                    id: 3,
-                                    title: 'Import Data',
-                                    description: 'Process Excel file and import data',
-                                    icon: Database,
-                                    status: currentStep > 3 ? 'completed' : (currentStep === 3 ? 'pending' : 'disabled'),
-                                },
-                                {
-                                    id: 4,
-                                    title: 'Generate Summary',
-                                    description: 'Run summary calculations and display results',
-                                    icon: BarChart3,
-                                    status: currentStep >= 4 ? (summaryData ? 'completed' : 'pending') : 'disabled',
-                                },
-                            ].map((step) => {
-                                const Icon = step.icon;
-                                const getStatusColor = (status: string) => {
-                                    switch (status) {
-                                        case 'completed':
-                                            return 'text-green-600 bg-green-50 border-green-200';
-                                        case 'pending':
-                                            return 'text-amber-600 bg-amber-50 border-amber-200';
-                                        case 'disabled':
-                                            return 'text-gray-400 bg-gray-50 border-gray-200';
-                                        default:
-                                            return 'text-gray-600 bg-gray-50 border-gray-200';
-                                    }
-                                };
-
-                                return (
-                                    <Card
-                                        key={step.id}
-                                        className={`border-2 ${getStatusColor(step.status)}`}
-                                    >
-                                        <CardHeader className="pb-3">
-                                            <div className="flex items-center space-x-2">
-                                                <Icon className="h-5 w-5" />
-                                                <div>
-                                                    <CardTitle className="text-sm font-medium">
-                                                        Step {step.id}: {step.title}
-                                                    </CardTitle>
-                                                </div>
-                                            </div>
-                                        </CardHeader>
-                                        <CardContent>
-                                            <CardDescription className="text-xs">
-                                                {step.description}
-                                            </CardDescription>
-                                        </CardContent>
-                                    </Card>
-                                );
-                            })}
-                        </div>
-
-                        {/* Step Content */}
-                        <div className="space-y-6">
-                            {currentStep === 1 && (
-                                <Card>
-                                    <CardHeader>
-                                        <CardTitle>Step 1: Upload Excel File</CardTitle>
-                                        <CardDescription>
-                                            Upload your TerraTech GasOilWater Excel file to begin processing
-                                        </CardDescription>
-                                    </CardHeader>
-                                    <CardContent>
-                                        <div className="space-y-4">
-                                            <UploadForm onFileUploaded={handleFileUploaded} />
-                                            {uploadedFile && (
-                                                <div className="mt-4 p-4 bg-green-50 border border-green-200 rounded-lg">
-                                                    <div className="flex items-center space-x-2">
-                                                        <CheckCircle className="h-5 w-5 text-green-600" />
-                                                        <div>
-                                                            <p className="text-sm font-medium text-green-800">File uploaded successfully!</p>
-                                                            <p className="text-sm text-green-600">
-                                                                {uploadedFile.filename} ({(uploadedFile.size / 1024 / 1024).toFixed(2)} MB)
-                                                            </p>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            )}
-                                        </div>
-                                    </CardContent>
-                                </Card>
-                            )}
-
-                            {currentStep === 2 && (
-                                <Card>
-                                    <CardHeader>
-                                        <CardTitle>Step 2: Create Import Record</CardTitle>
-                                        <CardDescription>
-                                            Creating import record with TerraTech - GasOilWater Summary layout configuration
-                                        </CardDescription>
-                                    </CardHeader>
-                                    <CardContent>
-                                        <div className="space-y-4">
-                                            <p className="text-sm text-muted-foreground">
-                                                File: {uploadedFile?.filename}
-                                            </p>
-                                            <p className="text-sm text-muted-foreground">
-                                                Layout: {LAYOUT_NAME}
-                                            </p>
-                                            <Button
-                                                onClick={handleCreateImportRecord}
-                                                disabled={isProcessing}
-                                                className="w-full bg-amber-500 hover:bg-amber-600"
-                                            >
-                                                {isProcessing ? (
-                                                    <>
-                                                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                                                        Creating Import Record...
-                                                    </>
-                                                ) : (
-                                                    'Create Import Record'
-                                                )}
-                                            </Button>
-                                        </div>
-                                    </CardContent>
-                                </Card>
-                            )}
-
-                            {currentStep === 3 && (
-                                <Card>
-                                    <CardHeader>
-                                        <CardTitle>Step 3: Import Data</CardTitle>
-                                        <CardDescription>
-                                            Processing Excel file and importing data into database
-                                        </CardDescription>
-                                    </CardHeader>
-                                    <CardContent>
-                                        <div className="space-y-4">
-                                            <p className="text-sm text-muted-foreground">
-                                                Import ID: {importRecord?.id}
-                                            </p>
-                                            <p className="text-sm text-muted-foreground">
-                                                Import Name: {importRecord?.name}
-                                            </p>
-                                            <Button
-                                                onClick={handleProcessImportData}
-                                                disabled={isProcessing}
-                                                className="w-full bg-amber-500 hover:bg-amber-600"
-                                            >
-                                                {isProcessing ? (
-                                                    <>
-                                                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                                                        Processing Import...
-                                                    </>
-                                                ) : (
-                                                    'Process Import'
-                                                )}
-                                            </Button>
-                                        </div>
-                                    </CardContent>
-                                </Card>
-                            )}
-
-                            {currentStep === 4 && (
-                                <Card>
-                                    <CardHeader>
-                                        <CardTitle>Step 4: Generate Summary</CardTitle>
-                                        <CardDescription>
-                                            Running summary calculations and displaying results
-                                        </CardDescription>
-                                    </CardHeader>
-                                    <CardContent>
-                                        <div className="space-y-4">
-                                            <p className="text-sm text-muted-foreground">
-                                                Import ID: {importRecord?.id}
-                                            </p>
-                                            <Button
-                                                onClick={handleGenerateSummary}
-                                                disabled={isProcessing}
-                                                className="w-full bg-amber-500 hover:bg-amber-600"
-                                            >
-                                                {isProcessing ? (
-                                                    <>
-                                                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                                                        Generating Summary...
-                                                    </>
-                                                ) : (
-                                                    'Generate Summary'
-                                                )}
-                                            </Button>
-                                        </div>
-                                    </CardContent>
-                                </Card>
-                            )}
-                        </div>
+                      </Button>
                     </div>
-                )}
-
-                {/* Summary Results View */}
-                {viewMode === 'summary' && selectedSummaryImport && summaryData && (
-                    <Card>
-                        <CardHeader>
-                            <div className="flex justify-between items-start">
-                                <div>
-                                    <CardTitle>Summary Results</CardTitle>
-                                    <CardDescription>
-                                        {selectedSummaryImport.name} - {formatDate(selectedSummaryImport.importDate)}
-                                    </CardDescription>
-                                </div>
-                                <Button
-                                    variant="outline"
-                                    onClick={handleBackToImports}
-                                    className="flex items-center gap-2"
-                                >
-                                    <History className="h-4 w-4" />
-                                    Back to Imports
-                                </Button>
-                            </div>
-                        </CardHeader>
-                        <CardContent>
-                            {isProcessing ? (
-                                <div className="flex justify-center py-8">
-                                    <Loader2 className="h-8 w-8 animate-spin text-amber-500" />
-                                </div>
-                            ) : summaryData.rows.length === 0 ? (
-                                <div className="text-center py-8">
-                                    <p className="text-muted-foreground mb-4">No summary data available</p>
-                                </div>
-                            ) : (
-                                <div className="overflow-x-auto">
-                                    <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-                                        <thead className="bg-gray-50 dark:bg-gray-800">
-                                            <tr>
-                                                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Well Name</th>
-                                                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">CorpID</th>
-                                                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Facility ID</th>
-                                                <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Gas</th>
-                                                <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Oil</th>
-                                                <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Water</th>
-                                                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">State</th>
-                                                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">County</th>
-                                            </tr>
-                                        </thead>
-                                        <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
-                                            {summaryData.rows.slice(0, 50).map((row, index) => (
-                                                <tr
-                                                    key={`${row.wellName}-${index}`}
-                                                    className={index % 2 === 0
-                                                        ? 'bg-white dark:bg-gray-800'
-                                                        : 'bg-gray-50 dark:bg-gray-700/50'
-                                                    }
-                                                >
-                                                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{row.wellName || '-'}</td>
-                                                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{row.corpId || '-'}</td>
-                                                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{row.facilityId || '-'}</td>
-                                                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100 text-right">
-                                                        {row.gas !== null ? row.gas.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) : '-'}
-                                                    </td>
-                                                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100 text-right">
-                                                        {row.oil !== null ? row.oil.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) : '-'}
-                                                    </td>
-                                                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100 text-right">
-                                                        {row.water !== null ? row.water.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) : '-'}
-                                                    </td>
-                                                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{row.state || '-'}</td>
-                                                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{row.county || '-'}</td>
-                                                </tr>
-                                            ))}
-                                        </tbody>
-                                    </table>
-                                    {summaryData.rows.length > 50 && (
-                                        <p className="text-sm text-muted-foreground mt-4 text-center">
-                                            Showing 50 of {summaryData.rows.length} records. Use the dialog to view all records.
-                                        </p>
-                                    )}
-                                </div>
-                            )}
-                        </CardContent>
-                    </Card>
-                )}
-
-                <TerraTechSummaryDialog
-                    open={summaryDialogOpen}
-                    onOpenChange={setSummaryDialogOpen}
-                    importId={selectedImportId || 0}
-                />
+                  </CardContent>
+                </Card>
+              )}
+
+              {currentStep === 3 && (
+                <Card>
+                  <CardHeader>
+                    <CardTitle>Step 3: Import Data</CardTitle>
+                    <CardDescription>
+                      Processing Excel file and importing data into database
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="space-y-4">
+                      <p className="text-sm text-muted-foreground">
+                        Import ID: {importRecord?.id}
+                      </p>
+                      <p className="text-sm text-muted-foreground">
+                        Import Name: {importRecord?.name}
+                      </p>
+                      <Button
+                        onClick={handleProcessImportData}
+                        disabled={isProcessing}
+                        className="w-full bg-amber-500 hover:bg-amber-600"
+                      >
+                        {isProcessing ? (
+                          <>
+                            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                            Processing Import...
+                          </>
+                        ) : (
+                          "Process Import"
+                        )}
+                      </Button>
+                    </div>
+                  </CardContent>
+                </Card>
+              )}
             </div>
-        </div>
-    );
+          </div>
+        )}
+
+        <TerraTechSummaryDialog
+          open={summaryDialogOpen}
+          onOpenChange={setSummaryDialogOpen}
+          importId={selectedImportId || 0}
+        />
+      </div>
+    </div>
+  );
 }