[refactor]: replace string literals with entity classes in database operations and update Tabs component structure;

Author: maifeeulasad

examples/vite+react/src/component/landing/Landing.tsx

@@ -4,7 +4,6 @@ import { User, Post, UserProject, Activity } from '../../entities';
 import useIDBOperations from '../../hook/useIDBOperations';
 
 const { Title, Paragraph } = Typography;
-const { TabPane } = Tabs;
 
 const Context = React.createContext({ name: 'Default' });
 
@@ -60,10 +59,10 @@ const Landing = () => {
   const loadData = async () => {
     try {
       const [usersData, postsData, projectsData, activitiesData] = await Promise.all([
-        listItems<User>('User'),
-        listItems<Post>('Post'), 
-        listItems<UserProject>('UserProject'),
-        listItems<Activity>('Activity')
+        listItems<User>(User),
+        listItems<Post>(Post), 
+        listItems<UserProject>(UserProject),
+        listItems<Activity>(Activity)
       ]);
 
       setUsers(usersData);
@@ -91,15 +90,15 @@ const Landing = () => {
   const handleCreateUser = async () => {
     try {
       const user = new User(newUser.name, newUser.email, newUser.age, newUser.address);
-      await createItem('User', user);
+      await createItem(User, user);
 
       // Create login activity
       const loginActivity = new Activity(newUser.email, 'login', { 
         ip: '192.168.1.100', 
         browser: 'Chrome',
         timestamp: Date.now()
       });
-      await createItem('Activity', loginActivity);
+      await createItem(Activity, loginActivity);
 
       setIsUserModalVisible(false);
       setNewUser({ name: '', email: '', age: 18, address: '' });
@@ -113,7 +112,7 @@ const Landing = () => {
 
   const handleDeleteUser = async (id: number) => {
     try {
-      await deleteItem('User', id);
+      await deleteItem(User, id);
       await loadData();
       showNotification('success', 'User deleted successfully!');
     } catch (err) {
@@ -126,14 +125,14 @@ const Landing = () => {
   const handleCreatePost = async () => {
     try {
       const post = new Post(newPost.title, newPost.content, newPost.authorEmail, newPost.category);
-      await createItem('Post', post);
+      await createItem(Post, post);
 
       // Create post creation activity
       const postActivity = new Activity(newPost.authorEmail, 'post_created', {
         postTitle: newPost.title,
         category: newPost.category
       });
-      await createItem('Activity', postActivity);
+      await createItem(Activity, postActivity);
 
       setIsPostModalVisible(false);
       setNewPost({ title: '', content: '', authorEmail: '', category: 'general' });
@@ -147,7 +146,7 @@ const Landing = () => {
 
   const handleDeletePost = async (uuid: string) => {
     try {
-      await deleteItem('Post', uuid);
+      await deleteItem(Post, uuid);
       await loadData();
       showNotification('success', 'Post deleted successfully!');
     } catch (err) {
@@ -160,7 +159,7 @@ const Landing = () => {
   const handleCreateProject = async () => {
     try {
       const project = new UserProject(newProject.userId, newProject.projectId, newProject.role);
-      await createItem('UserProject', project);
+      await createItem(UserProject, project);
 
       setIsProjectModalVisible(false);
       setNewProject({ userId: '', projectId: '', role: 'member' });
@@ -174,7 +173,7 @@ const Landing = () => {
 
   const handleDeleteProject = async (userId: string, projectId: string) => {
     try {
-      await deleteItem('UserProject', [userId, projectId]);
+      await deleteItem(UserProject, [userId, projectId]);
       await loadData();
       showNotification('success', 'Project relationship deleted successfully!');
     } catch (err) {
@@ -187,21 +186,21 @@ const Landing = () => {
   const handleAdvancedQueries = async () => {
     try {
       // Query active users older than 25
-      const activeUsers = await queryItems<User>('User', (query) =>
+      const activeUsers = await queryItems<User>(User, (query) =>
         query.where('status').equals('active')
           .and('age').gt(25)
           .orderBy('age', 'asc')
       );
 
       // Query posts by category
-      const tutorialPosts = await queryItems<Post>('Post', (query) =>
+      const tutorialPosts = await queryItems<Post>(Post, (query) =>
         query.where('category').equals('tutorial')
           .orderBy('publishedAt', 'desc')
           .limit(5)
       );
 
       // Query recent activities
-      const recentActivities = await queryItems<Activity>('Activity', (query) =>
+      const recentActivities = await queryItems<Activity>(Activity, (query) =>
         query.where('timestamp').gte(Date.now() - 24 * 60 * 60 * 1000)
           .orderBy('timestamp', 'desc')
           .limit(10)
@@ -227,7 +226,7 @@ const Landing = () => {
       ];
 
       for (const user of demoUsers) {
-        await createItem('User', user);
+        await createItem(User, user);
       }
 
       // Create demo posts
@@ -238,7 +237,7 @@ const Landing = () => {
       ];
 
       for (const post of demoPosts) {
-        await createItem('Post', post);
+        await createItem(Post, post);
       }
 
       // Create demo projects
@@ -249,7 +248,7 @@ const Landing = () => {
       ];
 
       for (const project of demoProjects) {
-        await createItem('UserProject', project);
+        await createItem(UserProject, project);
       }
 
       await loadData();
@@ -368,52 +367,68 @@ const Landing = () => {
         </Space>
 
         {/* Data Tables */}
-        <Tabs defaultActiveKey="1">
-          <TabPane tab="Users (Auto-increment ID)" key="1">
-            <Table 
-              columns={userColumns} 
-              dataSource={users} 
-              rowKey="id" 
-              loading={loading}
-              pagination={{ pageSize: 5 }}
-            />
-          </TabPane>
-          
-          <TabPane tab="Posts (UUID Keys)" key="2">
-            <Table 
-              columns={postColumns} 
-              dataSource={posts} 
-              rowKey="uuid" 
-              loading={loading}
-              pagination={{ pageSize: 5 }}
-            />
-          </TabPane>
-          
-          <TabPane tab="Projects (Composite Keys)" key="3">
-            <Table 
-              columns={projectColumns} 
-              dataSource={userProjects} 
-              rowKey={(record) => `${record.userId}-${record.projectId}`}
-              loading={loading}
-              pagination={{ pageSize: 5 }}
-            />
-          </TabPane>
-          
-          <TabPane tab="Activities (Custom Keys)" key="4">
-            <Table 
-              columns={activityColumns} 
-              dataSource={activities} 
-              rowKey="activityId" 
-              loading={loading}
-              pagination={{ pageSize: 5 }}
-            />
-          </TabPane>
-        </Tabs>
+        <Tabs 
+          defaultActiveKey="1"
+          items={[
+            {
+              key: '1',
+              label: 'Users (Auto-increment ID)',
+              children: (
+                <Table 
+                  columns={userColumns} 
+                  dataSource={users} 
+                  rowKey="id" 
+                  loading={loading}
+                  pagination={{ pageSize: 5 }}
+                />
+              )
+            },
+            {
+              key: '2',
+              label: 'Posts (UUID Keys)',
+              children: (
+                <Table 
+                  columns={postColumns} 
+                  dataSource={posts} 
+                  rowKey="uuid" 
+                  loading={loading}
+                  pagination={{ pageSize: 5 }}
+                />
+              )
+            },
+            {
+              key: '3',
+              label: 'Projects (Composite Keys)',
+              children: (
+                <Table 
+                  columns={projectColumns} 
+                  dataSource={userProjects} 
+                  rowKey={(record) => `${record.userId}-${record.projectId}`}
+                  loading={loading}
+                  pagination={{ pageSize: 5 }}
+                />
+              )
+            },
+            {
+              key: '4',
+              label: 'Activities (Custom Keys)',
+              children: (
+                <Table 
+                  columns={activityColumns} 
+                  dataSource={activities} 
+                  rowKey="activityId" 
+                  loading={loading}
+                  pagination={{ pageSize: 5 }}
+                />
+              )
+            }
+          ]}
+        />
 
         {/* Add User Modal */}
         <Modal
           title="Add New User (Auto-increment ID)"
-          visible={isUserModalVisible}
+          open={isUserModalVisible}
           onOk={handleCreateUser}
           onCancel={() => setIsUserModalVisible(false)}
           okText="Create User"
@@ -447,7 +462,7 @@ const Landing = () => {
         {/* Add Post Modal */}
         <Modal
           title="Add New Post (UUID Key)"
-          visible={isPostModalVisible}
+          open={isPostModalVisible}
           onOk={handleCreatePost}
           onCancel={() => setIsPostModalVisible(false)}
           okText="Create Post"
@@ -480,7 +495,7 @@ const Landing = () => {
         {/* Add Project Modal */}
         <Modal
           title="Add New Project (Composite Key)"
-          visible={isProjectModalVisible}
+          open={isProjectModalVisible}
           onOk={handleCreateProject}
           onCancel={() => setIsProjectModalVisible(false)}
           okText="Create Project"