@object-ui/components 0.3.1 → 2.0.0

package/src/stories-json/object-form.stories.tsx

@@ -0,0 +1,130 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer, SchemaRendererProvider } from '@object-ui/react';
+import type { BaseSchema } from '@object-ui/types';
+import { createStorybookDataSource } from '@storybook-config/datasource';
+
+const meta = {
+  title: 'Plugins/Forms/Object Form',
+  component: SchemaRenderer,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    schema: { table: { disable: true } },
+  },
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Create a DataSource instance that connects to MSW
+const dataSource = createStorybookDataSource();
+
+const renderStory = (args: any) => (
+  <SchemaRendererProvider dataSource={dataSource}>
+    <SchemaRenderer schema={args as unknown as BaseSchema} />
+  </SchemaRendererProvider>
+);
+
+export const BasicSchema: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-form',
+    objectName: 'User',
+    customFields: [
+      { name: 'firstName', label: 'First Name', type: 'text', required: true },
+      { name: 'lastName', label: 'Last Name', type: 'text', required: true },
+      { name: 'email', label: 'Email', type: 'email', required: true },
+      { name: 'age', label: 'Age', type: 'number' }
+    ],
+    className: 'w-full max-w-2xl'
+  } as any,
+};
+
+export const WithSections: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-form',
+    objectName: 'Employee',
+    sections: [
+      {
+        title: 'Schema/Plugins/Personal Information',
+        fields: [
+          { name: 'firstName', label: 'First Name', type: 'text', required: true },
+          { name: 'lastName', label: 'Last Name', type: 'text', required: true },
+          { name: 'dateOfBirth', label: 'Date of Birth', type: 'date' }
+        ]
+      },
+      {
+        title: 'Schema/Plugins/Contact Details',
+        fields: [
+          { name: 'email', label: 'Email', type: 'email', required: true },
+          { name: 'phone', label: 'Phone', type: 'tel' },
+          { name: 'address', label: 'Address', type: 'textarea' }
+        ]
+      }
+    ],
+    className: 'w-full max-w-2xl'
+  } as any,
+};
+
+export const ComplexFields: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-form',
+    objectName: 'Product',
+    customFields: [
+      { name: 'name', label: 'Product Name', type: 'text', required: true },
+      { name: 'category', label: 'Category', type: 'select', options: ['Electronics', 'Clothing', 'Food'], required: true },
+      { name: 'price', label: 'Price', type: 'number', required: true },
+      { name: 'inStock', label: 'In Stock', type: 'checkbox' },
+      { name: 'description', label: 'Description', type: 'textarea', rows: 4 }
+    ],
+    className: 'w-full max-w-2xl'
+  } as any,
+};
+
+/**
+ * Contact Form - Uses MSW-backed schema from ObjectStack runtime
+ * 
+ * This story demonstrates integration with the MSW plugin runtime mode.
+ * The form schema is fetched from /api/v1/metadata/contact via the ObjectStack kernel.
+ */
+export const ContactForm: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-form',
+    objectName: 'contact',
+    customFields: [
+      { name: 'name', label: 'Name', type: 'text', required: true },
+      { name: 'email', label: 'Email', type: 'email', required: true },
+      { name: 'phone', label: 'Phone', type: 'tel' },
+      { name: 'title', label: 'Title', type: 'text' },
+      { name: 'company', label: 'Company', type: 'text' },
+      { name: 'status', label: 'Status', type: 'select', options: ['Active', 'Lead', 'Customer'] }
+    ],
+    className: 'w-full max-w-2xl'
+  } as any,
+};
+
+/**
+ * Opportunity Form - Uses MSW-backed schema from ObjectStack runtime
+ * 
+ * This story demonstrates creating/editing opportunity records via MSW runtime.
+ */
+export const OpportunityForm: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-form',
+    objectName: 'opportunity',
+    customFields: [
+      { name: 'name', label: 'Opportunity Name', type: 'text', required: true },
+      { name: 'amount', label: 'Amount', type: 'number', required: true },
+      { name: 'stage', label: 'Stage', type: 'select', options: ['Prospecting', 'Qualification', 'Proposal', 'Negotiation', 'Closed Won', 'Closed Lost'] },
+      { name: 'closeDate', label: 'Close Date', type: 'date' },
+      { name: 'description', label: 'Description', type: 'textarea', rows: 4 }
+    ],
+    className: 'w-full max-w-2xl'
+  } as any,
+};

package/src/stories-json/object-gantt.stories.tsx

