Moderator UI #54
Moderator UI #54
Conversation
… NewFamersTable with stylesheets. updated pages: moderator/certificates, moderator/farmer_documents, moderator/users
|
@Missyandrea can you resolve the merge conflicts you have in your pr |
There was a problem hiding this comment.
the moderator structure under the pages folder can be improved as well so it's easier to navigate as there's no link to check accepted_users except I change the URL directly.
What do you think about this structure ? ChatGpt helped with structure btw :)
pages/
├── moderator/
│ ├── index.tsx (Main moderator panel component)
│ ├── users/
│ │ ├── index.tsx (Users section component)
│ │ ├── new_user.tsx (New user component)
│ │ ├── accepted_users/
│ │ │ └── index.tsx (Accepted users component)
│ ├── farmers_documents/
│ │ ├── index.tsx (Farmers' documents section component)
│ │ └── farmers_documents.tsx (Farmers' documents component)
│ ├── certificates/
│ │ ├── index.tsx (Certificates section component)
│ │
| document1: string | null | ||
| document2: string | null | ||
| } | ||
|
|
There was a problem hiding this comment.
It's a good practice to centralize reusable types/interfaces in a shared location rather than duplicating them across multiple components so it can be easily maintained. You can create a separate file ( types.ts) in the lib folder and export the Farmer interface from there.
types.ts
export interface Farmer {
id: number;
name: string;
email: string;
time: string;
status: string;
certificate: string | null;
code: number | null;
document1: string | null;
document2: string | null;
}
| <div className="flex items-center"> | ||
| <CloseCircleOutline /> | ||
| <p className="ms-2 text-sm">Reject</p> | ||
| </div> |
There was a problem hiding this comment.
The approve and reject buttons can be a component that you can re-use here and the new farmers table
| }, | ||
| ] | ||
|
|
||
| const [revealButtons, setRevealButtons] = useState(false) |
There was a problem hiding this comment.
and maybe a type check for the revealButton state as well
const [revealButtons, setRevealButtons] = useState<boolean>(false)
| setCurrentPage(selectedPage.selected) | ||
| } | ||
|
|
||
| const handleButtons = (farmer: Farmer) => { |
There was a problem hiding this comment.
and the handleButtons could be a custom function or hook that can be used both on newfarmerstable and here
|
Oh, I also noticed from the design that this UI is just a wireframe, I'm not sure if it has been approved for development. |
The Moderator Flow design has been added
All Users page
Accepted users page
Accepted Users details
Farmer documents page
Farmer documents details
Certificates page
