@feedmepos/mf-order-setting 0.0.2 → 0.0.6

package/src/api/restaurant-setting/index.ts

@@ -0,0 +1,55 @@
+import { baseClientInstance, getData, restaurantClientInstance } from '@/api'
+import type { ExtendedRestaurant } from '@/stores/restaurant'
+import type { OrderSettingsDto } from '@entity'
+import {
+  FdoRestaurant,
+  FdoRestaurantDineIn,
+  FdoRestaurantPickup,
+  FdoRestaurantSetting,
+  FdoServiceChargeSetting
+} from '@feedmepos/core/entity'
+
+
+interface EntityDocument {
+  _rev: string
+  _id: string
+  _deleted?: boolean
+}
+export type RestaurantSettingDoc = EntityDocument & FdoRestaurantSetting
+
+export const restaurantApi = {
+  async readRestaurantSetting(restaurantId: string): Promise<RestaurantSettingDoc> {
+    const result = await restaurantClientInstance().get('/restaurant-setting')
+    return getData<RestaurantSettingDoc>(result)
+  },
+
+  async readRestaurant(restaurantId: string): Promise<ExtendedRestaurant> {
+    const result = await restaurantClientInstance().get('/restaurant-setting')
+    return getData(result)
+  },
+
+  async updateDineInSetting(restaurantId: string, setting: FdoRestaurantDineIn) {
+    const result = await restaurantClientInstance().put('/dine-in', setting)
+    return getData(result)
+  },
+
+  async updatePickupSetting(restaurantId: string, setting: FdoRestaurantPickup) {
+    const result = await restaurantClientInstance().put('/pickup', setting)
+    return getData(result)
+  },
+
+  async updateServiceCharge(setting: FdoServiceChargeSetting) {
+    const result = await restaurantClientInstance().put('/service-charge-setting', setting)
+    return getData(result)
+  },
+
+  async getMobileOrderSetting(): Promise<OrderSettingsDto> {
+    return await getData(await restaurantClientInstance().get('/order-settings'))
+  },
+
+  admin: {
+    async readAllManagable(): Promise<ExtendedRestaurant[]> {
+      return getData(await baseClientInstance().get('/my/restaurants'));
+    },
+  }
+}

package/src/api/table-setting/index.ts

@@ -0,0 +1,30 @@
+import type { FdoLayout, FdoLayoutSetting, FdoTable } from '@feedmepos/core/entity';
+import { getData, restaurantClientInstance } from '..';
+
+const tableClientInstance = () => restaurantClientInstance('/table');
+export const tableSettingApi = {
+  async readTables(): Promise<FdoTable[]> {
+    return getData(await tableClientInstance().get('/slots'));
+  },
+  async createTables(tables: { name: string }[]): Promise<FdoTable[]> {
+    return getData(await tableClientInstance().post('/slots', tables));
+  },
+  async updateTable(table: FdoTable): Promise<FdoTable> {
+    return getData(await tableClientInstance().put(`/slots/${table._id}`, table));
+  },
+  async deleteTables(tableIds: string[]): Promise<FdoTable[]> {
+    return getData(await tableClientInstance().post('/slots/delete', tableIds));
+  },
+  async readLayouts(): Promise<FdoLayoutSetting> {
+    return getData(await tableClientInstance().get('/layouts'));
+  },
+  async createLayout(dto: { payload: FdoLayout; layoutSetting: FdoLayoutSetting; }): Promise<FdoLayoutSetting> {
+    return getData(await tableClientInstance().post('/layouts', dto));
+  },
+  async updateLayout(layout: FdoLayoutSetting): Promise<FdoLayoutSetting> {
+    return getData(await tableClientInstance().put('/layouts', layout));
+  },
+  async updateSetting(is: boolean) {
+    return getData(await tableClientInstance().put('/layouts/setting', { is }));
+  },
+};

package/src/app.ts

