From 9d5a9843e515cc1038421d13a789529523e2337f Mon Sep 17 00:00:00 2001
From: faxblaster <alison.l.kirk@gmail.com>
Date: Wed, 21 Jul 2021 09:19:58 -0400
Subject: [PATCH 1/4] add Customers listing page

---
 dist/js/tool.js                               | 887 ++++++++++++++----
 resources/js/components/ChargesTable.vue      | 159 ++--
 resources/js/components/CustomersTable.vue    | 137 +++
 ...aginationLinks.vue => PaginationLinks.vue} |   4 +-
 resources/js/tool.js                          |  24 +-
 resources/js/views/Customers.vue              |  15 +
 resources/views/navigation.blade.php          |   6 +
 routes/api.php                                |   2 +
 src/Clients/StripeClient.php                  |  10 +
 src/Http/StripeCustomersController.php        |  19 +
 10 files changed, 980 insertions(+), 283 deletions(-)
 create mode 100644 resources/js/components/CustomersTable.vue
 rename resources/js/components/{ChargesPaginationLinks.vue => PaginationLinks.vue} (93%)
 create mode 100644 resources/js/views/Customers.vue
 create mode 100644 src/Http/StripeCustomersController.php

diff --git a/dist/js/tool.js b/dist/js/tool.js
index 1fa5f6f..53df835 100644
--- a/dist/js/tool.js
+++ b/dist/js/tool.js
@@ -1780,14 +1780,19 @@ Nova.booting(function (Vue, router) {
     Vue.config.devtools = true;
 
     router.addRoutes([{
-        name: 'nova-stripe',
-        path: '/nova-stripe',
+        name: "nova-stripe",
+        path: "/nova-stripe",
         component: __webpack_require__(6)
     }, {
-        name: 'charge-detail',
-        path: '/nova-stripe/charge/:chargeId',
+        name: "charge-detail",
+        path: "/nova-stripe/charge/:chargeId",
         component: __webpack_require__(24),
         props: true
+    }, {
+        name: "customer-list",
+        path: "/nova-stripe/customers",
+        component: __webpack_require__(37),
+        props: true
     }]);
 });
 
@@ -2236,7 +2241,7 @@ exports = module.exports = __webpack_require__(1)(false);
 
 
 // module
-exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/* Scoped Styles */\n", ""]);
+exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/* Scoped Styles */\n", ""]);
 
 // exports
 
@@ -2247,8 +2252,8 @@ exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\
 
 "use strict";
 Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__ChargesPaginationLinks_vue__ = __webpack_require__(19);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__ChargesPaginationLinks_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__ChargesPaginationLinks_vue__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__PaginationLinks_vue__ = __webpack_require__(47);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__PaginationLinks_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__PaginationLinks_vue__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__utils_moneyFormat__ = __webpack_require__(3);
 //
 //
