From 523c932541f778cf0f44e7f7bb68ca73e17544c6 Mon Sep 17 00:00:00 2001
From: rizrmd <me@rizrmd.com>
Date: Wed, 7 Feb 2024 09:17:38 -0700
Subject: [PATCH] wip fix

---
 .gitignore                      |  0
 comps/custom/Card.tsx           | 24 +++++-----
 comps/custom/Detail.tsx         | 85 +++++++++++++++++++++++----------
 comps/custom/Tab.tsx            | 32 +++++++++----
 comps/form/Field.tsx            |  3 +-
 comps/form/InputMoney/index.tsx |  4 +-
 comps/form/Slider/types.ts      |  0
 comps/ui/button.tsx             |  2 +-
 comps/ui/slider.tsx             |  0
 exports.tsx                     |  0
 utils/date.ts                   |  0
 utils/globals.d.ts              |  1 -
 utils/init.ts                   |  2 +-
 13 files changed, 103 insertions(+), 50 deletions(-)
 mode change 100644 => 100755 .gitignore
 mode change 100644 => 100755 comps/form/Slider/types.ts
 mode change 100644 => 100755 comps/ui/slider.tsx
 mode change 100644 => 100755 exports.tsx
 mode change 100644 => 100755 utils/date.ts

diff --git a/.gitignore b/.gitignore
old mode 100644
new mode 100755
diff --git a/comps/custom/Card.tsx b/comps/custom/Card.tsx
index 8fb15b6..1b4ec61 100755
--- a/comps/custom/Card.tsx
+++ b/comps/custom/Card.tsx
@@ -71,7 +71,7 @@ export const Card: FC<{
   }
 
   return (
-    <card.Card className="c-flex c-flex-1">
+    <card.Card className="c-flex c-flex-1 c-items-center">
       <div className={cn("c-p-3 c-text-[14px] c-flex-1")}>
         {!!title && (title.left || title.right) && (
           <div className="c-tracking-tight c-text-sm c-font-medium c-flex c-justify-between c-space-x-1 mb-1 c-items-center">
@@ -81,16 +81,18 @@ export const Card: FC<{
             )}
           </div>
         )}
