mama/star-erp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 統一所有表格標題樣式為一般粗細並修正排序功能
All checks were successful
Koori-ERP-Deploy-System / deploy-demo (push) Successful in 56s
Details
Koori-ERP-Deploy-System / deploy-production (push) Has been skipped
Details

Browse Source
This commit is contained in:
sky121113
2026-01-19 09:30:02 +08:00
parent 0d7bb2758d
commit 74417e2e31
12 changed files with 311 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
resources/js/Components/Product/ProductTable.tsx
View File

@@ -75,22 +75,22 @@ export default function ProductTable({
<TableRow>
<TableHead className="w-[50px] text-center">#</TableHead>
<TableHead>
<button onClick={() => onSort("code")} className="flex items-center hover:text-gray-900 font-semibold">
<button onClick={() => onSort("code")} className="flex items-center hover:text-gray-900">
商品編號 <SortIcon field="code" />
</button>
</TableHead>
<TableHead>
<button onClick={() => onSort("name")} className="flex items-center hover:text-gray-900 font-semibold">
<button onClick={() => onSort("name")} className="flex items-center hover:text-gray-900">
商品名稱 <SortIcon field="name" />
</button>
</TableHead>
<TableHead>
<button onClick={() => onSort("category_id")} className="flex items-center hover:text-gray-900 font-semibold">
<button onClick={() => onSort("category_id")} className="flex items-center hover:text-gray-900">
分類 <SortIcon field="category_id" />
</button>
</TableHead>
<TableHead>
<button onClick={() => onSort("base_unit_id")} className="flex items-center hover:text-gray-900 font-semibold">
<button onClick={() => onSort("base_unit_id")} className="flex items-center hover:text-gray-900">
基本單位 <SortIcon field="base_unit_id" />
</button>
</TableHead>

14
resources/js/Components/PurchaseOrder/PurchaseOrderTable.tsx
View File

@@ -123,7 +123,7 @@ export default function PurchaseOrderTable({
<TableHead className="w-[180px]">
<button
onClick={() => handleSort("poNumber")}
className="flex items-center gap-2 hover:text-foreground transition-colors font-semibold"
className="flex items-center gap-2 hover:text-foreground transition-colors"
>
採購單編號
<SortIcon field="poNumber" />
@@ -132,7 +132,7 @@ export default function PurchaseOrderTable({
<TableHead className="w-[200px]">
<button
onClick={() => handleSort("warehouse_name")}
className="flex items-center gap-2 hover:text-foreground transition-colors font-semibold"
className="flex items-center gap-2 hover:text-foreground transition-colors"
>
預計入庫倉庫
<SortIcon field="warehouse_name" />
@@ -141,7 +141,7 @@ export default function PurchaseOrderTable({
<TableHead className="w-[180px]">
<button
onClick={() => handleSort("supplierName")}
className="flex items-center gap-2 hover:text-foreground transition-colors font-semibold"
className="flex items-center gap-2 hover:text-foreground transition-colors"
>
供應商
<SortIcon field="supplierName" />
@@ -150,7 +150,7 @@ export default function PurchaseOrderTable({
<TableHead className="w-[150px]">
<button
onClick={() => handleSort("createdAt")}
className="flex items-center gap-2 hover:text-foreground transition-colors font-semibold"
className="flex items-center gap-2 hover:text-foreground transition-colors"
>
建立日期
<SortIcon field="createdAt" />
@@ -159,7 +159,7 @@ export default function PurchaseOrderTable({
<TableHead className="w-[140px] text-right">
<button
onClick={() => handleSort("totalAmount")}
className="flex items-center gap-2 ml-auto hover:text-foreground transition-colors font-semibold"
className="flex items-center gap-2 ml-auto hover:text-foreground transition-colors"
>
總金額
<SortIcon field="totalAmount" />
@@ -168,13 +168,13 @@ export default function PurchaseOrderTable({
<TableHead className="w-[120px]">
<button
onClick={() => handleSort("status")}
className="flex items-center gap-2 hover:text-foreground transition-colors font-semibold"
className="flex items-center gap-2 hover:text-foreground transition-colors"
>
狀態
<SortIcon field="status" />
</button>
</TableHead>
<TableHead className="text-center font-semibold">操作</TableHead>
<TableHead className="text-center">操作</TableHead>
</TableRow>
</TableHeader>
<TableBody>

10
resources/js/Components/Vendor/SupplyProductList.tsx vendored
View File

@@ -27,14 +27,14 @@ export default function SupplyProductList({
<TableHeader>
<TableRow>
<TableHead className="w-[50px] text-center">#</TableHead>
<TableHead className="font-semibold">商品名稱</TableHead>
<TableHead className="font-semibold">基本單位</TableHead>
<TableHead className="font-semibold">轉換率</TableHead>
<TableHead className="text-right font-semibold">
<TableHead>商品名稱</TableHead>
<TableHead>基本單位</TableHead>
<TableHead>轉換率</TableHead>
<TableHead className="text-right">
上次採購單價
<div className="text-xs font-normal text-muted-foreground">(以基本單位計算)</div>
</TableHead>
<TableHead className="text-center font-semibold w-[150px]">操作</TableHead>
<TableHead className="text-center w-[150px]">操作</TableHead>
</TableRow>
</TableHeader>
<TableBody>

10
resources/js/Components/Vendor/VendorTable.tsx vendored
View File

@@ -61,27 +61,27 @@ export default function VendorTable({
<TableRow>
<TableHead className="w-[50px] text-center">#</TableHead>
<TableHead>
<button onClick={() => onSort("code")} className="flex items-center hover:text-gray-900 font-semibold">
<button onClick={() => onSort("code")} className="flex items-center hover:text-gray-900">
編號 <SortIcon field="code" />
</button>
</TableHead>
<TableHead>
<button onClick={() => onSort("name")} className="flex items-center hover:text-gray-900 font-semibold">
<button onClick={() => onSort("name")} className="flex items-center hover:text-gray-900">
廠商名稱 <SortIcon field="name" />
</button>
</TableHead>
<TableHead>
<button onClick={() => onSort("owner")} className="flex items-center hover:text-gray-900 font-semibold">
<button onClick={() => onSort("owner")} className="flex items-center hover:text-gray-900">
負責人 <SortIcon field="owner" />
</button>
</TableHead>
<TableHead>
<button onClick={() => onSort("contact_name")} className="flex items-center hover:text-gray-900 font-semibold">
<button onClick={() => onSort("contact_name")} className="flex items-center hover:text-gray-900">
聯絡人 <SortIcon field="contact_name" />
</button>
</TableHead>
<TableHead>
<button onClick={() => onSort("phone")} className="flex items-center hover:text-gray-900 font-semibold">
<button onClick={() => onSort("phone")} className="flex items-center hover:text-gray-900">
聯絡電話 <SortIcon field="phone" />
</button>
</TableHead>

12
resources/js/Components/Warehouse/Inventory/InventoryTable.tsx
View File

@@ -183,37 +183,37 @@ export default function InventoryTable({
<TableRow className="bg-gray-50/50">
<TableHead className="w-[50px] text-center">#</TableHead>
<TableHead className="w-[25%]">
<button onClick={() => handleSort("productName")} className="flex items-center hover:text-gray-900 font-semibold">
<button onClick={() => handleSort("productName")} className="flex items-center hover:text-gray-900">
商品資訊 <SortIcon field="productName" />
</button>
</TableHead>
<TableHead className="w-[10%] text-right">
<div className="flex justify-end">
<button onClick={() => handleSort("quantity")} className="flex items-center hover:text-gray-900 font-semibold">
<button onClick={() => handleSort("quantity")} className="flex items-center hover:text-gray-900">
庫存數量 <SortIcon field="quantity" />
</button>
</div>
</TableHead>
<TableHead className="w-[12%]">
<button onClick={() => handleSort("lastInboundDate")} className="flex items-center hover:text-gray-900 font-semibold">
<button onClick={() => handleSort("lastInboundDate")} className="flex items-center hover:text-gray-900">
最新入庫 <SortIcon field="lastInboundDate" />
</button>
</TableHead>
<TableHead className="w-[12%]">
<button onClick={() => handleSort("lastOutboundDate")} className="flex items-center hover:text-gray-900 font-semibold">
<button onClick={() => handleSort("lastOutboundDate")} className="flex items-center hover:text-gray-900">
最新出庫 <SortIcon field="lastOutboundDate" />
</button>
</TableHead>
<TableHead className="w-[10%] text-right">
<div className="flex justify-end">
<button onClick={() => handleSort("safetyStock")} className="flex items-center hover:text-gray-900 font-semibold">
<button onClick={() => handleSort("safetyStock")} className="flex items-center hover:text-gray-900">
安全庫存 <SortIcon field="safetyStock" />
</button>
</div>
</TableHead>
<TableHead className="w-[10%] text-center">
<div className="flex justify-center">
<button onClick={() => handleSort("status")} className="flex items-center hover:text-gray-900 font-semibold">
<button onClick={() => handleSort("status")} className="flex items-center hover:text-gray-900">
狀態 <SortIcon field="status" />
</button>
</div>

56
resources/js/Pages/Admin/ActivityLog/Index.tsx
View File

@@ -13,7 +13,7 @@ import {
import { Badge } from "@/Components/ui/badge";
import Pagination from '@/Components/shared/Pagination';
import { SearchableSelect } from "@/Components/ui/searchable-select";
import { FileText, Eye } from 'lucide-react';
import { FileText, Eye, ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react';
import { format } from 'date-fns';
import { Button } from '@/Components/ui/button';
import ActivityDetailDialog from './ActivityDetailDialog';
@@ -45,6 +45,8 @@ interface Props extends PageProps {
};
filters: {
per_page?: string;
sort_by?: string;
sort_order?: 'asc' | 'desc';
};
}
@@ -82,11 +84,41 @@ export default function ActivityLogIndex({ activities, filters }: Props) {
setPerPage(value);
router.get(
route('activity-logs.index'),
{ per_page: value },
{ ...filters, per_page: value },
{ preserveState: false, replace: true, preserveScroll: true }
);
};
const handleSort = (field: string) => {
let newSortBy: string | undefined = field;
let newSortOrder: 'asc' | 'desc' | undefined = 'asc';
if (filters.sort_by === field) {
if (filters.sort_order === 'asc') {
newSortOrder = 'desc';
} else {
newSortBy = undefined;
newSortOrder = undefined;
}
}
router.get(
route('activity-logs.index'),
{ ...filters, sort_by: newSortBy, sort_order: newSortOrder },
{ preserveState: true, replace: true }
);
};
const SortIcon = ({ field }: { field: string }) => {
if (filters.sort_by !== field) {
return <ArrowUpDown className="h-4 w-4 text-muted-foreground ml-1" />;
}
if (filters.sort_order === "asc") {
return <ArrowUp className="h-4 w-4 text-primary-main ml-1" />;
}
return <ArrowDown className="h-4 w-4 text-primary-main ml-1" />;
};
return (
<AuthenticatedLayout
breadcrumbs={[
@@ -113,7 +145,15 @@ export default function ActivityLogIndex({ activities, filters }: Props) {
<Table>
<TableHeader className="bg-gray-50">
<TableRow>
<TableHead className="w-[180px]">時間</TableHead>
<TableHead className="w-[50px] text-center">#</TableHead>
<TableHead className="w-[180px]">
<button
onClick={() => handleSort('created_at')}
className="flex items-center gap-1 hover:text-gray-900 transition-colors"
>
時間 <SortIcon field="created_at" />
</button>
</TableHead>
<TableHead className="w-[150px]">操作人員</TableHead>
<TableHead className="w-[100px] text-center">動作</TableHead>
<TableHead className="w-[150px]">對象</TableHead>
@@ -123,8 +163,11 @@ export default function ActivityLogIndex({ activities, filters }: Props) {
</TableHeader>
<TableBody>
{activities.data.length > 0 ? (
activities.data.map((activity) => (
activities.data.map((activity, index) => (
<TableRow key={activity.id}>
<TableCell className="text-gray-500 font-medium text-center">
{activities.from + index}
</TableCell>
<TableCell className="text-gray-500 font-medium whitespace-nowrap">
{activity.created_at}
</TableCell>
@@ -154,7 +197,8 @@ export default function ActivityLogIndex({ activities, filters }: Props) {
variant="outline"
size="sm"
onClick={() => handleViewDetail(activity)}
className="button-outlined-info"
className="button-outlined-primary"
title="檢視詳情"
>
<Eye className="h-4 w-4" />
</Button>
@@ -163,7 +207,7 @@ export default function ActivityLogIndex({ activities, filters }: Props) {
))
) : (
<TableRow>
<TableCell colSpan={5} className="text-center py-8 text-gray-500">
<TableCell colSpan={7} className="text-center py-8 text-gray-500">
尚無操作紀錄
</TableCell>
</TableRow>

65
resources/js/Pages/Admin/Role/Index.tsx
View File

@@ -1,7 +1,7 @@
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head, Link, router } from '@inertiajs/react';
import { cn } from "@/lib/utils";
import { Shield, Plus, Pencil, Trash2, Users } from 'lucide-react';
import { Shield, Plus, Pencil, Trash2, Users, ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react';
import { Button } from '@/Components/ui/button';
import { Badge } from '@/Components/ui/badge';
import {
@@ -42,9 +42,13 @@ interface Role {
interface Props {
roles: Role[];
filters: {
sort_by?: string;
sort_order?: 'asc' | 'desc';
};
}
export default function RoleIndex({ roles }: Props) {
export default function RoleIndex({ roles, filters = {} }: Props) {
const [selectedRole, setSelectedRole] = useState<Role | null>(null);
const handleDelete = (id: number, name: string) => {
@@ -55,6 +59,36 @@ export default function RoleIndex({ roles }: Props) {
}
};
const handleSort = (field: string) => {
let newSortBy: string | undefined = field;
let newSortOrder: 'asc' | 'desc' | undefined = 'asc';
if (filters.sort_by === field) {
if (filters.sort_order === 'asc') {
newSortOrder = 'desc';
} else {
newSortBy = undefined;
newSortOrder = undefined;
}
}
router.get(
route('roles.index'),
{ ...filters, sort_by: newSortBy, sort_order: newSortOrder },
{ preserveState: true, replace: true }
);
};
const SortIcon = ({ field }: { field: string }) => {
if (filters.sort_by !== field) {
return <ArrowUpDown className="h-4 w-4 text-muted-foreground ml-1" />;
}
if (filters.sort_order === "asc") {
return <ArrowUp className="h-4 w-4 text-primary-main ml-1" />;
}
return <ArrowDown className="h-4 w-4 text-primary-main ml-1" />;
};
return (
<AuthenticatedLayout
breadcrumbs={[
@@ -92,9 +126,30 @@ export default function RoleIndex({ roles }: Props) {
<TableHead className="w-[50px] text-center">#</TableHead>
<TableHead>名稱</TableHead>
<TableHead>代號</TableHead>
<TableHead className="text-center">權限數量</TableHead>
<TableHead className="text-center">使用者人數</TableHead>
<TableHead className="text-left">建立時間</TableHead>
<TableHead className="text-center">
<button
onClick={() => handleSort('permissions_count')}
className="flex items-center justify-center gap-1 w-full hover:text-gray-900 transition-colors"
>
權限數量 <SortIcon field="permissions_count" />
</button>
</TableHead>
<TableHead className="text-center">
<button
onClick={() => handleSort('users_count')}
className="flex items-center justify-center gap-1 w-full hover:text-gray-900 transition-colors"
>
使用者人數 <SortIcon field="users_count" />
</button>
</TableHead>
<TableHead className="text-left">
<button
onClick={() => handleSort('created_at')}
className="flex items-center gap-1 hover:text-gray-900 transition-colors"
>
建立時間 <SortIcon field="created_at" />
</button>
</TableHead>
<TableHead className="text-center">操作</TableHead>
</TableRow>
</TableHeader>

54
resources/js/Pages/Admin/User/Index.tsx
View File

@@ -1,7 +1,7 @@
import { useState } from 'react';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head, Link, router } from '@inertiajs/react';
import { Users, Plus, Pencil, Trash2, Mail, Shield } from 'lucide-react';
import { Users, Plus, Pencil, Trash2, Mail, Shield, ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react';
import { Button } from '@/Components/ui/button';
import {
Table,
@@ -47,6 +47,8 @@ interface Props {
};
filters: {
per_page?: string;
sort_by?: string;
sort_order?: 'asc' | 'desc';
};
}
@@ -66,11 +68,41 @@ export default function UserIndex({ users, filters }: Props) {
setPerPage(value);
router.get(
route('users.index'),
{ per_page: value },
{ ...filters, per_page: value },
{ preserveState: false, replace: true, preserveScroll: true }
);
};
const handleSort = (field: string) => {
let newSortBy: string | undefined = field;
let newSortOrder: 'asc' | 'desc' | undefined = 'asc';
if (filters.sort_by === field) {
if (filters.sort_order === 'asc') {
newSortOrder = 'desc';
} else {
newSortBy = undefined;
newSortOrder = undefined;
}
}
router.get(
route('users.index'),
{ ...filters, sort_by: newSortBy, sort_order: newSortOrder },
{ preserveState: true, replace: true }
);
};
const SortIcon = ({ field }: { field: string }) => {
if (filters.sort_by !== field) {
return <ArrowUpDown className="h-4 w-4 text-muted-foreground ml-1" />;
}
if (filters.sort_order === "asc") {
return <ArrowUp className="h-4 w-4 text-primary-main ml-1" />;
}
return <ArrowDown className="h-4 w-4 text-primary-main ml-1" />;
};
return (
@@ -108,9 +140,23 @@ export default function UserIndex({ users, filters }: Props) {
<TableHeader className="bg-gray-50">
<TableRow>
<TableHead className="w-[50px] text-center">#</TableHead>
<TableHead className="w-[250px]">使用者</TableHead>
<TableHead>
<button
onClick={() => handleSort('name')}
className="flex items-center gap-1 hover:text-gray-900 transition-colors"
>
使用者 <SortIcon field="name" />
</button>
</TableHead>
<TableHead>角色</TableHead>
<TableHead className="w-[200px]">加入時間</TableHead>
<TableHead>
<button
onClick={() => handleSort('created_at')}
className="flex items-center gap-1 hover:text-gray-900 transition-colors"
>
加入時間 <SortIcon field="created_at" />
</button>
</TableHead>
<TableHead className="text-center">操作</TableHead>
</TableRow>
</TableHeader>