@@ -2320,13 +2325,21 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
 
 
 
 
 /* harmony default export */ __webpack_exports__["default"] = ({
     components: {
-        'charges-pagination-links': __WEBPACK_IMPORTED_MODULE_0__ChargesPaginationLinks_vue___default.a
+        "charges-pagination-links": __WEBPACK_IMPORTED_MODULE_0__PaginationLinks_vue___default.a
     },
 
     data: function data() {
@@ -2346,7 +2359,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
         listCharges: function listCharges(params) {
             var _this = this;
 
-            Nova.request().get('/nova-vendor/nova-stripe/stripe/charges', { params: params }).then(function (response) {
+            Nova.request().get("/nova-vendor/nova-stripe/stripe/charges", { params: params }).then(function (response) {
                 _this.charges = response.data.charges.data;
                 _this.hasMore = response.data.charges.has_more;
                 _this.initialLoading = false;
@@ -2356,14 +2369,16 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
         nextPage: function nextPage() {
             this.loading = true;
 
-            this.listCharges({ 'starting_after': this.charges[this.charges.length - 1].id });
+            this.listCharges({
+                starting_after: this.charges[this.charges.length - 1].id
+            });
 
             this.page++;
         },
         previousPage: function previousPage() {
             this.loading = true;
 
-            this.listCharges({ 'ending_before': this.charges[0].id });
+            this.listCharges({ ending_before: this.charges[0].id });
 
             if (this.hasPrevious) {
                 this.page--;
@@ -2379,7 +2394,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 
     filters: {
         date: function date(_date) {
-            return moment.unix(_date).format('YYYY/MM/DD h:mm:ss a');
+            return moment.unix(_date).format("YYYY/MM/DD h:mm:ss a");
         },
 
 
@@ -2392,187 +2407,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 });
 
 /***/ }),
-/* 19 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var disposed = false
-var normalizeComponent = __webpack_require__(0)
-/* script */
-var __vue_script__ = __webpack_require__(20)
-/* template */
-var __vue_template__ = __webpack_require__(21)
-/* template functional */
-var __vue_template_functional__ = false
-/* styles */
-var __vue_styles__ = null
-/* scopeId */
-var __vue_scopeId__ = null
-/* moduleIdentifier (server only) */
-var __vue_module_identifier__ = null
-var Component = normalizeComponent(
-  __vue_script__,
-  __vue_template__,
-  __vue_template_functional__,
-  __vue_styles__,
-  __vue_scopeId__,
-  __vue_module_identifier__
-)
-Component.options.__file = "resources/js/components/ChargesPaginationLinks.vue"
-
-/* hot reload */
-if (false) {(function () {
-  var hotAPI = require("vue-hot-reload-api")
-  hotAPI.install(require("vue"), false)
-  if (!hotAPI.compatible) return
-  module.hot.accept()
-  if (!module.hot.data) {
-    hotAPI.createRecord("data-v-14899e2b", Component.options)
-  } else {
-    hotAPI.reload("data-v-14899e2b", Component.options)
-  }
-  module.hot.dispose(function (data) {
-    disposed = true
-  })
-})()}
-
-module.exports = Component.exports
-
-
-/***/ }),
-/* 20 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-
-/* harmony default export */ __webpack_exports__["default"] = ({
-    props: ['charges', 'hasMore', 'hasPrevious'],
-
-    methods: {
-        /**
-         * Select the previous page.
-         */
-        previousPage: function previousPage() {
-            this.$emit('previous');
-        },
-
-
-        /**
-         * Select the next page.
-         */
-        nextPage: function nextPage() {
-            this.$emit('next');
-        }
-    }
-});
-
-/***/ }),
-/* 21 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var render = function() {
-  var _vm = this
-  var _h = _vm.$createElement
-  var _c = _vm._self._c || _h
-  return _c("div", { staticClass: "bg-20 rounded-b" }, [
-    _vm.charges.length > 0
-      ? _c("nav", { staticClass: "flex" }, [
-          _c(
-            "button",
-            {
-              staticClass: "btn btn-link py-3 px-4",
-              class: {
-                "text-primary dim": _vm.hasPrevious,
-                "text-80 opacity-50 cursor-not-allowed": !_vm.hasPrevious
-              },
-              attrs: {
-                disabled: !_vm.hasPrevious,
-                rel: "prev",
-                dusk: "previous"
-              },
-              on: {
-                click: function($event) {
-                  $event.preventDefault()
-                  return _vm.previousPage()
-                }
-              }
-            },
-            [
-              _vm._v(
-                "\n            " + _vm._s(_vm.__("Previous")) + "\n        "
-              )
-            ]
-          ),
-          _vm._v(" "),
-          _c(
-            "button",
-            {
-              staticClass: "ml-auto btn btn-link py-3 px-4",
-              class: {
-                "text-primary dim": _vm.hasMore,
-                "text-80 opacity-50 cursor-not-allowed": !_vm.hasMore
-              },
-              attrs: { disabled: !_vm.hasMore, rel: "next", dusk: "next" },
-              on: {
-                click: function($event) {
-                  $event.preventDefault()
-                  return _vm.nextPage()
-                }
-              }
-            },
-            [_vm._v("\n            " + _vm._s(_vm.__("Next")) + "\n        ")]
-          )
-        ])
-      : _vm._e()
-  ])
-}
-var staticRenderFns = []
-render._withStripped = true
-module.exports = { render: render, staticRenderFns: staticRenderFns }
-if (false) {
-  module.hot.accept()
-  if (module.hot.data) {
-    require("vue-hot-reload-api")      .rerender("data-v-14899e2b", module.exports)
-  }
-}
-
-/***/ }),
+/* 19 */,
+/* 20 */,
+/* 21 */,
 /* 22 */
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -2608,7 +2445,7 @@ var render = function() {
                           { staticClass: "inline-flex items-center" },
                           [
                             _vm._v(
-                              "\n                     Charge ID\n                  "
+                              "\n                            Charge ID\n                        "
                             )
                           ]
                         )
@@ -2620,7 +2457,7 @@ var render = function() {
                           { staticClass: "inline-flex items-center" },
                           [
                             _vm._v(
-                              "\n                     Amount\n                  "
+                              "\n                            Amount\n                        "
                             )
                           ]
                         )
@@ -2632,7 +2469,7 @@ var render = function() {
                           { staticClass: "inline-flex items-center" },
                           [
                             _vm._v(
-                              "\n                     Created\n                  "
+                              "\n                            Created\n                        "
                             )
                           ]
                         )
@@ -2644,7 +2481,7 @@ var render = function() {
                           { staticClass: "inline-flex items-center" },
                           [
                             _vm._v(
-                              "\n                     Status\n                  "
+                              "\n                            Status\n                        "
                             )
                           ]
                         )
@@ -2718,7 +2555,7 @@ var render = function() {
           _vm._v(" "),
           _c("charges-pagination-links", {
             attrs: {
-              charges: _vm.charges,
+              resource: _vm.charges,
               hasMore: _vm.hasMore,
               hasPrevious: _vm.hasPrevious
             },
@@ -3095,5 +2932,659 @@ if (false) {
 
 // removed by extract-text-webpack-plugin
 
+/***/ }),
+/* 31 */,
+/* 32 */,
+/* 33 */,
+/* 34 */,
+/* 35 */,
+/* 36 */,
+/* 37 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var disposed = false
+var normalizeComponent = __webpack_require__(0)
+/* script */
+var __vue_script__ = __webpack_require__(40)
+/* template */
+var __vue_template__ = __webpack_require__(41)
+/* template functional */
+var __vue_template_functional__ = false
+/* styles */
+var __vue_styles__ = null
+/* scopeId */
+var __vue_scopeId__ = null
+/* moduleIdentifier (server only) */
+var __vue_module_identifier__ = null
+var Component = normalizeComponent(
+  __vue_script__,
+  __vue_template__,
+  __vue_template_functional__,
+  __vue_styles__,
+  __vue_scopeId__,
+  __vue_module_identifier__
+)
+Component.options.__file = "resources/js/views/Customers.vue"
+
+/* hot reload */
+if (false) {(function () {
+  var hotAPI = require("vue-hot-reload-api")
+  hotAPI.install(require("vue"), false)
+  if (!hotAPI.compatible) return
+  module.hot.accept()
+  if (!module.hot.data) {
+    hotAPI.createRecord("data-v-c9944874", Component.options)
+  } else {
+    hotAPI.reload("data-v-c9944874", Component.options)
+  }
+  module.hot.dispose(function (data) {
+    disposed = true
+  })
+})()}
+
+module.exports = Component.exports
+
+
+/***/ }),
+/* 38 */,
+/* 39 */,
+/* 40 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__components_CustomersTable__ = __webpack_require__(42);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__components_CustomersTable___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__components_CustomersTable__);
+//
+//
+//
+//
+//
+//
+//
+//
+
+
+
+/* harmony default export */ __webpack_exports__["default"] = ({
+    components: { CustomersTable: __WEBPACK_IMPORTED_MODULE_0__components_CustomersTable___default.a }
+});
+
+/***/ }),
+/* 41 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var render = function() {
+  var _vm = this
+  var _h = _vm.$createElement
+  var _c = _vm._self._c || _h
+  return _c(
+    "div",
+    [
+      _c("heading", { staticClass: "mb-6" }, [_vm._v("Customers")]),
+      _vm._v(" "),
+      _c("customers-table")
+    ],
+    1
+  )
+}
+var staticRenderFns = []
+render._withStripped = true
+module.exports = { render: render, staticRenderFns: staticRenderFns }
+if (false) {
+  module.hot.accept()
+  if (module.hot.data) {
+    require("vue-hot-reload-api")      .rerender("data-v-c9944874", module.exports)
+  }
+}
+
+/***/ }),
+/* 42 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var disposed = false
+function injectStyle (ssrContext) {
+  if (disposed) return
+  __webpack_require__(43)
+}
+var normalizeComponent = __webpack_require__(0)
+/* script */
+var __vue_script__ = __webpack_require__(45)
+/* template */
+var __vue_template__ = __webpack_require__(46)
+/* template functional */
+var __vue_template_functional__ = false
+/* styles */
+var __vue_styles__ = injectStyle
+/* scopeId */
+var __vue_scopeId__ = null
+/* moduleIdentifier (server only) */
+var __vue_module_identifier__ = null
+var Component = normalizeComponent(
+  __vue_script__,
+  __vue_template__,
+  __vue_template_functional__,
+  __vue_styles__,
+  __vue_scopeId__,
+  __vue_module_identifier__
+)
+Component.options.__file = "resources/js/components/CustomersTable.vue"
+
+/* hot reload */
+if (false) {(function () {
+  var hotAPI = require("vue-hot-reload-api")
+  hotAPI.install(require("vue"), false)
+  if (!hotAPI.compatible) return
+  module.hot.accept()
+  if (!module.hot.data) {
+    hotAPI.createRecord("data-v-b32879b8", Component.options)
+  } else {
+    hotAPI.reload("data-v-b32879b8", Component.options)
+  }
+  module.hot.dispose(function (data) {
+    disposed = true
+  })
+})()}
+
+module.exports = Component.exports
+
+
+/***/ }),
+/* 43 */
+/***/ (function(module, exports, __webpack_require__) {
+
+// style-loader: Adds some css to the DOM by adding a <style> tag
+
+// load the styles
+var content = __webpack_require__(44);
+if(typeof content === 'string') content = [[module.i, content, '']];
+if(content.locals) module.exports = content.locals;
+// add the styles to the DOM
+var update = __webpack_require__(2)("2db4542b", content, false, {});
+// Hot Module Replacement
+if(false) {
+ // When the styles change, update the <style> tags
+ if(!content.locals) {
+   module.hot.accept("!!../../../node_modules/css-loader/index.js!../../../node_modules/vue-loader/lib/style-compiler/index.js?{\"vue\":true,\"id\":\"data-v-b32879b8\",\"scoped\":false,\"hasInlineConfig\":true}!../../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./CustomersTable.vue", function() {
+     var newContent = require("!!../../../node_modules/css-loader/index.js!../../../node_modules/vue-loader/lib/style-compiler/index.js?{\"vue\":true,\"id\":\"data-v-b32879b8\",\"scoped\":false,\"hasInlineConfig\":true}!../../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./CustomersTable.vue");
+     if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
+     update(newContent);
+   });
+ }
+ // When the module is disposed, remove the <style> tags
+ module.hot.dispose(function() { update(); });
+}
+
+/***/ }),
+/* 44 */
+/***/ (function(module, exports, __webpack_require__) {
+
+exports = module.exports = __webpack_require__(1)(false);
+// imports
+
+
+// module
+exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/* Scoped Styles */\n", ""]);
+
+// exports
+
+
+/***/ }),
+/* 45 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__PaginationLinks_vue__ = __webpack_require__(47);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__PaginationLinks_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__PaginationLinks_vue__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__utils_moneyFormat__ = __webpack_require__(3);
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+
+
+
+/* harmony default export */ __webpack_exports__["default"] = ({
+    components: {
+        "customers-pagination-links": __WEBPACK_IMPORTED_MODULE_0__PaginationLinks_vue___default.a
+    },
+
+    data: function data() {
+        return {
+            customers: {},
+            initialLoading: true,
+            loading: false,
+            hasMore: false,
+            page: 1
+        };
+    },
+
+
+    methods: {
+        moment: moment,
+
+        listCustomers: function listCustomers(params) {
+            var _this = this;
+
+            Nova.request().get("/nova-vendor/nova-stripe/stripe/customers", { params: params }).then(function (response) {
+                console.log(response);
+                _this.customers = response.data.customers.data;
+                _this.hasMore = response.data.customers.has_more;
+                _this.initialLoading = false;
+                _this.loading = false;
+            });
+        },
+        nextPage: function nextPage() {
+            this.loading = true;
+
+            this.listCustomers({
+                starting_after: this.customers[this.customers.length - 1].id
+            });
+
+            this.page++;
+        },
+        previousPage: function previousPage() {
+            this.loading = true;
+
+            this.listCustomers({ ending_before: this.customers[0].id });
+
+            if (this.hasPrevious) {
+                this.page--;
+            }
+        }
+    },
+
+    computed: {
+        hasPrevious: function hasPrevious() {
+            return this.page > 1;
+        }
+    },
+
+    filters: {
+        date: function date(_date) {
+            return moment.unix(_date).format("YYYY/MM/DD h:mm:ss a");
+        },
+
+
+        money: __WEBPACK_IMPORTED_MODULE_1__utils_moneyFormat__["a" /* default */]
+    },
+
+    created: function created() {
+        this.listCustomers();
+    }
+});
+
+/***/ }),
+/* 46 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var render = function() {
+  var _vm = this
+  var _h = _vm.$createElement
+  var _c = _vm._self._c || _h
+  return _c(
+    "loading-view",
+    { attrs: { loading: _vm.initialLoading } },
+    [
+      _c(
+        "loading-card",
+        { staticClass: "card relative", attrs: { loading: _vm.loading } },
+        [
+          _vm.customers.length > 0
+            ? _c(
+                "table",
+                {
+                  staticClass: "table w-full",
+                  attrs: {
+                    cellpadding: "0",
+                    cellspacing: "0",
+                    "data-testid": "resource-table"
+                  }
+                },
+                [
+                  _c("thead", [
+                    _c("tr", [
+                      _c("th", { staticClass: "text-left" }, [
+                        _c(
+                          "span",
+                          { staticClass: "inline-flex items-center" },
+                          [
+                            _vm._v(
+                              "\n                            Customer ID\n                        "
+                            )
+                          ]
+                        )
+                      ]),
+                      _vm._v(" "),
+                      _c("th", { staticClass: "text-left" }, [
+                        _c(
+                          "span",
+                          { staticClass: "inline-flex items-center" },
+                          [_vm._v(" Name ")]
+                        )
+                      ]),
+                      _vm._v(" "),
+                      _c("th", { staticClass: "text-left" }, [
+                        _c(
+                          "span",
+                          { staticClass: "inline-flex items-center" },
+                          [
+                            _vm._v(
+                              "\n                            Email\n                        "
+                            )
+                          ]
+                        )
+                      ]),
+                      _vm._v(" "),
+                      _c("th", { staticClass: "text-left" }, [
+                        _c(
+                          "span",
+                          { staticClass: "inline-flex items-center" },
+                          [
+                            _vm._v(
+                              "\n                            Balance\n                        "
+                            )
+                          ]
+                        )
+                      ])
+                    ])
+                  ]),
+                  _vm._v(" "),
+                  _vm._l(_vm.customers, function(customer) {
+                    return _c("tbody", [
+                      _c("tr", [
+                        _c("td", [_vm._v(_vm._s(customer.id))]),
+                        _vm._v(" "),
+                        _c("td", [_vm._v(_vm._s(customer.name))]),
+                        _vm._v(" "),
+                        _c("td", [_vm._v(_vm._s(customer.email))]),
+                        _vm._v(" "),
+                        _c("td", [
+                          customer.currency
+                            ? _c("span", [
+                                _vm._v(
+                                  "\n                            " +
+                                    _vm._s(
+                                      _vm._f("money")(
+                                        customer.currency,
+                                        customer.balance
+                                      )
+                                    ) +
+                                    "\n                        "
+                                )
+                              ])
+                            : _c("span", [_vm._v("-")])
+                        ])
+                      ])
+                    ])
+                  })
+                ],
+                2
+              )
+            : _vm._e(),
+          _vm._v(" "),
+          _c("customers-pagination-links", {
+            attrs: {
+              resource: _vm.customers,
+              hasMore: _vm.hasMore,
+              hasPrevious: _vm.hasPrevious
+            },
+            on: { previous: _vm.previousPage, next: _vm.nextPage }
+          })
+        ],
+        1
+      )
+    ],
+    1
+  )
+}
+var staticRenderFns = []
+render._withStripped = true
+module.exports = { render: render, staticRenderFns: staticRenderFns }
+if (false) {
+  module.hot.accept()
+  if (module.hot.data) {
+    require("vue-hot-reload-api")      .rerender("data-v-b32879b8", module.exports)
+  }
+}
+
+/***/ }),
+/* 47 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var disposed = false
+var normalizeComponent = __webpack_require__(0)
+/* script */
+var __vue_script__ = __webpack_require__(48)
+/* template */
+var __vue_template__ = __webpack_require__(49)
+/* template functional */
+var __vue_template_functional__ = false
+/* styles */
+var __vue_styles__ = null
+/* scopeId */
+var __vue_scopeId__ = null
+/* moduleIdentifier (server only) */
+var __vue_module_identifier__ = null
+var Component = normalizeComponent(
+  __vue_script__,
+  __vue_template__,
+  __vue_template_functional__,
+  __vue_styles__,
+  __vue_scopeId__,
+  __vue_module_identifier__
+)
+Component.options.__file = "resources/js/components/PaginationLinks.vue"
+
+/* hot reload */
+if (false) {(function () {
+  var hotAPI = require("vue-hot-reload-api")
+  hotAPI.install(require("vue"), false)
+  if (!hotAPI.compatible) return
+  module.hot.accept()
+  if (!module.hot.data) {
+    hotAPI.createRecord("data-v-2963ad24", Component.options)
+  } else {
+    hotAPI.reload("data-v-2963ad24", Component.options)
+  }
+  module.hot.dispose(function (data) {
+    disposed = true
+  })
+})()}
+
+module.exports = Component.exports
+
+
+/***/ }),
+/* 48 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+/* harmony default export */ __webpack_exports__["default"] = ({
+    props: ['resource', 'hasMore', 'hasPrevious'],
+
+    methods: {
+        /**
+         * Select the previous page.
+         */
+        previousPage: function previousPage() {
+            this.$emit('previous');
+        },
+
+
+        /**
+         * Select the next page.
+         */
+        nextPage: function nextPage() {
+            this.$emit('next');
+        }
+    }
+});
+
+/***/ }),
+/* 49 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var render = function() {
+  var _vm = this
+  var _h = _vm.$createElement
+  var _c = _vm._self._c || _h
+  return _c("div", { staticClass: "bg-20 rounded-b" }, [
+    _vm.resource.length > 0
+      ? _c("nav", { staticClass: "flex" }, [
+          _c(
+            "button",
+            {
+              staticClass: "btn btn-link py-3 px-4",
+              class: {
+                "text-primary dim": _vm.hasPrevious,
+                "text-80 opacity-50 cursor-not-allowed": !_vm.hasPrevious
+              },
+              attrs: {
+                disabled: !_vm.hasPrevious,
+                rel: "prev",
+                dusk: "previous"
+              },
+              on: {
+                click: function($event) {
+                  $event.preventDefault()
+                  return _vm.previousPage()
+                }
+              }
+            },
+            [
+              _vm._v(
+                "\n            " + _vm._s(_vm.__("Previous")) + "\n        "
+              )
+            ]
+          ),
+          _vm._v(" "),
+          _c(
+            "button",
+            {
+              staticClass: "ml-auto btn btn-link py-3 px-4",
+              class: {
+                "text-primary dim": _vm.hasMore,
+                "text-80 opacity-50 cursor-not-allowed": !_vm.hasMore
+              },
+              attrs: { disabled: !_vm.hasMore, rel: "next", dusk: "next" },
+              on: {
+                click: function($event) {
+                  $event.preventDefault()
+                  return _vm.nextPage()
+                }
+              }
+            },
+            [_vm._v("\n            " + _vm._s(_vm.__("Next")) + "\n        ")]
+          )
+        ])
+      : _vm._e()
+  ])
+}
+var staticRenderFns = []
+render._withStripped = true
+module.exports = { render: render, staticRenderFns: staticRenderFns }
+if (false) {
+  module.hot.accept()
+  if (module.hot.data) {
+    require("vue-hot-reload-api")      .rerender("data-v-2963ad24", module.exports)
+  }
+}
+
 /***/ })
 /******/ ]);
