@wakastellar/ui 3.1.0 → 3.3.0

package/src/components/waka-step-permission-matrix/index.tsx

@@ -0,0 +1,65 @@
+"use client"
+
+import * as React from "react"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../tooltip"
+
+export interface PermissionAction {
+  key: string
+  label: string
+}
+
+export interface StepPermissionMatrixProps {
+  roles: string[]
+  actions: PermissionAction[]
+  value: Record<string, string[]>
+  onChange: (role: string, action: string, enabled: boolean) => void
+}
+
+function StepPermissionMatrix({ roles, actions, value, onChange }: StepPermissionMatrixProps) {
+  return (
+    <TooltipProvider>
+      <div className="overflow-x-auto">
+        <table className="w-full text-xs">
+          <thead>
+            <tr className="border-b">
+              <th className="text-left p-2 font-medium text-muted-foreground sticky left-0 bg-background">Role</th>
+              {actions.map((a) => (
+                <th key={a.key} className="p-2 text-center">
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <span className="font-medium cursor-help">{a.key.replace("_", " ").slice(0, 8)}</span>
+                    </TooltipTrigger>
+                    <TooltipContent>{a.label}</TooltipContent>
+                  </Tooltip>
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {roles.map((role) => (
+              <tr key={role} className="border-b hover:bg-muted/30">
+                <td className="p-2 font-medium sticky left-0 bg-background">{role}</td>
+                {actions.map((a) => {
+                  const checked = (value[role] ?? []).includes(a.key)
+                  return (
+                    <td key={a.key} className="p-2 text-center">
+                      <input
+                        type="checkbox"
+                        checked={checked}
+                        onChange={(e) => onChange(role, a.key, e.target.checked)}
+                        className="rounded border-input"
+                        aria-label={`${role} — ${a.label}`}
+                      />
+                    </td>
+                  )
+                })}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </TooltipProvider>
+  )
+}
+
+export { StepPermissionMatrix }

package/src/components/waka-time-entry-dialog/index.tsx

@@ -0,0 +1,131 @@
+"use client"
+
+import * as React from "react"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "../dialog"
+import { ActorBadge } from "../waka-actor-badge"
+import { formatMinutes } from "../waka-hour-balance-badge"
+
+export interface TimeActor {
+  id: string
+  name: string
+  role: string
+  totalMinutes: number
+}
+
+export interface TimeEntryDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  actors: TimeActor[]
+  onSubmit: (actorId: string, minutes: number, comment: string, isBillable: boolean) => void
+  showBillable?: boolean
+  isLoading?: boolean
+}
+
+function TimeEntryDialog({ open, onOpenChange, actors, onSubmit, showBillable, isLoading }: TimeEntryDialogProps) {
+  const [selectedActor, setSelectedActor] = React.useState<string | null>(null)
+  const [hours, setHours] = React.useState(0)
+  const [mins, setMins] = React.useState(0)
+  const [comment, setComment] = React.useState("")
+  const [billable, setBillable] = React.useState(false)
+
+  const resetForm = () => {
+    setSelectedActor(null)
+    setHours(0)
+    setMins(0)
+    setComment("")
+    setBillable(false)
+  }
+
+  const handleSubmit = () => {
+    if (!selectedActor) return
+    const totalMins = hours * 60 + mins
+    if (totalMins < 15) return
+    onSubmit(selectedActor, totalMins, comment, billable)
+    resetForm()
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Saisie de temps</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-3 max-h-[300px] overflow-y-auto">
+          {actors.map((a) => (
+            <div
+              key={a.id}
+              className={`flex items-center justify-between rounded-lg border p-2.5 cursor-pointer transition-colors ${
+                selectedActor === a.id ? "border-primary bg-primary/5" : "hover:bg-muted/50"
+              }`}
+              onClick={() => setSelectedActor(a.id)}
+            >
+              <ActorBadge role={a.role} name={a.name} />
+              <span className="text-sm text-muted-foreground tabular-nums">{formatMinutes(a.totalMinutes)}</span>
+            </div>
+          ))}
+        </div>
+
+        {selectedActor && (
+          <div className="space-y-3 border-t pt-3">
+            <div className="flex items-center gap-3">
+              <div className="flex items-center gap-1.5">
+                <label className="text-sm font-medium">Heures</label>
+                <input
+                  type="number"
+                  min={0}
+                  max={99}
+                  value={hours}
+                  onChange={(e) => setHours(Math.max(0, parseInt(e.target.value) || 0))}
+                  className="w-16 rounded-md border bg-background px-2 py-1.5 text-sm text-center"
+                />
+              </div>
+              <div className="flex items-center gap-1.5">
+                <label className="text-sm font-medium">Minutes</label>
+                <select
+                  value={mins}
+                  onChange={(e) => setMins(parseInt(e.target.value))}
+                  className="rounded-md border bg-background px-2 py-1.5 text-sm"
+                >
+                  <option value={0}>00</option>
+                  <option value={15}>15</option>
+                  <option value={30}>30</option>
+                  <option value={45}>45</option>
+                </select>
+              </div>
+            </div>
+            <input
+              value={comment}
+              onChange={(e) => setComment(e.target.value)}
+              placeholder="Commentaire (optionnel)"
+              className="w-full rounded-md border bg-background px-3 py-1.5 text-sm"
+            />
+            {showBillable && (
+              <label className="flex items-center gap-2 text-sm">
+                <input
+                  type="checkbox"
+                  checked={billable}
+                  onChange={(e) => setBillable(e.target.checked)}
+                  className="rounded border-input"
+                />
+                <span className="font-medium text-amber-600">Heures facturables</span>
+              </label>
+            )}
+          </div>
+        )}
+
+        <DialogFooter>
+          <button
+            onClick={handleSubmit}
+            disabled={!selectedActor || (hours * 60 + mins < 15) || isLoading}
+            className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
+          >
+            Ajouter
+          </button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export { TimeEntryDialog }

package/src/components/waka-time-tracking-flyover/index.tsx

@@ -0,0 +1,41 @@
+"use client"
+
+import * as React from "react"
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "../hover-card"
+import { formatMinutes } from "../waka-hour-balance-badge"
+
+export interface TimeTrackingEntry {
+  role: string
+  totalMinutes: number
+}
+
+export interface TimeTrackingFlyoverProps {
+  entries: TimeTrackingEntry[]
+  children: React.ReactNode
+}
+
+function TimeTrackingFlyover({ entries, children }: TimeTrackingFlyoverProps) {
+  const total = entries.reduce((sum, e) => sum + e.totalMinutes, 0)
+
+  return (
+    <HoverCard openDelay={200}>
+      <HoverCardTrigger asChild>{children}</HoverCardTrigger>
+      <HoverCardContent className="w-52 p-3" side="top">
+        <div className="space-y-1 text-xs">
+          {entries.map((e) => (
+            <div key={e.role} className="flex justify-between">
+              <span className="font-medium">{e.role}</span>
+              <span className="tabular-nums text-muted-foreground">{formatMinutes(e.totalMinutes)}</span>
+            </div>
+          ))}
+          <div className="border-t pt-1 flex justify-between font-medium">
+            <span>Total</span>
+            <span className="tabular-nums">{formatMinutes(total)}</span>
+          </div>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  )
+}
+
+export { TimeTrackingFlyover }

package/dist/cn-B-fTneHh.js

@@ -1 +0,0 @@
-"use strict";const u=require("clsx"),l=require("tailwind-merge"),o=require("class-variance-authority");function s(...t){return l.twMerge(u.clsx(...t))}s.variants=function(t){const r={variants:t.variants??{},defaultVariants:t.defaultVariants},a=o.cva(t.base??"",r);return e=>{const{class:n,className:c,...i}=e??{};return s(a(i),n,c)}};const d=(...t)=>s(t);exports.cn=d;exports.tweak=s;

package/dist/cn-DzRe1GWm.mjs

@@ -1,21 +0,0 @@
-import { clsx as i } from "clsx";
-import { twMerge as m } from "tailwind-merge";
-import { cva as u } from "class-variance-authority";
-function r(...t) {
-  return m(i(...t));
-}
-r.variants = function(t) {
-  const a = {
-    variants: t.variants ?? {},
-    defaultVariants: t.defaultVariants
-  }, s = u(t.base ?? "", a);
-  return (n) => {
-    const { class: e, className: c, ...o } = n ?? {};
-    return r(s(o), e, c);
-  };
-};
-const v = (...t) => r(t);
-export {
-  v as c,
-  r as t
-};

package/dist/components/command/index.d.ts

@@ -1,51 +0,0 @@
-import { DialogProps } from '@radix-ui/react-dialog';
-import * as React from "react";
-declare const Command: React.ForwardRefExoticComponent<Omit<{
-    children?: React.ReactNode;
-} & React.HTMLAttributes<HTMLDivElement> & {
-    label?: string;
-    shouldFilter?: boolean;
-    filter?: (value: string, search: string) => number;
-    defaultValue?: string;
-    value?: string;
-    onValueChange?: (value: string) => void;
-    loop?: boolean;
-    vimBindings?: boolean;
-} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-interface CommandDialogProps extends DialogProps {
-    children?: React.ReactNode;
-}
-declare const CommandDialog: ({ children, ...props }: CommandDialogProps) => import("react/jsx-runtime").JSX.Element;
-declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "type"> & {
-    value?: string;
-    onValueChange?: (search: string) => void;
-} & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
-declare const CommandList: React.ForwardRefExoticComponent<Omit<{
-    children?: React.ReactNode;
-} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
-    children?: React.ReactNode;
-} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
-    children?: React.ReactNode;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "value" | "heading"> & {
-    heading?: React.ReactNode;
-    value?: string;
-    forceMount?: boolean;
-} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement> & {
-    alwaysRender?: boolean;
-} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
-    children?: React.ReactNode;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect" | "disabled" | "value"> & {
-    disabled?: boolean;
-    onSelect?: (value: string) => void;
-    value?: string;
-    forceMount?: boolean;
-} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const CommandShortcut: {
-    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };