ApiLogicServer 15.0.19__tar.gz → 15.0.20__tar.gz

{apilogicserver-15.0.19 → apilogicserver-15.0.20}/ApiLogicServer.egg-info/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: ApiLogicServer
-Version: 15.0.19
+Version: 15.0.20
 Author-email: Val Huber <apilogicserver@gmail.com>
 License: BSD-3-Clause
 Project-URL: Homepage, https://www.genai-logic.com

{apilogicserver-15.0.19 → apilogicserver-15.0.20}/ApiLogicServer.egg-info/SOURCES.txt

@@ -1849,6 +1849,7 @@ api_logic_server_cli/prototypes/nginx_exp/docker-compose-dev-azure-nginx/etc/ssl
 api_logic_server_cli/prototypes/nginx_exp/docker-compose-dev-azure-nginx/unused/unused-docker-compose.py
 api_logic_server_cli/prototypes/nginx_exp/docker-compose-dev-azure-nginx/unused/unused-get_ip.py
 api_logic_server_cli/prototypes/nginx_exp/docker-compose-dev-azure-nginx/unused/unused-requirements-slim.txt
+api_logic_server_cli/prototypes/nw/.DS_Store
 api_logic_server_cli/prototypes/nw/Tutorial.md
 api_logic_server_cli/prototypes/nw/api/customize_api.py
 api_logic_server_cli/prototypes/nw/api/api_discovery/sales_by_category.py
@@ -1911,6 +1912,7 @@ api_logic_server_cli/prototypes/nw/test/basic/results/GET_test_on_Order.log
 api_logic_server_cli/prototypes/nw/test/basic/results/PATCH_-_low_credit.log
 api_logic_server_cli/prototypes/nw/test/basic/results/POST_test_-_Cust.log
 api_logic_server_cli/prototypes/nw/test/basic/results/PRUNE_test_-_ReqdDate.log
+api_logic_server_cli/prototypes/nw/ui/.DS_Store
 api_logic_server_cli/prototypes/nw/ui/app_model_custom.yaml
 api_logic_server_cli/prototypes/nw/ui/admin/admin.yaml
 api_logic_server_cli/prototypes/nw/ui/admin/home.js
@@ -1958,6 +1960,7 @@ api_logic_server_cli/prototypes/nw/ui/react_admin/src/Order.js
 api_logic_server_cli/prototypes/nw/ui/react_admin/src/OrderDetail.js
 api_logic_server_cli/prototypes/nw/ui/react_admin/src/Product.js
 api_logic_server_cli/prototypes/nw/ui/react_admin/src/Region.js
+api_logic_server_cli/prototypes/nw/ui/react_admin/src/SampleDBVersion.js
 api_logic_server_cli/prototypes/nw/ui/react_admin/src/Shipper.js
 api_logic_server_cli/prototypes/nw/ui/react_admin/src/Supplier.js
 api_logic_server_cli/prototypes/nw/ui/react_admin/src/Territory.js

{apilogicserver-15.0.19 → apilogicserver-15.0.20}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: ApiLogicServer
-Version: 15.0.19
+Version: 15.0.20
 Author-email: Val Huber <apilogicserver@gmail.com>
 License: BSD-3-Clause
 Project-URL: Homepage, https://www.genai-logic.com

{apilogicserver-15.0.19 → apilogicserver-15.0.20}/api_logic_server_cli/api_logic_server.py

