ApiLogicServer 15.0.19__py3-none-any.whl → 15.0.22__py3-none-any.whl

api_logic_server_cli/prototypes/manager/system/genai/app_templates/react-admin-template/src/rav4-jsonapi-client/resourceLookup.ts

@@ -0,0 +1,124 @@
+interface Relationship {
+    data: null | { id: string; type: string } | Array<{ id: string; type: string }>;
+    relationships?: { [key: string]: Relationship };
+}
+
+/**
+ * A map-like class that maps resource linkage objects {id: 1, type: "user"} to concrete resources with attributes and
+ * relationships
+ */
+export default class ResourceLookup {
+    lookup: Map<any, any>;
+    includes: string[];
+
+    /**
+     * Constructs a new lookup map
+     * @param {Object} response A JSON API response, in JSON format
+     */
+    constructor(response: any) {
+        this.lookup = new Map();
+        this.includes = [];
+
+        // If the response wasn't a JSON dictionary, we can't and don't need to build a lookup
+        if (typeof response !== 'object') return;
+
+        let resources;
+        // if (response.hasOwnProperty('included')) {
+        if (Object.prototype.hasOwnProperty.call(response, 'included')) {
+            resources = [...response.data, ...response.included];
+        } else {
+            resources = response.data;
+        }
+
+        // Iterate over each resource returned and put each in the lookup
+        for (const entry of resources) {
+            const key = this.getKey(entry);
+            this.lookup.set(key, entry);
+        }
+    }
+
+    /**
+     * Calculates a hashable key for JSON API resources
+     * @param resource A resource linkage object
+     * @returns {string}
+     */
+    getKey(resource: any) {
+        return `${resource.type}:${resource.id}`;
+    }
+
+    /**
+     * Looks up a resource
+     * @param resource A resource linkage object
+     * @returns {Object}
+     */
+    get(resource: any) {
+        // If we don't have included data for this resource, just return the Resource Linkage object, since that's still
+        // useful
+        if (this.has(resource)) {
+            return this.lookup.get(this.getKey(resource));
+        } else {
+            return structuredClone(resource);
+        }
+    }
+
+    /**
+     * Returns true if the resource is in the lookup
+     * @param resource
+     * @returns {boolean}
+     */
+    has(resource: any) {
+        return this.lookup.has(this.getKey(resource));
+    }
+
+    /**
+     * Converts a JSON API data object (with id, type, and attributes fields) into a flattened object
+     * @param {Object} response A JSON API data object
+     */
+    unwrapData(response: any) {
+        // The base resource object, merge the attributes and the id/type fields
+        const result = Object.assign(
+            {
+                id: response?.id,
+                ja_type: response?.type,
+                type: response?.Type || response?.type,
+                attributes: response.attributes || {},
+            },
+            response.attributes
+        );
+
+        // Deal with relationships
+        if (Object.prototype.hasOwnProperty.call(response, 'relationships')) {
+            result.relationships = response.relationships;
+            for (const [relationshipName, relationship] of Object.entries(response.relationships)) {
+                if ((relationship as Relationship).data === null) {
+                    result[relationshipName] = null;
+                }
+
+                if (!(relationship as Relationship).data) {
+                    continue;
+                } else if (Array.isArray((relationship as Relationship).data && (relationship as Relationship).data)) {
+                    result[relationshipName] = (relationship as Relationship).data?.map((linkage: any) => {
+                        const resource = this.get(linkage);
+                        const lresult = structuredClone(this.unwrapData(resource));
+                        Object.entries(lresult.attributes || {}).map(([key, value]) => {
+                            lresult[key] = value;
+                        });
+                        result.relationships[relationshipName].data = result[relationshipName];
+                        return lresult;
+                    });
+                } else if ((relationship as Relationship).data?.id) {
+                    const resource = this.get((relationship as Relationship).data);
+                    result[relationshipName] = this.unwrapData(resource);
+                    result.relationships[relationshipName].data = result[relationshipName];
+                }
+            }
+        }
+
+        try {
+            JSON.stringify(structuredClone(result));
+        } catch (e) {
+            return null;
+        }
+        return structuredClone(result);
+    }
+}

api_logic_server_cli/prototypes/manager/system/genai/app_templates/react-admin-template/src/rav4-jsonapi-client/styles.module.css

@@ -0,0 +1,9 @@
+/* add css module styles here (optional) */
+
+.test {
+  margin: 2em;
+  padding: 0.5em;
+  border: 2px solid #000;
+  font-size: 2em;
+  text-align: center;
+}

api_logic_server_cli/prototypes/nw/ui/react_admin/src/App.js

@@ -1,59 +1,58 @@
 import React from 'react';
 import { Admin, Resource } from 'react-admin';
 import { createTheme } from '@mui/material/styles';
-
-// Import DataProvider
+// import data provider
 import { dataProvider } from './dataProvider';
 
-// Import resource components
+// Import all resource components
 import { CustomerList, CustomerShow, CustomerCreate, CustomerEdit } from './Customer';