\ No newline at end of file
diff --git a/resources/js/components/ChargesTable.vue b/resources/js/components/ChargesTable.vue
index ad24921..44338bd 100644
--- a/resources/js/components/ChargesTable.vue
+++ b/resources/js/components/ChargesTable.vue
@@ -2,79 +2,87 @@
     <loading-view :loading="initialLoading">
         <loading-card :loading="loading" class="card relative">
             <table
-                    v-if="charges.length > 0"
-                    class="table w-full"
-                    cellpadding="0"
-                    cellspacing="0"
-                    data-testid="resource-table"
+                v-if="charges.length > 0"
+                class="table w-full"
+                cellpadding="0"
+                cellspacing="0"
+                data-testid="resource-table"
             >
                 <thead>
-                <tr>
-                    <th class="text-left">
-                      <span class="inline-flex items-center">
-                         Charge ID
-                      </span>
-                    </th>
-                    <th class="text-left">
-                      <span class="inline-flex items-center">
-                         Amount
-                      </span>
-                    </th>
-                    <th class="text-left">
-                      <span class="inline-flex items-center">
-                         Created
-                      </span>
-                    </th>
-                    <th class="text-left">
-                      <span class="inline-flex items-center">
-                         Status
-                      </span>
-                    </th>
-                    <th>&nbsp;<!-- View --></th>
-                </tr>
+                    <tr>
+                        <th class="text-left">
+                            <span class="inline-flex items-center">
+                                Charge ID
+                            </span>
+                        </th>
+                        <th class="text-left">
+                            <span class="inline-flex items-center">
+                                Amount
+                            </span>
+                        </th>
+                        <th class="text-left">
+                            <span class="inline-flex items-center">
+                                Created
+                            </span>
+                        </th>
+                        <th class="text-left">
+                            <span class="inline-flex items-center">
+                                Status
+                            </span>
+                        </th>
+                        <th>&nbsp;<!-- View --></th>
+                    </tr>
                 </thead>
 
                 <tbody v-for="charge in charges">
