@tuturuuu/ui 0.0.4

package/src/components/ui/custom/report-preview.tsx

@@ -0,0 +1,175 @@
+import { Separator } from '../separator';
+import { ReactNode } from 'react';
+
+export default function ReportPreview({
+  t,
+  lang,
+  data,
+  parseDynamicText,
+  getConfig,
+}: {
+  lang: string;
+  data?: {
+    title: string;
+    content: string;
+    score: string;
+    feedback: string;
+  };
+  t: any;
+  // eslint-disable-next-line no-unused-vars
+  parseDynamicText: (text?: string | null) => ReactNode;
+  // eslint-disable-next-line no-unused-vars
+  getConfig: (id: string) => string | null | undefined;
+}) {
+  return (
+    <div className="overflow-x-auto xl:flex-none">
+      <div
+        id="printable-area"
+        className="h-fit w-full flex-none rounded-xl dark:bg-foreground/10 print:p-4"
+      >
+        <div className="h-full rounded-lg border p-4 text-foreground md:p-12">
+          <div className="flex flex-wrap items-center justify-between gap-8">
+            {getConfig('BRAND_LOGO_URL') && (
+              <img
+                src={getConfig('BRAND_LOGO_URL')!}
+                alt="logo"
+                // onLoad={() => setIsLogoLoaded(true)}
+              />
+            )}
+
+            <div className="text-center">
+              {getConfig('BRAND_NAME') && (
+                <div className="text-center text-lg font-bold">
+                  {getConfig('BRAND_NAME')}
+                </div>
+              )}
+
+              {getConfig('BRAND_LOCATION') && (
+                <div className="text-center font-semibold">
+                  {getConfig('BRAND_LOCATION')}
+                </div>
+              )}
+
+              {getConfig('BRAND_PHONE_NUMBER') && (
+                <div className="flex flex-wrap items-center justify-center gap-2 text-center text-sm font-semibold break-keep print:gap-2">
+                  {getConfig('BRAND_PHONE_NUMBER')}
+                </div>
+              )}
+            </div>
+          </div>
+
+          {(!!getConfig('BRAND_NAME') ||
+            !!getConfig('BRAND_LOCATION') ||
+            !!getConfig('BRAND_PHONE_NUMBER')) && (
+            <Separator className="my-4" />
+          )}
+
+          <div className="text-center text-lg font-bold text-foreground uppercase">
+            {getConfig('REPORT_TITLE_PREFIX')}{' '}
+            {new Date().toLocaleDateString(lang, {
+              month: 'long',
+            })}
+            /
+            {new Date().toLocaleDateString(lang, {
+              year: 'numeric',
+            })}{' '}
+            {getConfig('REPORT_TITLE_SUFFIX')}
+          </div>
+
+          {getConfig('REPORT_INTRO') && (
+            <div className="mt-2 text-left text-sm whitespace-pre-wrap">
+              {parseDynamicText(getConfig('REPORT_INTRO'))}
+            </div>
+          )}
+
+          {(!!getConfig('REPORT_CONTENT_TEXT') ||
+            !!getConfig('REPORT_SCORE_TEXT') ||
+            !!getConfig('REPORT_FEEDBACK_TEXT')) && (
+            <div className="my-4 flex flex-col justify-stretch rounded border-2 border-foreground/50 text-sm md:flex-row">
+              {getConfig('REPORT_CONTENT_TEXT') && (
+                <div className="md:flex-[2]">
+                  <div className="flex h-16 items-center justify-center p-2 text-center text-sm font-bold whitespace-pre-wrap">
+                    {getConfig('REPORT_CONTENT_TEXT')}
+                  </div>
+                  <div
+                    className={`min-h-[6rem] border-t-2 border-foreground/50 p-2 font-semibold break-words text-ellipsis whitespace-pre-line ${
+                      !data?.content ? 'text-center underline' : 'text-left'
+                    }`}
+                  >
+                    <span className={data?.content ? '' : 'opacity-50'}>
+                      {data?.content || t('common.empty')}
+                    </span>
+                  </div>
+                </div>
+              )}
+
+              {getConfig('REPORT_CONTENT_TEXT') &&
+                getConfig('REPORT_SCORE_TEXT') && (
+                  <div className="h-[2px] min-h-full w-auto shrink-0 bg-foreground/50 md:h-auto md:w-[2px]" />
+                )}
+
+              {getConfig('REPORT_SCORE_TEXT') && (
+                <div className="flex-[1] border-foreground/50">
+                  <div className="flex h-16 flex-col items-center justify-center p-2 text-sm font-bold whitespace-pre-wrap">
+                    {getConfig('REPORT_SCORE_TEXT')}
+                  </div>
+                  <div className="flex min-h-[6rem] justify-center border-t-2 border-foreground/50 p-2 text-center break-words text-ellipsis whitespace-pre-line">
+                    <span
+                      className={
+                        data?.score
+                          ? 'text-2xl font-bold text-red-600 underline dark:text-red-300'
+                          : 'font-semibold opacity-50'
+                      }
+                    >
+                      {data?.score || '-'}
+                    </span>
+                  </div>
+                </div>
+              )}
+
+              {(getConfig('REPORT_SCORE_TEXT') ||
+                getConfig('REPORT_CONTENT_TEXT')) &&
+                getConfig('REPORT_FEEDBACK_TEXT') && (
+                  <div className="h-[2px] min-h-full w-auto shrink-0 bg-foreground/50 md:h-auto md:w-[2px]" />
+                )}
+
+              {getConfig('REPORT_FEEDBACK_TEXT') && (
+                <div className="flex-[2]">
+                  <div className="flex h-16 items-center justify-center p-2 text-sm font-bold whitespace-pre-wrap">
+                    {getConfig('REPORT_FEEDBACK_TEXT')}
+                  </div>
+                  <div
+                    className={`min-h-[6rem] border-t-2 border-foreground/50 p-2 font-semibold break-words text-ellipsis whitespace-pre-line ${
+                      !data?.feedback ? 'text-center underline' : 'text-left'
+                    }`}
+                  >
+                    <span className={data?.feedback ? '' : 'opacity-50'}>
+                      {data?.feedback || t('common.empty')}
+                    </span>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          <div className="text-left text-sm">
+            {getConfig('REPORT_CONCLUSION')}
+
+            {getConfig('REPORT_CONCLUSION') && getConfig('REPORT_CLOSING') && (
+              <>
+                <br />
+                <br />
+              </>
+            )}
+
+            {getConfig('REPORT_CLOSING') && (
+              <span className="font-semibold">
+                {getConfig('REPORT_CLOSING')}
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/ui/custom/search-bar.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { Input } from '../input';
+import { cn } from '@tuturuuu/utils/format';
+import { debounce } from 'lodash';
+import { useCallback, useEffect, useState } from 'react';
+
+interface Props {
+  t: any;
+  defaultValue?: string;
+  className?: string;
+  // eslint-disable-next-line no-unused-vars
+  onSearch?: (query: string) => void;
+}
+
+// Assuming the rest of your imports and Props interface are unchanged
+
+const SearchBar = ({ t, defaultValue = '', className, onSearch }: Props) => {
+  // Memoize the updateQuery function to ensure debounce works correctly
+  const updateQuery = useCallback(
+    debounce((query: string) => {
+      if (onSearch) {
+        onSearch(query);
+      }
+    }, 300),
+    [onSearch] // Re-create the debounced function only if onSearch changes
+  );
+
+  const searchPlaceholder = t('search.search-placeholder');
+  const [value, setValue] = useState(defaultValue);
+
+  useEffect(() => {
+    setValue(defaultValue);
+  }, [defaultValue]);
+
+  useEffect(() => {
+    // Cleanup the debounced function on component unmount
+    return () => {
+      updateQuery.cancel();
+    };
+  }, [updateQuery]);
+
+  return (
+    <Input
+      placeholder={searchPlaceholder}
+      value={value}
+      onChange={(e) => {
+        setValue(e.target.value);
+        updateQuery(e.target.value);
+      }}
+      className={cn('h-8 min-w-64 placeholder:text-foreground/60', className)}
+    />
+  );
+};
+
+export default SearchBar;

package/src/components/ui/custom/select-field.tsx

@@ -0,0 +1,78 @@
+import { Label } from '../label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../select';
+import { Root } from '@radix-ui/react-select';
+import { cn } from '@tuturuuu/utils/format';
+import React, { forwardRef } from 'react';
+
+type SelectOption = {
+  value: string;
+  label: string;
+  disabled?: boolean;
+};
+
+interface ClassNames {
+  root?: string;
+  label?: string;
+  selectTrigger?: string;
+  selectContent?: string;
+  selectItem?: string;
+  selectValue?: string;
+}
+
+interface SelectFieldProps {
+  id: string;
+  label?: string;
+  placeholder?: string;
+  options: SelectOption[];
+  classNames?: ClassNames;
+}
+
+export interface SelectProps
+  extends React.ComponentPropsWithoutRef<typeof Root> {}
+
+// Merge the two interfaces
+type Props = SelectFieldProps & SelectProps;
+
+const SelectField = forwardRef<React.ComponentRef<typeof Root>, Props>(
+  ({ id, label, placeholder, options, classNames, ...props }, ref) => {
+    return (
+      <div className={cn('grid gap-2', classNames?.root)}>
+        {label && (
+          <Label htmlFor={id} className={classNames?.label}>
+            {label}
+          </Label>
+        )}
+        <Select {...props}>
+          <SelectTrigger ref={ref} className={classNames?.selectTrigger}>
+            <SelectValue
+              id={id}
+              placeholder={placeholder}
+              className={classNames?.selectValue}
+            />
+          </SelectTrigger>
+          <SelectContent className={classNames?.selectContent}>
+            {options.map((option) => (
+              <SelectItem
+                key={option.value}
+                value={option.value}
+                className={classNames?.selectItem}
+                disabled={option.disabled}
+              >
+                {option.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+    );
+  }
+);
+
+SelectField.displayName = 'SelectField';
+export { SelectField };

package/src/components/ui/custom/tables/data-table-column-header.tsx

@@ -0,0 +1,72 @@
+import { Button } from '../../button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../../dropdown-menu';
+import { Column } from '@tanstack/react-table';
+import { cn } from '@tuturuuu/utils/format';
+import { ArrowDown, ArrowUp, ChevronDown, EyeOff } from 'lucide-react';
+import React from 'react';
+
+interface DataTableColumnHeaderProps<TData, TValue>
+  extends React.HTMLAttributes<HTMLDivElement> {
+  t: any;
+  column: Column<TData, TValue>;
+  title?: string;
+}
+
+export function DataTableColumnHeader<TData, TValue>({
+  t,
+  column,
+  title,
+  className,
+}: DataTableColumnHeaderProps<TData, TValue>) {
+  if (!column.getCanSort()) {
+    return <div className={cn(className)}>{title}</div>;
+  }
+
+  return (
+    <div className={cn('flex items-center space-x-2', className)}>
+      <DropdownMenu modal={false}>
+        <DropdownMenuTrigger asChild>
+          <Button
+            size="sm"
+            variant="ghost"
+            className="-ml-3 h-8 data-[state=open]:bg-accent"
+          >
+            <span className="line-clamp-1">{title}</span>
+            {column.getIsSorted() === 'desc' ? (
+              <ArrowDown className="ml-2 h-4 w-4" />
+            ) : column.getIsSorted() === 'asc' ? (
+              <ArrowUp className="ml-2 h-4 w-4" />
+            ) : (
+              <ChevronDown className="ml-2 h-4 w-4" />
+            )}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          <DropdownMenuItem className="justify-center" disabled>
+            <span className="line-clamp-1">{title}</span>
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
+            <ArrowUp className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+            {t('common.ascending')}
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
+            <ArrowDown className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+            {t('common.descending')}
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
+            <EyeOff className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+            {t('common.hide_column')}
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}

package/src/components/ui/custom/tables/data-table-create-button.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { Button } from '../../button';
+import { DialogContent, DialogTrigger } from '../../dialog';
+import { Plus } from 'lucide-react';
+import { ReactNode } from 'react';
+
+export interface DataTableCreateButtonProps {
+  newObjectTitle?: string;
+  createButtonText?: string;
+  editContent?: ReactNode;
+}
+
+export function DataTableCreateButton(props: DataTableCreateButtonProps) {
+  return (
+    <>
+      <DialogTrigger asChild>
+        <Button size="sm" className="col-span-full ml-auto h-8 w-full md:w-fit">
+          <Plus className="h-4 w-4" />
+          {props.newObjectTitle || props.createButtonText}
+        </Button>
+      </DialogTrigger>
+      <DialogContent
+        className="sm:max-w-[425px]"
+        onOpenAutoFocus={(e) => e.preventDefault()}
+      >
+        {props.editContent}
+      </DialogContent>
+    </>
+  );
+}

package/src/components/ui/custom/tables/data-table-faceted-filter.tsx

@@ -0,0 +1,142 @@
+import { Badge } from '../../badge';
+import { Button } from '../../button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from '../../command';
+import { Popover, PopoverContent, PopoverTrigger } from '../../popover';
+import { Separator } from '../../separator';
+import { Column } from '@tanstack/react-table';
+import { cn } from '@tuturuuu/utils/format';
+import { Check, PlusCircle } from 'lucide-react';
+import * as React from 'react';
+
+interface DataTableFacetedFilterProps<TData, TValue> {
+  column?: Column<TData, TValue>;
+  title?: string;
+  options: {
+    label: string;
+    value: string;
+    icon?: React.ComponentType<{ className?: string }>;
+  }[];
+}
+
+export function DataTableFacetedFilter<TData, TValue>({
+  column,
+  title,
+  options,
+}: DataTableFacetedFilterProps<TData, TValue>) {
+  const facets = column?.getFacetedUniqueValues();
+  const selectedValues = new Set(column?.getFilterValue() as string[]);
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline" size="sm" className="h-8 border-dashed">
+          <PlusCircle className="mr-2 h-4 w-4" />
+          {title}
+          {selectedValues?.size > 0 && (
+            <>
+              <Separator orientation="vertical" className="mx-2 h-4" />
+              <Badge
+                variant="secondary"
+                className="rounded-sm px-1 font-normal lg:hidden"
+              >
+                {selectedValues.size}
+              </Badge>
+              <div className="hidden space-x-1 lg:flex">
+                {selectedValues.size > 2 ? (
+                  <Badge
+                    variant="secondary"
+                    className="rounded-sm px-1 font-normal"
+                  >
+                    {selectedValues.size} selected
+                  </Badge>
+                ) : (
+                  options
+                    .filter((option) => selectedValues.has(option.value))
+                    .map((option) => (
+                      <Badge
+                        variant="secondary"
+                        key={option.value}
+                        className="rounded-sm px-1 font-normal"
+                      >
+                        {option.label}
+                      </Badge>
+                    ))
+                )}
+              </div>
+            </>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0" align="start">
+        <Command>
+          <CommandInput placeholder={title} />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => {
+                const isSelected = selectedValues.has(option.value);
+                return (
+                  <CommandItem
+                    key={option.value}
+                    onSelect={() => {
+                      if (isSelected) {
+                        selectedValues.delete(option.value);
+                      } else {
+                        selectedValues.add(option.value);
+                      }
+                      const filterValues = Array.from(selectedValues);
+                      column?.setFilterValue(
+                        filterValues.length ? filterValues : undefined
+                      );
+                    }}
+                  >
+                    <div
+                      className={cn(
+                        'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
+                        isSelected
+                          ? 'bg-primary text-primary-foreground'
+                          : 'opacity-50 [&_svg]:invisible'
+                      )}
+                    >
+                      <Check className={cn('h-4 w-4')} />
+                    </div>
+                    {option.icon && (
+                      <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
+                    )}
+                    <span>{option.label}</span>
+                    {facets?.get(option.value) && (
+                      <span className="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs">
+                        {facets.get(option.value)}
+                      </span>
+                    )}
+                  </CommandItem>
+                );
+              })}
+            </CommandGroup>
+            {selectedValues.size > 0 && (
+              <>
+                <CommandSeparator />
+                <CommandGroup>
+                  <CommandItem
+                    onSelect={() => column?.setFilterValue(undefined)}
+                    className="justify-center text-center"
+                  >
+                    Clear filters
+                  </CommandItem>
+                </CommandGroup>
+              </>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}