@@ -0,0 +1,7 @@
+import type { App } from 'vue'
+export { default as FmApp } from './App.vue'
+export { routes as routers } from '../src/router/routes'
+
+export function initOrderSettingApp(app: App) {
+  
+}

package/src/assets/base.css

@@ -0,0 +1,6 @@
+@import '@feedmepos/ui-library/styles.css';
+@import '@feedmepos/mf-common/style.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/assets/images/no-data.svg

@@ -0,0 +1,35 @@
+<svg width="858" height="376" viewBox="0 0 858 376" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1132_89720)">
+<path d="M440 505.86C651.525 505.86 823 437.839 823 353.93C823 270.021 651.525 202 440 202C228.475 202 57 270.021 57 353.93C57 437.839 228.475 505.86 440 505.86Z" fill="url(#paint0_linear_1132_89720)" fill-opacity="0.5"/>
+<g clip-path="url(#clip1_1132_89720)">
+<path d="M331.443 106.351C343.852 58.097 379.776 37.6206 397.221 30.2477C402.417 28.0519 407.88 26.5702 413.469 25.749L424.914 24.0709C430.503 23.2497 436.163 23.1069 441.769 23.7138C460.588 25.749 500.887 35.0321 526.652 77.6808C561.416 135.2 586.627 250.954 457.589 272.322V272.376C456.91 272.483 456.25 272.555 455.589 272.644C454.928 272.751 454.268 272.858 453.589 272.965V272.912C323.854 289.55 314.695 171.458 331.443 106.351Z" fill="#D6D6D6"/>
+<path d="M429.807 275.839C396.221 275.839 370.046 265.414 351.762 244.705C319.016 207.644 319.641 146.84 330.14 106.03C342.406 58.3112 377.099 37.2993 396.686 29.0337C401.899 26.8379 407.47 25.2848 413.273 24.4457L424.718 22.7676C430.521 21.9107 436.306 21.7858 441.912 22.3928C463.053 24.6778 502.316 34.8178 527.795 76.9845C549.596 113.046 567.701 171.119 547.007 216.035C532.973 246.508 503.387 265.824 459.089 273.429V273.465L457.786 273.715C457.375 273.768 456.982 273.822 456.589 273.876L454.982 274.108C454.59 274.179 454.197 274.233 453.786 274.304L452.447 274.5L452.429 274.411C444.573 275.357 437.02 275.839 429.807 275.839ZM332.747 106.69C322.408 146.876 321.712 206.662 353.762 242.956C375.563 267.645 409.095 277.285 453.429 271.591L454.75 271.43V271.448L456.268 271.233C456.375 271.216 456.5 271.198 456.607 271.198L457.375 271.037C501.477 263.736 530.813 244.866 544.597 214.946C564.845 170.976 546.972 113.921 525.528 78.3949C500.638 37.1743 462.285 27.2842 441.645 25.0349C436.252 24.4457 430.699 24.5707 425.129 25.3919L413.684 27.07C408.113 27.8912 402.756 29.3729 397.757 31.4795C378.598 39.5665 344.727 60.0964 332.747 106.69Z" fill="#D6D6D6"/>
+<path d="M360.457 129.166L360.493 111.814C362.475 83.3041 397.685 72.0216 409.041 68.3083C417.504 65.5413 428.467 63.6489 432.359 63.042V63.0241C432.359 63.0241 432.609 62.9884 433.074 62.917C433.538 62.8456 433.788 62.8099 433.788 62.8099V62.8277C437.68 62.31 448.732 60.9533 457.642 61.1675C469.569 61.471 506.547 62.1315 516.653 88.874L521.67 105.476C527.045 124.114 518.974 141.324 501.566 143.876L390.757 160.175C373.348 162.728 360.671 148.571 360.457 129.166Z" fill="white"/>
+<path d="M490.656 119.473C482.675 120.651 473.997 114.76 473.158 106.458C472.319 98.1393 477.622 90.213 486.175 88.9633C494.156 87.7851 502.833 93.6763 503.673 101.978C504.512 110.297 499.209 118.223 490.656 119.473Z" fill="#A7A9AC"/>
+<path d="M488.585 120.972C484.836 120.972 481.068 119.651 477.944 117.223C474.426 114.474 472.248 110.707 471.837 106.601C470.891 97.2824 477.105 88.9455 485.996 87.6423C490.442 86.9818 495.156 88.285 498.923 91.2306C502.441 93.9798 504.619 97.7466 505.03 101.853C505.976 111.171 499.763 119.508 490.871 120.812C490.103 120.919 489.335 120.972 488.585 120.972ZM488.21 90.1594C487.586 90.1594 486.978 90.1952 486.371 90.2844C478.908 91.3734 473.694 98.425 474.498 106.316C474.837 109.69 476.64 112.796 479.586 115.099C482.729 117.545 486.8 118.687 490.478 118.152C497.941 117.063 503.155 110.011 502.352 102.12C502.012 98.7463 500.209 95.6222 497.263 93.3371C494.62 91.2841 491.353 90.1594 488.21 90.1594Z" fill="#A7A9AC"/>
+<path d="M411.309 131.13C403.327 132.308 394.65 126.417 393.811 118.116C392.971 109.797 398.274 101.87 406.827 100.621C414.808 99.4426 423.486 105.334 424.325 113.635C425.182 121.954 419.861 129.88 411.309 131.13Z" fill="#A7A9AC"/>
+<path d="M409.238 132.63C405.488 132.63 401.721 131.309 398.596 128.881C395.079 126.131 392.9 122.365 392.49 118.259C391.543 108.94 397.757 100.603 406.649 99.2997C411.095 98.6392 415.808 99.9603 419.576 102.888C423.093 105.637 425.272 109.404 425.682 113.51C426.629 122.829 420.415 131.166 411.523 132.469C410.755 132.576 409.988 132.63 409.238 132.63ZM408.863 101.817C408.238 101.817 407.631 101.853 407.024 101.942C399.56 103.031 394.347 110.082 395.15 117.973C395.489 121.347 397.293 124.453 400.239 126.756C403.381 129.202 407.452 130.345 411.13 129.809C418.594 128.72 423.807 121.668 423.004 113.778C422.665 110.404 420.861 107.28 417.915 104.995C415.291 102.942 412.005 101.817 408.863 101.817Z" fill="#A7A9AC"/>
+<path d="M567.791 147.286C576.968 161.747 586.699 171.994 597.698 165.031C608.679 158.069 610.161 140.699 600.983 126.239C591.806 111.778 575.468 105.709 564.47 112.671C553.471 119.633 558.613 132.826 567.791 147.286Z" fill="#D6D6D6"/>
+<path d="M317.962 176.582C318.141 176.546 318.319 176.546 318.498 176.51C318.569 177.242 318.623 177.992 318.712 178.724C320.962 200.039 326.747 219.07 335.674 234.905C334.121 236.101 332.193 236.975 329.836 237.44C317.069 239.921 304.053 228.317 300.786 211.518C297.518 194.719 305.178 179.081 317.962 176.582Z" fill="#D6D6D6"/>
+<path d="M547.167 216.088C549.917 210.143 552.006 203.734 553.506 196.969C550.417 185.579 546.542 174.671 541.686 165.852C539.775 162.371 535.883 160.479 531.955 161.032L526.045 161.871C519.849 162.746 516.153 169.226 518.546 175.028C520.01 178.599 521.224 180.241 522.17 183.454C523.831 189.096 520.081 194.88 514.243 195.665L413.415 209.179C408.059 209.893 403.095 206.073 402.559 200.682C402.059 195.737 401.309 192.88 400.595 188.953C399.685 183.883 394.917 180.455 389.829 181.187L375.116 183.276C369.902 184.008 366.242 188.828 366.974 194.041C368.849 207.751 371.241 234.101 366.188 256.952C366.117 257.255 366.099 257.559 366.063 257.862C382.865 269.93 404.184 276.018 429.824 276.018C437.002 276.018 444.501 275.536 452.339 274.59L452.357 274.679L453.857 274.465C454.268 274.411 454.66 274.34 455.071 274.268L456.678 274.036C457.071 273.983 457.464 273.929 457.856 273.875L459.32 273.608V273.572C503.565 265.913 533.133 246.58 547.167 216.088Z" fill="white"/>
+<path d="M476.069 249.668C484.727 249.668 491.746 242.651 491.746 233.994C491.746 225.337 484.727 218.32 476.069 218.32C467.411 218.32 460.393 225.337 460.393 233.994C460.393 242.651 467.411 249.668 476.069 249.668Z" fill="white"/>
+<path d="M484.854 240.617C485.032 242.135 485.318 244.562 485.55 246.473C489.978 243.116 492.478 237.511 491.603 231.62C490.443 223.836 483.765 218.248 476.141 218.213C476.158 218.552 476.176 218.855 476.176 218.909C476.212 219.712 476.248 220.498 476.266 221.301C476.337 223.497 477.176 224.657 479.23 225.461C479.783 225.675 480.337 225.961 480.836 226.3C482.604 227.496 483.425 229.263 483.729 231.298C483.997 233.083 484.175 234.887 484.39 236.69C484.568 238.011 484.693 239.314 484.854 240.617Z" fill="#A7A9AC"/>
+<path d="M460.499 236.261C461.356 242.045 465.266 246.615 470.355 248.597C470.319 248.365 470.302 248.204 470.284 248.186C470.07 246.812 469.855 245.437 469.623 244.063C469.016 240.331 468.373 236.6 467.802 232.851C467.481 230.816 468.07 229.031 469.552 227.567C470.105 227.014 470.694 226.496 471.248 225.925C472.194 224.961 472.48 223.854 472.105 222.497C471.623 220.569 471.784 221.212 471.623 220.569C471.551 220.284 471.355 219.569 471.212 218.962C464.017 221.301 459.356 228.549 460.499 236.261Z" fill="#A7A9AC"/>
+<path d="M480.925 235.797C480.89 235.511 480.818 235.208 480.729 234.922C480.515 234.19 479.783 233.762 479.051 233.94C478.336 234.101 477.872 234.797 477.979 235.547C478.604 239.725 479.372 244.919 480.015 249.168C480.979 248.918 481.907 248.579 482.782 248.169C482.229 244.473 481.443 239.225 480.925 235.797Z" fill="#A7A9AC"/>
+<path d="M472.855 234.976C471.98 235.261 471.623 235.833 471.766 236.779C472.266 240.224 473.069 245.598 473.641 249.472C474.587 249.615 475.569 249.686 476.551 249.65C476.373 248.258 476.087 246.258 475.944 245.259C475.498 242.152 475.033 239.046 474.569 235.958C474.444 235.226 473.587 234.744 472.855 234.976Z" fill="#A7A9AC"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_1132_89720" x1="440.003" y1="133.148" x2="440.003" y2="371.72" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A5A5A5"/>
+<stop offset="0.4764" stop-color="#E0E0E0"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_1132_89720">
+<rect width="858" height="376" fill="white"/>
+</clipPath>
+<clipPath id="clip1_1132_89720">
+<rect width="307" height="254" fill="white" transform="translate(300 22)"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

package/src/assets/main.css

@@ -0,0 +1 @@
+@import './base.css';

package/src/components/GoogleMap.vue

@@ -0,0 +1,216 @@
+<script setup lang="ts">
+import { ref, onMounted, watch, type PropType, toRaw, onUnmounted } from 'vue';
+import { coordinates, googleMap } from '@/helpers/map';
+import type { MarkerChangeEvent, PolygonChangeEvent, MapCoordinate, MapPolygon } from './type';
+
+interface PolygonEventHandler {
+  click: (ev: google.maps.PolyMouseEvent) => void;
+  contextmenu: (v: google.maps.PolyMouseEvent) => void;
+  dblclick: (v: google.maps.PolyMouseEvent) => void;
+  drag: (v: google.maps.MapMouseEvent) => void;
+  dragend: (v: google.maps.MapMouseEvent) => void;
+  dragstart: (v: google.maps.MapMouseEvent) => void;
+  mousedown: (v: google.maps.PolyMouseEvent) => void;
+  mousemove: (v: google.maps.PolyMouseEvent) => void;
+  mouseout: (v: google.maps.PolyMouseEvent) => void;
+  mouseover: (v: google.maps.PolyMouseEvent) => void;
+  mouseup: (v: google.maps.PolyMouseEvent) => void;
+}
+
+type Vertex = google.maps.MVCArray<google.maps.LatLng>;
+
+const props = defineProps({
+  markers: {
+    type: Array as PropType<MapCoordinate[]>,
+    default: () => [],
+  },
+  polygons: {
+    type: Array as PropType<MapPolygon[]>,
+    default: () => [],
+  },
+  zoom: {
+    type: Number,
+    default: 14,
+  },
+  editable: {
+    type: Boolean,
+    default: false,
+  },
+  center: {
+    type: Object as PropType<{
+      lat: number;
+      lng: number;
+    }>,
+    default: coordinates.jb,
+  },
+});
+
+const emits = defineEmits<{
+  (event: 'map-click', ev: MapCoordinate): void;
+  (event: 'marker-change', ev: MarkerChangeEvent): void;
+  (event: 'polygon-change', ev: PolygonChangeEvent): void;
+  (event: 'polygon-right-click', ev: number): void;
+}>();
+
+defineExpose({
+  setCenter: (coordinate: MapCoordinate) => {
+    map.value?.setCenter(coordinate);
+  },
+});
+
+const mapRef = ref<Element>();
+const map = ref<google.maps.Map | null>(null);
+const listeners: google.maps.MapsEventListener[] = [];
+
+function formatCoordinate(ev: google.maps.MapMouseEvent) {
+  return {
+    lat: ev.latLng.lat(),
+    lng: ev.latLng.lng(),
+  };
+}
+
+function addListenerToMap(instance: object, eventName: string, callback: (...args: any[]) => void) {
+  const listener = googleMap.maps.event.addListener(instance, eventName, callback);
+  listeners.push(listener);
+}
+
+const markers = ref<google.maps.Marker[]>([]);
+
+function addMarkerListener<N extends keyof google.maps.MarkerHandlerMap<google.maps.Marker>>(
+  marker: google.maps.Marker,
+  event: N,
+  callback: google.maps.MarkerHandlerMap<google.maps.Marker>[N],
+) {
+  addListenerToMap(marker, event, callback);
+}
+
+function setMarkers(newMarkers: MapCoordinate[]) {
+  setMapOnAllMarkers(null);
+  markers.value = newMarkers.map((m, index) => {
+    const marker = new googleMap.maps.Marker({
+      position: m,
+      draggable: true,
+    });
+    addMarkerListener(marker, 'dragend', (ev) => {
+      emits('marker-change', { index, position: formatCoordinate(ev) });
+    });
+    return marker;
+  });
+  setMapOnAllMarkers(map.value);
+}
+
+function setMapOnAllMarkers(map: google.maps.Map | null) {
+  markers.value.map((marker) => toRaw(marker).setMap(map));
+}
+
+const polygons = ref<google.maps.Polygon[]>([]);
+
+function addPolygonListener<N extends keyof PolygonEventHandler>(
+  polygon: google.maps.Polygon,
+  event: N,
+  callback: PolygonEventHandler[N],
+) {
+  addListenerToMap(polygon, event, callback);
+}
+
+function addVertexListener<N extends keyof google.maps.MVCArrayHandlerMap<Vertex, google.maps.LatLng>>(
+  path: Vertex,
+  event: N,
+  callback: google.maps.MVCArrayHandlerMap<Vertex, google.maps.LatLng>[N],
+) {
+  addListenerToMap(path, event, callback);
+}
+
+function getPolygonPath(index: number) {
+  const path = polygons.value[index].getPath().getArray();
+  return path.map(({ lat, lng }) => ({
+    lat: lat(),
+    lng: lng(),
+  }));
+}
+
+function polygonChanged(polygonIndex: number) {
+  const newPath = getPolygonPath(polygonIndex);
+  emits('polygon-change', { index: polygonIndex, path: newPath });
+}
+
+function removePolygonVertex(polygonIndex: number, vertexIndex: number) {
+  const path = getPolygonPath(polygonIndex);
+  const newPath = path.filter((_, i) => i !== vertexIndex);
+  emits('polygon-change', { index: polygonIndex, path: newPath });
+}
+
+function polygonRightClick(polygonIndex: number, ev: google.maps.PolyMouseEvent) {
+  if (ev.vertex !== undefined) {
+    removePolygonVertex(polygonIndex, ev.vertex);
+  } else {
+    emits('polygon-right-click', polygonIndex);
+  }
+}
+
+function setPolygons(newPolygons: MapPolygon[]) {
+  setMapOnAllPolygons(null);
+  polygons.value = newPolygons.map((p, index) => {
+    const polygon = new googleMap.maps.Polygon({
+      paths: p.paths,
+      strokeColor: p.strokeColor,
+      fillColor: p.fillColor,
+      fillOpacity: 0.5,
+      editable: props.editable,
+    });
+    addPolygonListener(polygon, 'contextmenu', (v) => polygonRightClick(index, v));
+    polygon.getPaths().forEach(path => {
+      addVertexListener(path, 'insert_at', () => polygonChanged(index));
+      addVertexListener(path, 'set_at', () => polygonChanged(index));
+    });
+    return polygon;
+  });
+  setMapOnAllPolygons(map.value);
+}
+
+function setMapOnAllPolygons(map: google.maps.Map | null) {
+  polygons.value.map((polygon) => toRaw(polygon).setMap(map));
+}
+
+function addMapListener<N extends keyof google.maps.MapHandlerMap<google.maps.Map>>(
+  map: google.maps.Map,
+  event: N,
+  callback: google.maps.MapHandlerMap<google.maps.Map>[N],
+) {
+  addListenerToMap(map, event, callback);
+}
+
+function setMap() {
+  map.value = new googleMap.maps.Map(mapRef.value as Element, {
+    center: props.center,
+    zoom: props.zoom,
+    mapTypeControl: false,
+    streetViewControl: false,
+    draggable: true,
+    scrollwheel: true,
+  });
+
+  addMapListener(map.value, 'click', (ev) => emits('map-click', formatCoordinate(ev)));
+}
+
+watch(() => props.markers, setMarkers, { deep: true });
+watch(() => props.polygons, setPolygons, { deep: true });
+
+onMounted(() => {
+  if (!mapRef.value || !googleMap) return;
+  setMap();
+  setMarkers(props.markers);
+  setPolygons(props.polygons);
+});
+
+onUnmounted(() => {
+  listeners.forEach((listener) => listener.remove());
+});
+</script>
+
+<template>
+  <div
+    ref="mapRef"
+    class="map app-map"
+  />
+</template>

package/src/components/RestaurantSelection.vue

@@ -0,0 +1,34 @@
+<template>
+    <FmSelect :model-value="currentValue" :items="availableRestaurantItems" @update:model-value="switchRestaurant"></FmSelect>
+</template>
+<script setup lang="ts">
+
+import { useCoreStore } from '@feedmepos/mf-common';
+import { type ISelectItem } from '@feedmepos/ui-library';
+import { computed, ref, onBeforeMount } from 'vue';
+
+interface Props{
+    onPostChangeRestaurant? : () => Promise<void>,
+};
+
+const props = defineProps<Props>();
+
+const { currentRestaurant, restaurants, changeRestaurant } = useCoreStore();
+
+const currentValue = ref(currentRestaurant.value?.profile.name ?? 'Select...');
+
+const availableRestaurantItems = computed<ISelectItem[]>(() => {
+    return restaurants.value.map((restaurant) => {
+        return {
+            label: restaurant.profile.name,
+            value: restaurant._id,
+        }
+    });
+})
+
+async function switchRestaurant(v : any){
+    const restaurant = restaurants.value.find((r) => r._id == v);
+    changeRestaurant(restaurant);
+    if(props.onPostChangeRestaurant) await props.onPostChangeRestaurant();
+}
+</script>

package/src/components/index.ts

