Merge pull request #223 from objectstack-ai/copilot/implement-objectui-component

Author: hotlong

examples/crm-app/src/App.tsx

@@ -8,10 +8,11 @@ import { registerPlaceholders } from '@object-ui/components';
 import { SidebarNav } from './components/SidebarNav';
 
 // Data & Schemas
-import { mockData, getContact } from './data';
+import { mockData, getContact, getOpportunity } from './data';
 import { dashboardSchema } from './schemas/dashboard';
 import { contactListSchema, contactDetailSchema } from './schemas/contacts';
 import { opportunityListSchema } from './schemas/opportunities';
+import { opportunityDetailSchema } from './schemas/opportunity-detail';
 
 // 1. Register components
 registerFields();
@@ -54,6 +55,19 @@ const ContactDetailPage = () => {
     );
 }
 
+const OpportunityDetailPage = () => {
+    const { id } = useParams();
+    const opportunity = getOpportunity(id || "");
+    
+    if (!opportunity) return <div>Opportunity not found</div>;
+
+    return (
+        <SchemaRendererProvider dataSource={opportunity} debug={true}>
+            <SchemaRenderer schema={opportunityDetailSchema} />
+        </SchemaRendererProvider>
+    );
+}
+
 function App() {
   return (
     <SchemaRendererProvider 
@@ -70,7 +84,10 @@ function App() {
                 <Route path=":id" element={<ContactDetailPage />} />
             </Route>
 
-            <Route path="opportunities" element={<SchemaRenderer schema={opportunityListSchema} />} />
+            <Route path="opportunities">
+                <Route index element={<SchemaRenderer schema={opportunityListSchema} />} />
+                <Route path=":id" element={<OpportunityDetailPage />} />
+            </Route>
 
             <Route path="products" element={<div className="p-4">Products Module (Coming Soon)</div>} />
             <Route path="settings" element={<div className="p-4">Settings Module (Coming Soon)</div>} />

examples/crm-app/src/data.ts

@@ -8,9 +8,36 @@ export const mockData = {
       { id: "3", name: "Charlie Brown", email: "charlie@peanuts.com", phone: "555-0103", title: "Manager", company: "Good Grief LLC", status: "Customer" }
     ],
     opportunities: [
-        { id: "101", name: "TechCorp Enterprise License", amount: 50000, stage: "Proposal", closeDate: "2024-06-30", accountId: "1" },
-        { id: "102", name: "Software Inc Pilot", amount: 5000, stage: "Closed Won", closeDate: "2024-01-15", accountId: "2" },
-        { id: "103", name: "Good Grief Consultant", amount: 12000, stage: "Negotiation", closeDate: "2024-05-20", accountId: "3" }
+        { 
+            id: "101", 
+            name: "TechCorp Enterprise License", 
+            amount: 50000, 
+            stage: "Proposal", 
+            closeDate: "2024-06-30", 
+            accountId: "1",
+            contactIds: ["c1", "c2"],
+            description: "Enterprise software license for 500 users. Includes premium support and training." 
+        },
+        { 
+            id: "102", 
+            name: "Software Inc Pilot", 
+            amount: 5000, 
+            stage: "Closed Won", 
+            closeDate: "2024-01-15", 
+            accountId: "2",
+            contactIds: ["c2"],
+            description: "Pilot program for 50 users." 
+        },
+        { 
+            id: "103", 
+            name: "Good Grief Consultant", 
+            amount: 12000, 
+            stage: "Negotiation", 
+            closeDate: "2024-05-20", 
+            accountId: "3",
+            contactIds: ["c3"],
+            description: "Consulting services for Q2 implementation." 
+        }
     ]
   };
 

examples/crm-app/src/schemas/opportunities.ts

@@ -26,7 +26,8 @@ export const opportunityListSchema: PageSchema = {
                 card: {
                     title: "name",
                     subtitle: "amount",
-                    footer: "closeDate"
+                    footer: "closeDate",
+                    onClick: { action: "navigate", params: { url: "/opportunities/${id}" } }
                 }
             }
         }

examples/crm-app/src/schemas/opportunity-detail.ts

@@ -0,0 +1,124 @@
+import { PageSchema } from "@object-ui/types";
+
+/**
+ * Opportunity Detail Schema
+ * Demonstrates the new field widgets: CurrencyField, LookupField, and action execution
+ */
+export const opportunityDetailSchema: PageSchema = {
+    type: "page",
+    props: { title: "Opportunity Details" },
+    children: [
+        {
+            type: "page:header",
+            props: {
+                title: "${data.name}",
+                description: "Deal Amount: ${data.amount}"
+            },
+            children: [
+                {
+                    type: "action:button",
+                    props: { label: "Edit", variant: "outline" }
+                },
+                {
+                    type: "action:button",
+                    props: { 
+                        label: "Mark as Won", 
+                        variant: "default",
+                        confirmText: "Are you sure you want to mark this as won?",
+                        successMessage: "Opportunity marked as won!",
+                        api: "/api/opportunities/${data.id}/win",
+                        reload: true
+                    }
+                }
+            ]
+        },
+        {
+            type: "page:card",
+            className: "mt-6",
+            props: { title: "Deal Information" },
+            children: [
+                {
+                    type: "view:simple",
+                    props: { columns: 2 },
+                    children: [
+                        { 
+                            type: "field:text", 
+                            bind: "name", 
+                            props: { label: "Opportunity Name" } 
+                        },
+                        { 
+                            type: "field:select", 
+                            bind: "stage", 
+                            props: { 
+                                label: "Stage",
+                                options: [
+                                    { value: "Prospecting", label: "Prospecting" },
+                                    { value: "Proposal", label: "Proposal" },
+                                    { value: "Negotiation", label: "Negotiation" },
+                                    { value: "Closed Won", label: "Closed Won" },
+                                    { value: "Closed Lost", label: "Closed Lost" }
+                                ]
+                            } 
+                        },
+                        { 
+                            type: "field:currency", 
+                            bind: "amount", 
+                            props: { 
+                                label: "Amount",
+                                currency: "USD",
+                                precision: 2
+                            } 
+                        },
+                        { 
+                            type: "field:date", 
+                            bind: "closeDate", 
+                            props: { label: "Close Date" } 
+                        },
+                        { 
+                            type: "field:lookup", 
+                            bind: "accountId", 
+                            props: { 
+                                label: "Account",
+                                options: [
+                                    { value: "1", label: "Acme Corp" },
+                                    { value: "2", label: "TechStart Inc" },
+                                    { value: "3", label: "Global Solutions" }
+                                ],
+                                display_field: "label"
+                            } 
+                        },
+                        { 
+                            type: "field:lookup", 
+                            bind: "contactIds", 
+                            props: { 
+                                label: "Contacts",
+                                multiple: true,
+                                options: [
+                                    { value: "c1", label: "John Doe" },
+                                    { value: "c2", label: "Jane Smith" },
+                                    { value: "c3", label: "Bob Johnson" }
+                                ]
+                            } 
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            type: "page:card",
+            className: "mt-6",
+            props: { title: "Description" },
+            children: [
+                { 
+                    type: "field:textarea", 
+                    bind: "description", 
+                    props: { 
+                        label: "Notes",
+                        rows: 6,
+                        placeholder: "Enter opportunity notes..."
+                    } 
+                }
+            ]
+        }
+    ]
+};