@wix/ditto-codegen-public 1.0.179 → 1.0.180

package/dist/examples-apps/survey-manager/src/dashboard/pages/apis.ts

@@ -0,0 +1,116 @@
+import { items } from '@wix/data';
+import type { SurveyQuestion, SurveyResponse, QuestionStats } from './types';
+
+/**
+ * Creates a new survey question
+ */
+export async function createQuestion(
+  questionData: Omit<SurveyQuestion, '_id' | '_createdDate' | '_updatedDate' | '_owner'>
+): Promise<SurveyQuestion> {
+  try {
+    const result = await items.insert('survey-questions', questionData);
+    return result as SurveyQuestion;
+  } catch (error) {
+    console.error('Error creating survey question:', error);
+    throw new Error(
+      error instanceof Error ? error.message : 'Failed to create survey question'
+    );
+  }
+}
+
+/**
+ * Retrieves all survey questions
+ */
+export async function getAllQuestions(): Promise<items.WixDataResult<SurveyQuestion>> {
+  try {
+    const result = await items.query('survey-questions')
+      .descending('_createdDate')
+      .find();
+    return result as items.WixDataResult<SurveyQuestion>;
+  } catch (error) {
+    console.error('Error fetching survey questions:', error);
+    throw new Error(
+      error instanceof Error ? error.message : 'Failed to fetch survey questions'
+    );
+  }
+}
+
+/**
+ * Updates an existing survey question
+ */
+export async function updateQuestion(questionData: SurveyQuestion): Promise<SurveyQuestion> {
+  try {
+    if (!questionData._id) {
+      throw new Error('Question ID is required for update');
+    }
+    const result = await items.update('survey-questions', questionData);
+    return result as SurveyQuestion;
+  } catch (error) {
+    console.error('Error updating survey question:', error);
+    throw new Error(
+      error instanceof Error ? error.message : 'Failed to update survey question'
+    );
+  }
+}
+
+/**
+ * Deletes a survey question by ID
+ */
+export async function deleteQuestion(questionId: string): Promise<SurveyQuestion> {
+  try {
+    if (!questionId) {
+      throw new Error('Question ID is required for deletion');
+    }
+    const result = await items.remove('survey-questions', questionId);
+    return result as SurveyQuestion;
+  } catch (error) {
+    console.error('Error deleting survey question:', error);
+    throw new Error(
+      error instanceof Error ? error.message : 'Failed to delete survey question'
+    );
+  }
+}
+
+/**
+ * Gets statistics for a specific question
+ */
+export async function getQuestionStats(questionId: string): Promise<QuestionStats> {
+  try {
+    const responses = await items.query('survey-responses')
+      .eq('questionId', questionId)
+      .find();
+
+    const responseItems = responses.items as SurveyResponse[];
+    const totalResponses = responseItems.length;
+
+    if (totalResponses === 0) {
+      return {
+        totalResponses: 0,
+        averageRating: 0,
+        ratingDistribution: {}
+      };
+    }
+
+    const ratings = responseItems.map(r => r.rating);
+    const averageRating = ratings.reduce((sum, rating) => sum + rating, 0) / totalResponses;
+
+    const ratingDistribution: { [rating: number]: number } = {};
+    ratings.forEach(rating => {
+      ratingDistribution[rating] = (ratingDistribution[rating] || 0) + 1;
+    });
+
+    return {
+      totalResponses,
+      averageRating: Math.round(averageRating * 100) / 100,
+      ratingDistribution
+    };
+  } catch (error) {
+    console.error('Error fetching question stats:', error);
+    return {
+      totalResponses: 0,
+      averageRating: 0,
+      ratingDistribution: {}
+    };
+  }
+}
+

package/dist/examples-apps/survey-manager/src/dashboard/pages/components/PageLoader.tsx

@@ -0,0 +1,23 @@
+import React, { type FC } from 'react';
+import { Page, WixDesignSystemProvider, Box, Loader } from '@wix/design-system';
+
+interface PageLoaderProps {
+  title: string;
+  message?: string;
+}
+
+export const PageLoader: FC<PageLoaderProps> = ({ title, message = 'Loading...' }) => {
+  return (
+    <WixDesignSystemProvider features={{ newColorsBranding: true }}>
+      <Page height="100vh">
+        <Page.Header title={title} />
+        <Page.Content>
+          <Box align="center" verticalAlign="middle" height="50vh">
+            <Loader text={message} />
+          </Box>
+        </Page.Content>
+      </Page>
+    </WixDesignSystemProvider>
+  );
+};
+

package/dist/examples-apps/survey-manager/src/dashboard/pages/components/QuestionModal.tsx

@@ -0,0 +1,84 @@
+import React, { type FC } from 'react';
+import {
+  Modal,
+  CustomModalLayout,
+  FormField,
+  Input,
+  ToggleSwitch,
+  Layout,
+  Cell,
+} from '@wix/design-system';
+import type { SurveyQuestion, QuestionFormData } from '../types';
+
+interface QuestionModalProps {
+  isOpen: boolean;
+  editingQuestion: SurveyQuestion | null;
+  formData: QuestionFormData;
+  onFormChange: (data: QuestionFormData) => void;
+  onSave: () => void;
+  onClose: () => void;
+}
+
+export const QuestionModal: FC<QuestionModalProps> = ({
+  isOpen,
+  editingQuestion,
+  formData,
+  onFormChange,
+  onSave,
+  onClose,
+}) => {
+  return (
+    <Modal isOpen={isOpen} onRequestClose={onClose}>
+      <CustomModalLayout
+        primaryButtonText="Save"
+        secondaryButtonText="Cancel"
+        onCloseButtonClick={onClose}
+        primaryButtonOnClick={onSave}
+        secondaryButtonOnClick={onClose}
+        title={`${editingQuestion ? 'Edit' : 'Add'} Survey Question`}
+        content={
+          <Layout gap="24px">
+            <Cell span={12}>
+              <FormField label="Question Text" required>
+                <Input
+                  value={formData.questionText}
+                  onChange={(e) =>
+                    onFormChange({ ...formData, questionText: e.target.value })
+                  }
+                  placeholder="How would you rate our service?"
+                />
+              </FormField>
+            </Cell>
+            <Cell span={6}>
+              <FormField label="Maximum Rating">
+                <Input
+                  type="number"
+                  value={formData.maxRating.toString()}
+                  onChange={(e) =>
+                    onFormChange({
+                      ...formData,
+                      maxRating: Math.max(1, Math.min(10, Number(e.target.value))),
+                    })
+                  }
+                  min={1}
+                  max={10}
+                />
+              </FormField>
+            </Cell>
+            <Cell span={6}>
+              <FormField label="Active" labelPlacement="right" stretchContent={false}>
+                <ToggleSwitch
+                  checked={formData.isActive}
+                  onChange={() =>
+                    onFormChange({ ...formData, isActive: !formData.isActive })
+                  }
+                />
+              </FormField>
+            </Cell>
+          </Layout>
+        }
+      />
+    </Modal>
+  );
+};
+

package/dist/examples-apps/survey-manager/src/dashboard/pages/components/QuestionsTable.tsx

@@ -0,0 +1,139 @@
+import React, { type FC } from 'react';
+import {
+  Table,
+  TableActionCell,
+  TableToolbar,
+  Badge,
+  Box,
+  Text,
+} from '@wix/design-system';
+import * as Icons from '@wix/wix-ui-icons-common';
+import type { SurveyQuestion, QuestionStats } from '../types';
+
+interface QuestionsTableProps {
+  questions: SurveyQuestion[];
+  questionStats: Record<string, QuestionStats>;
+  onEdit: (question: SurveyQuestion) => void;
+  onDelete: (questionId: string, questionText: string) => void;
+  onToggleStatus: (question: SurveyQuestion) => void;
+}
+
+export const QuestionsTable: FC<QuestionsTableProps> = ({
+  questions,
+  questionStats,
+  onEdit,
+  onDelete,
+  onToggleStatus,
+}) => {
+  const columns = [
+    {
+      title: 'Question',
+      render: (question: SurveyQuestion) => (
+        <Box direction="vertical" gap="3px">
+          <Text size="medium" weight="normal">
+            {question.questionText}
+          </Text>
+          <Box gap="6px">
+            <Badge
+              skin={question.isActive ? 'success' : 'neutral'}
+              size="small"
+            >
+              {question.isActive ? 'Active' : 'Inactive'}
+            </Badge>
+            <Text size="tiny" secondary>
+              Max Rating: {question.maxRating}
+            </Text>
+          </Box>
+        </Box>
+      ),
+      width: 'auto',
+    },
+    {
+      title: 'Responses',
+      render: (question: SurveyQuestion) => {
+        const stats = question._id ? questionStats[question._id] : null;
+        return (
+          <Box direction="vertical" gap="3px">
+            <Text size="medium" weight="bold">
+              {stats?.totalResponses || 0}
+            </Text>
+            <Text size="tiny" secondary>
+              Total responses
+            </Text>
+          </Box>
+        );
+      },
+      width: '120px',
+    },
+    {
+      title: 'Average Rating',
+      render: (question: SurveyQuestion) => {
+        const stats = question._id ? questionStats[question._id] : null;
+        return (
+          <Box direction="vertical" gap="3px">
+            <Text size="medium" weight="bold">
+              {stats?.averageRating || 0}
+            </Text>
+            <Text size="tiny" secondary>
+              out of {question.maxRating}
+            </Text>
+          </Box>
+        );
+      },
+      width: '120px',
+    },
+    {
+      title: 'Created',
+      render: (question: SurveyQuestion) => (
+        <Text size="small">
+          {question._createdDate
+            ? new Date(question._createdDate).toLocaleDateString()
+            : ''}
+        </Text>
+      ),
+      width: '100px',
+    },
+    {
+      title: 'Actions',
+      render: (question: SurveyQuestion) => (
+        <TableActionCell
+          primaryAction={{
+            text: 'Edit',
+            onClick: () => onEdit(question),
+          }}
+          secondaryActions={[
+            {
+              text: question.isActive ? 'Deactivate' : 'Activate',
+              icon: question.isActive ? <Icons.Hidden /> : <Icons.Visible />,
+              onClick: () => onToggleStatus(question),
+            },
+            {
+              text: 'Delete',
+              icon: <Icons.Delete />,
+              onClick: () => {
+                if (question._id) {
+                  onDelete(question._id, question.questionText);
+                }
+              },
+            },
+          ]}
+        />
+      ),
+      width: '120px',
+    },
+  ];
+
+  return (
+    <Table data={questions} columns={columns}>
+      <TableToolbar>
+        <TableToolbar.ItemGroup position="start">
+          <TableToolbar.Item>
+            <TableToolbar.Title>Survey Questions</TableToolbar.Title>
+          </TableToolbar.Item>
+        </TableToolbar.ItemGroup>
+      </TableToolbar>
+      <Table.Content />
+    </Table>
+  );
+};
+

