legalgonews/legalgo-FE-reactrouter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: legalgonews:dce745f53d26b2d98bcdcc448be3400d6971d5db
Branches Tags
legalgonews:master
legalgonews:dev
...
compare: legalgonews:eedb1558802c9b87c9f9b9b20143abb59a7c83b1
Branches Tags
legalgonews:dev
legalgonews:master

2 Commits
dce745f53d ... eedb155880

Author SHA1 Message Date
Ardeman
eedb155880 refactor: remove ProfileIcon component and update image handling for author profiles 2025-03-25 19:25:49 +08:00
Ardeman
84451f1fd4 feat: add API endpoints for fetching staff profiles and staff list 2025-03-25 19:07:29 +08:00
13 changed files with 121 additions and 117 deletions
Show Stats Expand all files Collapse all files

2
app/apis/admin/get-staff.ts → app/apis/admin/get-profile.ts
View File

@ -11,7 +11,7 @@ const staffResponseSchema = z.object({
}),
})
export const getStaff = async (parameters: THttpServer) => {
export const getProfile = async (parameters: THttpServer) => {
try {
const { data } = await HttpServer(parameters).get(`/api/staff/profile`)
return staffResponseSchema.parse(data)

25
app/apis/admin/get-staffs.ts Normal file
View File

@ -0,0 +1,25 @@
import { z } from 'zod'
import { HttpServer, type THttpServer } from '~/libs/http-server'
const staffResponseSchema = z.object({
id: z.string(),
email: z.string(),
name: z.string(),
profile_picture: z.string(),
})
const staffsResponseSchema = z.object({
data: z.array(staffResponseSchema),
})
export type TStaffResponse = z.infer<typeof staffResponseSchema>
export const getStaffs = async (parameters: THttpServer) => {
try {
const { data } = await HttpServer(parameters).get(`/api/staff/get-all`)
return staffsResponseSchema.parse(data)
} catch (error) {
// eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
return Promise.reject(error)
}
}

23
app/components/icons/profile.tsx
View File

@ -1,23 +0,0 @@
import type { JSX, SVGProps } from 'react'
export const ProfileIcon = (
properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
) => {
return (
<svg
width={18}
height={19}
viewBox="0 0 18 19"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...properties}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M12.97 5.82A3.956 3.956 0 019 9.789a3.956 3.956 0 01-3.97-3.97A3.955 3.955 0 019 1.853a3.955 3.955 0 013.97 3.968zM9 16.852c-3.253 0-6-.53-6-2.57s2.764-2.55 6-2.55c3.254 0 6 .529 6 2.569s-2.764 2.55-6 2.55z"
fill="currentColor"
/>
</svg>
)
}

18
app/components/ui/news-author.tsx
View File

@ -1,5 +1,4 @@
import type { TAuthorResponse } from '~/apis/common/get-news'
import { ProfileIcon } from '~/components/icons/profile'
import { formatDate } from '~/utils/formatter'
type TDetailNewsAuthor = {
@ -11,15 +10,14 @@ type TDetailNewsAuthor = {
export const NewsAuthor = ({ author, live_at, text }: TDetailNewsAuthor) => {
return (
<div className="mb-2 flex items-center gap-2 align-middle">
{author?.profile_picture ? (
<img
src={author?.profile_picture}
alt={author?.name}
className="size-12 rounded-full bg-[#C4C4C4] object-cover"
/>
) : (
<ProfileIcon className="size-12 rounded-full bg-[#C4C4C4]" />
)}
<img
src={author?.profile_picture || '/images/profile-placeholder.svg'}
onError={(event) => {
event.currentTarget.src = '/images/profile-placeholder.svg'
}}
alt={author?.name}
className="size-12 rounded-full bg-[#C4C4C4] object-cover"
/>
<div>
<h4 className="text-md">{author?.name}</h4>

21
app/layouts/admin/navbar.tsx
View File

@ -6,7 +6,6 @@ import {
import { ChevronDownIcon } from '@heroicons/react/24/solid'
import { Link, useFetcher, useRouteLoaderData } from 'react-router'
import { ProfileIcon } from '~/components/icons/profile'
import { Button } from '~/components/ui/button'
import { APP } from '~/configs/meta'
import { useAdminContext } from '~/contexts/admin'
@ -34,15 +33,17 @@ export const Navbar = () => {
<Popover className="relative">
<PopoverButton className="flex w-3xs cursor-pointer items-center justify-between rounded-xl p-2 ring-1 ring-[#707FDD]/10 hover:shadow focus:outline-none">
<div className="flex items-center space-x-3">
{staffData?.profile_picture ? (
<img
src={staffData?.profile_picture}
alt={staffData?.name}
className="size-8 rounded-full bg-[#C4C4C4] object-cover"
/>
) : (
<ProfileIcon className="size-8 rounded-full bg-[#C4C4C4]" />
)}
<img
src={
staffData?.profile_picture ||
'/images/profile-placeholder.svg'
}
onError={(event) => {
event.currentTarget.src = '/images/profile-placeholder.svg'
}}
alt={staffData?.name}
className="size-8 rounded-full bg-[#C4C4C4] object-cover"
/>
<span className="text-sm">{staffData?.name}</span>
</div>

2
app/pages/dashboard-contents/index.tsx
View File

@ -72,7 +72,7 @@ export const ContentsPage = () => {
2: (value: TAuthorResponse) => (
<>
<div>{value.name}</div>
<div className="text-sm text-[#7C7C7C]">ID: {value.id.slice(0, 8)}</div>
<div className="text-xs text-[#7C7C7C]">ID: {value.id.slice(0, 8)}</div>
</>
),
3: (value: string) => <span className="text-sm">{value}</span>,

115
app/pages/dashboard-staffs/index.tsx
View File

@ -1,67 +1,62 @@
import { PlusIcon } from '@heroicons/react/24/solid'
import { Link } from 'react-router'
import DT, { type ConfigColumns } from 'datatables.net-dt'
import DataTable, { type DataTableSlots } from 'datatables.net-react'
import { Link, useRouteLoaderData } from 'react-router'
import type { TStaffResponse } from '~/apis/admin/get-staffs'
import { Button } from '~/components/ui/button'
import { UiTable } from '~/components/ui/table'
import { TitleDashboard } from '~/components/ui/title-dashboard'
import type { loader } from '~/routes/_admin.lg-admin._dashboard.staffs._index'
export const StaffsPage = () => {
// const loaderData = useRouteLoaderData<typeof loader>(
// 'routes/_admin.lg-admin._dashboard.staffs._index',
// )
const loaderData = useRouteLoaderData<typeof loader>(
'routes/_admin.lg-admin._dashboard.staffs._index',
)
// DataTable.use(DT)
// const dataTable =
// loaderData?.usersData?.sort(
// (a, b) =>
// new Date(b.subscribe.start_date).getTime() -
// new Date(a.subscribe.start_date).getTime(),
// ) || []
DataTable.use(DT)
const { staffsData: dataTable } = loaderData || {}
// const dataColumns: ConfigColumns[] = [
// {
// title: 'No',
// render: (
// _data: unknown,
// _type: unknown,
// _row: unknown,
// meta: { row: number },
// ) => {
// return meta.row + 1
// },
// },
// {
// title: 'Tanggal Daftar',
// data: 'created_at',
// },
// {
// title: 'User',
// },
// {
// title: 'Phone',
// data: 'phone',
// },
// {
// title: 'Status',
// data: 'subscribe.subscribe_plan.name',
// },
// ]
// const dataSlot: DataTableSlots = {
// 1: (value: string) => formatDate(value),
// 2: (_value: unknown, _type: unknown, data: TUserResponse) => (
// <div>
// <div>{data.email}</div>
// <div className="text-sm text-[#7C7C7C]">ID: {data.id.slice(0, 8)}</div>
// </div>
// ),
// 3: (value: string) => <span>{value}</span>,
// 4: (value: TColorBadge, _type: unknown, data: TUserResponse) => (
// <span
// className={`rounded-lg px-2 text-sm ${getStatusBadge(data.subscribe.status as TColorBadge)}`}
// >
// {value}
// </span>
// ),
// }
const dataColumns: ConfigColumns[] = [
{
title: 'No',
render: (
_data: unknown,
_type: unknown,
_row: unknown,
meta: { row: number },
) => {
return meta.row + 1
},
},
{
title: 'Staf',
},
{
title: 'Email',
data: 'email',
},
]
const dataSlot: DataTableSlots = {
1: (_value: unknown, _type: unknown, data: TStaffResponse) => (
<div className="flex items-center gap-x-2">
<img
src={data?.profile_picture || '/images/profile-placeholder.svg'}
onError={(event) => {
event.currentTarget.src = '/images/profile-placeholder.svg'
}}
alt={data?.name}
className="size-8 rounded-full bg-[#C4C4C4] object-cover"
/>
<div>
<div>{data.name}</div>
<div className="text-xs text-[#7C7C7C]">
ID: {data.id.slice(0, 8)}
</div>
</div>
</div>
),
}
return (
<div className="relative">
@ -78,12 +73,12 @@ export const StaffsPage = () => {
</Button>
</div>
{/* <UiTable
data={dataTable || []}
<UiTable
data={dataTable}
columns={dataColumns}
slots={dataSlot}
title="Daftar Users"
/> */}
title="Daftar Staf"
/>
</div>
)
}

2
app/pages/dashboard-subscribe-plan/index.tsx
View File

@ -115,7 +115,7 @@ export const SubscribePlanPage = () => {
</div>
<UiTable
data={dataTable || []}
data={dataTable}
columns={dataColumns}
slots={dataSlot}
options={{

4
app/pages/dashboard-users/index.tsx
View File

@ -55,7 +55,7 @@ export const UsersPage = () => {
2: (_value: unknown, _type: unknown, data: TUserResponse) => (
<div>
<div>{data.email}</div>
<div className="text-sm text-[#7C7C7C]">ID: {data.id.slice(0, 8)}</div>
<div className="text-xs text-[#7C7C7C]">ID: {data.id.slice(0, 8)}</div>
</div>
),
3: (value: string) => <span>{value}</span>,
@ -77,7 +77,7 @@ export const UsersPage = () => {
</div>
<UiTable
data={dataTable || []}
data={dataTable}
columns={dataColumns}
slots={dataSlot}
title="Daftar Pengguna"

12
app/routes/_admin.lg-admin._dashboard.staffs._index.tsx
View File

@ -1,15 +1,17 @@
import { isRouteErrorResponse } from 'react-router'
import { getStaffs } from '~/apis/admin/get-staffs'
import { handleCookie } from '~/libs/cookies'
import { StaffsPage } from '~/pages/dashboard-staffs'
import type { Route } from './+types/_admin.lg-admin._dashboard.staffs._index'
// export const loader = async ({ request }: Route.LoaderArgs) => {
// const { staffToken: accessToken } = await handleCookie(request)
// const { data: usersData } = await getUsers({ accessToken })
export const loader = async ({ request }: Route.LoaderArgs) => {
const { staffToken: accessToken } = await handleCookie(request)
const { data: staffsData } = await getStaffs({ accessToken })
// return { usersData }
// }
return { staffsData }
}
export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
let message = 'Oops!'

4
app/routes/_admin.lg-admin.tsx
View File

@ -1,6 +1,6 @@
import { isRouteErrorResponse, Outlet, redirect } from 'react-router'
import { getStaff } from '~/apis/admin/get-staff'
import { getProfile } from '~/apis/admin/get-profile'
import { AUTH_PAGES } from '~/configs/pages'
import { AdminDefaultLayout } from '~/layouts/admin/default'
import { handleCookie } from '~/libs/cookies'
@ -14,7 +14,7 @@ export const loader = async ({ request }: Route.LoaderArgs) => {
let staffData
if (accessToken) {
const { data } = await getStaff({ accessToken })
const { data } = await getProfile({ accessToken })
staffData = data
}

4
app/routes/actions.admin.login.ts
View File

@ -3,7 +3,7 @@ import { data } from 'react-router'
import { getValidatedFormData } from 'remix-hook-form'
import { XiorError } from 'xior'
import { getStaff } from '~/apis/admin/get-staff'
import { getProfile } from '~/apis/admin/get-profile'
import { staffLoginRequest } from '~/apis/admin/login-staff'
import { loginSchema, type TLoginSchema } from '~/pages/staff-login'
import { generateStaffTokenCookie } from '~/utils/token'
@ -28,7 +28,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
const { data: loginData } = await staffLoginRequest(payload)
const { token: accessToken } = loginData
const { data: staffData } = await getStaff({ accessToken })
const { data: staffData } = await getProfile({ accessToken })
const tokenCookie = generateStaffTokenCookie({ accessToken })
const headers = new Headers()

6
public/images/profile-placeholder.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg"
class="size-8 rounded-full bg-[#C4C4C4]">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12.97 5.82A3.956 3.956 0 019 9.789a3.956 3.956 0 01-3.97-3.97A3.955 3.955 0 019 1.853a3.955 3.955 0 013.97 3.968zM9 16.852c-3.253 0-6-.53-6-2.57s2.764-2.55 6-2.55c3.254 0 6 .529 6 2.569s-2.764 2.55-6 2.55z"
fill="currentColor"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 440 B