@@ -0,0 +1,114 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer, SchemaRendererProvider } from '@object-ui/react';
+import type { BaseSchema } from '@object-ui/types';
+import { createStorybookDataSource } from '@storybook-config/datasource';
+
+const meta = {
+  title: 'Plugins/Scheduling/Gantt',
+  component: SchemaRenderer,
+  parameters: {
+    layout: 'padded',
+    test: {
+       timeout: 60000,
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    schema: { table: { disable: true } },
+  },
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Create a DataSource instance that connects to MSW
+const dataSource = createStorybookDataSource();
+
+const renderStory = (args: any) => (
+  <SchemaRendererProvider dataSource={dataSource}>
+    <SchemaRenderer schema={args as unknown as BaseSchema} />
+  </SchemaRendererProvider>
+);
+
+export const ProjectSchedule: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-gantt',
+    objectName: 'Task',
+    gantt: {
+      startDateField: 'startDate',
+      endDateField: 'endDate',
+      titleField: 'name',
+      progressField: 'progress',
+      dependenciesField: 'dependencies'
+    },
+    tasks: [
+      {
+        id: '1',
+        name: 'Project Planning',
+        startDate: '2024-01-01',
+        endDate: '2024-01-15',
+        progress: 100
+      },
+      {
+        id: '2',
+        name: 'Design Phase',
+        startDate: '2024-01-10',
+        endDate: '2024-02-15',
+        progress: 75,
+        dependencies: ['1']
+      },
+      {
+        id: '3',
+        name: 'Development',
+        startDate: '2024-02-01',
+        endDate: '2024-04-30',
+        progress: 30,
+        dependencies: ['2']
+      },
+      {
+        id: '4',
+        name: 'Testing',
+        startDate: '2024-04-15',
+        endDate: '2024-05-15',
+        progress: 0,
+        dependencies: ['3']
+      }
+    ],
+    className: 'w-full'
+  } as any,
+};
+
+export const SimpleGantt: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-gantt',
+    objectName: 'Milestone',
+    gantt: {
+      startDateField: 'start',
+      endDateField: 'end',
+      titleField: 'title'
+    },
+    tasks: [
+      {
+        id: '1',
+        title: 'Schema/Plugins/Q1 Goals',
+        start: '2024-01-01',
+        end: '2024-03-31'
+      },
+      {
+        id: '2',
+        title: 'Schema/Plugins/Q2 Goals',
+        start: '2024-04-01',
+        end: '2024-06-30'
+      },
+      {
+        id: '3',
+        title: 'Schema/Plugins/Q3 Goals',
+        start: '2024-07-01',
+        end: '2024-09-30'
+      }
+    ],
+    className: 'w-full'
+  } as any,
+};

package/src/stories-json/object-grid.stories.tsx