package/dist/examples-apps/survey-manager/src/dashboard/pages/components/SurveyPageLayout.tsx

@@ -0,0 +1,99 @@
+import React, { type FC } from 'react';
+import {
+  Button,
+  Page,
+  WixDesignSystemProvider,
+  EmptyState,
+} from '@wix/design-system';
+import * as Icons from '@wix/wix-ui-icons-common';
+
+import type { SurveyQuestion, QuestionStats, QuestionFormData } from '../types';
+import { SurveyStats } from './SurveyStats';
+import { QuestionModal } from './QuestionModal';
+import { QuestionsTable } from './QuestionsTable';
+
+interface SurveyPageLayoutProps {
+  questions: SurveyQuestion[];
+  questionStats: Record<string, QuestionStats>;
+  activeQuestions: number;
+  totalResponses: number;
+  isModalOpen: boolean;
+  editingQuestion: SurveyQuestion | null;
+  formData: QuestionFormData;
+  onOpenModal: (question?: SurveyQuestion) => void;
+  onCloseModal: () => void;
+  onFormChange: (data: QuestionFormData) => void;
+  onSave: () => void;
+  onDelete: (questionId: string, questionText: string) => void;
+  onToggleStatus: (question: SurveyQuestion) => void;
+}
+
+export const SurveyPageLayout: FC<SurveyPageLayoutProps> = ({
+  questions,
+  questionStats,
+  activeQuestions,
+  totalResponses,
+  isModalOpen,
+  editingQuestion,
+  formData,
+  onOpenModal,
+  onCloseModal,
+  onFormChange,
+  onSave,
+  onDelete,
+  onToggleStatus,
+}) => {
+  return (
+    <WixDesignSystemProvider features={{ newColorsBranding: true }}>
+      <Page height="100vh">
+        <Page.Header
+          title="Survey Manager"
+          subtitle="Create and manage rating survey questions, view aggregated results"
+          actionsBar={
+            <Button onClick={() => onOpenModal()} prefixIcon={<Icons.Add />}>
+              Add Question
+            </Button>
+          }
+        />
+        <Page.Content>
+          {questions.length === 0 ? (
+            <EmptyState
+              title="No survey questions yet"
+              subtitle="Create your first rating question to start collecting feedback from visitors"
+              skin="page"
+            >
+              <Button onClick={() => onOpenModal()} prefixIcon={<Icons.Add />}>
+                Create First Question
+              </Button>
+            </EmptyState>
+          ) : (
+            <>
+              <SurveyStats
+                totalQuestions={questions.length}
+                activeQuestions={activeQuestions}
+                totalResponses={totalResponses}
+              />
+              <QuestionsTable
+                questions={questions}
+                questionStats={questionStats}
+                onEdit={onOpenModal}
+                onDelete={onDelete}
+                onToggleStatus={onToggleStatus}
+              />
+            </>
+          )}
+        </Page.Content>
+      </Page>
+
+      <QuestionModal
+        isOpen={isModalOpen}
+        editingQuestion={editingQuestion}
+        formData={formData}
+        onFormChange={onFormChange}
+        onSave={onSave}
+        onClose={onCloseModal}
+      />
+    </WixDesignSystemProvider>
+  );
+};
+

package/dist/examples-apps/survey-manager/src/dashboard/pages/components/SurveyStats.tsx

@@ -0,0 +1,50 @@
+import React, { type FC } from 'react';
+import { Box, Card, Heading, Text } from '@wix/design-system';
+
+interface SurveyStatsProps {
+  totalQuestions: number;
+  activeQuestions: number;
+  totalResponses: number;
+}
+
+export const SurveyStats: FC<SurveyStatsProps> = ({
+  totalQuestions,
+  activeQuestions,
+  totalResponses,
+}) => {
+  return (
+    <Box gap="24px" marginBottom="24px">
+      <Card>
+        <Card.Content>
+          <Box direction="vertical" gap="6px">
+            <Heading size="small">Total Questions</Heading>
+            <Text size="medium" weight="bold">
+              {totalQuestions}
+            </Text>
+          </Box>
+        </Card.Content>
+      </Card>
+      <Card>
+        <Card.Content>
+          <Box direction="vertical" gap="6px">
+            <Heading size="small">Active Questions</Heading>
+            <Text size="medium" weight="bold">
+              {activeQuestions}
+            </Text>
+          </Box>
+        </Card.Content>
+      </Card>
+      <Card>
+        <Card.Content>
+          <Box direction="vertical" gap="6px">
+            <Heading size="small">Total Responses</Heading>
+            <Text size="medium" weight="bold">
+              {totalResponses}
+            </Text>
+          </Box>
+        </Card.Content>
+      </Card>
+    </Box>
+  );
+};
+

package/dist/examples-apps/survey-manager/src/dashboard/pages/page.tsx

@@ -1,184 +1,39 @@
 import React, { useState, useEffect, type FC } from 'react';
 import { dashboard } from '@wix/dashboard';
-import { items } from '@wix/data';
-import {
-  Button,
-  Page,
-  WixDesignSystemProvider,
-  Table,
-  TableActionCell,
-  TableToolbar,
-  Modal,
-  CustomModalLayout,
-  FormField,
-  Input,
-  ToggleSwitch,
-  Layout,
-  Cell,
-  Badge,
-  Box,
-  Text,
-  EmptyState,
-  Loader,
-  Card,
-  Heading,
-} from '@wix/design-system';
 import '@wix/design-system/styles.global.css';
-import * as Icons from '@wix/wix-ui-icons-common';
-
-export type WixDataItem = items.WixDataItem;
-
-// Type definitions based on the CMS collections
-interface SurveyQuestion extends WixDataItem {
-  questionText: string;
-  maxRating: number;
-  isActive: boolean;
-}
-
-interface SurveyResponse extends WixDataItem {
-  questionId: string;
-  rating: number;
-  submittedAt: Date;
-}
-
-interface QuestionStats {
-  totalResponses: number;
-  averageRating: number;
-  ratingDistribution: { [rating: number]: number };
-}
-
-/**
- * Creates a new survey question
- */
-async function createQuestion(questionData: Omit<SurveyQuestion, '_id' | '_createdDate' | '_updatedDate' | '_owner'>): Promise<SurveyQuestion> {
-  try {
-    const result = await items.insert('survey-questions', questionData);
-    return result as SurveyQuestion;
-  } catch (error) {
-    console.error('Error creating survey question:', error);
-    throw new Error(
-      error instanceof Error ? error.message : 'Failed to create survey question'
-    );
-  }
-}
-
-/**
- * Retrieves all survey questions
- */
-async function getAllQuestions(): Promise<items.WixDataResult<SurveyQuestion>> {
-  try {
-    const result = await items.query('survey-questions')
-      .descending('_createdDate')
-      .find();
-    return result as items.WixDataResult<SurveyQuestion>;
-  } catch (error) {
-    console.error('Error fetching survey questions:', error);
-    throw new Error(
-      error instanceof Error ? error.message : 'Failed to fetch survey questions'
-    );
-  }
-}
 
-/**
- * Updates an existing survey question
- */
-async function updateQuestion(questionData: SurveyQuestion): Promise<SurveyQuestion> {
-  try {
-    if (!questionData._id) {
-      throw new Error('Question ID is required for update');
-    }
-    const result = await items.update('survey-questions', questionData);
-    return result as SurveyQuestion;
-  } catch (error) {
-    console.error('Error updating survey question:', error);
-    throw new Error(
-      error instanceof Error ? error.message : 'Failed to update survey question'
-    );
-  }
-}
-
-/**
- * Deletes a survey question by ID
- */
-async function deleteQuestion(questionId: string): Promise<SurveyQuestion> {
-  try {
-    if (!questionId) {
-      throw new Error('Question ID is required for deletion');
-    }
-    const result = await items.remove('survey-questions', questionId);
-    return result as SurveyQuestion;
-  } catch (error) {
-    console.error('Error deleting survey question:', error);
-    throw new Error(
-      error instanceof Error ? error.message : 'Failed to delete survey question'
-    );
-  }
-}
-
-/**
- * Gets statistics for a specific question
- */
-async function getQuestionStats(questionId: string): Promise<QuestionStats> {
-  try {
-    const responses = await items.query('survey-responses')
-      .eq('questionId', questionId)
-      .find();
-    
-    const responseItems = responses.items as SurveyResponse[];
-    const totalResponses = responseItems.length;
-    
-    if (totalResponses === 0) {
-      return {
-        totalResponses: 0,
-        averageRating: 0,
-        ratingDistribution: {}
-      };
-    }
-    
-    const ratings = responseItems.map(r => r.rating);
-    const averageRating = ratings.reduce((sum, rating) => sum + rating, 0) / totalResponses;
-    
-    const ratingDistribution: { [rating: number]: number } = {};
-    ratings.forEach(rating => {
-      ratingDistribution[rating] = (ratingDistribution[rating] || 0) + 1;
-    });
-    
-    return {
-      totalResponses,
-      averageRating: Math.round(averageRating * 100) / 100,
-      ratingDistribution
-    };
-  } catch (error) {
-    console.error('Error fetching question stats:', error);
-    return {
-      totalResponses: 0,
-      averageRating: 0,
-      ratingDistribution: {}
-    };
-  }
-}
+import type { SurveyQuestion, QuestionStats, QuestionFormData } from './types';
+import {
+  createQuestion,
+  getAllQuestions,
+  updateQuestion,
+  deleteQuestion,
+  getQuestionStats,
+} from './apis';
+import { PageLoader } from './components/PageLoader';
+import { SurveyPageLayout } from './components/SurveyPageLayout';
+
+const DEFAULT_FORM_DATA: QuestionFormData = {
+  questionText: '',
+  maxRating: 5,
+  isActive: true,
+};
 
 const SurveyManager: FC = () => {
   const [questions, setQuestions] = useState<SurveyQuestion[]>([]);
-  const [questionStats, setQuestionStats] = useState<{ [questionId: string]: QuestionStats }>({});
+  const [questionStats, setQuestionStats] = useState<Record<string, QuestionStats>>({});
   const [loading, setLoading] = useState(true);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [editingQuestion, setEditingQuestion] = useState<SurveyQuestion | null>(null);
-  const [formData, setFormData] = useState({
-    questionText: '',
-    maxRating: 5,
-    isActive: true
-  });
+  const [formData, setFormData] = useState<QuestionFormData>(DEFAULT_FORM_DATA);
 
-  // Load questions and their stats
   const loadQuestions = async () => {
     try {
       setLoading(true);
       const result = await getAllQuestions();
       setQuestions(result.items);
-      
-      // Load stats for each question
-      const stats: { [questionId: string]: QuestionStats } = {};
+
+      const stats: Record<string, QuestionStats> = {};
       for (const question of result.items) {
         if (question._id) {
           stats[question._id] = await getQuestionStats(question._id);
@@ -188,7 +43,7 @@ const SurveyManager: FC = () => {
     } catch (error) {
       dashboard.showToast({
         message: 'Failed to load survey questions',
-        type: 'error'
+        type: 'error',
       });
     } finally {
       setLoading(false);
@@ -201,76 +56,53 @@ const SurveyManager: FC = () => {
 
   const openModal = (question?: SurveyQuestion) => {
     setEditingQuestion(question || null);
-    
-    if (question) {
-      setFormData({
-        questionText: question.questionText,
-        maxRating: question.maxRating,
-        isActive: question.isActive
-      });
-    } else {
-      setFormData({
-        questionText: '',
-        maxRating: 5,
-        isActive: true
-      });
-    }
-    
+    setFormData(
+      question
+        ? {
+            questionText: question.questionText,
+            maxRating: question.maxRating,
+            isActive: question.isActive,
+          }
+        : DEFAULT_FORM_DATA
+    );
     setIsModalOpen(true);
   };
 
   const closeModal = () => {
     setIsModalOpen(false);
     setEditingQuestion(null);
-    setFormData({
-      questionText: '',
-      maxRating: 5,
-      isActive: true
-    });
+    setFormData(DEFAULT_FORM_DATA);
   };
 
   const handleSave = async () => {
-    try {
-      if (!formData.questionText.trim()) {
-        dashboard.showToast({
-          message: 'Question text is required',
-          type: 'error'
-        });
-        return;
-      }
+    if (!formData.questionText.trim()) {
+      dashboard.showToast({
+        message: 'Question text is required',
+        type: 'error',
+      });
+      return;
+    }
 
+    try {
       if (editingQuestion) {
-        // Update existing question
-        const updatedQuestion: SurveyQuestion = {
-          ...editingQuestion,
-          questionText: formData.questionText,
-          maxRating: formData.maxRating,
-          isActive: formData.isActive
-        };
-        await updateQuestion(updatedQuestion);
+        await updateQuestion({ ...editingQuestion, ...formData });
         dashboard.showToast({
           message: 'Question updated successfully',
-          type: 'success'
+          type: 'success',
         });
       } else {
-        // Create new question
-        await createQuestion({
-          questionText: formData.questionText,
-          maxRating: formData.maxRating,
-          isActive: formData.isActive
-        });
+        await createQuestion(formData);
         dashboard.showToast({
           message: 'Question created successfully',
-          type: 'success'
+          type: 'success',
         });
       }
-      
       closeModal();
       loadQuestions();
     } catch (error) {
       dashboard.showToast({
         message: editingQuestion ? 'Failed to update question' : 'Failed to create question',
-        type: 'error'
+        type: 'error',
       });
     }
   };
@@ -280,272 +112,60 @@ const SurveyManager: FC = () => {
       await deleteQuestion(questionId);
       dashboard.showToast({
         message: `"${questionText}" deleted successfully`,
-        type: 'success'
+        type: 'success',
       });
       loadQuestions();
     } catch (error) {
       dashboard.showToast({
         message: 'Failed to delete question',
-        type: 'error'
+        type: 'error',
       });
     }
   };
 
-  const toggleQuestionStatus = async (question: SurveyQuestion) => {
+  const handleToggleStatus = async (question: SurveyQuestion) => {
     try {
-      const updatedQuestion: SurveyQuestion = {
-        ...question,
-        isActive: !question.isActive
-      };
-      await updateQuestion(updatedQuestion);
+      await updateQuestion({ ...question, isActive: !question.isActive });
       dashboard.showToast({
-        message: `Question ${updatedQuestion.isActive ? 'activated' : 'deactivated'}`,
-        type: 'success'
+        message: `Question ${!question.isActive ? 'activated' : 'deactivated'}`,
+        type: 'success',
       });
       loadQuestions();
     } catch (error) {
       dashboard.showToast({
         message: 'Failed to update question status',
-        type: 'error'
+        type: 'error',
       });
     }
   };
 
-  const columns = [
-    {
-      title: 'Question',
-      render: (question: SurveyQuestion) => (
-        <Box direction="vertical" gap="3px">
-          <Text size="medium" weight="normal">
-            {question.questionText}
-          </Text>
-          <Box gap="6px">
-            <Badge 
-              skin={question.isActive ? 'success' : 'neutral'} 
-              size="small"
-            >
-              {question.isActive ? 'Active' : 'Inactive'}
-            </Badge>
-            <Text size="tiny" secondary>
-              Max Rating: {question.maxRating}
-            </Text>
-          </Box>
-        </Box>
-      ),
-      width: 'auto'
-    },
-    {
-      title: 'Responses',
-      render: (question: SurveyQuestion) => {
-        const stats = question._id ? questionStats[question._id] : null;
-        return (
-          <Box direction="vertical" gap="3px">
-            <Text size="medium" weight="bold">
-              {stats?.totalResponses || 0}
-            </Text>
-            <Text size="tiny" secondary>
-              Total responses
-            </Text>
-          </Box>
-        );
-      },
-      width: '120px'
-    },
-    {
-      title: 'Average Rating',
-      render: (question: SurveyQuestion) => {
-        const stats = question._id ? questionStats[question._id] : null;
-        return (
-          <Box direction="vertical" gap="3px">
-            <Text size="medium" weight="bold">
-              {stats?.averageRating || 0}
-            </Text>
-            <Text size="tiny" secondary>
-              out of {question.maxRating}
-            </Text>
-          </Box>
-        );
-      },
-      width: '120px'
-    },
-    {
-      title: 'Created',
-      render: (question: SurveyQuestion) => (
-        <Text size="small">
-          {question._createdDate ? new Date(question._createdDate).toLocaleDateString() : ''}
-        </Text>
-      ),
-      width: '100px'
-    },
-    {
-      title: 'Actions',
-      render: (question: SurveyQuestion) => (
-        <TableActionCell
-          primaryAction={{
-            text: 'Edit',
-            onClick: () => openModal(question)
-          }}
-          secondaryActions={[
-            {
-              text: question.isActive ? 'Deactivate' : 'Activate',
-              icon: question.isActive ? <Icons.Hidden /> : <Icons.Visible />,
-              onClick: () => toggleQuestionStatus(question)
-            },
-            {
-              text: 'Delete',
-              icon: <Icons.Delete />,
-              onClick: () => {
-                if (question._id) {
-                  handleDelete(question._id, question.questionText);
-                }
-              }
-            }
-          ]}
-        />
-      ),
-      width: '120px'
-    }
-  ];
+  const totalResponses = Object.values(questionStats).reduce(
+    (sum, stats) => sum + stats.totalResponses,
+    0
+  );
+  const activeQuestions = questions.filter((q) => q.isActive).length;
 
   if (loading) {
-    return (
-      <WixDesignSystemProvider features={{ newColorsBranding: true }}>
-        <Page height="100vh">
-          <Page.Header title="Survey Manager" />
-          <Page.Content>
-            <Box align="center" verticalAlign="middle" height="50vh">
-              <Loader text="Loading survey questions..." />
-            </Box>
-          </Page.Content>
-        </Page>
-      </WixDesignSystemProvider>
-    );
+    return <PageLoader title="Survey Manager" message="Loading survey questions..." />;
   }
 
   return (
-    <WixDesignSystemProvider features={{ newColorsBranding: true }}>
-      <Page height="100vh">
-        <Page.Header
-          title="Survey Manager"
-          subtitle="Create and manage rating survey questions, view aggregated results"
-          actionsBar={
-            <Button
-              onClick={() => openModal()}
-              prefixIcon={<Icons.Add />}
-            >
-              Add Question
-            </Button>
-          }
-        />
-        <Page.Content>
-          {questions.length === 0 ? (
-            <EmptyState
-              title="No survey questions yet"
-              subtitle="Create your first rating question to start collecting feedback from visitors"
-              skin="page"
-            >
-              <Button
-                onClick={() => openModal()}
-                prefixIcon={<Icons.Add />}
-              >
-                Create First Question
-              </Button>
-            </EmptyState>
-          ) : (
-            <>
-              {/* Summary Cards */}
-              <Box gap="24px" marginBottom="24px">
-                <Card>
-                  <Card.Content>
-                    <Box direction="vertical" gap="6px">
-                      <Heading size="small">Total Questions</Heading>
-                      <Text size="medium" weight="bold">{questions.length}</Text>
-                    </Box>
-                  </Card.Content>
-                </Card>
-                <Card>
-                  <Card.Content>
-                    <Box direction="vertical" gap="6px">
-                      <Heading size="small">Active Questions</Heading>
-                      <Text size="medium" weight="bold">
-                        {questions.filter(q => q.isActive).length}
-                      </Text>
-                    </Box>
-                  </Card.Content>
-                </Card>
-                <Card>
-                  <Card.Content>
-                    <Box direction="vertical" gap="6px">
-                      <Heading size="small">Total Responses</Heading>
-                      <Text size="medium" weight="bold">
-                        {Object.values(questionStats).reduce((sum, stats) => sum + stats.totalResponses, 0)}
-                      </Text>
-                    </Box>
-                  </Card.Content>
-                </Card>
-              </Box>
-
-              {/* Questions Table */}
-              <Table data={questions} columns={columns}>
-                <TableToolbar>
-                  <TableToolbar.ItemGroup position="start">
-                    <TableToolbar.Item>
-                      <TableToolbar.Title>Survey Questions</TableToolbar.Title>
-                    </TableToolbar.Item>
-                  </TableToolbar.ItemGroup>
-                </TableToolbar>
-                <Table.Content />
-              </Table>
-            </>
-          )}
-        </Page.Content>
-      </Page>
-
-      {/* Add/Edit Question Modal */}
-      <Modal isOpen={isModalOpen} onRequestClose={closeModal}>
-        <CustomModalLayout
-          primaryButtonText="Save"
-          secondaryButtonText="Cancel"
-          onCloseButtonClick={closeModal}
-          primaryButtonOnClick={handleSave}
-          secondaryButtonOnClick={closeModal}
-          title={`${editingQuestion ? 'Edit' : 'Add'} Survey Question`}
-          content={
-            <Layout gap="24px">
-              <Cell span={12}>
-                <FormField label="Question Text" required>
-                  <Input
-                    value={formData.questionText}
-                    onChange={(e) => setFormData({ ...formData, questionText: e.target.value })}
-                    placeholder="How would you rate our service?"
-                  />
-                </FormField>
-              </Cell>
-              <Cell span={6}>
-                <FormField label="Maximum Rating">
-                  <Input
-                    type="number"
-                    value={formData.maxRating.toString()}
-                    onChange={(e) => setFormData({ ...formData, maxRating: Math.max(1, Math.min(10, Number(e.target.value))) })}
-                    min={1}
-                    max={10}
-                  />
-                </FormField>
-              </Cell>
-              <Cell span={6}>
-                <FormField label="Active" labelPlacement="right" stretchContent={false}>
-                  <ToggleSwitch
-                    checked={formData.isActive}
-                    onChange={() => setFormData({ ...formData, isActive: !formData.isActive })}
-                  />
-                </FormField>
-              </Cell>
-            </Layout>
-          }
-        />
-      </Modal>
-    </WixDesignSystemProvider>
+    <SurveyPageLayout
+      questions={questions}
+      questionStats={questionStats}
+      activeQuestions={activeQuestions}
+      totalResponses={totalResponses}
+      isModalOpen={isModalOpen}
+      editingQuestion={editingQuestion}
+      formData={formData}
+      onOpenModal={openModal}
+      onCloseModal={closeModal}
+      onFormChange={setFormData}
+      onSave={handleSave}
+      onDelete={handleDelete}
+      onToggleStatus={handleToggleStatus}
+    />
   );
 };
 
-export default SurveyManager;
+export default SurveyManager;

package/dist/examples-apps/survey-manager/src/dashboard/pages/types.ts

@@ -0,0 +1,28 @@
+import type { items } from '@wix/data';
+
+export type WixDataItem = items.WixDataItem;
+
+export interface SurveyQuestion extends WixDataItem {
+  questionText: string;
+  maxRating: number;
+  isActive: boolean;
+}
+
+export interface SurveyResponse extends WixDataItem {
+  questionId: string;
+  rating: number;
+  submittedAt: Date;
+}
+
+export interface QuestionStats {
+  totalResponses: number;
+  averageRating: number;
+  ratingDistribution: { [rating: number]: number };
+}
+
+export interface QuestionFormData {
+  questionText: string;
+  maxRating: number;
+  isActive: boolean;
+}
+

package/dist/out.js

@@ -64620,7 +64620,14 @@ var require_load_examples = __commonJS({
         description: "A dashboard app that allows administrators to create and manage rating (1-5) survey questions and view aggregated results",
         files: {
           [types_1.ExtensionType.DASHBOARD_PAGE]: [
-            "survey-manager/src/dashboard/pages/page.tsx"
+            "survey-manager/src/dashboard/pages/page.tsx",
+            "survey-manager/src/dashboard/pages/components/PageLoader.tsx",
+            "survey-manager/src/dashboard/pages/components/QuestionModal.tsx",
+            "survey-manager/src/dashboard/pages/components/QuestionsTable.tsx",
+            "survey-manager/src/dashboard/pages/components/SurveyPageLayout.tsx",
+            "survey-manager/src/dashboard/pages/components/SurveyStats.tsx",
+            "survey-manager/src/dashboard/pages/apis.ts",
+            "survey-manager/src/dashboard/pages/types.ts"
           ]
         }
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/ditto-codegen-public",
-  "version": "1.0.179",
+  "version": "1.0.180",
   "description": "AI-powered Wix CLI app generator - standalone executable",
   "scripts": {
     "build": "node build.mjs",
@@ -24,5 +24,5 @@
     "@wix/ditto-codegen": "1.0.0",
     "esbuild": "^0.25.9"
   },
-  "falconPackageHash": "600908bee71034cf80b10a10f6bcd2217c1f7b4f901a769ef4c58757"
+  "falconPackageHash": "e8dba8e74db8a8a39dce94ec11ac6c277c9fa845178e72670a580574"
 }

package/dist/examples-apps/survey-manager/src/dashboard/pages/wix_logo.svg

@@ -1,18 +0,0 @@
-<svg width="166" height="64" viewBox="0 0 166 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g clip-path="url(#clip0_14809_9463)">
-    <path
-      d="M165.304 0H156.173C153.64 0 151.273 1.25433 149.85 3.35199L137.639 21.3662C137.313 21.844 136.608 21.844 136.283 21.3662L124.071 3.35199C122.651 1.25433 120.281 0 117.748 0H108.617L130.371 32.0894L108.737 64H117.868C120.401 64 122.769 62.7457 124.192 60.648L136.283 42.8126C136.608 42.3349 137.313 42.3349 137.639 42.8126L149.73 60.648C151.15 62.7457 153.52 64 156.053 64H165.184L143.551 32.0894L165.304 0Z"
-      fill="black" />
-    <path
-      d="M89.8281 6.54652V64H94.1922C97.8088 64 100.74 61.0697 100.74 57.4535V0H96.3755C92.7588 0 89.8281 2.93032 89.8281 6.54652Z"
-      fill="black" />
-    <path
-      d="M81.8276 0H77.944C73.6681 0 69.9633 2.95701 69.0158 7.12564L60.3278 45.3185L52.7234 9.66632C51.3168 3.0771 44.5559 -1.36641 37.6375 0.544431C33.2307 1.76139 29.9637 5.48434 29.0108 9.95455L21.4839 45.2705L12.8118 7.12831C11.8616 2.95968 8.15687 0 3.88092 0H0L14.5548 63.9973H20.0692C25.0738 63.9973 29.3978 60.4986 30.4415 55.604L39.7461 11.9401C39.8608 11.3984 40.3466 11.006 40.8991 11.006C41.4516 11.006 41.9374 11.3984 42.0522 11.9401L51.3648 55.6067C52.4084 60.5012 56.7324 63.9973 61.7371 63.9973H67.2702L81.8276 0Z"
-      fill="black" />
-  </g>
-  <defs>
-    <clipPath id="clip0_14809_9463">
-      <rect width="165.305" height="64" fill="white" />
-    </clipPath>
-  </defs>
-</svg>

package/dist/examples-apps/survey-manager/src/extensions.ts

@@ -1,10 +0,0 @@
-import { app, extensions } from '@wix/astro/builders';
-
-export default app().use(
-  extensions.dashboardPage({
-    component: './dashboard/pages/page.tsx',
-    id: '4344c4a2-1864-4587-87e9-5e4109b16999',
-    routePath: 'survey-manager',
-    title: 'Survey Manager',
-  })
-);