-                <tr>
-                    <td>{{ charge.id }}</td>
-                    <td>{{ charge.currency | money(charge.amount) }}</td>
-                    <td>{{ charge.created | date }}</td>
-                    <td>{{ charge.status }}</td>
-                    <td>
-                        <span>
-                            <router-link
+                    <tr>
+                        <td>{{ charge.id }}</td>
+                        <td>{{ charge.currency | money(charge.amount) }}</td>
+                        <td>{{ charge.created | date }}</td>
+                        <td>{{ charge.status }}</td>
+                        <td>
+                            <span>
+                                <router-link
                                     class="cursor-pointer text-70 hover:text-primary mr-3"
-                                    :to="{ name: 'charge-detail', params: {
-                                        chargeId: charge.id
-                                    }}"
+                                    :to="{
+                                        name: 'charge-detail',
+                                        params: {
+                                            chargeId: charge.id,
+                                        },
+                                    }"
                                     :title="__('View')"
-                            >
-                                <icon type="view" width="22" height="18" view-box="0 0 22 16" />
-                            </router-link>
-                        </span>
-                    </td>
-                </tr>
+                                >
+                                    <icon
+                                        type="view"
+                                        width="22"
+                                        height="18"
+                                        view-box="0 0 22 16"
+                                    />
+                                </router-link>
+                            </span>
+                        </td>
+                    </tr>
                 </tbody>
             </table>
 
             <charges-pagination-links
-                    :charges="charges"
-                    :hasMore="hasMore"
-                    :hasPrevious="hasPrevious"
-                    @previous="previousPage"
-                    @next="nextPage"
+                :resource="charges"
+                :hasMore="hasMore"
+                :hasPrevious="hasPrevious"
+                @previous="previousPage"
+                @next="nextPage"
             ></charges-pagination-links>
         </loading-card>
     </loading-view>
 </template>
 
 <script>
