From 2b99d415decb333eaf9e1bcb644f1a9a8324e762 Mon Sep 17 00:00:00 2001 From: Noa Virellia Date: Sat, 27 Dec 2025 00:25:18 +0800 Subject: [PATCH] chore(client): eslint format Signed-off-by: Noa Virellia --- .../src/components/chart-area-interactive.tsx | 272 +++++++-------- client/src/components/data-table.tsx | 323 +++++++++--------- client/src/components/nav-documents.tsx | 29 +- client/src/components/nav-secondary.tsx | 20 +- client/src/hooks/use-mobile.ts | 22 +- client/src/routes/magicLinkSent.tsx | 24 +- client/tsconfig.app.json | 6 +- 7 files changed, 359 insertions(+), 337 deletions(-) diff --git a/client/src/components/chart-area-interactive.tsx b/client/src/components/chart-area-interactive.tsx index fff1956..262d32a 100644 --- a/client/src/components/chart-area-interactive.tsx +++ b/client/src/components/chart-area-interactive.tsx @@ -1,9 +1,9 @@ -"use client" +'use client'; -import * as React from "react" -import { Area, AreaChart, CartesianGrid, XAxis } from "recharts" +import type { ChartConfig } from '@/components/ui/chart'; +import * as React from 'react'; -import { useIsMobile } from "@/hooks/use-mobile" +import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'; import { Card, CardAction, @@ -11,158 +11,160 @@ import { CardDescription, CardHeader, CardTitle, -} from "@/components/ui/card" +} from '@/components/ui/card'; import { + ChartContainer, ChartTooltip, ChartTooltipContent, - type ChartConfig, -} from "@/components/ui/chart" +} from '@/components/ui/chart'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, -} from "@/components/ui/select" +} from '@/components/ui/select'; import { ToggleGroup, ToggleGroupItem, -} from "@/components/ui/toggle-group" +} from '@/components/ui/toggle-group'; +import { useIsMobile } from '@/hooks/use-mobile'; -export const description = "An interactive area chart" +export const description = 'An interactive area chart'; const chartData = [ - { date: "2024-04-01", desktop: 222, mobile: 150 }, - { date: "2024-04-02", desktop: 97, mobile: 180 }, - { date: "2024-04-03", desktop: 167, mobile: 120 }, - { date: "2024-04-04", desktop: 242, mobile: 260 }, - { date: "2024-04-05", desktop: 373, mobile: 290 }, - { date: "2024-04-06", desktop: 301, mobile: 340 }, - { date: "2024-04-07", desktop: 245, mobile: 180 }, - { date: "2024-04-08", desktop: 409, mobile: 320 }, - { date: "2024-04-09", desktop: 59, mobile: 110 }, - { date: "2024-04-10", desktop: 261, mobile: 190 }, - { date: "2024-04-11", desktop: 327, mobile: 350 }, - { date: "2024-04-12", desktop: 292, mobile: 210 }, - { date: "2024-04-13", desktop: 342, mobile: 380 }, - { date: "2024-04-14", desktop: 137, mobile: 220 }, - { date: "2024-04-15", desktop: 120, mobile: 170 }, - { date: "2024-04-16", desktop: 138, mobile: 190 }, - { date: "2024-04-17", desktop: 446, mobile: 360 }, - { date: "2024-04-18", desktop: 364, mobile: 410 }, - { date: "2024-04-19", desktop: 243, mobile: 180 }, - { date: "2024-04-20", desktop: 89, mobile: 150 }, - { date: "2024-04-21", desktop: 137, mobile: 200 }, - { date: "2024-04-22", desktop: 224, mobile: 170 }, - { date: "2024-04-23", desktop: 138, mobile: 230 }, - { date: "2024-04-24", desktop: 387, mobile: 290 }, - { date: "2024-04-25", desktop: 215, mobile: 250 }, - { date: "2024-04-26", desktop: 75, mobile: 130 }, - { date: "2024-04-27", desktop: 383, mobile: 420 }, - { date: "2024-04-28", desktop: 122, mobile: 180 }, - { date: "2024-04-29", desktop: 315, mobile: 240 }, - { date: "2024-04-30", desktop: 454, mobile: 380 }, - { date: "2024-05-01", desktop: 165, mobile: 220 }, - { date: "2024-05-02", desktop: 293, mobile: 310 }, - { date: "2024-05-03", desktop: 247, mobile: 190 }, - { date: "2024-05-04", desktop: 385, mobile: 420 }, - { date: "2024-05-05", desktop: 481, mobile: 390 }, - { date: "2024-05-06", desktop: 498, mobile: 520 }, - { date: "2024-05-07", desktop: 388, mobile: 300 }, - { date: "2024-05-08", desktop: 149, mobile: 210 }, - { date: "2024-05-09", desktop: 227, mobile: 180 }, - { date: "2024-05-10", desktop: 293, mobile: 330 }, - { date: "2024-05-11", desktop: 335, mobile: 270 }, - { date: "2024-05-12", desktop: 197, mobile: 240 }, - { date: "2024-05-13", desktop: 197, mobile: 160 }, - { date: "2024-05-14", desktop: 448, mobile: 490 }, - { date: "2024-05-15", desktop: 473, mobile: 380 }, - { date: "2024-05-16", desktop: 338, mobile: 400 }, - { date: "2024-05-17", desktop: 499, mobile: 420 }, - { date: "2024-05-18", desktop: 315, mobile: 350 }, - { date: "2024-05-19", desktop: 235, mobile: 180 }, - { date: "2024-05-20", desktop: 177, mobile: 230 }, - { date: "2024-05-21", desktop: 82, mobile: 140 }, - { date: "2024-05-22", desktop: 81, mobile: 120 }, - { date: "2024-05-23", desktop: 252, mobile: 290 }, - { date: "2024-05-24", desktop: 294, mobile: 220 }, - { date: "2024-05-25", desktop: 201, mobile: 250 }, - { date: "2024-05-26", desktop: 213, mobile: 170 }, - { date: "2024-05-27", desktop: 420, mobile: 460 }, - { date: "2024-05-28", desktop: 233, mobile: 190 }, - { date: "2024-05-29", desktop: 78, mobile: 130 }, - { date: "2024-05-30", desktop: 340, mobile: 280 }, - { date: "2024-05-31", desktop: 178, mobile: 230 }, - { date: "2024-06-01", desktop: 178, mobile: 200 }, - { date: "2024-06-02", desktop: 470, mobile: 410 }, - { date: "2024-06-03", desktop: 103, mobile: 160 }, - { date: "2024-06-04", desktop: 439, mobile: 380 }, - { date: "2024-06-05", desktop: 88, mobile: 140 }, - { date: "2024-06-06", desktop: 294, mobile: 250 }, - { date: "2024-06-07", desktop: 323, mobile: 370 }, - { date: "2024-06-08", desktop: 385, mobile: 320 }, - { date: "2024-06-09", desktop: 438, mobile: 480 }, - { date: "2024-06-10", desktop: 155, mobile: 200 }, - { date: "2024-06-11", desktop: 92, mobile: 150 }, - { date: "2024-06-12", desktop: 492, mobile: 420 }, - { date: "2024-06-13", desktop: 81, mobile: 130 }, - { date: "2024-06-14", desktop: 426, mobile: 380 }, - { date: "2024-06-15", desktop: 307, mobile: 350 }, - { date: "2024-06-16", desktop: 371, mobile: 310 }, - { date: "2024-06-17", desktop: 475, mobile: 520 }, - { date: "2024-06-18", desktop: 107, mobile: 170 }, - { date: "2024-06-19", desktop: 341, mobile: 290 }, - { date: "2024-06-20", desktop: 408, mobile: 450 }, - { date: "2024-06-21", desktop: 169, mobile: 210 }, - { date: "2024-06-22", desktop: 317, mobile: 270 }, - { date: "2024-06-23", desktop: 480, mobile: 530 }, - { date: "2024-06-24", desktop: 132, mobile: 180 }, - { date: "2024-06-25", desktop: 141, mobile: 190 }, - { date: "2024-06-26", desktop: 434, mobile: 380 }, - { date: "2024-06-27", desktop: 448, mobile: 490 }, - { date: "2024-06-28", desktop: 149, mobile: 200 }, - { date: "2024-06-29", desktop: 103, mobile: 160 }, - { date: "2024-06-30", desktop: 446, mobile: 400 }, -] + { date: '2024-04-01', desktop: 222, mobile: 150 }, + { date: '2024-04-02', desktop: 97, mobile: 180 }, + { date: '2024-04-03', desktop: 167, mobile: 120 }, + { date: '2024-04-04', desktop: 242, mobile: 260 }, + { date: '2024-04-05', desktop: 373, mobile: 290 }, + { date: '2024-04-06', desktop: 301, mobile: 340 }, + { date: '2024-04-07', desktop: 245, mobile: 180 }, + { date: '2024-04-08', desktop: 409, mobile: 320 }, + { date: '2024-04-09', desktop: 59, mobile: 110 }, + { date: '2024-04-10', desktop: 261, mobile: 190 }, + { date: '2024-04-11', desktop: 327, mobile: 350 }, + { date: '2024-04-12', desktop: 292, mobile: 210 }, + { date: '2024-04-13', desktop: 342, mobile: 380 }, + { date: '2024-04-14', desktop: 137, mobile: 220 }, + { date: '2024-04-15', desktop: 120, mobile: 170 }, + { date: '2024-04-16', desktop: 138, mobile: 190 }, + { date: '2024-04-17', desktop: 446, mobile: 360 }, + { date: '2024-04-18', desktop: 364, mobile: 410 }, + { date: '2024-04-19', desktop: 243, mobile: 180 }, + { date: '2024-04-20', desktop: 89, mobile: 150 }, + { date: '2024-04-21', desktop: 137, mobile: 200 }, + { date: '2024-04-22', desktop: 224, mobile: 170 }, + { date: '2024-04-23', desktop: 138, mobile: 230 }, + { date: '2024-04-24', desktop: 387, mobile: 290 }, + { date: '2024-04-25', desktop: 215, mobile: 250 }, + { date: '2024-04-26', desktop: 75, mobile: 130 }, + { date: '2024-04-27', desktop: 383, mobile: 420 }, + { date: '2024-04-28', desktop: 122, mobile: 180 }, + { date: '2024-04-29', desktop: 315, mobile: 240 }, + { date: '2024-04-30', desktop: 454, mobile: 380 }, + { date: '2024-05-01', desktop: 165, mobile: 220 }, + { date: '2024-05-02', desktop: 293, mobile: 310 }, + { date: '2024-05-03', desktop: 247, mobile: 190 }, + { date: '2024-05-04', desktop: 385, mobile: 420 }, + { date: '2024-05-05', desktop: 481, mobile: 390 }, + { date: '2024-05-06', desktop: 498, mobile: 520 }, + { date: '2024-05-07', desktop: 388, mobile: 300 }, + { date: '2024-05-08', desktop: 149, mobile: 210 }, + { date: '2024-05-09', desktop: 227, mobile: 180 }, + { date: '2024-05-10', desktop: 293, mobile: 330 }, + { date: '2024-05-11', desktop: 335, mobile: 270 }, + { date: '2024-05-12', desktop: 197, mobile: 240 }, + { date: '2024-05-13', desktop: 197, mobile: 160 }, + { date: '2024-05-14', desktop: 448, mobile: 490 }, + { date: '2024-05-15', desktop: 473, mobile: 380 }, + { date: '2024-05-16', desktop: 338, mobile: 400 }, + { date: '2024-05-17', desktop: 499, mobile: 420 }, + { date: '2024-05-18', desktop: 315, mobile: 350 }, + { date: '2024-05-19', desktop: 235, mobile: 180 }, + { date: '2024-05-20', desktop: 177, mobile: 230 }, + { date: '2024-05-21', desktop: 82, mobile: 140 }, + { date: '2024-05-22', desktop: 81, mobile: 120 }, + { date: '2024-05-23', desktop: 252, mobile: 290 }, + { date: '2024-05-24', desktop: 294, mobile: 220 }, + { date: '2024-05-25', desktop: 201, mobile: 250 }, + { date: '2024-05-26', desktop: 213, mobile: 170 }, + { date: '2024-05-27', desktop: 420, mobile: 460 }, + { date: '2024-05-28', desktop: 233, mobile: 190 }, + { date: '2024-05-29', desktop: 78, mobile: 130 }, + { date: '2024-05-30', desktop: 340, mobile: 280 }, + { date: '2024-05-31', desktop: 178, mobile: 230 }, + { date: '2024-06-01', desktop: 178, mobile: 200 }, + { date: '2024-06-02', desktop: 470, mobile: 410 }, + { date: '2024-06-03', desktop: 103, mobile: 160 }, + { date: '2024-06-04', desktop: 439, mobile: 380 }, + { date: '2024-06-05', desktop: 88, mobile: 140 }, + { date: '2024-06-06', desktop: 294, mobile: 250 }, + { date: '2024-06-07', desktop: 323, mobile: 370 }, + { date: '2024-06-08', desktop: 385, mobile: 320 }, + { date: '2024-06-09', desktop: 438, mobile: 480 }, + { date: '2024-06-10', desktop: 155, mobile: 200 }, + { date: '2024-06-11', desktop: 92, mobile: 150 }, + { date: '2024-06-12', desktop: 492, mobile: 420 }, + { date: '2024-06-13', desktop: 81, mobile: 130 }, + { date: '2024-06-14', desktop: 426, mobile: 380 }, + { date: '2024-06-15', desktop: 307, mobile: 350 }, + { date: '2024-06-16', desktop: 371, mobile: 310 }, + { date: '2024-06-17', desktop: 475, mobile: 520 }, + { date: '2024-06-18', desktop: 107, mobile: 170 }, + { date: '2024-06-19', desktop: 341, mobile: 290 }, + { date: '2024-06-20', desktop: 408, mobile: 450 }, + { date: '2024-06-21', desktop: 169, mobile: 210 }, + { date: '2024-06-22', desktop: 317, mobile: 270 }, + { date: '2024-06-23', desktop: 480, mobile: 530 }, + { date: '2024-06-24', desktop: 132, mobile: 180 }, + { date: '2024-06-25', desktop: 141, mobile: 190 }, + { date: '2024-06-26', desktop: 434, mobile: 380 }, + { date: '2024-06-27', desktop: 448, mobile: 490 }, + { date: '2024-06-28', desktop: 149, mobile: 200 }, + { date: '2024-06-29', desktop: 103, mobile: 160 }, + { date: '2024-06-30', desktop: 446, mobile: 400 }, +]; const chartConfig = { visitors: { - label: "Visitors", + label: 'Visitors', }, desktop: { - label: "Desktop", - color: "var(--primary)", + label: 'Desktop', + color: 'var(--primary)', }, mobile: { - label: "Mobile", - color: "var(--primary)", + label: 'Mobile', + color: 'var(--primary)', }, -} satisfies ChartConfig +} satisfies ChartConfig; export function ChartAreaInteractive() { - const isMobile = useIsMobile() - const [timeRange, setTimeRange] = React.useState("90d") + const isMobile = useIsMobile(); + const [timeRange, setTimeRange] = React.useState('90d'); React.useEffect(() => { if (isMobile) { - setTimeRange("7d") + setTimeRange('7d'); } - }, [isMobile]) + }, [isMobile]); const filteredData = chartData.filter((item) => { - const date = new Date(item.date) - const referenceDate = new Date("2024-06-30") - let daysToSubtract = 90 - if (timeRange === "30d") { - daysToSubtract = 30 - } else if (timeRange === "7d") { - daysToSubtract = 7 + const date = new Date(item.date); + const referenceDate = new Date('2024-06-30'); + let daysToSubtract = 90; + if (timeRange === '30d') { + daysToSubtract = 30; } - const startDate = new Date(referenceDate) - startDate.setDate(startDate.getDate() - daysToSubtract) - return date >= startDate - }) + else if (timeRange === '7d') { + daysToSubtract = 7; + } + const startDate = new Date(referenceDate); + startDate.setDate(startDate.getDate() - daysToSubtract); + return date >= startDate; + }); return ( @@ -248,26 +250,26 @@ export function ChartAreaInteractive() { tickMargin={8} minTickGap={32} tickFormatter={(value) => { - const date = new Date(value) - return date.toLocaleDateString("en-US", { - month: "short", - day: "numeric", - }) + const date = new Date(value); + return date.toLocaleDateString('en-US', { + month: 'short', + day: 'numeric', + }); }} /> { - return new Date(value).toLocaleDateString("en-US", { - month: "short", - day: "numeric", - }) + return new Date(value).toLocaleDateString('en-US', { + month: 'short', + day: 'numeric', + }); }} indicator="dot" /> - } + )} /> - ) + ); } diff --git a/client/src/components/data-table.tsx b/client/src/components/data-table.tsx index db1d40b..ea32f42 100644 --- a/client/src/components/data-table.tsx +++ b/client/src/components/data-table.tsx @@ -1,23 +1,25 @@ -import * as React from "react" +import type { DragEndEvent, UniqueIdentifier } from '@dnd-kit/core'; +import type { ColumnDef, ColumnFiltersState, Row, SortingState, VisibilityState } from '@tanstack/react-table'; +import type { ChartConfig } from '@/components/ui/chart'; import { closestCenter, DndContext, + KeyboardSensor, MouseSensor, TouchSensor, + useSensor, useSensors, - type DragEndEvent, - type UniqueIdentifier, -} from "@dnd-kit/core" -import { restrictToVerticalAxis } from "@dnd-kit/modifiers" +} from '@dnd-kit/core'; +import { restrictToVerticalAxis } from '@dnd-kit/modifiers'; import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy, -} from "@dnd-kit/sortable" -import { CSS } from "@dnd-kit/utilities" +} from '@dnd-kit/sortable'; +import { CSS } from '@dnd-kit/utilities'; import { IconChevronDown, IconChevronLeft, @@ -31,8 +33,9 @@ import { IconLoader, IconPlus, IconTrendingUp, -} from "@tabler/icons-react" +} from '@tabler/icons-react'; import { + flexRender, getCoreRowModel, getFacetedRowModel, @@ -40,27 +43,24 @@ import { getFilteredRowModel, getPaginationRowModel, getSortedRowModel, - useReactTable, - type ColumnDef, - type ColumnFiltersState, - type Row, - type SortingState, - type VisibilityState, -} from "@tanstack/react-table" -import { Area, AreaChart, CartesianGrid, XAxis } from "recharts" -import { toast } from "sonner" -import { z } from "zod" -import { useIsMobile } from "@/hooks/use-mobile" -import { Badge } from "@/components/ui/badge" -import { Button } from "@/components/ui/button" + useReactTable, + +} from '@tanstack/react-table'; +import * as React from 'react'; +import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'; +import { toast } from 'sonner'; + +import { z } from 'zod'; +import { Badge } from '@/components/ui/badge'; +import { Button } from '@/components/ui/button'; import { + ChartContainer, ChartTooltip, ChartTooltipContent, - type ChartConfig, -} from "@/components/ui/chart" -import { Checkbox } from "@/components/ui/checkbox" +} from '@/components/ui/chart'; +import { Checkbox } from '@/components/ui/checkbox'; import { Drawer, DrawerClose, @@ -70,7 +70,7 @@ import { DrawerHeader, DrawerTitle, DrawerTrigger, -} from "@/components/ui/drawer" +} from '@/components/ui/drawer'; import { DropdownMenu, DropdownMenuCheckboxItem, @@ -78,17 +78,17 @@ import { DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, -} from "@/components/ui/dropdown-menu" -import { Input } from "@/components/ui/input" -import { Label } from "@/components/ui/label" +} from '@/components/ui/dropdown-menu'; +import { Input } from '@/components/ui/input'; +import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, -} from "@/components/ui/select" -import { Separator } from "@/components/ui/separator" +} from '@/components/ui/select'; +import { Separator } from '@/components/ui/separator'; import { Table, TableBody, @@ -96,13 +96,14 @@ import { TableHead, TableHeader, TableRow, -} from "@/components/ui/table" +} from '@/components/ui/table'; import { Tabs, TabsContent, TabsList, TabsTrigger, -} from "@/components/ui/tabs" +} from '@/components/ui/tabs'; +import { useIsMobile } from '@/hooks/use-mobile'; export const schema = z.object({ id: z.number(), @@ -112,13 +113,13 @@ export const schema = z.object({ target: z.string(), limit: z.string(), reviewer: z.string(), -}) +}); // Create a separate component for the drag handle function DragHandle({ id }: { id: number }) { const { attributes, listeners } = useSortable({ id, - }) + }); return ( - ) + ); } const columns: ColumnDef>[] = [ { - id: "drag", + id: 'drag', header: () => null, cell: ({ row }) => , }, { - id: "select", + id: 'select', header: ({ table }) => (
table.toggleAllPageRowsSelected(!!value)} + onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)} aria-label="Select all" />
@@ -158,7 +159,7 @@ const columns: ColumnDef>[] = [
row.toggleSelected(!!value)} + onCheckedChange={value => row.toggleSelected(!!value)} aria-label="Select row" />
@@ -167,16 +168,16 @@ const columns: ColumnDef>[] = [ enableHiding: false, }, { - accessorKey: "header", - header: "Header", + accessorKey: 'header', + header: 'Header', cell: ({ row }) => { - return + return ; }, enableHiding: false, }, { - accessorKey: "type", - header: "Section Type", + accessorKey: 'type', + header: 'Section Type', cell: ({ row }) => (
@@ -186,31 +187,33 @@ const columns: ColumnDef>[] = [ ), }, { - accessorKey: "status", - header: "Status", + accessorKey: 'status', + header: 'Status', cell: ({ row }) => ( - {row.original.status === "Done" ? ( - - ) : ( - - )} + {row.original.status === 'Done' + ? ( + + ) + : ( + + )} {row.original.status} ), }, { - accessorKey: "target", + accessorKey: 'target', header: () =>
Target
, cell: ({ row }) => (
{ - e.preventDefault() - toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), { + e.preventDefault(); + toast.promise(new Promise(resolve => setTimeout(resolve, 1000)), { loading: `Saving ${row.original.header}`, - success: "Done", - error: "Error", - }) + success: 'Done', + error: 'Error', + }); }} >
- {table.getFilteredSelectedRowModel().rows.length} of{" "} - {table.getFilteredRowModel().rows.length} row(s) selected. + {table.getFilteredSelectedRowModel().rows.length} + {' '} + of + {' '} + {table.getFilteredRowModel().rows.length} + {' '} + row(s) selected.
@@ -541,7 +554,7 @@ export function DataTable({
- Page {table.getState().pagination.pageIndex + 1} of{" "} + Page + {' '} + {table.getState().pagination.pageIndex + 1} + {' '} + of + {' '} {table.getPageCount()}
@@ -622,34 +640,34 @@ export function DataTable({
- ) + ); } const chartData = [ - { month: "January", desktop: 186, mobile: 80 }, - { month: "February", desktop: 305, mobile: 200 }, - { month: "March", desktop: 237, mobile: 120 }, - { month: "April", desktop: 73, mobile: 190 }, - { month: "May", desktop: 209, mobile: 130 }, - { month: "June", desktop: 214, mobile: 140 }, -] + { month: 'January', desktop: 186, mobile: 80 }, + { month: 'February', desktop: 305, mobile: 200 }, + { month: 'March', desktop: 237, mobile: 120 }, + { month: 'April', desktop: 73, mobile: 190 }, + { month: 'May', desktop: 209, mobile: 130 }, + { month: 'June', desktop: 214, mobile: 140 }, +]; const chartConfig = { desktop: { - label: "Desktop", - color: "var(--primary)", + label: 'Desktop', + color: 'var(--primary)', }, mobile: { - label: "Mobile", - color: "var(--primary)", + label: 'Mobile', + color: 'var(--primary)', }, -} satisfies ChartConfig +} satisfies ChartConfig; function TableCellViewer({ item }: { item: z.infer }) { - const isMobile = useIsMobile() + const isMobile = useIsMobile(); return ( - +