Refactor: Reorganize project structure and consolidate server operations

app/admin/add-barometer/barometer-form.tsx

@@ -33,18 +33,18 @@ import {
   SelectValue,
 } from '@/components/ui/select'
 import { Textarea } from '@/components/ui/textarea'
-import { createBarometer } from '@/lib/barometers/actions'
-import type { AllBrandsDTO } from '@/lib/brands/queries'
-import type { CategoriesDTO } from '@/lib/categories/queries'
-import type { ConditionsDTO } from '@/lib/conditions/queries'
-import type { MaterialsDTO } from '@/lib/materials/queries'
-import type { MovementsDTO } from '@/lib/movements/queries'
+import { createBarometer } from '@/server/barometers/actions'
+import type { AllBrandsDTO } from '@/server/brands/queries'
+import type { CategoriesDTO } from '@/server/categories/queries'
+import type { ConditionsDTO } from '@/server/conditions/queries'
+import type { MaterialsDTO } from '@/server/materials/queries'
+import type { MovementsDTO } from '@/server/movements/queries'
+import { cn } from '@/utils'
 import {
   type BarometerFormData,
   BarometerFormTransformSchema,
   BarometerFormValidationSchema,
-} from '@/lib/schemas/barometer-form.schema'
-import { cn } from '@/utils'
+} from './barometer-form.schema'
 import { Dimensions } from './dimensions'
 import { FileUpload } from './file-upload'
 

app/admin/add-barometer/file-upload.tsx