-import ChargesPaginationLinks from './ChargesPaginationLinks.vue';
-import money from '../utils/moneyFormat';
+import ChargesPaginationLinks from "./PaginationLinks.vue";
+import money from "../utils/moneyFormat";
 
 export default {
     components: {
-        'charges-pagination-links': ChargesPaginationLinks
+        "charges-pagination-links": ChargesPaginationLinks,
     },
 
     data() {
@@ -84,61 +92,64 @@ export default {
             loading: false,
             hasMore: false,
             page: 1,
-        }
+        };
     },
 
     methods: {
         moment: moment,
 
         listCharges(params) {
-            Nova.request().get('/nova-vendor/nova-stripe/stripe/charges', { params })
+            Nova.request()
+                .get("/nova-vendor/nova-stripe/stripe/charges", { params })
                 .then((response) => {
-                    this.charges = response.data.charges.data
-                    this.hasMore = response.data.charges.has_more
-                    this.initialLoading = false
-                    this.loading = false
-                })
+                    this.charges = response.data.charges.data;
+                    this.hasMore = response.data.charges.has_more;
+                    this.initialLoading = false;
+                    this.loading = false;
+                });
         },
 
         nextPage() {
-            this.loading = true
+            this.loading = true;
 
-            this.listCharges({ 'starting_after': this.charges[this.charges.length - 1].id })
+            this.listCharges({
+                starting_after: this.charges[this.charges.length - 1].id,
+            });
 
-            this.page++
+            this.page++;
         },
 
         previousPage() {
-            this.loading = true
+            this.loading = true;
 
-            this.listCharges({ 'ending_before': this.charges[0].id })
+            this.listCharges({ ending_before: this.charges[0].id });
 
             if (this.hasPrevious) {
-                this.page--
+                this.page--;
             }
-        }
+        },
     },
 
     computed: {
         hasPrevious() {
-            return this.page > 1
-        }
+            return this.page > 1;
+        },
     },
 
     filters: {
         date(date) {
-            return moment.unix(date).format('YYYY/MM/DD h:mm:ss a')
+            return moment.unix(date).format("YYYY/MM/DD h:mm:ss a");
         },
 
-        money
+        money,
     },
 
     created() {
-        this.listCharges()
+        this.listCharges();
     },
-}
+};
 </script>
 
 <style>
-    /* Scoped Styles */
+/* Scoped Styles */
 </style>
diff --git a/resources/js/components/CustomersTable.vue b/resources/js/components/CustomersTable.vue
new file mode 100644
index 0000000..e25ab91
--- /dev/null
+++ b/resources/js/components/CustomersTable.vue
@@ -0,0 +1,137 @@
+<template>
+    <loading-view :loading="initialLoading">
+        <loading-card :loading="loading" class="card relative">
+            <table
+                v-if="customers.length > 0"
+                class="table w-full"
+                cellpadding="0"
+                cellspacing="0"
+                data-testid="resource-table"
+            >
+                <thead>
+                    <tr>
+                        <th class="text-left">
+                            <span class="inline-flex items-center">
+                                Customer ID
+                            </span>
+                        </th>
+                        <th class="text-left">
+                            <span class="inline-flex items-center"> Name </span>
+                        </th>
+                        <th class="text-left">
+                            <span class="inline-flex items-center">
+                                Email
+                            </span>
+                        </th>
+                        <th class="text-left">
+                            <span class="inline-flex items-center">
+                                Balance
+                            </span>
+                        </th>
+                    </tr>
+                </thead>
+
+                <tbody v-for="customer in customers">
+                    <tr>
+                        <td>{{ customer.id }}</td>
+                        <td>{{ customer.name }}</td>
+                        <td>{{ customer.email }}</td>
+                        <td>
+                            <span v-if="customer.currency">
+                                {{ customer.currency | money(customer.balance) }}
+                            </span>
+                            <span v-else>-</span>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+
+            <customers-pagination-links
+                :resource="customers"
+                :hasMore="hasMore"
+                :hasPrevious="hasPrevious"
+                @previous="previousPage"
+                @next="nextPage"
+            ></customers-pagination-links>
+        </loading-card>
+    </loading-view>
+</template>
+
+<script>
+import CustomersPaginationLinks from "./PaginationLinks.vue";
+import money from "../utils/moneyFormat";
+
+export default {
+    components: {
+        "customers-pagination-links": CustomersPaginationLinks,
+    },
+
+    data() {
+        return {
+            customers: {},
+            initialLoading: true,
+            loading: false,
+            hasMore: false,
+            page: 1,
+        };
+    },
+
+    methods: {
+        moment: moment,
+
+        listCustomers(params) {
+            Nova.request()
+                .get("/nova-vendor/nova-stripe/stripe/customers", { params })
+                .then((response) => {
+                    console.log(response);
+                    this.customers = response.data.customers.data;
+                    this.hasMore = response.data.customers.has_more;
+                    this.initialLoading = false;
+                    this.loading = false;
+                });
+        },
+
+        nextPage() {
+            this.loading = true;
+
+            this.listCustomers({
+                starting_after: this.customers[this.customers.length - 1].id,
+            });
+
+            this.page++;
+        },
+
+        previousPage() {
+            this.loading = true;
+
+            this.listCustomers({ ending_before: this.customers[0].id });
+
+            if (this.hasPrevious) {
+                this.page--;
+            }
+        },
+    },
+
+    computed: {
+        hasPrevious() {
+            return this.page > 1;
+        },
+    },
+
+    filters: {
+        date(date) {
+            return moment.unix(date).format("YYYY/MM/DD h:mm:ss a");
+        },
+
+        money,
+    },
+
+    created() {
+        this.listCustomers();
+    },
+};
+</script>
+
+<style>
+/* Scoped Styles */
+</style>
diff --git a/resources/js/components/ChargesPaginationLinks.vue b/resources/js/components/PaginationLinks.vue
similarity index 93%
rename from resources/js/components/ChargesPaginationLinks.vue
rename to resources/js/components/PaginationLinks.vue
index 13c1c74..cf72cd6 100644
--- a/resources/js/components/ChargesPaginationLinks.vue
+++ b/resources/js/components/PaginationLinks.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="bg-20 rounded-b">
-        <nav v-if="charges.length > 0" class="flex">
+        <nav v-if="resource.length > 0" class="flex">
             <!-- Previous Link -->
             <button
                     :disabled="!hasPrevious"
