├── .editorconfig
├── .github
    └── workflows
    │   └── main.yml
├── README.md
├── css
    └── style.css
├── data
    └── sample.json
├── favicon.ico
├── img
    ├── beef-burger.png
    ├── choco-glaze-donut-peanut.png
    ├── choco-glaze-donut.png
    ├── cinnamon-roll.png
    ├── coffee-latte.png
    ├── croissant.png
    ├── ice-chocolate.png
    ├── ice-tea.png
    ├── matcha-latte.png
    ├── receipt-logo.png
    ├── red-glaze-donut.png
    ├── sandwich.png
    └── sawarma.png
├── index.html
├── js
    └── script.js
└── sound
    ├── beep-29.mp3
    └── button-21.mp3


/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 | 
3 | [*.{js,css,html}]
4 | indent_size = 2
5 | indent_style = space
6 | trim_trailing_whitespace = true
7 | insert_final_newline = true
8 | end_of_line = lf


--------------------------------------------------------------------------------
/.github/workflows/main.yml:
--------------------------------------------------------------------------------
 1 | name: Build and Deploy
 2 | on:
 3 |   push:
 4 |     branches:
 5 |       - main
 6 | jobs:
 7 |   build-and-deploy:
 8 |     runs-on: ubuntu-latest
 9 |     steps:
10 |       - name: Checkout 🛎️
11 |         uses: actions/checkout@v2.3.1
12 |       - name: Deploy 🚀
13 |         uses: JamesIves/github-pages-deploy-action@4.1.1
14 |         with:
15 |           branch: gh-pages # The branch the action should deploy to.
16 |           folder: "." # The folder the action should deploy.
17 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | TAILWIND POS
 2 | ============
 3 | 
 4 | ![tailwind-pos-cover](https://user-images.githubusercontent.com/6297931/114289085-6599fc00-9a9f-11eb-810e-b32f1096ecdc.png)
 5 | 
 6 | Tailwind POS is a POS (Point of Sales) application built with [Tailwind.css](https://tailwindcss.com) and [Alpine.js](https://github.com/alpinejs/alpine/). I create this application in order to exercise myself to build web application in "traditional" way, without any module bundler/build tools such as webpack, rollup, postcss, etc. So yes, it load tailwind.css and alpine.js via CDN.
 7 | 
 8 | You can view the demo at [https://www.emsifa.com/tailwind-pos/](https://www.emsifa.com/tailwind-pos/).
 9 | 
10 | ## Attribution
11 | 
12 | Sample food photos in this application are downloaded from freepik.com accounts listed below:
13 | 
14 | * [topntp26](https://www.freepik.com/topntp26)
15 | * [mrsiraphol](https://www.freepik.com/mrsiraphol)
16 | * [jcomp](https://www.freepik.com/jcomp)
17 | * [timolina](https://www.freepik.com/timolina)
18 | * [Racool_studio](https://www.freepik.com/Racool_studio)
19 | * [8photo](https://www.freepik.com/8photo)
20 | 


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
  1 | /* width */
  2 | ::-webkit-scrollbar {
  3 |   width: 5px;
  4 | }
  5 | 
  6 | /* Track */
  7 | ::-webkit-scrollbar-track {
  8 |   background: #cfd8dc;
  9 |   border-radius: 5px;
 10 | }
 11 | 
 12 | /* Handle */
 13 | ::-webkit-scrollbar-thumb {
 14 |   background: #b0bec5;
 15 |   border-radius: 5px;
 16 | }
 17 | 
 18 | /* Handle on hover */
 19 | ::-webkit-scrollbar-thumb:hover {
 20 |   background: #90a4ae;
 21 | }
 22 | 
 23 | .bg-cyan-50, .hover\:bg-cyan-50:hover {
 24 |     background-color: #e0f7fa;
 25 | }
 26 | .bg-cyan-100, .hover\:bg-cyan-100:hover {
 27 |     background-color: #b2ebf2;
 28 | }
 29 | .bg-cyan-200, .hover\:bg-cyan-200:hover {
 30 |     background-color: #80deea;
 31 | }
 32 | .bg-cyan-300, .hover\:bg-cyan-300:hover {
 33 |     background-color: #4dd0e1;
 34 | }
 35 | .bg-cyan-400, .hover\:bg-cyan-400:hover {
 36 |     background-color: #26c6da;
 37 | }
 38 | .bg-cyan-500, .hover\:bg-cyan-500:hover {
 39 |     background-color: #00bcd4;
 40 | }
 41 | .bg-cyan-600, .hover\:bg-cyan-600:hover {
 42 |     background-color: #00acc1;
 43 | }
 44 | .bg-cyan-700, .hover\:bg-cyan-700:hover {
 45 |     background-color: #0097a7;
 46 | }
 47 | .bg-cyan-800, .hover\:bg-cyan-800:hover {
 48 |     background-color: #00838f;
 49 | }
 50 | .bg-cyan-900, .hover\:bg-cyan-900:hover {
 51 |     background-color: #006064;
 52 | }
 53 | 
 54 | 
 55 | .text-cyan-50, .hover\:text-cyan-50:hover {
 56 |     color: #e0f7fa;
 57 | }
 58 | .text-cyan-100, .hover\:text-cyan-100:hover {
 59 |     color: #b2ebf2;
 60 | }
 61 | .text-cyan-200, .hover\:text-cyan-200:hover {
 62 |     color: #80deea;
 63 | }
 64 | .text-cyan-300, .hover\:text-cyan-300:hover {
 65 |     color: #4dd0e1;
 66 | }
 67 | .text-cyan-400, .hover\:text-cyan-400:hover {
 68 |     color: #26c6da;
 69 | }
 70 | .text-cyan-500, .hover\:text-cyan-500:hover {
 71 |     color: #00bcd4;
 72 | }
 73 | .text-cyan-600, .hover\:text-cyan-600:hover {
 74 |     color: #00acc1;
 75 | }
 76 | .text-cyan-700, .hover\:text-cyan-700:hover {
 77 |     color: #0097a7;
 78 | }
 79 | .text-cyan-800, .hover\:text-cyan-800:hover {
 80 |     color: #00838f;
 81 | }
 82 | .text-cyan-900, .hover\:text-cyan-900:hover {
 83 |     color: #006064;
 84 | }
 85 | 
 86 | .bg-blue-gray-50, .hover\:bg-blue-gray-50:hover {
 87 |     background-color: #eceff1;
 88 | }
 89 | .bg-blue-gray-100, .hover\:bg-blue-gray-100:hover {
 90 |     background-color: #cfd8dc;
 91 | }
 92 | .bg-blue-gray-200, .hover\:bg-blue-gray-200:hover {
 93 |     background-color: #b0bec5;
 94 | }
 95 | .bg-blue-gray-300, .hover\:bg-blue-gray-300:hover {
 96 |     background-color: #90a4ae;
 97 | }
 98 | .bg-blue-gray-400, .hover\:bg-blue-gray-400:hover {
 99 |     background-color: #78909c;
100 | }
101 | .bg-blue-gray-500, .hover\:bg-blue-gray-500:hover {
102 |     background-color: #607d8b;
103 | }
104 | .bg-blue-gray-600, .hover\:bg-blue-gray-600:hover {
105 |     background-color: #546e7a;
106 | }
107 | .bg-blue-gray-700, .hover\:bg-blue-gray-700:hover {
108 |     background-color: #455a64;
109 | }
110 | .bg-blue-gray-800, .hover\:bg-blue-gray-800:hover {
111 |     background-color: #37474f;
112 | }
113 | .bg-blue-gray-900, .hover\:bg-blue-gray-900:hover {
114 |     background-color: #263238;
115 | }
116 | 
117 | .text-blue-gray-50, .hover\:text-blue-gray-50:hover {
118 |     color: #eceff1;
119 | }
120 | .text-blue-gray-100, .hover\:text-blue-gray-100:hover {
121 |     color: #cfd8dc;
122 | }
123 | .text-blue-gray-200, .hover\:text-blue-gray-200:hover {
124 |     color: #b0bec5;
125 | }
126 | .text-blue-gray-300, .hover\:text-blue-gray-300:hover {
127 |     color: #90a4ae;
128 | }
129 | .text-blue-gray-400, .hover\:text-blue-gray-400:hover {
130 |     color: #78909c;
131 | }
132 | .text-blue-gray-500, .hover\:text-blue-gray-500:hover {
133 |     color: #607d8b;
134 | }
135 | .text-blue-gray-600, .hover\:text-blue-gray-600:hover {
136 |     color: #546e7a;
137 | }
138 | .text-blue-gray-700, .hover\:text-blue-gray-700:hover {
139 |     color: #455a64;
140 | }
141 | .text-blue-gray-800, .hover\:text-blue-gray-800:hover {
142 |     color: #37474f;
143 | }
144 | .text-blue-gray-900, .hover\:text-blue-gray-900:hover {
145 |     color: #263238;
146 | }
147 | .bg-teal-50, .hover\:bg-teal-50:hover {
148 |     background-color: #e0f2f1;
149 | }
150 | .bg-teal-100, .hover\:bg-teal-100:hover {
151 |     background-color: #b2dfdb;
152 | }
153 | .bg-teal-200, .hover\:bg-teal-200:hover {
154 |     background-color: #80cbc4;
155 | }
156 | .bg-teal-300, .hover\:bg-teal-300:hover {
157 |     background-color: #4db6ac;
158 | }
159 | .bg-teal-400, .hover\:bg-teal-400:hover {
160 |     background-color: #26a69a;
161 | }
162 | .bg-teal-500, .hover\:bg-teal-500:hover {
163 |     background-color: #009688;
164 | }
165 | .bg-teal-600, .hover\:bg-teal-600:hover {
166 |     background-color: #00897b;
167 | }
168 | .bg-teal-700, .hover\:bg-teal-700:hover {
169 |     background-color: #00796b;
170 | }
171 | .bg-teal-800, .hover\:bg-teal-800:hover {
172 |     background-color: #00695c;
173 | }
174 | .bg-teal-900, .hover\:bg-teal-900:hover {
175 |     background-color: #004d40;
176 | }
177 | 
178 | .text-teal-50, .hover\:text-teal-50:hover {
179 |     color: #e0f2f1;
180 | }
181 | .text-teal-100, .hover\:text-teal-100:hover {
182 |     color: #b2dfdb;
183 | }
184 | .text-teal-200, .hover\:text-teal-200:hover {
185 |     color: #80cbc4;
186 | }
187 | .text-teal-300, .hover\:text-teal-300:hover {
188 |     color: #4db6ac;
189 | }
190 | .text-teal-400, .hover\:text-teal-400:hover {
191 |     color: #26a69a;
192 | }
193 | .text-teal-500, .hover\:text-teal-500:hover {
194 |     color: #009688;
195 | }
196 | .text-teal-600, .hover\:text-teal-600:hover {
197 |     color: #00897b;
198 | }
199 | .text-teal-700, .hover\:text-teal-700:hover {
200 |     color: #00796b;
201 | }
202 | .text-teal-800, .hover\:text-teal-800:hover {
203 |     color: #00695c;
204 | }
205 | .text-teal-900, .hover\:text-teal-900:hover {
206 |     color: #004d40;
207 | }
208 | 
209 | .nowrap {
210 |   white-space: nowrap;
211 | }
212 | 
213 | .glass {
214 |   background-color: rgba(100, 120, 130, .6);
215 |   backdrop-filter: blur(10px);
216 | }
217 | 
218 | table td {
219 |   vertical-align: top;
220 | }
221 | 
222 | #receipt-content {
223 |   max-height: 70vh;
224 | }
225 | 
226 | @media print {
227 |   .hide-print {
228 |     display: none !important;
229 |   }
230 |   .print-area {
231 |     display: block;
232 |   }
233 | }
234 | 


--------------------------------------------------------------------------------
/data/sample.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "products": [
 3 |         {
 4 |           "id": 1,
 5 |           "name": "Beef Burger",
 6 |           "price": 45000,
 7 |           "image": "img/beef-burger.png",
 8 |           "options": null
 9 |         },
10 |         {
11 |           "id": 2,
12 |           "name": "Sandwich",
13 |           "price": 32000,
14 |           "image": "img/sandwich.png",
15 |           "options": null
16 |         },
17 |         {
18 |           "id": 3,
19 |           "name": "Sawarma",
20 |           "price": 30000,
21 |           "image": "img/sawarma.png",
22 |           "options": null
23 |         },
24 |         {
25 |           "id": 4,
26 |           "name": "Croissant",
27 |           "price": 16000,
28 |           "image": "img/croissant.png",
29 |           "options": null
30 |         },
31 |         {
32 |           "id": 5,
33 |           "name": "Cinnamon Roll",
34 |           "price": 20000,
35 |           "image": "img/cinnamon-roll.png",
36 |           "options": null
37 |         },
38 |         {
39 |           "id": 6,
40 |           "name": "Choco Glaze Donut with Peanut",
41 |           "price": 10000,
42 |           "image": "img/choco-glaze-donut-peanut.png",
43 |           "options": null
44 |         },
45 |         {
46 |           "id": 7,
47 |           "name": "Choco Glazed Donut",
48 |           "price": 10000,
49 |           "image": "img/choco-glaze-donut.png",
50 |           "options": null
51 |         },
52 |         {
53 |           "id": 8,
54 |           "name": "Red Glazed Donut",
55 |           "price": 10000,
56 |           "image": "img/red-glaze-donut.png",
57 |           "options": null
58 |         },
59 |         {
60 |           "id": 9,
61 |           "name": "Iced Coffee Latte",
62 |           "price": 25000,
63 |           "image": "img/coffee-latte.png",
64 |           "options": null
65 |         },
66 |         {
67 |           "id": 10,
68 |           "name": "Iced Chocolate",
69 |           "price": 20000,
70 |           "image": "img/ice-chocolate.png",
71 |           "options": null
72 |         },
73 |         {
74 |           "id": 11,
75 |           "name": "Iced Tea",
76 |           "price": 15000,
77 |           "image": "img/ice-tea.png",
78 |           "options": null
79 |         },
80 |         {
81 |           "id": 12,
82 |           "name": "Iced Matcha Latte",
83 |           "price": 22000,
84 |           "image": "img/matcha-latte.png",
85 |           "options": null
86 |         }
87 |     ]
88 | }


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emsifa/tailwind-pos/fda7c6d89404a16395dd4441d1a8791a53980271/favicon.ico


--------------------------------------------------------------------------------
/img/beef-burger.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emsifa/tailwind-pos/fda7c6d89404a16395dd4441d1a8791a53980271/img/beef-burger.png


--------------------------------------------------------------------------------
/img/choco-glaze-donut-peanut.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emsifa/tailwind-pos/fda7c6d89404a16395dd4441d1a8791a53980271/img/choco-glaze-donut-peanut.png


--------------------------------------------------------------------------------
/img/choco-glaze-donut.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emsifa/tailwind-pos/fda7c6d89404a16395dd4441d1a8791a53980271/img/choco-glaze-donut.png


--------------------------------------------------------------------------------
/img/cinnamon-roll.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emsifa/tailwind-pos/fda7c6d89404a16395dd4441d1a8791a53980271/img/cinnamon-roll.png


--------------------------------------------------------------------------------
/img/coffee-latte.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emsifa/tailwind-pos/fda7c6d89404a16395dd4441d1a8791a53980271/img/coffee-latte.png


--------------------------------------------------------------------------------
/img/croissant.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emsifa/tailwind-pos/fda7c6d89404a16395dd4441d1a8791a53980271/img/croissant.png


--------------------------------------------------------------------------------
/img/ice-chocolate.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emsifa/tailwind-pos/fda7c6d89404a16395dd4441d1a8791a53980271/img/ice-chocolate.png


--------------------------------------------------------------------------------
/img/ice-tea.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emsifa/tailwind-pos/fda7c6d89404a16395dd4441d1a8791a53980271/img/ice-tea.png


--------------------------------------------------------------------------------
/img/matcha-latte.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emsifa/tailwind-pos/fda7c6d89404a16395dd4441d1a8791a53980271/img/matcha-latte.png


--------------------------------------------------------------------------------
/img/receipt-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emsifa/tailwind-pos/fda7c6d89404a16395dd4441d1a8791a53980271/img/receipt-logo.png


--------------------------------------------------------------------------------
/img/red-glaze-donut.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emsifa/tailwind-pos/fda7c6d89404a16395dd4441d1a8791a53980271/img/red-glaze-donut.png


--------------------------------------------------------------------------------
/img/sandwich.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emsifa/tailwind-pos/fda7c6d89404a16395dd4441d1a8791a53980271/img/sandwich.png


--------------------------------------------------------------------------------
/img/sawarma.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emsifa/tailwind-pos/fda7c6d89404a16395dd4441d1a8791a53980271/img/sawarma.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>Tailwind POS</title>
  8 |   <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
  9 |   <link rel="stylesheet" href="css/style.css">
 10 |   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
 11 |   <script src="https://unpkg.com/idb/build/iife/index-min.js"></script>
 12 |   <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js"></script>
 13 |   <script src="js/script.js"></script>
 14 | </head>
 15 | <body class="bg-blue-gray-50" x-data="initApp()" x-init="initDatabase()">
 16 |   <!-- noprint-area -->
 17 |   <div class="hide-print flex flex-row h-screen antialiased text-blue-gray-800">
 18 |     <!-- left sidebar -->
 19 |     <div class="flex flex-row w-auto flex-shrink-0 pl-4 pr-2 py-4">
 20 |       <div class="flex flex-col items-center py-4 flex-shrink-0 w-20 bg-cyan-500 rounded-3xl">
 21 |         <a href="#"
 22 |            class="flex items-center justify-center h-12 w-12 bg-cyan-50 text-cyan-700 rounded-full">
 23 |           <svg xmlns="http://www.w3.org/2000/svg" width="123.3" height="123.233" viewBox="0 0 32.623 32.605">
 24 |             <path d="M15.612 0c-.36.003-.705.01-1.03.021C8.657.223 5.742 1.123 3.4 3.472.714 6.166-.145 9.758.019 17.607c.137 6.52.965 9.271 3.542 11.768 1.31 1.269 2.658 2 4.73 2.57.846.232 2.73.547 3.56.596.36.021 2.336.048 4.392.06 3.162.018 4.031-.016 5.63-.221 3.915-.504 6.43-1.778 8.234-4.173 1.806-2.396 2.514-5.731 2.516-11.846.001-4.407-.42-7.59-1.278-9.643-1.463-3.501-4.183-5.53-8.394-6.258-1.634-.283-4.823-.475-7.339-.46z" fill="#fff"/><path d="M16.202 13.758c-.056 0-.11 0-.16.003-.926.031-1.38.172-1.747.538-.42.421-.553.982-.528 2.208.022 1.018.151 1.447.553 1.837.205.198.415.313.739.402.132.036.426.085.556.093.056.003.365.007.686.009.494.003.63-.002.879-.035.611-.078 1.004-.277 1.286-.651.282-.374.392-.895.393-1.85 0-.688-.066-1.185-.2-1.506-.228-.547-.653-.864-1.31-.977a7.91 7.91 0 00-1.147-.072zM16.22 19.926c-.056 0-.11 0-.16.003-.925.031-1.38.172-1.746.539-.42.42-.554.981-.528 2.207.02 1.018.15 1.448.553 1.838.204.198.415.312.738.4.132.037.426.086.556.094.056.003.365.007.686.009.494.003.63-.002.88-.034.61-.08 1.003-.278 1.285-.652.282-.374.393-.895.393-1.85 0-.688-.066-1.185-.2-1.506-.228-.547-.653-.863-1.31-.977a7.91 7.91 0 00-1.146-.072zM22.468 13.736c-.056 0-.11.001-.161.003-.925.032-1.38.172-1.746.54-.42.42-.554.98-.528 2.207.021 1.018.15 1.447.553 1.837.205.198.415.313.739.401.132.037.426.086.556.094.056.003.364.007.685.009.494.003.63-.002.88-.035.611-.078 1.004-.277 1.285-.651.282-.375.393-.895.393-1.85 0-.688-.065-1.185-.2-1.506-.228-.547-.653-.864-1.31-.977a7.91 7.91 0 00-1.146-.072z" fill="#00dace"/><path d="M9.937 13.736c-.056 0-.11.001-.161.003-.925.032-1.38.172-1.746.54-.42.42-.554.98-.528 2.207.021 1.018.15 1.447.553 1.837.204.198.415.313.738.401.133.037.427.086.556.094.056.003.365.007.686.009.494.003.63-.002.88-.035.61-.078 1.003-.277 1.285-.651.282-.375.393-.895.393-1.85 0-.688-.066-1.185-.2-1.506-.228-.547-.653-.864-1.31-.977a7.91 7.91 0 00-1.146-.072zM16.202 7.59c-.056 0-.11 0-.16.002-.926.032-1.38.172-1.747.54-.42.42-.553.98-.528 2.206.022 1.019.151 1.448.553 1.838.205.198.415.312.739.401.132.037.426.086.556.093.056.003.365.007.686.01.494.002.63-.003.879-.035.611-.079 1.004-.278 1.286-.652.282-.374.392-.895.393-1.85 0-.688-.066-1.185-.2-1.505-.228-.547-.653-.864-1.31-.978a7.91 7.91 0 00-1.147-.071z" fill="#00bcd4"/><g><path d="M15.612 0c-.36.003-.705.01-1.03.021C8.657.223 5.742 1.123 3.4 3.472.714 6.166-.145 9.758.019 17.607c.137 6.52.965 9.271 3.542 11.768 1.31 1.269 2.658 2 4.73 2.57.846.232 2.73.547 3.56.596.36.021 2.336.048 4.392.06 3.162.018 4.031-.016 5.63-.221 3.915-.504 6.43-1.778 8.234-4.173 1.806-2.396 2.514-5.731 2.516-11.846.001-4.407-.42-7.59-1.278-9.643-1.463-3.501-4.183-5.53-8.394-6.258-1.634-.283-4.823-.475-7.339-.46z" fill="#fff"/><path d="M16.202 13.758c-.056 0-.11 0-.16.003-.926.031-1.38.172-1.747.538-.42.421-.553.982-.528 2.208.022 1.018.151 1.447.553 1.837.205.198.415.313.739.402.132.036.426.085.556.093.056.003.365.007.686.009.494.003.63-.002.879-.035.611-.078 1.004-.277 1.286-.651.282-.374.392-.895.393-1.85 0-.688-.066-1.185-.2-1.506-.228-.547-.653-.864-1.31-.977a7.91 7.91 0 00-1.147-.072zM16.22 19.926c-.056 0-.11 0-.16.003-.925.031-1.38.172-1.746.539-.42.42-.554.981-.528 2.207.02 1.018.15 1.448.553 1.838.204.198.415.312.738.4.132.037.426.086.556.094.056.003.365.007.686.009.494.003.63-.002.88-.034.61-.08 1.003-.278 1.285-.652.282-.374.393-.895.393-1.85 0-.688-.066-1.185-.2-1.506-.228-.547-.653-.863-1.31-.977a7.91 7.91 0 00-1.146-.072zM22.468 13.736c-.056 0-.11.001-.161.003-.925.032-1.38.172-1.746.54-.42.42-.554.98-.528 2.207.021 1.018.15 1.447.553 1.837.205.198.415.313.739.401.132.037.426.086.556.094.056.003.364.007.685.009.494.003.63-.002.88-.035.611-.078 1.004-.277 1.285-.651.282-.375.393-.895.393-1.85 0-.688-.065-1.185-.2-1.506-.228-.547-.653-.864-1.31-.977a7.91 7.91 0 00-1.146-.072z" fill="#00dace"/><path d="M9.937 13.736c-.056 0-.11.001-.161.003-.925.032-1.38.172-1.746.54-.42.42-.554.98-.528 2.207.021 1.018.15 1.447.553 1.837.204.198.415.313.738.401.133.037.427.086.556.094.056.003.365.007.686.009.494.003.63-.002.88-.035.61-.078 1.003-.277 1.285-.651.282-.375.393-.895.393-1.85 0-.688-.066-1.185-.2-1.506-.228-.547-.653-.864-1.31-.977a7.91 7.91 0 00-1.146-.072zM16.202 7.59c-.056 0-.11 0-.16.002-.926.032-1.38.172-1.747.54-.42.42-.553.98-.528 2.206.022 1.019.151 1.448.553 1.838.205.198.415.312.739.401.132.037.426.086.556.093.056.003.365.007.686.01.494.002.63-.003.879-.035.611-.079 1.004-.278 1.286-.652.282-.374.392-.895.393-1.85 0-.688-.066-1.185-.2-1.505-.228-.547-.653-.864-1.31-.978a7.91 7.91 0 00-1.147-.071z" fill="#00bcd4"/></g>
 25 |           </svg>
 26 |         </a>
 27 |         <ul class="flex flex-col space-y-2 mt-12">
 28 |           <li>
 29 |             <a href="#"
 30 |                class="flex items-center">
 31 |               <span
 32 |                 class="flex items-center justify-center h-12 w-12 rounded-2xl"
 33 |                 x-bind:class="{
 34 |                   'hover:bg-cyan-400 text-cyan-100': activeMenu !== 'pos',
 35 |                   'bg-cyan-300 shadow-lg text-white': activeMenu === 'pos',
 36 |                 }"
 37 |               >
 38 |                 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 39 |                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
 40 |                 </svg>
 41 |               </span>
 42 |             </a>
 43 |           </li>
 44 |           <li>
 45 |             <a href="#"
 46 |                class="flex items-center">
 47 |               <span class="flex items-center justify-center text-cyan-100 hover:bg-cyan-400 h-12 w-12 rounded-2xl">
 48 |                 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 49 |                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
 50 |                 </svg>
 51 |               </span>
 52 |             </a>
 53 |           </li>
 54 |           <li>
 55 |             <a href="#"
 56 |                class="flex items-center">
 57 |               <span class="flex items-center justify-center text-cyan-100 hover:bg-cyan-400 h-12 w-12 rounded-2xl">
 58 |                 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 59 |                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
 60 |                 </svg>
 61 |               </span>
 62 |             </a>
 63 |           </li>
 64 |           <li>
 65 |             <a href="#"
 66 |                class="flex items-center">
 67 |               <span class="flex items-center justify-center text-cyan-100 hover:bg-cyan-400 h-12 w-12 rounded-2xl">
 68 |                 <svg class="w-6 h-6"
 69 |                      fill="none"
 70 |                      stroke="currentColor"
 71 |                      viewBox="0 0 24 24"
 72 |                      xmlns="http://www.w3.org/2000/svg">
 73 |                   <path stroke-linecap="round"
 74 |                         stroke-linejoin="round"
 75 |                         stroke-width="2"
 76 |                         d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
 77 |                   <path stroke-linecap="round"
 78 |                         stroke-linejoin="round"
 79 |                         stroke-width="2"
 80 |                         d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
 81 |                 </svg>
 82 |               </span>
 83 |             </a>
 84 |           </li>
 85 |         </ul>
 86 |         <a
 87 |           href="https://github.com/emsifa/tailwind-pos"
 88 |           target="_blank"
 89 |           class="mt-auto flex items-center justify-center text-cyan-200 hover:text-cyan-100 h-10 w-10 focus:outline-none"
 90 |         >
 91 |           <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" viewBox="0 0 20 20" fill="currentColor">
 92 |             <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
 93 |           </svg>
 94 |         </a>
 95 |       </div>
 96 |     </div>
 97 | 
 98 |     <!-- page content -->
 99 |     <div class="flex-grow flex">
100 |       <!-- store menu -->
101 |       <div class="flex flex-col bg-blue-gray-50 h-full w-full py-4">
102 |         <div class="flex px-2 flex-row relative">
103 |           <div class="absolute left-5 top-3 px-2 py-2 rounded-full bg-cyan-500 text-white">
104 |             <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
105 |               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
106 |             </svg>
107 |           </div>
108 |           <input
109 |             type="text"
110 |             class="bg-white rounded-3xl shadow text-lg full w-full h-16 py-4 pl-16 transition-shadow focus:shadow-2xl focus:outline-none"
111 |             placeholder="Cari menu ..."
112 |             x-model="keyword"
113 |           />
114 |         </div>
115 |         <div class="h-full overflow-hidden mt-4">
116 |           <div class="h-full overflow-y-auto px-2">
117 |             <div
118 |               class="select-none bg-blue-gray-100 rounded-3xl flex flex-wrap content-center justify-center h-full opacity-25"
119 |               x-show="products.length === 0"
120 |             >
121 |               <div class="w-full text-center">
122 |                 <svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor">
123 |                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
124 |                 </svg>
125 |                 <p class="text-xl">
126 |                   YOU DON'T HAVE
127 |                   <br/>
128 |                   ANY PRODUCTS TO SHOW
129 |                 </p>
130 |               </div>
131 |             </div>
132 |             <div
133 |               class="select-none bg-blue-gray-100 rounded-3xl flex flex-wrap content-center justify-center h-full opacity-25"
134 |               x-show="filteredProducts().length === 0 && keyword.length > 0"
135 |             >
136 |               <div class="w-full text-center">
137 |                 <svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor">
138 |                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
139 |                 </svg>
140 |                 <p class="text-xl">
141 |                   EMPTY SEARCH RESULT
142 |                   <br/>
143 |                   "<span x-text="keyword" class="font-semibold"></span>"
144 |                 </p>
145 |               </div>
146 |             </div>
147 |             <div x-show="filteredProducts().length" class="grid grid-cols-4 gap-4 pb-3">
148 |               <template x-for="product in filteredProducts()" :key="product.id">
149 |                 <div
150 |                   role="button"
151 |                   class="select-none cursor-pointer transition-shadow overflow-hidden rounded-2xl bg-white shadow hover:shadow-lg"
152 |                   :title="product.name"
153 |                   x-on:click="addToCart(product)"
154 |                 >
155 |                   <img :src="product.image" :alt="product.name">
156 |                   <div class="flex pb-3 px-3 text-sm -mt-3">
157 |                     <p class="flex-grow truncate mr-1" x-text="product.name"></p>
158 |                     <p class="nowrap font-semibold" x-text="priceFormat(product.price)"></p>
159 |                   </div>
160 |                 </div>
161 |               </template>
162 |             </div>
163 |           </div>
164 |         </div>
165 |       </div>
166 |       <!-- end of store menu -->
167 | 
168 |       <!-- right sidebar -->
169 |       <div class="w-5/12 flex flex-col bg-blue-gray-50 h-full bg-white pr-4 pl-2 py-4">
170 |         <div class="bg-white rounded-3xl flex flex-col h-full shadow">
171 |           <!-- empty cart -->
172 |           <div x-show="cart.length === 0" class="flex-1 w-full p-4 opacity-25 select-none flex flex-col flex-wrap content-center justify-center">
173 |             <svg xmlns="http://www.w3.org/2000/svg" class="h-16 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor">
174 |               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
175 |             </svg>
176 |             <p>
177 |               CART EMPTY
178 |             </p>
179 |           </div>
180 | 
181 |           <!-- cart items -->
182 |           <div x-show="cart.length > 0" class="flex-1 flex flex-col overflow-auto">
183 |             <div class="h-16 text-center flex justify-center">
184 |               <div class="pl-8 text-left text-lg py-4 relative">
185 |                 <!-- cart icon -->
186 |                 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor">
187 |                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
188 |                 </svg>
189 |                 <div x-show="getItemsCount() > 0" class="text-center absolute bg-cyan-500 text-white w-5 h-5 text-xs p-0 leading-5 rounded-full -right-2 top-3" x-text="getItemsCount()"></div>
190 |               </div>
191 |               <div class="flex-grow px-8 text-right text-lg py-4 relative">
192 |                 <!-- trash button -->
193 |                 <button x-on:click="clear()" class="text-blue-gray-300 hover:text-pink-500 focus:outline-none">
194 |                   <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor">
195 |                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
196 |                   </svg>
197 |                 </button>
198 |               </div>
199 |             </div>
200 | 
201 |             <div class="flex-1 w-full px-4 overflow-auto">
202 |               <template x-for="item in cart" :key="item.productId">
203 |                 <div class="select-none mb-3 bg-blue-gray-50 rounded-lg w-full text-blue-gray-700 py-2 px-2 flex justify-center">
204 |                   <img :src="item.image" alt="" class="rounded-lg h-10 w-10 bg-white shadow mr-2">
205 |                   <div class="flex-grow">
206 |                     <h5 class="text-sm" x-text="item.name"></h5>
207 |                     <p class="text-xs block" x-text="priceFormat(item.price)"></p>
208 |                   </div>
209 |                   <div class="py-1">
210 |                     <div class="w-28 grid grid-cols-3 gap-2 ml-2">
211 |                       <button x-on:click="addQty(item, -1)" class="rounded-lg text-center py-1 text-white bg-blue-gray-600 hover:bg-blue-gray-700 focus:outline-none">
212 |                         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-3 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor">
213 |                           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
214 |                         </svg>
215 |                       </button>
216 |                       <input x-model.number="item.qty" type="text" class="bg-white rounded-lg text-center shadow focus:outline-none focus:shadow-lg text-sm">
217 |                       <button x-on:click="addQty(item, 1)" class="rounded-lg text-center py-1 text-white bg-blue-gray-600 hover:bg-blue-gray-700 focus:outline-none">
218 |                         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-3 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor">
219 |                           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
220 |                         </svg>
221 |                       </button>
222 |                     </div>
223 |                   </div>
224 |                 </div>
225 |               </template>
226 |             </div>
227 |           </div>
228 |           <!-- end of cart items -->
229 | 
230 |           <!-- payment info -->
231 |           <div class="select-none h-auto w-full text-center pt-3 pb-4 px-4">
232 |             <div class="flex mb-3 text-lg font-semibold text-blue-gray-700">
233 |               <div>TOTAL</div>
234 |               <div class="text-right w-full" x-text="priceFormat(getTotalPrice())"></div>
235 |             </div>
236 |             <div class="mb-3 text-blue-gray-700 px-3 pt-2 pb-3 rounded-lg bg-blue-gray-50">
237 |               <div class="flex text-lg font-semibold">
238 |                 <div class="flex-grow text-left">CASH</div>
239 |                 <div class="flex text-right">
240 |                   <div class="mr-2">Rp</div>
241 |                   <input x-bind:value="numberFormat(cash)" x-on:keyup="updateCash($event.target.value)" type="text" class="w-28 text-right bg-white shadow rounded-lg focus:bg-white focus:shadow-lg px-2 focus:outline-none">
242 |                 </div>
243 |               </div>
244 |               <hr class="my-2">
245 |               <div class="grid grid-cols-3 gap-2 mt-2">
246 |                 <template x-for="money in moneys">
247 |                   <button x-on:click="addCash(money)" class="bg-white rounded-lg shadow hover:shadow-lg focus:outline-none inline-block px-2 py-1 text-sm">+<span x-text="numberFormat(money)"></span></button>
248 |                 </template>
249 |               </div>
250 |             </div>
251 |             <div
252 |               x-show="change > 0"
253 |               class="flex mb-3 text-lg font-semibold bg-cyan-50 text-blue-gray-700 rounded-lg py-2 px-3"
254 |             >
255 |               <div class="text-cyan-800">CHANGE</div>
256 |               <div
257 |                 class="text-right flex-grow text-cyan-600"
258 |                 x-text="priceFormat(change)">
259 |               </div>
260 |             </div>
261 |             <div
262 |               x-show="change < 0"
263 |               class="flex mb-3 text-lg font-semibold bg-pink-100 text-blue-gray-700 rounded-lg py-2 px-3"
264 |             >
265 |               <div
266 |                 class="text-right flex-grow text-pink-600"
267 |                 x-text="priceFormat(change)">
268 |               </div>
269 |             </div>
270 |             <div
271 |               x-show="change == 0 && cart.length > 0"
272 |               class="flex justify-center mb-3 text-lg font-semibold bg-cyan-50 text-cyan-700 rounded-lg py-2 px-3"
273 |             >
274 |               <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor">
275 |                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5" />
276 |               </svg>
277 |             </div>
278 |             <button
279 |               class="text-white rounded-2xl text-lg w-full py-3 focus:outline-none"
280 |               x-bind:class="{
281 |                 'bg-cyan-500 hover:bg-cyan-600': submitable(),
282 |                 'bg-blue-gray-200': !submitable()
283 |               }"
284 |               :disabled="!submitable()"
285 |               x-on:click="submit()"
286 |             >
287 |               SUBMIT
288 |             </button>
289 |           </div>
290 |           <!-- end of payment info -->
291 |         </div>
292 |       </div>
293 |       <!-- end of right sidebar -->
294 |     </div>
295 | 
296 |     <!-- modal first time -->
297 |     <div x-show="firstTime" class="fixed glass w-full h-screen left-0 top-0 z-10 flex flex-wrap justify-center content-center p-24">
298 |       <div class="w-96 rounded-3xl p-8 bg-white shadow-xl">
299 |         <div class="text-center">
300 |           <svg xmlns="http://www.w3.org/2000/svg" class="inline-block" width="123.3" height="123.233" viewBox="0 0 32.623 32.605">
301 |             <path d="M15.612 0c-.36.003-.705.01-1.03.021C8.657.223 5.742 1.123 3.4 3.472.714 6.166-.145 9.758.019 17.607c.137 6.52.965 9.271 3.542 11.768 1.31 1.269 2.658 2 4.73 2.57.846.232 2.73.547 3.56.596.36.021 2.336.048 4.392.06 3.162.018 4.031-.016 5.63-.221 3.915-.504 6.43-1.778 8.234-4.173 1.806-2.396 2.514-5.731 2.516-11.846.001-4.407-.42-7.59-1.278-9.643-1.463-3.501-4.183-5.53-8.394-6.258-1.634-.283-4.823-.475-7.339-.46z" fill="#fff"/><path d="M16.202 13.758c-.056 0-.11 0-.16.003-.926.031-1.38.172-1.747.538-.42.421-.553.982-.528 2.208.022 1.018.151 1.447.553 1.837.205.198.415.313.739.402.132.036.426.085.556.093.056.003.365.007.686.009.494.003.63-.002.879-.035.611-.078 1.004-.277 1.286-.651.282-.374.392-.895.393-1.85 0-.688-.066-1.185-.2-1.506-.228-.547-.653-.864-1.31-.977a7.91 7.91 0 00-1.147-.072zM16.22 19.926c-.056 0-.11 0-.16.003-.925.031-1.38.172-1.746.539-.42.42-.554.981-.528 2.207.02 1.018.15 1.448.553 1.838.204.198.415.312.738.4.132.037.426.086.556.094.056.003.365.007.686.009.494.003.63-.002.88-.034.61-.08 1.003-.278 1.285-.652.282-.374.393-.895.393-1.85 0-.688-.066-1.185-.2-1.506-.228-.547-.653-.863-1.31-.977a7.91 7.91 0 00-1.146-.072zM22.468 13.736c-.056 0-.11.001-.161.003-.925.032-1.38.172-1.746.54-.42.42-.554.98-.528 2.207.021 1.018.15 1.447.553 1.837.205.198.415.313.739.401.132.037.426.086.556.094.056.003.364.007.685.009.494.003.63-.002.88-.035.611-.078 1.004-.277 1.285-.651.282-.375.393-.895.393-1.85 0-.688-.065-1.185-.2-1.506-.228-.547-.653-.864-1.31-.977a7.91 7.91 0 00-1.146-.072z" fill="#00dace"/><path d="M9.937 13.736c-.056 0-.11.001-.161.003-.925.032-1.38.172-1.746.54-.42.42-.554.98-.528 2.207.021 1.018.15 1.447.553 1.837.204.198.415.313.738.401.133.037.427.086.556.094.056.003.365.007.686.009.494.003.63-.002.88-.035.61-.078 1.003-.277 1.285-.651.282-.375.393-.895.393-1.85 0-.688-.066-1.185-.2-1.506-.228-.547-.653-.864-1.31-.977a7.91 7.91 0 00-1.146-.072zM16.202 7.59c-.056 0-.11 0-.16.002-.926.032-1.38.172-1.747.54-.42.42-.553.98-.528 2.206.022 1.019.151 1.448.553 1.838.205.198.415.312.739.401.132.037.426.086.556.093.056.003.365.007.686.01.494.002.63-.003.879-.035.611-.079 1.004-.278 1.286-.652.282-.374.392-.895.393-1.85 0-.688-.066-1.185-.2-1.505-.228-.547-.653-.864-1.31-.978a7.91 7.91 0 00-1.147-.071z" fill="#00bcd4"/><g><path d="M15.612 0c-.36.003-.705.01-1.03.021C8.657.223 5.742 1.123 3.4 3.472.714 6.166-.145 9.758.019 17.607c.137 6.52.965 9.271 3.542 11.768 1.31 1.269 2.658 2 4.73 2.57.846.232 2.73.547 3.56.596.36.021 2.336.048 4.392.06 3.162.018 4.031-.016 5.63-.221 3.915-.504 6.43-1.778 8.234-4.173 1.806-2.396 2.514-5.731 2.516-11.846.001-4.407-.42-7.59-1.278-9.643-1.463-3.501-4.183-5.53-8.394-6.258-1.634-.283-4.823-.475-7.339-.46z" fill="#fff"/><path d="M16.202 13.758c-.056 0-.11 0-.16.003-.926.031-1.38.172-1.747.538-.42.421-.553.982-.528 2.208.022 1.018.151 1.447.553 1.837.205.198.415.313.739.402.132.036.426.085.556.093.056.003.365.007.686.009.494.003.63-.002.879-.035.611-.078 1.004-.277 1.286-.651.282-.374.392-.895.393-1.85 0-.688-.066-1.185-.2-1.506-.228-.547-.653-.864-1.31-.977a7.91 7.91 0 00-1.147-.072zM16.22 19.926c-.056 0-.11 0-.16.003-.925.031-1.38.172-1.746.539-.42.42-.554.981-.528 2.207.02 1.018.15 1.448.553 1.838.204.198.415.312.738.4.132.037.426.086.556.094.056.003.365.007.686.009.494.003.63-.002.88-.034.61-.08 1.003-.278 1.285-.652.282-.374.393-.895.393-1.85 0-.688-.066-1.185-.2-1.506-.228-.547-.653-.863-1.31-.977a7.91 7.91 0 00-1.146-.072zM22.468 13.736c-.056 0-.11.001-.161.003-.925.032-1.38.172-1.746.54-.42.42-.554.98-.528 2.207.021 1.018.15 1.447.553 1.837.205.198.415.313.739.401.132.037.426.086.556.094.056.003.364.007.685.009.494.003.63-.002.88-.035.611-.078 1.004-.277 1.285-.651.282-.375.393-.895.393-1.85 0-.688-.065-1.185-.2-1.506-.228-.547-.653-.864-1.31-.977a7.91 7.91 0 00-1.146-.072z" fill="#00dace"/><path d="M9.937 13.736c-.056 0-.11.001-.161.003-.925.032-1.38.172-1.746.54-.42.42-.554.98-.528 2.207.021 1.018.15 1.447.553 1.837.204.198.415.313.738.401.133.037.427.086.556.094.056.003.365.007.686.009.494.003.63-.002.88-.035.61-.078 1.003-.277 1.285-.651.282-.375.393-.895.393-1.85 0-.688-.066-1.185-.2-1.506-.228-.547-.653-.864-1.31-.977a7.91 7.91 0 00-1.146-.072zM16.202 7.59c-.056 0-.11 0-.16.002-.926.032-1.38.172-1.747.54-.42.42-.553.98-.528 2.206.022 1.019.151 1.448.553 1.838.205.198.415.312.739.401.132.037.426.086.556.093.056.003.365.007.686.01.494.002.63-.003.879-.035.611-.079 1.004-.278 1.286-.652.282-.374.392-.895.393-1.85 0-.688-.066-1.185-.2-1.505-.228-.547-.653-.864-1.31-.978a7.91 7.91 0 00-1.147-.071z" fill="#00bcd4"/></g>
302 |           </svg>
303 |           <h3 class="text-center text-2xl mb-8">FIRST TIME?</h3>
304 |         </div>
305 |         <div class="text-left">
306 |           <button x-on:click="startWithSampleData()" class="text-left w-full mb-3 rounded-xl bg-blue-gray-500 text-white focus:outline-none hover:bg-cyan-400 px-4 py-4">
307 |             <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block -mt-1 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
308 |               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 4H6a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-2m-4-1v8m0 0l3-3m-3 3L9 8m-5 5h2.586a1 1 0 01.707.293l2.414 2.414a1 1 0 00.707.293h3.172a1 1 0 00.707-.293l2.414-2.414a1 1 0 01.707-.293H20" />
309 |             </svg>
310 |             LOAD SAMPLE DATA
311 |           </button>
312 |           <button x-on:click="startBlank()" class="text-left w-full rounded-xl bg-blue-gray-500 text-white focus:outline-none hover:bg-teal-400 px-4 py-4">
313 |             <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block -mt-1 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
314 |               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
315 |             </svg>
316 |             LEAVE IT EMPTY
317 |           </button>
318 |         </div>
319 |       </div>
320 |     </div>
321 | 
322 |     <!-- modal receipt -->
323 |     <div
324 |       x-show="isShowModalReceipt"
325 |       class="fixed w-full h-screen left-0 top-0 z-10 flex flex-wrap justify-center content-center p-24"
326 |     >
327 |       <div
328 |         x-show="isShowModalReceipt"
329 |         class="fixed glass w-full h-screen left-0 top-0 z-0" x-on:click="closeModalReceipt()"
330 |         x-transition:enter="transition ease-out duration-100"
331 |         x-transition:enter-start="opacity-0"
332 |         x-transition:enter-end="opacity-100"
333 |         x-transition:leave="transition ease-in duration-100"
334 |         x-transition:leave-start="opacity-100"
335 |         x-transition:leave-end="opacity-0"
336 |       ></div>
337 |       <div
338 |         x-show="isShowModalReceipt"
339 |         class="w-96 rounded-3xl bg-white shadow-xl overflow-hidden z-10"
340 |         x-transition:enter="transition ease-out duration-100"
341 |         x-transition:enter-start="opacity-0 transform scale-90"
342 |         x-transition:enter-end="opacity-100 transform scale-100"
343 |         x-transition:leave="transition ease-in duration-100"
344 |         x-transition:leave-start="opacity-100 transform scale-100"
345 |         x-transition:leave-end="opacity-0 transform scale-90"
346 |       >
347 |         <div id="receipt-content" class="text-left w-full text-sm p-6 overflow-auto">
348 |           <div class="text-center">
349 |             <img src="img/receipt-logo.png" alt="Tailwind POS" class="mb-3 w-8 h-8 inline-block">
350 |             <h2 class="text-xl font-semibold">TAILWIND POS</h2>
351 |             <p>CABANG KONOHA SELATAN</p>
352 |           </div>
353 |           <div class="flex mt-4 text-xs">
354 |             <div class="flex-grow">No: <span x-text="receiptNo"></span></div>
355 |             <div x-text="receiptDate"></div>
356 |           </div>
357 |           <hr class="my-2">
358 |           <div>
359 |             <table class="w-full text-xs">
360 |               <thead>
361 |                 <tr>
362 |                   <th class="py-1 w-1/12 text-center">#</th>
363 |                   <th class="py-1 text-left">Item</th>
364 |                   <th class="py-1 w-2/12 text-center">Qty</th>
365 |                   <th class="py-1 w-3/12 text-right">Subtotal</th>
366 |                 </tr>
367 |               </thead>
368 |               <tbody>
369 |                 <template x-for="(item, index) in cart" :key="item">
370 |                   <tr>
371 |                     <td class="py-2 text-center" x-text="index+1"></td>
372 |                     <td class="py-2 text-left">
373 |                       <span x-text="item.name"></span>
374 |                       <br/>
375 |                       <small x-text="priceFormat(item.price)"></small>
376 |                     </td>
377 |                     <td class="py-2 text-center" x-text="item.qty"></td>
378 |                     <td class="py-2 text-right" x-text="priceFormat(item.qty * item.price)"></td>
379 |                   </tr>
380 |                 </template>
381 |               </tbody>
382 |             </table>
383 |           </div>
384 |           <hr class="my-2">
385 |           <div>
386 |             <div class="flex font-semibold">
387 |               <div class="flex-grow">TOTAL</div>
388 |               <div x-text="priceFormat(getTotalPrice())"></div>
389 |             </div>
390 |             <div class="flex text-xs font-semibold">
391 |               <div class="flex-grow">PAY AMOUNT</div>
392 |               <div x-text="priceFormat(cash)"></div>
393 |             </div>
394 |             <hr class="my-2">
395 |             <div class="flex text-xs font-semibold">
396 |               <div class="flex-grow">CHANGE</div>
397 |               <div x-text="priceFormat(change)"></div>
398 |             </div>
399 |           </div>
400 |         </div>
401 |         <div class="p-4 w-full">
402 |           <button class="bg-cyan-500 text-white text-lg px-4 py-3 rounded-2xl w-full focus:outline-none" x-on:click="printAndProceed()">PROCEED</button>
403 |         </div>
404 |       </div>
405 |     </div>
406 |   </div>
407 |   <!-- end of noprint-area -->
408 | 
409 |   <div id="print-area" class="print-area"></div>
410 | </body>
411 | </html>
412 | 


--------------------------------------------------------------------------------
/js/script.js:
--------------------------------------------------------------------------------
  1 | async function loadDatabase() {
  2 |   const db = await idb.openDB("tailwind_store", 1, {
  3 |     upgrade(db, oldVersion, newVersion, transaction) {
  4 |       db.createObjectStore("products", {
  5 |         keyPath: "id",
  6 |         autoIncrement: true,
  7 |       });
  8 |       db.createObjectStore("sales", {
  9 |         keyPath: "id",
 10 |         autoIncrement: true,
 11 |       });
 12 |     },
 13 |   });
 14 | 
 15 |   return {
 16 |     db,
 17 |     getProducts: async () => await db.getAll("products"),
 18 |     addProduct: async (product) => await db.add("products", product),
 19 |     editProduct: async (product) =>
 20 |       await db.put("products", product.id, product),
 21 |     deleteProduct: async (product) => await db.delete("products", product.id),
 22 |   };
 23 | }
 24 | 
 25 | function initApp() {
 26 |   const app = {
 27 |     db: null,
 28 |     time: null,
 29 |     firstTime: localStorage.getItem("first_time") === null,
 30 |     activeMenu: 'pos',
 31 |     loadingSampleData: false,
 32 |     moneys: [2000, 5000, 10000, 20000, 50000, 100000],
 33 |     products: [],
 34 |     keyword: "",
 35 |     cart: [],
 36 |     cash: 0,
 37 |     change: 0,
 38 |     isShowModalReceipt: false,
 39 |     receiptNo: null,
 40 |     receiptDate: null,
 41 |     async initDatabase() {
 42 |       this.db = await loadDatabase();
 43 |       this.loadProducts();
 44 |     },
 45 |     async loadProducts() {
 46 |       this.products = await this.db.getProducts();
 47 |       console.log("products loaded", this.products);
 48 |     },
 49 |     async startWithSampleData() {
 50 |       const response = await fetch("data/sample.json");
 51 |       const data = await response.json();
 52 |       this.products = data.products;
 53 |       for (let product of data.products) {
 54 |         await this.db.addProduct(product);
 55 |       }
 56 | 
 57 |       this.setFirstTime(false);
 58 |     },
 59 |     startBlank() {
 60 |       this.setFirstTime(false);
 61 |     },
 62 |     setFirstTime(firstTime) {
 63 |       this.firstTime = firstTime;
 64 |       if (firstTime) {
 65 |         localStorage.removeItem("first_time");
 66 |       } else {
 67 |         localStorage.setItem("first_time", new Date().getTime());
 68 |       }
 69 |     },
 70 |     filteredProducts() {
 71 |       const rg = this.keyword ? new RegExp(this.keyword, "gi") : null;
 72 |       return this.products.filter((p) => !rg || p.name.match(rg));
 73 |     },
 74 |     addToCart(product) {
 75 |       const index = this.findCartIndex(product);
 76 |       if (index === -1) {
 77 |         this.cart.push({
 78 |           productId: product.id,
 79 |           image: product.image,
 80 |           name: product.name,
 81 |           price: product.price,
 82 |           option: product.option,
 83 |           qty: 1,
 84 |         });
 85 |       } else {
 86 |         this.cart[index].qty += 1;
 87 |       }
 88 |       this.beep();
 89 |       this.updateChange();
 90 |     },
 91 |     findCartIndex(product) {
 92 |       return this.cart.findIndex((p) => p.productId === product.id);
 93 |     },
 94 |     addQty(item, qty) {
 95 |       const index = this.cart.findIndex((i) => i.productId === item.productId);
 96 |       if (index === -1) {
 97 |         return;
 98 |       }
 99 |       const afterAdd = item.qty + qty;
100 |       if (afterAdd === 0) {
101 |         this.cart.splice(index, 1);
102 |         this.clearSound();
103 |       } else {
104 |         this.cart[index].qty = afterAdd;
105 |         this.beep();
106 |       }
107 |       this.updateChange();
108 |     },
109 |     addCash(amount) {      
110 |       this.cash = (this.cash || 0) + amount;
111 |       this.updateChange();
112 |       this.beep();
113 |     },
114 |     getItemsCount() {
115 |       return this.cart.reduce((count, item) => count + item.qty, 0);
116 |     },
117 |     updateChange() {
118 |       this.change = this.cash - this.getTotalPrice();
119 |     },
120 |     updateCash(value) {
121 |       this.cash = parseFloat(value.replace(/[^0-9]+/g, ""));
122 |       this.updateChange();
123 |     },
124 |     getTotalPrice() {
125 |       return this.cart.reduce(
126 |         (total, item) => total + item.qty * item.price,
127 |         0
128 |       );
129 |     },
130 |     submitable() {
131 |       return this.change >= 0 && this.cart.length > 0;
132 |     },
133 |     submit() {
134 |       const time = new Date();
135 |       this.isShowModalReceipt = true;
136 |       this.receiptNo = `TWPOS-KS-${Math.round(time.getTime() / 1000)}`;
137 |       this.receiptDate = this.dateFormat(time);
138 |     },
139 |     closeModalReceipt() {
140 |       this.isShowModalReceipt = false;
141 |     },
142 |     dateFormat(date) {
143 |       const formatter = new Intl.DateTimeFormat('id', { dateStyle: 'short', timeStyle: 'short'});
144 |       return formatter.format(date);
145 |     },
146 |     numberFormat(number) {
147 |       return (number || "")
148 |         .toString()
149 |         .replace(/^0|\./g, "")
150 |         .replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1.");
151 |     },
152 |     priceFormat(number) {
153 |       return number ? `Rp. ${this.numberFormat(number)}` : `Rp. 0`;
154 |     },
155 |     clear() {
156 |       this.cash = 0;
157 |       this.cart = [];
158 |       this.receiptNo = null;
159 |       this.receiptDate = null;
160 |       this.updateChange();
161 |       this.clearSound();
162 |     },
163 |     beep() {
164 |       this.playSound("sound/beep-29.mp3");
165 |     },
166 |     clearSound() {
167 |       this.playSound("sound/button-21.mp3");
168 |     },
169 |     playSound(src) {
170 |       const sound = new Audio();
171 |       sound.src = src;
172 |       sound.play();
173 |       sound.onended = () => delete(sound);
174 |     },
175 |     printAndProceed() {
176 |       const receiptContent = document.getElementById('receipt-content');
177 |       const titleBefore = document.title;
178 |       const printArea = document.getElementById('print-area');
179 | 
180 |       printArea.innerHTML = receiptContent.innerHTML;
181 |       document.title = this.receiptNo;
182 | 
183 |       window.print();
184 |       this.isShowModalReceipt = false;
185 | 
186 |       printArea.innerHTML = '';
187 |       document.title = titleBefore;
188 | 
189 |       // TODO save sale data to database
190 | 
191 |       this.clear();
192 |     }
193 |   };
194 | 
195 |   return app;
196 | }
197 | 


--------------------------------------------------------------------------------
/sound/beep-29.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emsifa/tailwind-pos/fda7c6d89404a16395dd4441d1a8791a53980271/sound/beep-29.mp3


--------------------------------------------------------------------------------
/sound/button-21.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emsifa/tailwind-pos/fda7c6d89404a16395dd4441d1a8791a53980271/sound/button-21.mp3


--------------------------------------------------------------------------------