@@ -12,10 +12,10 @@ ApiLogicServer CLI: given a database url, create [and run] customizable ApiLogic
 Called from api_logic_server_cli.py, by instantiating the ProjectRun object.
 '''
 
-__version__ = "15.00.19"  # last public release: 15.00.19 (15.00.12)
+__version__ = "15.00.20"  # last public release: 15.00.19 (15.00.12)
 recent_changes = \
     f'\n\nRecent Changes:\n' +\
-    "\t06/17/2024 - 15.00.19: Tech Preview: als genai-app \n"\
+    "\t06/19/2024 - 15.00.20: Tech Preview: als genai-app, import fix, bug [96] \n"\
     "\t06/10/2024 - 15.00.12: MCP Security, win fixes for readme, graphics quotes \n"\
     "\t06/08/2024 - 15.00.10: MCP, optional shortening of stacktrace lines, bugfix[92] \n"\
     "\t05/16/2024 - 14.05.00: safrs 3.1.7, running mcp preview \n"\
@@ -1174,7 +1174,7 @@ from database import <project.bind_key>_models
     @staticmethod                               
     def set_provider(from_value: str, to_value: str, config_file: str) -> None:
         """ update import statement to set provider type in config.py """
-        if from_value == to_value:
+        if from_value == to_value or to_value == "None":
             pass
             # log.debug(f'.. .. (provider type unchanged)')
         else:
@@ -1243,7 +1243,7 @@ from database import <project.bind_key>_models
         provider_note = f"Setting security provider type = {self.auth_provider_type}, @server = {self.auth_db_url} \n"
         #                    f'(was: {was_provider_type}, {is_enabled_note})\n'
 
-        if self.auth_provider_type == 'none':  # none means disable
+        if self.auth_provider_type in ['none', 'None']:  # none means disable
             if is_enabled:
                 log.info(f'\n\n.. ..Disabling security for current provider type: {was_provider_type}\n')
                 create_utils.assign_value_to_key_in_file(value=False, 

apilogicserver-15.0.20/api_logic_server_cli/api_logic_server_info.yaml

@@ -0,0 +1,3 @@
+last_created_date: June 19, 2025 16:11:17
+last_created_project_name: ../../../servers/basic_demo
+last_created_version: 15.00.19

{apilogicserver-15.0.19 → apilogicserver-15.0.20}/api_logic_server_cli/genai/genai_admin_app.py

@@ -77,7 +77,7 @@ class GenAIAdminApp:
 
         log.info(f"✅ Next Steps:\n")
         log.info('Start the API Logic Project: F5')
-        log.info('> cd ui/react-admin')
+        log.info(f'> cd ui/{app_name}')
         log.info('> npm install')
         log.info('> npm start')
 
@@ -85,10 +85,13 @@ class GenAIAdminApp:
     def a_generate_resource_files(self):
 
         def fix_source(raw_source: str) -> str:
-            ''' remove code occasional begin/end code markers '''
+            ''' Remove code occasional begin/end code markers <br>
+            ToDo: lint, and repeat generation if errors detected
+            '''
             source_lines = raw_source.splitlines()
-            result_lines = []
-            found_start_marker = False
+            result_lines = ["import React from 'react';",
+                            "import { List, FunctionField, Datagrid, TextField, DateField, NumberField, ReferenceField, ReferenceManyField, Show, TabbedShowLayout, Tab, SimpleShowLayout, TextInput, NumberInput, DateTimeInput, ReferenceInput, SelectInput, Create, SimpleForm, Edit, Filter, Pagination, BooleanField, BooleanInput } from 'react-admin';  // mandatory import"]
+            found_from_react_admin = False
             for each_line in source_lines:
                 if each_line.startswith("```"):
                     if each_line.startswith("```jsx") or each_line.startswith("```javascript"):
@@ -96,7 +99,11 @@ class GenAIAdminApp:
                         continue
                     else:
                         break
-                result_lines.append(each_line)
+                if "from 'react-admin'" in each_line:  # sigh: missing imports 20% of the time - override
+                    found_from_react_admin = True
+                    continue
+                if found_from_react_admin == True:
+                    result_lines.append(each_line)
                 
             # return source_lines as a string
             return "\n".join(result_lines)

{apilogicserver-15.0.19 → apilogicserver-15.0.20}/api_logic_server_cli/prototypes/manager/system/genai/app_templates/app_learning/Admin-App-Learning-Prompt.md

@@ -8,6 +8,7 @@ The result must be a runnable React app (`npm start`) that connects to the suppl
 ### Multi-Page
 
 For each resource:
+
 - Create a **List page** showing 7 user-friendly columns
 - Add **pagination**, **sorting**, and **filtering**
 - Link each row to a **Display (Show) page**
@@ -15,27 +16,33 @@ For each resource:
 ### Multi-Resource
 
 Each **Display Page** should:
+
 - Show all fields in a **multi-column layout**
 - Include a **tab sheet** (`<TabbedShowLayout>`) for each related resource using `<ReferenceManyField>`
 - Link child rows to their own display page
 
 Example:  
+
 - Customer Display has tab for OrderList 
+
   - The tab (with OrderList) is shown *below* all the Customer fields.
 - Each Order in the tab links to Order Display
 
 ### Automatic Joins
 
 For foreign keys:
+
 - Display joined value (e.g., `product.name` instead of `product_id`)
 - Use first string field from parent table containing `name`, `title`, or `description`
 
 Numeric Primary key fields:
+
 - Display at the end of forms/lists
 
 ### Lookups (Foreign Keys)
 
 For foreign key fields:
+
 - Provide auto-complete dropdown (`<ReferenceInput>`)
 - For numeric foreign keys, use the joined string field as lookup text
 
@@ -46,20 +53,23 @@ default the Foreign Key to the Parent (Master) Primary Key.
 
 ## Implementation
 
-
 ### Architecture
 
 - **Framework**: React 18 + react-admin 4.x
 - **Data Provider**: Custom `dataProvider.js` using `fetchUtils` (no external `ra-jsonapi-client`)
+
   - Must support: `getList`, `getOne`, `getMany`, `getManyReference`, `create`, `update`, `delete`
   - Must support: filters, joins, sorting, pagination
+
 - **Backend**: JSON:API per `mcp_discovery.json`
 - **CORS**: Ensure API allows `http://localhost:3000`
-  ```py
+
+```py
   from flask_cors import CORS  
   CORS(app, origins='*')  # or restrict to localhost:3000
-  ```
+```
 - **Project Setup**:
+
   - Use `create-react-app`
   - Include: `react-admin`, `@mui/material`, `@emotion/react`, `@emotion/styled`, `react-router-dom`
   - Do not use any deprecated or unmaintained libraries
@@ -70,31 +80,35 @@ default the Foreign Key to the Parent (Master) Primary Key.
 ### Per-Resource Files (Required)
 
 For each resource (`Customer`, `Order` etc):
-- Create a source file under `src/`, e.g., `Customer.js`
-- **Each file must fully implement**:
-  - `CustomerList`
-  - `CustomerShow`
-  - `CustomerCreate`
-  - `CustomerEdit`
+
+* Create a source file under `src/`, e.g., `Customer.js`
+* Each file must **fully** implement:
+    * `CustomerList`
+    * `CustomerShow`
+    * `CustomerCreate`
+    * `CustomerEdit`
 
 Use:
+
 - `<ReferenceField>` for foreign key displays
 - `<ReferenceInput>` for foreign key input
 - `<ReferenceManyField>` for tabbed child lists
 - For show pages
-  - Always start with <SimpleShowLayout>, followed by a <TabbedShowLayout> for related data
-    - DO NOT start with <TabbedShowLayout>
 
-Be sure to include all required imports.  ALWAYS use the following AS IS, plus whatever else is required:
+  * Always start with `<SimpleShowLayout>`, followed by a `<TabbedShowLayout>` for related data
+    * DO NOT start with `<TabbedShowLayout>`
+
+ALWAYS include these 2 imports at the top of the file, with this EXACT formatting, whether or not they are used:
 
 ```jsx
-import { List, FunctionField, Datagrid, TextField, DateField, NumberField, ReferenceField, ReferenceManyField, Show, TabbedShowLayout, Tab, SimpleShowLayout, TextInput, NumberInput, DateTimeInput, ReferenceInput, SelectInput, Create, SimpleForm, Edit, Filter, Pagination, BooleanField, BooleanInput } from 'react-admin';
+import React from 'react';
+import { List, FunctionField, Datagrid, TextField, DateField, NumberField, ReferenceField, ReferenceManyField, Show, TabbedShowLayout, Tab, SimpleShowLayout, TextInput, NumberInput, DateTimeInput, ReferenceInput, SelectInput, Create, SimpleForm, Edit, Filter, Pagination, BooleanField, BooleanInput } from 'react-admin';  // mandatory import
 ```
 You may add other imports, but be sure all those are included.
 
-DO NOT use <EmailInput> - use <TextInput>.
+DO NOT use `<EmailInput>` - use `<TextInput>`.
 
-DO NOT put <ReferenceField> in <Datagrid>.
+DO NOT put `<ReferenceField>` in `<Datagrid>`.
 
 Do **not leave any file empty**.
 
@@ -137,8 +151,10 @@ export default App;
 ```
 
 For dataProvider:
-1 - be sure it includes the braces: import { dataProvider }
-2 - Do Not generate either:
+
+1. be sure it includes the braces: `import { dataProvider }`
+2. Do Not generate either:
+
 ```jsx
 import jsonServerProvider from 'ra-data-json-server'
 const dataProvider = jsonServerProvider('http://api.example.com');

apilogicserver-15.0.20/api_logic_server_cli/prototypes/nw/ui/react_admin/src/App.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Admin, Resource } from 'react-admin';
+import { createTheme } from '@mui/material/styles';
+// import data provider
+import { dataProvider } from './dataProvider';
+
+// Import all resource components
+import { CustomerList, CustomerShow, CustomerCreate, CustomerEdit } from './Customer';
+import { OrderList, OrderShow, OrderCreate, OrderEdit } from './Order';
+import { ProductList, ProductShow, ProductCreate, ProductEdit } from './Product';
+import { CategoryList, CategoryShow, CategoryCreate, CategoryEdit } from './Category';
+import { EmployeeList, EmployeeShow, EmployeeCreate, EmployeeEdit } from './Employee';
+import { DepartmentList, DepartmentShow, DepartmentCreate, DepartmentEdit } from './Department';
+import { SupplierList, SupplierShow, SupplierCreate, SupplierEdit } from './Supplier';
+import { ShipperList, ShipperShow, ShipperCreate, ShipperEdit } from './Shipper';
+import { TerritoryList, TerritoryShow, TerritoryCreate, TerritoryEdit } from './Territory';
+import { CustomerDemographicList, CustomerDemographicShow, CustomerDemographicCreate, CustomerDemographicEdit } from './CustomerDemographic';
+import { EmployeeAuditList, EmployeeAuditShow, EmployeeAuditCreate, EmployeeAuditEdit } from './EmployeeAudit';
+import { EmployeeTerritoryList, EmployeeTerritoryShow, EmployeeTerritoryCreate, EmployeeTerritoryEdit } from './EmployeeTerritory';
+import { LocationList, LocationShow, LocationCreate, LocationEdit } from './Location';
+import { OrderDetailList, OrderDetailShow, OrderDetailCreate, OrderDetailEdit } from './OrderDetail';
+import { RegionList, RegionShow, RegionCreate, RegionEdit } from './Region';
+import { SampleDBVersionList, SampleDBVersionShow, SampleDBVersionCreate, SampleDBVersionEdit } from './SampleDBVersion';
+import { UnionList, UnionShow, UnionCreate, UnionEdit } from './Union';
+
+const theme = createTheme({
+    palette: {
+        primary: { main: '#1976d2' },
+        secondary: { main: '#1565c0' },
+    },
+    typography: { fontSize: 14 },
+});
+
+const App = () => {
+  return (
+    <Admin dataProvider={dataProvider} theme={theme}>
+      <Resource name="Customer" list={CustomerList} show={CustomerShow} edit={CustomerEdit} create={CustomerCreate} />
+      <Resource name="Order" list={OrderList} show={OrderShow} edit={OrderEdit} create={OrderCreate} />
+      <Resource name="Product" list={ProductList} show={ProductShow} edit={ProductEdit} create={ProductCreate} />
+      <Resource name="Category" list={CategoryList} show={CategoryShow} edit={CategoryEdit} create={CategoryCreate} />
+      <Resource name="Employee" list={EmployeeList} show={EmployeeShow} edit={EmployeeEdit} create={EmployeeCreate} />
+      <Resource name="Department" list={DepartmentList} show={DepartmentShow} edit={DepartmentEdit} create={DepartmentCreate} />
+      <Resource name="Supplier" list={SupplierList} show={SupplierShow} edit={SupplierEdit} create={SupplierCreate} />
+      <Resource name="Shipper" list={ShipperList} show={ShipperShow} edit={ShipperEdit} create={ShipperCreate} />
+      <Resource name="Territory" list={TerritoryList} show={TerritoryShow} edit={TerritoryEdit} create={TerritoryCreate} />
+      <Resource name="CustomerDemographic" list={CustomerDemographicList} show={CustomerDemographicShow} edit={CustomerDemographicEdit} create={CustomerDemographicCreate} />
+      <Resource name="EmployeeAudit" list={EmployeeAuditList} show={EmployeeAuditShow} edit={EmployeeAuditEdit} create={EmployeeAuditCreate} />
+      <Resource name="EmployeeTerritory" list={EmployeeTerritoryList} show={EmployeeTerritoryShow} edit={EmployeeTerritoryEdit} create={EmployeeTerritoryCreate} />
+      <Resource name="Location" list={LocationList} show={LocationShow} edit={LocationEdit} create={LocationCreate} />
+      <Resource name="OrderDetail" list={OrderDetailList} show={OrderDetailShow} edit={OrderDetailEdit} create={OrderDetailCreate} />
+      <Resource name="Region" list={RegionList} show={RegionShow} edit={RegionEdit} create={RegionCreate} />
+      <Resource name="SampleDBVersion" list={SampleDBVersionList} show={SampleDBVersionShow} edit={SampleDBVersionEdit} create={SampleDBVersionCreate} />
+      <Resource name="Union" list={UnionList} show={UnionShow} edit={UnionEdit} create={UnionCreate} />
+    </Admin>
+  );
+};
+
+export default App;

apilogicserver-15.0.20/api_logic_server_cli/prototypes/nw/ui/react_admin/src/Category.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+  List,
+  Datagrid,
+  TextField,
+  NumberField,
+  ReferenceField,
+  Show,
+  SimpleShowLayout,
+  TabbedShowLayout,
+  Tab,
+  TextInput,
+  NumberInput,
+  ReferenceManyField,
+  ReferenceInput,
+  SelectInput,
+  Create,
+  SimpleForm,
+  Edit,
+  Filter,
+} from 'react-admin';
+
+// Filters for Category List
+//theme color;
+const CategoryFilter = (props) => (
+  <Filter {...props}>
+    <TextInput label="Search" source="q" alwaysOn />
+    <TextInput label="Category Name" source="CategoryName_ColumnName" />
+    <TextInput label="Description" source="Description" />
+  </Filter>
+);
+
+// Category List
+export const CategoryList = (props) => (
+  <List filters={<CategoryFilter />} {...props} perPage={7}>
+    <Datagrid rowClick="show">
+      <TextField source="CategoryName_ColumnName" label="Category Name" />
+      <TextField source="Description" />
+    </Datagrid>
+  </List>
+);
+
+// Category Show
+export const CategoryShow = (props) => (
+  <Show {...props}>
+    <SimpleShowLayout>
+      <TextField source="CategoryName_ColumnName" label="Category Name" />
+      <TextField source="Description" />
+      <NumberField source="Id" label="ID" />
+      <ReferenceManyField reference="Product" target="CategoryId" label="Products">
+        <TabbedShowLayout>
+          <Tab label="Products">
+            <Datagrid rowClick="show">
+              <TextField source="ProductName" label="Product Name" />
+              <NumberField source="UnitPrice" label="Unit Price" />
+            </Datagrid>
+          </Tab>
+        </TabbedShowLayout>
+      </ReferenceManyField>
+    </SimpleShowLayout>
+  </Show>
+);
+
+// Category Create
+export const CategoryCreate = (props) => (
+  <Create {...props}>
+    <SimpleForm>
+      <TextInput source="CategoryName_ColumnName" label="Category Name" />
+      <TextInput multiline source="Description" />
+    </SimpleForm>
+  </Create>
+);
+
+// Category Edit
+export const CategoryEdit = (props) => (
+  <Edit {...props}>
+    <SimpleForm>
+      <TextInput source="CategoryName_ColumnName" label="Category Name" />
+      <TextInput multiline source="Description" />
+    </SimpleForm>
+  </Edit>
+);

apilogicserver-15.0.20/api_logic_server_cli/prototypes/nw/ui/react_admin/src/Customer.js

@@ -0,0 +1,211 @@
+import React, { useState } from 'react';
+import { List, FunctionField, Datagrid, TextField, DateField, NumberField, ReferenceField, ReferenceManyField, Show, TabbedShowLayout, Tab, SimpleShowLayout, TextInput, NumberInput, DateTimeInput, ReferenceInput, SelectInput, Create, SimpleForm, Edit, Filter, Pagination, BooleanField, BooleanInput, TopToolbar, Button, useListContext } from 'react-admin';  // mandatory import
+import { ToggleButton, ToggleButtonGroup, Box, Card, CardContent, CardActions, Typography } from '@mui/material';
+import { ViewList, ViewModule } from '@mui/icons-material';
+
+// Filters for the list view
+const CustomerFilter = (props) => (
+    <Filter {...props}>
+        <TextInput label="Search" source="q" alwaysOn />
+        <TextInput label="Company Name" source="CompanyName" />
+        <TextInput label="Contact Name" source="ContactName" />
+        <TextInput label="City" source="City" />
+        <TextInput label="Country" source="Country" />
+    </Filter>
+);
+
+// Card view component for customers
+const CustomerCard = ({ record, ...props }) => (
+    <Card sx={{ margin: 1, minWidth: 300, maxWidth: 350 }}>
+        <CardContent>
+            <Typography variant="h6" component="div" gutterBottom>
+                {record.CompanyName}
+            </Typography>
+            <Typography variant="body2" color="text.secondary">
+                Contact: {record.ContactName}
+            </Typography>
+            <Typography variant="body2" color="text.secondary">
+                {record.Address && `${record.Address}, `}{record.City}
+                {record.Region && `, ${record.Region}`}
+            </Typography>
+            <Typography variant="body2" color="text.secondary">
+                {record.Country}
+            </Typography>
+            {record.Phone && (
+                <Typography variant="body2" color="text.secondary">
+                    Phone: {record.Phone}
+                </Typography>
+            )}
+            {record.Balance && (
+                <Typography variant="body2" color="text.primary" sx={{ mt: 1, fontWeight: 'bold' }}>
+                    Balance: ${record.Balance.toLocaleString()}
+                </Typography>
+            )}
+        </CardContent>
+        <CardActions>
+            <Button 
+                size="small" 
+                onClick={() => window.location.href = `#/Customer/${record.Id}/show`}
+            >
+                View Details
+            </Button>
+            <Button 
+                size="small" 
+                onClick={() => window.location.href = `#/Customer/${record.Id}`}
+            >
+                Edit
+            </Button>
+        </CardActions>
+    </Card>
+);
+
+// Custom list actions with view toggle
+const CustomerListActions = ({ viewMode, setViewMode }) => (
+    <TopToolbar>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+            <ToggleButtonGroup
+                value={viewMode}
+                exclusive
+                onChange={(event, newView) => {
+                    if (newView !== null) {
+                        setViewMode(newView);
+                    }
+                }}
+                aria-label="view mode"
+                size="small"
+            >
+                <ToggleButton value="list" aria-label="list view">
+                    <ViewList />
+                </ToggleButton>
+                <ToggleButton value="cards" aria-label="card view">
+                    <ViewModule />
+                </ToggleButton>
+            </ToggleButtonGroup>
+        </Box>
+    </TopToolbar>
+);
+
+// Custom card grid component that uses react-admin's data context
+const CustomerCardGrid = () => {
+    const { data, isLoading } = useListContext();
+    
+    if (isLoading) return <div>Loading...</div>;
+    
+    return (
+        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, padding: 2 }}>
+            {data && data.map((record) => (
+                <CustomerCard key={record.Id} record={record} />
+            ))}
+        </Box>
+    );
+};
+
+export const CustomerList = (props) => {
+    const [viewMode, setViewMode] = useState('list');
+
+    return (
+        <List 
+            filters={<CustomerFilter />} 
+            {...props} 
+            perPage={viewMode === 'cards' ? 12 : 7} 
+            pagination={<Pagination />}
+            actions={<CustomerListActions viewMode={viewMode} setViewMode={setViewMode} />}
+        >
+            {viewMode === 'list' ? (
+                <Datagrid rowClick="show">
+                    <TextField source="CompanyName" label="Company Name" />
+                    <TextField source="ContactName" label="Contact Name" />
+                    <TextField source="Address" label="Address" />
+                    <TextField source="City" label="City" />
+                    <TextField source="Country" label="Country" />
+                    <TextField source="Phone" label="Phone" />
+                    <TextField source="Fax" label="Fax" />
+                    <NumberField source="Id" label="Customer ID"/>
+                </Datagrid>
+            ) : (
+                <CustomerCardGrid />
+            )}
+        </List>
+    );
+};
+
+export const CustomerShow = (props) => (
+    <Show {...props}>
+        <SimpleShowLayout>
+            <TextField source="CompanyName" label="Company Name" />
+            <TextField source="ContactName" label="Contact Name" />
+            <TextField source="ContactTitle" label="Contact Title" />
+            <TextField source="Address" label="Address" />
+            <TextField source="City" label="City" />
+            <TextField source="Region" label="Region" />
+            <TextField source="PostalCode" label="Postal Code" />
+            <TextField source="Country" label="Country" />
+            <TextField source="Phone" label="Phone" />
+            <TextField source="Fax" label="Fax" />
+            <NumberField source="Balance" options={{ style: 'currency', currency: 'USD' }} label="Balance" />
+            <NumberField source="CreditLimit" options={{ style: 'currency', currency: 'USD' }} label="Credit Limit" />
+            <NumberField source="OrderCount" label="Order Count" />
+            <NumberField source="UnpaidOrderCount" label="Unpaid Orders" />
+            <NumberField source="Id" label="Customer ID" />
+            
+            <TabbedShowLayout>
+                <Tab label="Orders">
+                    <ReferenceManyField
+                        label="Orders"
+                        reference="Order"
+                        target="CustomerId"
+                        perPage={7}
+                    >
+                        <Datagrid rowClick="show">
+                            <TextField source="ShipName" label="Ship Name" />
+                            <DateField source="OrderDate" label="Order Date" />
+                            <DateField source="ShippedDate" label="Shipped Date" />
+                            <NumberField source="AmountTotal" label="Total Amount" options={{ style: 'currency', currency: 'USD' }}/>
+                            <BooleanField source="Ready" label="Ready" />
+                            <NumberField source="Id" label="Order ID" />
+                        </Datagrid>
+                    </ReferenceManyField>
+                </Tab>
+            </TabbedShowLayout>
+        </SimpleShowLayout>
+    </Show>
+);
+
+export const CustomerCreate = (props) => (
+    <Create {...props}>
+        <SimpleForm>
+            <TextInput source="CompanyName" label="Company Name" />
+            <TextInput source="ContactName" label="Contact Name" />
+            <TextInput source="ContactTitle" label="Contact Title" />
+            <TextInput source="Address" label="Address" />
+            <TextInput source="City" label="City" />
+            <TextInput source="Region" label="Region" />
+            <TextInput source="PostalCode" label="Postal Code" />
+            <TextInput source="Country" label="Country" />
+            <TextInput source="Phone" label="Phone" />
+            <TextInput source="Fax" label="Fax" />
+            <NumberInput source="Balance" label="Balance" />
+            <NumberInput source="CreditLimit" label="Credit Limit" />
+        </SimpleForm>
+    </Create>
+);
+
+export const CustomerEdit = (props) => (
+    <Edit {...props}>
+        <SimpleForm>
+            <TextInput source="CompanyName" label="Company Name" />
+            <TextInput source="ContactName" label="Contact Name" />
+            <TextInput source="ContactTitle" label="Contact Title" />
+            <TextInput source="Address" label="Address" />
+            <TextInput source="City" label="City" />
+            <TextInput source="Region" label="Region" />
+            <TextInput source="PostalCode" label="Postal Code" />
+            <TextInput source="Country" label="Country" />
+            <TextInput source="Phone" label="Phone" />
+            <TextInput source="Fax" label="Fax" />
+            <NumberInput source="Balance" label="Balance" />
+            <NumberInput source="CreditLimit" label="Credit Limit" />
+            <NumberField source="Id" label="Customer ID" />
+        </SimpleForm>
+    </Edit>
+);