@@ -36,7 +36,7 @@
 
 <script>
     export default {
-        props: ['charges', 'hasMore', 'hasPrevious'],
+        props: ['resource', 'hasMore', 'hasPrevious'],
 
         methods: {
             /**
diff --git a/resources/js/tool.js b/resources/js/tool.js
index 45bf037..07b704c 100644
--- a/resources/js/tool.js
+++ b/resources/js/tool.js
@@ -1,17 +1,23 @@
 Nova.booting((Vue, router) => {
-    Vue.config.devtools = true
+    Vue.config.devtools = true;
 
     router.addRoutes([
         {
-            name: 'nova-stripe',
-            path: '/nova-stripe',
-            component: require('./views/Index'),
+            name: "nova-stripe",
+            path: "/nova-stripe",
+            component: require("./views/Index"),
         },
         {
-            name: 'charge-detail',
-            path: '/nova-stripe/charge/:chargeId',
-            component: require('./views/Detail'),
+            name: "charge-detail",
+            path: "/nova-stripe/charge/:chargeId",
+            component: require("./views/Detail"),
             props: true,
         },
-    ])
-})
+        {
+            name: "customer-list",
+            path: "/nova-stripe/customers",
+            component: require("./views/Customers"),
+            props: true,
+        },
+    ]);
+});
diff --git a/resources/js/views/Customers.vue b/resources/js/views/Customers.vue
new file mode 100644
index 0000000..bf2fb9b
--- /dev/null
+++ b/resources/js/views/Customers.vue
@@ -0,0 +1,15 @@
+<template>
+    <div>
+        <heading class="mb-6">Customers</heading>
+
+        <customers-table />
+    </div>
+</template>
+
+<script>
+import CustomersTable from "../components/CustomersTable";
+
+export default {
+    components: { CustomersTable },
+};
+</script>
diff --git a/resources/views/navigation.blade.php b/resources/views/navigation.blade.php
index c1f7fc8..31665e8 100644
--- a/resources/views/navigation.blade.php
+++ b/resources/views/navigation.blade.php
@@ -14,3 +14,9 @@ class="cursor-pointer flex items-center font-normal dim text-white mb-6 text-bas
         Stripe
     </span>
 </router-link>
+
+<router-link tag="h4" :to="{name: 'customer-list'}" class="cursor-pointer flex items-center font-normal dim text-white text-sm no-underline leading-tight mb-4 ml-8 text-sm">
+    <span class="sidebar-label">
+        Customers
+    </span>
+</router-link>
diff --git a/routes/api.php b/routes/api.php
index 24befcf..3330b97 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -4,6 +4,7 @@
 use Illuminate\Support\Facades\Route;
 use Tighten\NovaStripe\Http\StripeBalanceController;
 use Tighten\NovaStripe\Http\StripeChargesController;
+use Tighten\NovaStripe\Http\StripeCustomersController;
 
 /*
 |--------------------------------------------------------------------------
@@ -19,3 +20,4 @@
 Route::get('/stripe/charges', StripeChargesController::class . '@index');
 Route::get('/stripe/charges/{id}', StripeChargesController::class . '@show');
 Route::get('/stripe/balance', StripeBalanceController::class . '@index');
+Route::get('/stripe/customers', StripeCustomersController::class . '@index');
diff --git a/src/Clients/StripeClient.php b/src/Clients/StripeClient.php
index be127d7..43bb3bb 100644
--- a/src/Clients/StripeClient.php
+++ b/src/Clients/StripeClient.php
@@ -5,6 +5,7 @@
 use Exception;
 use Stripe\Balance;
 use Stripe\Charge;
+use Stripe\Customer;
 
 class StripeClient
 {
@@ -52,4 +53,13 @@ public function getBalance()
 
         }
     }
+
+    public function listCustomers($options = [])
+    {
+        try {
+            return Customer::all($options, ['api_key' => $this->apiKey]);
+        } catch (Exception $e) {
+
+        }
+    }
 }
diff --git a/src/Http/StripeCustomersController.php b/src/Http/StripeCustomersController.php
new file mode 100644
index 0000000..10f0a88
--- /dev/null
+++ b/src/Http/StripeCustomersController.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace Tighten\NovaStripe\Http;
+
+use Illuminate\Routing\Controller;
+use Tighten\NovaStripe\Clients\StripeClient;
+
+class StripeCustomersController extends Controller
+{
+    public function index()
+    {
+        return response()->json(['customers' => (new StripeClient)->listCustomers()]);
+    }
+
+//    public function show($id)
+//    {
+//        return response()->json(['customer' => (new StripeClient)->getCustomer($id)]);
+//    }
+}

From f8c81968053bbf02f89e0f1ded532af440ffc15b Mon Sep 17 00:00:00 2001
From: faxblaster <alison.l.kirk@gmail.com>
Date: Wed, 21 Jul 2021 09:28:49 -0400
Subject: [PATCH 2/4] remove commented code

---
 src/Http/StripeCustomersController.php | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/Http/StripeCustomersController.php b/src/Http/StripeCustomersController.php
index 10f0a88..0bef655 100644
--- a/src/Http/StripeCustomersController.php
+++ b/src/Http/StripeCustomersController.php
@@ -11,9 +11,4 @@ public function index()
     {
         return response()->json(['customers' => (new StripeClient)->listCustomers()]);
     }
-
-//    public function show($id)
-//    {
-//        return response()->json(['customer' => (new StripeClient)->getCustomer($id)]);
-//    }
 }

From e6bcd4b222a711e4a28dff18195cfdbb1118e101 Mon Sep 17 00:00:00 2001
From: Alison Kirk <alison.l.kirk@gmail.com>
Date: Wed, 21 Jul 2021 10:45:11 -0400
Subject: [PATCH 3/4] Remove console.log()

---
 resources/js/components/CustomersTable.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/resources/js/components/CustomersTable.vue b/resources/js/components/CustomersTable.vue
index e25ab91..ebae527 100644
--- a/resources/js/components/CustomersTable.vue
+++ b/resources/js/components/CustomersTable.vue
@@ -83,7 +83,6 @@ export default {
             Nova.request()
                 .get("/nova-vendor/nova-stripe/stripe/customers", { params })
                 .then((response) => {
-                    console.log(response);
                     this.customers = response.data.customers.data;
                     this.hasMore = response.data.customers.has_more;
                     this.initialLoading = false;

From 8db0421fa5fae6dd0e8a6bae894d999c2ca1fd42 Mon Sep 17 00:00:00 2001
From: faxblaster <alison.l.kirk@gmail.com>
Date: Wed, 18 Aug 2021 18:01:44 -0400
Subject: [PATCH 4/4] add no customers state

---
 dist/js/tool.js                            | 433 ++++++++++++++++++---
 resources/js/components/CustomersTable.vue |   2 +
 2 files changed, 382 insertions(+), 53 deletions(-)

diff --git a/dist/js/tool.js b/dist/js/tool.js
index 8cff7bf..0e17e6d 100644
--- a/dist/js/tool.js
+++ b/dist/js/tool.js
@@ -1769,7 +1769,7 @@ var currencies = {
 /***/ (function(module, exports, __webpack_require__) {
 
 __webpack_require__(5);
-module.exports = __webpack_require__(35);
+module.exports = __webpack_require__(30);
 
 
 /***/ }),
@@ -1786,12 +1786,12 @@ Nova.booting(function (Vue, router) {
     }, {
         name: "charge-detail",
         path: "/nova-stripe/charge/:chargeId",
-        component: __webpack_require__(29),
+        component: __webpack_require__(24),
         props: true
     }, {
         name: "customer-list",
         path: "/nova-stripe/customers",
-        component: __webpack_require__(43),
+        component: __webpack_require__(37),
         props: true
     }]);
 });
@@ -1809,7 +1809,7 @@ var normalizeComponent = __webpack_require__(0)
 /* script */
 var __vue_script__ = __webpack_require__(10)
 /* template */
-var __vue_template__ = __webpack_require__(28)
+var __vue_template__ = __webpack_require__(23)
 /* template functional */
 var __vue_template_functional__ = false
 /* styles */
@@ -2241,16 +2241,174 @@ exports = module.exports = __webpack_require__(1)(false);
 
 
 // module
-exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/* Scoped Styles */\n", ""]);
+exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/* Scoped Styles */\n", ""]);
 
 // exports
 
 
 /***/ }),
 /* 18 */
