changed styling for orders form

kgOrdersClient/View.AddOrder.dfm

 object FAddOrder: TFAddOrder
-  Width = 1016
-  Height = 637
+  Width = 982
+  Height = 633
   Font.Charset = ANSI_CHARSET
   Font.Color = clBlack
   Font.Height = -11
   Font.Name = 'Arial'
   Font.Style = []
   ParentFont = False
-  OnShow = WebFormShow
   object lblEntries: TWebLabel
-    Left = 0
-    Top = 336
+    Left = 61
+    Top = 79
     Width = 77
     Height = 14
     Caption = 'Showing 0 of ...'
@@ -21,8 +20,8 @@ object FAddOrder: TFAddOrder
     WidthPercent = 100.000000000000000000
   end
   object lblEntries2: TWebLabel
-    Left = 8
-    Top = 358
+    Left = 177
+    Top = 79
     Width = 49
     Height = 14
     Caption = 'lblEntries2'
@@ -32,21 +31,9 @@ object FAddOrder: TFAddOrder
     HeightPercent = 100.000000000000000000
     WidthPercent = 100.000000000000000000
   end
-  object WebLabel1: TWebLabel
-    Left = 447
-    Top = 169
-    Width = 53
-    Height = 14
-    Caption = 'Selected Id'
-    ElementID = 'lblentries2'
-    ElementFont = efCSS
-    HeightStyle = ssAuto
-    HeightPercent = 100.000000000000000000
-    WidthPercent = 100.000000000000000000
-  end
   object WebLabel2: TWebLabel
-    Left = 278
-    Top = 169
+    Left = 296
+    Top = 41
     Width = 95
     Height = 14
     Caption = 'Enter Customer Info'
@@ -56,118 +43,133 @@ object FAddOrder: TFAddOrder
     HeightPercent = 100.000000000000000000
     WidthPercent = 100.000000000000000000
   end
-  object pnlMessage: TWebPanel
-    Left = 212
+  object WebLabel1: TWebLabel
+    Left = 473
     Top = 41
-    Width = 121
-    Height = 33
-    ElementClassName = 'card'
-    ElementID = 'pnl_message'
-    ChildOrder = 5
-    ElementBodyClassName = 'card-body'
-    ElementFont = efCSS
-    ElementPosition = epRelative
-    Role = 'alert'
-    TabOrder = 0
-    object lblMessage: TWebLabel
-      Left = 28
-      Top = 9
-      Width = 44
+    Width = 53
     Height = 14
-      Caption = 'Message'
-      ElementID = 'pnl_message'
+    Caption = 'Selected Id'
+    ElementID = 'lblentries2'
     ElementFont = efCSS
-      ElementPosition = epRelative
     HeightStyle = ssAuto
     HeightPercent = 100.000000000000000000
     WidthPercent = 100.000000000000000000
   end
-    object btnCloseNotification: TWebButton
-      Left = 96
-      Top = 3
-      Width = 22
-      Height = 25
-      ChildOrder = 1
-      ElementClassName = 'btn btn-light'
-      ElementID = 'view.login.message.button'
+  object cbWebPlate: TWebCheckBox
+    Left = 58
+    Top = 53
+    Width = 113
+    Height = 22
+    Caption = 'Web Plate'
+    ChildOrder = 5
     ElementFont = efCSS
-      ElementPosition = epRelative
+    ElementPosition = epIgnore
     HeightStyle = ssAuto
     HeightPercent = 100.000000000000000000
-      Role = 'button'
     WidthStyle = ssAuto
     WidthPercent = 100.000000000000000000
-    end
+    OnClick = cbWebPlateClick
   end
   object cbCorrugatedPlate: TWebCheckBox
-    Left = 430
-    Top = 123
+    Left = 177
+    Top = 53
     Width = 113
     Height = 22
     Caption = 'Corrugated Plate'
     Checked = True
     ChildOrder = 5
+    ElementFont = efCSS
+    ElementPosition = epIgnore
+    HeightStyle = ssAuto
     HeightPercent = 100.000000000000000000
     State = cbChecked
+    WidthStyle = ssAuto
     WidthPercent = 100.000000000000000000
     OnClick = cbCorrugatedPlateClick
   end
-  object cbWebPlate: TWebCheckBox
-    Left = 562
-    Top = 123
-    Width = 113
+  object edtSearch: TWebEdit
+    Left = 296
+    Top = 55
+    Width = 146
     Height = 22
-    Caption = 'Web Plate'
-    ChildOrder = 5
+    ChildOrder = 8
+    ElementFont = efCSS
+    ElementPosition = epIgnore
+    HeightStyle = ssAuto
     HeightPercent = 100.000000000000000000
+    WidthStyle = ssAuto
     WidthPercent = 100.000000000000000000
-    OnClick = cbWebPlateClick
+    OnChange = edtSearchChange
   end
   object edtID: TWebEdit
-    Left = 447
-    Top = 183
+    Left = 475
+    Top = 55
     Width = 121
     Height = 22
     ChildOrder = 8
+    ElementFont = efCSS
+    ElementPosition = epIgnore
+    HeightStyle = ssAuto
     HeightPercent = 100.000000000000000000
