QR

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

@@ -4,7 +4,12 @@ import React, { useCallback, useContext } from "react";
 
 import { BG_COLOR, TEXT_COLOR } from "../../constants";
 import DatepickerContext from "../../contexts/DatepickerContext";
-import { formatDate, nextMonth, previousMonth, classNames as cn } from "../../helpers";
+import {
+  formatDate,
+  nextMonth,
+  previousMonth,
+  classNames as cn,
+} from "../../helpers";
 import { Period } from "../../types";
 
 dayjs.extend(isBetween);
@@ -21,13 +26,15 @@ interface Props {
   onClickPreviousDays: (day: number) => void;
   onClickDay: (day: number) => void;
   onClickNextDays: (day: number) => void;
+  onIcon?: (day: number, date: Date) => any;
 }
 
 const Days: React.FC<Props> = ({
   calendarData,
   onClickPreviousDays,
   onClickDay,
-    onClickNextDays
+  onClickNextDays,
+  onIcon,
 }) => {
   // Contexts
   const {
@@ -38,17 +45,19 @@ const Days: React.FC<Props> = ({
     changeDayHover,
     minDate,
     maxDate,
-        disabledDates
+    disabledDates,
   } = useContext(DatepickerContext);
 
   // Functions
   const currentDateClass = useCallback(
     (item: number) => {
-            const itemDate = `${calendarData.date.year()}-${calendarData.date.month() + 1}-${
+      const itemDate = `${calendarData.date.year()}-${
-                item >= 10 ? item : "0" + item
+        calendarData.date.month() + 1
-            }`;
+      }-${item >= 10 ? item : "0" + item}`;
       if (formatDate(dayjs()) === formatDate(dayjs(itemDate)))
-                return TEXT_COLOR["500"][primaryColor as keyof (typeof TEXT_COLOR)["500"]];
+        return TEXT_COLOR["500"][
+          primaryColor as keyof (typeof TEXT_COLOR)["500"]
+        ];
       return "";
     },
     [calendarData.date, primaryColor]
@@ -56,19 +65,28 @@ const Days: React.FC<Props> = ({
 
   const activeDateData = useCallback(
     (day: number) => {
-            const fullDay = `${calendarData.date.year()}-${calendarData.date.month() + 1}-${day}`;
+      const fullDay = `${calendarData.date.year()}-${
+        calendarData.date.month() + 1
+      }-${day}`;
       let className = "";
 
-            if (dayjs(fullDay).isSame(period.start) && dayjs(fullDay).isSame(period.end)) {
+      if (
+        dayjs(fullDay).isSame(period.start) &&
+        dayjs(fullDay).isSame(period.end)
+      ) {
         className = ` ${BG_COLOR["500"][primaryColor]} c-text-white c-font-medium rounded-full`;
       } else if (dayjs(fullDay).isSame(period.start)) {
-                className = ` ${BG_COLOR["500"][primaryColor]} c-text-white c-font-medium ${
+        className = ` ${
+          BG_COLOR["500"][primaryColor]
+        } c-text-white c-font-medium ${
           dayjs(fullDay).isSame(dayHover) && !period.end
             ? "c-rounded-full"
             : "c-rounded-l-full"
         }`;
       } else if (dayjs(fullDay).isSame(period.end)) {
-                className = ` ${BG_COLOR["500"][primaryColor]} c-text-white c-font-medium ${
+        className = ` ${
+          BG_COLOR["500"][primaryColor]
+        } c-text-white c-font-medium ${
           dayjs(fullDay).isSame(dayHover) && !period.start
             ? "c-rounded-full"
             : "c-rounded-r-full"
@@ -76,8 +94,10 @@ const Days: React.FC<Props> = ({
       }
 
       return {
-                active: dayjs(fullDay).isSame(period.start) || dayjs(fullDay).isSame(period.end),
+        active:
-                className: className
+          dayjs(fullDay).isSame(period.start) ||
+          dayjs(fullDay).isSame(period.end),
+        className: className,
       };
     },
     [calendarData.date, dayHover, period.end, period.start, primaryColor]
@@ -86,9 +106,9 @@ const Days: React.FC<Props> = ({
   const hoverClassByDay = useCallback(
     (day: number) => {
       let className = currentDateClass(day);
-            const fullDay = `${calendarData.date.year()}-${calendarData.date.month() + 1}-${
+      const fullDay = `${calendarData.date.year()}-${
-                day >= 10 ? day : "0" + day
+        calendarData.date.month() + 1
-            }`;
+      }-${day >= 10 ? day : "0" + day}`;
 
       if (period.start && period.end) {
         if (dayjs(fullDay).isBetween(period.start, period.end, "day", "[)")) {
@@ -102,13 +122,19 @@ const Days: React.FC<Props> = ({
         return className;
       }
 
-            if (period.start && dayjs(fullDay).isBetween(period.start, dayHover, "day", "[)")) {
+      if (
+        period.start &&
+        dayjs(fullDay).isBetween(period.start, dayHover, "day", "[)")
+      ) {
         className = ` ${BG_COLOR["100"][primaryColor]} ${currentDateClass(
           day
         )} dark:bg-white/10`;
       }
 
-            if (period.end && dayjs(fullDay).isBetween(dayHover, period.end, "day", "[)")) {
+      if (
+        period.end &&
+        dayjs(fullDay).isBetween(dayHover, period.end, "day", "[)")
+      ) {
         className = ` ${BG_COLOR["100"][primaryColor]} ${currentDateClass(
           day
         )} dark:bg-white/10`;
@@ -123,7 +149,14 @@ const Days: React.FC<Props> = ({
 
       return className;
     },
-        [calendarData.date, currentDateClass, dayHover, period.end, period.start, primaryColor]
+    [
+      calendarData.date,
+      currentDateClass,
+      dayHover,
+      period.end,
+      period.start,
+      primaryColor,
+    ]
   );
 
   const isDateTooEarly = useCallback(
@@ -134,7 +167,7 @@ const Days: React.FC<Props> = ({
       const object = {
         previous: previousMonth(calendarData.date),
         current: calendarData.date,
-                next: nextMonth(calendarData.date)
+        next: nextMonth(calendarData.date),
       };
       const newDate = object[type as keyof typeof object];
       const formattedDate = newDate.set("date", day);
@@ -153,7 +186,7 @@ const Days: React.FC<Props> = ({
       const object = {
         previous: previousMonth(calendarData.date),
         current: calendarData.date,
-                next: nextMonth(calendarData.date)
+        next: nextMonth(calendarData.date),
       };
       const newDate = object[type as keyof typeof object];
       const formattedDate = newDate.set("date", day);
@@ -172,19 +205,22 @@ const Days: React.FC<Props> = ({
       const object = {
         previous: previousMonth(calendarData.date),
         current: calendarData.date,
-                next: nextMonth(calendarData.date)
+        next: nextMonth(calendarData.date),
       };
       const newDate = object[type as keyof typeof object];
       const formattedDate = `${newDate.year()}-${newDate.month() + 1}-${
         day >= 10 ? day : "0" + day
       }`;
 
-            if (!disabledDates || (Array.isArray(disabledDates) && !disabledDates.length)) {
+      if (
+        !disabledDates ||
+        (Array.isArray(disabledDates) && !disabledDates.length)
+      ) {
         return false;
       }
 
       let matchingCount = 0;
-            disabledDates?.forEach(dateRange => {
+      disabledDates?.forEach((dateRange) => {
         if (
           dayjs(formattedDate).isAfter(dateRange.startDate) &&
           dayjs(formattedDate).isBefore(dateRange.endDate)
@@ -205,7 +241,8 @@ const Days: React.FC<Props> = ({
 
   const buttonClass = useCallback(
     (day: number, type: "current" | "next" | "previous") => {
-            const baseClass = "c-flex c-items-center c-justify-center c-w-12 c-h-12 lg:c-w-10 lg:c-h-10";
+      const baseClass =
+        "c-flex c-items-center c-justify-center c-w-12 c-h-12 lg:c-w-10 lg:c-h-10 c-relative";
       if (type === "current") {
         return cn(
           baseClass,
@@ -215,7 +252,11 @@ const Days: React.FC<Props> = ({
           isDateDisabled(day, type) && "c-text-gray-400 c-cursor-not-allowed"
         );
       }
-            return cn(baseClass, isDateDisabled(day, type) && "c-cursor-not-allowed", "c-text-gray-400");
+      return cn(
+        baseClass,
+        isDateDisabled(day, type) && "c-cursor-not-allowed",
+        "c-text-gray-400"
+      );
     },
     [activeDateData, hoverClassByDay, isDateDisabled]
   );
@@ -242,7 +283,7 @@ const Days: React.FC<Props> = ({
     return {
       previous: previousMonth(calendarData.date),
       current: calendarData.date,
-            next: nextMonth(calendarData.date)
+      next: nextMonth(calendarData.date),
     };
   }, [calendarData.date]);
 
@@ -262,7 +303,7 @@ const Days: React.FC<Props> = ({
           if (!checkIfHoverPeriodContainsDisabledPeriod(hoverPeriod)) {
             changePeriod({
               start: null,
-                            end: period.start
+              end: period.start,
             });
           }
         }
@@ -279,7 +320,7 @@ const Days: React.FC<Props> = ({
           if (!checkIfHoverPeriodContainsDisabledPeriod(hoverPeriod)) {
             changePeriod({
               start: period.end,
-                            end: null
+              end: null,
             });
           }
         }
@@ -293,7 +334,7 @@ const Days: React.FC<Props> = ({
       changePeriod,
       checkIfHoverPeriodContainsDisabledPeriod,
       getMetaData,
-            period
+      period,
     ]
   );
 
@@ -339,10 +380,28 @@ const Days: React.FC<Props> = ({
       onClickNextDays,
       onClickPreviousDays,
       period.end,
-            period.start
+      period.start,
     ]
   );
-
+  const load_marker = (day: number, type: string) => {
+    let fullDay = `${calendarData.date.year()}-${
+      calendarData.date.month() + 1
+    }-${day >= 10 ? day : "0" + day}`;
+    if (type === "previous") {
+      const newDate = previousMonth(calendarData.date);
+      fullDay = `${newDate.year()}-${newDate.month() + 1}-${
+        day >= 10 ? day : "0" + day
+      }`;
+    }
+    if (type === "next") {
+      const newDate = nextMonth(calendarData.date);
+      fullDay = `${newDate.year()}-${newDate.month() + 1}-${
+        day >= 10 ? day : "0" + day
+      }`;
+    }
+    const res = new Date(fullDay);
+    return typeof onIcon === "function" ? onIcon(day, res) : null;
+  };
   return (
     <div className="c-grid c-grid-cols-7 c-gap-y-0.5 c-my-1">
       {calendarData.days.previous.map((item, index) => (
@@ -356,7 +415,10 @@ const Days: React.FC<Props> = ({
             hoverDay(item, "previous");
           }}
         >
+          <span className="c-relative">
             {item}
+            <span className="c-relative">{load_marker(item, "previous")}</span>
+          </span>
         </button>
       ))}
 
@@ -365,13 +427,19 @@ const Days: React.FC<Props> = ({
           type="button"
           key={index}
           disabled={isDateDisabled(item, "current")}
-                    className={cx(`${buttonClass(item, "current")}`, item === 1 && "highlight")}
+          className={cx(
+            `${buttonClass(item, "current")}`,
+            item === 1 && "highlight"
+          )}
           onClick={() => handleClickDay(item, "current")}
           onMouseOver={() => {
             hoverDay(item, "current");
           }}
         >
+          <span className="c-relative">
             {item}
+            <span className="c-relative">{load_marker(item, "current")}</span>
+          </span>
         </button>
       ))}
 
@@ -386,7 +454,10 @@ const Days: React.FC<Props> = ({
             hoverDay(item, "next");
           }}
         >
+          <span className="c-relative">
             {item}
+            <span className="c-relative">{load_marker(item, "next")}</span>
+          </span>
         </button>
       ))}
     </div>

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

@@ -44,6 +44,7 @@ interface Props {
   changeMonth: (month: number) => void;
   changeYear: (year: number) => void;
   mode?: "monthly" | "daily";
+  onMark?: (day: number, date: Date) => any;
 }
 
 const Calendar: React.FC<Props> = ({
@@ -54,6 +55,7 @@ const Calendar: React.FC<Props> = ({
   onClickNext,
   changeMonth,
   changeYear,
+  onMark,
   mode = "daily",
 }) => {
   // Contexts
@@ -366,6 +368,21 @@ const Calendar: React.FC<Props> = ({
               onClickPreviousDays={clickPreviousDays}
               onClickDay={clickDay}
               onClickNextDays={clickNextDays}
+              onIcon={(day, date) => {
+                if(typeof onMark === "function"){
+                  return onMark(day, date)
+                }
+                return <></>
+                if (new Date().getDate() === day)
+                  return (
+                    <div className="c-absolute c-inset-y-0 c-left-0 -c-translate-y-1/2 -c-translate-x-1/2">
+                      <div className="c-w-full c-h-full c-flex c-flex-row c-items-center c-justif-center c-px-0.5">
+                       !
+                      </div>
+                    </div>
+                  );
+                return <></>
+              }}
             />
           </>
         )}

comps/custom/Datepicker/types/index.ts

@@ -82,7 +82,10 @@ export interface DatepickerType {
     disabledDates?: DateRangeType[] | null;
     startWeekOn?: string | null;
     popoverDirection?: PopoverDirectionType;
-    mode?: "daily" | "monthly"
+    mode?: "daily" | "monthly";
+    onMark?: (day: number, date: Date) => any;
+    onLoad?: () => Promise<void>
+
 }
 
 export type ColorKeys = (typeof COLORS)[number]; // "blue" | "orange"

comps/custom/QrLabel.tsx

@@ -0,0 +1,18 @@
+import { FC } from "react";
+import QRCode from 'react-qr-code';
+
+export const QrLabel: FC<{
+    value: string,
+    bgcolor: string,
+    fgcolor: string,
+    size: number
+}> = ({ value, bgcolor, fgcolor, size }) => {
+    return (
+        <div>
+            <QRCode value={value} size={size}
+                bgColor={bgcolor}
+                fgColor={fgcolor}
+                level={"L"} />
+        </div>
+    )
+}

comps/custom/QrReader.tsx

@@ -0,0 +1,78 @@
+import { useEffect, useRef, useState } from "react";
+import QrScanner from "qr-scanner";
+
+export const QrReader = () => {
+    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>("");
+
+    // Success
+    const onScanSuccess = (result: QrScanner.ScanResult) => {
+        console.log(result);
+        setScannedResult(result?.data);
+    };
+
+    // Fail
+    const onScanFail = (err: string | Error) => {
+        console.log(err);
+    };
+
+    useEffect(() => {
+        if (videoEl?.current && !scanner.current) {
+            scanner.current = new QrScanner(videoEl?.current, onScanSuccess, {
+                onDecodeError: onScanFail,
+                preferredCamera: "environment",
+                highlightScanRegion: true,
+                highlightCodeOutline: true,
+                overlay: qrBoxEl?.current || undefined,
+            });
+
+            scanner?.current
+                ?.start()
+                .then(() => setQrOn(true))
+                .catch((err) => {
+                    if (err) setQrOn(false);
+                });
+        }
+
+        return () => {
+            if (!videoEl?.current) {
+                scanner?.current?.stop();
+            }
+        };
+    }, []);
+
+    useEffect(() => {
+        if (!qrOn)
+            alert(
+                "Camera is blocked or not accessible. Please allow camera in your browser permissions and Reload."
+            );
+    }, [qrOn]);
+
+    return (
+        <div className="qr-reader">
+            {/* QR */}
+            <video ref={videoEl}></video>
+            <div ref={qrBoxEl} className="qr-box">
+               
+            </div>
+
+            {/* Show Data Result if scan is success */}
+            {scannedResult && (
+                <p
+                    style={{
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        zIndex: 99999,
+                        color: "white",
+                    }}
+                >
+                    Scanned Result: {scannedResult}
+                </p>
+            )}
+        </div>
+    );
+};