-/***/ (function(module, exports) {
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__PaginationLinks_vue__ = __webpack_require__(34);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__PaginationLinks_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__PaginationLinks_vue__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__utils_moneyFormat__ = __webpack_require__(3);
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
-throw new Error("Module build failed: SyntaxError: Unexpected token (109:0)\n\n\u001b[0m \u001b[90m 107 | \u001b[39m            hasMore\u001b[33m:\u001b[39m \u001b[36mfalse\u001b[39m\u001b[33m,\u001b[39m\n \u001b[90m 108 | \u001b[39m            page\u001b[33m:\u001b[39m \u001b[35m1\u001b[39m\u001b[33m,\u001b[39m\n\u001b[31m\u001b[1m>\u001b[22m\u001b[39m\u001b[90m 109 | \u001b[39m\u001b[33m<<\u001b[39m\u001b[33m<<\u001b[39m\u001b[33m<<\u001b[39m\u001b[33m<\u001b[39m \u001b[33mHEAD\u001b[39m\n \u001b[90m     | \u001b[39m\u001b[31m\u001b[1m^\u001b[22m\u001b[39m\n \u001b[90m 110 | \u001b[39m        }\u001b[33m;\u001b[39m\n \u001b[90m 111 | \u001b[39m\u001b[33m===\u001b[39m\u001b[33m===\u001b[39m\u001b[33m=\u001b[39m\n \u001b[90m 112 | \u001b[39m            statusClassList\u001b[33m:\u001b[39m {\u001b[0m\n");
+
+
+
+/* harmony default export */ __webpack_exports__["default"] = ({
+    components: {
+        "charges-pagination-links": __WEBPACK_IMPORTED_MODULE_0__PaginationLinks_vue___default.a
+    },
+    data: function data() {
+        return {
+            charges: {},
+            initialLoading: true,
+            loading: false,
+            hasMore: false,
+            page: 1,
+            statusClassList: {
+                'succeeded': 'bg-success-light text-success-dark',
+                'pending': 'bg-warning-light text-warning-dark',
+                'failed': 'bg-danger-light text-danger-dark'
+            }
+        };
+    },
+
+    computed: {
+        hasPrevious: function hasPrevious() {
+            return this.page > 1;
+        },
+        statusClass: function statusClass(status) {
+            return this.statusClassList[status];
+        }
+    },
+    methods: {
+        moment: moment,
+        listCharges: function listCharges(params) {
+            var _this = this;
+
+            Nova.request().get("/nova-vendor/nova-stripe/stripe/charges", { params: params }).then(function (response) {
+                _this.charges = response.data.charges.data;
+                _this.hasMore = response.data.charges.has_more;
+                _this.initialLoading = false;
+                _this.loading = false;
+            });
+        },
+        nextPage: function nextPage() {
+            this.loading = true;
+
+            this.listCharges({
+                starting_after: this.charges[this.charges.length - 1].id
+            });
+
+            this.page++;
+        },
+        previousPage: function previousPage() {
+            this.loading = true;
+
+            this.listCharges({ ending_before: this.charges[0].id });
+
+            if (this.hasPrevious) {
+                this.page--;
+            }
+        }
+    },
+    filters: {
+        date: function date(_date) {
+            return moment.unix(_date).format("YYYY/MM/DD h:mm:ss a");
+        },
+
+
+        money: __WEBPACK_IMPORTED_MODULE_1__utils_moneyFormat__["a" /* default */]
+    },
+    created: function created() {
+        this.listCharges();
+    }
+});
 
 /***/ }),
 /* 19 */,
@@ -2259,7 +2417,180 @@ throw new Error("Module build failed: SyntaxError: Unexpected token (109:0)\n\n\
 /* 22 */
 /***/ (function(module, exports, __webpack_require__) {
 
-module.exports={render:function(){},staticRenderFns:[]}
+var render = function() {
+  var _vm = this
+  var _h = _vm.$createElement
+  var _c = _vm._self._c || _h
+  return _c(
+    "loading-view",
+    { attrs: { loading: _vm.initialLoading } },
+    [
+      _c(
+        "loading-card",
+        { staticClass: "card relative", attrs: { loading: _vm.loading } },
+        [
+          _vm.charges.length > 0
+            ? _c(
+                "table",
+                {
+                  staticClass: "table w-full",
+                  attrs: {
+                    cellpadding: "0",
+                    cellspacing: "0",
+                    "data-testid": "resource-table"
+                  }
+                },
+                [
+                  _c("thead", [
+                    _c("tr", [
+                      _c("th", { staticClass: "text-left" }, [
+                        _c(
+                          "span",
+                          { staticClass: "inline-flex items-center" },
+                          [
+                            _vm._v(
+                              "\n                            Charge ID\n                        "
+                            )
+                          ]
+                        )
+                      ]),
+                      _vm._v(" "),
+                      _c("th", { staticClass: "text-left" }, [
+                        _c(
+                          "span",
+                          { staticClass: "inline-flex items-center" },
+                          [
+                            _vm._v(
+                              "\n                            Amount\n                        "
+                            )
+                          ]
+                        )
+                      ]),
+                      _vm._v(" "),
+                      _c("th", { staticClass: "text-left" }, [
+                        _c(
+                          "span",
+                          { staticClass: "inline-flex items-center" },
+                          [
+                            _vm._v(
+                              "\n                            Created\n                        "
+                            )
+                          ]
+                        )
+                      ]),
+                      _vm._v(" "),
+                      _c("th", { staticClass: "text-left" }, [
+                        _c(
+                          "span",
+                          { staticClass: "inline-flex items-center" },
+                          [
+                            _vm._v(
+                              "\n                            Status\n                        "
+                            )
+                          ]
+                        )
+                      ]),
+                      _vm._v(" "),
+                      _c("th", [_vm._v(" ")])
+                    ])
+                  ]),
+                  _vm._v(" "),
+                  _vm._l(_vm.charges, function(charge) {
+                    return _c("tbody", [
+                      _c("tr", [
+                        _c("td", [_vm._v(_vm._s(charge.id))]),
+                        _vm._v(" "),
+                        _c("td", [
+                          _vm._v(
+                            _vm._s(
+                              _vm._f("money")(charge.currency, charge.amount)
+                            )
+                          )
+                        ]),
+                        _vm._v(" "),
+                        _c("td", [
+                          _vm._v(_vm._s(_vm._f("date")(charge.created)))
+                        ]),
+                        _vm._v(" "),
+                        _c("td", [
+                          _c(
+                            "span",
+                            {
+                              staticClass:
+                                "rounded-lg px-3 py-1 capitalize text-xs font-black",
+                              class: _vm.statusClass(charge.status)
+                            },
+                            [
+                              _vm._v(
+                                _vm._s(
+                                  charge.refunded ? "Refunded" : charge.status
+                                )
+                              )
+                            ]
+                          )
+                        ]),
+                        _vm._v(" "),
+                        _c("td", [
+                          _c(
+                            "span",
+                            [
+                              _c(
+                                "router-link",
+                                {
+                                  staticClass:
+                                    "cursor-pointer text-70 hover:text-primary mr-3",
+                                  attrs: {
+                                    to: {
+                                      name: "charge-detail",
+                                      params: {
+                                        chargeId: charge.id
+                                      }
+                                    },
+                                    title: _vm.__("View")
+                                  }
+                                },
+                                [
+                                  _c("icon", {
+                                    attrs: {
+                                      type: "view",
+                                      width: "22",
+                                      height: "18",
+                                      "view-box": "0 0 22 16"
+                                    }
+                                  })
+                                ],
+                                1
+                              )
+                            ],
+                            1
+                          )
+                        ])
+                      ])
+                    ])
+                  })
+                ],
+                2
+              )
+            : _vm._e(),
+          _vm._v(" "),
+          _c("charges-pagination-links", {
+            attrs: {
+              resource: _vm.charges,
+              hasMore: _vm.hasMore,
+              hasPrevious: _vm.hasPrevious
+            },
+            on: { previous: _vm.previousPage, next: _vm.nextPage }
+          })
+        ],
+        1
+      )
+    ],
+    1
+  )
+}
+var staticRenderFns = []
+render._withStripped = true
+module.exports = { render: render, staticRenderFns: staticRenderFns }
 if (false) {
   module.hot.accept()
   if (module.hot.data) {
@@ -2268,12 +2599,7 @@ if (false) {
 }
 
 /***/ }),
-/* 23 */,
-/* 24 */,
-/* 25 */,
-/* 26 */,
-/* 27 */,
-/* 28 */
+/* 23 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var render = function() {
@@ -2303,15 +2629,15 @@ if (false) {
 }
 
 /***/ }),
-/* 29 */
+/* 24 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var disposed = false
 var normalizeComponent = __webpack_require__(0)
 /* script */
-var __vue_script__ = __webpack_require__(30)
+var __vue_script__ = __webpack_require__(25)
 /* template */
-var __vue_template__ = __webpack_require__(34)
+var __vue_template__ = __webpack_require__(29)
 /* template functional */
 var __vue_template_functional__ = false
 /* styles */
@@ -2350,12 +2676,12 @@ module.exports = Component.exports
 
 
 /***/ }),