+    WidthStyle = ssAuto
     WidthPercent = 100.000000000000000000
   end
   object btnConfirm: TWebButton
-    Left = 574
-    Top = 180
+    Left = 610
+    Top = 52
     Width = 96
     Height = 25
     Caption = 'Confirm'
     ChildOrder = 9
+    ElementFont = efCSS
+    ElementPosition = epIgnore
+    HeightStyle = ssAuto
     HeightPercent = 100.000000000000000000
+    WidthStyle = ssAuto
     WidthPercent = 100.000000000000000000
     OnClick = btnConfirmClick
   end
   object btnCancel: TWebButton
-    Left = 682
-    Top = 180
+    Left = 768
+    Top = 52
     Width = 96
     Height = 25
     Caption = 'Cancel'
     ChildOrder = 9
+    ElementFont = efCSS
+    ElementPosition = epIgnore
+    HeightStyle = ssAuto
     HeightPercent = 100.000000000000000000
+    WidthStyle = ssAuto
     WidthPercent = 100.000000000000000000
     OnClick = btnCancelClick
   end
+  object pnlFNCGrid: TWebPanel
+    Left = 0
+    Top = 124
+    Width = 982
+    Height = 509
+    Align = alBottom
+    ChildOrder = 10
+    ElementPosition = epRelative
+    TabOrder = 6
+    ExplicitTop = 128
+    ExplicitWidth = 1016
     object TMSFNCGrid1: TTMSFNCGrid
-    Left = 132
-    Top = 227
-    Width = 803
-    Height = 353
-    AdaptToStyle = True
+      Left = 0
+      Top = 0
+      Width = 982
+      Height = 509
+      Align = alClient
       ParentDoubleBuffered = False
       DoubleBuffered = True
-    TabOrder = 6
+      TabOrder = 0
       DefaultRowHeight = 40.000000000000000000
       FixedColumns = 0
       ColumnCount = 0
       RowCount = 1
       Options.Bands.Enabled = True
+      Options.ColumnSize.Stretch = True
       Options.Editing.CalcFormat = '%g'
       Options.Filtering.MultiColumn = True
       Options.Grouping.CalcFormat = '%g'
@@ -241,47 +243,27 @@ object FAddOrder: TFAddOrder
           Font.Style = []
           ID = ''
           Width = 68.000000000000000000
-      end
-      item
-        BorderWidth = 1
-        FixedFont.Charset = DEFAULT_CHARSET
-        FixedFont.Color = clWindowText
-        FixedFont.Height = -11
-        FixedFont.Name = 'Tahoma'
-        FixedFont.Style = []
-        Font.Charset = DEFAULT_CHARSET
-        Font.Color = clWindowText
-        Font.Height = -11
-        Font.Name = 'Tahoma'
-        Font.Style = []
-        ID = ''
-        Width = 68.000000000000000000
         end>
       DefaultFont.Charset = DEFAULT_CHARSET
       DefaultFont.Color = clBlack
       DefaultFont.Height = -11
       DefaultFont.Name = 'Segoe UI'
       DefaultFont.Style = []
-    Stroke.Color = 15987699
       TopRow = 1
-    Appearance.FixedLayout.Fill.Kind = gfkGradient
-    Appearance.FixedLayout.Fill.Color = 16382457
+      Appearance.FixedLayout.Fill.Color = 16380654
       Appearance.FixedLayout.Fill.ColorTo = 16382457
-    Appearance.FixedLayout.Stroke.Color = 15987699
       Appearance.FixedLayout.Font.Charset = DEFAULT_CHARSET
-    Appearance.FixedLayout.Font.Color = clBlack
-    Appearance.FixedLayout.Font.Height = -11
+      Appearance.FixedLayout.Font.Color = 4539717
+      Appearance.FixedLayout.Font.Height = -13
       Appearance.FixedLayout.Font.Name = 'Tahoma'
       Appearance.FixedLayout.Font.Style = [fsBold]
-    Appearance.NormalLayout.Fill.Color = -1
-    Appearance.NormalLayout.Stroke.Color = 15987699
+      Appearance.NormalLayout.Fill.Color = 16578806
       Appearance.NormalLayout.Font.Charset = DEFAULT_CHARSET
-    Appearance.NormalLayout.Font.Color = clBlack
+      Appearance.NormalLayout.Font.Color = 8026746
       Appearance.NormalLayout.Font.Height = -11
       Appearance.NormalLayout.Font.Name = 'Tahoma'
       Appearance.NormalLayout.Font.Style = []
-    Appearance.GroupLayout.Fill.Kind = gfkGradient
-    Appearance.GroupLayout.Fill.Color = 15385233
+      Appearance.GroupLayout.Fill.Color = 12817262
       Appearance.GroupLayout.Fill.ColorTo = 15385233
       Appearance.GroupLayout.Stroke.Color = 15987699
       Appearance.GroupLayout.Font.Charset = DEFAULT_CHARSET
@@ -289,8 +271,7 @@ object FAddOrder: TFAddOrder
       Appearance.GroupLayout.Font.Height = -11
       Appearance.GroupLayout.Font.Name = 'Tahoma'
       Appearance.GroupLayout.Font.Style = []
