Creating Widgets

model Widget {
  id          String   @id @default(uuid())
  projectId   String
  title       String
  description String?
  type        String   // "chart", "datatable", "text", etc.
  subtype     String?  // "bar", "line", "area" for charts
  configs     Json?    // Widget-specific configuration
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
  project     Project  @relation(...)
}

{
  "title": "Monthly Sales by Region",
  "description": "Total sales grouped by region for each month",
  "type": "chart",
  "subtype": "bar",
  "configs": {
    "connectionId": "conn-123",
    "tableName": "sales",
    "chartType": "bar",
    "xAxisColumn": "month",
    "yAxisColumns": ["north_region", "south_region", "west_region"],
    "expanded": false
  }
}

export function ChartWidget({ widget }: { widget: AppWidget }) {
  const configs = widget.configs as ChartWidgetConfigs
  
  const tableName = configs?.tableName || ""
  const connectionId = configs?.connectionId
  const xAxisColumn = configs?.xAxisColumn || ""
  const yAxisColumns = configs?.yAxisColumns || []
  const chartType = (configs?.chartType || "bar").toLowerCase()
  
  // Fetch data from database
  const { data, loading, error } = useTableDataWithSchema({
    projectId,
    tableName,
    connectionId,
  })
  
  // Transform data for chart
  const chartData = transformToChartData(data, configs)
  
  // Render appropriate chart type
  return (
    <Card>
      {chartType === "bar" && <BarChartWidget data={chartData} />}
      {chartType === "line" && <LineChartWidget data={chartData} />}
      {chartType === "area" && <AreaChartWidget data={chartData} />}
    </Card>
  )
}

{
  "title": "User Management",
  "description": "View and search all users in the system",
  "type": "datatable",
  "configs": {
    "connectionId": "conn-123",
    "tables": ["users", "user_profiles", "user_sessions"]
  }
}

function DatatableWidget({ widget }: { widget: AppWidget }) {
  const configs = widget.configs as DatatableConfig
  const tables = configs?.tables || []
  const connectionId = configs?.connectionId
  
  // Track selected table in localStorage
  const [selectedTable, setSelectedTable] = useState(
    tables[0] || ""
  )
  
  // Fetch data for selected table
  const { data, loading, error, fullSchema } = useTableDataWithSchema({
    projectId,
    tableName: selectedTable,
    connectionId,
  })
  
  // Generate columns from schema
  const columns = useMemo(
    () => getTableColumnsFromSchema(fullSchema, selectedTable),
    [fullSchema, selectedTable]
  )
  
  return (
    <Card>
      <Select value={selectedTable} onValueChange={setSelectedTable}>
        {tables.map((table) => (
          <SelectItem value={table}>{table}</SelectItem>
        ))}
      </Select>
      
      <DataTable columns={columns} data={data} />
    </Card>
  )
}

{
  "title": "Sales Analytics",
  "type": "text",
  "subtype": "section_title",
  "configs": {}
}

{
  "title": "Dashboard Notes",
  "description": "This dashboard shows real-time sales metrics updated every 5 minutes.",
  "type": "text",
  "subtype": "text_block",
  "configs": {
    "content": "**Important**: Data is cached for 5 minutes."
  }
}

export async function createWidget(
  data: Prisma.WidgetCreateInput
) {
  // Create widget
  const widget = await prisma.widget.create({ data })
  
  // Add to project's ordered widget list
  await prisma.project.update({
    where: { id: widget.projectId },
    data: {
      orderedWidgetIds: { push: widget.id },
    },
  })
  
  return widget
}

export async function updateWidget(
  data: Prisma.WidgetUpdateInput,
  widgetId: string
) {
  return await prisma.widget.update({
    where: { id: widgetId },
    data,
  })
}

export async function deleteWidget(widgetId: string) {
  const widget = await prisma.widget.findUnique({
    where: { id: widgetId },
  })
  
  // Delete widget
  await prisma.widget.delete({ where: { id: widgetId } })
  
  // Remove from project's ordered list
  await prisma.project.update({
    where: { id: widget.projectId },
    data: {
      orderedWidgetIds: {
        set: orderedWidgetIds.filter((id) => id !== widgetId),
      },
    },
  })
}

export async function UpsertWidget(data: unknown, widgetId?: string) {
  if (widgetId) {
    return await updateWidget(data, widgetId)
  } else {
    return await createWidget(data)
  }
}

await prisma.project.update({
  where: { id: projectId },
  data: {
    orderedWidgetIds: newOrderArray,
  },
})

const { data, error, mutate } = useSWR(
  `/api/projects/${projectId}/table/${tableName}`,
  fetcher,
  {
    revalidateOnFocus: true,
    revalidateOnReconnect: true,
  }
)

{!isOnline && (
  <WidgetError
    type="offline"
    title={t("connection_lost")}
    description={t("check_internet_connection")}
  />
)}

{isOnline && loading && (
  <WidgetError
    type="loading"
    title={t("loading_table_data")}
    description={t("please_wait_while_loading")}
  />
)}

{isOnline && error && (
  <WidgetError
    type="error"
    title={t("unable_to_load_data")}
    description={t("data_fetch_failed_check_connection")}
  />
)}

const isPublicDashboard =
  projectData?.isPublic && pathname?.startsWith("/public/")

if (!isPublicDashboard) {
  return <WidgetSettingsMenu widget={widget} />
}