bbb

 const renderCurrentView = () => {
    if (loading) return <LoadingSpinner />;

    switch (currentView) {
      case 'warehouses':
        return (
          <div className="space-y-8">
            <div className="flex items-center justify-between p-6 bg-white/80 backdrop-blur-xl rounded-3xl shadow-xl border border-white/20">
              <div className="flex items-center gap-4">
                <div className="p-3 bg-gradient-to-br from-blue-600 to-purple-600 rounded-2xl shadow-lg">
                  <Database className="h-6 w-6 text-white" />
                </div>
                <div>
                  <h2 className="text-2xl font-bold bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-transparent">
                    Warehouse Analytics
                  </h2>
                  <p className="text-gray-600 mt-1">Comprehensive performance monitoring</p>
                </div>
              </div>
              <div className="flex gap-4">
                <button
                  onClick={() => navigate('users')}
                  className="px-6 py-3 bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-2xl hover:from-purple-700 hover:to-pink-700 transition-all duration-300 flex items-center gap-3 shadow-lg hover:shadow-xl transform hover:scale-105"
                >
                  <Users size={18} />
                  <span className="font-semibold">View Users</span>
                </button>
                <button
                  onClick={() => navigate('database')}
                  className="px-6 py-3 bg-gradient-to-r from-emerald-600 to-teal-600 text-white rounded-2xl hover:from-emerald-700 hover:to-teal-700 transition-all duration-300 flex items-center gap-3 shadow-lg hover:shadow-xl transform hover:scale-105"
                >
                  <Database size={18} />
                  <span className="font-semibold">View Databases</span>
                </button>
              </div>
            </div>
            <DataTable
              data={warehousesData}
              columns={null}
              groupedColumns={warehouseGroupedColumns}
              onCellClick={handleWarehouseKPIClick}
              title="Advanced Warehouse Performance Analytics"
              searchable={true}
              fixedColumns={['WAREHOUSE_NAME']}
            />
          </div>
        );

      case 'users':
        return (
          <div className="space-y-8">
            <div className="flex items-center justify-between p-6 bg-white/80 backdrop-blur-xl rounded-3xl shadow-xl border border-white/20">
              <div className="flex items-center gap-4">
                <div className="p-3 bg-gradient-to-br from-purple-600 to-pink-600 rounded-2xl shadow-lg">
                  <Users className="h-6 w-6 text-white" />
                </div>
                <div>
                  <h2 className="text-2xl font-bold bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-transparent">
                    User Analytics
                  </h2>
                  <p className="text-gray-600 mt-1">Deep dive into user behavior patterns</p>
                </div>
              </div>
              <button
                onClick={() => navigate('warehouses')}
                className="px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-2xl hover:from-blue-700 hover:to-purple-700 transition-all duration-300 flex items-center gap-3 shadow-lg hover:shadow-xl transform hover:scale-105"
              >
                <Database size={18} />
                <span className="font-semibold">View Warehouses</span>
              </button>
            </div>
            <DataTable
              data={usersData}
              columns={userColumns}
              onCellClick={handleUserKPIClick}
              title="User Performance Analysis"
            />
          </div>
        );

      case 'warehouse-drill':
        return (
          <div className="space-y-8">
            <div className="flex items-center justify-between p-6 bg-white/80 backdrop-blur-xl rounded-3xl shadow-xl border border-white/20">
              <div className="flex items-center gap-4">
                <div className="p-3 bg-gradient-to-br from-indigo-600 to-blue-600 rounded-2xl shadow-lg">
                  <BarChart3 className="h-6 w-6 text-white" />
                </div>
                <div>
                  <h2 className="text-2xl font-bold bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-transparent">
                    {selectedWarehouse} - {selectedKPI} Breakdown
                  </h2>
                  <p className="text-gray-600 mt-1">Detailed performance analysis</p>
                </div>
              </div>
              <button
                onClick={() => navigate('warehouses')}
                className="px-6 py-3 bg-gradient-to-r from-gray-600 to-gray-700 text-white rounded-2xl hover:from-gray-700 hover:to-gray-800 transition-all duration-300 flex items-center gap-3 shadow-lg hover:shadow-xl transform hover:scale-105"
              >
                <ArrowLeft size={18} />
                <span className="font-semibold">Back to Warehouses</span>
              </button>
            </div>
            <DataTable
              data={drillDownData}
              columns={drillDownColumns}
              title={`Queries with ${selectedKPI} in ${selectedWarehouse}`}
            />
          </div>
        );

      case 'user-queries':
        return (
          <div className="space-y-8">
            <div className="flex items-center justify-between p-6 bg-white/80 backdrop-blur-xl rounded-3xl shadow-xl border border-white/20">
              <div className="flex items-center gap-4">
                <div className="p-3 bg-gradient-to-br from-green-600 to-teal-600 rounded-2xl shadow-lg">
                  <Activity className="h-6 w-6 text-white" />
                </div>
                <div>
                  <h2 className="text-2xl font-bold bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-transparent">
                    {selectedUser} - {selectedKPI} Queries
                  </h2>
                  <p className="text-gray-600 mt-1">Individual query performance metrics</p>
                </div>
              </div>
              <button
                onClick={() => window.history.back()}
                className="px-6 py-3 bg-gradient-to-r from-gray-600 to-gray-700 text-white rounded-2xl hover:from-gray-700 hover:to-gray-800 transition-all duration-300 flex items-center gap-3 shadow-lg hover:shadow-xl transform hover:scale-105"
              >
                <ArrowLeft size={18} />
                <span className="font-semibold">Back</span>
              </button>
            </div>
            <DataTable
              data={queriesData}
              columns={queryColumns}
              title={`Query Details for ${selectedUser} (${selectedKPI})`}
            />
          </div>
        );

      case 'query-details':
        return (
          <div className="space-y-8">
            <div className="flex items-center justify-between p-6 bg-white/80 backdrop-blur-xl rounded-3xl shadow-xl border border-white/20">
              <div className="flex items-center gap-4">
                <div className="p-3 bg-gradient-to-br from-emerald-600 to-green-600 rounded-2xl shadow-lg">
                  <Activity className="h-6 w-6 text-white" />
                </div>
                <div>
                  <h2 className="text-2xl font-bold bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-transparent">
                    Query Details
                  </h2>
                  <p className="text-gray-600 mt-1">Comprehensive query analysis</p>
                </div>
              </div>
              <button
                onClick={() => window.history.back()}
                className="px-6 py-3 bg-gradient-to-r from-gray-600 to-gray-700 text-white rounded-2xl hover:from-gray-700 hover:to-gray-800 transition-all duration-300 flex items-center gap-3 shadow-lg hover:shadow-xl transform hover:scale-105"
              >
                <ArrowLeft size={18} />
                <span className="font-semibold">Back</span>
              </button>
            </div>

            {queryDetails && (
              <div className="bg-white/90 backdrop-blur-xl rounded-3xl shadow-2xl border border-white/30 overflow-hidden relative">
                <div className="absolute inset-0 bg-gradient-to-br from-blue-50/30 via-transparent to-purple-50/30 pointer-events-none"></div>

                <div className="relative z-10 p-8">
                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
                    {/* Basic Information */}
                    <div className="space-y-6 p-6 bg-white/50 backdrop-blur rounded-2xl border border-white/20 shadow-lg">
                      <div className="flex items-center gap-3 pb-4 border-b border-gray-200">
                        <div className="p-2 bg-gradient-to-br from-blue-600 to-purple-600 rounded-xl">
                          <Database className="h-5 w-5 text-white" />
                        </div>
                        <h3 className="text-xl font-bold text-gray-900">Basic Information</h3>
                      </div>
                      <div className="space-y-4">
                        <div className="flex flex-col">
                          <label className="text-sm font-semibold text-gray-600 mb-1">Query ID</label>
                          <div className="p-3 bg-gray-50 rounded-xl font-mono text-sm text-gray-800 break-all">
                            {queryDetails.QUERY_ID}
                          </div>
                        </div>
                        <div className="grid grid-cols-2 gap-4">
                          <div>
                            <label className="text-sm font-semibold text-gray-600">User</label>
                            <div className="p-2 bg-blue-50 rounded-lg text-blue-800 font-medium mt-1">
                              {queryDetails.USER_NAME}
                            </div>
                          </div>
                          <div>
                            <label className="text-sm font-semibold text-gray-600">Warehouse</label>
                            <div className="p-2 bg-purple-50 rounded-lg text-purple-800 font-medium mt-1">
                              {queryDetails.WAREHOUSE_NAME}
                            </div>
                          </div>
                        </div>
                        <div className="grid grid-cols-2 gap-4">
                          <div>
                            <label className="text-sm font-semibold text-gray-600">Type</label>
                            <div className="p-2 bg-indigo-50 rounded-lg text-indigo-800 font-medium mt-1">
                              {queryDetails.QUERY_TYPE}
                            </div>
                          </div>
                          <div>
                            <label className="text-sm font-semibold text-gray-600">Status</label>
                            <div className={`p-2 rounded-lg font-medium mt-1 ${
                              queryDetails.EXECUTION_STATUS === 'SUCCESS' 
                                ? 'bg-green-50 text-green-800' 
                                : 'bg-red-50 text-red-800'
                            }`}>
                              {queryDetails.EXECUTION_STATUS}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    {/* Performance Metrics */}
                    <div className="space-y-6 p-6 bg-white/50 backdrop-blur rounded-2xl border border-white/20 shadow-lg">
                      <div className="flex items-center gap-3 pb-4 border-b border-gray-200">
                        <div className="p-2 bg-gradient-to-br from-green-600 to-teal-600 rounded-xl">
                          <TrendingUp className="h-5 w-5 text-white" />
                        </div>
                        <h3 className="text-xl font-bold text-gray-900">Performance Metrics</h3>
                      </div>
                      <div className="grid grid-cols-2 gap-4">
                        <div className="p-4 bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl">
                          <div className="flex items-center gap-2 mb-2">
                            <Clock className="h-4 w-4 text-blue-600" />
                            <span className="text-sm font-semibold text-blue-800">Duration</span>
                          </div>
                          <div className="text-lg font-bold text-blue-900">
                            {Number(queryDetails.TOTAL_ELAPSED_TIME_SECONDS || 0).toFixed(2)}s
                          </div>
                        </div>
                        <div className="p-4 bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl">
                          <div className="flex items-center gap-2 mb-2">
                            <Zap className="h-4 w-4 text-purple-600" />
                            <span className="text-sm font-semibold text-purple-800">Execution</span>
                          </div>
                          <div className="text-lg font-bold text-purple-900">
                            {Number(queryDetails.EXECUTION_TIME_SECONDS || 0).toFixed(2)}s
                          </div>
                        </div>
                        <div className="p-4 bg-gradient-to-br from-green-50 to-green-100 rounded-xl">
                          <div className="flex items-center gap-2 mb-2">
                            <Activity className="h-4 w-4 text-green-600" />
                            <span className="text-sm font-semibold text-green-800">Compilation</span>
                          </div>
                          <div className="text-lg font-bold text-green-900">
                            {Number(queryDetails.COMPILATION_TIME_SECONDS || 0).toFixed(2)}s
                          </div>
                        </div>
                        <div className="p-4 bg-gradient-to-br from-yellow-50 to-yellow-100 rounded-xl">
                          <div className="flex items-center gap-2 mb-2">
                            <Database className="h-4 w-4 text-yellow-600" />
                            <span className="text-sm font-semibold text-yellow-800">Credits</span>
                          </div>
                          <div className="text-lg font-bold text-yellow-900">
                            {Number(queryDetails.CREDITS_USED_CLOUD_SERVICES || 0).toFixed(6)}
                          </div>
                        </div>
                      </div>
                      <div className="grid grid-cols-1 gap-4">
                        <div className="p-4 bg-gradient-to-r from-indigo-50 to-cyan-50 rounded-xl">
                          <div className="flex justify-between items-center">
                            <span className="text-sm font-semibold text-indigo-800">Bytes Scanned</span>
                            <span className="text-lg font-bold text-indigo-900">
                              {Number(queryDetails.BYTES_SCANNED_GB || 0).toFixed(2)} GB
                            </span>
                          </div>
                        </div>
                        <div className="p-4 bg-gradient-to-r from-pink-50 to-rose-50 rounded-xl">
                          <div className="flex justify-between items-center">
                            <span className="text-sm font-semibold text-pink-800">Rows Produced</span>
                            <span className="text-lg font-bold text-pink-900">
                              {Number(queryDetails.ROWS_PRODUCED || 0).toLocaleString()}
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>

                    {/* Query Text */}
                    <div className="lg:col-span-2 space-y-6 p-6 bg-white/50 backdrop-blur rounded-2xl border border-white/20 shadow-lg">
                      <div className="flex items-center gap-3 pb-4 border-b border-gray-200">
                        <div className="p-2 bg-gradient-to-br from-gray-600 to-gray-700 rounded-xl">
                          <Search className="h-5 w-5 text-white" />
                        </div>
                        <h3 className="text-xl font-bold text-gray-900">Query Text</h3>
                      </div>
                      <div className="bg-gray-900 p-6 rounded-2xl shadow-inner relative overflow-hidden">
                        <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500"></div>
                        <pre className="text-sm text-gray-100 whitespace-pre-wrap overflow-x-auto font-mono leading-relaxed">
                          {queryDetails.QUERY_TEXT_SAMPLE || 'Query text not available'}
                        </pre>
                      </div>
                    </div>

                    {/* Error Information */}
                    {queryDetails.ERROR_MESSAGE && (
                      <div className="lg:col-span-2 space-y-6 p-6 bg-red-50/80 backdrop-blur rounded-2xl border border-red-200/50 shadow-lg">
                        <div className="flex items-center gap-3 pb-4 border-b border-red-200">
                          <div className="p-2 bg-red-600 rounded-xl">
                            <AlertTriangle className="h-5 w-5 text-white" />
                          </div>
                          <h3 className="text-xl font-bold text-red-900">Error Information</h3>
                        </div>
                        <div className="space-y-4">
                          <div>
                            <label className="text-sm font-semibold text-red-700">Error Code</label>
                            <div className="p-3 bg-red-100 rounded-lg font-mono text-red-900 mt-1">
                              {queryDetails.ERROR_CODE}
                            </div>
                          </div>
                          <div>
                            <label className="text-sm font-semibold text-red-700">Message</label>
                            <div className="p-3 bg-red-100 rounded-lg text-red-900 mt-1">
                              {queryDetails.ERROR_MESSAGE}
                            </div>
                          </div>
                        </div>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            )}
          </div>
        );

      case 'database':
        return (
          <div className="space-y-8">
            <div className="flex items-center justify-between p-6 bg-white/80 backdrop-blur-xl rounded-3xl shadow-xl border border-white/20">
              <div className="flex items-center gap-4">
                <div className="p-3 bg-gradient-to-br from-emerald-600 to-teal-600 rounded-2xl shadow-lg">
                  <Database className="h-6 w-6 text-white" />
                </div>
                <div>
                  <h2 className="text-2xl font-bold bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-transparent">
                    Database Analytics
                  </h2>
                  <p className="text-gray-600 mt-1">Storage and optimization insights</p>
                </div>
              </div>
              <button
                                onClick={() => navigate('warehouses')}
                className="px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-2xl hover:from-blue-700 hover:to-purple-700 transition-all duration-300 flex items-center gap-3 shadow-lg hover:shadow-xl transform hover:scale-105"
              >
                <Database size={18} />
                <span className="font-semibold">View Warehouses</span>
              </button>
            </div>
            <DataTable
              data={databaseData}
              columns={databaseColumns}
              onCellClick={handleDatabaseTableClick}
              title="Database Performance Analysis"
            />
          </div>
        );

      default:
        return <ErrorMessage message="Unknown view" onRetry={() => navigate('warehouses')} />;
    }
  };