@@ -0,0 +1,7 @@
+
+import GoogleMap from './GoogleMap.vue';
+
+
+export {
+  GoogleMap,
+};

package/src/components/snackbar.ts

@@ -0,0 +1,44 @@
+import { type SnackbarId, type SnackbarPosition, useSnackbar } from '@feedmepos/ui-library';
+
+export function useSnackbarFunctions() {
+  const Snackbar = useSnackbar();
+
+  function showSuccess(message: string) {
+    Snackbar.open({
+      type: 'success',
+      message,
+      position: 'bottom' as SnackbarPosition,
+    });
+  }
+
+  function showError(message: string) {
+    Snackbar.open({
+      type: 'error',
+      message,
+      position: 'bottom' as SnackbarPosition,
+    });
+  }
+
+  let snackbarId: SnackbarId | null = null;
+
+  function showLoading(message: string): SnackbarId {
+    snackbarId = Snackbar.open({
+      type: 'neutral',
+      spinner: true,
+      message,
+      position: 'bottom' as SnackbarPosition,
+      persistent: true  // Ensure the snackbar stays visible until manually closed
+    });
+    return snackbarId;
+  }
+  
+  function closeLoadingSnackbar() {
+    if (snackbarId) {
+      Snackbar.close(snackbarId);
+      snackbarId = null;  // Reset the snackbar ID after closing
+    }
+  }
+  
+
+  return { showSuccess, showError, showLoading, closeLoadingSnackbar };
+}

