fix

comps/custom/Detail.tsx

@@ -5,7 +5,9 @@ import { FC, useEffect } from "react";
 import { Skeleton } from "../ui/skeleton";
 
 export const Detail: FC<{
-  detail: (item: any) => Record<string, [string, string, string]>;
+  detail: (
+    item: any
+  ) => Record<string, [string, string, string | (() => void)]>;
   on_load: (arg: {
     params: any;
     bind: (fn: (on_load: any) => void) => void;
@@ -133,7 +135,7 @@ export const Detail: FC<{
           return null;
         const [label, sample, link] = data;
 
-        if (link) {
+        if (typeof link === 'string') {
           preload(link);
         }
 
@@ -215,7 +217,7 @@ export const Detail: FC<{
 
 const Linkable: FC<{
   sample?: string;
-  link?: string;
+  link?: string | (() => void);
   mode: "standard" | "compact" | "inline";
   status: "init" | "loading" | "ready";
 }> = ({ sample, link, status, mode }) => {
@@ -245,11 +247,15 @@ const Linkable: FC<{
         mode !== "standard" && "text-sm"
       )}
       onClick={() => {
-        if (link.startsWith("http://") || link.startsWith("https://")) {
+        if (typeof link === "function") {
-          window.open(link, "_blank");
+          link();
-        }
+        } else {
-        if (!isEditor) {
+          if (link.startsWith("http://") || link.startsWith("https://")) {
-          navigate(link);
+            window.open(link, "_blank");
+          }
+          if (!isEditor) {
+            navigate(link);
+          }
         }
       }}
     >

comps/filter/FilterContent.tsx

@@ -17,10 +17,6 @@ export const FilterContent: FC<{
       className={cx(
         `c-flex c-flex-1 filter-content filter-${mode}`,
         css`
-          &.filter-content {
-            border-radius: 4px;
-            background: #fff;
-          }
           &.filter-regular {
             width: 100%;
             /* Styles specific to sidebar */
@@ -30,9 +26,14 @@ export const FilterContent: FC<{
             display: flex;
             align-items: center;
 
+            .form-inner {
+              padding-right: 1px;
+            }
+
             .field {
               padding-top: 0px;
               align-items: center;
+              padding-left: 0;
             }
             .field > .label {
               display: none;

comps/form/Form.tsx

@@ -178,9 +178,10 @@ export const Form: FC<FMProps> = (props) => {
       {toaster_el && createPortal(<Toaster cn={cx} />, toaster_el)}
       <div
         className={cx(
-          "form-inner c-flex c-flex-1 c-flex-wrap c-items-start c-content-start",
+          "form-inner c-flex c-flex-col c-flex-1 c-flex-wrap c-items-start c-content-start",
           css`
             padding-right: 10px;
+            min-height: 100%;
           `
         )}
       >

comps/form/gen/on_load.ts

@@ -50,6 +50,8 @@ ${
   }
 `
 }
+  call_prasi_events("form", "before_load", [opt?.fm]);
+
   ${opt?.before_load ? opt.before_load : `let id = raw_id`}
   let item = {};
   if (id){
@@ -72,6 +74,11 @@ ${
       where,
       select: gen.select,
     });
+
+    setTimeout(() => {
+      call_prasi_events("form", "after_load", [opt?.fm]);
+    });
+
     ${opt?.after_load ? opt?.after_load : ""}
     return item;
   } else {

comps/list/TableList.tsx

@@ -110,6 +110,12 @@ export const TableList: FC<TableListProp> = ({
       mode = "table";
     }
   }
+  let ls_sort = localStorage.getItem(
+    `sort-${location.pathname}-${location.hash}-${name}`
+  ) as unknown as { columns: any; orderBy: any };
+  if (ls_sort) {
+    ls_sort = JSON.parse(ls_sort as any);
+  }
   const local = useLocal({
     selectedRows: [] as {
       pk: string | number;
@@ -146,7 +152,7 @@ export const TableList: FC<TableListProp> = ({
     },
     cached_row: new WeakMap<any, ReactElement>(),
     sort: {
-      columns: [] as SortColumn[],
+      columns: (ls_sort?.columns || []) as SortColumn[],
       on_change: (cols: SortColumn[]) => {
         if (feature?.find((e) => e === "sorting")) {
           local.sort.columns = cols;
@@ -196,11 +202,19 @@ export const TableList: FC<TableListProp> = ({
           } else {
             local.sort.orderBy = null;
           }
+          localStorage.setItem(
+            `sort-${location.pathname}-${location.hash}-${name}`,
+            JSON.stringify({
+              columns: local.sort.columns,
+              orderBy: local.sort.orderBy,
+            })
+          );
+
           local.status = "reload";
           local.render();
         }
       },
-      orderBy: null as null | Record<
+      orderBy: (ls_sort?.orderBy || null) as null | Record<
         string,
         "asc" | "desc" | Record<string, "asc" | "desc">
       >,

comps/md/MasterDetail.tsx

@@ -99,7 +99,7 @@ export const MasterDetail: FC<MDProps> = (arg) => {
   }
 
   return (
-    <div className={cx("c-flex-1 c-flex-col c-flex c-w-full c-h-full")}>
+    <div className={cx("master-detail c-flex-1 c-flex-col c-flex c-w-full c-h-full")}>
       {md.props.show_head === "always" && <MDHeader md={md} mdr={mdr} />}
       {md.status === "ready" && (
         <>

comps/md/gen/md-form.ts

@@ -50,50 +50,50 @@ export const generateMDForm = async (
     },
   };
   generateForm(async (props: any) => {}, props, tablelist, false, true);
-  
+
   tab_detail?.edit.setProp("breadcrumb", {
     mode: "raw",
     value: `\
-    () => {
+() => {
-      const breads: BreadItem[] = [
+  const breads: BreadItem[] = [
-        {
+    {
-          label: "List ${formatName(arg.table)}",
+      label: "List ${formatName(arg.table)}",
-          onClick: () => {
+      onClick: () => {
-            md.selected = null;
+        md.selected = null;
-            md.tab.active = "master";
+        md.tab.active = "master";
-            md.internal.action_should_refresh = true;
+        md.internal.action_should_refresh = true;
-            md.params.apply();
+        md.params.apply();
-            md.render();
+        md.render();
-          },
+      },
-        },
+    },
-      ];
+  ];
-    
+
-      if (isEditor) {
+  if (isEditor) {
+    breads.push({ label: "Add New" });
+  } else {
+    if (
+      md.selected &&
+      typeof md.selected === "object"
+    ) {
+      if (Object.keys(md.selected).length === 0){
         breads.push({ label: "Add New" });
       } else {
-        if (
+        breads.push({ label: "Edit" });
-          md.selected &&
-          typeof md.selected === "object"
-        ) {
-          if (Object.keys(md.selected).length === 0){
-            breads.push({ label: "Add New" });
-          } else {
-            breads.push({ label: "Edit" });
-          }
-        }
       }
-    
-      return breads;
-    };
-    
-    type BreadItem = {
-      label: React.ReactNode;
-      url?: string;
-      onClick?: () => void;
     }
-    `
+  }
-  })
+
-  
+  return breads;
+};
+
+type BreadItem = {
+  label: any;
+  url?: string;
+  onClick?: () => void;
+}
+`,
+  });
+
   tab_detail?.edit.setChilds([
     {
       type: "item",

comps/md/gen/tbl-list/on_load.ts

@@ -48,7 +48,8 @@ async (arg: TableOnLoad) => {
   }
 
   return new Promise(async (done) => {
-    const items = await db.${table}.findMany({
+    const result = {items: []}
+    result.items = await db.${table}.findMany({
       select: ${JSON.stringify(select, null, 2).split("\n").join("\n    ")},
       orderBy: arg.orderBy || {
         ${pk}: "desc",
@@ -59,7 +60,11 @@ async (arg: TableOnLoad) => {
       ...arg.paging,
     });
 
-    done(items);
+    await call_prasi_events("tablelist", "after_load", ["${table}", result.items, (input) => {
+      result.items = input;
+    }]);
+
+    done(result.items);
   });
 };
 

comps/ui/button.tsx

@@ -9,16 +9,17 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "c-bg-primary c-text-primary-foreground hover:c-bg-primary/90",
+        default:
+          "button-primary c-bg-primary c-text-primary-foreground hover:c-bg-primary/90",
         // default: "#FDB813",
         destructive:
-          "c-bg-destructive c-text-destructive-foreground hover:c-bg-destructive/90",
+          "button-destructive  c-bg-destructive c-text-destructive-foreground hover:c-bg-destructive/90",
         outline:
-          "c-border c-border-input c-bg-background hover:c-bg-accent hover:c-text-accent-foreground",
+          "button-outline c-border c-border-input c-bg-background hover:c-bg-accent hover:c-text-accent-foreground",
         secondary:
-          "c-bg-secondary c-text-secondary-foreground hover:c-bg-secondary/80",
+          "button-secondary c-bg-secondary c-text-secondary-foreground hover:c-bg-secondary/80",
-        ghost: "hover:c-bg-accent hover:c-text-accent-foreground",
+        ghost: "button-ghost hover:c-bg-accent hover:c-text-accent-foreground",
-        link: "c-text-primary c-underline-offset-4 hover:c-underline",
+        link: "button-link c-text-primary c-underline-offset-4 hover:c-underline",
         "no-style": "",
       },
       size: {

exports.tsx

@@ -87,7 +87,6 @@ export { generateTableList } from "@/comps/md/gen/gen-table-list";
 export { generateSelect } from "@/comps/md/gen/md-select";
 export { MasterDetailType } from "@/comps/md/utils/typings";
 export { Button, FloatButton } from "@/comps/ui/button";
-export { prasi_gen } from "@/gen/prasi_gen";
 export { FormatValue } from "@/utils/format-value";
 export { GetValue } from "@/utils/get-value";
 export { password } from "@/utils/password";

utils/prasi-events.ts

@@ -17,6 +17,11 @@ const events = {
     },
   },
   tablelist: {
+    after_load: async <T extends Prisma.ModelName>(
+      table: T,
+      items: any[],
+      modify: (items: any[]) => any[]
+    ) => {},
     where: async <T extends Prisma.ModelName>(table: T, where: any) => {},
   },
 };