@@ -0,0 +1,315 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer, SchemaRendererProvider } from '@object-ui/react';
+import type { BaseSchema } from '@object-ui/types';
+import { createStorybookDataSource } from '@storybook-config/datasource';
+
+const meta = {
+  title: 'Plugins/Data Views/Object Grid',
+  component: SchemaRenderer,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    schema: { table: { disable: true } },
+  },
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Create a DataSource instance that connects to MSW
+const dataSource = createStorybookDataSource();
+
+const renderStory = (args: any) => (
+  <SchemaRendererProvider dataSource={dataSource}>
+    <SchemaRenderer schema={args as unknown as BaseSchema} />
+  </SchemaRendererProvider>
+);
+
+export const UserGrid: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-grid',
+    objectName: 'User',
+    columns: [
+      { field: 'id', header: 'ID', width: 80 },
+      { field: 'name', header: 'Name', sortable: true, filterable: true },
+      { field: 'email', header: 'Email', sortable: true, filterable: true },
+      { field: 'role', header: 'Role', sortable: true },
+      { field: 'status', header: 'Status', sortable: true }
+    ],
+    data: [
+      { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'Active' },
+      { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User', status: 'Active' },
+      { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'User', status: 'Inactive' }
+    ],
+    pagination: true,
+    pageSize: 10,
+    className: 'w-full'
+  } as any,
+};
+
+export const ProductGrid: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-grid',
+    objectName: 'Product',
+    columns: [
+      { field: 'sku', header: 'SKU', width: 120 },
+      { field: 'name', header: 'Product Name', sortable: true, filterable: true },
+      { field: 'category', header: 'Category', sortable: true, filterable: true },
+      { field: 'price', header: 'Price', sortable: true, type: 'currency' },
+      { field: 'stock', header: 'In Stock', sortable: true, type: 'number' }
+    ],
+    data: [
+      { sku: 'PROD-001', name: 'Laptop', category: 'Electronics', price: 1299.99, stock: 15 },
+      { sku: 'PROD-002', name: 'Mouse', category: 'Electronics', price: 29.99, stock: 120 },
+      { sku: 'PROD-003', name: 'Desk Chair', category: 'Furniture', price: 249.99, stock: 8 },
+      { sku: 'PROD-004', name: 'Monitor', category: 'Electronics', price: 399.99, stock: 22 }
+    ],
+    pagination: true,
+    pageSize: 5,
+    className: 'w-full'
+  } as any,
+};
+
+export const WithActions: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-grid',
+    objectName: 'Order',
+    columns: [
+      { field: 'orderId', header: 'Order ID', width: 120 },
+      { field: 'customer', header: 'Customer', sortable: true },
+      { field: 'date', header: 'Order Date', sortable: true, type: 'date' },
+      { field: 'total', header: 'Total', sortable: true, type: 'currency' },
+      { field: 'status', header: 'Status', sortable: true }
+    ],
+    actions: [
+      { label: 'View', action: 'view' },
+      { label: 'Edit', action: 'edit' },
+      { label: 'Delete', action: 'delete', variant: 'destructive' }
+    ],
+    data: [
+      { orderId: 'ORD-1001', customer: 'Alice Brown', date: '2024-01-15', total: 159.99, status: 'Completed' },
+      { orderId: 'ORD-1002', customer: 'Charlie Davis', date: '2024-01-18', total: 89.50, status: 'Processing' },
+      { orderId: 'ORD-1003', customer: 'Eve Wilson', date: '2024-01-20', total: 299.99, status: 'Shipped' }
+    ],
+    pagination: true,
+    pageSize: 10,
+    className: 'w-full'
+  } as any,
+};
+
+/**
+ * Contacts Grid - Uses MSW-backed data from ObjectStack runtime
+ * 
+ * This story demonstrates integration with the MSW plugin runtime mode.
+ * Data is fetched from /api/v1/data/contact via the ObjectStack kernel.
+ */
+export const ContactsGrid: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-grid',
+    objectName: 'contact',
+    data: {
+      provider: 'object',
+      object: 'contact',
+    },
+    columns: [
+      { field: 'name', header: 'Name', sortable: true, filterable: true },
+      { field: 'email', header: 'Email', sortable: true, filterable: true },
+      { field: 'title', header: 'Title', sortable: true },
+      { field: 'company', header: 'Company', sortable: true },
+      { field: 'status', header: 'Status', sortable: true }
+    ],
+    pagination: true,
+    pageSize: 10,
+    className: 'w-full'
+  } as any,
+};
+
+/**
+ * Opportunities Grid - Uses MSW-backed data from ObjectStack runtime
+ * 
+ * This story demonstrates fetching opportunity data from the MSW runtime.
+ */
+export const OpportunitiesGrid: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-grid',
+    objectName: 'opportunity',
+    data: {
+      provider: 'object',
+      object: 'opportunity',
+    },
+    columns: [
+      { field: 'name', header: 'Name', sortable: true, filterable: true },
+      { field: 'amount', header: 'Amount', sortable: true, type: 'currency' },
+      { field: 'stage', header: 'Stage', sortable: true },
+      { field: 'closeDate', header: 'Close Date', sortable: true, type: 'date' }
+    ],
+    pagination: true,
+    pageSize: 10,
+    className: 'w-full'
+  } as any,
+};
+
+/**
+ * Editable Grid - Simple Inline Cell Editing
+ * 
+ * This story demonstrates basic inline editing capabilities:
+ * - Double-click or press Enter to edit a cell
+ * - Press Enter to save, Escape to cancel
+ * - ID column is read-only (editable: false)
+ * - Changes are immediately reported via onCellChange callback
+ */
+export const EditableGrid: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-grid',
+    objectName: 'User',
+    columns: [
+      { field: 'id', header: 'ID', width: 80, editable: false },
+      { field: 'name', header: 'Name', sortable: true },
+      { field: 'email', header: 'Email', sortable: true },
+      { field: 'role', header: 'Role', sortable: true },
+      { field: 'status', header: 'Status', sortable: true }
+    ],
+    data: [
+      { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'Active' },
+      { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User', status: 'Active' },
+      { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'User', status: 'Inactive' },
+      { id: 4, name: 'Alice Williams', email: 'alice@example.com', role: 'User', status: 'Active' }
+    ],
+    editable: true,
+    pagination: false,
+    className: 'w-full',
+    onCellChange: (rowIndex: number, columnKey: string, newValue: any, row: any) => {
+      console.log('Cell changed:', { rowIndex, columnKey, newValue, row });
+      alert(`✓ Cell updated immediately:\n${columnKey} = "${newValue}"`);
+    }
+  } as any,
+};
+
+/**
+ * Batch Edit Grid - Multi-Row Editing with Batch Save
+ * 
+ * **💡 How to use:**
+ * 1. Double-click any cell (except SKU) to start editing
+ * 2. Press Enter to confirm the edit (cell becomes highlighted in amber)
+ * 3. Edit more cells across different rows
+ * 4. Watch the toolbar appear showing "X rows modified" with Save/Cancel buttons
+ * 5. Row-level save buttons (✓) appear in the Actions column for edited rows
+ * 6. Click "Save All" to batch save, or click row save buttons individually
+ * 
+ * **Features demonstrated:**
+ * - Edit multiple cells across multiple rows
+ * - Modified rows are highlighted with amber background
+ * - Modified cells shown in bold amber text
+ * - Row-level save/cancel buttons appear after editing
+ * - Batch save all changes at once using "Save All" button
+ * - Cancel changes per row or all at once
+ * - Toolbar shows count of modified rows
+ */
+export const BatchEditGrid: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-grid',
+    objectName: 'Product',
+    columns: [
+      { field: 'sku', header: 'SKU', width: 120, editable: false },
+      { field: 'name', header: 'Product Name', sortable: true },
+      { field: 'category', header: 'Category', sortable: true },
+      { field: 'price', header: 'Price', sortable: true },
+      { field: 'stock', header: 'Stock', sortable: true }
+    ],
+    data: [
+      { sku: 'PROD-001', name: 'Laptop', category: 'Electronics', price: '$1299.99', stock: 15 },
+      { sku: 'PROD-002', name: 'Mouse', category: 'Electronics', price: '$29.99', stock: 120 },
+      { sku: 'PROD-003', name: 'Keyboard', category: 'Accessories', price: '$79.99', stock: 45 },
+      { sku: 'PROD-004', name: 'Monitor', category: 'Electronics', price: '$399.99', stock: 22 },
+      { sku: 'PROD-005', name: 'USB Cable', category: 'Accessories', price: '$12.99', stock: 200 }
+    ],
+    editable: true,
+    pagination: false,
+    rowActions: true,
+    className: 'w-full',
+    onRowSave: async (rowIndex: number, changes: Record<string, any>, row: any) => {
+      console.log('Saving row:', { rowIndex, changes, row });
+      // Simulate API call
+      await new Promise(resolve => setTimeout(resolve, 500));
+      const changeList = Object.entries(changes).map(([k, v]) => `  ${k}: "${v}"`).join('\n');
+      alert(`✓ Saved changes for "${row.name}":\n\n${changeList}`);
+    },
+    onBatchSave: async (allChanges: Array<{ rowIndex: number; changes: Record<string, any>; row: any }>) => {
+      console.log('Batch saving:', allChanges);
+      // Simulate API call
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      const summary = allChanges.map(c => 
+        `${c.row.name}: ${Object.keys(c.changes).join(', ')}`
+      ).join('\n');
+      alert(`✓ Batch saved ${allChanges.length} rows:\n\n${summary}`);
+    }
+  } as any,
+};
+
+/**
+ * Advanced Batch Editing - Real-World Inventory Management
+ * 
+ * **💡 Instructions:**
+ * - Double-click any cell (except ID and SKU which are read-only)
+ * - Make edits across multiple rows and pages
+ * - Save buttons appear in Actions column after editing
+ * - Batch save toolbar appears when there are pending changes
+ * 
+ * **Complete workflow demonstration:**
+ * - Large dataset with pagination
+ * - Multiple editable fields
+ * - Read-only columns (ID, SKU)
+ * - Both row-level and batch save operations
+ * - Search and filter capabilities
+ */
+export const AdvancedBatchEdit: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-grid',
+    objectName: 'Inventory',
+    columns: [
+      { field: 'id', header: 'ID', width: 60, editable: false },
+      { field: 'sku', header: 'SKU', width: 100, editable: false },
+      { field: 'name', header: 'Product Name', sortable: true },
+      { field: 'category', header: 'Category', sortable: true },
+      { field: 'price', header: 'Price ($)', sortable: true },
+      { field: 'stock', header: 'Stock', sortable: true },
+      { field: 'reorderLevel', header: 'Reorder At', sortable: true }
+    ],
+    data: [
+      { id: 1, sku: 'ELEC-001', name: 'Wireless Mouse', category: 'Electronics', price: '29.99', stock: 45, reorderLevel: 20 },
+      { id: 2, sku: 'ELEC-002', name: 'USB Keyboard', category: 'Electronics', price: '49.99', stock: 32, reorderLevel: 15 },
+      { id: 3, sku: 'FURN-001', name: 'Desk Lamp', category: 'Furniture', price: '34.99', stock: 18, reorderLevel: 10 },
+      { id: 4, sku: 'ELEC-003', name: 'Webcam HD', category: 'Electronics', price: '79.99', stock: 12, reorderLevel: 10 },
+      { id: 5, sku: 'ACC-001', name: 'HDMI Cable', category: 'Accessories', price: '15.99', stock: 150, reorderLevel: 50 },
+      { id: 6, sku: 'FURN-002', name: 'Monitor Stand', category: 'Furniture', price: '45.99', stock: 28, reorderLevel: 12 },
+      { id: 7, sku: 'ELEC-004', name: 'USB Hub', category: 'Electronics', price: '24.99', stock: 65, reorderLevel: 25 },
+      { id: 8, sku: 'ACC-002', name: 'Mouse Pad', category: 'Accessories', price: '9.99', stock: 200, reorderLevel: 75 }
+    ],
+    editable: true,
+    pagination: true,
+    pageSize: 5,
+    rowActions: true,
+    className: 'w-full',
+    onRowSave: async (rowIndex: number, changes: Record<string, any>, row: any) => {
+      console.log('Saving inventory row:', { rowIndex, changes, row });
+      await new Promise(resolve => setTimeout(resolve, 600));
+      alert(`✓ Updated inventory for "${row.name}"\n\nChanges:\n${JSON.stringify(changes, null, 2)}`);
+    },
+    onBatchSave: async (allChanges: Array<{ rowIndex: number; changes: Record<string, any>; row: any }>) => {
+      console.log('Batch updating inventory:', allChanges);
+      await new Promise(resolve => setTimeout(resolve, 1200));
+      alert(`✓ Batch updated ${allChanges.length} inventory items\n\nProcessed successfully!`);
+    }
+  } as any,
+};
+