package/src/components/type.ts

@@ -0,0 +1,103 @@
+import type { DefineComponent } from 'vue';
+
+export type InputModel = string | number | boolean | null;
+
+export enum AUTH_CODE_TYPE {
+  ALL = 'ALL',
+  ALPHA = 'ALPHA',
+  ALPHANUMERIC = 'ALPHANUMERIC',
+  NUMERIC = 'NUMERIC',
+}
+
+export interface GlobalDialogType extends DefineComponent {
+  onDialogOK: (v?: any) => void;
+  onDialogCancel: () => void;
+  validate: () => Promise<boolean>;
+  reset: () => void;
+}
+
+export type DatePickerData = Date | {
+  start: Date;
+  end: Date;
+}
+
+export interface PickerGroup {
+  label: string;
+  value: string;
+  options: PickerOption[];
+}
+
+export interface PickerOption {
+  label: string;
+  value: string;
+}
+
+export interface CheckboxOption {
+  key?: string;
+  label: string;
+  value: any;
+  disable?: boolean;
+  suffix?: {
+    text: string;
+    class: string;
+  },
+}
+
+export interface TableColumn<T> {
+  name: string;
+  label: string;
+  field: keyof T | ((v: T) => any);
+  sort?: boolean | ((a: { index: number; value: any }, b: { index: number; value: any }) => number);
+  hide?: boolean;
+  format?: (v: any) => string;
+  align?: 'left' | 'right' | 'center';
+  option?: {
+    style?: string;
+    class?: string;
+  };
+}
+
+export interface TableOption<T> {
+  columns: TableColumn<T>[];
+  data: T[];
+  rowId?: keyof T | ((v: T) => string);
+  initialSort?: {
+    key: string;
+    descending?: boolean;
+  };
+  pagination?: {
+    sortBy?: string;
+    descending?: boolean;
+    page?: number;
+    rowsPerPage?: number;
+  };
+}
+
+export interface MoreActionOption {
+  label: string;
+  class?: string;
+  disable?: boolean | string;
+  hide?: boolean;
+  callback: () => Promise<unknown>;
+}
+
+export interface MapCoordinate {
+  lat: number;
+  lng: number;
+}
+
+export interface MapPolygon {
+  paths: MapCoordinate[];
+  strokeColor?: string;
+  fillColor?: string;
+}
+
+export interface MarkerChangeEvent {
+  index: number;
+  position: MapCoordinate;
+}
+
+export interface PolygonChangeEvent {
+  index: number;
+  path: MapCoordinate[];
+}