-/* 30 */
+/* 25 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__components_ChargeDetailCard_vue__ = __webpack_require__(31);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__components_ChargeDetailCard_vue__ = __webpack_require__(26);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__components_ChargeDetailCard_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__components_ChargeDetailCard_vue__);
 //
 //
@@ -2412,15 +2738,15 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 });
 
 /***/ }),
-/* 31 */
+/* 26 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var disposed = false
 var normalizeComponent = __webpack_require__(0)
 /* script */
-var __vue_script__ = __webpack_require__(32)
+var __vue_script__ = __webpack_require__(27)
 /* template */
-var __vue_template__ = __webpack_require__(33)
+var __vue_template__ = __webpack_require__(28)
 /* template functional */
 var __vue_template_functional__ = false
 /* styles */
@@ -2459,7 +2785,7 @@ module.exports = Component.exports
 
 
 /***/ }),
-/* 32 */
+/* 27 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -2544,7 +2870,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 });
 
 /***/ }),
-/* 33 */
+/* 28 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var render = function() {
@@ -2629,7 +2955,7 @@ if (false) {
 }
 
 /***/ }),
-/* 34 */
+/* 29 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var render = function() {
@@ -2683,25 +3009,24 @@ if (false) {
 }
 
 /***/ }),
-/* 35 */
+/* 30 */
 /***/ (function(module, exports) {
 
 // removed by extract-text-webpack-plugin
 
 /***/ }),
-/* 36 */,
-/* 37 */,
-/* 38 */,
-/* 39 */,
-/* 40 */
+/* 31 */,
+/* 32 */,
+/* 33 */,
+/* 34 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var disposed = false
 var normalizeComponent = __webpack_require__(0)
 /* script */
-var __vue_script__ = __webpack_require__(41)
+var __vue_script__ = __webpack_require__(35)
 /* template */
-var __vue_template__ = __webpack_require__(42)
+var __vue_template__ = __webpack_require__(36)
 /* template functional */
 var __vue_template_functional__ = false
 /* styles */
@@ -2740,7 +3065,7 @@ module.exports = Component.exports
 
 
 /***/ }),
-/* 41 */
+/* 35 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -2804,7 +3129,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 });
 
 /***/ }),
-/* 42 */
+/* 36 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var render = function() {
@@ -2874,15 +3199,15 @@ if (false) {
 }
 
 /***/ }),
-/* 43 */
+/* 37 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var disposed = false
 var normalizeComponent = __webpack_require__(0)
 /* script */
-var __vue_script__ = __webpack_require__(44)
+var __vue_script__ = __webpack_require__(38)
 /* template */
-var __vue_template__ = __webpack_require__(50)
+var __vue_template__ = __webpack_require__(44)
 /* template functional */
 var __vue_template_functional__ = false
 /* styles */
@@ -2921,12 +3246,12 @@ module.exports = Component.exports
 
 
 /***/ }),
-/* 44 */
+/* 38 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__components_CustomersTable__ = __webpack_require__(45);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__components_CustomersTable__ = __webpack_require__(39);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__components_CustomersTable___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__components_CustomersTable__);
 //
 //
@@ -2944,19 +3269,19 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 });
 
 /***/ }),
-/* 45 */
+/* 39 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var disposed = false
 function injectStyle (ssrContext) {
   if (disposed) return
-  __webpack_require__(46)
+  __webpack_require__(40)
 }
 var normalizeComponent = __webpack_require__(0)
 /* script */
-var __vue_script__ = __webpack_require__(48)
+var __vue_script__ = __webpack_require__(42)
 /* template */
-var __vue_template__ = __webpack_require__(49)
+var __vue_template__ = __webpack_require__(43)
 /* template functional */
 var __vue_template_functional__ = false
 /* styles */
@@ -2995,13 +3320,13 @@ module.exports = Component.exports
 
 
 /***/ }),
-/* 46 */
+/* 40 */
 /***/ (function(module, exports, __webpack_require__) {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(47);
+var content = __webpack_require__(41);
 if(typeof content === 'string') content = [[module.i, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
@@ -3021,7 +3346,7 @@ if(false) {
 }
 
 /***/ }),
-/* 47 */
+/* 41 */
 /***/ (function(module, exports, __webpack_require__) {
 
 exports = module.exports = __webpack_require__(1)(false);
@@ -3029,18 +3354,18 @@ exports = module.exports = __webpack_require__(1)(false);
 
 
 // module
-exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/* Scoped Styles */\n", ""]);
+exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/* Scoped Styles */\n", ""]);
 
 // exports
 
 
 /***/ }),
-/* 48 */
+/* 42 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__PaginationLinks_vue__ = __webpack_require__(40);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__PaginationLinks_vue__ = __webpack_require__(34);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__PaginationLinks_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__PaginationLinks_vue__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__utils_moneyFormat__ = __webpack_require__(3);
 //
@@ -3102,6 +3427,8 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 //
 //
 //
+//
+//
 
 
 
@@ -3176,7 +3503,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 });
 
 /***/ }),
-/* 49 */
+/* 43 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var render = function() {
@@ -3282,7 +3609,7 @@ var render = function() {
                 ],
                 2
               )
-            : _vm._e(),
+            : _c("div", { staticClass: "text-90" }, [_vm._v("No customers")]),
           _vm._v(" "),
           _c("customers-pagination-links", {
             attrs: {
@@ -3310,7 +3637,7 @@ if (false) {
 }
 
 /***/ }),
-/* 50 */
+/* 44 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var render = function() {
diff --git a/resources/js/components/CustomersTable.vue b/resources/js/components/CustomersTable.vue
index ebae527..5324bec 100644
--- a/resources/js/components/CustomersTable.vue
+++ b/resources/js/components/CustomersTable.vue
@@ -46,6 +46,8 @@
                 </tbody>
             </table>
 
+            <div v-else class="text-90">No customers</div>
+
             <customers-pagination-links
                 :resource="customers"
                 :hasMore="hasMore"