Finefoods Ant Design Admin Panel - refin...
Hi everyone, I am new to refine admin framework. My background from SPA react js and Node middleware write in typescript. I am looking for a right tool to develop Privilege Account Review and Management for company. Does refine admin support my existing restful api? And does it allow me to build custom page? So far my reference is based on Finefoods https://example.admin.refine.dev/
Finefoods Ant Design Admin Panel - refine
Web site created using refine
4 Replies
conservation-jade•2y ago
Hey @KFC Kenneth. refine has full support for custom data providers and APIs. If you have a REST API, I think
@pankod/refine-simple-rest will be the right choice for you. Let us know if you have any issues while developing, I'm sure we can find a solution 🚀
Also, yeah custom pages are supported and you can create your own routes with every supported router package 🙏Hey @aliemirs! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave:
----------------------
Refine is a great choice for building a React admin panel with Ant Design. It ships with out-of-the-box support for authentication, i18n, routing, and state management. You can use the refine command line tool to quickly get up and running with a basic refine project.
To customize the admin panel, you can use Superplate to create a
import {
AntdLayout,
Space,
Menu,
Button,
Icons,
Dropdown,
Radio,
} from "@pankod/refine-antd";
import { useTranslation } from "react-i18next";
const { DownOutlined } = Icons;
interface HeaderProps {
role: string;
}
export const Header: React.FC<HeaderProps> = ({ role }) => {
const { i18n } = useTranslation();
const locale = useGetLocale();
const changeLanguage = useSetLocale();
const currentLocale = locale();
const menu = (
<Menu selectedKeys={[currentLocale]}>
{[...(i18n.languages || [])].sort().map((lang: string) => (
<Menu.Item key={lang} onClick={() => changeLanguage(lang)}>
{lang === "en" ? "English" : "German"}
</Menu.Item>
))}
</Menu>
);
return (
<AntdLayout.Header
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
padding: "0px 24px",
height: "48px",
backgroundColor: "#FFF",
}}
value={role}
onChange={(event) => {
localStorage.setItem("role", event.target.value);
location.reload();
}}
<Radio.Button value="editor">Editor</Radio.Button>
</Radio.Group>
<Dropdown overlay={menu}>
<Button type="link">
<Space>
{currentLocale === "en" ? "English" : "German"}
<DownOutlined />
</Space>
</Button ----------------------
refine project. To do this, run the following command in your terminal:
Then, follow the prompts to select your project type, name, package manager, UI framework, router provider, data provider, auth provider, example pages, customized layout, and i18n.
Once you have created the project, you can run the following commands to get started:
You can then modify the default settings to suit your needs. For example, you can add a listing page in refine for the companies crud end-point. To do this, add the following code to /admin/src/pages/companies/list.tsx:
```
import { useGetLocale, useSetLocale } from "@pankod/refine-core";import {
AntdLayout,
Space,
Menu,
Button,
Icons,
Dropdown,
Radio,
} from "@pankod/refine-antd";
import { useTranslation } from "react-i18next";
const { DownOutlined } = Icons;
interface HeaderProps {
role: string;
}
export const Header: React.FC<HeaderProps> = ({ role }) => {
const { i18n } = useTranslation();
const locale = useGetLocale();
const changeLanguage = useSetLocale();
const currentLocale = locale();
const menu = (
<Menu selectedKeys={[currentLocale]}>
{[...(i18n.languages || [])].sort().map((lang: string) => (
<Menu.Item key={lang} onClick={() => changeLanguage(lang)}>
{lang === "en" ? "English" : "German"}
</Menu.Item>
))}
</Menu>
);
return (
<AntdLayout.Header
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
padding: "0px 24px",
height: "48px",
backgroundColor: "#FFF",
}}
<Radio.Group
value={role}
onChange={(event) => {
localStorage.setItem("role", event.target.value);
location.reload();
}}
<Radio.Button value="admin">Admin</Radio.Button>
<Radio.Button value="editor">Editor</Radio.Button>
</Radio.Group>
<Dropdown overlay={menu}>
<Button type="link">
<Space>
{currentLocale === "en" ? "English" : "German"}
<DownOutlined />
</Space>
</Button ----------------------
Did kapa.ai help answer your question?
<@339382369469595651> kapa.ai is still learning and improving, please let us how it did by reacting with a :thumbsup: or :thumbsdown:
continuing-cyan•2y ago
Thank you @aliemirs, I will use Refine admin for my company' project. May I know if using with Inferencer to generate CRUD pages for my MongoDB collections, do my api need to all POST, GET, PATCH, DELETE in order to make the automation work? Thank you for your reply.