package/src/composables/index.ts

@@ -0,0 +1,7 @@
+
+import useSearch from './search';
+
+export {
+
+  useSearch,
+};

package/src/composables/loading/index.ts

@@ -0,0 +1,51 @@
+import { ref } from 'vue';
+
+export const useLoading = () => {
+  const isLoading = ref(false);
+
+  function startLoading() {
+    isLoading.value = true;
+  }
+
+  function stopLoading() {
+    isLoading.value = false;
+  }
+
+  /**
+   * A more advance way that automatically calls startLoading() and stopLoading() based on callback
+   * @param cb Callback that performs asynchronous task.
+   * @returns Returns generic result based on passed callback.
+   */
+  async function startAsyncCall<T>(cb: () => Promise<T>): Promise<T> {
+    try {
+      startLoading();
+      return await cb();
+    } finally {
+      stopLoading();
+    }
+  }
+
+  /**
+   * A more advance way that automatically calls startLoading() and stopLoading() based on callback
+   * @param cb Callback that performs asynchronous task.
+   * @returns Returns generic result based on passed callback. Throw error if have
+   */
+  async function startAsyncCallWithErr<T>(cb: () => Promise<T>): Promise<T> {
+    try {
+      startLoading();
+      return await cb();
+    } catch(e) {
+      throw e;
+    } finally {
+      stopLoading();
+    }
+  }
+
+  return {
+    isLoading,
+    startLoading,
+    stopLoading,
+    startAsyncCall,
+    startAsyncCallWithErr
+  };
+};

