Inisialisasi Kerangka Program POS

* Halaman utama
* Sub-halaman daftar barang di dalam nota
* Logic UI untuk perubahan tab
* Aset-aset awal
* Styling button menjadi seperti tab untuk sub halaman daftar barang

nbactions.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<actions>
+        <action>
+            <actionName>run</actionName>
+            <packagings>
+                <packaging>jar</packaging>
+            </packagings>
+            <goals>
+                <goal>process-classes</goal>
+                <goal>org.codehaus.mojo:exec-maven-plugin:1.5.0:exec</goal>
+            </goals>
+            <properties>
+                <exec.args>-classpath %classpath id.amigogroup.posterminal.ShadeApp</exec.args>
+                <exec.executable>java</exec.executable>
+            </properties>
+        </action>
+    </actions>

pom.xml

@@ -0,0 +1,96 @@
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
+    <modelVersion>4.0.0</modelVersion>
+    <groupId>id.amigogroup</groupId>
+    <artifactId>PosTerminal</artifactId>
+    <version>1.0.0</version>
+    <properties>
+        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
+        <maven.compiler.source>11</maven.compiler.source>
+        <maven.compiler.target>11</maven.compiler.target>
+        <javafx.version>11.0.2</javafx.version>
+        <mainClass>id.amigogroup.posterminal.ShadeApp</mainClass>
+    </properties>
+    <dependencies>
+        <dependency>
+            <groupId>org.openjfx</groupId>
+            <artifactId>javafx-controls</artifactId>
+            <version>${javafx.version}</version>
+        </dependency>
+        <dependency>
+            <groupId>org.openjfx</groupId>
+            <artifactId>javafx-fxml</artifactId>
+            <version>${javafx.version}</version>
+        </dependency>
+        <dependency>
+            <groupId>org.openjfx</groupId>
+            <artifactId>javafx-graphics </artifactId>
+            <version>${javafx.version}</version>
+            <classifier>win</classifier>
+        </dependency>
+        <!--        <dependency>
+            <groupId>org.openjfx</groupId>
+            <artifactId>javafx-graphics </artifactId>
+            <version>${javafx.version}</version>
+            <classifier>linux</classifier>
+        </dependency>
+        <dependency>
+            <groupId>org.openjfx</groupId>
+            <artifactId>javafx-graphics </artifactId>
+            <version>${javafx.version}</version>
+            <classifier>mac</classifier>
+        </dependency>-->
+    </dependencies>
+    <build>
+        <plugins><!-- Maven Shade Plugin -->
+            <plugin>
+                <groupId>org.apache.maven.plugins</groupId>
+                <artifactId>maven-shade-plugin</artifactId>
+                <version>3.2.1</version>
+                <executions>
+                    <!-- Run shade goal on package phase -->
+                    <execution>
+                        <phase>package</phase>
+                        <goals>
+                            <goal>shade</goal>
+                        </goals>
+                        <configuration>
+                            <transformers>
+                                <!-- add Main-Class to manifest file -->
+                                <transformer implementation="org.apache.maven.plugins.shade.resource.ManifestResourceTransformer">
+                                    <mainClass>${mainClass}</mainClass>
+                                </transformer>
+                            </transformers>
+                            <filters>
+                                <filter>
+                                    <artifact>*:*</artifact>
+                                    <excludes>
+                                        <exclude>META-INF/*.SF</exclude>
+                                        <exclude>META-INF/*.DSA</exclude>
+                                        <exclude>META-INF/*.RSA</exclude>
+                                    </excludes>
+                                </filter>
+                            </filters>
+                        </configuration>
+                    </execution>
+                </executions>
+            </plugin>
+            <plugin>
+                <groupId>org.apache.maven.plugins</groupId>
+                <artifactId>maven-compiler-plugin</artifactId>
+                <version>3.8.0</version>
+                <configuration>
+                    <release>11</release>
+                </configuration>
+            </plugin>
+            <plugin>
+                <groupId>org.openjfx</groupId>
+                <artifactId>javafx-maven-plugin</artifactId>
+                <version>0.0.3</version>
+                <configuration>
+                    <mainClass>${mainClass}</mainClass>
+                </configuration>
+            </plugin>
+        </plugins>
+    </build>
+</project>

src/main/java/id/amigogroup/posterminal/App.java

@@ -0,0 +1,44 @@
+package id.amigogroup.posterminal;
+
+import id.amigogroup.posterminal.util.Fucout;
+import java.util.Locale;
+import javafx.application.Application;
+import javafx.fxml.FXMLLoader;
+import javafx.scene.Parent;
+import javafx.scene.Scene;
+import javafx.scene.image.Image;
+import javafx.scene.layout.StackPane;
+import javafx.stage.Stage;
+
+/**
+ * JavaFX App
+ */
+public class App extends Application {
+
+    @Override
+    public void start(Stage stage) throws Exception {
+//        var javaVersion = SystemInfo.javaVersion();
+//        var javafxVersion = SystemInfo.javafxVersion();
+//
+//        var label = new Label("Hello, JavaFX " + javafxVersion + ", running on Java " + javaVersion + ".");
+        Locale.setDefault(Locale.forLanguageTag("in-ID"));
+        
+        Parent root = FXMLLoader.load(getClass().getResource("/fxml/FormUtama.fxml"));
+        
+        Scene scene = new Scene(root);
+        
+        stage.setScene(scene);
+        stage.setTitle(Fucout.APP_TITLE);
+        stage.getIcons().add(new Image(Fucout.APP_ICON));
+        stage.show();
+
+//        var scene = new Scene(new StackPane(label), 640, 480);
+//        stage.setScene(scene);        
+//        stage.show();
+    }
+
+    public static void main(String[] args) {
+        launch();
+    }
+
+}