package/src/stories-json/object-map.stories.tsx

@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer, SchemaRendererProvider } from '@object-ui/react';
+import type { BaseSchema } from '@object-ui/types';
+import { createStorybookDataSource } from '@storybook-config/datasource';
+
+const meta = {
+  title: 'Plugins/Rich Content/Map',
+  component: SchemaRenderer,
+  parameters: {
+    layout: 'padded',
+    test: {
+      timeout: 60000,
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    schema: { table: { disable: true } },
+  },
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Create a DataSource instance that connects to MSW
+const dataSource = createStorybookDataSource();
+
+const renderStory = (args: any) => (
+  <SchemaRendererProvider dataSource={dataSource}>
+    <SchemaRenderer schema={args as unknown as BaseSchema} />
+  </SchemaRendererProvider>
+);
+
+export const StoreLocations: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-map',
+    objectName: 'Store',
+    map: {
+      latitudeField: 'latitude',
+      longitudeField: 'longitude',
+      titleField: 'name',
+      descriptionField: 'address'
+    },
+    locations: [
+      {
+        id: '1',
+        name: 'Downtown Store',
+        address: '123 Main St',
+        latitude: 40.7128,
+        longitude: -74.0060
+      },
+      {
+        id: '2',
+        name: 'Uptown Branch',
+        address: '456 Park Ave',
+        latitude: 40.7589,
+        longitude: -73.9851
+      },
+      {
+        id: '3',
+        name: 'Suburban Location',
+        address: '789 Oak Rd',
+        latitude: 40.6782,
+        longitude: -73.9442
+      }
+    ],
+    center: {
+      latitude: 40.7128,
+      longitude: -74.0060
+    },
+    zoom: 12,
+    className: 'w-full h-[500px]'
+  } as any,
+};
+
+export const DeliveryRoutes: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-map',
+    objectName: 'Delivery',
+    map: {
+      latitudeField: 'lat',
+      longitudeField: 'lng',
+      titleField: 'address'
+    },
+    locations: [
+      {
+        id: '1',
+        address: 'Customer A - 100 First St',
+        lat: 37.7749,
+        lng: -122.4194,
+        status: 'Delivered'
+      },
+      {
+        id: '2',
+        address: 'Customer B - 200 Second Ave',
+        lat: 37.7849,
+        lng: -122.4094,
+        status: 'In Transit'
+      },
+      {
+        id: '3',
+        address: 'Customer C - 300 Third Blvd',
+        lat: 37.7649,
+        lng: -122.4294,
+        status: 'Pending'
+      }
+    ],
+    center: {
+      latitude: 37.7749,
+      longitude: -122.4194
+    },
+    zoom: 13,
+    className: 'w-full h-[500px]'
+  } as any,
+};