-        <card.CardTitle className="c-whitespace-nowrap pb-1 h-[28px] c-overflow-hidden">
-          {local.status_value === "ready" ? (
-            formatObject(local.value)
-          ) : (
-            <div className="flex flex-col space-y-1">
-              <Skeleton className="h-[10px] c-w-[50px]" />
-              <Skeleton className="h-[10px] c-w-[40px]" />
-            </div>
-          )}
-        </card.CardTitle>
+        {!!value && (
+          <card.CardTitle className="c-whitespace-nowrap pb-1 h-[28px] c-overflow-hidden">
+            {local.status_value === "ready" ? (
+              formatObject(local.value)
+            ) : (
+              <div className="flex flex-col space-y-1">
+                <Skeleton className="h-[10px] c-w-[50px]" />
+                <Skeleton className="h-[10px] c-w-[40px]" />
+              </div>
+            )}
+          </card.CardTitle>
+        )}
         <card.CardDescription className="c-text-xs c-whitespace-pre-wrap">
           {local.status_desc === "ready" ? (
             formatObject(local.desc)
diff --git a/comps/custom/Detail.tsx b/comps/custom/Detail.tsx
index d2286d6..d097822 100755
--- a/comps/custom/Detail.tsx
+++ b/comps/custom/Detail.tsx
@@ -2,6 +2,8 @@ import { useLocal } from "@/utils/use-local";
 import { cx } from "class-variance-authority";
 import { FC, useEffect } from "react";
 import { Skeleton } from "../ui/skeleton";
+import { ArrowRight, ArrowRightCircle, ChevronRight } from "lucide-react";
+import { IconRight } from "react-day-picker";
 
 export const Detail: FC<{
   detail: (item: any) => Record<string, [string, string, string]>;
@@ -70,10 +72,15 @@ export const Detail: FC<{
 
         if (mode === "standard") {
           return (
-            <div key={idx} className="c-flex c-flex-col c-items-stretch mb-2">
+            <div key={idx} className="c-flex c-flex-col c-items-stretch">
               <div className="c-flex c-font-bold">{label}</div>
               <div className="c-flex">
-                <Linkable sample={sample} link={link} status={local.status} />
+                <Linkable
+                  sample={sample}
+                  mode={mode}
+                  link={link}
+                  status={local.status}
+                />
               </div>
             </div>
           );
@@ -81,13 +88,29 @@ export const Detail: FC<{
           return (
             <div
               key={idx}
-              className="c-flex c-flex-row c-items-center mb-1 border-b"
+              className={cx(
+                "c-flex c-flex-row c-items-center",
+                !is_first && "border-t",
+                css`
+                  min-height: 30px;
+                `,
+                isMobile && "c-justify-between"
+              )}
             >
               <div className="c-flex c-font-bold c-min-w-[30%] c-overflow-hidden c-text-sm">
                 {label}
               </div>
-              <div className={cx("c-flex c-flex-1 c-ml-2 items-center")}>
-                <Linkable sample={sample} link={link} status={local.status} />
+              <div
+                className={cx("c-flex c-flex-1 c-ml-2 c-flex-col c-items-end ")}
+              >
+                <div>
+                  <Linkable
+                    mode={mode}
+                    sample={sample}
+                    link={link}
+                    status={local.status}
+                  />
+                </div>
               </div>
             </div>
           );
@@ -103,7 +126,12 @@ export const Detail: FC<{
             >
               <div className={"c-flex c-font-bold"}>{label}</div>
               <div className="c-flex">
-                <Linkable sample={sample} link={link} status={local.status} />
+                <Linkable
+                  mode={mode}
+                  sample={sample}
+                  link={link}
+                  status={local.status}
+                />
               </div>
             </div>
           );
@@ -116,8 +144,9 @@ export const Detail: FC<{
 const Linkable: FC<{
   sample?: string;
   link?: string;
+  mode: "standard" | "compact" | "inline";
   status: "init" | "loading" | "ready";
-}> = ({ sample, link, status }) => {
+}> = ({ sample, link, status, mode }) => {
   const loading = (
     <Skeleton
       className={cx(
@@ -136,7 +165,13 @@ const Linkable: FC<{
 
   return (
     <div
-      className="c-flex-1 c-px-2 c-my-1 c-rounded-md c-border c-flex c-items-center cursor-pointer"
+      className={cx(
+        "c-flex-1 c-my-1 c-px-2 c-rounded-md c-border c-flex c-items-center cursor-pointer",
+        css`
+          margin-left: -4px;
+        `,
+        mode !== "standard" && "text-sm"
+      )}
       onClick={() => {
         if (!isEditor) {
           navigate(link);
@@ -150,11 +185,11 @@ const Linkable: FC<{
               "c-flex-1",
               css`
                 line-height: 1.1;
-                padding: 5px 0px;
+                padding: 3px 0px;
               `
             )}
           >
-            {sample || '-'}
+            {sample || "-"}
           </div>
         </>
       ) : (
@@ -171,21 +206,23 @@ const Linkable: FC<{
           {loading}
         </div>
       )}
-      <svg
-        width="15"
-        height="15"
-        viewBox="0 0 15 15"
-        fill="none"
-        className="c-ml-2"
-        xmlns="http://www.w3.org/2000/svg"
+      <div
+        className={cx(
+          "c-flex c-items-center c-justify-center",
+          css`
+            width: 20px;
+            height: 80%;
+            padding: 0px;
+            margin: 0px;
+            margin-left: 10px;
+            margin-right: -5px;
+            border-left: 1px solid #ececeb;
+            padding-left: 3px;
+          `
+        )}
       >
-        <path
-          d="M3 2C2.44772 2 2 2.44772 2 3V12C2 12.5523 2.44772 13 3 13H12C12.5523 13 13 12.5523 13 12V8.5C13 8.22386 12.7761 8 12.5 8C12.2239 8 12 8.22386 12 8.5V12H3V3L6.5 3C6.77614 3 7 2.77614 7 2.5C7 2.22386 6.77614 2 6.5 2H3ZM12.8536 2.14645C12.9015 2.19439 12.9377 2.24964 12.9621 2.30861C12.9861 2.36669 12.9996 2.4303 13 2.497L13 2.5V2.50049V5.5C13 5.77614 12.7761 6 12.5 6C12.2239 6 12 5.77614 12 5.5V3.70711L6.85355 8.85355C6.65829 9.04882 6.34171 9.04882 6.14645 8.85355C5.95118 8.65829 5.95118 8.34171 6.14645 8.14645L11.2929 3H9.5C9.22386 3 9 2.77614 9 2.5C9 2.22386 9.22386 2 9.5 2H12.4999H12.5C12.5678 2 12.6324 2.01349 12.6914 2.03794C12.7504 2.06234 12.8056 2.09851 12.8536 2.14645Z"
-          fill="currentColor"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-        ></path>
-      </svg>
+        <ArrowRight width={12} height={12} />
+      </div>
     </div>
   );
 };
diff --git a/comps/custom/Tab.tsx b/comps/custom/Tab.tsx
index a26ecb7..6462287 100755
--- a/comps/custom/Tab.tsx
+++ b/comps/custom/Tab.tsx
@@ -18,11 +18,14 @@ export const Tab: FC<{
 }> = ({ tabs, active, body, PassProp, on_load }) => {
   const local = useLocal(
     {
-      active,
+      activeIndex: active,
       count: [] as (number | string)[],
+      mode: "number" as "number" | "hash",
       status: "init" as "init" | "load" | "ready",
     },
     () => {
+      if (local.mode === "hash") {
+      }
       if (local.status === "init") {
         if (typeof on_load === "function" && !isEditor) {
           local.status = "load";
@@ -46,14 +49,25 @@ export const Tab: FC<{
 
   const all_tabs = tabs({ count: local.count || [] });
 
-  if (!parseInt(local.active)) {
-    local.active = "0";
+  if (local.activeIndex === "#") {
+    local.mode = "hash";
+  }
+
+  if (!parseInt(local.activeIndex)) {
+    if (local.mode === "hash") {
+      local.activeIndex = location.hash.substring(1);
+      if (!parseInt(local.activeIndex)) {
+        local.activeIndex = "0";
+      }
+    } else {
+      local.activeIndex = "0";
+    }
   }
 
   return (
     <div className="c-flex c-flex-1 c-w-full c-flex-col c-items-stretch">
       <Tabs
-        value={local.active}
+        value={local.activeIndex}
         className={cx(
           css`
             padding: 0;
@@ -84,7 +98,7 @@ export const Tab: FC<{
               <TabsTrigger
                 value={idx + ""}
                 onClick={() => {
-                  local.active = idx.toString();
+                  local.activeIndex = idx.toString();
                   local.render();
                   if (e.navigate) {
                     navigate(e.navigate);
@@ -108,7 +122,7 @@ export const Tab: FC<{
                     "c-p-1 c-h-10 c-flex c-items-center",
                     e.width ? "" : " c-flex-1 ",
                     e.count ? " c-justify-between" : "",
-                    local.active === idx.toString()
+                    local.activeIndex === idx.toString()
                       ? css`
                           border-bottom: 2px solid
                             ${e.color ? e.color : "#3c82f6"};
@@ -116,7 +130,9 @@ export const Tab: FC<{
                       : "border-b-transparent"
                   )}
                 >
-                  <div className={cx("c-mr-1 c-flex-1 c-px-1 c-flex")}>{e.label}</div>
+                  <div className={cx("c-mr-1 c-flex-1 c-px-1 c-flex")}>
+                    {e.label}
+                  </div>
                   {has_count && (
                     <div
                       className={cx(
@@ -138,7 +154,7 @@ export const Tab: FC<{
         </TabsList>
       </Tabs>
       <div className="c-flex-1 c-flex c-flex-col">
-        <PassProp activeIndex={parseInt(local.active)}>{body}</PassProp>
+        <PassProp activeIndex={parseInt(local.activeIndex)}>{body}</PassProp>
       </div>
     </div>
   );
diff --git a/comps/form/Field.tsx b/comps/form/Field.tsx
index 71a186a..d0f94d4 100755
--- a/comps/form/Field.tsx
+++ b/comps/form/Field.tsx
@@ -83,6 +83,7 @@ export const Field: FC<{
           local.render();
           (async () => {
             const res = await slider_options();
+
             local.slider.opt = res;
             local.render();
           })();
@@ -144,7 +145,7 @@ export const Field: FC<{
                         min={local.slider.opt.min.value}
                         max={local.slider.opt.max.value}
                       />
-                      <div className="c-w-full c-bg-slate-200 c-mx-auto c-text-center">
+                      <div className="c-w-full c-mx-auto c-text-center">
                         {local.slider.value}
                       </div>
                     </div>
diff --git a/comps/form/InputMoney/index.tsx b/comps/form/InputMoney/index.tsx
index 429321e..98fe564 100755
--- a/comps/form/InputMoney/index.tsx
+++ b/comps/form/InputMoney/index.tsx
@@ -44,13 +44,11 @@ export const InputMoney: FC<{
 };
 
 export const formatMoney = (num: any) => {
-  // add comma
   if (!!num) {
     let str = num;
     if (typeof num === "number") str = num.toString();
     if (typeof str === "string")
       return str.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
-
-    return "";
   }
+  return "-";
 };
diff --git a/comps/form/Slider/types.ts b/comps/form/Slider/types.ts
old mode 100644
new mode 100755
diff --git a/comps/ui/button.tsx b/comps/ui/button.tsx
index 543aee4..29db581 100755
--- a/comps/ui/button.tsx
+++ b/comps/ui/button.tsx
@@ -46,7 +46,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       <Comp
         className={cn(
           buttonVariants({ variant, size, className }),
-          `btn-${variant || "default"} c-transition-all c-duration-300`
+          `btn-${variant || "default"} btn c-transition-all c-duration-300`
         )}
         ref={ref}
         {...props}
diff --git a/comps/ui/slider.tsx b/comps/ui/slider.tsx
old mode 100644
new mode 100755
diff --git a/exports.tsx b/exports.tsx
old mode 100644
new mode 100755
diff --git a/utils/date.ts b/utils/date.ts
old mode 100644
new mode 100755
diff --git a/utils/globals.d.ts b/utils/globals.d.ts
index 49af09a..20d6787 100755
--- a/utils/globals.d.ts
+++ b/utils/globals.d.ts
@@ -1,4 +1,3 @@
-declare var db: any;
 declare var isEditor: boolean;
 declare var isMobile: boolean;
 declare var isDesktop: boolean;
diff --git a/utils/init.ts b/utils/init.ts
index 4f07c4f..de1db81 100755
--- a/utils/init.ts
+++ b/utils/init.ts
@@ -5,7 +5,7 @@ if (typeof isEditor === "undefined") {
     location.pathname.startsWith("/ed")
   ) {
     w.isEditor = true;
-  } else {
+  } else { 
     w.isEditor = false;
   }
 }