src/main/java/id/amigogroup/posterminal/FormConstanta.java

@@ -0,0 +1,7 @@
+package id.amigogroup.posterminal;
+
+public class FormConstanta {
+
+    //daftarkan halaman disini
+    public static final String TRANSAKSI = "Transaksi";
+}

src/main/java/id/amigogroup/posterminal/FormFactory.java

@@ -0,0 +1,34 @@
+package id.amigogroup.posterminal;
+
+import id.amigogroup.posterminal.pos.FormTransaksiController;
+import java.io.IOException;
+import java.util.logging.Level;
+import java.util.logging.Logger;
+import javafx.fxml.FXMLLoader;
+import javafx.scene.Node;
+
+public class FormFactory {
+
+    public Node getForm(String form, FormUtamaController parent) {
+        Node node = null;
+        FXMLLoader loader = new FXMLLoader();
+        try {
+            switch (form) {
+                //daftarkan halaman yang implement mainContenInterface disini
+                case FormConstanta.TRANSAKSI:
+                    loader.setLocation(getClass().getResource("/fxml/FormTransaksi.fxml"));
+                     {
+                        node = loader.load();
+
+                    }
+                    FormTransaksiController fetc = loader.getController();
+//                    fetc.initData(parent);
+                    break;
+
+            }
+        } catch (IOException ex) {
+            Logger.getLogger(FormFactory.class.getName()).log(Level.SEVERE, null, ex);
+        }
+        return node;
+    }
+}

src/main/java/id/amigogroup/posterminal/FormUtamaController.java

@@ -0,0 +1,33 @@
+package id.amigogroup.posterminal;
+
+import java.net.URL;
+import java.util.ResourceBundle;
+import java.util.logging.Level;
+import java.util.logging.Logger;
+import javafx.fxml.FXML;
+import javafx.fxml.Initializable;
+import javafx.scene.Node;
+import javafx.scene.control.ScrollPane;
+
+public class FormUtamaController implements Initializable {
+    @FXML
+    private ScrollPane spMainContent;
+
+    private FormFactory formFactory = new FormFactory();
+    /**
+     * Initializes the controller class.
+     */
+    @Override
+    public void initialize(URL url, ResourceBundle rb) {
+        setContent(formFactory.getForm(FormConstanta.TRANSAKSI, this));
+    }
+    
+    public void setContent(Node node) {
+        try {
+            spMainContent.setContent(node);
+        } catch (NullPointerException npe) {
+            Logger.getLogger(FormUtamaController.class.getName()).log(Level.SEVERE, null, npe);
+//            AlertGenerate.getAlert(AlertGenerate.FXML_FAIL).show();
+        }
+    }
+}

src/main/java/id/amigogroup/posterminal/ShadeApp.java

@@ -0,0 +1,16 @@
+/*
+ * To change this license header, choose License Headers in Project Properties.
+ * To change this template file, choose Tools | Templates
+ * and open the template in the editor.
+ */
+package id.amigogroup.posterminal;
+
+/**
+ *
+ * @author ronal
+ */
+public class ShadeApp {
+    public static void main(String[] args) {
+        App.main(args);
+    }
+}

src/main/java/id/amigogroup/posterminal/SystemInfo.java

@@ -0,0 +1,13 @@
+package id.amigogroup.posterminal;
+
+public class SystemInfo {
+
+    public static String javaVersion() {
+        return System.getProperty("java.version");
+    }
+
+    public static String javafxVersion() {
+        return System.getProperty("javafx.version");
+    }
+
+}

src/main/java/id/amigogroup/posterminal/pos/FormTransaksiController.java

