wareify

comps/charts/bar.tsx

@@ -1,4 +1,4 @@
-import { useLocal } from "lib/utils/use-local";
+import { useLocal } from "@/utils/use-local";
 import { FC, useEffect } from "react";
 import { loadChart } from "./loader";
 import type { Bar } from "react-chartjs-2";
@@ -14,8 +14,9 @@ const getRandomInt = (min: number, max: number) => {
 
 export const BarChart: FC<{
   data: () => ItemData;
-  legend?: any
+  legend?: any;
-}> = ({ data, legend }) => {
+  scale?: any;
+}> = ({ data, legend, scale }) => {
   const local = useLocal({
     data: null as unknown as ItemData,
     Bar: null as null | typeof Bar,
@@ -42,6 +43,7 @@ export const BarChart: FC<{
         options={{
           responsive: true,
           maintainAspectRatio: false,
+          scales: scale,
           plugins:
             legend === "none"
               ? {

comps/custom/Datepicker/components/Calendar/Days.tsx

@@ -417,7 +417,7 @@ const Days: React.FC<Props> = ({
         >
         <span className="c-relative">
           {item}
-            <span className="c-relative">{load_marker(item, "previous")}</span>
+          {load_marker(item, "previous")}
         </span>
         </button>
       ))}
@@ -438,7 +438,7 @@ const Days: React.FC<Props> = ({
         >
           <span className="c-relative">
             {item}
-            <span className="c-relative">{load_marker(item, "current")}</span>
+            {load_marker(item, "current")}
           </span>
         </button>
       ))}
@@ -456,7 +456,7 @@ const Days: React.FC<Props> = ({
         >
         <span className="c-relative">
           {item}
-            <span className="c-relative">{load_marker(item, "next")}</span>
+          {load_marker(item, "next")}
         </span>
         </button>
       ))}

comps/custom/QrReader.tsx

@@ -1,17 +1,32 @@
-import { useEffect, useRef, useState } from "react";
+import { FC, useEffect, useRef, useState } from "react";
 import QrScanner from "qr-scanner";
 
-export const QrReader = () => {
+export const QrReader: FC<{ url: string }> = ({ url }) => {
     const scanner = useRef<QrScanner>();
     const videoEl = useRef<HTMLVideoElement>(null);
     const qrBoxEl = useRef<HTMLDivElement>(null);
     const [qrOn, setQrOn] = useState<boolean>(true);
     const [scannedResult, setScannedResult] = useState<string | undefined>("");
+    const [hasScanned, setHasScanned] = useState<boolean>(false);
+
 
     // Success
     const onScanSuccess = (result: QrScanner.ScanResult) => {
+        // console.log(result);
+        // navigate("/hasil/scan");
+        // setScannedResult(result?.data);
+        if (!hasScanned) {
             console.log(result);
             setScannedResult(result?.data);
+            setHasScanned(true);
+            scanner.current?.stop();
+
+            setTimeout(() => {
+                // console.log("Mencoba trigger hasil scan");
+                // navigate(`/hasil/scan?id_asset=${result?.data}`);
+                navigate(url + result?.data);
+            }, 1000);
+        }
     };
 
     // Fail
@@ -47,17 +62,16 @@ export const QrReader = () => {
     useEffect(() => {
         if (!qrOn)
             alert(
-        "Camera is blocked or not accessible. Please allow camera in your browser permissions and Reload."
+                "Kamera tidak bisa diakses. Tolong beri izin untuk akses kamera dan silahkan reload."
             );
     }, [qrOn]);
 
     return (
         <div className="qr-reader">
-      {/* QR */}
             <video ref={videoEl}></video>
-      <div ref={qrBoxEl} className="qr-box"></div>
+            <div ref={qrBoxEl} className="qr-box">
 
-      {/* Show Data Result if scan is success */}
+            </div>
             {scannedResult && (
                 <p
                     style={{

comps/dialog/Dialog.tsx

@@ -1,4 +1,5 @@
-import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { useLocal } from "@/utils/use-local";
+import { Button } from "lib/comps/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -7,9 +8,9 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "lib/comps/ui/dialog";
-import { useLocal } from "lib/utils/use-local";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
-import { FC } from "react";
+import { FC, useEffect } from "react";
 
 export const Pop: FC<{
   child: any;
@@ -53,6 +54,7 @@ export const Pop: FC<{
         )}
       />
       <DialogContent className="sm:s-max-w-[425px]">
+        <div className="c-relative c-flex-grow">
         <DialogPrimitive.Close
           onClick={() => {
             local.open = false;
@@ -62,6 +64,7 @@ export const Pop: FC<{
             "c-absolute c-right-4 c-top-4 c-rounded-sm c-opacity-70 c-ring-offset-background c-transition-opacity hover:c-opacity-100 focus:c-outline-none focus:c-ring-2 focus:c-ring-ring focus:c-ring-offset-2 disabled:c-pointer-events-none data-[state=open]:c-bg-accent data-[state=open]:c-text-muted-foreground",
             css`
               right: 1rem;
+              z-index: 1;
             `
           )}
         >
@@ -85,6 +88,7 @@ export const Pop: FC<{
         >
           {content}
         </PassProp>
+        </div>
       </DialogContent>
     </Dialog>
   );

comps/filter/FilterContent.tsx

@@ -3,7 +3,7 @@ import { BaseForm } from "../form/base/BaseForm";
 import { FilterLocal } from "./utils/types";
 import { useLocal } from "lib/utils/use-local";
 import { getFilter } from "./utils/get-filter";
-import { FMLocal } from "../form/typings";
+import { FieldLoading, FMLocal } from "lib/exports";
 
 export const FilterContent: FC<{
   mode: string;
@@ -106,16 +106,19 @@ export const FilterContent: FC<{
       <BaseForm
         data={filter.data}
         on_submit={async (form) => {
+          const fm = form.fm;
           try {
             if (typeof form.fm?.data === "object") {
-              const fm = form.fm?.data as any
               form.render();
               form.fm.render();
             }
           } catch (ex) {}
 
-          if (typeof onSubmit === "function" && mode === "raw") {
+          if (mode === "raw" && fm) {
-            const data = await onSubmit(form.fm);
+            const submit = async (fm: FMLocal) => {
+              fm.render();
+              if (typeof onSubmit === "function") {
+                const data = await onSubmit(fm);
                 if (typeof form.fm?.data === "object") {
                   form.fm.data = {
                     __status: "submit",
@@ -131,7 +134,9 @@ export const FilterContent: FC<{
                   filter.render();
                 }
               }
-          // form.render();
+            };
+            await submit(fm);
+          }
           const f = getFilter(filter.name);
           if (f) {
             for (const list of Object.values(f.list.ref)) {

comps/filter/FilterField.tsx

@@ -88,14 +88,14 @@ export const FilterField: FC<{
                 value={field.fm?.data?.[name]}
                 placeholder={field.field.label}
                 onBlur={() => {
-                  clearTimeout(internal.search_timeout);
+                  // clearTimeout(internal.search_timeout);
-                  filter.form?.submit();
+                  // filter.form?.submit();
                 }}
                 spellCheck={false}
                 className="c-flex-1 c-transition-all c-bg-transparent c-outline-none c-px-2 c-text-sm c-w-full"
                 onChange={(e) => {
+                  console.log("HALO")
                   field.fm.data[name] = e.currentTarget.value;
-
                   clearTimeout(internal.search_timeout);
                   internal.search_timeout = setTimeout(() => {
                     filter.form?.submit();

comps/filter/MasterFilter.tsx

@@ -1,10 +1,10 @@
-import { useLocal } from "lib/utils/use-local";
+import { useLocal } from "@/utils/use-local";
-import { FC, ReactNode } from "react";
+import { FC, ReactNode, useEffect } from "react";
 import { FMLocal, GenField } from "../form/typings";
 import { FilterContent } from "./FilterContent";
 import { getFilter } from "./utils/get-filter";
 import { default_filter_local } from "./utils/types";
-import { FieldLoading } from "../ui/field-loading";
+import { FieldLoading } from "lib/exports";
 
 type FilterMode = "raw" | "inline";
 
@@ -39,23 +39,30 @@ export const MasterFilter: FC<FilterProps> = ({
   const filter = useLocal({ ...default_filter_local });
   filter.name = name;
   filter.mode = mode;
-
+  useEffect(() => {
     if (!isEditor) {
       const wf = getFilter(name);
       if (wf) {
         if (wf.filter.ref[_item.id]) {
           filter.data = wf.filter.ref[_item.id].data;
+          filter.raw_status = "ready";
+          filter.render();
         } else {
           if (mode === "raw" && onLoad) {
             if (filter.raw_status === "init") {
               filter.raw_status = "loading";
-            filter.data = onLoad();
+              const data = onLoad();
+              if (data instanceof Promise) {
+                data.then((e) => {
+                  filter.data = e;
                   filter.raw_status = "ready";
                   filter.render();
+                });
+              } else {
+                filter.raw_status = "ready";
+                filter.data = data;
+                filter.render();
               }
-
-          if (filter.raw_status !== "ready") {
-            return <FieldLoading />;
             }
           }
         }
@@ -63,7 +70,11 @@ export const MasterFilter: FC<FilterProps> = ({
         wf.list.render();
       }
     }
+  }, []);
 
+  if (mode === "raw" && filter.raw_status !== "ready") {
+    return <FieldLoading />;
+  }
   return (
     <>
       <FilterContent

comps/form/field/type/TypeInput.tsx

@@ -1,5 +1,5 @@
-import { AutoHeightTextarea } from "lib/comps/custom/AutoHeightTextarea";
+import { AutoHeightTextarea } from "@/comps/custom/AutoHeightTextarea";
-import { useLocal } from "lib/utils/use-local";
+import { useLocal } from "@/utils/use-local";
 import parser from "any-date-parser";
 import Datepicker from "lib/comps/custom/Datepicker";
 import { EyeIcon, EyeOff } from "lucide-react";
@@ -217,7 +217,7 @@ export const FieldTypeInput: FC<{
           asSingle={true}
           useRange={false}
           onChange={(value) => {
-            console.log({ value });
+            // console.log({ value });
             fm.data[field.name] = value?.startDate
               ? new Date(value?.startDate)
               : null;

comps/list/ImportExcel.tsx

@@ -1,5 +1,5 @@
-import { GFCol } from "lib/gen/utils";
+import { GFCol } from "@/gen/utils";
-import { useLocal } from "lib/utils/use-local";
+import { useLocal } from "@/utils/use-local";
 import { ChangeEvent, FC, MouseEvent } from "react";
 // import { Workbook } from 'exceljs';
 // import * as XLSX from "xlsx";
@@ -131,11 +131,7 @@ export const ImportExcel: FC<ImportExcelProps> = ({
           });
           rowIndex++;
 
-          // let insertedData = await table.create({ data: insertRow });
+          
-          // local.insertedData.push({
-          //   pk: insertedData.id,
-          //   rows: insertedData
-          // });
           local.insertedData.push({
             pk: insertRow[pk],
             rows: insertRow,

comps/md/utils/md-hash.ts

@@ -1,4 +1,4 @@
-import { fetchLinkParams, parseLink } from "lib/utils/fetch-link-params";
+import { fetchLinkParams, parseLink } from "lib/comps/form/field/type/TypeLink";
 import { MDLocal } from "./typings";
 import { BreadItem } from "lib/comps/custom/Breadcrumb";
 
@@ -60,7 +60,7 @@ export const masterDetailApplyParams = (md: MDLocal) => {
         delete md.params.tabs[md.name];
       }
     }
-
+console.log({select: JSON.parse(JSON.stringify(md.selected))})
     const pk = md.pk;
     if (pk && row[pk.name]) {
       md.params.hash[md.name] = row[pk.name];
@@ -80,6 +80,18 @@ export const masterDetailApplyParams = (md: MDLocal) => {
   if (!isEditor) {
     location.hash = hash;
   }
+  if(!isEditor){
+    if(md.props.tab_mode === "v-tab" || md.props.tab_mode === "h-tab"){
+      try{
+        if(row && md?.childs?.form?.fm && md?.childs?.form?.fm?.status === "ready" && md.selected?.id){
+          md.childs.form.fm.reload();
+          // console.log("MASUK???")
+        }
+      }catch(ex){
+
+      }
+    }
+  }
 };
 
 const cleanHash = (hash: string) => {

comps/sheet/sheet.tsx

@@ -1,4 +1,4 @@
-import { useLocal } from "lib/utils/use-local";
+import { useLocal } from "@/utils/use-local";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
 import { FC, useEffect } from "react";
@@ -21,7 +21,22 @@ export const SheetCn: FC<{
   content: any;
   header: string;
   open: string;
-}> = ({ child, PassProp, props, content, header, open }) => {
+  close?: string;
+  mode?: "full" | "normal";
+  direction?: "left" | "right" | "bottom" | "top";
+  deps?: any;
+}> = ({
+  child,
+  PassProp,
+  props,
+  content,
+  header,
+  open,
+  close,
+  mode,
+  direction,
+  deps
+}) => {
   const local = useLocal({
     open: false,
   });
@@ -40,6 +55,7 @@ export const SheetCn: FC<{
         <div {...props} className={cx(props.className, "")}>
           <PassProp
             sheet={{
+              deps,
               open: () => {
                 local.open = true;
                 local.render();
@@ -71,13 +87,15 @@ export const SheetCn: FC<{
         )}
       />
       <SheetContent
+        side={direction}
         className={cx(
-          "sm:s-max-w-[425px]",
+          mode === "full" ? "c-w-screen" : "sm:s-max-w-[425px]",
           css`
             z-index: 2;
           `
         )}
       >
+        {close !== "n" ? (
           <SheetPrimitive.Close
             onClick={() => {
               local.open = false;
@@ -87,12 +105,17 @@ export const SheetCn: FC<{
               "c-absolute c-right-4 c-top-4 c-rounded-sm c-opacity-70 c-ring-offset-background c-transition-opacity hover:c-opacity-100 focus:c-outline-none focus:c-ring-2 focus:c-ring-ring focus:c-ring-offset-2 disabled:c-pointer-events-none data-[state=open]:c-bg-accent data-[state=open]:c-text-muted-foreground",
               css`
                 right: 1rem;
+                z-index: 99;
               `
             )}
           >
             <X className="c-h-4 c-w-4" />
             <span className="c-sr-only">Close</span>
           </SheetPrimitive.Close>
+        ) : (
+          <></>
+        )}
+        {header !== "" && header ? (
           <SheetHeader
             className={cx(
               css`
@@ -102,8 +125,22 @@ export const SheetCn: FC<{
           >
             <SheetTitle>{header}</SheetTitle>
           </SheetHeader>
+        ) : (
+          <>
+           <SheetHeader
+            className={cx(
+              css`
+                padding: 0px;
+              `
+            )}
+          >
+            <SheetTitle></SheetTitle>
+          </SheetHeader></>
+        )}
+
         <PassProp
           sheet={{
+            deps,
             open: () => {
               local.open = true;
               local.render();

comps/ui/sheet.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "lib/utils";
+import { cn } from "@/utils";
 
 const Sheet = SheetPrimitive.Root;
 
@@ -30,7 +30,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-  "c-fixed c-z-50 c-gap-4 c-bg-background c-p-6 c-shadow-lg c-transition c-ease-in-out data-[state=closed]:c-duration-300 data-[state=open]:c-duration-500 data-[state=open]:c-animate-in data-[state=closed]:c-animate-out",
+  "c-fixed c-z-50 c-gap-4 c-bg-background c-shadow-lg c-transition c-ease-in-out data-[state=closed]:c-duration-300 data-[state=open]:c-duration-500 data-[state=open]:c-animate-in data-[state=closed]:c-animate-out",
   {
     variants: {
       side: {
@@ -39,7 +39,7 @@ const sheetVariants = cva(
           "c-inset-x-0 c-bottom-0 c-border-t data-[state=closed]:c-slide-out-to-bottom data-[state=open]:c-slide-in-from-bottom",
         left: "c-inset-y-0 c-left-0 c-h-full c-w-3/4 c-border-r data-[state=closed]:c-slide-out-to-left data-[state=open]:c-slide-in-from-left sm:c-max-w-sm",
         right:
-          "c-inset-y-0 c-right-0 c-h-full c-w-3/4 c-border-l data-[state=closed]:c-slide-out-to-right data-[state=open]:c-slide-in-from-right sm:c-max-w-sm",
+          "c-inset-y-0 c-right-0 c-h-full c-w-3/4 c-border-l data-[disabled]:c-bg-red-300 data-[state=closed]:c-slide-out-to-right data-[state=open]:c-slide-in-from-right sm:c-max-w-sm",
       },
     },
     defaultVariants: {