managment frontend initiated
This commit is contained in:
@@ -1,23 +1,95 @@
|
||||
"use server";
|
||||
|
||||
export default async function Home() {
|
||||
const result = await fetch("http://auth_service:8001/authentication/login", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
language: "tr",
|
||||
domain: "evyos.com.tr",
|
||||
tz: "GMT+3",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
access_key: "karatay.berkay.sup@evyos.com.tr",
|
||||
password: "string",
|
||||
remember_me: true,
|
||||
}),
|
||||
// Server-side rendering
|
||||
const currentDate = new Date().toLocaleString("tr-TR", {
|
||||
timeZone: "Europe/Istanbul",
|
||||
});
|
||||
const data = await result.json();
|
||||
|
||||
return (
|
||||
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
|
||||
{JSON.stringify({ data: data?.data })}
|
||||
<div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-b from-blue-50 to-white p-8">
|
||||
<div className="w-full max-w-4xl bg-white rounded-xl shadow-lg overflow-hidden">
|
||||
{/* Welcome Banner */}
|
||||
<div className="bg-blue-600 text-white p-8 text-center">
|
||||
<h1 className="text-4xl font-bold mb-2">Welcome to EVYOS</h1>
|
||||
<p className="text-xl">Enterprise Management System</p>
|
||||
<p className="text-sm mt-4">Server Time: {currentDate}</p>
|
||||
</div>
|
||||
|
||||
{/* Login Section */}
|
||||
<div className="p-8">
|
||||
<div className="bg-white rounded-lg p-6 border border-gray-200">
|
||||
<h2 className="text-2xl font-semibold text-center mb-6 text-gray-800">
|
||||
Login to Your Account
|
||||
</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label
|
||||
className="block text-gray-700 text-sm font-medium mb-2"
|
||||
htmlFor="email"
|
||||
>
|
||||
Email Address
|
||||
</label>
|
||||
<input
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="Enter your email"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
className="block text-gray-700 text-sm font-medium mb-2"
|
||||
htmlFor="password"
|
||||
>
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
id="password"
|
||||
type="password"
|
||||
placeholder="Enter your password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
id="remember_me"
|
||||
type="checkbox"
|
||||
className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
|
||||
/>
|
||||
<label
|
||||
htmlFor="remember_me"
|
||||
className="ml-2 block text-sm text-gray-700"
|
||||
>
|
||||
Remember me
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="text-sm">
|
||||
<a
|
||||
href="#"
|
||||
className="font-medium text-blue-600 hover:text-blue-500"
|
||||
>
|
||||
Forgot your password?
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
|
||||
Sign In
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 text-center text-sm text-gray-600">
|
||||
<p>© {new Date().getFullYear()} EVYOS. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,111 @@
|
||||
# REACT_TEMPLATE_BLUEPRINT
|
||||
|
||||
## Component Structure Reference
|
||||
|
||||
```
|
||||
template/
|
||||
├── schema.ts # Data validation, field definitions, mock API
|
||||
├── hooks.ts # Custom hooks for data fetching and state management
|
||||
├── language.ts # Internationalization support
|
||||
├── app.tsx # Main orchestration component
|
||||
├── FormComponent.tsx # Form handling with validation
|
||||
├── SearchComponent.tsx # Field-specific search functionality
|
||||
├── DataDisplayComponent.tsx # Card-based data display
|
||||
├── ListInfoComponent.tsx # Pagination information and controls
|
||||
├── SortingComponent.tsx # Column sorting functionality
|
||||
├── PaginationToolsComponent.tsx # Page size and navigation controls
|
||||
└── ActionButtonsComponent.tsx # Context-aware action buttons
|
||||
```
|
||||
|
||||
## Core Features
|
||||
|
||||
- Zod schema validation
|
||||
- Field-specific search
|
||||
- Multi-field sorting (none/asc/desc)
|
||||
- Pagination with configurable page sizes
|
||||
- Form validation with error messages
|
||||
- Create/Update/View modes
|
||||
- Internationalization (en/tr)
|
||||
- Responsive design with Tailwind CSS
|
||||
|
||||
## Implementation Details
|
||||
|
||||
### Schema Structure
|
||||
```typescript
|
||||
// Base schema with validation
|
||||
export const DataSchema = z.object({
|
||||
id: z.string().optional(),
|
||||
title: z.string(),
|
||||
description: z.string().optional(),
|
||||
status: z.string(),
|
||||
createdAt: z.string().or(z.date()).optional(),
|
||||
updatedAt: z.string().or(z.date()).optional(),
|
||||
});
|
||||
|
||||
// Field definitions with metadata
|
||||
const baseFieldDefinitions = {
|
||||
id: { type: "text", group: "identificationInfo", label: "ID" },
|
||||
title: { type: "text", group: "basicInfo", label: "Title" },
|
||||
// Additional fields...
|
||||
};
|
||||
```
|
||||
|
||||
### Hook Implementation
|
||||
```typescript
|
||||
export function usePaginatedData() {
|
||||
// State management for data, pagination, loading, errors
|
||||
// API fetching with debouncing
|
||||
// Data validation with Zod
|
||||
// Pagination state updates
|
||||
}
|
||||
```
|
||||
|
||||
### Component Integration
|
||||
```typescript
|
||||
function TemplateApp({ lang = "en" }) {
|
||||
// Data fetching with custom hook
|
||||
// Mode management (list/create/view/update)
|
||||
// Component orchestration
|
||||
}
|
||||
```
|
||||
|
||||
## Build Instructions
|
||||
|
||||
1. Create directory structure
|
||||
2. Implement schema with Zod validation
|
||||
3. Create custom hooks for data fetching
|
||||
4. Implement internationalization
|
||||
5. Build form component with validation
|
||||
6. Create search component with field selection
|
||||
7. Implement data display with cards
|
||||
8. Add pagination and sorting
|
||||
9. Connect components in main app
|
||||
10. Style with Tailwind CSS
|
||||
|
||||
## Date Display Format
|
||||
|
||||
Always use toLocaleString() instead of toLocaleDateString() for date formatting to show both date and time together.
|
||||
|
||||
## API Integration
|
||||
|
||||
Replace mock API functions with actual API calls:
|
||||
- GET for list view with pagination/sorting/filtering
|
||||
- POST for create operations
|
||||
- PUT/PATCH for update operations
|
||||
- GET with ID for view operations
|
||||
|
||||
## Field Types Support
|
||||
|
||||
- text: Standard text input
|
||||
- textarea: Multi-line text input
|
||||
- select: Dropdown selection
|
||||
- date: Date picker
|
||||
- checkbox: Boolean toggle
|
||||
- number: Numeric input
|
||||
|
||||
## Customization Points
|
||||
|
||||
- schema.ts: Data structure and validation
|
||||
- language.ts: Text translations
|
||||
- FormComponent.tsx: Field rendering logic
|
||||
- app.tsx: Component composition
|
||||
@@ -0,0 +1,90 @@
|
||||
# React Template Component
|
||||
|
||||
This directory contains a reusable React template for building data management interfaces with complete CRUD (Create, Read, Update, Delete) functionality.
|
||||
|
||||
## Overview
|
||||
|
||||
The template provides a ready-to-use solution for displaying, searching, sorting, and editing data with a modern UI. It's designed to be easily customizable for different data types while maintaining a consistent user experience.
|
||||
|
||||
## Key Features
|
||||
|
||||
- **Data Display**: Card-based UI for showing data items
|
||||
- **Advanced Search**: Field-specific search capabilities
|
||||
- **Sorting**: Multi-field sorting with ascending/descending options
|
||||
- **Pagination**: Configurable page sizes and navigation
|
||||
- **Form Handling**: Create/Update/View modes with validation
|
||||
- **Internationalization**: Built-in support for multiple languages
|
||||
- **Responsive Design**: Works on desktop and mobile devices
|
||||
|
||||
## Component Structure
|
||||
|
||||
The template is organized into modular components that work together:
|
||||
|
||||
### Core Files
|
||||
|
||||
- **`schema.ts`**: Defines the data structure using Zod validation
|
||||
- **`hooks.ts`**: Custom hook for data fetching and pagination
|
||||
- **`language.ts`**: Internationalization support
|
||||
- **`app.tsx`**: Main component that orchestrates all other components
|
||||
|
||||
### UI Components
|
||||
|
||||
- **`FormComponent.tsx`**: Handles data entry and editing
|
||||
- **`SearchComponent.tsx`**: Provides field-specific search functionality
|
||||
- **`DataDisplayComponent.tsx`**: Displays data items in a card format
|
||||
- **`ListInfoComponent.tsx`**: Shows pagination information and controls
|
||||
- **`SortingComponent.tsx`**: Manages column sorting
|
||||
- **`PaginationToolsComponent.tsx`**: Controls for page size and navigation
|
||||
- **`ActionButtonsComponent.tsx`**: Context-aware action buttons
|
||||
|
||||
## How to Use
|
||||
|
||||
1. **Basic Usage**:
|
||||
```jsx
|
||||
import TemplateApp from './template/app';
|
||||
|
||||
function MyPage() {
|
||||
return <TemplateApp lang="en" />;
|
||||
}
|
||||
```
|
||||
|
||||
2. **Customizing Data Schema**:
|
||||
- Modify `schema.ts` to match your data structure
|
||||
- Update field definitions with appropriate types, labels, and grouping
|
||||
|
||||
3. **API Integration**:
|
||||
- Replace the mock `fetchData` function in `schema.ts` with your actual API call
|
||||
- Implement the create/update API calls in `FormComponent.tsx`
|
||||
|
||||
4. **Styling**:
|
||||
- The template uses Tailwind CSS classes for styling
|
||||
- Customize the appearance by modifying the CSS classes
|
||||
|
||||
## Data Flow
|
||||
|
||||
1. User interacts with the UI (search, sort, paginate)
|
||||
2. Component state updates trigger API calls
|
||||
3. Data is fetched, validated, and stored in state
|
||||
4. UI components render based on the current state
|
||||
5. Form submissions trigger API calls with validated data
|
||||
|
||||
## Example Workflow
|
||||
|
||||
1. **List View**: Users see paginated data with search and sort options
|
||||
2. **Create**: Click "Create New" to open a form for adding a new item
|
||||
3. **View**: Click "View" on an item to see all its details
|
||||
4. **Update**: Click "Update" on an item to edit its information
|
||||
|
||||
## Customization Tips
|
||||
|
||||
- **Adding Fields**: Update both the Zod schema and field definitions
|
||||
- **New Field Types**: Extend the form rendering logic in `FormComponent.tsx`
|
||||
- **Additional Languages**: Add new language entries to `language.ts`
|
||||
- **Custom Styling**: Modify the Tailwind classes in each component
|
||||
|
||||
## Best Practices
|
||||
|
||||
- Keep the schema definition in sync with your backend API
|
||||
- Use the field grouping feature to organize complex forms
|
||||
- Leverage the built-in validation to ensure data quality
|
||||
- Consider adding custom field types for specific data needs
|
||||
Reference in New Issue
Block a user