Merge pull request #401 from Leo-Corporation/vNext

Version 1.8.0.2405

Author: lpeyr

components/history-card.tsx

@@ -147,8 +147,8 @@ export default function HistoryItem(props: {
                   <DialogTrigger>
                     <Image
                       width={150}
-                      height={150}
-                      className="max-w-[150px]"
+                      height={isQrCode(props.item.bcid) ? 150 : 65}
+                      className={`max-w-[150px] object-contain ${isQrCode(props.item.bcid) ? "" : "h-[65px]"}`}
                       src={url}
                       alt={props.item.text}
                     />
@@ -188,7 +188,7 @@ export default function HistoryItem(props: {
                     <Image
                       width={150}
                       height={150}
-                      className="max-w-[150px]"
+                      className={`max-w-[150px] object-contain ${isQrCode(props.item.bcid) ? "" : "h-[65px]"}`}
                       src={url}
                       alt={props.item.text}
                     />

components/ui/calendar.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import * as React from "react";
+import { DayPicker } from "react-day-picker";
+
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+import {
+  ChevronLeft16Regular,
+  ChevronRight16Regular,
+} from "@fluentui/react-icons";
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 flex justify-center opacity-50 hover:opacity-100",
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell:
+          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-9 w-9 p-0 flex justify-center font-normal hover:bg-slate-100 dark:hover:bg-slate-800 aria-selected:bg-accent-color aria-selected:text-white aria-selected:opacity-100",
+        ),
+        day_range_end: "day-range-end",
+        day_selected: "bg-primary text-white hover:bg-primary hover:text-white",
+        day_today: "bg-accent-color/20 text-accent-foreground",
+        day_outside:
+          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle:
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ ...props }) => (
+          <ChevronLeft16Regular className="h-4 w-4" />
+        ),
+        IconRight: ({ ...props }) => (
+          <ChevronRight16Regular className="h-4 w-4" />
+        ),
+      }}
+      {...props}
+    />
+  );
+}
+Calendar.displayName = "Calendar";
+
+export { Calendar };

components/ui/command.tsx

@@ -120,7 +120,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-md border border-transparent px-2 py-1.5 text-sm outline-none transition-all duration-200 hover:border-slate-200 hover:bg-slate-200 aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 dark:hover:border-slate-600 dark:hover:bg-slate-800",
       className,
     )}
     {...props}

components/ui/date-picker.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import * as React from "react";
+import { format } from "date-fns";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Calendar16Regular } from "@fluentui/react-icons";
+import useTranslation from "next-translate/useTranslation";
+
+export function DatePicker(props: { setDate: Function }) {
+  const [date, setDate] = React.useState<Date>();
+  const { t } = useTranslation("common");
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant={"outline"}
+          className={cn(
+            "justify-start border border-slate-300 text-left font-normal dark:border-slate-600",
+            !date && "text-muted-foreground",
+          )}
+        >
+          <Calendar16Regular className="mr-2 h-4 w-4" />
+          {date ? format(date, "PPP") : <span>{t("select-date")}</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0 dark:border-slate-600">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={(d) => {
+            setDate(d);
+            props.setDate(`${formatDate(d)}`);
+          }}
+          initialFocus
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}
+function formatDate(date: Date | undefined) {
+  if (!date) return "";
+  var year = date.getFullYear();
+  var month = (1 + date.getMonth()).toString().padStart(2, "0");
+  var day = date.getDate().toString().padStart(2, "0");
+
+  return year + month + day;
+}

components/ui/select.tsx

@@ -43,7 +43,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-700 dark:bg-slate-800",
+        "relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-700 dark:bg-slate-900",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className,
@@ -84,7 +84,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm bg-white py-1.5 pl-8 pr-2 text-sm outline-none hover:bg-white focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:bg-slate-800 dark:hover:bg-slate-700",
+      "relative flex w-full cursor-default select-none items-center rounded-md border border-transparent bg-white py-1.5 pl-8 pr-2 text-sm outline-none transition-all duration-200 hover:border-slate-200 hover:bg-slate-200 focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:bg-slate-900 dark:hover:border-slate-600 dark:hover:bg-slate-800",
       className,
     )}
     {...props}

lib/barcodeTypes.ts

@@ -35,6 +35,10 @@ export const barcodeTypes = [
     value: "code93ext",
     label: "Code93 Extended",
   },
+  {
+    value: "datamatrix",
+    label: "DataMatrix",
+  },
   {
     value: "ean13",
     label: "EAN-13",

lib/calendar-event.ts

@@ -0,0 +1,7 @@
+export interface CalendarEvent {
+  title: string;
+  description: string;
+  location: string;
+  start: string; // Use YYYYMMDD format
+  end: string; // Use YYYYMMDD format
+}

locales/en/common.json

@@ -105,5 +105,15 @@
   "firstname": "First name",
   "lastname": "Last name",
   "name": "Name",
-  "contact": "Contact"
+  "contact": "Contact",
+  "normal": "Normal",
+  "inverted": "Inverted",
+  "rotation": "Rotation",
+  "event": "Event",
+  "description": "Description",
+  "start-date": "Start date",
+  "end-date": "End date",
+  "event-title": "Event title",
+  "location": "Location",
+  "select-date": "Pick a date"
 }

locales/fr/common.json

@@ -105,5 +105,15 @@
   "firstname": "Prénom",
   "lastname": "Nom de famille",
   "name": "Nom",
-  "contact": "Contact"
+  "contact": "Contact",
+  "normal": "Normal",
+  "inverted": "Inversé",
+  "rotation": "Rotation",
+  "event": "Evènement",
+  "description": "Description",
+  "start-date": "Date de début",
+  "end-date": "Date de fin",
+  "event-title": "Titre de l'événement",
+  "location": "Emplacement",
+  "select-date": "Choisir une date"
 }