mazyar/tm_panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add: shared skeleton, dark toggle bg, fixed: multi select patching issue

Browse Source
This commit is contained in:
AmirReza Jamali
2025-09-20 19:35:58 +03:30
parent 0ea2ff635b
commit 4a7a1c66f7
14 changed files with 48 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Tables/admins/Skeleton.tsx
-41
View File
@@ -1,41 +0,0 @@
import { Skeleton } from "@/components/ui/skeleton";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
export function AdminsSkeleton() {
return (
<div className="rounded-[10px] bg-white px-7.5 pb-4 pt-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card">
<h2 className="mb-5.5 text-body-2xlg font-bold text-dark dark:text-white">
Admins
</h2>
<Table>
<TableHeader>
<TableRow className="border-none uppercase [&>th]:text-center">
<TableHead className="!text-left">Full name</TableHead>
<TableHead>Email</TableHead>
<TableHead className="!text-right">Role</TableHead>
<TableHead>Username</TableHead>
<TableHead>Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{Array.from({ length: 5 }).map((_, i) => (
<TableRow key={i}>
<TableCell colSpan={100}>
<Skeleton className="h-8" />
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
);
}
src/components/Tables/admins/index.tsx
+9 -7
View File
@@ -1,5 +1,7 @@
"use client";
import { PencilSquareIcon, TrashIcon } from "@/assets/icons";
import ConfirmationModal from "@/components/ui/ConfirmationModal";
import {
Table,
TableBody,
@@ -8,11 +10,9 @@ import {
TableHeader,
TableRow,
} from "@/components/ui/table";
import { useAdminsPresenter } from "./useAdminsPresenter";
import { PencilSquareIcon, TrashIcon } from "@/assets/icons";
import ConfirmationModal from "@/components/ui/ConfirmationModal";
import { AdminsSkeleton } from "./Skeleton";
import TableSkeleton from "@/components/ui/TableSkeleton";
import Link from "next/link";
import { useAdminsPresenter } from "./useAdminsPresenter";
const AdminsTable = () => {
const {
@@ -27,7 +27,6 @@ const AdminsTable = () => {
pathName,
} = useAdminsPresenter();
if (isPending) return <AdminsSkeleton />;
return (
<div className="flex flex-col rounded-[10px] bg-white px-7.5 pb-4 pt-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card">
<button className="mb-5 flex w-fit justify-center self-end rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90">
@@ -53,11 +52,14 @@ const AdminsTable = () => {
</TableHead>
</TableRow>
</TableHeader>
{isPending && <TableSkeleton column={5} />}
<TableBody>
{allUsers.map((item) => {
return (
<TableRow key={item.id} className="odd:bg-gray-2 dark:odd:bg-gray-7">
<TableRow
key={item.id}
className="odd:bg-gray-2 dark:odd:bg-gray-7"
>
<TableCell className="text-start" colSpan={100}>
{item.full_name}
</TableCell>
src/components/Tables/companies/Skeleton.tsx
-47
View File
@@ -1,47 +0,0 @@
"use client";
import { Skeleton } from "@/components/ui/skeleton";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { useCompanyListPresenter } from "./useCompanyListPresenter";
export function CompaniesSkeleton() {
const { columns } = useCompanyListPresenter();
return (
<div className="rounded-[10px] bg-white px-7.5 pb-4 pt-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card">
<h2 className="mb-5.5 text-body-2xlg font-bold text-dark dark:text-white">
Companies
</h2>
<Table>
<TableHeader>
<TableRow className="border-none uppercase [&>th]:text-center">
{columns.map((column) => (
<TableHead
colSpan={100}
className="text-start font-extrabold"
key={column}
>
{column}
</TableHead>
))}
</TableRow>
</TableHeader>
<TableBody>
{Array.from({ length: 5 }).map((_, i) => (
<TableRow key={i}>
<TableCell colSpan={100}>
<Skeleton className="h-8" />
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
);
}
src/components/Tables/companies/company-categories/index.tsx
+2 -2
View File
@@ -48,7 +48,7 @@ const CompanyCategoriesTable = () => {
<TableHead colSpan={100}>Actions</TableHead>
</TableRow>
</TableHeader>
{isLoading && <TableSkeleton column={5} />}
{isLoading && <TableSkeleton column={6} />}
<TableBody>
<IsVisible condition={!categories}>
<TableRow>
@@ -69,7 +69,7 @@ const CompanyCategoriesTable = () => {
</TableCell>
<TableCell colSpan={100}>
<IsVisible condition={isToggling}>
<Skeleton></Skeleton>
<Skeleton className="h-8 bg-neutral-400 dark:bg-dark-4" />
</IsVisible>
<IsVisible condition={!isToggling}>
<Switch
src/components/Tables/companies/index.tsx
+6 -7
View File
@@ -1,7 +1,6 @@
"use client";
import Link from "next/link";
import { CompaniesSkeleton } from "./Skeleton";
import { useCompanyListPresenter } from "./useCompanyListPresenter";
import { PencilSquareIcon, TrashIcon } from "@/assets/icons";
import ConfirmationModal from "@/components/ui/ConfirmationModal";
import {
Table,
TableBody,
@@ -10,9 +9,10 @@ import {
TableHeader,
TableRow,
} from "@/components/ui/table";
import { PencilSquareIcon, TrashIcon } from "@/assets/icons";
import ConfirmationModal from "@/components/ui/ConfirmationModal";
import TableSkeleton from "@/components/ui/TableSkeleton";
import { formatPhoneNumber } from "@/utils/shared";
import Link from "next/link";
import { useCompanyListPresenter } from "./useCompanyListPresenter";
interface IProps {}
@@ -29,7 +29,6 @@ const CompaniesTable = ({}: IProps) => {
onConfirmDelete,
modalConfig,
} = useCompanyListPresenter();
if (isPending) return <CompaniesSkeleton />;
return (
<div className="flex flex-col rounded-[10px] bg-white px-7.5 pb-4 pt-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card">
<button className="mb-5 flex w-fit justify-center self-end rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90">
@@ -49,7 +48,7 @@ const CompaniesTable = ({}: IProps) => {
))}
</TableRow>
</TableHeader>
{isPending && <TableSkeleton column={columns.length} />}
<TableBody>
{allCompanies.map((company, index) =>
!company ? (
src/components/Tables/customers/Skeleton.tsx
-43
View File
@@ -1,43 +0,0 @@
import { Skeleton } from "@/components/ui/skeleton";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
export function CustomersSkeleton() {
return (
<div className="rounded-[10px] bg-white px-7.5 pb-4 pt-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card">
<h2 className="mb-5.5 text-body-2xlg font-bold text-dark dark:text-white">
Tenders
</h2>
<Table>
<TableHeader>
<TableRow className="border-none uppercase [&>th]:text-center">
<TableHead className="uppercase">full name</TableHead>
<TableHead className="uppercase">email</TableHead>
<TableHead className="uppercase">created at</TableHead>
<TableHead className="uppercase">type</TableHead>
<TableHead className="uppercase">status</TableHead>
<TableHead className="uppercase">company</TableHead>
<TableHead className="uppercase">actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{Array.from({ length: 5 }).map((_, i) => (
<TableRow key={i}>
<TableCell colSpan={100}>
<Skeleton className="h-8" />
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
);
}
src/components/Tables/customers/index.tsx
+11 -13
View File
@@ -1,7 +1,6 @@
"use client";
import Link from "next/link";
import { CustomersSkeleton } from "./Skeleton";
import useCustomerListPresenter from "./useCustomerListPresenter";
import { PencilSquareIcon, TrashIcon, UserIcon } from "@/assets/icons";
import ConfirmationModal from "@/components/ui/ConfirmationModal";
import {
Table,
TableBody,
@@ -10,16 +9,15 @@ import {
TableHeader,
TableRow,
} from "@/components/ui/table";
import { PencilSquareIcon, TrashIcon, UserIcon } from "@/assets/icons";
import ConfirmationModal from "@/components/ui/ConfirmationModal";
import Link from "next/link";
import useCustomerListPresenter from "./useCustomerListPresenter";
import AssignToCompanyModalContent from "./AssignToCompanyModalContent";
import Modal from "@/components/ui/modal";
import { TAssignCustomerToCompanyCredentials } from "@/lib/api";
import { toast } from "react-toastify";
import Status from "@/components/ui/Status";
import TableSkeleton from "@/components/ui/TableSkeleton";
import { unixToDate } from "@/utils/shared";
import { custom } from "zod";
import { toast } from "react-toastify";
import AssignToCompanyModalContent from "./AssignToCompanyModalContent";
const CustomersTable = () => {
const {
@@ -40,7 +38,6 @@ const CustomersTable = () => {
isAssignCompanyModalOpen,
setIsAssignCompanyModalOpen,
} = useCustomerListPresenter();
if (isPending) return <CustomersSkeleton />;
return (
<div className="flex flex-col rounded-[10px] bg-white px-7.5 pb-4 pt-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card">
<button className="mb-5 flex w-fit justify-center self-end rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90">
@@ -60,6 +57,7 @@ const CustomersTable = () => {
))}
</TableRow>
</TableHeader>
{isPending && <TableSkeleton column={columns.length} />}
<TableBody>
{allCustomers.map((customer) => (
<TableRow key={customer.id}>
@@ -69,11 +67,11 @@ const CustomersTable = () => {
{unixToDate(customer.created_at)}
</TableCell>
<TableCell colSpan={100} className="uppercase">{customer.type}</TableCell>
<TableCell colSpan={100} className="uppercase">
{customer.type}
</TableCell>
<TableCell colSpan={100}>
<Status status={customer.status}>
<Status status={customer.status}>{customer.status}</Status>
</Status>
</TableCell>
<TableCell colSpan={100}>
{customer.companies?.length ? (
src/components/Tables/tenders/Skeleton.tsx
-35
View File
@@ -1,35 +0,0 @@
import { Skeleton } from "@/components/ui/skeleton";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
export function TendersSkeleton() {
return (
<TableBody>
{Array.from({ length: 20 }).map((_, i) => (
<TableRow key={i}>
<TableCell colSpan={100}>
<Skeleton className="h-8" />
</TableCell>
<TableCell colSpan={100}>
<Skeleton className="h-8" />
</TableCell>
<TableCell colSpan={100}>
<Skeleton className="h-8" />
</TableCell>
<TableCell colSpan={100}>
<Skeleton className="h-8" />
</TableCell>
<TableCell colSpan={100}>
<Skeleton className="h-8" />
</TableCell>
</TableRow>
))}
</TableBody>
);
}