ApiLogicServer 15.0.37__py3-none-any.whl → 15.0.40__py3-none-any.whl

api_logic_server_cli/prototypes/nw/database/database_discovery/graphics_services.py

@@ -0,0 +1,173 @@
+from database import models
+import logging
+from safrs import jsonapi_attr
+from sqlalchemy.orm import relationship, remote, foreign
+from functools import wraps # This convenience func preserves name and docstring
+import decimal as decimal
+from sqlalchemy import extract, func
+from flask import request, jsonify
+from safrs import jsonapi_rpc, SAFRSAPI
+import safrs
+
+"""
+Graphics methods for database classes, created when: 
+* `als genai create` contains prompts like: 'Graph Sales by Category', etc.
+* `als add-graphics` --using the docs/graphics directory
+
+Called by api/api_discovery/dashboard_services.py when admin app loaded
+
+You typically do not alter this file - rebuilt on als genai--graphics.
+
+"""
+
+app_logger = logging.getLogger(__name__)
+
+
+def add_method(cls):
+  """
+  Decorator to add method to class, e.g., db class group by query method
+
+  Thanks to: https://mgarod.medium.com/dynamically-add-a-method-to-a-class-in-python-c49204b85bd6
+  """
+  def decorator(func):
+    @wraps(func) 
+    def wrapper(self, *args, **kwargs): 
+      return func(*args, **kwargs)
+    
+    setattr(cls, func.__name__, wrapper)
+    # Note we are not binding func, but wrapper which accepts self but does exactly the same as func
+    return func # returning func means func can still be used normally
+  return decorator
+
+##############################
+# generated services follow
+##############################
+
+
+
+@classmethod
+@add_method(models.Category)
+@jsonapi_rpc(http_methods=['GET', 'OPTIONS'])
+def sales_by_category(*args, **kwargs):
+    """        
+    Complex query with multiple joins, for graphics, from 'Graph Sales by Category', etc.
+    Test with Swagger.
+    """
+    if request.method == 'OPTIONS':
+        return jsonify({ "result": "ok" })
+        
+    from database.models import Category, Product, OrderDetail, Order
+    db = safrs.DB
+    session = db.session    # sqlalchemy.orm.scoping.scoped_session
+    # Security.set_user_sa()  # an endpoint that requires no auth header (see also @bypass_security)
+
+    # SQLAlchemy query
+    query = sales_by_category = ((session.query(Category.CategoryName, func.sum(OrderDetail.Quantity * OrderDetail.UnitPrice * (1 - OrderDetail.Discount))
+            .label("TotalSales"))
+            .join(Product, Category.Id == Product.CategoryId)
+            .join(OrderDetail, Product.Id == OrderDetail.ProductId)
+            .join(Order, OrderDetail.OrderId == Order.Id)
+            .filter(Order.ShippedDate.is_not(None))
+            .group_by(Category.CategoryName)
+            .order_by(func.sum(OrderDetail.Quantity * OrderDetail.UnitPrice * (1 - OrderDetail.Discount))
+            .desc()))) 
+    # Execute query and fetch results
+    results = query.all()
+    from decimal import Decimal
+    columns = ['Category Name' , 'Total Sales']
+    results = [{columns[0]: row[0], columns[1]: round(float(row[1]), 2)} for row in results]
+    title = 'Sales by Category'
+    graph_type = 'Bar'.lower()
+    json_results = {
+        "results": results,
+        "columns": columns,
+        "title": title,
+        "chart_type": graph_type,
+        "xAxis": columns[0],
+        "yAxis": columns[1],
+    }
+    
+    return json_results 
+@classmethod
+@add_method(models.Category)
+@jsonapi_rpc(http_methods=['GET', 'OPTIONS'])
+def number_of_sales_per_category(*args, **kwargs):
+    """        
+    Complex query with multiple joins, for graphics, from 'Graph Sales by Category', etc.
+    Test with Swagger.
+    """
+    if request.method == 'OPTIONS':
+        return jsonify({ "result": "ok" })
+        
+    from database.models import Category, Product, OrderDetail, Order
+    db = safrs.DB
+    session = db.session    # sqlalchemy.orm.scoping.scoped_session
+    # Security.set_user_sa()  # an endpoint that requires no auth header (see also @bypass_security)
+
+    # SQLAlchemy query
+    query = number_of_sales_per_category = ((session.query(Category.CategoryName, func.count(Order.Id)
+            .label("NumberOfSales"))
+            .join(Product, Product.CategoryId == Category.Id)
+            .join(OrderDetail, OrderDetail.ProductId == Product.Id)
+            .join(Order, Order.Id == OrderDetail.OrderId)
+            .filter(Order.ShippedDate.is_not(None))
+            .group_by(Category.CategoryName)
+            .order_by(func.count(Order.Id)
+            .desc()))) 
+    # Execute query and fetch results
+    results = query.all()
+    from decimal import Decimal
+    columns = ['Category Name' , 'Number of Sales']
+    results = [{columns[0]: row[0], columns[1]: round(float(row[1]), 2)} for row in results]
+    title = 'Number of Sales Per Category'
+    graph_type = 'Bar'.lower()
+    json_results = {
+        "results": results,
+        "columns": columns,
+        "title": title,
+        "chart_type": graph_type,
+        "xAxis": columns[0],
+        "yAxis": columns[1],
+    }
+    
+    return json_results 
+@classmethod
+@add_method(models.Order)
+@jsonapi_rpc(http_methods=['GET', 'OPTIONS'])
+def count_orders_by_month(*args, **kwargs):
+    """        
+    Complex query with multiple joins, for graphics, from 'Graph Sales by Category', etc.
+    Test with Swagger.
+    """
+    if request.method == 'OPTIONS':
+        return jsonify({ "result": "ok" })
+        
+    from database.models import Order
+    db = safrs.DB
+    session = db.session    # sqlalchemy.orm.scoping.scoped_session
+    # Security.set_user_sa()  # an endpoint that requires no auth header (see also @bypass_security)
+
+    # SQLAlchemy query
+    query = count_orders_by_month = ((session.query(func.strftime('%Y-%m', func.date(Order.OrderDate))
+            .label("OrderMonth"), func.count(Order.Id)
+            .label("OrderCount"))
+            .filter(Order.OrderDate.is_not(None))
+            .group_by(func.strftime('%Y-%m', func.date(Order.OrderDate)))
+            .order_by(func.strftime('%Y-%m', func.date(Order.OrderDate))))) 
+    # Execute query and fetch results
+    results = query.all()
+    from decimal import Decimal
+    columns = ['Month' , 'Order Count']
+    results = [{columns[0]: row[0], columns[1]: round(float(row[1]), 2)} for row in results]
+    title = 'Order Count by Month'
+    graph_type = 'Line'.lower()
+    json_results = {
+        "results": results,
+        "columns": columns,
+        "title": title,
+        "chart_type": graph_type,
+        "xAxis": columns[0],
+        "yAxis": columns[1],
+    }
+    
+    return json_results 

