feat: master sales

app/Http/Controllers/SalesController.php

@@ -19,7 +19,24 @@ class SalesController extends Controller
      */
     public function index()
     {
-        return inertia('Sales/Index.vue');
+        return inertia('Sales/Index', [
+            'initialSearch' => request('search'),
+            'sales' => Sale::filter(request()->only('search'))
+                ->latest()
+                ->paginate(10)
+                ->withQueryString()
+                ->through(fn($sale) => [
+                    'id' => $sale->id,
+                    'updatedAt' => $sale->updated_at,
+                    'number' => $sale->number,
+                    'status' => $sale->status,
+                    'price' => $sale->saleDetails->price,
+                    'ppn' => $sale->saleDetails->ppn,
+                    'qty' => $sale->saleDetails->qty,
+                    'productName' => $sale->product->name,
+                    'productNumber' => $sale->product->number
+                ])
+        ]);
     }
 
     /**
@@ -29,7 +46,11 @@ class SalesController extends Controller
      */
     public function create()
     {
-        //
+        // return inertia('Sales/Create', [
+        //     'customers' => fn () => [
+        //             'name' =>
+        //     ]
+        // ]);
     }
 
     /**

app/Models/Sale.php

@@ -15,4 +15,14 @@ class Sale extends Model
         'customers_id',
         'user_id'
     ];
+
+    public function scopeFilter($query, array $filters)
+    {
+        $query->when($filters['search'] ?? null, function ($query, $search) {
+            $query->where(function ($query) use ($search) {
+                $query->where('number', 'like', '%' . $search . '%')
+                    ->orWhere('status', 'like', '%' . $search . '%');
+            });
+        });
+    }
 }

database/migrations/2022_06_16_091443_create_sales_table.php

@@ -17,7 +17,7 @@ return new class extends Migration
             $table->id();
             $table->string('number');
             $table->enum('status', ['pending', 'success']);
-            $table->foreignId('customers_id')->constrained();
+            $table->foreignId('customer_id')->constrained();
             $table->foreignId('user_id')->constrained();
             $table->timestamps();
         });

public/js/resources_js_pages_Sales_tableHeader_js.js

@@ -0,0 +1,39 @@
+"use strict";
+(self["webpackChunk"] = self["webpackChunk"] || []).push([["resources_js_pages_Sales_tableHeader_js"],{
+
+/***/ "./resources/js/pages/Sales/tableHeader.js":
+/*!*************************************************!*\
+  !*** ./resources/js/pages/Sales/tableHeader.js ***!
+  \*************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ([{
+  field: 'updatedAt',
+  header: 'Tanggal'
+}, {
+  field: 'number',
+  header: 'Nomor Penjualan'
+}, {
+  field: 'status',
+  header: 'Status'
+}, {
+  field: 'price',
+  header: 'Harga'
+}, {
+  field: 'qty',
+  header: 'Kuantitas'
+}, {
+  field: 'productName',
+  header: 'Nama Produk'
+}, {
+  field: 'productNumber',
+  header: 'Nomor Produk'
+}]);
+
+/***/ })
+
+}]);

public/js/vue.js

@@ -58364,6 +58364,14 @@ var map = {
 		"./resources/js/pages/Purchases/Index.vue",
 		"resources_js_pages_Purchases_Index_vue"
 	],
+	"./Sales/Create": [
+		"./resources/js/pages/Sales/Create.vue",
+		"resources_js_pages_Sales_Create_vue"
+	],
+	"./Sales/Create.vue": [
+		"./resources/js/pages/Sales/Create.vue",
+		"resources_js_pages_Sales_Create_vue"
+	],
 	"./Sales/Index": [
 		"./resources/js/pages/Sales/Index.vue",
 		"resources_js_pages_Sales_Index_vue"
@@ -58372,6 +58380,14 @@ var map = {
 		"./resources/js/pages/Sales/Index.vue",
 		"resources_js_pages_Sales_Index_vue"
 	],
+	"./Sales/tableHeader": [
+		"./resources/js/pages/Sales/tableHeader.js",
+		"resources_js_pages_Sales_tableHeader_js"
+	],
+	"./Sales/tableHeader.js": [
+		"./resources/js/pages/Sales/tableHeader.js",
+		"resources_js_pages_Sales_tableHeader_js"
+	],
 	"./StockProducts/Index": [
 		"./resources/js/pages/StockProducts/Index.vue",
 		"resources_js_pages_StockProducts_Index_vue"
@@ -58569,7 +58585,7 @@ module.exports = JSON.parse('{"name":"axios","version":"0.21.4","description":"P
 /******/ 		// This function allow to reference async chunks
 /******/ 		__webpack_require__.u = (chunkId) => {
 /******/ 			// return url for filenames based on template
-/******/ 			return "js/" + chunkId + ".js?id=" + {"node_modules_chart_js_auto_auto_esm_js":"9296b829a7757dee","resources_js_pages_Auth_Login_vue":"3660adc6dce187d8","resources_js_pages_Customers_Create_vue":"a28f01f843162dc3","resources_js_pages_Customers_Edit_vue":"888355cbc87c499f","resources_js_pages_Customers_Index_vue":"8b937b36c08abd77","resources_js_pages_Customers_tableHeader_js":"7a40a3d5ad60171c","resources_js_pages_Dashboards_Index_vue":"c5d472522e3c56ea","resources_js_pages_Error_Index_vue":"4119ff1c60260652","resources_js_pages_Purchases_Index_vue":"78384af131366665","resources_js_pages_Sales_Index_vue":"8437f395f6c9a021","resources_js_pages_StockProducts_Index_vue":"fddc59b8e7d0e040","resources_js_pages_Suppliers_Create_vue":"d2de74a83347ac1a","resources_js_pages_Suppliers_Edit_vue":"5d6c8bf19ca55905","resources_js_pages_Suppliers_Index_vue":"fe5c7495dc6faf71","resources_js_pages_Suppliers_tableHeader_js":"500bc29ff0dbddce","resources_js_pages_Users_Create_vue":"e7a11c529b06b795","resources_js_pages_Users_Edit_vue":"b79f9b44dc4c7ab3","resources_js_pages_Users_Index_vue":"b55debdc9cbaf227","resources_js_pages_Users_Show_vue":"9ee8ea844b0d1b72","resources_js_pages_Users_tableHeader_js":"48f19bd820caf015"}[chunkId] + "";
+/******/ 			return "js/" + chunkId + ".js?id=" + {"node_modules_chart_js_auto_auto_esm_js":"9296b829a7757dee","resources_js_pages_Auth_Login_vue":"3660adc6dce187d8","resources_js_pages_Customers_Create_vue":"a28f01f843162dc3","resources_js_pages_Customers_Edit_vue":"888355cbc87c499f","resources_js_pages_Customers_Index_vue":"8b937b36c08abd77","resources_js_pages_Customers_tableHeader_js":"7a40a3d5ad60171c","resources_js_pages_Dashboards_Index_vue":"c5d472522e3c56ea","resources_js_pages_Error_Index_vue":"4119ff1c60260652","resources_js_pages_Purchases_Index_vue":"78384af131366665","resources_js_pages_Sales_Create_vue":"0bac2c72f834d4f8","resources_js_pages_Sales_Index_vue":"47a48a9d387ea71b","resources_js_pages_Sales_tableHeader_js":"a7aefd03020f1bdf","resources_js_pages_StockProducts_Index_vue":"fddc59b8e7d0e040","resources_js_pages_Suppliers_Create_vue":"d2de74a83347ac1a","resources_js_pages_Suppliers_Edit_vue":"5d6c8bf19ca55905","resources_js_pages_Suppliers_Index_vue":"fe5c7495dc6faf71","resources_js_pages_Suppliers_tableHeader_js":"500bc29ff0dbddce","resources_js_pages_Users_Create_vue":"e7a11c529b06b795","resources_js_pages_Users_Edit_vue":"b79f9b44dc4c7ab3","resources_js_pages_Users_Index_vue":"b55debdc9cbaf227","resources_js_pages_Users_Show_vue":"9ee8ea844b0d1b72","resources_js_pages_Users_tableHeader_js":"48f19bd820caf015"}[chunkId] + "";
 /******/ 		};
 /******/ 	})();
 /******/ 	

resources/js/pages/Sales/Create.vue

@@ -0,0 +1,150 @@
+<script setup>
+import { useForm, Head } from '@inertiajs/inertia-vue3'
+import { useFormErrorReset } from '@/components/useFormErrorReset'
+import AppInputText from '@/components/AppInputText.vue'
+import AppInputNumber from '@/components/AppInputNumber.vue'
+import AppDropdown from '@/components/AppDropdown.vue'
+import AppAutocompleteBasic from '@/components/AppAutocompleteBasic.vue'
+import DashboardLayout from '@/layouts/DashboardLayout.vue'
+
+defineProps({
+  customers: Object,
+})
+
+const form = useForm({
+  number: null,
+  status: null,
+  price: null,
+  qty: null,
+  customer_id: null,
+})
+
+useFormErrorReset(form)
+
+const optionStatus = [
+  {
+    label: 'Pending',
+    value: 'pending',
+  },
+  {
+    label: 'Success',
+    value: 'success',
+  },
+]
+
+const customerOnComplete = (event) => {
+  Inertia.reload({
+    data: { search: event.query },
+    only: ['customers'],
+  })
+}
+
+const customerOnSelected = (event) => {
+  form.customer = event.value
+}
+
+const onSubmit = () => {
+  form.post(route('sales.store'), { onSuccess: () => form.reset() })
+}
+</script>
+
+<template>
+  <Head title="Tambah Penjualan" />
+
+  <DashboardLayout>
+    <div class="grid">
+      <div class="col-12 lg:col-8">
+        <Card>
+          <template #title> Tambah Penjualan </template>
+          <template #content>
+            <div class="grid">
+              <div class="col-12 md:col-6">
+                <AppInputText
+                  label="Nomor Penjualan"
+                  placeholder="nomor penjualan"
+                  type="number"
+                  :error="form.errors.number"
+                  v-model="form.number"
+                />
+              </div>
+
+              <div class="col-12 md:col-6">
+                <!-- <AppDropdown
+                  label="Status"
+                  placeholder="status"
+                  :option="optionStatus"
+                  :error="form.errors.status"
+                  v-model="form.status"
+                /> -->
+              </div>
+
+              <div class="col-12 md:col-6">
+                <AppInputNumber
+                  label="Harga"
+                  placeholder="harga"
+                  :error="form.errors.price"
+                  v-model="form.price"
+                />
+              </div>
+
+              <div class="col-12 md:col-6">
+                <AppInputText
+                  label="Kuantitas"
+                  placeholder="kuantitas"
+                  :error="form.errors.qty"
+                  v-model="form.qty"
+                />
+              </div>
+
+              <div class="col-12 md:col-6">
+                <AppAutocompleteBasic
+                  label="Pelanggan"
+                  placeholder="pelanggan"
+                  :error="form.errors.customer_id"
+                  v-model="form.customer_id"
+                  @suggestions="customers"
+                  @complete="customerOnComplete"
+                  @item-select="customerOnSelected"
+                >
+                  <template #item="slotProps">
+                    <template v-if="slotProps.item">
+                      <div class="flex flex-column">
+                        <span>{{ slotProps.item.name }}</span>
+                        <span>{{ slotProps.item.type }}</span>
+                        <span class="font-bold">{{
+                          slotProps.item.platNumber
+                        }}</span>
+                      </div>
+                    </template>
+                  </template>
+
+                  <template #empty>
+                    <span
+                      class="cursor-pointer"
+                      style="color: var(--primary-color)"
+                      @click="gotoMember"
+                    >
+                      Tambah Produk
+                    </span>
+                  </template>
+                </AppAutocompleteBasic>
+              </div>
+            </div>
+          </template>
+
+          <template #footer>
+            <div class="flex flex-column md:flex-row justify-content-end">
+              <Button
+                label="Simpan"
+                icon="pi pi-check"
+                class="p-button-outlined"
+                :disabled="form.processing"
+                @click="onSubmit"
+              />
+            </div>
+          </template>
+        </Card>
+      </div>
+    </div>
+  </DashboardLayout>
+</template>

resources/js/pages/Sales/Index.vue

@@ -1,10 +1,78 @@
 <script setup>
+import { watch } from 'vue'
+import { Inertia } from '@inertiajs/inertia'
 import { Head } from '@inertiajs/inertia-vue3'
+import { pickBy } from 'lodash'
+import tableHeader from './tableHeader'
+import { useSearchText } from '@/components/useSearchText'
 import DashboardLayout from '@/layouts/DashboardLayout.vue'
+import AppButtonLink from '@/components/AppButtonLink.vue'
+import AppPagination from '@/components/AppPagination.vue'
+
+const props = defineProps({
+  sales: Object,
+  initialSearch: String,
+})
+
+const { search } = useSearchText(props)
+
+watch(search, () => {
+  Inertia.get('/sales', pickBy({ search: search.value }), {
+    preserveState: true,
+  })
+})
 </script>
 
 <template>
-  <Head title="Halaman Penjualan" />
+  <Head title="Daftar Penjualan" />
+
+  <DashboardLayout>
+    <DataTable
+      responsiveLayout="scroll"
+      columnResizeMode="expand"
+      :value="sales.data"
+      :rowHover="true"
+      :stripedRows="true"
+    >
+      <template #header>
+        <h1>Penjualan</h1>
+
+        <div class="grid">
+          <div class="col-12 md:col-8">
+            <div class="flex align-items-center">
+              <InputText
+                class="w-full md:w-27rem"
+                placeholder="cari, contoh: P0xx, Pending, Success"
+                v-model="search"
+              />
+            </div>
+          </div>
+
+          <div
+            class="col-12 md:col-4 flex flex-column md:flex-row justify-content-end"
+          >
+            <AppButtonLink
+              label="Tambah Penjualan"
+              icon="pi pi-pencil"
+              class="p-button-outlined"
+              :href="route('sales.create')"
+            />
+          </div>
+        </div>
+      </template>
+
+      <Column
+        v-for="value in tableHeader"
+        :field="value.field"
+        :header="value.header"
+        :key="value.field"
+      />
+
+      <Column>
+        <template #body="{ data }"> </template>
+      </Column>
+    </DataTable>
 
-  <DashboardLayout> Halaman Penjualan </DashboardLayout>
+    <AppPagination :links="sales.links" />
+  </DashboardLayout>
 </template>

resources/js/pages/Sales/tableHeader.js

@@ -0,0 +1,9 @@
+export default [
+  { field: 'updatedAt', header: 'Tanggal' },
+  { field: 'number', header: 'Nomor Penjualan' },
+  { field: 'status', header: 'Status' },
+  { field: 'price', header: 'Harga' },
+  { field: 'qty', header: 'Kuantitas' },
+  { field: 'productName', header: 'Nama Produk' },
+  { field: 'productNumber', header: 'Nomor Produk' },
+]