-import { CategoryList, CategoryShow, CategoryCreate, CategoryEdit } from './Category';
 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 { RegionList, RegionShow, RegionCreate, RegionEdit } from './Region';
 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 { DepartmentList, DepartmentShow, DepartmentCreate, DepartmentEdit } from './Department';
-import { UnionList, UnionShow, UnionCreate, UnionEdit } from './Union';
 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';
 
-// Define Material-UI Theme
 const theme = createTheme({
     palette: {
-        primary: { main: '#1976d2' }, // Material-UI default blue
-        secondary: { main: '#1565c0' }, // A darker blue, or choose another color
+        primary: { main: '#1976d2' },
+        secondary: { main: '#1565c0' },
     },
     typography: { fontSize: 14 },
 });
 
 const App = () => {
-    return (
-        <Admin dataProvider={dataProvider} theme={theme}>
-            {/* Register each resource with their components */}
-            <Resource name="Customer" list={CustomerList} show={CustomerShow} edit={CustomerEdit} create={CustomerCreate} />
-            <Resource name="Category" list={CategoryList} show={CategoryShow} edit={CategoryEdit} create={CategoryCreate} />
-            <Resource name="Order" list={OrderList} show={OrderShow} edit={OrderEdit} create={OrderCreate} />
-            <Resource name="Product" list={ProductList} show={ProductShow} edit={ProductEdit} create={ProductCreate} />
-            <Resource name="Employee" list={EmployeeList} show={EmployeeShow} edit={EmployeeEdit} create={EmployeeCreate} />
-            <Resource name="Supplier" list={SupplierList} show={SupplierShow} edit={SupplierEdit} create={SupplierCreate} />
-            <Resource name="Shipper" list={ShipperList} show={ShipperShow} edit={ShipperEdit} create={ShipperCreate} />
-            <Resource name="Region" list={RegionList} show={RegionShow} edit={RegionEdit} create={RegionCreate} />
-            <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="Department" list={DepartmentList} show={DepartmentShow} edit={DepartmentEdit} create={DepartmentCreate} />
-            <Resource name="Union" list={UnionList} show={UnionShow} edit={UnionEdit} create={UnionCreate} />
-            <Resource name="Location" list={LocationList} show={LocationShow} edit={LocationEdit} create={LocationCreate} />
-            <Resource name="OrderDetail" list={OrderDetailList} show={OrderDetailShow} edit={OrderDetailEdit} create={OrderDetailCreate} />
-        </Admin>
-    );
+  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;

api_logic_server_cli/prototypes/nw/ui/react_admin/src/Category.js

@@ -1,82 +1,82 @@
-```jsx
 import React from 'react';
 import {
-    List, Datagrid, TextField, ReferenceField,
-    Show, TabbedShowLayout, Tab, SimpleShowLayout,
-    TextInput, ReferenceManyField, Pagination,
-    Filter, Create, Edit, SimpleForm, SelectInput, ReferenceInput
+  List,
+  Datagrid,
+  TextField,
+  NumberField,
+  ReferenceField,
+  Show,
+  SimpleShowLayout,
+  TabbedShowLayout,
+  Tab,
+  TextInput,
+  NumberInput,
+  ReferenceManyField,
+  ReferenceInput,
+  SelectInput,
+  Create,
+  SimpleForm,
+  Edit,
+  Filter,
 } from 'react-admin';
 
-// Define the filters for the Category List
+// Filters for Category List
+//theme color;
 const CategoryFilter = (props) => (
-    <Filter {...props}>
-        <TextInput label="Search" source="q" alwaysOn />
-        <TextInput label="Category Name" source="CategoryName" />
-        <TextInput label="Description" source="Description" />
-    </Filter>
+  <Filter {...props}>
+    <TextInput label="Search" source="q" alwaysOn />
+    <TextInput label="Category Name" source="CategoryName_ColumnName" />
+    <TextInput label="Description" source="Description" />
+  </Filter>
 );
 
-// Pagination configuration
-const CategoryPagination = props => <Pagination rowsPerPageOptions={[7]} {...props} />;
-
-// List view for Categories
+// Category List
 export const CategoryList = (props) => (
-    <List {...props} filters={<CategoryFilter />} pagination={<CategoryPagination />}>
-        <Datagrid rowClick="show">
-            <TextField source="CategoryName" label="Category Name" />
-            <TextField source="Description" label="Description" />
-            <TextField source="Client_id" label="Client" />
-        </Datagrid>
-    </List>
+  <List filters={<CategoryFilter />} {...props} perPage={7}>
+    <Datagrid rowClick="show">
+      <TextField source="CategoryName_ColumnName" label="Category Name" />
+      <TextField source="Description" />
+    </Datagrid>
+  </List>
 );
 
-// Show view for a single Category
+// Category Show
 export const CategoryShow = (props) => (
-    <Show {...props}>
-        <SimpleShowLayout>
-            <TextField source="CategoryName" label="Category Name" />
-            <TextField source="Description" label="Description" />
-            <TextField source="Client_id" label="Client" />
-        </SimpleShowLayout>
+  <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="Related Resources">
-                <ReferenceManyField
-                    label="Products"
-                    reference="Product"
-                    target="CategoryId"
-                >
-                    <Datagrid rowClick="show">
-                        <TextField source="ProductName" label="Product Name" />
-                    </Datagrid>
-                </ReferenceManyField>
-            </Tab>
+          <Tab label="Products">
+            <Datagrid rowClick="show">
+              <TextField source="ProductName" label="Product Name" />
+              <NumberField source="UnitPrice" label="Unit Price" />
+            </Datagrid>
+          </Tab>
         </TabbedShowLayout>
-    </Show>
+      </ReferenceManyField>
+    </SimpleShowLayout>
+  </Show>
 );
 
-// Create view for a Category
+// Category Create
 export const CategoryCreate = (props) => (
-    <Create {...props}>
-        <SimpleForm>
-            <TextInput source="CategoryName" label="Category Name" />
-            <TextInput source="Description" label="Description" />
-            <ReferenceInput label="Client" source="Client_id" reference="Client">
-                <SelectInput optionText="name" />
-            </ReferenceInput>
-        </SimpleForm>
-    </Create>
+  <Create {...props}>
+    <SimpleForm>
+      <TextInput source="CategoryName_ColumnName" label="Category Name" />
+      <TextInput multiline source="Description" />
+    </SimpleForm>
+  </Create>
 );
 
-// Edit view for a Category
+// Category Edit
 export const CategoryEdit = (props) => (
-    <Edit {...props}>
-        <SimpleForm>
-            <TextInput source="CategoryName" label="Category Name" />
-            <TextInput source="Description" label="Description" />
-            <ReferenceInput label="Client" source="Client_id" reference="Client">
-                <SelectInput optionText="name" />
-            </ReferenceInput>
-        </SimpleForm>
-    </Edit>
+  <Edit {...props}>
+    <SimpleForm>
+      <TextInput source="CategoryName_ColumnName" label="Category Name" />
+      <TextInput multiline source="Description" />
+    </SimpleForm>
+  </Edit>
 );
-```

api_logic_server_cli/prototypes/nw/ui/react_admin/src/Customer.js

@@ -1,51 +1,134 @@
-import React from 'react';
-import { 
-    List, 
-    Datagrid, 
-    TextField, 
-    NumberField,
-    Show, 
-    SimpleShowLayout, 
-    TabbedShowLayout, 
-    Tab,
-    ReferenceManyField,
-    TextInput, 
-    Edit, 
-    SimpleForm,
-    Create,
-    NumberInput,
-    Pagination, 
-    Filter, 
-    ReferenceField,
-    FunctionField
-} from 'react-admin';
-import { Grid, Box } from '@mui/material';
+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 Customer list
+// Filters for the list view
 const CustomerFilter = (props) => (
     <Filter {...props}>
-        <TextInput label="Search by Company" source="CompanyName" alwaysOn />
-        <TextInput label="Search by Contact" source="ContactName" />
+        <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>
 );
 
-// Customer List
-export const CustomerList = (props) => (
-    <List filters={<CustomerFilter />} pagination={<Pagination />} {...props}>
-        <Datagrid rowClick="show">
-            <TextField source="CompanyName" label="Company Name" />
-            <TextField source="ContactName" label="Contact Name" />
-            <NumberField source="Balance" label="Balance" />
-            <NumberField source="CreditLimit" label="Credit Limit" />
-            <NumberField source="OrderCount" label="Order Count" />
-            <NumberField source="UnpaidOrderCount" label="Unpaid Orders" />
-            <TextField source="Phone" label="Phone" />
-            <NumberField source="Id" label="ID" />
-        </Datagrid>
-    </List>
+// 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>
 );
 
-// Customer Show
+// 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>
@@ -59,18 +142,27 @@ export const CustomerShow = (props) => (
             <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="Placed Order List">
+                <Tab label="Orders">
                     <ReferenceManyField
+                        label="Orders"
                         reference="Order"
                         target="CustomerId"
-                        label="Placed Orders"
+                        perPage={7}
                     >
                         <Datagrid rowClick="show">
-                            <TextField source="Id" label="Order ID" />
-                            <TextField source="OrderDate" label="Order Date" />
-                            <TextField source="AmountTotal" label="Total Amount" />
+                            <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>
@@ -79,7 +171,6 @@ export const CustomerShow = (props) => (
     </Show>
 );
 
-// Customer Create
 export const CustomerCreate = (props) => (
     <Create {...props}>
         <SimpleForm>
@@ -93,11 +184,12 @@ export const CustomerCreate = (props) => (
             <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>
 );
 
-// Customer Edit
 export const CustomerEdit = (props) => (
     <Edit {...props}>
         <SimpleForm>
@@ -111,6 +203,9 @@ export const CustomerEdit = (props) => (
             <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>
 );