-    Appearance.SummaryLayout.Fill.Kind = gfkGradient
-    Appearance.SummaryLayout.Fill.Color = 15385233
+      Appearance.SummaryLayout.Fill.Color = 14009785
       Appearance.SummaryLayout.Fill.ColorTo = 15385233
       Appearance.SummaryLayout.Stroke.Color = 15987699
       Appearance.SummaryLayout.Font.Charset = DEFAULT_CHARSET
@@ -298,37 +279,30 @@ object FAddOrder: TFAddOrder
       Appearance.SummaryLayout.Font.Height = -11
       Appearance.SummaryLayout.Font.Name = 'Tahoma'
       Appearance.SummaryLayout.Font.Style = []
-    Appearance.SelectedLayout.Fill.Kind = gfkGradient
-    Appearance.SelectedLayout.Fill.Color = 15385233
+      Appearance.SelectedLayout.Fill.Color = 16441019
       Appearance.SelectedLayout.Fill.ColorTo = 15385233
-    Appearance.SelectedLayout.Stroke.Color = 15987699
       Appearance.SelectedLayout.Font.Charset = DEFAULT_CHARSET
-    Appearance.SelectedLayout.Font.Color = clBlack
+      Appearance.SelectedLayout.Font.Color = 4539717
       Appearance.SelectedLayout.Font.Height = -11
       Appearance.SelectedLayout.Font.Name = 'Tahoma'
       Appearance.SelectedLayout.Font.Style = []
-    Appearance.FocusedLayout.Fill.Kind = gfkGradient
-    Appearance.FocusedLayout.Fill.Color = 15385233
+      Appearance.FocusedLayout.Fill.Color = 16039284
       Appearance.FocusedLayout.Fill.ColorTo = 15385233
-    Appearance.FocusedLayout.Stroke.Color = 15987699
       Appearance.FocusedLayout.Font.Charset = DEFAULT_CHARSET
-    Appearance.FocusedLayout.Font.Color = clBlack
+      Appearance.FocusedLayout.Font.Color = 4539717
       Appearance.FocusedLayout.Font.Height = -11
       Appearance.FocusedLayout.Font.Name = 'Tahoma'
       Appearance.FocusedLayout.Font.Style = []
-    Appearance.FixedSelectedLayout.Fill.Kind = gfkGradient
-    Appearance.FixedSelectedLayout.Fill.Color = 15385233
+      Appearance.FixedSelectedLayout.Fill.Color = clLightsteelblue
       Appearance.FixedSelectedLayout.Fill.ColorTo = 15385233
-    Appearance.FixedSelectedLayout.Stroke.Color = 15987699
       Appearance.FixedSelectedLayout.Font.Charset = DEFAULT_CHARSET
       Appearance.FixedSelectedLayout.Font.Color = clBlack
       Appearance.FixedSelectedLayout.Font.Height = -11
       Appearance.FixedSelectedLayout.Font.Name = 'Tahoma'
       Appearance.FixedSelectedLayout.Font.Style = []
-    Appearance.BandLayout.Fill.Color = clLightyellow
-    Appearance.BandLayout.Stroke.Color = 15987699
+      Appearance.BandLayout.Fill.Color = 16711679
       Appearance.BandLayout.Font.Charset = DEFAULT_CHARSET
-    Appearance.BandLayout.Font.Color = clWindowText
+      Appearance.BandLayout.Font.Color = 8026746
       Appearance.BandLayout.Font.Height = -11
       Appearance.BandLayout.Font.Name = 'Tahoma'
       Appearance.BandLayout.Font.Style = []
@@ -337,26 +311,18 @@ object FAddOrder: TFAddOrder
       LeftCol = 0
       ScrollMode = scmItemScrolling
       DesignTimeSampleData = True
+      ExplicitWidth = 1016
     end
-  object edtSearch: TWebEdit
-    Left = 278
-    Top = 183
-    Width = 146
-    Height = 22
-    ChildOrder = 8
-    HeightPercent = 100.000000000000000000
-    WidthPercent = 100.000000000000000000
-    OnChange = edtSearchChange
   end
   object XDataWebClient1: TXDataWebClient
     Connection = DMConnection.ApiConnection
-    Left = 88
-    Top = 434
+    Left = 382
+    Top = 576
   end
   object xdwdsCustomers: TXDataWebDataSet
     Connection = DMConnection.ApiConnection
-    Left = 84
-    Top = 490
+    Left = 288
+    Top = 578
     object xdwdsCustomersID: TIntegerField
       FieldName = 'ID'
     end

kgOrdersClient/View.AddOrder.html

-<div class="row">
-    <div class="col-12">
-        <div class="container mt-4">
-            <div class="row justify-content-center">
-                <div class="col-12 col-md-8">
-                    <div class="row">
-                        <div class="col-sm">
-                            <div id="pnl_message" class="alert alert-danger">
-                                <button id="view.login.message.button" type="button" class="btn-close" aria-label="Close"></button>
-                                <span id="view.login.message.label"></span>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <label id="lblentries"></label>
-                    </div>
-
-                    <label id="lblentries2"></label>
-                    <nav aria-label="Page navigation">
-                        <ul class="pagination justify-content-center" id="pagination">
-                            <!-- Pagination items will be added dynamically via Delphi code -->
-                        </ul>
-                    </nav>
-                </div>
-            </div>
-        </div>
-    </div>
+<div>
+</div>