api_logic_server_cli/prototypes/nw/ui/admin/home.js

@@ -1,6 +1,11 @@
 const sla_doc =
     '<div class="MuiTypography-root jss4" style="color: rgba(0, 0, 0, 0.66)">' +
     '<div style="text-align:center">' +
+'<div class="dashboard-iframe">' +
+
+'<iframe id="iframeTargetDashboard" src="http://localhost:5656/dashboard" style="flex: 1; border: none; width: 100%; height: 200px;"></iframe>' +
+
+'</div>' +
     '<h2>Welcome to GenAI-Logic/API Logic Server - Sample</h2>' +
     '</div><br>' +
     '<h3><a class="custom" style="color: #3f51b5;"  rel="nofollow" href="https://www.genai-logic.com" target="_blank">GenAI-Logic</a> ' +

api_logic_server_cli/prototypes/nw/ui/reference_react_app/DEPARTMENT_TREE_VIEW.md

@@ -0,0 +1,66 @@
+# Department Tree View Feature
+
+## Overview
+The Department component now supports two view modes:
+1. **List View** - Traditional table view showing all departments
+2. **Tree View** - Hierarchical view showing department relationships
+
+## Features
+
+### View Toggle
+- Switch between List and Tree views using the toggle buttons in the top-right corner
+- List view shows departments in a traditional table format
+- Tree view shows departments in a hierarchical structure
+
+### Tree View Functionality
+- **Hierarchical Display**: Shows parent-child relationships between departments
+- **Expandable Nodes**: Click the expand/collapse icons to show/hide sub-departments
+- **Clickable Department Names**: Click on any department name to view its details
+- **Split View**: When a department is selected, its details appear in a panel to the right
+- **Security Level Display**: Shows security level next to each department name
+
+### Split View Details Panel
+When a department is clicked in tree view, the right panel shows:
+- Department basic information (Security Level, ID)
+- List of sub-departments (if any)
+- List of employees in that department (up to 5, with count if more)
+- Close button to hide the details panel
+
+### Enhanced Forms
+- **Create Department**: Now includes parent department selection
+- **Edit Department**: Can change parent department relationships
+- **Show Department**: Displays parent department information and has tabs for:
+  - Sub-Departments: Shows child departments with add button
+  - Employee List: Shows employees in this department
+
+## Technical Implementation
+
+### Dependencies Added
+- `@mui/x-tree-view`: Provides TreeView and TreeItem components
+- Enhanced MUI components for better UI
+
+### Key Components
+- `DepartmentTreeView`: Main tree component
+- `DepartmentTreeItem`: Recursive tree item for hierarchy
+- `DepartmentDetails`: Details panel for split view
+- `AddSubDepartmentButton`: Button to create sub-departments
+
+### API Integration
+- Uses `useGetList` hook to fetch department hierarchies
+- Filters departments by `DepartmentId` to build tree structure
+- Supports real-time data updates
+
+## Usage
+1. Navigate to the Departments section
+2. Use the toggle buttons to switch between List and Tree views
+3. In Tree view:
+   - Expand/collapse departments to explore hierarchy
+   - Click department names to view details
+   - Use the split view to see department information
+   - Create sub-departments using the "Add Sub-Department" button
+
+## Benefits
+- **Better Organization**: Visualize department hierarchy clearly
+- **Improved Navigation**: Quick access to related departments
+- **Enhanced UX**: Split view allows comparing departments
+- **Efficient Management**: Easy creation of sub-departments