@@ -0,0 +1,99 @@
+/*
+ * To change this license header, choose License Headers in Project Properties.
+ * To change this template file, choose Tools | Templates
+ * and open the template in the editor.
+ */
+package id.amigogroup.posterminal.pos;
+
+import java.net.URL;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.ResourceBundle;
+import javafx.event.ActionEvent;
+import javafx.fxml.FXML;
+import javafx.fxml.Initializable;
+import javafx.scene.control.Button;
+import javafx.scene.control.TextField;
+import javafx.scene.input.KeyCode;
+import javafx.scene.input.KeyEvent;
+import javafx.scene.text.Text;
+
+/**
+ * FXML Controller class
+ *
+ * @author ronal
+ */
+public class FormTransaksiController implements Initializable {
+
+    @FXML
+    private TextField fldScan;
+    @FXML
+    private Button btnTunai;
+    @FXML
+    private Button btnBawaDulu;
+    @FXML
+    private Button btnBon;
+    @FXML
+    private Button btnRetur;
+    @FXML
+    private Text lblGrandTotal;
+
+    private final String BTN_TUNAI = "tunai";
+    private final String BTN_BAWA_DULU = "bawa dulu";
+    private final String BTN_BON = "bon";
+    private final String BTN_RETUR = "retur";
+
+    private List<Button> navigasi = new ArrayList<>();
+
+    /**
+     * Initializes the controller class.
+     */
+    @Override
+    public void initialize(URL url, ResourceBundle rb) {
+        navigasi.add(btnTunai);
+        navigasi.add(btnBawaDulu);
+        navigasi.add(btnBon);
+        navigasi.add(btnRetur);
+    }
+
+    @FXML
+    void btnNavigasiOnAction(ActionEvent event) {
+        Button buttonSource = (Button) event.getSource();
+        switch (buttonSource.getText().toLowerCase()) {
+            case BTN_TUNAI:
+                //ambil data tunai
+                System.out.println("ambil data tunai");
+                break;
+            case BTN_BAWA_DULU:
+                //ambil data bawa dulu
+                System.out.println("ambil data bawa dulu");
+                break;
+            case BTN_BON:
+                //ambil data bon
+                System.out.println("ambil data bon");
+                break;
+            case BTN_RETUR:
+                //ambil data retur
+                System.out.println("ambil data retur");
+                break;
+        }
+
+        for (Button button : navigasi) {
+            if (button.equals(buttonSource)) {
+                button.getStyleClass().add("button-navigasi-transaksi-selected");
+            } else {
+                button.getStyleClass().remove("button-navigasi-transaksi-selected");
+            }
+        }
+        
+        fldScan.requestFocus();
+    }
+
+    @FXML
+    void fldScanOnKeyPressed(KeyEvent event) {
+        if(event.getCode() == KeyCode.ENTER){
+            //proses scan
+            System.out.println("Scan");
+        }
+    }
+}

src/main/java/id/amigogroup/posterminal/util/Fucout.java

@@ -0,0 +1,18 @@
+/*
+ * To change this license header, choose License Headers in Project Properties.
+ * To change this template file, choose Tools | Templates
+ * and open the template in the editor.
+ */
+package id.amigogroup.posterminal.util;
+
+/**
+ *
+ * @author ronal
+ */
+public class Fucout {
+    //STRINGS
+    public static final String APP_TITLE = "Pos Terminal";
+    
+    //IMAGES URL
+    public static final String APP_ICON = "/assets/logo-mini-squared.png";
+}

src/main/resources/fxml/FormTransaksi.fxml