package/src/composables/search.ts

@@ -0,0 +1,18 @@
+import { computed, ref } from 'vue';
+
+export default (initialValue?: string) => {
+  const searchKey = ref(initialValue || '');
+
+  function format(text: unknown) {
+    return `${text}`.trim().toLowerCase();
+  }
+
+  const formattedSearchKey = computed(() => format(searchKey.value));
+
+  function filter(arr: unknown[]): boolean {
+    if (!formattedSearchKey.value) return true;
+    return arr.some((el) => format(el).includes(formattedSearchKey.value));
+  }
+
+  return { searchKey, filter };
+};

package/src/helpers/currency.ts

@@ -0,0 +1,6 @@
+import { Dinero } from '@feedmepos/core';
+import { FdoDinero } from '@feedmepos/core/entity';
+
+export function formatCurrency(value: FdoDinero, withSymbol = true): string {
+  return Dinero.fromFdoDinero(value).toFormat(withSymbol).replace(/\s+/g, '');
+}

package/src/helpers/date.ts

@@ -0,0 +1,29 @@
+import Day from 'dayjs';
+
+
+export function formatDuration(totalMinutes: number): string {
+  const hours = Math.floor(totalMinutes / 60);
+  const minutes = totalMinutes % 60;
+  return `${hours}h ${minutes.toString().padStart(2, '0')}m`;
+}
+
+export class DateRange {
+  private range: {
+    start: string;
+    end: string;
+  };
+  constructor(dateRange: { start: string; end: string }) {
+    this.range = dateRange;
+  }
+
+  private format(string: string, format?: string) {
+    return Day(string).format(format || 'DD/MM/YYYY');
+  }
+
+  formatWith(format?: string, divider?: string) {
+    const start = this.format(this.range.start, format);
+    const end = this.format(this.range.end, format);
+    return `${start} ${divider || '-'} ${end}`;
+  }
+}
+