@@ -10,7 +10,8 @@ import { Card } from '@/components/ui/card'
 import { FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { imageStorage } from '@/constants/globals'
-import { createImageUrls, deleteImage, uploadFileToCloud } from '@/services/fetch'
+import { createImageUrls, deleteImage } from '@/server/images/actions'
+import { uploadFileToCloud } from '@/server/images/upload'
 
 interface FileUploadProps {
   name: string

app/admin/add-barometer/page.tsx

@@ -1,10 +1,10 @@
 import 'server-only'
 
-import { getAllBrands } from '@/lib/brands/queries'
-import { getCategories } from '@/lib/categories/queries'
-import { getConditions } from '@/lib/conditions/queries'
-import { getMaterials } from '@/lib/materials/queries'
-import { getMovements } from '@/lib/movements/queries'
+import { getAllBrands } from '@/server/brands/queries'
+import { getCategories } from '@/server/categories/queries'
+import { getConditions } from '@/server/conditions/queries'
+import { getMaterials } from '@/server/materials/queries'
+import { getMovements } from '@/server/movements/queries'
 import type { DynamicOptions } from '@/types'
 import BarometerForm from './barometer-form'
 

app/admin/add-brand/brand-add-form.tsx

@@ -8,10 +8,11 @@ import { z } from 'zod'
 import { IconUpload, ImageUpload, MultiSelect, RequiredFieldMark } from '@/components/elements'
 import * as UI from '@/components/ui'
 import { imageStorage } from '@/constants'
-import { createBrand } from '@/lib/brands/actions'
-import type { AllBrandsDTO } from '@/lib/brands/queries'
-import type { CountryListDTO } from '@/lib/counties/queries'
-import { createImageUrls, uploadFileToCloud } from '@/services/fetch'
+import { createBrand } from '@/server/brands/actions'
+import type { AllBrandsDTO } from '@/server/brands/queries'
+import type { CountryListDTO } from '@/server/counties/queries'
+import { createImageUrls } from '@/server/images/actions'
+import { uploadFileToCloud } from '@/server/images/upload'
 import { generateIcon, getThumbnailBase64 } from '@/utils'
 
 // Zod validation schema

app/admin/add-brand/page.tsx

@@ -1,7 +1,7 @@
 import 'server-only'
 
-import { getAllBrands } from '@/lib/brands/queries'
-import { getCountries } from '@/lib/counties/queries'
+import { getAllBrands } from '@/server/brands/queries'
+import { getCountries } from '@/server/counties/queries'
 import type { DynamicOptions } from '@/types'
 import BrandAddForm from './brand-add-form'
 

app/admin/add-document/document-form.tsx

@@ -10,9 +10,9 @@ import { z } from 'zod'
 import { MultiSelect, RequiredFieldMark } from '@/components/elements'
 import * as UI from '@/components/ui'
 import { imageStorage } from '@/constants/globals'
-import type { AllBarometersDTO } from '@/lib/barometers/queries'
-import type { ConditionsDTO } from '@/lib/conditions/queries'
-import { createDocument } from '@/lib/documents/actions'
+import type { AllBarometersDTO } from '@/server/barometers/queries'
+import type { ConditionsDTO } from '@/server/conditions/queries'
+import { createDocument } from '@/server/documents/actions'
 import { getThumbnailBase64 } from '@/utils'
 import { FileUpload } from '../add-barometer/file-upload'
 

app/admin/add-document/page.tsx

@@ -1,7 +1,7 @@
 import 'server-only'
 
-import { getAllBarometers } from '@/lib/barometers/queries'
-import { getConditions } from '@/lib/conditions/queries'
+import { getAllBarometers } from '@/server/barometers/queries'
+import { getConditions } from '@/server/conditions/queries'
 import type { DynamicOptions } from '@/types'
 import { DocumentForm } from './document-form'
 

app/admin/reports/page.tsx

@@ -1,78 +1,25 @@
-'use client'
-
-import { useQuery } from '@tanstack/react-query'
-import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table'
-import dayjs from 'dayjs'
-import Link from 'next/link'
-import { useSearchParams } from 'next/navigation'
-import { Table } from '@/components/elements'
 import { Pagination } from '@/components/ui'
-import { FrontRoutes } from '@/constants'
-import { fetchReportList } from '@/services'
-import type { InaccuracyReportListDTO } from '@/types'
+import { getInaccuracyReports } from '@/server/reports/queries'
+import type { DynamicOptions } from '@/types'
+import { ReportTable } from './report-table'
+
+export const dynamic: DynamicOptions = 'force-dynamic'
+const itemsOnPage = 12
+
+interface Props {
+  searchParams: Promise<{ page: string }>
+}
 
-const itemsOnPage = 6
+export default async function ReportList({ searchParams }: Props) {
+  const { page } = await searchParams
+  const pageNo = Number.parseInt(page, 10) || 1
+  const { reports, totalPages } = await getInaccuracyReports(pageNo, itemsOnPage)
 
-export default function ReportList() {
-  const searchParams = useSearchParams()
-  const page = searchParams.get('page') ?? '1'
-  const { data } = useQuery({
-    queryKey: ['inaccuracyReport', page],
-    queryFn: () =>
-      fetchReportList({
-        page,
-        size: String(itemsOnPage),
-      }),
-  })
-  const { accessor } = createColumnHelper<InaccuracyReportListDTO['reports'][number]>()
-  const columns = [
-    accessor('barometer.name', {
-      header: 'Barometer',
-      cell: info => (
-        <Link
-          href={FrontRoutes.Barometer + info.row.original.barometer.slug}
-          className="text-foreground hover:text-primary text-sm hover:underline"
-        >
-          {info.getValue()}
-        </Link>
-      ),
-    }),
-    accessor('reporterName', {
-      header: 'Name',
-    }),
-    accessor('reporterEmail', {
-      header: 'Email',
-      cell: info => (
-        <a
-          href={`mailto:${info.getValue()}`}
-          className="text-foreground hover:text-primary text-sm hover:underline"
-        >
-          {info.getValue()}
-        </a>
-      ),
-    }),
-    accessor('createdAt', {
-      header: 'Created at',
-      cell: info => dayjs(info.getValue()).format('MMMM D, YYYY HH:mm'),
-    }),
-    accessor('description', {
-      header: 'Description',
-      cell: info => <div className="min-w-80">{info.getValue()}</div>,
-    }),
-    accessor('status', {
-      header: 'Status',
-    }),
-  ]
-  const table = useReactTable({
-    columns,
-    data: data?.reports ?? [],
-    getCoreRowModel: getCoreRowModel(),
-  })
   return (
     <>
       <h3 className="my-4">Inaccuracy Reports</h3>
-      <Table table={table} />
-      <Pagination className="mx-auto mt-4" value={+page} total={data?.totalPages ?? 1} />
+      <ReportTable reports={reports} />
+      <Pagination className="mx-auto mt-4" value={pageNo} total={totalPages ?? 1} />
     </>
   )
 }

app/admin/reports/report-table.tsx

@@ -0,0 +1,60 @@
+'use client'
+
+import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import dayjs from 'dayjs'
+import Link from 'next/link'
+import { Table } from '@/components/elements'
+import { FrontRoutes } from '@/constants'
+import type { InaccuracyReportsDTO } from '@/server/reports/queries'
+
+interface Props {
+  reports: InaccuracyReportsDTO['reports']
+}
+
+export function ReportTable({ reports }: Props) {
+  const { accessor } = createColumnHelper<InaccuracyReportsDTO['reports'][number]>()
+  const columns = [
+    accessor('barometer.name', {
+      header: 'Barometer',
+      cell: info => (
+        <Link
+          href={FrontRoutes.Barometer + info.row.original.barometer.slug}
+          className="text-foreground hover:text-primary text-sm hover:underline"
+        >
+          {info.getValue()}
+        </Link>
+      ),
+    }),
+    accessor('reporterName', {
+      header: 'Name',
+    }),
+    accessor('reporterEmail', {
+      header: 'Email',
+      cell: info => (
+        <a
+          href={`mailto:${info.getValue()}`}
+          className="text-foreground hover:text-primary text-sm hover:underline"
+        >
+          {info.getValue()}
+        </a>
+      ),
+    }),
+    accessor('createdAt', {
+      header: 'Created at',
+      cell: info => dayjs(info.getValue()).format('MMMM D, YYYY HH:mm'),
+    }),
+    accessor('description', {
+      header: 'Description',
+      cell: info => <div className="min-w-80">{info.getValue()}</div>,
+    }),
+    accessor('status', {
+      header: 'Status',
+    }),
+  ]
+  const table = useReactTable({
+    columns,
+    data: reports ?? [],
+    getCoreRowModel: getCoreRowModel(),
+  })
+  return <Table table={table} />
+}