kgOrdersClient/View.AddOrder.pas

@@ -10,18 +10,10 @@ uses
   VCL.TMSFNCGridCell, VCL.TMSFNCGridOptions, VCL.TMSFNCCustomComponent,
   VCL.TMSFNCCustomGrid, VCL.TMSFNCGridDatabaseAdapter, VCL.TMSFNCCustomControl,
   VCL.TMSFNCCustomScrollControl, WEBLib.DB, XData.Web.JsonDataset, Vcl.StdCtrls,
-  Vcl.Controls, ConnectionModule;
+  Vcl.Controls, ConnectionModule, WEBLib.WebCtrls;
 
 type
   TFAddOrder = class(TWebForm)
-    lblEntries: TWebLabel;
-    lblEntries2: TWebLabel;
-    edtSearch: TWebEdit;
-    edtID: TWebEdit;
-    pnlMessage: TWebPanel;
-    lblMessage: TWebLabel;
-    btnCloseNotification: TWebButton;
-    btnCancel: TWebButton;
     XDataWebClient1: TXDataWebClient;
     wdsCustomers: TWebDataSource;
     xdwdsCustomers: TXDataWebDataSet;
@@ -29,13 +21,18 @@ type
     xdwdsCustomersNAME: TStringField;
     xdwdsCustomersSHORT_NAME: TStringField;
     xdwdsCustomersADDRESS: TStringField;
-    TMSFNCGrid1: TTMSFNCGrid;
-    btnConfirm: TWebButton;
-    cbCorrugatedPlate: TWebCheckBox;
     cbWebPlate: TWebCheckBox;
-    WebLabel1: TWebLabel;
+    lblEntries: TWebLabel;
+    cbCorrugatedPlate: TWebCheckBox;
+    lblEntries2: TWebLabel;
+    edtSearch: TWebEdit;
     WebLabel2: TWebLabel;
-    procedure WebFormShow(Sender: TObject);
+    WebLabel1: TWebLabel;
+    edtID: TWebEdit;
+    btnConfirm: TWebButton;
+    btnCancel: TWebButton;
+    pnlFNCGrid: TWebPanel;
+    TMSFNCGrid1: TTMSFNCGrid;
     procedure cbCorrugatedPlateClick(Sender: TObject);
     procedure cbWebPlateClick(Sender: TObject);
     procedure btnConfirmClick(Sender: TObject);
@@ -47,6 +44,7 @@ type
     procedure PopulateGridManually;
     procedure ApplyFilter;
   public
+  class function CreateForm(AElementID: string): TWebForm;
   end;
 
 var
@@ -56,13 +54,23 @@ implementation
 
 {$R *.dfm}
 
-procedure TFAddOrder.WebFormShow(Sender: TObject);
+
+
+class function TFAddOrder.CreateForm(AElementID: string): TWebForm;
 begin
-  getCustomers(); // Fetch and populate the grid with customer data
+  Application.CreateForm(TFAddOrder, AElementID, Result,
+    procedure(AForm: TObject)
+    begin
+      with TFAddOrder(AForm) do
+      begin
+        GetCustomers();
+      end;
+    end
+  );
 end;
 
-[async]
-procedure TFAddOrder.getCustomers();
+
+[async] procedure TFAddOrder.getCustomers();
 var
   xdcResponse: TXDataClientResponse;
   customerList: TJSObject;
@@ -80,6 +88,7 @@ begin
   PopulateGridManually;
 end;
 
+
 procedure TFAddOrder.PopulateGridManually;
 var
   RowIndex: Integer;
@@ -89,17 +98,15 @@ begin
     TMSFNCGrid1.Clear; // Clear any existing data
 
     // Set up column headers
-    TMSFNCGrid1.ColumnCount := 4;
+    TMSFNCGrid1.ColumnCount := 3;
     TMSFNCGrid1.RowCount := 1;
     TMSFNCGrid1.Cells[0, 0] := 'ID';
     TMSFNCGrid1.Cells[1, 0] := 'Short Name';
     TMSFNCGrid1.Cells[2, 0] := 'Name';
-    TMSFNCGrid1.Cells[3, 0] := 'Address';
 
-    TMSFNCGrid1.ColumnWidths[0] := 40;
-    TMSFNCGrid1.ColumnWidths[1] := 80;
-    TMSFNCGrid1.ColumnWidths[2] := 250;
-    TMSFNCGrid1.ColumnWidths[3] := 400;
+//    TMSFNCGrid1.ColumnWidths[0] := 40;
+//    TMSFNCGrid1.ColumnWidths[1] := 80;
+//    TMSFNCGrid1.ColumnWidths[2] := 250;
 
     // Populate the grid with data from the dataset
     xdwdsCustomers.First;
@@ -112,7 +119,6 @@ begin
       TMSFNCGrid1.Cells[0, RowIndex] := xdwdsCustomers.FieldByName('ID').AsString;
       TMSFNCGrid1.Cells[1, RowIndex] := xdwdsCustomers.FieldByName('SHORT_NAME').AsString;
       TMSFNCGrid1.Cells[2, RowIndex] := xdwdsCustomers.FieldByName('NAME').AsString;
-      TMSFNCGrid1.Cells[3, RowIndex] := xdwdsCustomers.FieldByName('ADDRESS').AsString;
 
       Inc(RowIndex);
       xdwdsCustomers.Next;

kgOrdersClient/View.Main.dfm

@@ -128,7 +128,11 @@ object FViewMain: TFViewMain
     Width = 471
     Height = 369
     ElementID = 'main.webpanel'
+    HeightStyle = ssAuto
+    WidthStyle = ssAuto
     ChildOrder = 3
+    ElementFont = efCSS
+    ElementPosition = epIgnore
     TabOrder = 0
   end
   object WebMessageDlg1: TWebMessageDlg

kgOrdersClient/View.Main.html

@@ -45,13 +45,13 @@
         </div>
     </nav>
 
-    <div id="page-wrapper" class="container-fluid">
+    <div class="container-fluid">
         <div class="row">
             <div id="main.webpanel" class="col-12"></div>
         </div>
         <div class="row">
             <div class="col-12">
-                <div class="form-outline mb-4">
+                <div class="form-outline">
                     <textarea class="form-control" id="main.debugmemo" rows="4"></textarea>
                 </div>
             </div>

kgOrdersClient/View.Orders.dfm

@@ -35,30 +35,11 @@ object FViewOrders: TFViewOrders
     HeightPercent = 100.000000000000000000
     WidthPercent = 100.000000000000000000
   end
-  object wcbPageSize: TWebComboBox
-    Left = -4
-    Top = 52
-    Width = 145
-    Height = 21
-    ElementClassName = 'custom-select'
-    ElementID = 'wcbpagesize'
-    ElementFont = efCSS
-    HeightStyle = ssAuto
-    HeightPercent = 100.000000000000000000
-    Text = '10'
-    WidthPercent = 100.000000000000000000
-    ItemIndex = -1
-    Items.Strings = (
-      '10'
-      '25'
-      '50')
-  end
   object wcbSortBy: TWebComboBox
     Left = 0
     Top = 18
     Width = 145
     Height = 21
-    ElementClassName = 'custom-select'
     ElementID = 'wcbsortby'
     ElementFont = efCSS
     HeightStyle = ssAuto
@@ -85,7 +66,6 @@ object FViewOrders: TFViewOrders
     Height = 25
     Caption = 'Apply'
     ChildOrder = 7
-    ElementClassName = 'btn btn-light'
     ElementID = 'btnapply'
     ElementFont = efCSS
     HeightStyle = ssAuto
@@ -94,8 +74,8 @@ object FViewOrders: TFViewOrders
     OnClick = btnApplyClick
   end
   object edtSearch: TWebEdit
-    Left = 48
-    Top = 382
+    Left = 162
+    Top = 44
     Width = 121
     Height = 22
     HelpType = htKeyword
@@ -115,7 +95,6 @@ object FViewOrders: TFViewOrders
     Height = 25
     Caption = 'Add Order'
     ChildOrder = 5
-    ElementClassName = 'btn btn-light'
     ElementID = 'btnaddorder'
     ElementFont = efCSS
     HeightStyle = ssAuto
@@ -130,7 +109,6 @@ object FViewOrders: TFViewOrders
     Height = 25
     Caption = 'Show Filters'
     ChildOrder = 6
-    ElementClassName = 'btn btn-light'
     ElementID = 'btnfilters'
     ElementFont = efCSS
     HeightStyle = ssAuto
@@ -143,7 +121,6 @@ object FViewOrders: TFViewOrders
     Top = 16
     Width = 170
     Height = 22
-    ElementClassName = 'form-control'
     ElementID = 'dtpstartdate'
     HeightStyle = ssAuto
     BorderStyle = bsSingle
@@ -159,7 +136,6 @@ object FViewOrders: TFViewOrders
     Top = 16
     Width = 170
     Height = 22
-    ElementClassName = 'form-control'
     ElementID = 'dtpenddate'
     HeightStyle = ssAuto
     BorderStyle = bsSingle
@@ -182,7 +158,7 @@ object FViewOrders: TFViewOrders
     ElementFont = efCSS
     ElementPosition = epRelative
     Role = 'alert'
-    TabOrder = 8
+    TabOrder = 7
     object lblMessage: TWebLabel
       Left = 28
       Top = 9
@@ -221,7 +197,6 @@ object FViewOrders: TFViewOrders
     Height = 25
     Caption = 'Set Status'
     ChildOrder = 11
-    ElementClassName = 'btn btn-light'
     ElementID = 'btnsetstatus'
     ElementFont = efCSS
     HeightStyle = ssAuto
@@ -229,13 +204,12 @@ object FViewOrders: TFViewOrders
     WidthPercent = 100.000000000000000000
   end
   object WebButton2: TWebButton
-    Left = 344
+    Left = 346
     Top = 79
     Width = 96
     Height = 25
     Caption = 'PDF'
     ChildOrder = 12
-    ElementClassName = 'btn btn-light'
     ElementID = 'btngeneratepdf'
     ElementFont = efCSS
     HeightStyle = ssAuto
@@ -257,22 +231,19 @@ object FViewOrders: TFViewOrders
     WidthPercent = 100.000000000000000000
     OnClick = btnConfirmClick
   end
-  object wcbCustomers: TWebDBLookupComboBox
-    Left = 550
-    Top = 286
-    Width = 145
-    Height = 22
-    ElementClassName = 'custom-select'
-    ElementID = 'wcbcustomer'
+  object pnlOrders: TWebPanel
+    Left = 128
+    Top = 160
+    Width = 343
+    Height = 187
+    ElementClassName = 'card'
+    ElementID = 'pnl_orders'
+    Caption = 'pnlOrders'
+    ChildOrder = 15
+    ElementBodyClassName = 'card-body'
     ElementFont = efCSS
-    HeightPercent = 100.000000000000000000
-    WidthPercent = 100.000000000000000000
-    OnChange = wcbCustomersChange
-    DataField = 'CURR_ID'
-    DataSource = wdsSave
-    KeyField = 'ID'
-    ListField = 'NAME'
-    ListSource = wdsCustomers
+    TabOrder = 11
+    Visible = False
   end
   object XDataWebClient1: TXDataWebClient
     Connection = DMConnection.ApiConnection

kgOrdersClient/View.Orders.html

-<div class="row">
-    <div class="col-12">
-        <div class="container mt-4">
-            <div class="row justify-content-center">
-                <div class="col-12 col-md-8">
+<div class="container vh-100 d-flex flex-column pb-5" style="max-width: 80%;">
+
+    <!-- Alert Section -->
     <div class="row">
         <div class="col-sm">
             <div id="pnl_message" class="alert alert-danger">
@@ -11,107 +9,129 @@
             </div>
         </div>
     </div>
-                   <div class="mb-3" id="filter_info" style="display: none;">
-                        <div class="row">
-                            <!-- Search Input Field -->
+
+    <!-- Filters Section -->
+    <div class="container mb-3">
+        <!-- Filters Row (Hidden Initially) -->
+        <div id="filter_info" style="display: none;">
+            <div class="row justify-content-center">
                 <div class="col-auto">
-                                <label class='pe-2' style="font-weight: 700;">Search:</label>
-                                <input class="form-control input-sm" id="edtsearch">
+                    <label for="edtsearch" class="fw-bold">Search:</label>
+                    <input type="text" id="edtsearch" class="form-control">
                 </div>
-                            <!-- Start Date Input Field -->
                 <div class="col-auto">
-                                <label class='pe-2' style="font-weight: 700;">Start Date:</label>
-                                <input class="form-control input-sm" id="dtpstartdate" type="date">
+                    <label for="dtpstartdate" class="fw-bold">Start Date:</label>
+                    <input type="date" id="dtpstartdate" class="form-control">
                 </div>
-                            <!-- End Date Input Field -->
                 <div class="col-auto">
-                                <label class='pe-2' style="font-weight: 700;">End Date:</label>
-                                <input class="form-control input-sm" id="dtpenddate" type="date">
+                    <label for="dtpenddate" class="fw-bold">End Date:</label>
+                    <input type="date" id="dtpenddate" class="form-control">
                 </div>
-                            <!-- Status Type Dropdown -->
                 <div class="col-auto">
-                                <label style="font-weight: 700;">Status Type:</label>
-                                <div>
-                                    <select class="form-control input-sm" id="wcbsortby" style="font-size: 1.00rem; height: calc(2.25rem + 2px); padding-top: 0.375rem; padding-bottom: 0.375rem;"></select>
-                                </div>
-
+                    <label for="wcbsortby" class="fw-bold">Property Type*</label>
+                    <select class="form-select" id="wcbsortby"></select>
                 </div>
-                            <!-- Button (Align this with the inputs) -->
                 <div class="col-auto d-flex align-items-end">
-                                <label style="font-weight: 700;"> </label>
-                                <button class="btn btn-primary btn-sm" id="btnapply">Apply</button>
+                    <button id="btnapply" class="btn btn-primary">Apply</button>
                 </div>
             </div>
         </div>
-                    <form class="form-inline">
-                        <div class= "row">
-                            <div class="col-sm-3">
-                                <label class="py-2" style="font-weight: 700;">Show <select class="custom-select" id="wcbpagesize" style="font-size: 1.00rem;"></select> entries</label>
-                            </div>
-                            <div class="col-sm-2">
-                                <button class= "ps-3" id="btnaddorder"></button>
+
+        <!-- Actions Row -->
+        <div class="row mt-3 justify-content-center">
+            <div class="col-auto">
+                <button id="btnaddorder" class="btn btn-secondary">Add Order</button>
             </div>
-                            <div class="col-sm-2">
-                                <button class= "ps-3" id="btnsetstatus"></button>
+            <div class="col-auto">
+                <button id="btnsetstatus" class="btn btn-secondary">Set Status</button>
             </div>
-                            <div class="col-sm-2">
-                                <button class= "ps-3" id="btngeneratepdf"></button>
+            <div class="col-auto">
+                <button id="btngeneratepdf" class="btn btn-secondary">Generate PDF</button>
             </div>
-                            <div class="col-sm-2">
-                                <button class= "ps-3" id="btnfilters"></button>
+            <div class="col-auto">
+                <button id="btnfilters" class="btn btn-secondary">Filters</button>
             </div>
         </div>
-                    </form>
     </div>
+
+
+
+
+    <!-- Entries Label Section -->
+    <div class="container mt-3">
         <div class="row">
+            <div class="col">
                 <label id="lblentries"></label>
             </div>
-                    <table class="table table-responsive table-striped table-bordered" id="tblPhoneGrid">
-                        <thead class="thead-dark">
+        </div>
+    </div>
+
+    <!-- Table Section -->
+    <div id="order_table_section" class="overflow-auto mt-3 flex-grow-1">
+        <table id="tblPhoneGrid" class="table table-striped table-bordered">
+            <thead style="position: sticky; top: 0; z-index: 1; background-color: white; border-bottom: 2px solid #dee2e6;">
                 <tr>
-                                <th scope="col">Order ID</th>
-                                <th scope="col">Company Name</th>
-                                <th scope="col">Job Name</th>
-                                <th scope="col">Order Date</th>
-                                <th scope="col">Proof Due</th>
-                                <th scope="col">Proof Date</th>
-                                <th scope="col">Art Due</th>
-                                <th scope="col">Art Done</th>
-                                <th scope="col">Plate Due</th>
-                                <th scope="col">Plate Done</th>
-                                <th scope="col">Mount Due</th>
-                                <th scope="col">Mount Done</th>
-                                <th scope="col">Ship Due</th>
-                                <th scope="col">Ship Done</th>
-                                <th scope="col">Price</th>
-                                <th scope="col">Quickbooks Reference Number</th>
-                                <th scope="col">Colors</th>
+                    <th>Order ID</th>
+                    <th>Company Name</th>
+                    <th>Job Name</th>
+                    <th>Order Date</th>
+                    <th>Proof Due</th>
+                    <th>Proof Date</th>
+                    <th>Art Due</th>
+                    <th>Art Done</th>
+                    <th>Plate Due</th>
+                    <th>Plate Done</th>
+                    <th>Mount Due</th>
+                    <th>Mount Done</th>
+                    <th>Ship Due</th>
+                    <th>Ship Done</th>
+                    <th>Price</th>
+                    <th>QuickBooks Ref Number</th>
+                    <th>Colors</th>
                 </tr>
             </thead>
             <tbody>
-                            <!-- Rows will be added dynamically via Delphi code -->
+                <!-- Rows will be dynamically added -->
             </tbody>
         </table>
+    </div>
+
+    <!-- Entries Label Section (Below Table) -->
+    <div class="container mt-3">
+        <div class="row">
+            <div class="col">
                 <label id="lblentries2"></label>
+            </div>
+        </div>
+    </div>
+
+    <!-- Pagination Section -->
+    <div class="container mt-4">
+        <div class="row justify-content-center">
             <nav aria-label="Page navigation">
-                        <ul class="pagination justify-content-center" id="pagination">
-                            <!-- Pagination items will be added dynamically via Delphi code -->
+                <ul id="pagination" class="pagination">
+                    <!-- Pagination items added dynamically -->
                 </ul>
             </nav>
         </div>
     </div>
-        </div>
-    </div>
-<!-- Modal -->
-<div class="modal fade" id="confirmation_modal" tabindex="-1" aria-labelledby="confirmation_modal_label" aria-hidden="true">
+</div>
+
+<!-- Floating Panel -->
+<div id="pnl_orders" class="position-fixed top-50 start-50 translate-middle bg-white shadow rounded-sm p-4 d-none" style="z-index: 1050; width: 75%;">
+    <!-- Content dynamically added -->
+</div>
+
+<!-- Confirmation Modal -->
+<div id="confirmation_modal" class="modal fade" tabindex="-1" aria-labelledby="confirmation_modal_label" aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-        <h5 class="modal-title" id="confirmation_modal_label">Select Customer</h5>
+                <h5 id="confirmation_modal_label" class="modal-title">Select Customer</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">
-        <select class="form-control input-sm" id="wcbcustomer"></select>
+                <select id="wcbcustomer" class="form-control input-sm"></select>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
@@ -120,3 +140,4 @@
         </div>
     </div>
 </div>
+

kgOrdersClient/View.Orders.pas

@@ -13,14 +13,13 @@ uses
   WEBLib.Forms, WEBLib.Dialogs, WEBLib.Menus, WEBLib.ExtCtrls, WEBLib.StdCtrls,
   WEBLib.JSON, Auth.Service, XData.Web.Client, WebLib.Storage,
   ConnectionModule, App.Types, Vcl.StdCtrls, Vcl.Controls, WEBLib.DBCtrls,
-  Data.DB, XData.Web.JsonDataset, XData.Web.Dataset, WEBLib.DB;
+  XData.Web.JsonDataset, WEBLib.DB, Data.DB, XData.Web.Dataset, View.AddOrder;
 
 type
   TFViewOrders = class(TWebForm)
     XDataWebClient1: TXDataWebClient;
     XDataWebDataSet1: TXDataWebDataSet;
     lblEntries: TWebLabel;
-    wcbPageSize: TWebComboBox;
     wcbSortBy: TWebComboBox;
     btnApply: TWebButton;
     edtSearch: TWebEdit;
@@ -55,7 +54,6 @@ type
     WebButton2: TWebButton;
     btnConfirm: TWebButton;
     wdsCustomers: TWebDataSource;
-    wcbCustomers: TWebDBLookupComboBox;
     xdwdsCustomers: TXDataWebDataSet;
     xdwdsCustomersNAME: TStringField;
     xdwdsCustomersID: TIntegerField;
@@ -63,6 +61,7 @@ type
     xdwdsSave: TXDataWebDataSet;
     wdsSave: TWebDataSource;
     xdwdsSaveCURR_ID: TIntegerField;
+    pnlOrders: TWebPanel;
     procedure WebFormCreate(Sender: TObject);
     procedure btnApplyClick(Sender: TObject);
     procedure btnSearchClick(Sender: TObject);
@@ -71,7 +70,6 @@ type
     procedure btnCloseNotificationClick(Sender: TObject);
     procedure WebFormShow(Sender: TObject);
     procedure btnConfirmClick(Sender: TObject);
-    procedure wcbCustomersChange(Sender: TObject);
   private
     FChildForm: TWebForm;
     procedure AddRowToTable(temp: string);
@@ -106,7 +104,7 @@ var
 implementation
 
 uses
-  XData.Model.Classes, View.Main, View.AddOrder;
+  XData.Model.Classes, View.Main;
 
 {$R *.dfm}
 
@@ -121,7 +119,6 @@ begin
   DMConnection.ApiConnection.Connected := True;
   PageNumber := 1;
   TotalPages := 1; // Initial total pages
-  wcbPageSize.Text := '10';
   wcbSortBy.Text := 'PROOF';
   //today := TDateTime.Today;
   dtpStartDate.Date := 0;
@@ -169,25 +166,21 @@ end;
 
 procedure TFViewOrders.ShowOrderListForm();
 var
-  newform: TFAddOrder;
+  OrdersPanel: TJSHTMLElement;
 begin
-  newform := TFAddOrder.CreateNew;
+  // Get the panel element for orders
+  OrdersPanel := TJSHTMLElement(document.getElementById('pnl_orders'));
 
-  newform.Caption := 'Select Customer and Order Type';
-  newForm.Popup := True;
-  newForm.Border := fbDialog;
-  console.log(newForm.GetElementHandle);
+  // Hide the panel before loading the form
+  if Assigned(OrdersPanel) then
+    OrdersPanel.style.setProperty('display', 'none');
 
-  // used to manage Back button handling to close subform
-  window.location.hash := 'subform';
+  // Create the order list form, passing the ElementID
+  TFAddOrder.CreateForm(pnlOrders.ElementID);
 
-  newform.ShowModal(
-    procedure(AValue: TModalResult)
-    begin
-      if newform.edtID.Text <> '' then
-        orderEntry('', newForm.edtID.Text, 'ADD');
-    end
-  );
+  // Show the panel after the form is created
+  if Assigned(OrdersPanel) then
+    OrdersPanel.style.setProperty('display', 'block');
 end;
 
 procedure TFViewOrders.AddRowToTable(temp: string);
@@ -657,7 +650,7 @@ var
 searchOptions: string;
 begin
   PageNumber := 1;
-  PageSize := StrToInt(wcbPageSize.Text);
+  PageSize := 50;
   OrderBy := wcbSortBy.Text;
   searchOptions :=  '&pagenumber=' + IntToStr(PageNumber) +
                     '&pagesize=' + IntToStr(PageSize) +
@@ -749,7 +742,7 @@ var
 searchOptions: string;
 begin
   //PageNumber := 1;
-  PageSize := StrToInt(wcbPageSize.Text);
+  PageSize := 50;
   OrderBy := wcbSortBy.Text;
   searchOptions :=  '&pagenumber=' + IntToStr(PageNumber) +
                     '&pagesize=' + IntToStr(PageSize) +
@@ -780,10 +773,5 @@ begin
   end;
 end;
 
-procedure TFViewOrders.wcbCustomersChange(Sender: TObject);
-begin
-  console.log(wcbCustomers.Value);
-end;
 
 end.
-

kgOrdersClient/template/css/app.css

@@ -282,3 +282,4 @@ input[type="text"] {
 
 
 
+

kgOrdersServer/Source/Main.dfm

@@ -16,8 +16,8 @@ object FMain: TFMain
     597)
   TextHeight = 13
   object memoInfo: TMemo
-    Left = 8
-    Top = 40
+    Left = 20
+    Top = 44
     Width = 744
     Height = 549
     Anchors = [akLeft, akTop, akRight, akBottom]

kgOrdersServer/kgOrdersServer.ini

 [Options]
-LogFileNum=22
+LogFileNum=28
 
 [Database]
 --Server=192.168.159.132
-Server=192.168.198.129
---Server=192.168.75.133
+--Server=192.168.198.129
+Server=192.168.102.130