Saeed0920/inogen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update the scroll style in fix some style in tables

Browse Source
This commit is contained in:
Saeed AB 2025-08-12 13:42:15 +03:30
parent ccf1139fe6
commit fa4eb57ec7
3 changed files with 67 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
app/app.css
View File

@ -402,3 +402,42 @@ html[dir="rtl"] body {
background-position: 200% 0;
}
}
/* Table/container specific custom dark scrollbar */
.custom-scrollbar {
scrollbar-width: thin; /* Firefox */
scrollbar-color: rgba(100, 116, 139, 0.6) transparent; /* thumb track */
}
.custom-scrollbar::-webkit-scrollbar {
width: 2px;
height: 2px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: rgba(241, 245, 249, 0.6); /* slate-100 */
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: linear-gradient(to bottom, rgba(16, 185, 129, 0.6), rgba(16, 185, 129, 0.9)); /* emerald */
border-radius: 9999px;
border: .5px solid transparent;
background-clip: padding-box;
}
.custom-scrollbar:hover::-webkit-scrollbar-thumb {
background: linear-gradient(to bottom, rgba(16, 185, 129, 0.8), rgba(16, 185, 129, 1));
}
.dark .custom-scrollbar {
scrollbar-color: rgba(16, 185, 129, 0.6) rgba(30, 41, 59, 0.6); /* thumb track */
}
.dark .custom-scrollbar::-webkit-scrollbar-track {
background: rgba(30, 41, 59, 0.6); /* slate-800 */
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
background: linear-gradient(to bottom, rgba(16, 185, 129, 0.5), rgba(16, 185, 129, 0.9));
border-color: rgba(30, 41, 59, 0.6);
}

26
app/components/dashboard/project-management/process-innovation-page.tsx
View File

@ -161,7 +161,7 @@ export function ProcessInnovationPage() {
id: "currency-reduction",
title: "کاهش ارز بری",
value: formatNumber(stats.currencyReductionSum.toFixed?.(0) ?? stats.currencyReductionSum),
description: "میلیون ریال کاهش یافته",
description: "دلار کاهش یافته",
icon: <DollarSign/>,
color: "text-emerald-400",
},
@ -690,16 +690,15 @@ export function ProcessInnovationPage() {
{/* Data Table */}
<Card className="bg-transparent backdrop-blur-sm rounded-2xl overflow-hidden">
<CardContent>
<CardContent className="p-0">
<div className="relative">
<div className="overflow-auto max-h-[calc(100vh-400px)]">
<Table>
<Table containerClassName="overflow-auto custom-scrollbar max-h-[calc(90vh-400px)]">
<TableHeader>
<TableRow className="bg-[#3F415A]">
{columns.map((column) => (
<TableHead
key={column.key}
className="text-right font-persian whitespace-nowrap text-gray-200 font-medium"
className="text-right font-persian whitespace-nowrap text-gray-200 font-medium sticky top-0 z-20 bg-[#3F415A]"
style={{ width: column.width }}
>
{column.key === "select" ? (
@ -713,7 +712,7 @@ export function ProcessInnovationPage() {
) : column.sortable ? (
<button
onClick={() => handleSort(column.key)}
className="flex items-center gap-2 hover:text-emerald-400 transition-colors"
className="flex items-center gap-2"
>
<span>{column.label}</span>
{sortConfig.field === column.key ? (
@ -735,17 +734,17 @@ export function ProcessInnovationPage() {
</TableHeader>
<TableBody>
{loading ? (
// Skeleton loading rows
// Skeleton loading rows (compact)
Array.from({ length: 10 }).map((_, index) => (
<TableRow key={`skeleton-${index}`}>
<TableRow key={`skeleton-${index}`} className="text-sm leading-tight h-8">
{columns.map((column) => (
<TableCell
key={column.key}
className="text-right whitespace-nowrap border-emerald-500/20"
className="text-right whitespace-nowrap border-emerald-500/20 py-1 px-2"
>
<div className="flex items-center gap-2">
<div className="w-3 h-3 bg-gray-600 rounded-full animate-pulse" />
<div className="h-4 bg-gray-600 rounded animate-pulse" style={{ width: `${Math.random() * 60 + 40}%` }} />
<div className="w-2.5 h-2.5 bg-gray-600 rounded-full animate-pulse" />
<div className="h-2.5 bg-gray-600 rounded animate-pulse" style={{ width: `${Math.random() * 60 + 40}%` }} />
</div>
</TableCell>
))}
@ -764,11 +763,11 @@ export function ProcessInnovationPage() {
</TableRow>
) : (
projects.map((project, index) => (
<TableRow key={`${project.project_no}-${index}`}>
<TableRow key={`${project.project_no}-${index}`} className="text-sm leading-tight h-8">
{columns.map((column) => (
<TableCell
key={column.key}
className={`text-right whitespace-nowrap border-emerald-500/20 ${column.key==="select" ? "flex justify-center items-center" :""}`}
className={`text-right whitespace-nowrap border-emerald-500/20 py-1 px-2 ${column.key==="select" ? "flex justify-center items-center" :""}`}
>
{renderCellContent(project, column)}
</TableCell>
@ -779,7 +778,6 @@ export function ProcessInnovationPage() {
</TableBody>
</Table>
</div>
</div>
{/* Infinite scroll trigger */}
<div ref={observerRef} className="h-auto">

17
app/components/ui/table.tsx
View File

@ -2,18 +2,21 @@ import * as React from "react"
import { cn } from "~/lib/utils"
const Table = React.forwardRef<
HTMLTableElement,
React.HTMLAttributes<HTMLTableElement>
>(({ className, ...props }, ref) => (
<div className="relative w-full overflow-auto">
interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
containerClassName?: string
}
const Table = React.forwardRef<HTMLTableElement, TableProps>(
({ className, containerClassName, ...props }, ref) => (
<div className={cn("relative w-full", containerClassName)}>
<table
ref={ref}
className={cn("w-full caption-bottom text-sm", className)}
{...props}
/>
</div>
))
)
)
Table.displayName = "Table"
const TableHeader = React.forwardRef<
@ -58,7 +61,7 @@ const TableRow = React.forwardRef<
<tr
ref={ref}
className={cn(
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
"border-b transition-colors data-[state=selected]:bg-muted",
className
)}
{...props}