api_logic_server_cli/prototypes/nw/ui/reference_react_app/README.md

@@ -2,10 +2,26 @@
 
 GenAI-Logic (`genai-logic genai-add-app`) [docs here](https://apilogicserver.github.io/Docs/Admin-Vibe/), from `ui/admin/admin.yaml`.
 
-We then *Vibed it* to add cards:
+We then *Vibed it* to add dashboards, cards, trees and maps:
 
-```bash
-Update the Customer list to provide users an option to see results in a list, or in cards
+```text
+Please customize the react-app as follows:
+
+create a landing page that summarizes the architecture, and iFrame to "http://localhost:5656/dashboard"
+
+Add an option on the Employee List page to show results as cards, and 
+show the employee image in the card.
+
+Create a Department tree view component for the existing Department list page. 
+Make it collapsible/expandable and integrate it into the existing Department.js file.
+The tree should show just the Department Name as a link; 
+clicking the link opens an Information panel to the right.
+The panel is equivalent to Department Show: all the fields, plus tab sheets for related data.
+The tab sheets should provide transitions to the related data show pages (eg, the Employee page).
+
+Enhance supplier list page to include a toggle for a professional, interactive world map view.
+The map should display supplier icons on a real map with proper geography.  
+Click a supplier icon should open the Supplier show page.
 ```
 
 <br>
@@ -20,4 +36,5 @@ npm install
 npm start
 ```
 
-Open your browser at [http://localhost:3000](http://localhost:3000).
+Open your browser at [http://localhost:3000](http://localhost:3000).
+

api_logic_server_cli/prototypes/nw/ui/reference_react_app/package.json

@@ -5,16 +5,20 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^7.1.1",
     "@mui/material": "^7.1.1",
+    "@mui/x-tree-view": "^8.7.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^13.5.0",
     "compare-versions": "^6.1.1",
     "keycloak-js": "^26.2.0",
+    "leaflet": "^1.9.4",
     "react": "^19.1.0",
     "react-admin": "^5.8.3",
     "react-dom": "^19.1.0",
+    "react-leaflet": "^5.0.0",
     "react-router-dom": "^7.6.2",
     "react-scripts": "5.0.1",
     "url-join": "^5.0.0",

api_logic_server_cli/prototypes/nw/ui/reference_react_app/public/index.html

@@ -15,6 +15,9 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+          integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+          crossorigin=""/>
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

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

@@ -4,6 +4,8 @@ import { Admin, Resource, Loading } from 'react-admin';
 import { jsonapiClient } from './rav4-jsonapi-client/ra-jsonapi-client';
 import { createTheme } from '@mui/material/styles';
 import { useConf, loadHomeConf } from './Config';
+import LandingPage from './LandingPage';
+import CustomLayout from './CustomLayout';
 // End constant imports
 
 // Import each resource
@@ -55,7 +57,12 @@ const App = () => {
     const dataProvider = jsonapiClient(conf.api_root, { conf: {} }, null);
 
     return (
-        <Admin dataProvider={dataProvider} theme={theme}>
+        <Admin 
+            dataProvider={dataProvider} 
+            theme={theme}
+            dashboard={LandingPage}
+            layout={CustomLayout}
+        >
             <Resource
                 name="Customer"
                 list={CustomerList}

api_logic_server_cli/prototypes/nw/ui/reference_react_app/src/CustomLayout.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Layout, AppBar } from 'react-admin';
+import { Typography } from '@mui/material';
+
+const CustomAppBar = (props) => (
+    <AppBar {...props}>
+        <Typography variant="h6" color="inherit" sx={{ flex: 1 }}>
+            API Logic Server - Northwind Sample
+        </Typography>
+    </AppBar>
+);
+
+const CustomLayout = (props) => (
+    <Layout 
+        {...props} 
+        appBar={CustomAppBar}
+    />
+);
+
+export default CustomLayout;