+
{`${article.views} ${t('views')}`}
- {article.content}
+ {article.content}
);
}
diff --git a/src/app/[locale]/(default)/storage/(main)/layout.tsx b/src/app/[locale]/(default)/storage/(main)/layout.tsx
new file mode 100644
index 0000000..4bddd7a
--- /dev/null
+++ b/src/app/[locale]/(default)/storage/(main)/layout.tsx
@@ -0,0 +1,87 @@
+import { CategorySelector } from '@/components/composites/CategorySelector';
+import { SearchBar } from '@/components/composites/SearchBar';
+import { SortSelector } from '@/components/composites/SortSelector';
+import { SelectorsSkeleton } from '@/components/storage/SelectorsSkeleton';
+import { ShoppingCartLink } from '@/components/storage/ShoppingCartLink';
+import { useTranslations } from 'next-intl';
+import { unstable_setRequestLocale } from 'next-intl/server';
+import { Suspense } from 'react';
+
+type StorageLayoutProps = {
+ children: React.ReactNode;
+ params: { locale: string };
+};
+
+export default function StorageLayout({
+ children,
+ params: { locale },
+}: StorageLayoutProps) {
+ unstable_setRequestLocale(locale);
+ const t = useTranslations('storage');
+ const tUi = useTranslations('ui');
+
+ // This does not make much sense with a backend, most likely the categories in the backend will have a name in both languages and an ID
+ const categories = [
+ {
+ label: t('combobox.cables'),
+ value: t('searchParams.cables'),
+ },
+ {
+ label: t('combobox.sensors'),
+ value: t('searchParams.sensors'),
+ },
+ {
+ label: t('combobox.peripherals'),
+ value: t('searchParams.peripherals'),
+ },
+ {
+ label: t('combobox.miniPC'),
+ value: t('searchParams.miniPC'),
+ },
+ ];
+
+ const filters = [
+ { name: t('select.popularity'), urlName: t('searchParams.popularity') },
+ { name: t('select.sortDescending'), urlName: t('searchParams.descending') },
+ { name: t('select.sortAscending'), urlName: t('searchParams.ascending') },
+ { name: t('select.name'), urlName: t('searchParams.name') },
+ ];
+
+ return (
+ <>
+ ;
+}) {
+ unstable_setRequestLocale(locale);
+ const t = useTranslations('ui');
+
+ const itemsPerPage = 12;
+
+ const searchParamsCache = createSearchParamsCache({
+ [t('page')]: parseAsInteger.withDefault(1),
+ });
+
+ const { [t('page')]: page = 1 } = searchParamsCache.parse(searchParams);
+
+ return (
+ <>
+ ;
-}) {
- unstable_setRequestLocale(locale);
- const t = useTranslations('storage');
- const t_ui = useTranslations('ui');
-
- const itemsPerPage = 12;
-
- const searchParamsCache = createSearchParamsCache({
- [t_ui('page')]: parseAsInteger.withDefault(1),
- });
-
- const { [t_ui('page')]: page = 1 } = searchParamsCache.parse(searchParams);
-
- // TODO: Implement filters and category selection
- const categories = [
- {
- value: 'cables',
- label: t('combobox.cables'),
- },
- {
- value: 'sensors',
- label: t('combobox.sensors'),
- },
- {
- value: 'peripherals',
- label: t('combobox.peripherals'),
- },
- {
- value: 'miniPC',
- label: t('combobox.miniPC'),
- },
- ];
-
- const filters = [
- 'select.popularity',
- 'select.sortDescending',
- 'select.sortAscending',
- 'select.name',
- ] as const;
-
- return (
- <>
- &
+ VariantProps;
+
+function ConfirmDialog({ confirmAction, t, ...props }: ConfirmDialogProps) {
+ const [open, setOpen] = useState(false);
+
+ return (
+
+ );
+}
+
+export { ConfirmDialog };
diff --git a/src/components/composites/PaginationCarousel.tsx b/src/components/composites/PaginationCarousel.tsx
new file mode 100644
index 0000000..9ddd538
--- /dev/null
+++ b/src/components/composites/PaginationCarousel.tsx
@@ -0,0 +1,23 @@
+import { PaginationCarouselClient } from '@/components/composites/PaginationCarouselClient';
+import { useTranslations } from 'next-intl';
+
+function PaginationCarousel({
+ ...props
+}: { className?: string; totalPages: number }) {
+ const t = useTranslations('ui');
+ return (
+
diff --git a/src/components/composites/SearchBar.tsx b/src/components/composites/SearchBar.tsx
new file mode 100644
index 0000000..38b8bf0
--- /dev/null
+++ b/src/components/composites/SearchBar.tsx
@@ -0,0 +1,20 @@
+import { Input } from '@/components/ui/Input';
+import { cx } from '@/lib/utils';
+import { SearchIcon } from 'lucide-react';
+import * as React from 'react';
+
+type SearchBarProps = React.InputHTMLAttributes;
+
+const SearchBar = React.forwardRef(
+ ({ className, ...props }, ref) => {
+ return (
+
-
+
{children}
);
diff --git a/src/components/storage/AddToCartButton.tsx b/src/components/storage/AddToCartButton.tsx
new file mode 100644
index 0000000..c0009f7
--- /dev/null
+++ b/src/components/storage/AddToCartButton.tsx
@@ -0,0 +1,73 @@
+'use client';
+
+import { Button } from '@/components/ui/Button';
+import { Loader } from '@/components/ui/Loader';
+import { useLocalStorage } from '@/lib/hooks/useLocalStorage';
+import { cx } from 'cva';
+
+// TODO: Type must be replaced by the type provided from database ORM.
+export type StorageItem = {
+ id: number;
+ name: string;
+ photo_url: string;
+ status: string;
+ quantity: number;
+ location: string;
+};
+
+export type CartItem = {
+ id: number;
+ amount: number;
+};
+
+type AddToCartButtonProps = {
+ className?: string;
+ item: StorageItem;
+ t: {
+ addToCart: string;
+ removeFromCart: string;
+ };
+};
+
+function AddToCartButton({ className, item, t }: AddToCartButtonProps) {
+ const [cart, setCart, isLoading] = useLocalStorage(
+ 'shopping-cart',
+ [],
+ );
+
+ if (isLoading) {
+ return ('shopping-cart');
+
+ return (
+ <>
+
+
+ );
+}
+
+export { BorrowDialog };
diff --git a/src/components/storage/ItemCard.tsx b/src/components/storage/ItemCard.tsx
new file mode 100644
index 0000000..ebd734c
--- /dev/null
+++ b/src/components/storage/ItemCard.tsx
@@ -0,0 +1,57 @@
+import type { StorageItem } from '@/components/storage/AddToCartButton';
+import { AddToCartButton } from '@/components/storage/AddToCartButton';
+import {
+ Card,
+ CardDescription,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+} from '@/components/ui/Card';
+import { useTranslations } from 'next-intl';
+import Image from 'next/image';
+
+function ItemCard({
+ item,
+}: {
+ item: StorageItem;
+}) {
+ const t = useTranslations('storage');
+ const tUi = useTranslations('ui');
+ return (
+
+
+
+ {item.name}
+
+ {item.location}
+
+
+
+
+ );
+}
+
+export { ItemCard };
diff --git a/src/components/storage/ItemCardSkeleton.tsx b/src/components/storage/ItemCardSkeleton.tsx
new file mode 100644
index 0000000..242ffa8
--- /dev/null
+++ b/src/components/storage/ItemCardSkeleton.tsx
@@ -0,0 +1,30 @@
+import {
+ Card,
+ CardDescription,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+} from '@/components/ui/Card';
+import { Skeleton } from '@/components/ui/Skeleton';
+
+export function ItemCardSkeleton() {
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/storage/LoanForm.tsx b/src/components/storage/LoanForm.tsx
new file mode 100644
index 0000000..81b26ac
--- /dev/null
+++ b/src/components/storage/LoanForm.tsx
@@ -0,0 +1,103 @@
+'use client';
+
+import { Button } from '@/components/ui/Button';
+import { Calendar } from '@/components/ui/Calendar';
+import {
+ Form,
+ FormControl,
+ FormDescription,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from '@/components/ui/Form';
+import { Input } from '@/components/ui/Input';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { addDays, addWeeks, endOfWeek } from 'date-fns';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+const formSchema = z.object({
+ phone: z.string().min(1),
+ returnBy: z.date().min(new Date()),
+});
+
+type LoanFormProps = {
+ t: {
+ borrowNow: string;
+ name: string;
+ email: string;
+ phoneNumber: string;
+ phoneNumberDescription: string;
+ returnBy: string;
+ returnByDescription: string;
+ submit: string;
+ };
+};
+
+function LoanForm({ t }: LoanFormProps) {
+ const form = useForm>({
+ resolver: zodResolver(formSchema),
+ defaultValues: {
+ phone: '',
+ returnBy: new Date(),
+ },
+ });
+
+ function onSubmit(values: z.infer) {
+ // TODO: Add new loan to database
+ console.log(values);
+ }
+
+ return (
+ <>
+
+
+
+ );
+}
+
+export { LoanForm };
diff --git a/src/components/storage/SelectorsSkeleton.tsx b/src/components/storage/SelectorsSkeleton.tsx
new file mode 100644
index 0000000..8bf78b1
--- /dev/null
+++ b/src/components/storage/SelectorsSkeleton.tsx
@@ -0,0 +1,13 @@
+import { Skeleton } from '@/components/ui/Skeleton';
+import { useId } from 'react';
+
+function SelectorsSkeleton() {
+ return (
+ ('shopping-cart');
+
+ return (
+ setCart(null)}
+ t={{
+ title: t.clearCart,
+ description: t.clearCartDescription,
+ confirm: t.clear,
+ cancel: t.cancel,
+ }}
+ >
+
+ {t.clearCart}
+
+ );
+}
+
+export { ShoppingCartClearDialog };
diff --git a/src/components/storage/ShoppingCartLink.tsx b/src/components/storage/ShoppingCartLink.tsx
new file mode 100644
index 0000000..6bd6efd
--- /dev/null
+++ b/src/components/storage/ShoppingCartLink.tsx
@@ -0,0 +1,55 @@
+'use client';
+import type { CartItem } from '@/components/storage/AddToCartButton';
+import { Badge } from '@/components/ui/Badge';
+import { Button } from '@/components/ui/Button';
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from '@/components/ui/Tooltip';
+import { useLocalStorage } from '@/lib/hooks/useLocalStorage';
+import { Link } from '@/lib/locale/navigation';
+import { ShoppingCartIcon } from 'lucide-react';
+
+type ShoppingCartLinkProps = {
+ t: {
+ viewShoppingCart: string;
+ };
+};
+
+function ShoppingCartLink({ t }: ShoppingCartLinkProps) {
+ const [cart, _, isLoading] = useLocalStorage('shopping-cart');
+
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+
+export { ShoppingCartLink };
diff --git a/src/components/storage/ShoppingCartTable.tsx b/src/components/storage/ShoppingCartTable.tsx
new file mode 100644
index 0000000..703105c
--- /dev/null
+++ b/src/components/storage/ShoppingCartTable.tsx
@@ -0,0 +1,117 @@
+'use client';
+
+import type { CartItem } from '@/components/storage/AddToCartButton';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from '@/components/ui/Table';
+import { useLocalStorage } from '@/lib/hooks/useLocalStorage';
+import { XIcon } from 'lucide-react';
+
+// TODO: Must be replaced by requesting the data from a database.
+import { items } from '@/mock-data/items';
+import { ShoppingCartTableSkeleton } from './ShoppingCartTableSkeleton';
+
+type ShoppingCartTableProps = {
+ t: {
+ tableDescription: string;
+ productId: string;
+ productName: string;
+ location: string;
+ unitsAvailable: string;
+ cartEmpty: string;
+ amountOfItemARIA: string;
+ };
+};
+
+function ShoppingCartTable({ t }: ShoppingCartTableProps) {
+ const [cart, setCart, isLoading] = useLocalStorage(
+ 'shopping-cart',
+ [],
+ );
+
+ if (isLoading) {
+ return
+
+ );
+}
+
+export { ShoppingCartTable };
diff --git a/src/components/storage/ShoppingCartTableSkeleton.tsx b/src/components/storage/ShoppingCartTableSkeleton.tsx
new file mode 100644
index 0000000..62a3aef
--- /dev/null
+++ b/src/components/storage/ShoppingCartTableSkeleton.tsx
@@ -0,0 +1,69 @@
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { Skeleton } from '@/components/ui/Skeleton';
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from '@/components/ui/Table';
+import { XIcon } from 'lucide-react';
+import { useId } from 'react';
+
+type ShoppingCartTableSkeletonProps = {
+ t: {
+ productId: string;
+ productName: string;
+ location: string;
+ unitsAvailable: string;
+ };
+};
+
+function ShoppingCartTableSkeleton({ t }: ShoppingCartTableSkeletonProps) {
+ return (
+
+
+ );
+}
+
+export { ShoppingCartTableSkeleton };
diff --git a/src/components/storage/SkeletonCard.tsx b/src/components/storage/SkeletonCard.tsx
deleted file mode 100644
index 8c3cafb..0000000
--- a/src/components/storage/SkeletonCard.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Skeleton } from '@/components/ui/Skeleton';
-
-export function SkeletonCard() {
- return (
- ;
+
+function Calendar({
+ className,
+ classNames,
+ showOutsideDays = true,
+ locale,
+ ...props
+}: CalendarProps) {
+ return (
+ ;
+
const Card = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes
@@ -28,19 +32,22 @@ const CardHeader = React.forwardRef<
));
CardHeader.displayName = 'CardHeader';
-const CardTitle = React.forwardRef<
- HTMLParagraphElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-));
+const CardTitle = React.forwardRef(
+ ({ level = 'h3', className, ...props }, ref) => {
+ const Component = level;
+
+ return (
+ (initialValue ?? '');
return (
@@ -46,6 +52,7 @@ function Combobox({
variant='outline'
role='combobox'
aria-expanded={open}
+ aria-label={ariaLabel}
className={cx('w-[200px] justify-between', buttonClassName)}
>
{value
@@ -65,8 +72,14 @@ function Combobox({
key={choice.value}
value={choice.value}
onSelect={(currentValue) => {
- setValue(currentValue === value ? '' : currentValue);
+ // Set newValue to null if user selects the same value twice
+ const newValue =
+ currentValue === value ? null : currentValue;
+ setValue(newValue);
setOpen(false);
+ if (valueCallback) {
+ valueCallback(newValue);
+ }
}}
>
void;
+ disabled?: Matcher | Matcher[];
+ buttonClassName?: string;
+};
+
+/**
+ * This is a sligtly modified version of shadcn's Date Picker built on top of Calendar.
+ * The component has a state, but also allows adding an additional date callback function which
+ * provides a way to have side effects and/or state updates on the parent component whenever a new date is selected.
+ */
+function DatePicker({
+ initialDate,
+ dateCallback,
+ disabled,
+ buttonClassName,
+}: DatePickerProps) {
+ const [date, setDate] = React.useState(initialDate ?? new Date());
+
+ function handleDateChange(date: Date | undefined) {
+ if (!date) return;
+ setDate(date);
+ if (dateCallback) {
+ dateCallback(date);
+ }
+ }
+
+ return (
+
+
+
+
+
+ handleDateChange(date)}
+ disabled={disabled}
+ />
+
+
+ );
+}
+
+export { DatePicker };
diff --git a/src/components/ui/Form.tsx b/src/components/ui/Form.tsx
new file mode 100644
index 0000000..c945d9f
--- /dev/null
+++ b/src/components/ui/Form.tsx
@@ -0,0 +1,179 @@
+'use client';
+
+import type * as LabelPrimitive from '@radix-ui/react-label';
+import { Slot } from '@radix-ui/react-slot';
+import * as React from 'react';
+import {
+ Controller,
+ type ControllerProps,
+ type FieldPath,
+ type FieldValues,
+ FormProvider,
+ useFormContext,
+} from 'react-hook-form';
+
+import { Label } from '@/components/ui/Label';
+import { cx } from '@/lib/utils';
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+ TFieldValues extends FieldValues = FieldValues,
+ TName extends FieldPath = FieldPath,
+> = {
+ name: TName;
+};
+
+const FormFieldContext = React.createContext(
+ {} as FormFieldContextValue,
+);
+
+const FormField = <
+ TFieldValues extends FieldValues = FieldValues,
+ TName extends FieldPath = FieldPath,
+>({
+ ...props
+}: ControllerProps) => {
+ return (
+
+
+ );
+};
+
+const useFormField = () => {
+ const fieldContext = React.useContext(FormFieldContext);
+ const itemContext = React.useContext(FormItemContext);
+ const { getFieldState, formState } = useFormContext();
+
+ const fieldState = getFieldState(fieldContext.name, formState);
+
+ if (!fieldContext) {
+ throw new Error('useFormField should be used within ');
+ }
+
+ const { id } = itemContext;
+
+ return {
+ id,
+ name: fieldContext.name,
+ formItemId: `${id}-form-item`,
+ formDescriptionId: `${id}-form-item-description`,
+ formMessageId: `${id}-form-item-message`,
+ ...fieldState,
+ };
+};
+
+type FormItemContextValue = {
+ id: string;
+};
+
+const FormItemContext = React.createContext(
+ {} as FormItemContextValue,
+);
+
+const FormItem = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => {
+ const id = React.useId();
+
+ return (
+
+
+
+ );
+});
+FormItem.displayName = 'FormItem';
+
+const FormLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => {
+ const { error, formItemId } = useFormField();
+
+ return (
+
+ );
+});
+FormLabel.displayName = 'FormLabel';
+
+const FormControl = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ ...props }, ref) => {
+ const { error, formItemId, formDescriptionId, formMessageId } =
+ useFormField();
+
+ return (
+
+>(({ className, ...props }, ref) => {
+ const { formDescriptionId } = useFormField();
+
+ return (
+
+ );
+});
+FormDescription.displayName = 'FormDescription';
+
+const FormMessage = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, children, ...props }, ref) => {
+ const { error, formMessageId } = useFormField();
+ const body = error ? String(error?.message) : children;
+
+ if (!body) {
+ return null;
+ }
+
+ return (
+ (
,
+ React.ComponentPropsWithoutRef &
+ VariantProps
+>(({ className, ...props }, ref) => (
+ & VariantProps) {
+ return (
+ ;
-
-/**
- * This component creates a full search bar with an icon.
- * The ref, if used, is passed onto the input element, not the wrapper for the component.
- */
-const SearchBar = React.forwardRef(
- ({ className, type, ...props }, ref) => {
- return (
-
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+
+));
+TableHeader.displayName = 'TableHeader';
+
+const TableBody = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+TableBody.displayName = 'TableBody';
+
+const TableFooter = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+ tr]:last:border-b-0',
+ className,
+ )}
+ {...props}
+ />
+));
+TableFooter.displayName = 'TableFooter';
+
+const TableRow = React.forwardRef<
+ HTMLTableRowElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+ (
+ key: string,
+ initialValue?: T | (() => T),
+): [T | undefined, (value: T | null | undefined) => void, boolean] {
+ const [isLoading, setIsLoading] = useState(true);
+ const [storedValue, setStoredValue] = useState(() => {
+ let initValue: T | undefined;
+ if (typeof initialValue === 'function') {
+ initValue = (initialValue as () => T)();
+ } else {
+ initValue = initialValue;
+ }
+
+ if (typeof window === 'undefined') {
+ return initValue;
+ }
+
+ const raw = localStorage.getItem(key);
+ if (raw) {
+ try {
+ return JSON.parse(raw) as T;
+ } catch {
+ return initValue;
+ }
+ } else {
+ return initValue;
+ }
+ });
+
+ const setValue = useCallback(
+ (value: T | null | undefined) => {
+ if (typeof window === 'undefined') {
+ return;
+ }
+ const newValue = value instanceof Function ? value(storedValue) : value;
+ if (!newValue || (Array.isArray(newValue) && newValue.length === 0)) {
+ localStorage.removeItem(key);
+ let defaultValue: T | undefined;
+ if (typeof initialValue === 'function') {
+ defaultValue = (initialValue as () => T)();
+ } else {
+ defaultValue = initialValue;
+ }
+ setStoredValue(defaultValue);
+ } else {
+ localStorage.setItem(key, JSON.stringify(newValue));
+ setStoredValue(newValue);
+ }
+ window.dispatchEvent(new StorageEvent('local-storage', { key }));
+ },
+ [key, storedValue, initialValue],
+ );
+
+ useEffect(() => {
+ const handleStorageChange = (event: StorageEvent | CustomEvent) => {
+ if ((event as StorageEvent).key && (event as StorageEvent).key !== key) {
+ return;
+ }
+ const raw = localStorage.getItem(key);
+ if (raw) {
+ try {
+ setStoredValue(JSON.parse(raw) as T);
+ } catch {
+ let defaultValue: T | undefined;
+ if (typeof initialValue === 'function') {
+ defaultValue = (initialValue as () => T)();
+ } else {
+ defaultValue = initialValue;
+ }
+ setStoredValue(defaultValue);
+ }
+ } else {
+ let defaultValue: T | undefined;
+ if (typeof initialValue === 'function') {
+ defaultValue = (initialValue as () => T)();
+ } else {
+ defaultValue = initialValue;
+ }
+ setStoredValue(defaultValue);
+ }
+ };
+
+ window.addEventListener('storage', handleStorageChange);
+ window.addEventListener('local-storage', handleStorageChange);
+ setIsLoading(false);
+ return () => {
+ window.removeEventListener('storage', handleStorageChange);
+ window.removeEventListener('local-storage', handleStorageChange);
+ };
+ }, [key, initialValue]);
+
+ return [storedValue, setValue, isLoading];
+}
+
+export { useLocalStorage };
diff --git a/src/lib/locale/index.ts b/src/lib/locale/index.ts
index 20bda14..8ffd34e 100644
--- a/src/lib/locale/index.ts
+++ b/src/lib/locale/index.ts
@@ -29,5 +29,13 @@ export const routing = defineRouting({
en: '/about',
no: '/om-oss',
},
+ '/storage': {
+ en: '/storage',
+ no: '/lager',
+ },
+ '/storage/shopping-cart': {
+ en: '/storage/shopping-cart',
+ no: '/lager/handlekurv',
+ },
},
});
diff --git a/src/lib/locale/i18n.ts b/src/lib/locale/request.ts
similarity index 81%
rename from src/lib/locale/i18n.ts
rename to src/lib/locale/request.ts
index 5754d72..5a5fb6e 100644
--- a/src/lib/locale/i18n.ts
+++ b/src/lib/locale/request.ts
@@ -3,8 +3,7 @@ import { getRequestConfig } from 'next-intl/server';
import { notFound } from 'next/navigation';
export default getRequestConfig(async ({ locale }) => {
- // @ts-ignore
- if (!routing.locales.includes(locale)) notFound();
+ if (!routing.locales.includes(locale as 'en')) notFound();
return {
messages: (await import(`../../../messages/${locale}.json`))
.default as Messages,
diff --git a/src/mock-data/items.ts b/src/mock-data/items.ts
index ce106f9..3e26d06 100644
--- a/src/mock-data/items.ts
+++ b/src/mock-data/items.ts
@@ -1,5 +1,6 @@
const items = [
{
+ id: 34872,
name: 'Laptop',
photo_url: 'https://example.com/photos/laptop.jpg',
status: 'Operational',
@@ -7,6 +8,7 @@ const items = [
location: 'Storage Room A',
},
{
+ id: 58392,
name: 'Desktop PC',
photo_url: 'https://example.com/photos/desktop_pc.jpg',
status: 'Operational',
@@ -14,6 +16,7 @@ const items = [
location: 'Workstation Area 1',
},
{
+ id: 72541,
name: 'Monitor',
photo_url: 'https://example.com/photos/monitor.jpg',
status: 'Operational',
@@ -21,6 +24,7 @@ const items = [
location: 'Storage Room B',
},
{
+ id: 91834,
name: 'Keyboard',
photo_url: 'https://example.com/photos/keyboard.jpg',
status: 'Operational',
@@ -28,6 +32,7 @@ const items = [
location: 'Storage Room A',
},
{
+ id: 12095,
name: 'Mouse',
photo_url: 'https://example.com/photos/mouse.jpg',
status: 'Operational',
@@ -35,6 +40,7 @@ const items = [
location: 'Storage Room A',
},
{
+ id: 65738,
name: 'Router',
photo_url: 'https://example.com/photos/router.jpg',
status: 'Operational',
@@ -42,6 +48,7 @@ const items = [
location: 'Networking Room',
},
{
+ id: 23984,
name: 'Ethernet Cable',
photo_url: 'https://example.com/photos/ethernet_cable.jpg',
status: 'Operational',
@@ -49,6 +56,7 @@ const items = [
location: 'Networking Room',
},
{
+ id: 48152,
name: 'External Hard Drive',
photo_url: 'https://example.com/photos/external_hard_drive.jpg',
status: 'Operational',
@@ -56,6 +64,7 @@ const items = [
location: 'Storage Room B',
},
{
+ id: 36829,
name: 'USB Flash Drive',
photo_url: 'https://example.com/photos/usb_flash_drive.jpg',
status: 'Operational',
@@ -63,6 +72,7 @@ const items = [
location: 'Storage Room B',
},
{
+ id: 50273,
name: 'Power Supply Unit (PSU)',
photo_url: 'https://example.com/photos/psu.jpg',
status: 'Operational',
@@ -70,6 +80,7 @@ const items = [
location: 'Storage Room C',
},
{
+ id: 17492,
name: 'Graphics Card',
photo_url: 'https://example.com/photos/graphics_card.jpg',
status: 'Operational',
@@ -77,6 +88,7 @@ const items = [
location: 'Storage Room C',
},
{
+ id: 78356,
name: 'RAM Module',
photo_url: 'https://example.com/photos/ram_module.jpg',
status: 'Operational',
@@ -84,6 +96,7 @@ const items = [
location: 'Storage Room C',
},
{
+ id: 92031,
name: 'Motherboard',
photo_url: 'https://example.com/photos/motherboard.jpg',
status: 'Operational',
@@ -91,6 +104,7 @@ const items = [
location: 'Storage Room C',
},
{
+ id: 38627,
name: 'CPU',
photo_url: 'https://example.com/photos/cpu.jpg',
status: 'Operational',
@@ -98,6 +112,7 @@ const items = [
location: 'Storage Room C',
},
{
+ id: 49082,
name: 'SSD',
photo_url: 'https://example.com/photos/ssd.jpg',
status: 'Operational',
@@ -105,6 +120,7 @@ const items = [
location: 'Storage Room C',
},
{
+ id: 85731,
name: 'Network Switch',
photo_url: 'https://example.com/photos/network_switch.jpg',
status: 'Operational',
@@ -112,6 +128,7 @@ const items = [
location: 'Networking Room',
},
{
+ id: 37429,
name: 'Soldering Iron',
photo_url: 'https://example.com/photos/soldering_iron.jpg',
status: 'Operational',
@@ -119,6 +136,7 @@ const items = [
location: 'Repair Station',
},
{
+ id: 90321,
name: 'Multimeter',
photo_url: 'https://example.com/photos/multimeter.jpg',
status: 'Operational',
@@ -126,6 +144,7 @@ const items = [
location: 'Repair Station',
},
{
+ id: 65704,
name: 'Screwdriver Set',
photo_url: 'https://example.com/photos/screwdriver_set.jpg',
status: 'Operational',
@@ -133,6 +152,7 @@ const items = [
location: 'Toolbox 1',
},
{
+ id: 48139,
name: 'Anti-static Wrist Strap',
photo_url: 'https://example.com/photos/anti_static_wrist_strap.jpg',
status: 'Operational',
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 73a4ee5..6480b71 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -2,6 +2,7 @@ import tailwindFluid, { extract, screens, fontSize } from 'fluid-tailwind';
import tailwindScrollbar from 'tailwind-scrollbar';
import type { Config } from 'tailwindcss';
import tailwindAnimate from 'tailwindcss-animate';
+import tailwindRadix from 'tailwindcss-radix';
import { fontFamily } from 'tailwindcss/defaultTheme';
const config = {
@@ -78,6 +79,9 @@ const config = {
},
},
plugins: [
+ tailwindRadix({
+ variantPrefix: false,
+ }),
tailwindFluid,
tailwindAnimate,
tailwindScrollbar({ nocompatible: true }),
diff --git a/tsconfig.json b/tsconfig.json
index 6cb01c3..9c1115c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -31,10 +31,10 @@
},
"include": [
".eslintrc.js",
+ "postcss.config.js",
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
- "**/*.cjs",
"**/*.js",
".next/types/**/*.ts"
],
+
+ {t('title')}
+
+
+ {children}
+
+ );
+}
diff --git a/src/app/[locale]/(default)/storage/(main)/loading.tsx b/src/app/[locale]/(default)/storage/(main)/loading.tsx
new file mode 100644
index 0000000..c510d4f
--- /dev/null
+++ b/src/app/[locale]/(default)/storage/(main)/loading.tsx
@@ -0,0 +1,16 @@
+import { PaginationCarouselSkeleton } from '@/components/composites/PaginationCarouselSkeleton';
+import { ItemCardSkeleton } from '@/components/storage/ItemCardSkeleton';
+import { useId } from 'react';
+
+export default function StorageSkeleton() {
+ return (
+ <>
+
+ {Array.from({ length: 8 }).map(() => (
+
+
+ {items
+ .slice((page - 1) * itemsPerPage, page * itemsPerPage)
+ .map((item) => (
+
+
-
-
-
-
-
-
-
-
-
-
- {children}
-
- );
-}
diff --git a/src/app/[locale]/(default)/storage/loading.tsx b/src/app/[locale]/(default)/storage/loading.tsx
deleted file mode 100644
index f88b271..0000000
--- a/src/app/[locale]/(default)/storage/loading.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { SkeletonCard } from '@/components/storage/SkeletonCard';
-import { Skeleton } from '@/components/ui/Skeleton';
-
-export default function StorageSkeleton() {
- return (
- <>
- {t('title')}
-{t('tooltips.viewShoppingCart')}
-
-
-
-
-
- );
-}
diff --git a/src/app/[locale]/(default)/storage/new/page.tsx b/src/app/[locale]/(default)/storage/new/page.tsx
new file mode 100644
index 0000000..6ec7220
--- /dev/null
+++ b/src/app/[locale]/(default)/storage/new/page.tsx
@@ -0,0 +1,3 @@
+export default function NewItemPage() {
+ return New item page
; +} diff --git a/src/app/[locale]/(default)/storage/page.tsx b/src/app/[locale]/(default)/storage/page.tsx deleted file mode 100644 index 223f604..0000000 --- a/src/app/[locale]/(default)/storage/page.tsx +++ /dev/null @@ -1,156 +0,0 @@ -import { PaginationCarousel } from '@/components/layout/PaginationCarousel'; -import { Button } from '@/components/ui/Button'; -import { - Card, - CardDescription, - CardFooter, - CardHeader, - CardTitle, -} from '@/components/ui/Card'; -import { Combobox } from '@/components/ui/Combobox'; -import { SearchBar } from '@/components/ui/SearchBar'; -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from '@/components/ui/Select'; -import { items } from '@/mock-data/items'; -import { useTranslations } from 'next-intl'; -import { getTranslations, unstable_setRequestLocale } from 'next-intl/server'; -import Image from 'next/image'; -import { createSearchParamsCache, parseAsInteger } from 'nuqs/server'; - -export async function generateMetadata({ - params: { locale }, -}: { - params: { locale: string }; -}) { - const t = await getTranslations({ locale, namespace: 'layout' }); - - return { - title: t('storage'), - }; -} - -export default function StoragePage({ - params: { locale }, - searchParams, -}: { - params: { locale: string }; - searchParams: Record
-
-
- {items
- .slice((page - 1) * itemsPerPage, page * itemsPerPage)
- .map((item) => (
-
-
- {item.name}
-
- {item.location}
-
-
-
-
- {t('card.quantityInfo', { quantity: item.quantity })}
-
-
-
-
- ))}
-
-
-
-
+
+ {children}
+
+ );
+}
diff --git a/src/app/[locale]/(default)/storage/shopping-cart/loading.tsx b/src/app/[locale]/(default)/storage/shopping-cart/loading.tsx
new file mode 100644
index 0000000..27310cd
--- /dev/null
+++ b/src/app/[locale]/(default)/storage/shopping-cart/loading.tsx
@@ -0,0 +1,23 @@
+import { ShoppingCartTableSkeleton } from '@/components/storage/ShoppingCartTableSkeleton';
+import { Skeleton } from '@/components/ui/Skeleton';
+import { useTranslations } from 'next-intl';
+
+export default function ShoppingCartSkeleton() {
+ const t = useTranslations('storage.shoppingCart');
+ const tableMessages = {
+ productId: t('productId'),
+ productName: t('productName'),
+ location: t('location'),
+ unitsAvailable: t('unitsAvailable'),
+ };
+
+ return (
+ <>
+ + {t('title')} +
+ +
+
+
+ );
+}
diff --git a/src/app/[locale]/(default)/storage/shopping-cart/page.tsx b/src/app/[locale]/(default)/storage/shopping-cart/page.tsx
new file mode 100644
index 0000000..f72474e
--- /dev/null
+++ b/src/app/[locale]/(default)/storage/shopping-cart/page.tsx
@@ -0,0 +1,54 @@
+import { BorrowDialog } from '@/components/storage/BorrowDialog';
+import { ShoppingCartClearDialog } from '@/components/storage/ShoppingCartClearDialog';
+import { ShoppingCartTable } from '@/components/storage/ShoppingCartTable';
+import { useTranslations } from 'next-intl';
+import { unstable_setRequestLocale } from 'next-intl/server';
+
+export default function StorageShoppingCartPage({
+ params: { locale },
+}: {
+ params: { locale: string };
+}) {
+ unstable_setRequestLocale(locale);
+ const t = useTranslations('storage.shoppingCart');
+ const tLoanForm = useTranslations('storage.loanForm');
+
+ const tableMessages = {
+ tableDescription: t('tableDescription'),
+ productId: t('productId'),
+ productName: t('productName'),
+ location: t('location'),
+ unitsAvailable: t('unitsAvailable'),
+ cartEmpty: t('cartEmpty'),
+ amountOfItemARIA: t('amountOfItemARIA'),
+ };
+
+ const borrowNowMessages = {
+ borrowNow: t('borrowNow'),
+ name: tLoanForm('name'),
+ email: tLoanForm('email'),
+ phoneNumber: tLoanForm('phoneNumber'),
+ phoneNumberDescription: tLoanForm('phoneNumberDescription'),
+ returnBy: tLoanForm('returnBy'),
+ returnByDescription: tLoanForm('returnByDescription'),
+ submit: tLoanForm('submit'),
+ };
+
+ return (
+ <>
+
+
+
+ );
+}
diff --git a/src/app/[locale]/error.tsx b/src/app/[locale]/error.tsx
new file mode 100644
index 0000000..a839b0a
--- /dev/null
+++ b/src/app/[locale]/error.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import { Button } from '@/components/ui/Button';
+import { Link } from '@/lib/locale/navigation';
+import { AlertTriangleIcon } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect } from 'react';
+
+export default function ErrorPage({
+ error,
+ reset,
+}: {
+ error: Error;
+ reset: () => void;
+}) {
+ const t = useTranslations('error');
+ useEffect(() => {
+ console.error(error);
+ }, [error]);
+ return (
+
+
+ );
+}
diff --git a/src/app/[locale]/not-found.tsx b/src/app/[locale]/not-found.tsx
new file mode 100644
index 0000000..e97706f
--- /dev/null
+++ b/src/app/[locale]/not-found.tsx
@@ -0,0 +1,22 @@
+import { Button } from '@/components/ui/Button';
+import { Link } from '@/lib/locale/navigation';
+import { HardDriveIcon } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+
+export default function NotFoundPage() {
+ const t = useTranslations('error');
+ return (
+ + {t('error')} +
++ {t('errorDescription')} +
+ {error.message && ( ++ Error: {error.message} +
+ )} +
+
+
+
+
+
+ );
+}
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 3f80952..17d77be 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -1,9 +1,14 @@
'use client';
import { routing } from '@/lib/locale';
-import { redirect, usePathname } from 'next/navigation';
+import NextError from 'next/error';
-export default function NotFound() {
- const pathname = usePathname();
- redirect(`/${routing.defaultLocale}/${pathname}`);
+export default function NotFoundPage() {
+ return (
+
+
+ + {t('notFound')} +
++ {t('notFoundDescription')} +
+ +
+
+ );
+ },
+);
+SearchBar.displayName = 'SearchBar';
+
+export { SearchBar };
diff --git a/src/components/composites/SortSelector.tsx b/src/components/composites/SortSelector.tsx
new file mode 100644
index 0000000..2adc1db
--- /dev/null
+++ b/src/components/composites/SortSelector.tsx
@@ -0,0 +1,58 @@
+'use client';
+
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from '@/components/ui/Select';
+import { parseAsString, useQueryState } from 'nuqs';
+
+type SortSelectorProps = {
+ filters: {
+ name: string;
+ urlName: string;
+ }[];
+ t: {
+ sort: string;
+ defaultValue: string;
+ defaultSorting: string;
+ ariaLabel: string;
+ };
+};
+
+function SortSelector({ filters, t }: SortSelectorProps) {
+ const [filter, setFilter] = useQueryState(
+ t.sort,
+ parseAsString
+ .withDefault(t.defaultSorting)
+ .withOptions({ shallow: false, clearOnDefault: true }),
+ );
+
+ return (
+
+ );
+}
+export { SortSelector };
diff --git a/src/components/home/HelloWorld.tsx b/src/components/home/HelloWorld.tsx
index 4be51a8..3506c1e 100644
--- a/src/components/home/HelloWorld.tsx
+++ b/src/components/home/HelloWorld.tsx
@@ -1,4 +1,5 @@
'use client';
+
import { api } from '@/lib/api/client';
function HelloWorld() {
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
index 0c83b28..cc7f462 100644
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -6,7 +6,7 @@ import {
} from '@/components/assets/icons';
import { IDILogo, NexusLogo } from '@/components/assets/sponsors';
import { LogoLink } from '@/components/layout/LogoLink';
-import { Nav } from '@/components/layout/Nav';
+import { Nav } from '@/components/layout/header/Nav';
import { Button } from '@/components/ui/Button';
import { Link } from '@/lib/locale/navigation';
import { BugIcon, MailIcon } from 'lucide-react';
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index ebae02f..85faf28 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -1,26 +1,28 @@
import { LogoLink } from '@/components/layout/LogoLink';
-import { MobileSheet } from '@/components/layout/MobileSheet';
-import { Nav } from '@/components/layout/Nav';
-import { DarkModeMenu } from '@/components/settings/DarkModeMenu';
-import { LocaleMenu } from '@/components/settings/LocaleMenu';
-import { ProfileMenu } from '@/components/settings/ProfileMenu';
+import { DarkModeMenu } from '@/components/layout/header/DarkModeMenu';
+import { LocaleMenu } from '@/components/layout/header/LocaleMenu';
+import { MobileSheet } from '@/components/layout/header/MobileSheet';
+import { Nav } from '@/components/layout/header/Nav';
+import { ProfileMenu } from '@/components/layout/header/ProfileMenu';
import { useTranslations } from 'next-intl';
function Header() {
const t = useTranslations('layout');
return (
+
- {Array.from({ length: 6 }).map((_, index) => (
-
);
diff --git a/src/components/providers/IntlErrorProvider.tsx b/src/components/providers/IntlErrorProvider.tsx
index afead1f..197c9c3 100644
--- a/src/components/providers/IntlErrorProvider.tsx
+++ b/src/components/providers/IntlErrorProvider.tsx
@@ -6,12 +6,9 @@ type Props = {
};
function IntlErrorProvider({ children, locale }: Props) {
- const messages = useMessages();
+ const { error } = useMessages();
return (
-
+
+ + {t('card.quantityInfo', { quantity: item.quantity })} +
+
+
+
+
+ );
+}
+
+export { SelectorsSkeleton };
diff --git a/src/components/storage/ShoppingCartClearDialog.tsx b/src/components/storage/ShoppingCartClearDialog.tsx
new file mode 100644
index 0000000..cd6721b
--- /dev/null
+++ b/src/components/storage/ShoppingCartClearDialog.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+import { ConfirmDialog } from '@/components/composites/ConfirmDialog';
+import type { CartItem } from '@/components/storage/AddToCartButton';
+import { useLocalStorage } from '@/lib/hooks/useLocalStorage';
+import { cx } from '@/lib/utils';
+import { XIcon } from 'lucide-react';
+
+type ShoppingCartClearDialogProps = {
+ className?: string;
+ t: {
+ clearCart: string;
+ clearCartDescription: string;
+ clear: string;
+ cancel: string;
+ };
+};
+
+function ShoppingCartClearDialog({
+ className,
+ t,
+}: ShoppingCartClearDialogProps) {
+ const [cart, setCart, isLoading] =
+ useLocalStorage
+
+ {!isLoading && cart && cart.length > 0 && (
+
+ {cart.length}
+
+ )}
+
+ {t.viewShoppingCart}
+{t.cartEmpty}
; + } + + const itemsInCart = items.filter((item) => + cart.some((cartItem) => cartItem.id === item.id), + ); + + function updateAmountInCart(id: number, newValue: number) { + if (!cart) return; + + const newCart = cart.map((cartItem) => + cartItem.id === id ? { ...cartItem, amount: newValue } : cartItem, + ); + setCart(newCart); + } + + function removeItem(id: number) { + if (!cart) return; + + const newCart = cart.filter((cartItem: CartItem) => cartItem.id !== id); + setCart(newCart); + } + + return ( +
-
- );
-}
diff --git a/src/components/ui/Calendar.tsx b/src/components/ui/Calendar.tsx
new file mode 100644
index 0000000..905dbbc
--- /dev/null
+++ b/src/components/ui/Calendar.tsx
@@ -0,0 +1,68 @@
+'use client';
+
+import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+import type * as React from 'react';
+import { DayPicker } from 'react-day-picker';
+
+import { buttonVariants } from '@/components/ui/Button';
+import { cx } from '@/lib/utils';
+
+export type CalendarProps = React.ComponentProps
-
-
-
- + {body} +
+ ); +}); +FormMessage.displayName = 'FormMessage'; + +export { + useFormField, + Form, + FormItem, + FormLabel, + FormControl, + FormDescription, + FormMessage, + FormField, +}; diff --git a/src/components/ui/Input.tsx b/src/components/ui/Input.tsx index a16957e..18d6b46 100644 --- a/src/components/ui/Input.tsx +++ b/src/components/ui/Input.tsx @@ -10,7 +10,7 @@ const Input = React.forwardRef
-
- );
- },
-);
-SearchBar.displayName = 'SearchBar';
-
-export { SearchBar };
diff --git a/src/components/ui/Table.tsx b/src/components/ui/Table.tsx
new file mode 100644
index 0000000..4d00f59
--- /dev/null
+++ b/src/components/ui/Table.tsx
@@ -0,0 +1,117 @@
+import * as React from 'react';
+
+import { cx } from '@/lib/utils';
+
+const Table = React.forwardRef<
+ HTMLTableElement,
+ React.HTMLAttributes
+
+
+));
+Table.displayName = 'Table';
+
+const TableHeader = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes