create-antd-layout 1.1.3 → 1.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-antd-layout",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "this is create project for @adminui-dev/antd-layout's template proejct",
   "keywords": [
     "create-antd-layout",

package/templates/antd-layout-vite-max/src/components/LanguageButton.tsx

@@ -1,7 +1,6 @@
 import { Button, Flex, Popover,theme } from "antd"
 import { useConfigAction, useConfigState } from "@adminui-dev/antd-layout"
 import { Languages } from "lucide-react"
-import { useIntl } from "react-intl"
 import { useState } from "react"
 const {useToken} = theme
 
@@ -15,9 +14,7 @@ function LanguageButton(){
     const {locale,languages} = useConfigState()
     const {setLocale} = useConfigAction()
     const [open,setOpen] = useState<boolean>(false)
-    const intl = useIntl()
     const {token} = useToken()
-
     const onChangeLanguage=(value:string)=>{
         setOpen(false)
         setLocale(value)

package/templates/antd-layout-vite-max/src/components/PopoverPanel.tsx

@@ -1,7 +1,12 @@
-import { Tag, Button, Divider, Space, theme } from "antd"
-import {UserOutlined, GroupOutlined,ClearOutlined,ThunderboltOutlined,AlertOutlined,LogoutOutlined,ExclamationCircleOutlined,CheckOutlined,PlusOutlined } from '@ant-design/icons';
+import { Tag, Button, Divider, Space, theme, Popconfirm } from "antd"
+import type {PopconfirmProps} from "antd"
 import { useAvatarPopover,useConfigState,LazyAvatar, LazyImage, useBrandPopover } from "@adminui-dev/antd-layout";
+import {ContactRound,Siren,CircleUserRound,CircleAlert,Crown,LogOut,Plus,Check,BrushCleaning} from "lucide-react";
 import WardenLogo from "./WardenLogo";
+import type { User } from "../pages/typings";
+import { useProfileDrawer } from "@/pages/system/organizations/components";
+import { useIntl } from "react-intl";
+import { useNavigate } from "react-router";
 
 const {useToken} = theme
 
@@ -53,7 +58,10 @@ function UserPopoverPanel(){
     const {token} = useToken()
     const { layoutConfig } = useConfigState()
     const { close } = useAvatarPopover()
+    const navigate = useNavigate()
+    const intl = useIntl()
     const { userInfo } = layoutConfig
+    const {detailsDrawer,showDetails} = useProfileDrawer()
 
     const s1Style:React.CSSProperties = {
         whiteSpace:"nowrap",
@@ -69,11 +77,16 @@ function UserPopoverPanel(){
         overflow:"hidden",
         color:token.colorTextSecondary
     }
-    
+
+    const fetchUserInfo=(uid:string):User | undefined=> {
+        console.log(`find uid is ${uid} for user`)
+        return {id:7,uid:"Scapegoat",realName:"Scapegoat",email:"zhouwenqi@me.com", deptId:3,deptName:"Marketing",roleId:3,roleName:"Query",avatarUrl:"https://api.dicebear.com/9.x/miniavs/svg?seed=8", lastDate:'2022/12/8 23:24',createDate:'2022/12/8 23:24'}
+    }    
 
     if(!userInfo){
         return <></>
     }
+    const user = fetchUserInfo(userInfo.uid)
 
     let faceElement:React.ReactNode = <></>
 
@@ -89,8 +102,19 @@ function UserPopoverPanel(){
         close!()
     }
 
+    const onProfileHandler=()=>{
+        showDetails(user)
+        close!()
+    }
+
+    const confirmHandler: PopconfirmProps['onConfirm'] = (e) => {
+        console.log(e)
+        navigate("/login")
+    }
+
     return(
         <div style={boxStyles}>
+            {detailsDrawer}
             <div style={titleStyles}>
                 {faceElement}
                 <div style={titleText}>
@@ -100,14 +124,16 @@ function UserPopoverPanel(){
             </div>
             <Divider style={{marginTop:"12px",marginBottom:"4px"}} />
             
-            <Button onClick={onClickHandler} type="text" block icon={<UserOutlined />} styles={{root:btnRootStyle}}>Profile</Button>            
-            <Button onClick={onClickHandler} type="text" block icon={<AlertOutlined />} styles={{root:btnRootStyle}}>Notice</Button>         
-            <Button onClick={onClickHandler} type="text" block icon={<GroupOutlined />} styles={{root:btnRootStyle}}>Account</Button>
-            <Button onClick={onClickHandler} type="text" block icon={<ClearOutlined />} styles={{root:btnRootStyle}}><div style={{display:"flex",width:"100%",justifyContent:"space-between",alignItems:"center"}}>Cache clean<Tag color="warning" icon={<ExclamationCircleOutlined />}>2.8G</Tag></div></Button>            
+            <Button onClick={onProfileHandler} type="text" block icon={<ContactRound size={14} />} styles={{root:btnRootStyle}}>Profile</Button>            
+            <Button onClick={onClickHandler} type="text" block icon={<Siren size={14} />} styles={{root:btnRootStyle}}>Notice</Button>         
+            <Button onClick={onClickHandler} type="text" block icon={<CircleUserRound size={14} />} styles={{root:btnRootStyle}}>Account</Button>
+            <Button onClick={onClickHandler} type="text" block icon={<BrushCleaning size={14} />} styles={{root:btnRootStyle}}><div style={{display:"flex",width:"100%",justifyContent:"space-between",alignItems:"center"}}>Cache clean<Tag color="warning" icon={<CircleAlert size={14} />}>2.8G</Tag></div></Button>            
             <Divider style={{marginTop:"4px",marginBottom:"4px"}} />
             <Space style={{marginBottom:"0px"}} separator={<Divider orientation="vertical" />}>
-                <Button onClick={onClickHandler} type="text" block icon={<ThunderboltOutlined />} styles={{root:btnRootStyle}}>Upgrade pro</Button>
-                <Button onClick={onClickHandler} type="text" block icon={<LogoutOutlined />} styles={{root:btnRootStyle}}>Logout</Button>
+                <Button onClick={onClickHandler} type="text" block icon={<Crown size={14} />} styles={{root:btnRootStyle}}>Upgrade pro</Button>
+                <Popconfirm onConfirm={confirmHandler} title={intl.formatMessage({id:"profile.logout.confirm.title"})} description={intl.formatMessage({id:"profile.logout.confirm.description"})}>
+                    <Button type="text" block icon={<LogOut size={14} />} styles={{root:btnRootStyle}}>Logout</Button>
+                </Popconfirm>                
             </Space>                      
         </div>
     )
@@ -145,7 +171,7 @@ function BrandPopoverPanel(){
             <Divider style={{marginTop:"10px",marginBottom:"4px"}} />     
             {items}         
             <Divider style={{marginTop:"4px",marginBottom:"4px"}} />
-            <Button onClick={()=>{close!()}} type="text" block icon={<PlusOutlined />} styles={{root:btnRootStyle}}>Create team</Button>                    
+            <Button onClick={()=>{close!()}} type="text" block icon={<Plus size={14} />} styles={{root:btnRootStyle}}>Create team</Button>                    
         </div>
     )
 }
@@ -173,7 +199,7 @@ function BrandItem(props:{team:BrandTeam,selected?:boolean}){
     }
     return(
         <Button type="text" block icon={icon} styles={btnStyles}>
-            <div style={itemSytles}>{team.name}{selected? <CheckOutlined /> : <></>}</div>
+            <div style={itemSytles}>{team.name}{selected? <Check size={14} /> : <></>}</div>
         </Button>
     )
 }

package/templates/antd-layout-vite-max/src/layouts/index.tsx

@@ -52,7 +52,7 @@ export default function(){
             avatar:"https://api.dicebear.com/9.x/miniavs/svg?seed=8"
         }
     }
-  
+
     return(
         <>
             <AntdLayout layoutConfig={layoutConfig} menuData={menuData} localeMessages={localeMessages}>

package/templates/antd-layout-vite-max/src/layouts/menuData.tsx

@@ -1,6 +1,6 @@
 import type { MenuData }  from "@adminui-dev/antd-layout"
 import {Badge} from "antd"
-import {UsersRound,Contact,UserLock,Shield,BrickWallShield,FingerprintPattern,HeartHandshake,Gauge,MonitorCheck,Bell,ChartNoAxesCombined,TableProperties,BadgeDollarSign,Globe,ClipboardClock,ScanFace,NotebookPen,Scale,SquareChartGantt,Box,Cog,MonitorCog,BellRing,Building2} from "lucide-react"
+import {UsersRound,Contact,UserLock,Shield,BrickWallShield,FingerprintPattern,HeartHandshake,Gauge,MonitorCheck,Bell,ChartNoAxesCombined,TableProperties,BadgeDollarSign,Globe,ClipboardClock,ScanFace,NotebookPen,Scale,SquareChartGantt,Box,Cog,MonitorCog,Building2} from "lucide-react"
 /**
  * Menu data
  * A menu corresponds to a route, and the root menu is not displayed, but it must correspond to a layout route because an item may have a layout.

package/templates/antd-layout-vite-max/src/locales/en-US/pages.ts

@@ -155,4 +155,7 @@ export default {
     "firewall.control.title":"Protection rules",
     "firewall.option.control.white":"Whitelist",
     "firewall.option.control.black":"Blacklist",
+    "profile.drawer.details.title":"Profile details",
+    "profile.logout.confirm.title":"Sign out",
+    "profile.logout.confirm.description":"Are you sure you want to log out of the system?",
 }

package/templates/antd-layout-vite-max/src/locales/zh-CN/pages.ts

@@ -155,4 +155,7 @@ export default {
     "firewall.control.title":"防控机制",
     "firewall.option.control.white":"白名单",
     "firewall.option.control.black":"黑名单",
+    "profile.drawer.details.title":"个人资料",
+    "profile.logout.confirm.title":"登出",
+    "profile.logout.confirm.description":"确认退出系统吗？",
 }

package/templates/antd-layout-vite-max/src/pages/system/organizations/components.tsx

@@ -58,7 +58,7 @@ function DeptDetailsDrawer(props:DrawerProps&{dept?:Dept}){
     ]
     return(
         <>
-        <Drawer {...props} title={intl.formatMessage({id:"order.drawer.details.title"})} extra={<Space><Button key="edit-btn" icon={<SquarePen size={14} />}>{intl.formatMessage({id:"global.edit"})}</Button></Space>}>
+        <Drawer {...props} title={intl.formatMessage({id:"dept.drawer.details.title"})} extra={<Space><Button key="edit-btn" icon={<SquarePen size={14} />}>{intl.formatMessage({id:"global.edit"})}</Button></Space>}>
             <Descriptions bordered items={items} />
         </Drawer>
         </>
@@ -139,7 +139,7 @@ function UserDetailsDrawer(props:DrawerProps&{user?:User}){
     ]
     return(
         <>
-        <Drawer {...props} title={intl.formatMessage({id:"order.drawer.details.title"})} extra={<Space><Button key="edit-btn" icon={<SquarePen size={14} />}>{intl.formatMessage({id:"global.edit"})}</Button></Space>}>
+        <Drawer {...props} title={intl.formatMessage({id:"user.drawer.details.title"})} extra={<Space><Button key="edit-btn" icon={<SquarePen size={14} />}>{intl.formatMessage({id:"global.edit"})}</Button></Space>}>
             <Descriptions bordered items={items} />
         </Drawer>
         </>
@@ -157,4 +157,85 @@ function useUserDrawer(){
     return {detailsDrawer,showDetails}
 }
 
-export { useDeptDrawer,useUserDrawer }
+/**
+ * Drawer - profile details
+ * @param props 
+ * @returns 
+ */
+function ProfileDetailsDrawer(props:DrawerProps&{user?:User}){
+    const intl = useIntl()
+    const {user} = props
+    if(!user){
+        return<></>
+    }
+    const items: DescriptionsProps['items'] = [
+        {
+            key: '0',            
+            label: intl.formatMessage({id:"user.column.avatar"}),
+            children: <LazyAvatar src={user.avatarUrl} size={64} />,
+            span:"filled",
+        },
+        {
+            key: '1',            
+            label: intl.formatMessage({id:"user.column.uid"}),
+            children: user.uid,
+            span:"filled",
+        },
+        {
+            key: '2',
+            label: intl.formatMessage({id:"user.column.realName"}),
+            children: user.realName,
+            span:"filled",
+        },
+        {
+            key: '3',
+            label: intl.formatMessage({id:"user.column.email"}),
+            children:user.email,
+            span:"filled",
+        }, 
+        {
+            key: '4',
+            label: intl.formatMessage({id:"user.column.deptName"}),
+            children: user.deptName,
+            span:"filled",
+        },
+        {
+            key: '9',
+            label: intl.formatMessage({id:"user.column.roleName"}),
+            children:user.roleName,
+            span:"filled",
+        },        
+        {
+            key: '10',
+            label: intl.formatMessage({id:"user.column.lastDate"}),
+            children: user.createDate,
+            span:"filled",
+        },
+        {
+            key: '11',
+            label: intl.formatMessage({id:"global.column.createDate"}),
+            children: user.createDate,
+            span:"filled",
+        },
+    ]
+    return(
+        <>
+        <Drawer {...props} title={intl.formatMessage({id:"profile.drawer.details.title"})} extra={<Space><Button key="edit-btn" icon={<SquarePen size={14} />}>{intl.formatMessage({id:"global.edit"})}</Button></Space>}>
+            <Descriptions bordered items={items} />
+        </Drawer>
+        </>
+    )
+}
+
+function useProfileDrawer(){
+    const [openDetails,setOpenDetails] = useState<boolean>(false)
+    const [detailsRecord,setDetailsRecord] = useState<User>()
+    const showDetails=(user?:User)=>{
+        setDetailsRecord(user)
+        setOpenDetails(true)
+    }
+    const detailsDrawer = <ProfileDetailsDrawer user={detailsRecord} open={openDetails} onClose={()=>{setOpenDetails(false)}} size={500} />
+    return {detailsDrawer,showDetails}
+}
+
+export { useDeptDrawer,useUserDrawer,useProfileDrawer }

package/templates/antd-layout-vite-max/src/pages/system/organizations/dept.tsx

@@ -55,7 +55,7 @@ export default function(){
     }
     
     const getColumnSearchProps = (dataIndex: DataIndex): TableColumnType<Dept> => ({
-    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters, close }) => (
+    filterDropdown: ({ selectedKeys, close }) => (
       <div style={{ padding: 8 }} onKeyDown={(e) => e.stopPropagation()}>
         <Input
           placeholder={`${intl.formatMessage({id:"global.search"})} ${dataIndex}`}
@@ -100,7 +100,7 @@ export default function(){
         {
             title: intl.formatMessage({id:"dept.column.name"}),
             dataIndex: 'name',
-            render(value, record, index) {
+            render(value, record) {
                 return(<a onClick={()=>{showDetails(record)}}>{value}</a>)
             },
             ...getColumnSearchProps('name'), 
@@ -111,7 +111,7 @@ export default function(){
             filterSearch: true,
             sorter:true,            
             width:"160px",
-            render:(value,record,index)=>{
+            render:(value)=>{
                 return(
                     <Tag>{value}</Tag>
                 )
@@ -134,7 +134,8 @@ export default function(){
             dataIndex: 'id',
             width:"160px",
             align:"right",
-            render(value,record,index){
+            render(value,record){
+              console.log(value)
                 let buttons=[<Tooltip  key="details-btn" title={intl.formatMessage({id:"global.details"})}>
                             <Button onClick={()=>{showDetails(record)}} type="text" icon={<Binoculars size={14} />} />
                         </Tooltip>,<Tooltip key="edit-btn" title={intl.formatMessage({id:"global.edit"})}>

package/templates/antd-layout-vite-max/src/pages/system/organizations/user.tsx

@@ -1,4 +1,4 @@
-import { Container, LazyAvatar, LazyImage} from "@adminui-dev/antd-layout";
+import { Container, LazyAvatar } from "@adminui-dev/antd-layout";
 import {  Button, Flex,  Space, Table, Tag, Grid, theme, Input, Tooltip,App} from 'antd';
 import  type { TableColumnsType, TableProps,TableColumnType } from 'antd';
 import type { User } from "@/pages/typings";
@@ -18,12 +18,12 @@ type DataIndex = keyof User
 
 const userData:User[]=[
     {id:1,uid:"Aneka",realName:"Aneka",email:"aneka@gmail.com", deptId:4,deptName:"Development",roleId:2,roleName:"Admin",avatarUrl:"https://api.dicebear.com/9.x/miniavs/svg?seed=1", lastDate:'2022/12/8 23:24',createDate:'2022/12/8 23:24'},
-    {id:1,uid:"Felix",realName:"Felix",email:"felix@gmail.com", deptId:8,deptName:"Testing",roleId:2,roleName:"Admin",avatarUrl:"https://api.dicebear.com/9.x/miniavs/svg?seed=2", lastDate:'2022/12/8 23:24',createDate:'2022/12/8 23:24'},
-    {id:1,uid:"Neutral",realName:"Neutral",email:"reutral@gmail.com", deptId:8,deptName:"Testing",roleId:2,roleName:"Admin",avatarUrl:"https://api.dicebear.com/9.x/miniavs/svg?seed=3", lastDate:'2022/12/8 23:24',createDate:'2022/12/8 23:24'},
-    {id:1,uid:"Adventurer",realName:"Adventurer",email:"Adventurer@gmail.com", deptId:4,deptName:"Development",roleId:2,roleName:"Admin",avatarUrl:"https://api.dicebear.com/9.x/miniavs/svg?seed=4", lastDate:'2022/12/8 23:24',createDate:'2022/12/8 23:24'},
-    {id:1,uid:"Lorelei",realName:"Lorelei",email:"Lorelei@gmail.com", deptId:8,deptName:"Testing",roleId:2,roleName:"Admin",avatarUrl:"https://api.dicebear.com/9.x/miniavs/svg?seed=5", lastDate:'2022/12/8 23:24',createDate:'2022/12/8 23:24'},
-    {id:1,uid:"Miniavs",realName:"Miniavs",email:"Miniavs@gmail.com", deptId:4,deptName:"Development",roleId:2,roleName:"Admin",avatarUrl:"https://api.dicebear.com/9.x/miniavs/svg?seed=6", lastDate:'2022/12/8 23:24',createDate:'2022/12/8 23:24'},
-    {id:1,uid:"Apple",realName:"Apple",email:"apple@gmail.com", deptId:3,deptName:"Marketing",roleId:3,roleName:"Query",avatarUrl:"https://api.dicebear.com/9.x/miniavs/svg?seed=7", lastDate:'2022/12/8 23:24',createDate:'2022/12/8 23:24'}
+    {id:2,uid:"Felix",realName:"Felix",email:"felix@gmail.com", deptId:8,deptName:"Testing",roleId:2,roleName:"Admin",avatarUrl:"https://api.dicebear.com/9.x/miniavs/svg?seed=2", lastDate:'2022/12/8 23:24',createDate:'2022/12/8 23:24'},
+    {id:3,uid:"Neutral",realName:"Neutral",email:"reutral@gmail.com", deptId:8,deptName:"Testing",roleId:2,roleName:"Admin",avatarUrl:"https://api.dicebear.com/9.x/miniavs/svg?seed=3", lastDate:'2022/12/8 23:24',createDate:'2022/12/8 23:24'},
+    {id:4,uid:"Adventurer",realName:"Adventurer",email:"Adventurer@gmail.com", deptId:4,deptName:"Development",roleId:2,roleName:"Admin",avatarUrl:"https://api.dicebear.com/9.x/miniavs/svg?seed=4", lastDate:'2022/12/8 23:24',createDate:'2022/12/8 23:24'},
+    {id:5,uid:"Lorelei",realName:"Lorelei",email:"Lorelei@gmail.com", deptId:8,deptName:"Testing",roleId:2,roleName:"Admin",avatarUrl:"https://api.dicebear.com/9.x/miniavs/svg?seed=5", lastDate:'2022/12/8 23:24',createDate:'2022/12/8 23:24'},
+    {id:6,uid:"Miniavs",realName:"Miniavs",email:"Miniavs@gmail.com", deptId:4,deptName:"Development",roleId:2,roleName:"Admin",avatarUrl:"https://api.dicebear.com/9.x/miniavs/svg?seed=6", lastDate:'2022/12/8 23:24',createDate:'2022/12/8 23:24'},
+    {id:7,uid:"Scapegoat",realName:"Scapegoat",email:"zhouwenqi@me.com", deptId:3,deptName:"Marketing",roleId:3,roleName:"Query",avatarUrl:"https://api.dicebear.com/9.x/miniavs/svg?seed=8", lastDate:'2022/12/8 23:24',createDate:'2022/12/8 23:24'}
 ]
 
 /**
@@ -51,7 +51,7 @@ export default function(){
     }
     
     const getColumnSearchProps = (dataIndex: DataIndex): TableColumnType<User> => ({
-    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters, close }) => (
+    filterDropdown: ({ selectedKeys, close }) => (
       <div style={{ padding: 8 }} onKeyDown={(e) => e.stopPropagation()}>
         <Input
           placeholder={`${intl.formatMessage({id:"global.search"})} ${dataIndex}`}
@@ -97,7 +97,7 @@ export default function(){
             title: intl.formatMessage({id:"user.column.avatar"}),
             dataIndex: 'avatarUrl',
             filterSearch: true,
-            render:(value,record,index)=>{
+            render:(value,record)=>{
                 return(
                     <a onClick={()=>{showDetails(record)}}><LazyAvatar src={value} alt={record.uid} /></a>
                 )
@@ -108,7 +108,7 @@ export default function(){
             dataIndex: 'uid',
             filterSearch: true,
             sorter:true,
-            render:(value,record,index)=>{
+            render:(value,record)=>{
                 return(
                     <a onClick={()=>{showDetails(record)}}>{value}</a>
                 )
@@ -129,7 +129,7 @@ export default function(){
             title: intl.formatMessage({id:"user.column.roleName"}),
             dataIndex: 'roleName',
             width:"160px",
-            render(value, record, index) {
+            render(value) {
                 return(
                     <Tag>{value}</Tag>
                 )
@@ -140,7 +140,7 @@ export default function(){
             title: intl.formatMessage({id:"user.column.deptName"}),
             dataIndex: 'deptName',
             width:"160px",
-            render(value, record, index) {
+            render(value) {
                 return(
                     <Tag>{value}</Tag>
                 )
@@ -164,7 +164,8 @@ export default function(){
             dataIndex: 'id',
             width:"160px",
             align:"right",
-            render(value,record,index){
+            render(value,record){
+                console.log(value)
                 let buttons=[<Tooltip key="details-btn" title={intl.formatMessage({id:"global.details"})}>
                             <Button type="text" onClick={()=>{showDetails(record)}} icon={<Binoculars size={14} />} />
                         </Tooltip>,<Tooltip key="edit-btn" title={intl.formatMessage({id:"global.edit"})}>

package/templates/antd-layout-vite-max/src/pages/system/security/firewall.tsx

@@ -2,7 +2,7 @@ import { Container} from "@adminui-dev/antd-layout";
 import {  Button, Flex,  Space, Table, Tag, Grid, theme, Input, Tooltip,App} from 'antd';
 import  type { TableColumnsType, TableProps,TableColumnType } from 'antd';
 import type { Firewall } from "@/pages/typings";
-import { Search,Download,Printer,Trash, Upload,Plus,SquarePen,Binoculars,FingerprintPattern } from "lucide-react";
+import { Search,Download,Printer,Trash, Upload,Plus,SquarePen,Binoculars } from "lucide-react";
 import { useRef, useState } from "react";
 import { useIntl } from "react-intl";
 import { printElement } from "@/utils/printUtil";
@@ -50,7 +50,7 @@ export default function(){
     }
     
     const getColumnSearchProps = (dataIndex: DataIndex): TableColumnType<Firewall> => ({
-    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters, close }) => (
+    filterDropdown: ({ selectedKeys, close }) => (
       <div style={{ padding: 8 }} onKeyDown={(e) => e.stopPropagation()}>
         <Input
           placeholder={`${intl.formatMessage({id:"global.search"})} ${dataIndex}`}
@@ -102,7 +102,7 @@ export default function(){
             dataIndex: 'ip',
             filterSearch: true,
             sorter:true,
-            render:(value,record,index)=>{
+            render:(value,record)=>{
                 let sip = value[0] || ""
                 if(value.length>1){
                     sip += " - " + value[value.length-1]
@@ -118,7 +118,7 @@ export default function(){
             dataIndex: 'description',
             filterSearch: true,
             sorter:true,
-            render:(value,record,index)=>{
+            render:(value)=>{
                 return(
                     <Tag>{value}</Tag>
                 )
@@ -131,7 +131,7 @@ export default function(){
             width:"160px",
             sorter:true,
             filters:filterYesOrNo,
-            render(value, record, index) {
+            render(value) {
                 return(
                     <Tag color={value ? "red" : "green" }>{yesOrNo.find(item=>item.value == value)?.label}</Tag>
                 )
@@ -149,7 +149,8 @@ export default function(){
             dataIndex: 'id',
             width:"160px",
             align:"right",
-            render(value,record,index){
+            render(value,record){
+                console.log(value)
                 let buttons=[
                     <Tooltip key="details-btn" title={intl.formatMessage({id:"global.details"})}>
                         <Button type="text" onClick={()=>{showDetails(record)}} icon={<Binoculars size={14} />} />

package/templates/antd-layout-vite-max/src/pages/system/security/permission.tsx

@@ -45,7 +45,7 @@ export default function(){
     }
     
     const getColumnSearchProps = (dataIndex: DataIndex): TableColumnType<Permission> => ({
-    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters, close }) => (
+    filterDropdown: ({ selectedKeys, close }) => (
       <div style={{ padding: 8 }} onKeyDown={(e) => e.stopPropagation()}>
         <Input
           placeholder={`${intl.formatMessage({id:"global.search"})} ${dataIndex}`}
@@ -97,7 +97,7 @@ export default function(){
             dataIndex: 'name',
             filterSearch: true,
             sorter:true,
-            render:(value,record,index)=>{
+            render:(value,record)=>{
                 return(
                     <a onClick={()=>{showDetails(record)}}>{value}</a>
                 )
@@ -109,7 +109,7 @@ export default function(){
             dataIndex: 'value',
             filterSearch: true,
             sorter:true,
-            render:(value,record,index)=>{
+            render:(value)=>{
                 return(
                     <Tag>{value}</Tag>
                 )
@@ -122,7 +122,7 @@ export default function(){
             width:"160px",
             sorter:true,
             filters:filterYesOrNo,
-            render(value, record, index) {
+            render(value) {
                 return(
                     <Tag color={value ? "red" : "green" }>{yesOrNo.find(item=>item.value == value)?.label}</Tag>
                 )
@@ -140,7 +140,8 @@ export default function(){
             dataIndex: 'id',
             width:"160px",
             align:"right",
-            render(value,record,index){
+            render(value,record){
+                console.log(value)
                 let buttons=[
                     <Tooltip key="details-btn" title={intl.formatMessage({id:"global.details"})}>
                         <Button type="text" onClick={()=>{showDetails(record)}} icon={<Binoculars size={14} />} />

package/templates/antd-layout-vite-max/src/pages/system/security/role.tsx

@@ -50,7 +50,7 @@ export default function(){
     }
     
     const getColumnSearchProps = (dataIndex: DataIndex): TableColumnType<Role> => ({
-    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters, close }) => (
+    filterDropdown: ({ selectedKeys, close }) => (
       <div style={{ padding: 8 }} onKeyDown={(e) => e.stopPropagation()}>
         <Input
           placeholder={`${intl.formatMessage({id:"global.search"})} ${dataIndex}`}
@@ -102,7 +102,7 @@ export default function(){
             dataIndex: 'name',
             filterSearch: true,
             sorter:true,
-            render:(value,record,index)=>{
+            render:(value,record)=>{
                 return(
                     <a onClick={()=>{showDetails(record)}}>{value}</a>
                 )
@@ -114,7 +114,7 @@ export default function(){
             dataIndex: 'value',
             filterSearch: true,
             sorter:true,
-            render:(value,record,index)=>{
+            render:(value)=>{
                 return(
                     <Tag>{value}</Tag>
                 )
@@ -127,7 +127,7 @@ export default function(){
             width:"160px",
             sorter:true,
             filters:filterYesOrNo,
-            render(value, record, index) {
+            render(value) {
                 return(
                     <Tag color={value ? "red" : "green" }>{yesOrNo.find(item=>item.value == value)?.label}</Tag>
                 )
@@ -145,7 +145,8 @@ export default function(){
             dataIndex: 'id',
             width:"160px",
             align:"right",
-            render(value,record,index){
+            render(value,record){
+                console.log(value)
                 let buttons=[
                     <Tooltip key="details-btn" title={intl.formatMessage({id:"global.details"})}>
                         <Button type="text" onClick={()=>{showDetails(record)}} icon={<Binoculars size={14} />} />

package/templates/antd-layout-vite-max/src/pages/transaction/components.tsx

@@ -394,10 +394,12 @@ export function useOrderModel(){
         setOpenPayment(true)
     }
     const deleteOrder=(order:Order)=>{
+        console.log(order)
         message.success(intl.formatMessage({id:"order.confirm.create.success"}))        
     }
 
-    const verifyOrder=(order:Order)=>{
+    const verifyOrder=(order:Order)=>{        
+        console.log(order)
         message.info(intl.formatMessage({id:"order.confirm.verify.completed"}))
     }
     const detailsDrawer = <OrderDetailsDrawer zIndex={1} order={detailsRecord} size={500} open={openDetails} onClose={()=>{setOpenDetails(false)}} onEdit={showEditDrawer} onDelete={deleteOrder} onPayment={showPaymentModal} onVerify={verifyOrder} />    

package/templates/antd-layout-vite-max/src/pages/transaction/order.tsx

@@ -1,5 +1,5 @@
 import { Container } from "@adminui-dev/antd-layout";
-import {  Button, Flex,  Space, Table, Tag, Grid, theme, Input, Tooltip,App, Popconfirm, Divider} from 'antd';
+import {  Button, Flex,  Space, Table, Tag, Grid, theme, Input, Tooltip,App, Popconfirm } from 'antd';
 import  type { TableColumnsType, TableProps,TableColumnType,PopconfirmProps } from 'antd';
 import type { Order } from "@/pages/typings";
 import { Search,Download,Printer,Trash, PackageCheck,Plus,Check,SquarePen,Binoculars,WalletCards } from "lucide-react";
@@ -61,7 +61,7 @@ export default function(){
     
 
     const getColumnSearchProps = (dataIndex: DataIndex): TableColumnType<Order> => ({
-    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters, close }) => (
+    filterDropdown: ({ selectedKeys, close }) => (
       <div style={{ padding: 8 }} onKeyDown={(e) => e.stopPropagation()}>
         <Input
           placeholder={`${intl.formatMessage({id:"global.search"})} ${dataIndex}`}
@@ -108,7 +108,7 @@ export default function(){
             dataIndex: 'sn',
             filterSearch: true,
             sorter:true,
-            render:(value,record,index)=>{
+            render:(value,record)=>{
                 return(
                     <a onClick={()=>{showOrderDetails(record)}}>{value}</a>
                 )
@@ -136,7 +136,7 @@ export default function(){
             dataIndex: 'orderStatus',
             width:"160px",
             filters:filterOrderStatus,
-            render(value, record, index) {
+            render(value) {
                 return(
                     <Tag color={getOrderStatusColor(value)} >{filterOrderStatus.find(item=>item.value == value)?.text}</Tag>
                 )
@@ -159,7 +159,7 @@ export default function(){
             dataIndex: 'paymentStatus',
             width:"180px",
             filters:filterPaymentStatus,
-            render(value, record, index) {
+            render(value) {
                 const tagValue = filterPaymentStatus.find(item=>item.value == value)?.text
                 return(
                     value=="PAID" ? <Tag color={"green"} style={{display:"inline-flex", alignItems:"center",gap:"2px"}} icon={<Check size={14} />} >{tagValue}</Tag> : <Tag>{tagValue}</Tag>
@@ -178,7 +178,7 @@ export default function(){
             dataIndex: 'id',
             width:"160px",
             align:"right",
-            render(value,record,index){
+            render(record){
                 let buttons=[<Tooltip key="details-btn" title={intl.formatMessage({id:"order.drawer.details.title"})}>
                             <Button onClick={()=>{showOrderDetails(record)}} type="text" icon={<Binoculars size={14} />} />
                         </Tooltip>]
@@ -206,6 +206,7 @@ export default function(){
     }
 
     const onConfirmDelete:PopconfirmProps["onConfirm"]=(e)=>{
+        console.log(e)
         message.success(intl.formatMessage({id:"order.confirm.create.success"}))        
     }
 

package/templates/antd-layout-vite-max/src/pages/transaction/product.tsx

@@ -55,7 +55,7 @@ export default function(){
     }
     
     const getColumnSearchProps = (dataIndex: DataIndex): TableColumnType<Product> => ({
-    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters, close }) => (
+    filterDropdown: ({ selectedKeys, close }) => (
       <div style={{ padding: 8 }} onKeyDown={(e) => e.stopPropagation()}>
         <Input
           placeholder={`${intl.formatMessage({id:"global.search"})} ${dataIndex}`}
@@ -102,7 +102,7 @@ export default function(){
             dataIndex: 'image',
             filterSearch: true,
             sorter:true,
-            render:(value,record,index)=>{
+            render:(value,record)=>{
                 return(
                     <a><LazyImage style={{width:"60px"}} src={value} alt={record.name} /></a>
                 )
@@ -113,7 +113,7 @@ export default function(){
             dataIndex: 'sn',
             filterSearch: true,
             sorter:true,
-            render:(value,record,index)=>{
+            render:(value)=>{
                 return(
                     <a>{value}</a>
                 )
@@ -141,7 +141,7 @@ export default function(){
             dataIndex: 'categories',
             width:"160px",
             filters:filterProductCaties,
-            render(value, record, index) {
+            render(value) {
                 return(
                     <Tag>{productCaties.find(item=>item.value == value)?.label}</Tag>
                 )
@@ -158,7 +158,7 @@ export default function(){
             dataIndex: 'arrive',        
             sorter:true,
             filters:filterYesOrNo,
-            render(value, record, index) {
+            render(value) {
                 return(
                     <Tag color={value ? "green" : "default"}>{yesOrNo.find(item=>item.value == value)?.label}</Tag>
                 )
@@ -169,7 +169,7 @@ export default function(){
             dataIndex: 'disabled',          
             sorter:true,
             filters:filterYesOrNo,
-            render(value, record, index) {
+            render(value) {
                 return(
                     <Tag color={value ? "green" : "default"}>{yesOrNo.find(item=>item.value == value)?.label}</Tag>
                 )
@@ -186,10 +186,11 @@ export default function(){
             dataIndex: 'id',
             width:"160px",
             align:"right",
-            render(value,record,index){
-                let buttons=[<Tooltip key="details-btn" title={intl.formatMessage({id:"order.drawer.details.title"})}>
+            render(value){
+                console.log(value)
+                let buttons=[<Tooltip key="details-btn" title={intl.formatMessage({id:"global.details"})}>
                             <Button type="text" icon={<Binoculars size={14} />} />
-                        </Tooltip>,<Tooltip key="edit-btn" title={intl.formatMessage({id:"order.button.edit"})}>
+                        </Tooltip>,<Tooltip key="edit-btn" title={intl.formatMessage({id:"product.button.edit"})}>
                             <Button type="text" icon={<SquarePen size={14} />} />
                         </Tooltip>]
                 return(

package/templates/antd-layout-vite-max/src/pages/workbench/monitoring/components.tsx

@@ -96,7 +96,8 @@ function AreaChartPanel(){
         setEndTime(Date.now() + 60 * 5 * 1000)
     }
 
-    const onChangeHandler=(option:any,total:number,overly:boolean)=>{      
+    const onChangeHandler=(option:any,total:number,overly:boolean)=>{    
+      console.log(total)  
       if(!overly && appChart.current){
         const ops = {grid:{left:intl.locale=='en-US'? '80px' : '40px'},...option}
         appChart.current.setOption(ops)

package/templates/antd-layout-vite-max/src/pages/workbench/notifications.tsx

@@ -91,9 +91,9 @@ export default function(){
             title: 'ID',
             dataIndex: 'avatar',
             width:"60px",
-            render(value, record, index) {
+            render(value, record) {
                 return(
-                    <LazyAvatar key={index} size={"small"} src={value} />
+                    <LazyAvatar key={record.id} size={"small"} src={value} />
                 )
             },
         },  
@@ -145,6 +145,7 @@ export default function(){
     }
 
     const onConfirmClean:PopconfirmProps["onConfirm"]=(e)=>{
+        console.log(e)
         message.success(intl.formatMessage({id:"notifications.clean.confirm.success"}))        
     }
     const btnDisable = selectedRowKeys.length <= 0

package/templates/antd-layout-vite-max/src/pages/workbench/report/visit.tsx

@@ -1,9 +1,9 @@
 import { Container} from "@adminui-dev/antd-layout";
 import {  Button, Flex,  Space, Table, Tag, Grid, theme, Input, Tooltip,App } from 'antd';
-import type { TableColumnsType, TableProps,TableColumnType,InputRef } from 'antd';
+import type { TableColumnsType, TableColumnType } from 'antd';
 import type { Visit } from "@/pages/typings";
 import { Search,Download,Printer,ChartPie } from "lucide-react";
-import { useRef, useState } from "react";
+import { useRef } from "react";
 import { useIntl } from "react-intl";
 import { printElement } from "@/utils/printUtil";
 import useVisitChart from "./components";
@@ -96,7 +96,7 @@ export default function(){
     ]
     
     const getColumnSearchProps = (dataIndex: DataIndex): TableColumnType<Visit> => ({
-    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters, close }) => (
+    filterDropdown: ({ selectedKeys, close }) => (
       <div style={{ padding: 8 }} onKeyDown={(e) => e.stopPropagation()}>
         <Input
           placeholder={`${intl.formatMessage({id:"global.search"})} ${dataIndex}`}
@@ -160,7 +160,7 @@ export default function(){
             dataIndex: 'device',
             width:"140px",
             filters:filterDeviceOptions,
-            render(value, record, index) {
+            render(value) {
                 return(
                     <Tag>{value}</Tag>
                 )
@@ -172,7 +172,7 @@ export default function(){
             dataIndex: 'os',
             width:"140px",
             filters:filterOsOptions,
-            render(value, record, index) {
+            render(value) {
                 return(
                     <Tag>{value}</Tag>
                 )