@@ -0,0 +1,269 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import java.lang.String?>
+<?import javafx.geometry.Insets?>
+<?import javafx.scene.control.Button?>
+<?import javafx.scene.control.Label?>
+<?import javafx.scene.control.Separator?>
+<?import javafx.scene.control.TableColumn?>
+<?import javafx.scene.control.TableView?>
+<?import javafx.scene.control.TextField?>
+<?import javafx.scene.image.Image?>
+<?import javafx.scene.image.ImageView?>
+<?import javafx.scene.layout.AnchorPane?>
+<?import javafx.scene.layout.ColumnConstraints?>
+<?import javafx.scene.layout.GridPane?>
+<?import javafx.scene.layout.HBox?>
+<?import javafx.scene.layout.RowConstraints?>
+<?import javafx.scene.layout.StackPane?>
+<?import javafx.scene.text.Font?>
+<?import javafx.scene.text.Text?>
+
+<AnchorPane id="AnchorPane" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="800.0" stylesheets="@../styles/pos_styles.css" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="id.amigogroup.posterminal.pos.FormTransaksiController">
+   <children>
+      <Label layoutX="14.0" layoutY="6.0" text="Scan Kode Tas/Kode Barang" AnchorPane.leftAnchor="14.0" AnchorPane.topAnchor="14.0" />
+      <TextField fx:id="fldScan" layoutX="14.0" layoutY="32.0" onKeyPressed="#fldScanOnKeyPressed" prefHeight="25.0" prefWidth="622.0" promptText="Masukkan kode tas dan kode barang ATAU scan kode tas dan kode barang" AnchorPane.leftAnchor="14.0" AnchorPane.rightAnchor="164.0" AnchorPane.topAnchor="32.0" />
+      <GridPane layoutX="14.0" layoutY="57.0" AnchorPane.leftAnchor="14.0" AnchorPane.rightAnchor="14.0" AnchorPane.topAnchor="57.0">
+        <columnConstraints>
+          <ColumnConstraints hgrow="SOMETIMES" percentWidth="33.3333" />
+            <ColumnConstraints hgrow="SOMETIMES" percentWidth="33.3333" />
+          <ColumnConstraints hgrow="SOMETIMES" percentWidth="33.3333" />
+        </columnConstraints>
+        <rowConstraints>
+          <RowConstraints vgrow="SOMETIMES" />
+        </rowConstraints>
+         <children>
+            <HBox alignment="CENTER_LEFT" maxWidth="1.7976931348623157E308" spacing="5.0">
+               <children>
+                  <Label text="Nomor Nota">
+                     <font>
+                        <Font size="14.0" />
+                     </font>
+                  </Label>
+                  <Label text=": -">
+                     <HBox.margin>
+                        <Insets />
+                     </HBox.margin>
+                     <font>
+                        <Font size="14.0" />
+                     </font>
+                  </Label>
+               </children>
+               <GridPane.margin>
+                  <Insets top="5.0" />
+               </GridPane.margin>
+            </HBox>
+            <HBox alignment="CENTER_LEFT" maxWidth="1.7976931348623157E308" spacing="5.0" GridPane.columnIndex="1">
+               <children>
+                  <Label text="Tanggal">
+                     <font>
+                        <Font size="14.0" />
+                     </font>
+                  </Label>
+                  <Label text=": -">
+                     <HBox.margin>
+                        <Insets />
+                     </HBox.margin>
+                     <font>
+                        <Font size="14.0" />
+                     </font>
+                  </Label>
+               </children>
+               <GridPane.margin>
+                  <Insets top="5.0" />
+               </GridPane.margin>
+            </HBox>
+            <HBox alignment="CENTER_LEFT" maxWidth="1.7976931348623157E308" spacing="5.0" GridPane.columnIndex="2">
+               <children>
+                  <Label text="Kasir">
+                     <font>
+                        <Font size="14.0" />
+                     </font>
+                  </Label>
+                  <Label text=": -">
+                     <font>
+                        <Font size="14.0" />
+                     </font>
+                  </Label>
+               </children>
+               <GridPane.margin>
+                  <Insets top="5.0" />
+               </GridPane.margin>
+            </HBox>
+         </children>
+      </GridPane>
+      <Separator layoutY="88.0" prefWidth="200.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="88.0" />
+      <Label layoutX="14.0" layoutY="94.0" text="Pelanggan" AnchorPane.leftAnchor="14.0" AnchorPane.topAnchor="94.0">
+         <font>
+            <Font name="System Bold" size="16.0" />
+         </font>
+      </Label>
+      <HBox alignment="CENTER" layoutX="14.0" layoutY="119.0" prefHeight="80.0" prefWidth="80.0" AnchorPane.leftAnchor="14.0" AnchorPane.topAnchor="119.0">
+         <children>
+            <ImageView fitHeight="80.0" fitWidth="80.0" pickOnBounds="true" preserveRatio="true">
+               <image>
+                  <Image url="@../assets/account-circle-gray.png" />
+               </image>
+            </ImageView>
+         </children>
+      </HBox>
+      <GridPane layoutX="94.0" layoutY="119.0" prefHeight="80.0" AnchorPane.leftAnchor="94.0" AnchorPane.rightAnchor="14.0" AnchorPane.topAnchor="119.0">
+        <columnConstraints>
+            <ColumnConstraints hgrow="NEVER" prefWidth="120.0" />
+            <ColumnConstraints hgrow="ALWAYS" maxWidth="250.0" />
+            <ColumnConstraints hgrow="NEVER" prefWidth="120.0" />
+          <ColumnConstraints hgrow="ALWAYS" maxWidth="1.7976931348623157E308" />
+        </columnConstraints>
+        <rowConstraints>
+          <RowConstraints />
+          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
+            <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
+        </rowConstraints>
+         <children>
+            <Label maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" text="No Member" wrapText="true" GridPane.rowIndex="1">
+               <GridPane.margin>
+                  <Insets bottom="2.0" left="14.0" top="2.0" />
+               </GridPane.margin>
+               <font>
+                  <Font size="14.0" />
+               </font>
+            </Label>
+            <Label maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" text=": -" GridPane.columnIndex="1" GridPane.rowIndex="1">
+               <font>
+                  <Font size="14.0" />
+               </font>
+               <GridPane.margin>
+                  <Insets bottom="2.0" top="2.0" />
+               </GridPane.margin>
+            </Label>
+            <Label maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" text="Nama Member" wrapText="true" GridPane.rowIndex="2">
+               <GridPane.margin>
+                  <Insets bottom="2.0" left="14.0" top="2.0" />
+               </GridPane.margin>
+               <font>
+                  <Font size="14.0" />
+               </font>
+            </Label>
+            <Label maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" text=": -" GridPane.columnIndex="1" GridPane.rowIndex="2">
+               <font>
+                  <Font size="14.0" />
+               </font>
+               <GridPane.margin>
+                  <Insets bottom="2.0" top="2.0" />
+               </GridPane.margin>
+            </Label>
+            <Label maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" text="Tanggal Lahir" wrapText="true" GridPane.columnIndex="2" GridPane.rowIndex="1">
+               <GridPane.margin>
+                  <Insets left="5.0" />
+               </GridPane.margin>
+               <font>
+                  <Font size="14.0" />
+               </font>
+            </Label>
+            <Label maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" text=": -" GridPane.columnIndex="3" GridPane.rowIndex="1">
+               <GridPane.margin>
+                  <Insets bottom="2.0" top="2.0" />
+               </GridPane.margin>
+               <font>
+                  <Font size="14.0" />
+               </font>
+            </Label>
+            <Label maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" text="Alamat" wrapText="true" GridPane.columnIndex="2" GridPane.rowIndex="2">
+               <GridPane.margin>
+                  <Insets left="5.0" />
+               </GridPane.margin>
+               <font>
+                  <Font size="14.0" />
+               </font>
+            </Label>
+            <Label maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" text=": -" GridPane.columnIndex="3" GridPane.rowIndex="2">
+               <GridPane.margin>
+                  <Insets bottom="2.0" top="2.0" />
+               </GridPane.margin>
+               <font>
+                  <Font size="14.0" />
+               </font>
+            </Label>
+         </children>
+      </GridPane>
+      <TableView layoutY="199.0" prefHeight="265.0" prefWidth="800.0" tableMenuButtonVisible="true" AnchorPane.bottomAnchor="55.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="199.0">
+        <columns>
+          <TableColumn maxWidth="30.0" minWidth="30.0" prefWidth="30.0" resizable="false" text="No" />
+          <TableColumn prefWidth="75.0" text="Kode Barang" />
+        </columns>
+         <columnResizePolicy>
+            <TableView fx:constant="CONSTRAINED_RESIZE_POLICY" />
+         </columnResizePolicy>
+      </TableView>
+      <GridPane layoutY="406.0" prefHeight="55.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
+         <columnConstraints>
+            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="10.0" />
+            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="10.0" />
+            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="10.0" />
+            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="10.0" />
+            <ColumnConstraints hgrow="SOMETIMES" minWidth="350.0" percentWidth="60.0" />
+         </columnConstraints>
+         <rowConstraints>
+            <RowConstraints minHeight="10.0" vgrow="SOMETIMES" />
+            <RowConstraints />
+            <RowConstraints />
+         </rowConstraints>
+         <children>
+            <Button fx:id="btnTunai" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#btnNavigasiOnAction" text="TUNAI" textAlignment="CENTER" wrapText="true">
+               <GridPane.margin>
+                  <Insets bottom="5.0" left="5.0" right="1.0" />
+               </GridPane.margin>
+               <font>
+                  <Font name="System Bold" size="12.0" />
+               </font>
+               <styleClass>
+                  <String fx:value="button-navigasi-transaksi-selected" />
+                  <String fx:value="button-navigasi-transaksi" />
+               </styleClass>
+            </Button>
+            <Button fx:id="btnBawaDulu" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#btnNavigasiOnAction" styleClass="button-navigasi-transaksi" text="BAWA DULU" textAlignment="CENTER" wrapText="true" GridPane.columnIndex="1">
+               <GridPane.margin>
+                  <Insets bottom="5.0" left="1.0" right="1.0" />
+               </GridPane.margin>
+               <font>
+                  <Font name="System Bold" size="12.0" />
+               </font>
+            </Button>
+            <Button fx:id="btnBon" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#btnNavigasiOnAction" styleClass="button-navigasi-transaksi" text="BON" textAlignment="CENTER" wrapText="true" GridPane.columnIndex="2">
+               <GridPane.margin>
+                  <Insets bottom="5.0" left="1.0" right="1.0" />
+               </GridPane.margin>
+               <font>
+                  <Font name="System Bold" size="12.0" />
+               </font>
+            </Button>
+            <Button fx:id="btnRetur" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#btnNavigasiOnAction" styleClass="button-navigasi-transaksi" text="RETUR" textAlignment="CENTER" wrapText="true" GridPane.columnIndex="3">
+               <GridPane.margin>
+                  <Insets bottom="5.0" left="1.0" right="5.0" />
+               </GridPane.margin>
+               <font>
+                  <Font name="System Bold" size="12.0" />
+               </font>
+            </Button>
+            <StackPane id="price-background" alignment="CENTER_RIGHT" maxHeight="1.7976931348623157E308" GridPane.columnIndex="4" GridPane.halignment="CENTER" GridPane.rowSpan="3">
+               <GridPane.margin>
+                  <Insets />
+               </GridPane.margin>
+               <children>
+                  <Text fx:id="lblGrandTotal" fill="#fbff00" strokeType="OUTSIDE" strokeWidth="0.0" text="Rp99.999.999,00">
+                     <font>
+                        <Font name="System Bold" size="36.0" />
+                     </font>
+                     <StackPane.margin>
+                        <Insets right="14.0" />
+                     </StackPane.margin>
+                  </Text>
+               </children>
+               <opaqueInsets>
+                  <Insets />
+               </opaqueInsets>
+            </StackPane>
+         </children>
+      </GridPane>
+   </children>
+</AnchorPane>

src/main/resources/fxml/FormUtama.fxml

@@ -0,0 +1,204 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import javafx.geometry.Insets?>
+<?import javafx.scene.control.Label?>
+<?import javafx.scene.control.ScrollPane?>
+<?import javafx.scene.control.Separator?>
+<?import javafx.scene.image.Image?>
+<?import javafx.scene.image.ImageView?>
+<?import javafx.scene.layout.AnchorPane?>
+<?import javafx.scene.layout.BorderPane?>
+<?import javafx.scene.layout.ColumnConstraints?>
+<?import javafx.scene.layout.GridPane?>
+<?import javafx.scene.layout.HBox?>
+<?import javafx.scene.layout.RowConstraints?>
+<?import javafx.scene.layout.StackPane?>
+<?import javafx.scene.layout.VBox?>
+<?import javafx.scene.text.Font?>
+
+<BorderPane prefHeight="550.0" prefWidth="1000.0" stylesheets="@../styles/pos_styles.css" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="id.amigogroup.posterminal.FormUtamaController">
+   <top>
+      <AnchorPane id="header" minHeight="-Infinity" minWidth="-Infinity" prefHeight="100.0" prefWidth="750.0">
+         <children>
+            <VBox alignment="CENTER" layoutX="14.0" layoutY="22.0" prefWidth="150.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="0.0">
+               <children>
+                  <ImageView fitHeight="90.0" fitWidth="140.0" pickOnBounds="true" preserveRatio="true">
+                     <image>
+                        <Image url="@../assets/logo.png" />
+                     </image>
+                  </ImageView>
+               </children>
+            </VBox>
+            <GridPane id="shortcut-box" layoutX="153.0" layoutY="5.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="150.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
+              <columnConstraints>
+                <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="20.0" />
+                  <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
+                  <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
+                  <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
+                <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
+              </columnConstraints>
+              <rowConstraints>
+                <RowConstraints minHeight="10.0" vgrow="SOMETIMES" />
+                  <RowConstraints minHeight="10.0" vgrow="SOMETIMES" />
+                <RowConstraints minHeight="10.0" vgrow="SOMETIMES" />
+                <RowConstraints minHeight="10.0" vgrow="SOMETIMES" />
+              </rowConstraints>
+               <children>
+                  <StackPane id="shortcut-background" prefHeight="150.0" prefWidth="200.0" GridPane.columnSpan="5" GridPane.rowSpan="4" />
+                  <Label maxWidth="1.7976931348623157E308" text="F1: TUNAI">
+                     <GridPane.margin>
+                        <Insets bottom="2.5" left="5.0" right="5.0" top="5.0" />
+                     </GridPane.margin>
+                  </Label>
+                  <Label maxWidth="1.7976931348623157E308" text="F6: CARI PELANGGAN" GridPane.rowIndex="1">
+                     <GridPane.margin>
+                        <Insets bottom="2.5" left="5.0" right="5.0" top="2.5" />
+                     </GridPane.margin>
+                  </Label>
+                  <Label maxWidth="1.7976931348623157E308" text="F11: CARI NOTA BAWA" GridPane.rowIndex="2">
+                     <GridPane.margin>
+                        <Insets bottom="2.5" left="5.0" right="5.0" top="2.5" />
+                     </GridPane.margin>
+                  </Label>
+                  <Label maxWidth="1.7976931348623157E308" text="CTRL+F: CARI NOTA TUNAI" GridPane.rowIndex="3">
+                     <GridPane.margin>
+                        <Insets bottom="5.0" left="5.0" right="5.0" top="2.5" />
+                     </GridPane.margin>
+                  </Label>
+                  <Label maxWidth="1.7976931348623157E308" text="F2: BAWA DULU" GridPane.columnIndex="1">
+                     <GridPane.margin>
+                        <Insets bottom="2.5" left="5.0" right="5.0" top="5.0" />
+                     </GridPane.margin>
+                  </Label>
+                  <Label maxWidth="1.7976931348623157E308" text="F7: FORM TUNDA" GridPane.columnIndex="1" GridPane.rowIndex="1">
+                     <GridPane.margin>
+                        <Insets bottom="2.5" left="5.0" right="5.0" top="2.5" />
+                     </GridPane.margin>
+                  </Label>
+                  <Label maxWidth="1.7976931348623157E308" text="F12: CARI NOTA RETUR" GridPane.columnIndex="1" GridPane.rowIndex="2">
+                     <GridPane.margin>
+                        <Insets bottom="2.5" left="5.0" right="5.0" top="2.5" />
+                     </GridPane.margin>
+                  </Label>
+                  <Label maxWidth="1.7976931348623157E308" text="CTRL+P: CETAK ULANG" GridPane.columnIndex="1" GridPane.rowIndex="3">
+                     <GridPane.margin>
+                        <Insets bottom="5.0" left="5.0" right="5.0" top="2.5" />
+                     </GridPane.margin>
+                  </Label>
+                  <Label maxWidth="1.7976931348623157E308" text="F3: BON" GridPane.columnIndex="2">
+                     <GridPane.margin>
+                        <Insets bottom="2.5" left="5.0" right="5.0" top="5.0" />
+                     </GridPane.margin>
+                  </Label>
+                  <Label maxWidth="1.7976931348623157E308" text="F8: CHECK OUT" GridPane.columnIndex="2" GridPane.rowIndex="1">
+                     <GridPane.margin>
+                        <Insets bottom="2.5" left="5.0" right="5.0" top="2.5" />
+                     </GridPane.margin>
+                  </Label>
+                  <Label maxWidth="1.7976931348623157E308" text="CTRL+E: UN/EDIT ITEM" GridPane.columnIndex="2" GridPane.rowIndex="2">
+                     <GridPane.margin>
+                        <Insets bottom="2.5" left="5.0" right="5.0" top="2.5" />
+                     </GridPane.margin>
+                  </Label>
+                  <Label maxWidth="1.7976931348623157E308" text="CTRL+I: KOMISI PER PERIODE" GridPane.columnIndex="2" GridPane.rowIndex="3">
+                     <GridPane.margin>
+                        <Insets bottom="5.0" left="5.0" right="5.0" top="2.5" />
+                     </GridPane.margin>
+                  </Label>
+                  <Label maxWidth="1.7976931348623157E308" text="F4: RETUR" GridPane.columnIndex="3">
+                     <GridPane.margin>
+                        <Insets bottom="2.5" left="5.0" right="5.0" top="5.0" />
+                     </GridPane.margin>
+                  </Label>
+                  <Label maxWidth="1.7976931348623157E308" text="F9: BON" GridPane.columnIndex="3" GridPane.rowIndex="1">
+                     <GridPane.margin>
+                        <Insets bottom="2.5" left="5.0" right="5.0" top="2.5" />
+                     </GridPane.margin>
+                  </Label>
+                  <Label maxWidth="1.7976931348623157E308" text="CTRL+T: TUNDA TRANSAKSI" GridPane.columnIndex="3" GridPane.rowIndex="2">
+                     <GridPane.margin>
+                        <Insets bottom="2.5" left="5.0" right="5.0" top="2.5" />
+                     </GridPane.margin>
+                  </Label>
+                  <Label maxWidth="1.7976931348623157E308" text="CTRL+L: LOGOUT" GridPane.columnIndex="3" GridPane.rowIndex="3">
+                     <GridPane.margin>
+                        <Insets bottom="5.0" left="5.0" right="5.0" top="2.5" />
+                     </GridPane.margin>
+                  </Label>
+                  <Label maxWidth="1.7976931348623157E308" text="F5: CARI BARANG" GridPane.columnIndex="4">
+                     <GridPane.margin>
+                        <Insets bottom="2.5" left="5.0" right="5.0" top="5.0" />
+                     </GridPane.margin>
+                  </Label>
+                  <Label maxWidth="1.7976931348623157E308" text="F10: CETAK NOTA" GridPane.columnIndex="4" GridPane.rowIndex="1">
+                     <GridPane.margin>
+                        <Insets bottom="2.5" left="5.0" right="5.0" top="2.5" />
+                     </GridPane.margin>
+                  </Label>
+                  <Label maxWidth="1.7976931348623157E308" text="CTRL+Q: TAMBAH TAS" GridPane.columnIndex="4" GridPane.rowIndex="2">
+                     <GridPane.margin>
+                        <Insets bottom="2.5" left="5.0" right="5.0" top="2.5" />
+                     </GridPane.margin>
+                     <font>
+                        <Font name="System Bold" size="12.0" />
+                     </font>
+                  </Label>
+               </children>
+            </GridPane>
+         </children>
+      </AnchorPane>
+   </top>
+   <center>
+      <ScrollPane fx:id="spMainContent" fitToHeight="true" fitToWidth="true" />
+   </center>
+   <bottom>
+      <GridPane BorderPane.alignment="CENTER">
+         <columnConstraints>
+            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="30.0" />
+            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="70.0" />
+         </columnConstraints>
+         <rowConstraints>
+            <RowConstraints minHeight="10.0" vgrow="SOMETIMES" />
+         </rowConstraints>
+         <children>
+            <HBox alignment="CENTER_LEFT" maxHeight="1.7976931348623157E308" prefHeight="20.0">
+               <children>
+                  <Label text="Login: -">
+                     <font>
+                        <Font name="System Bold" size="12.0" />
+                     </font>
+                     <HBox.margin>
+                        <Insets left="5.0" />
+                     </HBox.margin>
+                  </Label>
+               </children>
+            </HBox>
+            <HBox alignment="CENTER_RIGHT" prefHeight="20.0" GridPane.columnIndex="1">
+               <children>
+                  <Label text="&lt;0 ITEM&gt;">
+                     <font>
+                        <Font name="System Bold" size="12.0" />
+                     </font>
+                     <HBox.margin>
+                        <Insets right="28.0" />
+                     </HBox.margin>
+                  </Label>
+                  <Separator orientation="VERTICAL" prefHeight="200.0">
+                     <HBox.margin>
+                        <Insets right="5.0" />
+                     </HBox.margin>
+                  </Separator>
+                  <Label text="21/01/2019 11:55:44">
+                     <font>
+                        <Font name="System Bold" size="12.0" />
+                     </font>
+                     <HBox.margin>
+                        <Insets right="5.0" />
+                     </HBox.margin>
+                  </Label>
+               </children>
+            </HBox>
+         </children>
+      </GridPane>
+   </bottom>
+</BorderPane>

src/main/resources/styles/pos_styles.css

@@ -0,0 +1,50 @@
+/*
+To change this license header, choose License Headers in Project Properties.
+To change this template file, choose Tools | Templates
+and open the template in the editor.
+*/
+/* 
+    Created on : Jan 21, 2020, 10:53:03 AM
+    Author     : ronal
+*/
+.button-navigasi-transaksi{
+    -fx-border-color: #4488ff;
+    -fx-border-width: 0 1 1.5 1;
+    -fx-border-radius: 0 0 8% 8%;
+    /*-fx-background-color: #99ccff;*/
+    -fx-background-color: 
+        linear-gradient(#caf6fd 0%, #a5f0fc 49%, #a5f0fc 50%, #8aafff 100%);
+    -fx-background-insets: 0,1,2;
+    -fx-background-radius: 0 0 8% 8%,0 0 8% 8%,0 0 8% 8%;
+    -fx-cursor: hand;
+}
+.button-navigasi-transaksi:hover{
+    /*-fx-background-color: #bbeeff;*/
+    -fx-background-color: 
+        linear-gradient(#d5f6fd 0%, #cae0ff 49%, #cae0ff 50%, #ffffff 100%);}
+
+.button-navigasi-transaksi-selected{
+    /*-fx-background-color: #33aaff;*/
+    -fx-background-color: 
+        linear-gradient(#abf6fd 0%, #8aa6fd 49%, #8aa6dd 50%, #50a6dd 100%);
+}
+
+#header{
+   -fx-border-style: solid;
+   -fx-border-color: black;
+   -fx-border-width: 0 0 2 0;
+}
+
+#shortcut-box{
+   -fx-border-style: solid;
+   -fx-border-color: black;
+   -fx-border-width: 0 0 0 2;
+}
+
+#shortcut-background{
+    -fx-background-color: lightgray;
+}
+
+#price-background{
+    -fx-background-color: black;
+}